レスポンシブ・イメージのWordPressへの実装と4.4
11 likes16,696 views
WordCamp Tokyo 2015 登壇スライド（参考リンク追加）。 2015年10月31日〜11月1日開催。 https://tokyo.wordcamp.org/2015/session/2-3/ Slides from my session titled "Implementation of Responsive Images to WordPress, and 4.4" at WordCamp Tokyo 2015. Held on October 31 to November 1, 2015.
レスポンシブ・イメージのWordPressへの実装と4.4
- 1. Implementations of Responsive Images to WordPress, and 4.4 レスポンシブ・イメージのWordPressへの実装と4.4 Toru Miki @ WordCamp Tokyo 2015 31 October 2015
- 2. Toru Miki Toru / @waviaei • WordPress Community • 日本語版やCodex、WordCamp等のイベントでの翻訳・通訳 • コアへのコミット • WordCamp Tokyo 2011 実行委員長 • WordPress Meetup Tokyo 共同オーガナイザー http://www.meetup.com/WordPress-Meetup-Tokyo/ • 仕事 • テンプル大学ジャパンキャンパス ｰ ウェブサイトの運営・構築
- 5. レスポンシブ・ウェブデザイン における画像の問題 • 課題 • 各種条件に合うよう作成された画像を、条件に応じて、必要な 画像のみ取得して表示したい • 解決策 • レスポンシブ・イメージ • 解決策の実装手段の1つ • HTMLの仕様と、ブラウザのサポートによるネイティブ実装
- 6. HTML 5.1 working draft: srcset 属性 & sizes 属性 <img src="./coffee.jpg" alt="珈琲の写真" srcset="./cofee_300.jpg 300w, ./coffee_700.jpg 700w, ./coffee.jpg 1200w" sizes="(max-width: 700px) 100vw, (max-width: 1200px) calc(100vw * 0.8), 960px" /> <img src="./coffee.jpg" alt="珈琲の写真"/> • sizes = "(メディアクエリ) 画像が占める表示領域の割合" • vw = Viewport Width
- 7. Further Reading • Responsive Image 101: Part 1~10 http://blog.cloudfour.com/responsive-images-101-definitions/ • Using Responsive Images (Now) · An A List Apart Article http://alistapart.com/article/using-responsive-images-now • レスポンシブWebデザイン – Rriver http://parashuto.com/rriver/category/responsive-web • srcset と sizes http://terkel.github.io/srcset-sizes/
- 11. 経緯 • 2014-04-03：Tim Evko が CSS-Tricks に記事を寄稿「Hassel Free Responsive Images for WordPress」 • 2014-10：その後、RICG (= Responsive Images Community Group) 公式 のプラグインとして開発がスタート。コアへの実装を目指す • 2015-09-30： WordPress 4.4 へのマージ・プロポーザル • 2015-10-06：Changeset 34855 - Merge the Responsive Images feature plugin into core, initial commit. • 2015-10-22：WordPress 4.4 beta 1
- 12. Further Reading • Hassle Free Responsive Images for WordPress | CSS-Tricks https://css-tricks.com/hassle-free-responsive-images-for-wordpress/ • ResponsiveImages.org https://responsiveimages.org/ • WordPress › RICG Responsive Images « WordPress Plugins https://wordpress.org/plugins/ricg-responsive-images/ • WordPress › Responsive Images: Merge Proposal « Make WordPress Core https://make.wordpress.org/core/2015/09/30/responsive-images-merge-proposal/ • Changeset 34855 – WordPress Trac https://core.trac.wordpress.org/changeset/34855 • WordPress › WordPress 4.4 Beta 1 https://wordpress.org/news/2015/10/wordpress-4-4-beta-1/
- 13. 導入方法 • プラグイン：インストールして有効化するだ けでOK • 4.4：デフォルトで有効化されている • 専用の設定画面・項目などは無し • ユーザーが新たに学ぶ必要がある操作は無し
- 14. 仕組み • the_content フィルターを利用して img に srcset と sizes が追加され る • /wp-uploads/ に存在する画像にのみ適用 • 同じ比率のバリエーションが存在する場合にのみ適用 • 以前にアップされた画像にも適用される • ギャラリーの画像や、サムネイル画像（the_post_thumbnail() 等）に も適用される • ポリフィルは Picturefill 2.3.1
- 15. //プラグインあり <img class="alignnone size-large wp-image-12" src="~/K5TM2883_LR5-1024x678.jpg" alt="K5TM2883_LR5" width="660" height="437" srcset="~/K5TM2883_LR5-300x199.jpg 300w, ~/K5TM2883_LR5-1024x678.jpg 1024w, ~/K5TM2883_LR5.jpg 1200w" sizes="(max-width: 660px) 100vw, 660px" /> // プラグインなし <img class="alignnone size-large wp-image-12" src="~/K5TM2883_LR5-1024x678.jpg" alt="K5TM2883_LR5" width="660" height="437" /> 出力されるコード
- 16. 実装する際のポイント • しかし、レスポンシブ・イメージをより効果 的に実装するには、なかなか難しい… • アップロードする画像のサイズと、自動生 成される画像のバリエーションの見直し • sizes 属性の適切な設定
- 17. アップロードする画像のサイズと、自動 生成される画像のバリエーションの見直し • 検討しなければならない要因が多い！ • フルサイズ、大、中、サムネイルだけで足りるの か？ • 各ブレイクポイントにおける画像の最大幅は？ • ファイルサイズは？ • ファイル数は？
- 18. sizes 属性の適切な設定 • 各テーマにおける、全ての画像のメディアク エリーと幅デスクリプタを自動的に取得する 事ができない • (max-width: {{image-width}}) 100vw, {{image-width}} • 適切な sizes の設定を行う必要がある
- 19. sizes の値をフィルターする function custom_sizes( $sizes ){ $sizes = '(max-width: 680px) 100vw, (max-width: 920px) calc(100vw * 0.70), (max-width: 1160px) calc((100vw - 20px) * 0.742), 680px'; return $sizes; } add_filter( 'wp_get_attachment_image_sizes', 'custom_sizes', 11 ); • プラグインでは：tevkori_image_sizes_args（string ではなく array） apply_filters( 'wp_get_attachment_image_sizes', $sizes, $size, $image_meta, $attachment_id );
- 20. 4.4 ではできないこと • Imagick を利用したより高品質かつ効果的な画像の リサイズ機能（Advanced Image Compression） 4.4でのマージは見送り • srcset 属性の x デスクリプタや、アートディレクショ ンに向いている picture 要素と source 要素は未対応 今後の開発次第
- 21. まだまだ絶賛開発中…！ • https://make.wordpress.org/core/tag/respimg/ • https://github.com/ResponsiveImagesCG/wp-tevko-responsive-images • Slack #feature-respimg • WordPress Trac • #34528 (Responsive Images: Don't add srcset attributes to animated gifs.) • #34430 (Improve the performance of wp_make_content_images_responsive()) • #34359 (Cache output of `wp_upload_dir()` to improve performance)