レスポンシブ・イメージのWordPressへの実装と4.4
•
11 gostaram•16,584 visualizações
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.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a レスポンシブ・イメージのWordPressへの実装と4.4
Semelhante a レスポンシブ・イメージのWordPressへの実装と4.4 (20)
レスポンシブ・イメージの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)