読者です 読者をやめる 読者になる 読者になる

Browser

Microsoft Edge(Project Spartan, Internet Explorer) 、ブラウザ周辺、Web フロントエンド開発、UI、など

Microsoft Edge まとめページ

開発

Microsoft Edge で使う拡張された srcset と picture 要素

今回も Microsoft Edge Dev Blog から 以前、 srcset 使用した場合は解像度のみ使用できました。 今回で使うサンプル サンプルウインドウの幅を変更すると変化を確認できます。 拡張された機能 伸縮する際の画像幅に指定できます。 サイズの属性を使用すると…

Platform Status 10月の変更

いつもの参照元 前回調べた日付は9月18日です。9月分を忘れており遅くなったため、今回の更新は少ないです。 ニューヨークでの Windows 10 デバイス関連イベント後に大幅に変わっているようでしたら再度調べます。 Preview になったもの 今回はありません 開…

WinJS が 4.4 になりました

まだ、公式ページは 4.3 ですがGithub と CDN の方は 4.4 になっています 変更点 ListView、FlipView、Pivot、Semantic Zoom のクロスブラウザでのレスポンシブ対応。ViewBox、Hub のクロスブラウザでのレスポンシブ対応と機能変更・追加です。

Microsoft Edge の機能を調べてみた - Async Functions(async/await) 編

今回は MICROSOFT EDGE DEV BLOG の記事から抜粋 非同期処理を簡単に記述する async / await が ES7/ES2016 で導入される予定で、Build 10547 の Microsoft Edge で実装されました。(Build 10532 でも動きましたが実装に問題があったようです) async / awa…

Microsoft Edge、アクセシビリティの改善

参照元(英語) Microsoft Edge build 10240 で他のブラウザではすでにある ARIA Landmark Roles が正式対応。Web サイトの音声読み上げがタグの属性に応じて内容を知らせるようになりました。日本語で読み上げもされます。 読み上げの設定方法 設定を開き、…

Microsoft Edge の機能を調べてみた - アロー関数(Arrow Functions) 編

今更ですが、アロー関数のご紹介。 Build 10240 で Microsoft Edge に正式対応した JavaScript の関数を簡素に記述する機能。現状 Chrome、Opera、Firefox で動作しますが、OSX / iOS の Safari では動きません。記述は C# のラムダ式に近いです。 サンプル…

Platform Status 9月の変更

9月分を忘れておりました。 Platform Status の変更内容前回調べた日付は8月3日です。 また以下のものは9月18日に調べたもので、Build 10547 で Preview になったものは文字色を変えています

Microsoft Edge Dev (dev.modern.ie) が日本語化されました。

まだ英語の部分がありますが、大部分が日本語化されています Developer Resources : Microsoft Edge Dev 国際化で使用している i18n のキャッシュのせいで英語や中国語で表示される可能性があり、dev.modern.ie のページのキャッシュを消すと日本語で表示さ…

Microsoft Edge で WebM が実装される予定

WebM Container と VP9 Video Codec が開発中のステータスに入りました。http://dev.modern.ie/platform/status/?filter=f040000bf H.265 に対応している Edge ですが、VP9 の方も対応するようですね。 近い将来 Edge に導入されるでしょう。

WinJS 4.3 が出ました

現在 サイトの方は 4.2 ですが Github と CDN の方は 4.3 になっています。 Github winjs/winjs · GitHub CDN winjs - cdnjs.com でもって Changelog ですChangelog · winjs/winjs Wiki · GitHub Accessibility と TV/Xbox UI Controls、バグフィックスのよ…

ヴァーチャルマシンで Microsoft Edge を試すことができる Windows 10 のスナップショットがでました。

Virtual Machine (VM), Windows Virtual PC & Browserstack : MSEdgeDev 上記のリンクから Windows、Mac、Linux のタブのいずれかを押し、セレクタ Microsoft Edge on Win 10 選択して使用する Virtual Machine (VM)を選びます。横に「Download .zip」ボタン…

Microsoft Edge の User Agent - 2015/08/13 版

Microsoft Edge のユーザーエージェントはいろいろな情報を出しすぎて面白いことになってますね。Windows 10 Insider Preview のころから言われていますし、もうそろそろ対応する必要が出てきていると思われます。下記の通り、"AppleWebKit" "Chrome" "Safar…

Windows Phone (Windows 10 Mobile) でも getUserMedia が動くようになりました。

Insider Preview Build 10166 では Web カメラが見つからないとエラーが出ていましたが、Build 10512 で 動作するようになりました。 http://toshihirogoto.github.io/test-media/

Microsoft Edge の機能を調べてみた - Reflect 編

Reflect は JavaScript でインターセプト(横取り)を行うことができ Proxy と同じメソッドを持つ。主な使われ方は Proxy の中の処理で元の機能を返す場合によく使われると思われます。Proxy とは違い Reflect は関数オブジェクトではないため、Reflect を n…

Microsoft Edge の機能を調べてみた - Iteration Protocols 編

以前の記事で書いた Symbol の Symbol.iterator では Generator を使用しイテレータブルなオブジェクト作成しました。 今回はデフォルトイテレータを見てみようかと思います。この内容は Generator の記事であまり説明はしていませんが今回紹介する機能を使…

Virtual Machine でテスト用に動かす Microsoft Edge と Windows 10 を準備中

Microsoft Edge Developer のフィードバックの VM 上で動かす Microsoft Edge のトピックは "WORKING ON IT" のステータスになっており、現在、準備中らしいです。 working on it How can we improve the Microsoft Edge developer experience? 54 votes 4 c…

Microsoft Edge - ページ内で使われているフォント [ 修正 ]

Internet Explorer 11 と同じです。 以下、MS ゴシックと書いておりましたが、MS Pゴシックの誤りです。該当箇所を修正しました。 画像からわかるようにデフォルトの場合は MS P ゴシック + Times New Roman。CSS でセリフ体を設定した場合は MS 明朝。CSS …

Platform Status 8月の変更

Platform Status の変更内容前回調べた日付は7月6日です。 変更内容 開発中からプレビューへ変更 なし 検討中から開発中へ変更 DestructuringSubclassing (ES6)<template> Element 検討中に追加 IndexedDB Arrays and MultiEntry Support まとめ 構造化代入するための </template>…

新しい UI を考える - 目立つメニュー

クリックすると目立つ。領域ロールアウトで消える。サンプル http://toshihirogoto.github.io/menu-zoom/ モダンブラウザ向け。スマートフォンは動くレベルで画面回転の時の処理とか忘れた。 本来はロールオーバーで使いたかったがスマートフォンの場合処理…

Microsoft Edge の機能を調べてみた - Iterator/for-of 編

Microsoft Edge の JavaScript で Symbol.iterator を使い for-of でオブジェクトの内容を列挙する命令が追加されました。for-of は Symbol.iterator に対応している型である必要があり、その点だけは注意が必要です。 for-in の場合 for-of の場合

Microsoft Edge の機能を調べてみた - Iterator/Symbol 編

Microsoft Edge の JavaScript で新しい型 Symbol が追加されました。オブジェクトなどのプロパティのキーとして使用できるプリミティブな型です。ちなみにこやつを new することはできません。 for in からでは Symbol を参照できません オブジェクト c に …

Microsoft Edge の機能を調べてみた - Generator 編

Microsoft Edge の JavaScript で関数内で順に処理する yield を実装した Generator が実装されました。関数名の前に * を付けると yield を使用することができます。 現状、Edge でこの機能をそのまま使うことができません。アドレスバー about:flags 入力…

Microsoft Edge の機能を調べてみた - Proxy 初級編

Proxy とか Proxies とか呼ばれているもので、メタプログラミング用に Reflect と共に追加された機能。一応、Reflect も Edge でつかえます。 現状、Edge でこの機能をそのまま使うことができません。アドレスバー about:flags 入力し、「開発者向け設定」ペ…

Microsoft Edge の機能を調べてみた - Class 編

ずっと JavaScript の予約語だった Class がやっと使える様になりました。ざっくりいうと、初期設定をするコンストラクタと、関数の塊を内包したものです。他の言語のものと似ており、一応継承はできます。 現状、Edge でこの機能をそのまま使うことができま…

Microsoft Edge の機能を調べてみた - CSS Preserve-3d 編

やっと入った CSS Preserve-3d。現状、モダンブラウザで WebGL が動くため使用頻度は少なくなるかもしれませんが、簡単な 3D の表現を行う場合にはこちらの方が手軽にできるケースもあると思われます。 上が Edge、下が Internet Explorer 11。 IE は Preser…

Microsoft Edge の機能を調べてみた - SIMD.js 編

参照元 &amp;lt;a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/SIMD" data-mce-href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/SIMD"&amp;gt;SIMD&amp;lt;/a&amp;gt;deve…

Microsoft Edge で 外部からのドラッグアンドドロップが動作していない可能性 - Windows 10 Insider Preview Build 10240(追記)

Build 10565 で動作するようになりました。デスクトップから Edge、Edge からデスクトップ両方できます。ただし、Google など一部ページはサイト側の JavaScript の実装の問題で動作しません。 コンテンツ内のドラッグアンドドロップは動作しているのですが…

try.buildwinjs.com、Get のページが WinJS 4.1 に更新されました

今までは Github の変更が Get のページに反映され更新されました。Playground など TRY のページは 4.0.1 のままです。 Try WinJStry.buildwinjs.com ページ内の Direct Download も更新され 4.1 が直接落とせます。 Get Starter Templates が増えました。…

ウェブサイトを Windows 10 で動く Universal Windows Platform(UWP)アプリにしてみる その2 - ネイティブ命令を実行してみる

前回 ウェブサイトを Windows 10 で動く Universal Windows Platform(UWP)アプリにしてみる - Browserbrowser.hatenablog.com 今回つくるもの ネイティブ機能を呼び出しタイトルバーに戻るボタンを付ける。 JavaScript 版の UWP アプリは C# の名前空間、…

Windows 10 SDK Preview Build 10166

SDK Build 10166 の新規作成の場合、.csproj, .jsproj, .vcxproj で Target Version や Min Version を変えなくてもよくなりました。以前の作成したプロジェクトをビルドしたい場合はブログで書いたように proj ファイルを書き換える必要があります。 Window…

WinJS が 4.1 になりました

Windows Library for JavaScript こと WinJS のヴァージョンが 4.1 になりました。 Github, "npm install winjs" 等では変更されていますが、公式サイトではまだ反映されていないのでちょいとめも程度に。 WinJS とは? Windows ストアアプリのデザインに合…

ウェブサイトを Windows 10 で動く Universal Windows Platform(UWP)アプリにしてみる

今回つくるもの bing.com が表示できるだけの UWP アプリ。 背景 Universal Windows Platform bridges というものが build 2015 発表され、そこで計画されている4つプロジェクトがあります。 Project Astoria APK を UWP アプリに変換する。 Windows Phone …

Platform Status の変更内容

Platform Status の変更内容前回調べた日付は6月8日です。 変更内容 開発中からプレビューへ変更 Motion JPEG (MJPG)SIMD (ES7)SVG foreignobject element 検討中から開発中へ変更 Extended srcset and sizes support 検討中に追加 International input[type…

Windows 10 SDK Preview Build 10158 で JavaScript の UWP Apps がビルドできない

下記の対処方法が書かれていますが、開発者のフラグを立てているにもかかわらずビルドできません。 Now that you have updated the project file, find the application’s Package.appxmanifest and do the following: Open that file (it should present yo…

Microsoft Edge Test Drive のデモの一部はオープンソースで公開されている

2010 の Internet Explorer 9 から始まった Internet Explorer Test Drive ですが、Microsoft Edge Test Drive となり、大体のものがオープンソースで公開されています。 MicrosoftEdge/Demosgithub.com また、過去の IE Test Drive にあった Touch Effects …

タブレットモードで Project Spartan (Microsoft Build) の F12 開発者ツールを開くとサイドバイサイドで表示される(Windows Insider Preview Build 10130)

以下の画像の通りです。 ストア版 Internet Explorer では F12 開発者ツールでは使用できなかったので初めて見る光景です。 ちなみに、タブレットモードの Windows 10 版 IE 11 は F12 開発者ツールを開くと全画面表示されます。 タブレットモードのやり方 …

Google Polymer 1.0 が Project Spartan (Microsoft Edge) で動作しました (Windows 10 Insider Preview build 10130)

Polymer Starter Kit を試そうと思って Spartan 上で動かしたら、以前とは違い、ちゃんと動作しました。 個人的に Google Polymer などの Web Components は今後 Web のフロントエンド開発を圧倒的に楽にさせる技術だと思っております。時間ができた時に Pol…

Platform Status(旧 status.modern.ie) 6月の変更

Platform Status(旧 status.modern.ie)の変更内容前回調べた日付は5月8日です。 変更内容 ほぼ変りはありません。 検討中(Under Consideration)にHTML Form HTTP Extensions が追加されました。 現状、まだどのブラウザにも実装されていないはずので、機…

Universal Windows Platform Apps のデザイン設計がすでに翻訳されていた

デザイン設計について Build のセッションと英語版 Web サイトの内容をまとめていたのですが、どうやら Web サイトの翻訳できている模様です。 「設計の基本」はインデックスととなるページで、「UWP アプリの概要」と「デバイスの基本情報」が概要、他はそ…

Windows 10 Insider Preview Build 10074 の Project Spartan で getUserMedia API が動きました

数日前に動かないと記事に書きましたが、アドレスバーに about:flags を入力、Enable experimental JavaScript features のチェックを入れてブラウザを再起動すると動作しました。

Project Spartan の about:flags で新機能を試せることに今更気づいた(Windows Insider Preview Build 10074)

Microsoft Edge Dev Blog に記載されており気づきました。 &lt;a href="https://blogs.windows.com/msedgedev/2015/05/12/javascript-moves-forward-in-microsoft-edge-with-ecmascript-6-and-beyond/" data-mce-href="https://blogs.windows.com/msedgedev/…

status.modern.ie 5月の変更

status.modern.ie の変更内容前回調べた日付は4月8日です。 変更内容 開発中から Preview Release へ変更 ASM.jsDefault parameterGenerators<main> elementMedia Capture and StreamsRegExp Built-ins (ES6) 検討中から開発中へ変更 Ambient Light Events 検討中</main>…

Project Spartan の getUserMedia API (Windows 10 Insider Preview Build 10074)

Media Capture and Streams/getUserMedia APIローカルデバイスのマイクやカメラにアクセスするための API です。 status.modern.ie でしれっと getUserMedia が Preview Release になっておりました。 Internet Explorer Web Platform Status and Roadmap - …

Fullscreen API と 闇

Fullscreen API は動画再生やゲームなど全画面にし没入させたい時などに使います。 iOS Safari と Opera Mini, Android Browser 以外のモダンブラウザで動作するようです。 Can I use... Support tables for HTML5, CSS3, etc

新しい Loader UI、マグローダー

職場でつくってたテクスチャを流用し加工してみました。 マグローダー ただ CSS のアニメーションで 360度 回しているだけです。CSS の calc() を使っている為モダンブラウザでないと見れません。 マグロ画像 URL http://toshihirogoto.github.io/maguroader…

Spartan で CSS image-set / <img srcset> 使ってみる?(Windows 10 Technical Preview Build 10049)

CSS image-set が Preview Release になったということで試してみました。 CSS image-set とは? 今まで低,高解像度の画像や背景画像を端末別に表示するには複数のタグ、CSS を使用したり JavaScript を駆使する必要がありましたが、この機能を使うと1つのタ…

Spartan で Conditional Rules / CSS.supports() 使ってみる(Windows 10 Technical Preview Build 10049)

Spartan で Conditional Rules ( CSS.supports() ) が使用可能になったので試してみました。 各ブラウザーでの状況 http://caniuse.com/#feat=css-supports-api 現状 Sarfari / Opera Mini では非対応のようです。 使い方 こちらで "display: flex" に適応で…

status.modern.ie 4月の変更

status.modern.ie の変更内容を定期的に書いていこうと思います。前回調べた日付は3月10日です。 変更内容 Preview Release へ新規追加 ARIA Landmanrk RolesCSS Gradiet MidpointsFullscreen API 開発中から Preview Release へ変更 Conditional RulesDate …

Project Spartan で Google Polymer が動かない(Windows 10 Technical Preview Build 10049)

訂正 Google Polymer 1.0、Build 10130 で動作するようになりました。 Google Polymer 1.0 が Project Spartan (Microsoft Edge) で動作しました (Windows 10 Insider Preview build 10130) - Browserbrowser.hatenablog.com 以下の通り Spartan で閲覧する…

Internet Explorer 11 の F12 開発ツールは計算済みのスタイルを変更できる

Chrome、Safari、Firefox 等の「計算済み」「Computed」に当たる IE11 の F12 開発ツールの「属性」。こいつは、そのタグに適応されているすべての CSS のプロパティを列挙して表示することができます。 あんまり知られていませんが、IE11 では「属性」で表…

スポンサーリンク