8章HTTP/2のセマンティクス:新しいユースケース

2章と4章ではブラウザに追加された機能を紹介しました。本章でもさまざまな機能を紹介しますが、ブラウザ向けの機能はごく一部です。検索エンジンやソーシャルメディアの存在が大きくなり、それらのシステム上でコンテンツの価値を最大化するための仕組みがいろいろと追加されました。本章ではブラウザとサーバー間の通信ではなく、検索エンジンやソーシャルメディアが理解するプロトコルを中心に紹介します。curlコマンドは使いません。

8.1 レスポンシブデザイン

2章で紹介したように、以前はユーザーエージェント情報を見てモバイル向けのコンテンツを配信するのが主流でした。しかし、ユーザーエージェントは正規化されていない情報なので、正しく判定できない可能性もあります。フィーチャーフォン時代には、各キャリアがIPアドレス範囲の一覧を公開していたため、それを見てモバイル端末の判定を行っていたウェブサイトもあったようです。

小さなスクリーンのユーザーに適したレイアウト、あるいはタブレット端末の縦横方向それぞれに最適なレイアウトなど、さまざまなユースケースでより間違いが少なく、確実に、適切な表現を可能にするのが、現在広く使われているレスポンシブデザインです。

まずその前にCSSピクセルについて説明します。現在発売されているスマートフォンには、スクリーンの解像度がフルHD(1980×1080ピクセル)を超えているものがたくさんあります。しかしブラウザは、一回り小さい論理解像度のディスプレイが接続されていると認識してブラウザに表示します。

たとえば、Retinaディスプレイをはじめて搭載したiPhone 4では、実際の解像度は640×960ピクセルでしたが、内部的には320×480ピクセルで、iPhone ...