Chakra – HTML5Experts.jp https://html5experts.jp 日本に、もっとエキスパートを。 Sat, 07 Jul 2018 03:14:05 +0000 ja hourly 1 https://wordpress.org/?v=4.7.19 【HTML5 Experts.jp】2016年1月のブラウザ関連ニュース /myakura/18382/ Wed, 09 Mar 2016 00:00:26 +0000 /?p=18382 連載： WEB標準化動向 (9)

2016年1月のブラウザニュースは、Safari 9.1のリリース、Firefox 44リリース、Chrome 48リリース、EdgeのJavaScriptエンジンChakraのオープンソース版「ChakraCore」についてお届けします。

Safari 9.1発表

iOS 9.3とOS X 10.11.4のベータ版が開発者向けに提供され、その中でSafari 9.1のリリースが明らかとなりました。

9.1では先月紹介したタップ時の350msの遅延をなくす仕組みや、CSS Custom Properties（CSS Variables）、font-feature-settings プロパティとそれに関連する font-variant 系サブプロパティ、will-change プロパティがサポートされるようです。

セキュリティや安定性向上のためのアップデートではない、マイナーアップデートは久しぶりです。Safariはこれまで、新しい機能の追加やバグの修正を年一度のメジャーアップデートでしか提供しておらず、開発者の不満を高めていました。ChromeやFirefox、Edgeほどを望む必要があるかはわかりませんが、9.1のようにエンジンのバージョンアップを含むリリースがもうすこしあるとうれしいですね。

Firefox 44リリース、Service Workerが有効に

1月26日にFirefox 44がリリースされました。

このバージョンでついにFirefoxでもService Workerが有効になりました。

CSSの unicode-range デスクリプタがサポートされました。

開発者ツールではCSS Animationsのエディタが協力になりました。Chromeにもあるような、スライダーでアニメーションの状態を逐次確認できるようなUIがついています。

CSSアニメーションを学べるDevTools Challengerというサイトも、44がDeveloper Editionだった昨年11月ころから公開されています。アニメーションで動く深海生物を開発者ツールから操作するというチュートリアルです。

Chrome 48リリース、縦書きCSSの向上

1月20日にChrome 48がリリースされました。

このリリースで、CSS Writing Modesの接頭辞がとれました。Writing Modesについては昨年末のCodeGridで取り上げられています。

また、OpenTypeフォントの機能にアクセスする font-feature-settings も接頭辞がとれました。Safari 9.1の公開も近いようなので、接頭辞まわりがだいぶすっきりしますね。

ChakraCoreが公開

12月分で取り上げた、EdgeのJavaScriptエンジンChakraのオープンソース版「ChakraCore」ですが、1月13日に公開されました。

ロードマップも公開されています。JITなしでUbuntuでもまず動かせるようにするとか、WebAssemblyへの対応、Async FunctionをECMAScript仕様に持っていくといったことが書かれています。

一週間後には、ChakraCoreをNodeのエンジンにするべくPull Requestが投げられました。

JavaScriptエンジンの競争がさらに盛んになってきそうですね。

]]> 【HTML5 Experts.jp】2015年12月のブラウザ関連ニュース振り返り /myakura/18263/ Tue, 09 Feb 2016 00:00:54 +0000 /?p=18263 連載： WEB標準化動向 (8)

Chrome 47リリース

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

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

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

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

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

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

Chrome 46とChrome 47でページの一部を選択したスクリーンショット。

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

Firefox 43リリース

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

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

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

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

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

Firefox開発者ツールのスタイルパネル

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

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

Firefox開発者ツールのインスペクタパネルで、Use in Consoleを実行。コンソールが開き、選択した要素がtemp0という変数として使えるように。

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

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

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

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

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

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

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 を指定すれば、その要素はダブルタップを考慮しなくなり、遅延がなくなります。

]]>