この Windows 10 Anniversary Update では、Windows 10 が発表された際の様々なビジョンのいくつかが実装され、さらにその当時は想像だにできなかった  Windows Subsystem for Linux (WSL) といったようなまったく新しい機能も搭載されています。

Windows 10 から搭載された新しい Web ブラウザーである Edge にも、当初の計画にあった新しい拡張 (エクステンション)モデルの実装や、Windows フィードバック、Developer FeedBack (旧 Edge Suggestion Box) に寄せられたフィードバックや提案をもとにした新しい機能が実装されています。

今回の記事では Windows 10 Anniversary Update の新機能、とくにユーザーが直接対話するデスクトップ UI の新機能と、新しく追加された Edge 関連のグループポリシーの設定について紹介します。

Microsoft Edge のデスクトップ UI 機能の強化

Windows 10 がリリースされてからこれまで、Edge にもたゆまず機能強化が行われてきましたが、その内容はパフォーマンスの向上であったり、サポートする API の数を増やすであるとか、どちらかというと開発者向けのものが多かった印象があります。

これら機能は UI を持たないため、開発者以外の多くのユーザーは Edge の機能向上の進捗を肌感として感じれなかったかもしれません。

しかし、Windows 10 Anniversary Update での Edge では、誰しもがアクセス可能なデスクトップ UI に複数の新機能を搭載しています。

この機能は、おおまかに分類すると以下の 4 つに別けられます。

1. ナビゲーション
2. お気に入り
3. ダウンロード
4. コンテキストメニュー

以降は、上記 4 つの項目について、具体的にどのどのような機能が追加されたのかを紹介していきます。

ナビゲーション

Web ブラウジングにおける “ナビゲーション” はページを遷移させるための操作や、その動作そのものを指します。

このナビゲーション関連では以下の機能が追加されています。

右クリックでのナビゲーション履歴表示

Edge のナビゲーションバーの左側にある 戻るボタン/進むボタン上で、マウスの右ボタンをクリックすることで、それまでの履歴と現在の位置(履歴内のどこをブラウズしているか)が表示され、クリックすることでそのページに遷移できるようになりました。

従来の 戻る/進む ボタンでは、ブラウザーを起動してからの履歴に対し、ひとつずつしか前後に遷移できませんでしたが、この機能を使用すると履歴の任意の位置に直接移動できます。

貼り付けて移動/検索

クリップボードにコピーした URL のページを Edge で表示させる場合、ナビゲーションバーに一度 URL を貼り付けてからキーボードの [ Enter] キーを押下する必要がありました。

また同様に、クリップボードにコピーしたキーワードで検索を行う場合には、 ナビゲーションバーに一度 キーワードを貼り付けてからキーボードの [ Enter] キーを押下する必要がありました。

Windows 10 Anniversary Update からの Edge では、ナビゲーションバー上でマウスの右ボタンをクリックした際に表示されるコンテキストメニューに [貼り付けて移動] もしくは [貼り付けて検索] というメニューが追加されており、このメニューを選択することで [Enter] キーを押下しなくてもクリップボードにある URL への移動、あるいはクリップボードにあるキーワードで検索を行うことができます。なお、「移動」か「検索」かは、クリップボードの内容により自動的に判断されます。

(クリップボードの中身が URL の場合)

(クリップボードの中身が URL ではない場合)

スワイプによるナビゲーション

スワイプによるナビゲーションに対応しました。

Windows Phone や タッチ対応のモニタの PC で Edge を使用する場合、画面を左/右にスワイプすることで一度遷移した URL について遷移することができます。

左にスワイプするとひとつ前に戻り、右にスワイプするとひとつ進みます。

お気に入り

Edge において「お気に入り」 (favorite) はユーザーが任意の URL を Web ブラウザーに登録しておく機能です。

お気に入り関連では以下の機能が追加されています。

ピン留め

ピン留めは Internet Explorer 8 からサポートされた機能で、当時はピン留め対応した Web サイトのショートカット アイコンとナビゲーションメニューを Windows のタスクバーに登録することができました。

Windows 10 Anniversary Update で提供される Edge には、ショートカットアイコンの登録場所や提供される機能は異なりますが、ピン留め機能が復活しています。

また、Web サイト側での特別な設定は不要となっています。

Edge のピン留め機能を使用するには、任意のページを表示したページのタブの上で右クリックし、表示されたコンテキストメニューから [ピン留めする] メニューを選択します。

これによりタブの左端にページがピン留めされ、Edge が起動されると同時にページがロードされるようになります。

[お気に入り] メニューのツリー表示と並べ替え機能

これまで Edge の [お気に入り] メニューでは、同一階層にあるリンクのみが一覧で表示されていましたが、Windows 10 Anniversary Update で提供される Edge ではツリー表示されるようになりました。

また、名前で並べ替えも出来るようになっています。

[お気に入り] のインポート元の表示

Edge では他の Web ブラウザーから [お気に入り] をインポートできますが、インポート元の Web ブラウザーの名前がついたフォルダが作成され、どの Web ブラウザーからインポートされたのかわかるようになりました。

お気に入りバーのメニュー追加

お気に入りバー上にショートカットの表示で、アイコンだけを表示できる設定が追加されました。

また、これまでお気に入りバーにはコンテキストメニューは設定されていませんでしたが、今回のアップデートで [新しいフォルダの作成] と [アイコンのみ表示する] メニューが追加されました。

ダウンロード

Edge のダウンロード機能については、保存場所や保存のさいのアクションについて、以下のような機能が追加されています。

保存先フォルダの指定

これまでの Edge では、既定のダウンロード先のフォルダは %user%\ダウンロード となっており、これを変更することは出来ませんでしたが、今回のアップデートでは [詳細設定] メニューからこれを変更できるようになりました。

ダウンロード先の指定

これまで、Edge ではファイルをダウンロードする際に保存先の指定を任意で行うことはできませんでしたが、今回のアップデートでは、ダウンロード時に表示されるダイアログボックスに [名前を付けて保存] ボタンが追加され、保存先の指定や、保存する際のファイル名の指定ができるようになりました。

ダウンロード中に Edge 終了の際の警告

ファイルをダウンロード中に Edge をクローズ場合、警告メッセージが表示されるようになりました。

コンテキストメニューへの機能追加と変更

Web ページを表示する部分で、右クリックした際に表示されるコンテキストメニューにも機能が追加されています。

Cortana との連携

Edge に Cortana との連携機能が実装されました。

文字列、もしくは画像を選択し、マウスの右クリックメニューから [Cortana に質問] を選択すると、選択された内容に関連する情報を判断して検索を行い結果を列挙します。

たとえば、以下のように画像を問い合わせた場合、Cortana は関連する情報と類似する画像を調査して列挙します。

開発者用メニューの表示タイミング

これまでの Edge では、表示されている Web ページ上での右クリックメニューに [要素の検査] と [ソースの表示] という開発者向けのメニューが、初期状態から表示されるようになっていました。

今回のアップデートでは、初期状態ではこれら開発者向けのメニューは表示されず、F12 開発者ツールが起動されてからはじめて表示されるようになっています。

ここまで Windows 10 Anniversary Update で追加される Edge の新機能について紹介してきました。

Edge の新機能については、かねてからのロードマップと、ユーザーから寄せられたフィードバックにもとづき実装しています。

しかしながら、期待していた機能が実装されていなかった、ということもあるでしょう。そういった場合には Edge に拡張インストールし、昨日を追加することでご要望を満たすことができるかもしれません。

拡張 (エクステンション) による Edge の機能強化

Windows 10 Anniversary Update の Edge では、拡張がサポートされました。

拡張とは、外部で作られたプログラムで、Edge にプラグインすることで Edge の機能を文字どおり拡張します。

Edge の拡張は Windows ストアから入手することができ、すでに Ad ブロックやマウスジェスチャー、翻訳等、さまざまな機能を提供する拡張が用意されています。

拡張の入手と Edge へのインストール

拡張の具体的な入手とインストール方法は以下のとおりです。

1. Edge のツールバー上の  […] アイコンをクリックして [拡張機能] メニューをクリックします。
   
   
    
2. [拡張]パネルが表示されるので [ストアから拡張機能を取得する] リンクをクリックします。
   
   
    
3. Windows ストアの 「Microsoft Edge の拡張機能」 画面が開くので任意の拡張のアイコンをクリックします。
   
   
    
4. 選択した拡張の説明画面に遷移するので [無料] 、もしくは金額の書かれた(※有料の拡張の場合) ボタンをクリックします。
   

以上の手順で拡張のダウンロードとインストールが行われます。

拡張の設定とアンインストール

Edge にインストールした拡張のアンインストールやオプション設定は、Edge の [拡張機能] メニューで行います。

具体的な手順は以下のとおりです。

1. Edge のツールバー上の  […] アイコンをクリックして [拡張機能] メニューをクリックします。
2. [拡張]パネルが表示され、インストール済の拡張のリストが表示されるので、任意の拡張をクリックします。
3. 拡張の詳細設定画面が表示されるので以下から目的の操作を行います。
   • 拡張を有効、もしくは無効に –  トグルボタンを操作
   • 拡張のオプション設定を行う – [オプション] ボタンをクリック
   • 拡張をアンインストールする – [アンインストール] ボタンをクリック
   

Edge への拡張のインストール/アンインストール方法は以上です。

Edge 用の拡張を自分で作成する方法については以下の記事で紹介していますので、興味のある方はぜひご覧ください。

• ゼロからはじめる Microsoft Edge 用の拡張の作り方

Windows 10 Anniversary Update で追加される Edge のグループポリシー設定

Windows 10 Anniversary Update では Edge のグループポリシーで設定できる内容も追加が行われています。

グループポリシーとは、IT 管理者が管理対象の使用者に対してさまざまな設定を一括で行うための機能です。

従来から Edge では、以下の内容について IT 管理者がグループポリシーを用いて Windows ドメイン ユーザーの使用する Edge を管理することができます。

今回のアップデートでは、新たに以下の内容が制御可能となりました。

これらグループポリシーの新しい設定を使用することで、IT 管理者は今回のアップデートで追加された Edge の新機能の使用の有無を管理することかできます。

Microsoft Edge の更新履歴について

Windows 10 のビルド単位での、より詳しい更新履歴については、以下のページで確認することができます。

• Microsoft Edge changelog

Microsoft Edge がサポートする API については以下をご参照ください。

• Platform status

まとめ

これまでの Edge では、Web コンテンツの閲覧中 Internet Explorer 11 と比較して機能が少ないと感じる場面が多々あったかもしれません。しかし、そういった不満は Windows 10 Anniversary Update によってずいぶんと解決されていると思います。

また、それでも足らないと感じる機能については、拡張を追加することである程度解消できることでしょう。

Edge を使ってみて他の Web ブラウザーを使うようになってしまった人も、Edge をまだ使用したことがない人もぜひこの機会に Edge をお試しくださいませ。

エキスパートの佐川が、「de:code2016」のセッションレポート、日本マイクロソフトエバンジェリスト・物江修氏の「Developing on the Edge. 〜 WebプラットフォームとCordova 〜」をご紹介します。

今年の夏、MicrosoftはWindows 10の大型アップデート「Windows 10 Anniversary Update」を予定している。このアップデートで「Microsoft Edge」にも数多くのAPIが追加される。このセッションでは新しく追加されるAPIの紹介と、それらを利用したUniversal Windows Platform(以下、UWPと記載する)、Cordovaアプリケーションの開発ポイントを紹介する。

• Microsoft EdgeとWindows10のWebプラットフォーム
• EdgeHTMLの新機能とこれからの方向性
• Webプラットフォームを利用したアプリケーション開発

Microsoft EdgeとWindows10のWebプラットフォーム

初めに、Microsoft EdgeとWindows 10で「Webプラットフォーム」と呼んでいる事柄についてみていく。すでにご存じのとおり、Windows10には、2つのマイクロソフト製のブラウザが含まれている。Windows10から新しく採用された「Microsoft Edge（以降、Edgeと記載する）」と「Internet Explorer11」である。

Webブラウザが2つ入っている理由は、以下のとおり。

• Edgeは相互運用性を重視し、最新のWebコンテンツをブラウズするため
• Internet Explorer 11は過去のバージョンのIE向けに作られたコンテンツを従来どおりに見るため

この二つは物理的に完全に別なものとなっていて、レンダリングエンジンもJavaScriptエンジンも異なる。

EdgeのレンダリングエンジンとJavaScriptの組み合わせが、Windows 10用のアプリケーションを開発する際に使用されるWebプラットフォームになるが、現状、Windows 10で動作するアプリケーションのすべてがEdgeのエンジン（以降、EdgeHTMLと記載する）を利用しているわけではない。

どういう意味か。

アプリケーションとの組み合わせを見てみる。Windows 10から採用されたUWPアプリケーションは、EdgeHTMLを使用している。しかし、以前の環境で作られたWindows 8系のいわゆるWindowsストア・アプリケーションやデスクトップ・アプリケーションであるWin32アプリケーションは、以前の Tridentを使用している。

新しいSDKに含まれるWeb ViewコントロールはEdgeを使用するようになっているので、もしどちらも選択が可能である場合はEdgeHTMLを使用する。

Windows 10 Anniversary Updateまでに搭載されるEdgeの新機能

ここからは「Windows 10 Anniversary Update」までに搭載されるEdgeの新機能について紹介していく。Edgeのエンジンが、Windows 10でアプリケーションを開発する際に使用するWebプラットフォームの機能になるので、そのままアプリケーションから使用できるようになる。

Edgeの2016年の機能実装を含めた展望については、今年の2月にEdgeの開発者ブログで公開されており、その記事では優先課題とて5つ存在する。（参考までに、日本語の開発者ブログはこちらです）

1. WebテクノロジとWindowsストアによるモダン拡張機能プラットフォームを提供する
2. アクセシビリティとインクルーシブ デザインにより、Microsoft Edgeを使うすべての人の力になる
3. Microsoft Edgeの基本であるセキュリティ、パフォーマンス、効率を引き続き向上させる
4. Webの未来を見据えて開発する
5. コミュニティのフィードバックや参加を可能にするチャネルを増やす

まずは拡張機能。ネイティブ形式のアドオンとは異なるWebテクノロジを活用した、開発者になじみのある拡張機能プラットフォームを作成する。現在のInsider Previe版のEdgeでは同じくプレビュー版のアドオンを使用できるようになっている。

次にアクセシビリティ。この項目では「HTML Accessibility API Mappings」と「Core Accessibility API Mappings」への対応、「ハイコントラストのサポート」や「視覚障碍のある方にとっての読みやすさ」や、「フォーカスおよび選択の操作性の向上」などが表明されていた。

基本機能では、「JavaScript エンジンのベンチマークの向上」「さらなるセキュリティの強化」たとえばFlashを別のプロセスに分離し、不要なコンテンツ処理を保留したり、GPUレンダリングの強化などが表明されている。

Insider Preview に搭載された新機能

ここからは「Insider Preview」に搭載された新機能について紹介していく。現在、Insider Previewに実装されていて、実際に試すことができるものが約20個以上、開発中のものを含めると36個くらいあり、しかも、これは現段階のものなので、これからまだ増える可能性がある。

• Web Speech API (synthesis)
• Fetch API
• Beacon
• Web Notifications
• WebRTC
• OPUS open audio
• VP9 open video playback
• WOFF File Format 2.0
• FIDO 2.0 Password
• Canvas 2D path2D
• Ambient Light Events
• Color input type
• Element
• Default parameter (ES2015)
• Destructuring (ES2015)
• Generators (ES2015)
• SIMD (after ES2016)
• Exponentiation Operator (ES2016)
• Array.prototype.includes (ES2016)
• Async Functions (after ES2016)

Insiger Previewに新しく搭載された機能をいくつか、デモを交えながら紹介する（この記事ではデモ資料省略）。

Web Speech API

IETF標準の言語タグである「BCP 47」に対応しており、タグの指定によってさまざな言語の指定ができる。音量、音声、速度はもちろん、SSML (Speech Synthesis Markup Language) を使用して音声合成時の修飾的情報を指定したりもできる。

Fetch API

「Fetch API」は、Webサーバと通信するためのAPIで、Promise ベースで非同期処理を行える。従来の「XMLHttpRequest」の仕様のさまざまな不足分をなくし、より細かい処理ができるようになっていて、将来的に「XMLHttpRequest」は「Fetch API」に置き換わると言われている。「Fetch API」は「XMLHttpRequest」とは異なり「Service Worker」からも使用できる。参考までに「Service Worker」とは、「Progressive Web Apps」というモバイルWeb向けの新しいコンセプトだ。

Web Notifications

「Web Notifications」はユーザーへのデスクトップ通知の設定や表示のために使われるもので、EdgeではWindows 10のアクションセンターと統合される。この通知には、カスタムアイコンやタイトル、メッセージが設定可能だ。Service WorkerとPush APIを組み合わせると、サーバからのPuch通知を受け取って表示したりということが可能になるが、残念ながらこの2つはまだサポートされていない。しかし、ブラウザ上でアプリケーションが稼働状態であれば、WebSocktsやWebRTCの通知を受け取ってデスクトップ通知を表示するといったことが可能だ。

WOFF2.0フォント

WOFF2.0フォントは、従来のフォントファイルのサイズを30%以上多く減らす新しいフォーマットだ。日本語を含むアジアフォントではおよそ50%前後節減できると言われている。現在、Webページの60%以上でカスタムWebフォントが使用されていて、平均的にWebページのサイズの5.3%を占めると言われているので、これをサポートすることでページの表示速度の向上が期待できる。

WebRTC

WebRTCについて。RTCとは「Real Time Cominucation」の略で、プラグインなしでWebブラウザ間のボイスチャット、ビデオチャット、ファイル共有ができる技術がWebRTCだ。Firefox、Chromeは、Edgeに先行してWebRTC1.0をサポートしているが、EdgeはWebRTCの使い勝手を改善したORTCのみをサポートしてた。このWebRTCとORTCは互換性があるので、互いに通信を行うことができるが、さらなる相互運用性を高めるためにEdgeHTML 15では、WebRTC1.0もサポートすることになった。

RTCの相互間運用性

その他

そのほかにもオーディオ用の高い圧縮フォーマットであるOpusや動画圧縮コーデックのVP9、細かい時間の計測に使用される「High Resolution Time」のLebel2や、フォルダのドラッグ・アンド・ドロップ、Webブラウザで生体認証を行うためのFIDO(ファイド)2.0、それからBeacon、アクセシビリティ関連のエレメントなどなど多くの機能がサポートされる。

ハイブリッド・アプリケーション

説明した機能は、ハイブリッド・アプリケーション開発用の様々なフレームワークを使用することで、スマートフォンやデスクトップのアプリケーションとして利用することができる。ここからは、Webプラットフォームを利用したアプリの開発について紹介していきます。

ブラウザで動作するWebアプリケーションを、ハイブリッド・アプリケーション化するメリットは3つほどあります。

• オフライン
• アプリストアのエコシステム
• プラットフォーム/ハードウェアの機能

もう少し待っているとEdgeでもService WokerがサポートされてWebアプリケーションでもオフラインの利用が可能になるので、実際にアプリケーション化するメリットというのはアプリストアのエコシステムを使用するとか、Webブラウザでは使用できないハードウェアの機能を使用するということぐらいに差が縮まる。

このハイブリッド・アプリケーションの形式には、Packageアプリケーションと、Hotedアプリケーションがある。Packageは、オフラインで利用可能。サーバサイドのリソースががならずしも必要でない。Hostedは常に最新のコンテンツで実行でき、開発の一元化が可能だがオフラインでの使用が前提となる。ざっくり言うとコンテンツの配置場所くらいしか違いはない。

Universal Windows PlatformとCordovaを利用したHostedアプリケーション

UWPとCordovaで、どのようにHostedアプリケーションを作るか、というのを紹介する。

UWP

これがWindow 10に用意されている、アプリから使用可能なOSリソースだ。プッシュ通知や、タイルへの情報表示、予定表、アドレス帳へのアクセス、Cortana連携とWindowsランタイムを使用し、さまざまなハードウェアにもアクセスできる。作成は

1. package.appmanifestの[アプリケーション]タブで[スタート]を指定
2. [コンテンツURI]タブでWinRTへのアクセスを設定
3. 使用しないファイルを削除

Cordova

Tools for Apache Cordovaが提供する機能は

• ターゲット
• ビルド
• デバッグ
• エミュレータ
• コード補完

がありiOSアプリケーションに対するビルドにはMacが必要ではあるが、ほとんどの環境(Android系/iOS系/Windows系)で実行可能だ。CordovaにおけるHostedアプリケーションの作成は以下の３つで行っていく。

1. config.xmlの編集
2. www¥scripts¥index.jsの編集
3. index.htmlの編集

尚、Apache Cordovaを使用したホスト型Webアプリケーションの作成についてはこちらの資料を見るとよい

Visual Studioで提供されている検証環境

• Ripple
• Android
• Monaca Debugger(iOS/Android)
• Windows Phone

その他、Mac OS用、リモートエージェント、Mac in Cloud(Mac OSのホスティング)などがある。

最後に、Webプラットフォームについてということと、この夏に向けていろいろなAPIが出てくる。そして、Webではできないことができるようになると物江氏は締めくくり、Microsoft Edgeのすぐそこにある未来について熱く語ってくれた。今最も熱いブラウザは「Microsoft Edge」ではないだろうか。

Chrome 47リリース

12月1日に、Chrome 47がリリースされました。

次期ECMAScript仕様の Array.prototype.includes() がサポートされました。これで indexOf() を使うハックから解消されますね。このメソッド、もともとは has() という名前で検討されていましたが、MooToolsで同名のメソッドが定義されてしまっていたため名前が変わったなんて経緯があります。

パフォーマンス関連では、 requestIdleCallback() というAPIがサポートされました。実行させたい処理のスケジューリングをよしなにしてほしい時に使うAPIです。そんな説明ではわからないと思うので、Google Developersのエントリや、エキスパートの川田さんがpixivのアドベントカレンダーで取り上げた詳細な記事をご覧ください。

• Using requestIdleCallback | Web Updates – Google Developers
• JSがブラウザを固めてつらいので、新しいAPI「requestIdleCallback」を使うことにした – pixiv inside

DOMでは、Event.timeStamp の返す値が DOMTimeStamp から DOMHighResTimeStamp に変更されました。より細かい精度をもつ値を返すようになったのですが、DOMTimeStamp はUNIXのエポック時間を返すのに対し、DOMHighResTimeStamp はページヘのアクセスが起点になっていおり、互換性への懸念があります。

と思ったら、どうやらAngularのアニメーション機能で衝突したようです。MozillaでもFirefox NightlyとDeveloper Editionで限定的に有効にしているのですが、対策を検討しています。

最後にUIの話を。選択範囲の描画方法が変わりました。これまでChromeはSafariと同じようにテキストの外側にも選択範囲が描画されていましたが、今後はテキストや画像などの周りだけが選択範囲として描画されます。パフォーマンスの向上や、モバイルで選択範囲をわかりやすくするねらいがあるようです。

Chromeの選択範囲。46（左）ではページの大部分に選択範囲が描画されているのに対し、47（右）ではテキストまわりのみになっている

Firefox 43リリース

12月15日に、Firefox 43がリリースされました。

このリリースで、Chromeに続いてArray.prototype.includes() がサポートされました。リリースサイクルを考えるとFirefoxのほうがたぶん早く実装してるんですが、リリースは同時期になっちゃいましたね（タイミングが合うと使い始めやすいかもですが）。

今回も開発者ツールを取り上げましょうか。

Server Loggingというのが実装されました。サーバーから送られるメッセージをコンソールに出せるようです。仕組みとしてはChrome LoggerというChrome拡張が使ってるプロトコルをFirefoxの開発者ツールに実装したようです。仕様を見ると、独自のHTTPヘッダにBase64エンコードしたJSONを渡すというものだそうで。

スタイルパネルも便利になりました。スタイルを見るときに、別の宣言で上書きされていたりすることはしばしばです。どのスタイルで上書きされているかを調べるには、スタイルパネルを辿って調べるわけですが面倒です。そうしたものを簡単に見つける機能が追加されました。

上書きされている宣言の横についている虫眼鏡アイコンをクリックすると、プロパティ名でフィルタをかけた状態になる

ほかにも、「Use in Console」なるコンテキストメニューがインスペクタパネルに追加されました。任意の要素の上で「Use in Console」を選択すると、それが temp0 といった変数から参照できます。

便利かどうかわかりませんが、$0 よりも多少使いやすいでしょうか。

EdgeのChakraがオープンソースに

12月5日に開催されたJSConf US Last Callでの発表で、Microsoft EdgeやInternet Explorerで使われているJavaScriptエンジン、Chakraがオープンソースになることが発表されました。

• Microsoft Edge’s JavaScript engine to go open-source | Microsoft Edge Dev Blog

ただ発表時点では公開されませんでした。オープンソース化する部分の整備を進めており、公開されるのは1月になるとのこと。

オープンソースになるのは、ChakraCoreと呼ばれるものです。ChakraCoreはこれまでのChakraから、WindowsアプリやEdgeなどと連携させるためのプライベートAPIを除いたものとのこと。1月のリリース時にはWindowsでしか使えないようですが、今後は汎用的なJavaScriptエンジンとして利用できるように整備していくとのことです。

MicrosoftはWindows 10 IoTでNodeを利用するために、ChakraにV8のshimをはさんで動かすNodeを開発するなどしています。現行メジャーブラウザのJavaScriptエンジンがすべてオープンソースになるなんて、すごい時代になりましたね。

WebKitでタップ時の遅延が条件下で削除

• More Responsive Tapping on iOS | WebKit

モバイルブラウザで画面をタップしてから、反応までにすこし時間がかかると思った方はいるでしょうか。

それなりに知られている話だとは思いますが、これはダブルタップかシングルタップなのかを区別するために、シングルタップと認識するまでに意図的に遅延を入れているからです。ダブルタップでズームするという挙動があるため、ズームしたいのかタップなのかを区別するために入っているんですね。

この遅延、Chrome, Firefoxでは300ms、WebKitでは350msとなっています。

ただ、ChromeとFirefox、Edgeでは、特定の条件下でこの遅延を消せます。具体的には、viewportの指定が width=device-width や user-scalable=no と設定された、ズームを必要としないページについては、ダブルタップを区別しないでよいため、遅延がなくなります。

viewportによる遅延の削除はChrome 32、Firefox 30から、そしてEdgeは最初から対応しているのですが、SafariとWebKitはまだ対応できていません。iOS 8からはゆっくりタップした場合には遅延がないようになったらしいのですが、せっかちさんは救われません。

対応していないブラウザに対しては、fastclickなどのライブラリが開発されています。ただこうしたものは遅延を消すためにタッチイベントを使っているため、タッチイベントを利用するライブラリやページと競合するなんてこともあります。

今回の変更で、他のブラウザと同様の挙動になりました。また、viewportをカスタマイズできないページへの対応として、CSSの touch-action プロパティも実装されました。クリッカブルな要素に touch-action: manipulation を指定すれば、その要素はダブルタップを考慮しなくなり、遅延がなくなります。

Firefox 42リリース、Wi-Fi経由リモートデバッグが便利

11月3日にFire fox 42がリリースされました。ES2015の Reflect やCSPの upgrade-insecure-requests がサポートされています。

以前の記事でFirefoxの開発者ツールの機能を紹介したところ、すこし反応が良かったので今回も取り上げようと思います。

まずはCSSの filter エディタです。フィルタは強力ですが、値をGUIがないとつらいものです。開発者ツールで filter プロパティを指定すると、各フィルタの値を変更できるポップアップが現れます。

フィルタの値を数値で入力するそっけないものではあるんですが、ドラッグアンドドロップでフィルタの並び替えができるのは便利です。

続いて強力なのが、Wi-Fi経由のリモートデバッグ機能です。リモートデバッグはケーブルを繋ぐのがだるいわけですが、これは同一のWi-Fiに接続しているだけでリモートデバッグできるすぐれものです。

WebIDEを開き「Wi-Fi Devices」からデバイスを選び、表示されたQRコードをデバイスからスキャンすればWi-Fi経由でリモートデバッグできる

初期設定もほとんど必要なく使えるのがいいです。Chromeにもぜひ欲しいところです。

Microsoft Edgeが更新、多数の機能追加

11月13日に、Microsoft Edgeの新しいバージョンが展開されました。レンダリングエンジンEdgeHTMLもメジャーバージョンが上がり、多数の機能が追加されました。

• Introducing EdgeHTML 13, our first platform update for Microsoft Edge
• Release version 10586 : Microsoft Edge Dev

HTML関連では picture 要素と srcset 属性が目玉でしょうか。Windows 10搭載のスマートフォンも発売されはじめてますし、嬉しい追加ですね。

CSSでは initial と unset という値が追加されています。継承のリセットに使えます。JavaScriptについては、asm.jsとES2015のクラス構文が有効になりました。

ほかにも template 要素や a 要素の download 属性、などあるのですが、これだけだと単にFirefoxやChromeに追いついたという感じもしちゃいます。
いえ、意欲的な機能追加もあるんです。

ひとつはORTC（Objective RTC）のサポートです。ORTCは…ちょっと短く説明できなかったので、以下をお読みください。

• ORTCについてそろそろ書いてみる
• ORTC が切り開く SVC サイマルキャストと WebRTC NV – Block Rockin’ Codes

もうひとつは、ES仕様の提案であるAsync functionsの実装でしょうか。Async Functionsは async, await というキーワードを導入し、非同期なコードを同期的なコードとほぼ同様の書き方ができるようになっています。提案ではありますが順調に標準化のプロセスを進んでおり、月の段階では11月末に策定作業が完了する見込みとされています。まだフラグをつけないと使えませんが、有効になるのがとても楽しみです。

先日公開されたTypeScript 1.7でも有効になっていますね。

Chrome Dev Summit開催、新しいDevToolsの機能がお披露目

11月17日、18日にマウンテンビューでChrome Dev Summitが開催されました。

RAILやProgressive Web Appsなどのセッションがほとんどだったのですが、新しい話題として、Chrome DevToolsのUIデザインや、新しいデバイスモードについてセッションがありました。

• DevTools Digest (CDS Edition): A glimpse into the future + RAIL Profiling | Web Updates – Google Developers

どんどん便利になっていきますねえ。