Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

13.870 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Internet
  • Sex in your area is here: ❤❤❤ http://bit.ly/39sFWPG ❤❤❤
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Dating direct: ❤❤❤ http://bit.ly/39sFWPG ❤❤❤
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • 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 } .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • 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 } ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • 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 } ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

レスポンシブ・イメージの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

×