[2015/01/10] （最終更新日 2021/07/13）
動的配信の代わりに使える、トラブル回避テク３つ
サイトのスマホ対応などに動的配信を導入すると、何らかの問題が起きるケースがよく見られるとし、動的配信の代わりに使える３つの方法を、Googleが紹介しています。
動的配信の代わりになる３テクニック
動的配信とは、同じURL上で、デバイス別に異なるHTMLを配信する方法です。例えばスマホにはスマホ対応コンテンツを、PCにはPC向けコンテンツを、同じURL上で別々に配信することになります。
しかし、動的配信を導入したサイトがなんらかの問題を起こすケースは少なくない、とGoogleのピエール・ファー氏は語ります。
ファー氏は、動的配信を使わずに別々のコンテンツを見せられる、下記の３つの代替テクニックを紹介しています。
1. JavaScriptでは、別々のJSファイルを読ませるためのif文を埋め込む
2. CSSでは、適切なCSSファイル配信のために別々のメディアクエリを使う
3. 画像には、<picture>要素やsrcset属性を活用する
ただ、2と3についてはなじみのない方も多いのではないでしょうか。次項で少々解説を加えたいと思います。
CSS：メディアクエリ機能
CSS3で採用されたメディアクエリ機能を使えば、アクセスしてきたユーザエージェントの画面サイズや解像度に応じて、適用するCSSスタイルを切り替える、レスポンシブデザインを導入することができます。
従来は、ブラウザ向け（media=”screen”）や印刷向け（media=”print”）といった、大きな区別でしかスタイルを分けることができませんでした。
しかし、メディアクエリを使えば、
- 幅が414px以下のブラウザの場合：
media=”only screen and (max-width:414px);” - 幅が800px以上の横長のブラウザの場合：
media=”only screen and (min-width:800px) and (orientation:landscape);”
などといった、柔軟なCSSスタイルの使い分けが実現します。
現在では、様々なサンプルコードを入手することも可能です。
＼無料診断の活用で課題を明確に／
外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。
画像：<picture>要素、srcset属性
<img>要素やsrc属性には、CSSのメディアクエリと同様の機能がありませんが、代わりに<picture>要素やsrcset属性を使うことで、画面サイズなどの環境別に画像を配信できます。
Retinaディスプレイなどピクセル密度の異なる高解像度環境にも便利に対応できるため、参考情報やサンプルコードもどんどん整ってきています。
例えば、
- 表示幅が320px以下で、解像度がx1の環境では photo_320_1x.png
- 表示幅が320px以下で、解像度がx2の環境では photo_320_2x.png
- 表示幅が320pxより大きく640px以下で、解像度がx1の環境では photo_640_1x.png
- 表示幅が320pxより大きく640px以下で、解像度がx2の環境では photo_640_2x.png
- それ以外の環境では photo.jpg
を配信する場合は、下記のように記述します。
<picture>
<source
media=”(min-width: 320px)”
srcset=”photo_320_1x.png 1x, photo_320_2x.png 2x”>
<source
media=”(min-width: 640px)”
srcset=”photo_640_1x.png 1x, photo_640_2x.png 2x”>
<img src=”photo.jpg” alt=”Photo”>
</picture>
これらは、未対応のブラウザもあるものの、ファー氏は「近年のブラウザには非常に強力な機能になる」として使用を促しています。
この記事が役に立ったらSNSで共有してください。
