モバイルウェブの基本

スマホでウェブページを開いたら、1行を読むのにも指で広げて拡大しなければならなかった、という経験はありませんか。そのページは広い画面向けに作られていて、スマホがそれを小さく描いたのです。数行のコードで、スマホにきちんと描かせることができます。このレッスンでは、その部分を見ていきます。

• ビューポート：ページが描かれる画面の範囲。
• レスポンシブ：画面の幅に合わせて形を変えるレイアウト。
• メディアクエリ：「幅が一定以上」のような条件が成り立つときだけ適用される CSS の規則。
• マニフェスト：ウェブアプリの名前、アイコン、色をスマホに伝える小さなファイル。
• サービスワーカー：ブラウザーが持っておく、保存したコピーから要求に答えられるスクリプト。
• キャッシュ：ファイルのコピーをしまっておく場所。

ls app でウェブアプリの中身が並びます。ページ、スタイル、スクリプト、マニフェスト、サービスワーカー、アイコン2つです。2つ目のスクリプトは、そのうち3つをプレビューサーバーに頼んで、答えを表示します。どれも 200、つまり見つかったという答えで、マニフェストだけは専用の種類 application/manifest+json です。次に、自分のブラウザーで Preview のリンクを開き、ウィンドウを狭くして、レイアウトが変わるのを見てください。

このスクリプトは index.html を読み、viewport という名前の meta タグを探します。見つかり、中身は width=device-width, initial-scale=1 です。ページを画面と同じ幅で、ふつうの大きさで描く、という意味です。試してみましょう。JupyterLab でその行を消して保存し、スクリプトをもう一度実行すると、MISSING（ない）と表示されます。すると、スマホは画面がずっと広いかのようにページを描き、それを縮めてしまいます。

このスタイルシートはモバイルファーストです。ふつうの規則がスマホ用で、画面が広くなるにつれてメディアクエリが規則を足していきます。スクリプトは3つ見つけます。2つは幅で、600 px と 900 px です。3つ目は幅ではなく、ダークモードの好みです。ブラウザーのウィンドウを 600 px より広げると、フォームが横1列になります。900 px より広げると、リストが2列になります。

指先はマウスのポインターよりずっと大きく、押しているものを隠してしまいます。このラボでは、ボタンが届くべき線を 44 ピクセルにしています。スクリプトはスタイルシートのすべての大きさを並べます。Add ボタンは高さ 32 px、フィルターのボタンは 36 px、丸い「完了」ボタンは 30 × 30 で、44 より小さいものが4つあります。わざと少し小さくしてあり、直すのがあなたの課題です。

マニフェストは JSON ファイルです。スクリプトは7つの項目を調べます。6つはあります。名前、アイコンの下に出す短い名前、最初に開くページ、表示のしかた（standalone、ブラウザー自身のバーなしという意味）、アイコン、上のバーの色です。1つは MISSING（ない）で、background_color、アプリが起動するあいだに見える色です。アイコンのファイルは2つとも存在します。スマホがアプリのインストールを勧めるかどうかはブラウザーしだいなので、自分のブラウザーのメニューで探してください。

サービスワーカーは habits-v1 というキャッシュの名前と、インストールのときに保存する8つのファイルの一覧を持っています。スクリプトは、それぞれのファイルがあるかを調べ、7つはあります。8つ目の /offline.html はありません。これは本物の不具合です。一覧のファイルがひとつでも保存できないと、インストール全体が失敗し、オフラインでは何も動きません。ブラウザーは安全なアドレスでしかサービスワーカーを許さないので、プレビューのリンクでは断られるかもしれません。どちらなのかは、ブラウザーのコンソールに出ます。

ネイティブアプリは、ひとつの種類のスマホ向けに作られ、ストアからインストールします。モバイルウェブアプリはウェブページです。コードはすべてのスマホで共通で、ファイルを変えればすぐに更新され、リンクがあれば開けます。スマホにデータを保存でき、サービスワーカーでオフラインでも動き、多くのブラウザーではホーム画面に追加できます。ただし、スマホの機能に届く範囲はせまめです。通知やバックグラウンドでの動作など、何が使えるかはブラウザーとスマホしだいで、ブラウザーが保存データを消すこともあります。どちらを選ぶかは勝ち負けではなく、得るものと失うもののかね合いです。