Weegloo Docs - ランニング記録アプリ

ランニング記録アプリは、スマホで走った距離・時間・ペース・ルートをその都度残し、ログインした人にその人自身の記録だけを見せるモバイルアプリです。走り終えると今日の記録が一覧に積み上がり、ほかの人の記録はお互いに見えません。

この例が示すのは一つです。ウェブサービスで使っていたのと同じバックエンドを、モバイルアプリがそのまま使います。記録を収める、会員を受け入れる、自分の記録だけを見せる、こうした仕事はウェブでもアプリでも変わりません。そのためこの例でも、そのバックエンド（記録を収めるデータ、会員ログイン、自分の記録だけを見る権限）を整える過程を最初から最後まで示し、モバイルだからこそ変わる二つ、配布と、ログイン結果をアプリで受け取る連携だけを別に取り上げます。

何を作るのか

服屋やブログの代わりに、今回の例は個人用のランニング記録アプリです。画面は三つに設定します。

ログイン画面: Google でログインします。
記録一覧: ログインした人がこれまでに残したランニング記録を、新しい順に見ます。
記録追加: 走った距離・時間・ペース・ルート・日付を残します。

肝心なのは「それぞれ自分の記録だけを見る」です。ログインした人には、その人が残した記録だけが届き、ほかの人の記録は見えません。この条件が、あとで会員ログインと権限を一緒に必要にします。

先に画面を作ってから連携する

このアプリを自分で作る道のりは二歩です。先にアプリの画面を作り、そのあとその画面の裏を WEEGLOO に任せます。

1. 画面デザインを作る。 上の画面は、LLM に下のようなプロンプトを与えて出しました。何を作るアプリなのかを一行、画面の一覧と各画面に載せる内容、デザインの方向を書けば済みます。

ランニング記録アプリの画面をデザインして。縦向きのモバイルアプリだ。

画面:

ログイン: アプリの紹介一行と「Google で続ける」ボタン。

記録一覧（ホーム）: 合計距離・ランニング回数の要約、ランニング記録カードのリスト（日付・距離・時間・ペース・ルートのサムネイル）、記録追加ボタン。

記録追加: 日付・距離・時間・ペース・メモ・ルート写真の入力と保存。

すっきりとしてアクティブな印象で、距離・ペースのような数値が一目で読めるように。モバイル UI の慣例に従う。

上の「何を作るのか」の三つの画面が、このプロンプトから出た結果です。まだデータもログインもない、画面だけの状態です。

2. WEEGLOO に連携する。 エージェントを WEEGLOO に接続し（接続する）、こう伝えます。

WEEGLOO と連携して。

何を作るのかを長く説明しなくても、エージェントがこれらの画面を調べて、画面の裏に必要なものを整えます。まるごと任せるこの流れは、一言で連携すると同じです。

画面の裏で WEEGLOO が整えるもの

「連携して」の一言で、エージェントが画面を見て整えるのはこの四つです。画面の裏で WEEGLOO が担うバックエンドです。

ランニング記録を収めるデータの型（Content Type）。距離・時間・ペース・ルート・日付のような項目を収めます。
Google ログイン（ServiceLogin）。アプリの利用者が自分で登録してログインできるようにします。
「自分の記録だけ」の権限。ログインした人が残した記録だけを、その人が読み・書き・消せるようにします。
自分の記録の配信。ログインした人に、その人の記録だけを一覧として届けます。

この四つは、同じサービスをウェブで作るときに必要なものとまったく同じです。それぞれの部品を個別に扱う方法は、会員登録とログインを付ける・権限を分ける・データを保存して取り出すで一つずつ扱います。ルート地図の画像や写真も一緒に残したいなら、ファイル（Media）を付けることもできます。

実際に作られたもの

以下は、この例の Stride Space に実際に作られているリソースです。一つひとつ設定する方法ではなく、「連携して」の結果としてこのアプリに何ができたのかを見ます。

ランニング記録を収める型

一つ目は、ランニング記録を収める型（Content Type）「Run」です。ランニング一件に収まる値が、項目ごとの欄に分かれています。

項目	欄の種類	必須	収める値
`Date`	Date	必須	走った日付。一覧で記録を指し示すタイトルとしても使われます。
`Distance (km)`	Number	必須	走った距離（キロメートル）。小数点まで入れます。
`Duration (seconds)`	Integer	必須	かかった時間（秒単位）。画面では `41:05` のように分・秒で見せます。
`Notes`	Long Text	任意	その日のランニングのメモ。
`Route photo`	Media	任意	ルート地図や写真ファイル一枚。

平均ペースを別に保存する欄はありません。距離と時間さえあれば出る値なので、アプリがその都度計算して見せます（記録追加画面の「auto-calculated」）。

二つ目は、会員が Google でログインする通り道（ServiceLogin）です。この例では名前を「Stride」とし、ログイン方式は Google 一つだけを有効にしました。新しくログインした人は、既定で下の「Runner」権限を受け取ります。ログインが終わると、その結果はログイン結果をアプリで受け取るで述べる中継のページを経てアプリに戻ってきます。

「自分の記録だけ」の権限

三つ目は、会員が受け取る権限（ServiceUserRole）「Runner」です。ルールはこうです。

できること	適用範囲
記録の作成	ログインした会員なら誰でも
記録の閲覧	自分が作ったものだけ
記録の編集	自分が作ったものだけ
記録の削除	自分が作ったものだけ

「閲覧」が「自分が作ったものだけ」にしぼられているので、一覧にはそれぞれ自分の記録だけが並びます。先に述べた四つのうち 3 番（権限）と 4 番（配信）は、実はこの一つのルールから一緒に出てきます。会員ごとに読める記録が自分のものだけなので、それがそのままその人に届く一覧になります。

記録と写真

四つ目は、ランニング記録一件一件（Content）とルート写真（Media）です。この二つはあらかじめ作っておくものではなく、会員がアプリでランニングを残すときに、その人の名義で一つずつ作られます。以下は実際に残された記録一件です。前の「Run」の型に値が埋められ、ルート写真が一緒に付いています。

距離 42.195 はマラソンのフルコースです。時間は秒単位で収められ（ここでは 3 時間 53 分の記録）、アプリでは 3:53:00 のように見せます。ルート写真はファイル（Media）として別に保存され、記録にはそのファイルを指し示す連携だけが収められます。「何を作るのか」の一覧・カードは、こうした記録が何件も積み上がった姿です。

ウェブと違う二つのこと

ここまではウェブとまったく同じです。同じバックエンドをモバイルアプリがそのまま使います。モバイルだからこそ変わるのは二つだけです。

配布: アプリマーケットは WEEGLOO の外

ウェブサービスは完成したものを Web Hosting でインターネットに公開できますが（サイトをインターネットに公開する）、完成したモバイルアプリを人々の手に届ける仕事（アプリマーケットへの登録）は WEEGLOO の外で行われます。WEEGLOO が担うのは、アプリ画面の裏のデータ・会員・権限です。

ログイン機能そのものは、ウェブと同じやり方で付きます。ただし、ログインが終わったあとにその結果をアプリで受け取る連携が、ウェブと違います。ログイン結果はウェブアドレスにしか戻ってこられないので、その結果をアプリへ渡す中継役のページが一段階必要です。この技術的な段階は Auth API で扱います。

自分の記録だけになっているか見る

このアプリの肝心な条件、「それぞれ自分の記録だけを見る」が実際に守られます。以下は、異なる二つのアカウントで同じアプリを開いたホーム画面です。同じアプリでも、合計距離も、ランニング数も、一覧に並ぶ記録も違います。

一方のアカウントには 5km 一件だけ、もう一方のアカウントにはマラソンと 3km の二件だけが並びます。お互いの記録は相手には見えません。Stride にはこの三件がすべて収められていますが（実際に作られたものを参照）、各会員にはその人が残した記録だけが届きます。前の「自分の記録だけ」の権限で、閲覧を「自分が作ったものだけ」にしぼった結果です。

次にやること

会員登録とログインを付ける: 独自の会員を受け入れるログインを別に付ける方法を扱います。
Auth API: ログイン結果をアプリで受け取る技術的な段階を扱います。
権限を分ける: 会員が自分のものだけを扱えるように権限を定める方法を扱います。
データを保存して取り出す: データの型を作り、内容を埋める方法を扱います。