遂にブラウザに実装された「picture要素」。Google Chromeのベータ版「Canary」を使えば実際に試して使うことができます。是非とも自身で試し、テストに参加してみてください。皆の協力でより良いレスポンシブイメージが可能になるはずです。

#

レスポンシブイメージ をテストする

とうとう、picture要素のブラウザ実装が実現された。picture要素がCanary(Googleの次なるChromeリリースの「ベータ」チャンネル)でローンチされ、今現在私たちは試して使ってみることができるのだ。Firefoxに関してもそこまで遅れをとっているわけではないしWebKitでも公式にプロセスがすすめられてるところだ

picture要素というものがここまで進み、最終段階となった今、最後の手助けとなる機会を私たちも持っている:つまり、テストとバグ報告だ。Yoav Weissが、これがChromeに安定して搭載されるまでに可能なかぎり一生懸命テストとパッチの作業をしてはいるものの、より多くの目でチェックされるほうがベターだ。

始めてみよう

  1. Chrome Canaryをダウンロードする
  2. Canaryのアドレスバーに以下を貼り付ける。
    chrome://flags/#enable-experimental-web-platform-features
  3. 「試験運用版のウェブプラットフォームの機能を有効にします」の「有効」をクリック

chrome://flagsのページでは、プライムタイムにはまだ早いかもしれない機能を有効化したり無効化したりすることで​​、ブラウザ内部をいじくれるようになっている:picture要素は、現時点では「試験運用版のウェブプラットフォームの機能」オプションの中にあり、それはsizessrcsetも含まれている。心配することはない:Canaryでこのオプションを変更しても、通常のChromeアプリへの影響はない。

インスペクション

そして今、遂にブラウザ上でpicture要素を試してみることができる。Picturefillはネイティブブラウザでサポートされていない場合のイベントでのみ引き継がれるので、Picturefillのデモは試してみるのには絶好の場所だ。一つ注意すべきことは、この初期バージョンのpictureは、ビューポートがリサイズされた際に再計測しない(少なくともまで次のメジャーパッチがローンチされるまでは)ので、現時点ではどこが変わったか見るためにはページをリロードする必要がある。

Picturefillレポジトリをフォークするか、既存のデモに変更を加えるか、または1から自分で書いてみて新しいマークアップを自身で試してみること。何かおかしいところがあると思われる場合は、YoavのGoogle Blink codeのフォークにその問題を提出するか、RICG IRCチャンネルに参加して、発見したものを提議してほしい。または、そのテストケースを私たちと共有してもらえれば、FirefoxやSafariのへ実装が始まる時それらに対してテストができるだろう。

デザイン&ディベロップメントコミュニティ(注: Github上に作られていた開発のためのコミュニティ)による大変な努力がなければここまで来ることはできなかった。そして今、より多くのテストをすることで、 レスポンシブイメージ がより良いものになっていくだろう。