ランニング記録サービス
ランニング記録サービスは、スマートフォンで走った距離・時間・ペース・ルートをその場で記録し、ログインした本人に自分の記録だけを見せます。ランニングを終えると今日の記録が一覧に積み上がり、ほかの人の記録はお互いに見えません。同じ記録をスマートフォンアプリでも、Web でも見られます。
このサンプルが見せることは一つです。スマートフォンアプリと Web、二つの画面が一つの WEEGLOO バックエンドを一緒に使います。そのためこのページは、アプリと Web が一緒に使うバックエンドをまず見て、そのあとアプリと Web のうち関心のあるほうへ分かれます。どちらを選んでもバックエンドは同じです。それが要点です。
何を作るのか
服屋やブログの代わりに、今回のサンプルは個人用のランニング記録サービスです。スマートフォンアプリと Web、二つの画面で同じ記録を見ます。アプリ画面は三つに定めます。
- ログイン画面: グーグルでログインします。
- 記録一覧: ログインした本人がこれまで残したランニング記録を新しい順で見ます。
- 記録の追加: 走った距離・時間・ペース・ルート・日付を残します。
肝心なのは「それぞれ自分の記録だけを見る」です。ログインした本人にはその人が残した記録だけが届き、ほかの人の記録は見えません。この条件が、あとで会員ログインと権限を一緒に必要にします。
関心のあるほうへすぐ進んでもかまいません。スマートフォンアプリを作るほうはアプリとして使う、Web を作るほうはWeb として使うへ。ただしその下の「画面の裏側のバックエンド」はアプリでも Web でも共通なので、先に目を通しておくと二つの分岐がうまくつながります。
画面の裏側のバックエンド（アプリ・Web 共通）
画面を作ってつないだエージェントに「WEEGLOOと連携して」と伝えると（接続する・ひとことで連携する）、エージェントが画面を見て、画面の裏側に必要なものを整えます。ランニング記録を収めるデータのひな形（Content Type）、グーグルログイン（ServiceLogin）、「自分のものだけ」の権限（ServiceUserRole）、そしてその権限に従って会員ごとに自分の記録だけを届ける配信です。このバックエンドは、アプリ画面から始めても Web 画面から始めても同じで、アプリと Web がそのまま一緒に使います。それぞれの部品を個別に扱う方法は、会員登録とログインを付ける・権限を分ける・データを保存して取り出すで一つずつ扱います。
以下は、このサンプルの Stride Space に実際に作られているリソースです。一つひとつ設定する方法ではなく、「連携して」の結果として何ができたのかを見ます。
ランニング記録を収めるひな形
一つ目は、ランニング記録を収めるひな形（Content Type）「Run」です。ランニング一件に収まる値が、項目ごとの欄に分かれています。
| 項目 | 欄の種類 | 必須 | 収める値 |
|---|---|---|---|
Date | Date | 必須 | 走った日付。一覧で記録を指し示すタイトルとしても使われます。 |
Distance (km) | Number | 必須 | 走った距離（キロメートル）。小数点まで入れます。 |
Duration (seconds) | Integer | 必須 | かかった時間（秒単位）。画面では 41:05 のように分・秒で見せます。 |
Notes | Long Text | 任意 | その日のランニングのメモ。 |
Route photo | Media | 任意 | ルート地図や写真ファイル一枚。 |
平均ペースを別に保存する欄はありません。距離と時間さえあれば出る値なので、アプリがその都度計算して見せます（記録の追加画面の「auto-calculated」）。
グーグルログイン
二つ目は、会員がグーグルでログインする通り道（ServiceLogin）です。このサンプルでは名前を「Stride」とし、ログイン方式はグーグル一つだけを有効にしました。新しくログインした人は、既定で下の「Runner」権限を受け取ります。ログインが終わると、その結果は画面に戻ってきますが、戻ってくる方式がアプリと Web で少し違います。その違いはアプリとして使うとWeb として使うでそれぞれ扱います。
「自分の記録だけ」の権限
三つ目は、会員が受け取る権限（ServiceUserRole）「Runner」です。ルールはこうです。
| できること | 適用範囲 |
|---|---|
| 記録の作成 | ログインした会員なら誰でも |
| 記録の閲覧 | 自分が作ったものだけ |
| 記録の編集 | 自分が作ったものだけ |
| 記録の削除 | 自分が作ったものだけ |
「閲覧」が「自分が作ったものだけ」にしぼられているので、一覧にはそれぞれ自分の記録だけが並びます。会員ごとに読める記録が自分のものだけなので、それがそのままその人に届く一覧になります。このルールはアプリでも Web でも同じように適用されます。
記録と写真
四つ目は、ランニング記録一件一件（Content）とルート写真（Media）です。この二つはあらかじめ作っておくものではなく、会員がランニングを残すときに、その人の名義で一つずつ作られます。以下は実際に残された記録一件です。前の「Run」のひな形に値が埋められ、ルート写真が一緒に付いています。
距離 42.195 はマラソンのフルコースです。時間は秒単位で収められ（ここでは 3 時間 53 分の記録）、画面では 3:53:00 のように見せます。ルート写真はファイル（Media）として別に保存され、記録にはそのファイルを指し示す連携だけが収められます。
アプリとして使う
まずはスマートフォンアプリです。アプリ画面を作り、その画面の裏側を上の画面の裏側のバックエンドで満たします。
アプリ画面を作って連携する
1. 画面デザインを作る。 上の「何を作るのか」の三つの画面は、LLM に下のようなプロンプトを与えて出しました。何を作るアプリなのかを一行、画面の一覧と各画面に載せる内容、デザインの方向を書けば済みます。
ランニング記録アプリの画面をデザインして。縦向きのモバイルアプリだ。
画面:
- ログイン: アプリの紹介一行と「グーグルで続ける」ボタン。
- 記録一覧（ホーム）: 合計距離・ランニング回数の要約、ランニング記録カードのリスト（日付・距離・時間・ペース・ルートのサムネイル）、記録追加ボタン。
- 記録の追加: 日付・距離・時間・ペース・メモ・ルート写真の入力と保存。
すっきりとしてアクティブな印象で、距離・ペースのような数値が一目で読めるように。モバイル UI の慣例に従う。
こうして出てきた画面は、まだデータもログインもない、画面だけの状態です。
2. WEEGLOO に連携する。 エージェントを WEEGLOO に接続し、「WEEGLOOと連携して」と伝えると、エージェントがこれらの画面を調べて、上の画面の裏側のバックエンドを整えます。
アプリだからこそ気をつける二つ
バックエンドは Web で作るときとまったく同じです。アプリだからこそ気をつけることが二つあります。
- 配布: 完成したモバイルアプリを人々の手に届ける仕事（アプリマーケットへの登録）は WEEGLOO の外で行われます。WEEGLOO が担うのは、アプリ画面の裏側のデータ・会員・権限です。（Web にはアプリマーケットがありません。Web として使うで扱います。）
- ログインコールバック: ログインが終わったあと、その結果をアプリで受け取る連携が Web と違います。ログイン結果は Web アドレスにしか戻ってこられないので、その結果をアプリへ渡す中継役のページが一段階必要です。この技術的な段階は Auth API で扱います。
自分の記録だけになっているか見る
肝心の条件「それぞれ自分の記録だけを見る」が、アプリで実際に守られます。以下は、異なる二つのアカウントで同じアプリを開いたホーム画面です。同じアプリでも、合計距離も、ランニング数も、一覧に並ぶ記録も違います。
一方のアカウントには 5km 一件だけ、もう一方のアカウントにはマラソンと 3km の二件だけが並びます。お互いの記録は相手には見えません。Stride にはこの三件がすべて収められていますが、各会員にはその人が残した記録だけが届きます。上の「自分の記録だけ」の権限で、閲覧を「自分が作ったものだけ」にしぼった結果です。
Web として使う
Web はアプリと同じバックエンドをそのまま使います。上の画面の裏側のバックエンドを Web が読んで、同じ記録を見せます。
Web 画面を作って連携する
Web もアプリと同じ二歩です。
1. Web 画面デザインを作る。 アプリと同じように、LLM に下のようなプロンプトを与えて Web 画面を出します。載せる内容はアプリと同じで、広い画面に合わせた Web レイアウトに変えます。
ランニング記録の Web 画面をデザインして。デスクトップ Web だ。
画面:
- ログイン: サービスの紹介一行と「グーグルで続ける」ボタン。
- 記録一覧（ダッシュボード）: 合計距離・ランニング回数・平均ペースの要約、ランニング記録の一覧（日付・距離・時間・ペース・ルートのサムネイル）、記録追加ボタン。
- 記録の追加: 日付・距離・時間・ペース・メモ・ルート写真の入力と保存。
広い画面を活かしたレイアウトで、距離・ペースのような数値が一目で読めるように。Web UI の慣例に従う。
2. WEEGLOO に連携する。 接続したエージェントに「この Web も WEEGLOOと連携して」と伝えます。すでにアプリを作っていれば、エージェントは上の画面の裏側のバックエンドを作り直さず、そのままつなぎます。新しく作る WEEGLOO リソースはありません。 Web で新しく作るのは Web 画面だけです。（アプリを経ずに Web から始めた場合は、このときそのバックエンドが初めてでき、あとでアプリを足しても同じようにそのまま使います。どちらであってもバックエンドは同じです。）
この Web 画面は、自分の記録だけになっているか見るに出てきたアカウント（今月 45.2km、マラソン 42.20km と 3km）を Web で開いたものです。アプリのホームと合計距離・ランニング数・記録がまったく同じです。バックエンドが一つなので、アプリが見せたそのデータを、Web がデスクトップ画面でそのまま見せます。
Web だから違う二つ
Web もアプリと違う点が二つありますが、方向がアプリと反対なので、今度は気をつけることがむしろ少なくなります。
- 配布: Web にはアプリマーケットが要りません。作った Web ファイルを Web Hosting でそのままインターネットに公開します（サイトをインターネットに公開する）。
- ログインコールバック: Web はログイン結果が Web アドレスにそのまま戻ってきます。アプリで必要だった中継のページが、Web にはなくても大丈夫です。
権限はそのままなので、Web でも会員ごとに自分の記録だけが見えます。上の「自分の記録だけ」の権限が Web にも同じように適用されます。
次にやること
- 会員登録とログインを付ける: 独自の会員を受け入れるログインを別に付ける方法を扱います。
- Auth API: ログイン結果をアプリで受け取る技術的な段階を扱います。
- 権限を分ける: 会員が自分のものだけを扱えるように権限を定める方法を扱います。
- データを保存して取り出す: データのひな形を作り、内容を埋める方法を扱います。
- サイトをインターネットに公開する: Web を Web Hosting でデプロイする方法を扱います。