モバイルウェブのラボ：ブラウザーで作るレスポンシブでインストールできるウェブアプリ

このラボは、生徒ひとりひとりに専用の JupyterLab と、手を入れるための小さなウェブアプリを渡します。ページ、スタイルシート、スクリプト、マニフェスト、サービスワーカーがそろった習慣記録アプリです。2つ目のリンク Preview（プレビュー）は、アプリを今の状態のまま表示します。生徒は JupyterLab でファイルを編集して保存し、自分のブラウザーでプレビューを読み込み直します。ウィンドウを狭くするか、ブラウザーのデバイス表示を使うと、スマホでの見え方がわかります。

攻撃ラボではありません。どのコピーもインターネットにも他の生徒にも通じていないので、何かをダウンロードしたり、ほかの誰かに届いたりすることはありません。

生徒が学ぶこと

スマホでページを正しい幅で描くのに viewport タグが必要な理由、モバイルファーストのスタイルシートが600 px と 900 px でメディアクエリを足すしくみ、親指で押すにはボタンが少なくとも約 44 ピクセル必要な理由を学びます。次に、ウェブアプリをインストールでき、オフラインでも使えるようにする2つのファイルを見ます。名前、アイコン、色を持つマニフェストと、ファイルの一覧をキャッシュに保存するサービスワーカーです。モバイルウェブアプリがネイティブアプリと比べて何ができて何ができないかも考えます。ラボには専用のブラウザーがないので、そのあとブラウザーがすること、たとえばアプリのインストールを勧めることは、生徒が自分のブラウザーで確かめます。ウェブ開発やモバイルデザインの入門に向いています。正確な文言はご自分の試験機関の単元でご確認ください。ここではどれも引用していません。

ブラウザーで実行する

ラボはサービスをひとつ、jupyter だけ起動します。作業フォルダーにアプリ、アイコン2つ、ノートブック、短いスクリプトを書き出し、app/ フォルダーを見せる小さな静的サーバーを起動します。待機中のメモリは約 80 MB で、サービスに許される 512 MB の中に収まります。JupyterLab はトークンを求めません。プラットフォームの入口が、開いているのが誰かをすでに知っているからです。ラボの横のターミナルには専用の Python がないので、docker exec jupyter に続けて、中で実行するコマンドを書いてラボの Python を使います。

  1. コンテナーのページを開く. バーの「つくる」を開き、「コンテナーを実行」を選びます。ページは誰でも開けて、Git ラボと SQL ラボはアカウントなしで起動できます。ほかのラボには無料アカウントが必要です。アカウントを作成してサインインし、「起動」を押します。
  2. ラボを探す. 「サンプルラボ」のカードにすべてのサンプルが並んでいます。モバイルウェブ：レスポンシブな習慣記録アプリを探します。
  3. 「起動」を押す. 「起動」はそのまま1回の操作で実行します。「先にファイルを編集」は compose ファイルを開くので、起動する前に変更できます。
  4. 開く. ラボのページのバーには、JupyterLab と Preview の2つのリンクがあります。Preview を押して自分のブラウザーでアプリを見て、ウィンドウを狭くしてください。JupyterLab を押して start.ipynb をダブルクリックするか、「ターミナルを開く」を押して docker exec jupyter python3 steps/viewport.py と入力すると、viewport タグが見つかることがわかります。

生徒に提出してもらうもの

小さなボタン（Add ボタン、フィルターのボタン、丸い「完了」ボタン）を 44 ピクセル以上にしたあとの app/style.css を、JupyterLab の File、Download でダウンロードして提出します。何を変えたか、自分のブラウザーでどう確かめたかを、一、二文で添えます。steps/touch.py を変更の前と後に実行すると違いがわかります。最初は 44 より小さい大きさが4つあり、できあがった答えにはひとつもありません。自動採点はなく、文章を読めば理解できているかがわかります。さらに進んだ課題としては、マニフェストにない background_color を足すこと、サービスワーカーの一覧にあるのに存在しないファイルを直すことを求め、それがないとインストールが失敗する理由も書かせてください。

このラボで進める基本レッスン

Mobile Web Basics は、このラボで進める小さなレッスンです。生徒はアプリの中身を一覧し、プレビューサーバーに3つのファイルを頼み、viewport タグを見つけ、メディアクエリを一覧し、44 ピクセルより小さいボタンを数え、マニフェストとサービスワーカーのファイル一覧を調べます。

無料の個人アカウントではホームにある Basics モジュールで使え、どの学校でもライブラリの Basics フォルダーからコピーできます。わざと小さくしてあり、ラボで進めるレッスンがどんなものかを先生に見せ、残りはラボがやります。変えたいときは、ご自分のモジュールにコピーしてください。

GitHub のコード

compose ファイルに Dockerfile はありません。公開されている標準イメージをひとつだけ、Jupyter Docker Stacks の scipy-notebook を日付つきのタグに固定して、権限のない専用アカウントで、メモリ 512 MB で動かします。このイメージのライセンスは BSD-3-Clause で、私たちは配布していません。ファイルは起動時に決まった文章からアプリを書き出すので、どのコピーも同じで、何もダウンロードしません。限界も正直にお伝えします。アプリは小さく、ラボの中にブラウザーもスマホもありません。安全でないアドレスでは、ブラウザーがサービスワーカーを断ることがあります。インターネットから何かをインストールすることはできず、ラボを止めると何も残らないので、生徒は先にファイルをダウンロードします。

課題として出す

何を提出するかを、課題の中に書いてください。

  1. ラボを作る. モジュールで課題を追加し、「コンテナーラボ」のカードを選んでから「GitHub リポジトリ」を選びます。https://github.com/mitsurutech/lab-mobile-web とブランチ main を指定します。compose ファイルは既定の compose.yaml です。たとえばアプリを変えたい場合は、先にリポジトリをフォークしてください。
  2. 公開して試す. 「公開」すると、確認したコミットに固定されるので、あとでリポジトリを変更しても、すでに出したラボは変わりません。まず自分のコピーを起動してください。
  3. 配布する. ほかの課題と同じように配布します。期限を付けることもでき、課題には何をするか、何を提出するかを書いておきます。
  4. 提出物を採点する. 生徒のコピーを開いて提出された内容を確認し、採点します。足りない場合は理由を書いて差し戻します。

このラボを試す、そして費用

無料の個人アカウントで、このラボの基本レッスンに取り組めます。毎月、ほとんどのレッスンに足りる無料クレジットがあり、カードは要りません。クラスで使う場合、学校は最初の365日間、生徒50人まで無料で、その後は生徒1人あたりの年額です。すべてのラボが含まれ、教職員は無料です。

よくある質問

生徒はスマホでのレイアウトをどうやって見ますか。
ラボには専用のブラウザーがありません。自分のブラウザーで Preview のリンクを開き、ウィンドウを狭くするか、ブラウザーにデバイス表示があればそれを使います。これで見えるのはレイアウトです。親指での押しやすさや、スマホのブラウザーの動きは見えないので、手もとに本物のスマホがあればそのほうがよいです。
プレビューのリンクで、サービスワーカーがインストールされないのはなぜですか。
ブラウザーは安全なアドレスでしかサービスワーカーを許さず、プレビューのリンクがすべてのブラウザーで安全と見なされるとは限りません。サービスワーカーがなくてもアプリは動きます。断られたかどうかは、ブラウザーのコンソールに出ます。steps/offline.py はどちらの場合もファイルの一覧を調べ、存在しないファイルをひとつ示します。
どうしてトークンやパスワードを入力しないのですか。
ラボのウェブページには、プラットフォームの入口を通ってしかたどり着けません。入口はあなたが誰かをすでに知っていて、あなたとモジュールを教えるスタッフだけを通します。だから JupyterLab はトークンなしで起動されます。ほかの人が届く場所にあるマシンでは、こうして起動しないでください。