O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

13.853 visualizações

Publicada em

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.

Publicada em: Internet
  • Sex in your area is here: ❤❤❤ http://bit.ly/39sFWPG ❤❤❤
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Dating direct: ❤❤❤ http://bit.ly/39sFWPG ❤❤❤
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes.........ACCESS WEBSITE Over for All Ebooks ..... (Unlimited) ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... .........................................................................................................................
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... .........................................................................................................................
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

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

  1. 1. Implementations of Responsive Images to WordPress, and 4.4 レスポンシブ・イメージのWordPressへの実装と4.4 Toru Miki @ WordCamp Tokyo 2015 31 October 2015
  2. 2. Toru Miki Toru / @waviaei • WordPress Community • 日本語版やCodex、WordCamp等のイベントでの翻訳・通訳 • コアへのコミット • WordCamp Tokyo 2011 実行委員長 • WordPress Meetup Tokyo 共同オーガナイザー
 http://www.meetup.com/WordPress-Meetup-Tokyo/ • 仕事 • テンプル大学ジャパンキャンパス ー ウェブサイトの運営・構築
  3. 3. レスポンシブ・イメージ のおさらい
  4. 4. レスポンシブ・ウェブデザイン における画像の問題 • 課題 • 各種条件に合うよう作成された画像を、条件に応じて、必要な 画像のみ取得して表示したい • 解決策 • レスポンシブ・イメージ • 解決策の実装手段の1つ • HTMLの仕様と、ブラウザのサポートによるネイティブ実装
  5. 5. 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
  6. 6. 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/
  7. 7. WordPressへの レスポンシブ・イメージの 実装
  8. 8. 経緯 • 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
  9. 9. 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/
  10. 10. 導入方法 • プラグイン:インストールして有効化するだ けでOK • 4.4:デフォルトで有効化されている • 専用の設定画面・項目などは無し • ユーザーが新たに学ぶ必要がある操作は無し
  11. 11. 仕組み • the_content フィルターを利用して img に srcset と sizes が追加され る • /wp-uploads/ に存在する画像にのみ適用 • 同じ比率のバリエーションが存在する場合にのみ適用 • 以前にアップされた画像にも適用される • ギャラリーの画像や、サムネイル画像(the_post_thumbnail() 等)に も適用される • ポリフィルは Picturefill 2.3.1
  12. 12. //プラグインあり <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" /> 出力されるコード
  13. 13. 実装する際のポイント • しかし、レスポンシブ・イメージをより効果 的に実装するには、なかなか難しい… • アップロードする画像のサイズと、自動生 成される画像のバリエーションの見直し • sizes 属性の適切な設定
  14. 14. アップロードする画像のサイズと、自動 生成される画像のバリエーションの見直し • 検討しなければならない要因が多い! • フルサイズ、大、中、サムネイルだけで足りるの か? • 各ブレイクポイントにおける画像の最大幅は? • ファイルサイズは? • ファイル数は?
  15. 15. sizes 属性の適切な設定 • 各テーマにおける、全ての画像のメディアク エリーと幅デスクリプタを自動的に取得する 事ができない • (max-width: {{image-width}}) 100vw, {{image-width}} • 適切な sizes の設定を行う必要がある
  16. 16. 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 );
  17. 17. 4.4 ではできないこと • Imagick を利用したより高品質かつ効果的な画像の リサイズ機能(Advanced Image Compression)
  4.4でのマージは見送り • srcset 属性の x デスクリプタや、アートディレクショ ンに向いている picture 要素と source 要素は未対応
    今後の開発次第
  18. 18. まだまだ絶賛開発中…! • 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)
  19. 19. 24.8+% of the web
  20. 20. Thank you! @waviaei
 http://waviaei.com
 waviaei@gmail.com

×