レスポンシブ・イメージのWordPressへの実装と4.4

Slide for my presentation at WordCamp Tokyo 2015 (2015/10/31 - 11/1)

WordCamp Tokyo 2015（2015/10/31-11/1）のスライド
--------
概要

Ethan Marcotte 氏がレスポンシブ・ウェブデザインを提唱して5年以上経ちますが、未だ完全な解決策が無い問題として「レスポンシブ・ウェブデザインにおける画像（レスポンシブ・イメージ）の問題」があります。

画像がページサイズの大きな割合を占めることが多い事や、昨今のデバイスの多様化、パフォーマンスの重要性を鑑みると、この問題の解決はウェブ全体にとってとても重要な事柄です。

しかし、ようやく、最近になって解決への道しるべが作られてきています。picture 要素や srcset 属性などのレスポンシブ・イメージを実現する仕様が含まれるHTML 5.1が草案（Working Draft）となり、多くのブラウザでも対応が進んでいます。

このセッションでは、RICG Responsive Images プラグインと、このプラグインの 4.4 へのマージについてお話し、srcset 属性と sizes 属性の WordPress へのネイティブ実装をどのように実現するかご紹介します。

注：時間の都合上、レスポンシブ・イメージの詳細な仕様は紹介しません。srcset 属性と sizes 属性についておさらいしておくことをオススメします。

Transcript

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/ • ࢓ࣄ • ςϯϓϧେֶδϟύϯΩϟϯύεɹŖɹ΢ΣϒαΠτͷӡӦɾߏங
4. ϨεϙϯγϒɾΠϝʔδ ͷ͓͞Β͍
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/
8. WordPress΁ͷ ϨεϙϯγϒɾΠϝʔδͷ ࣮૷
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)
22. 24.8+% of the web
23. Thank you! @waviaei
 http://waviaei.com
 waviaei@gmail.com