前回、Claude code（以下code）で温度監視システムを構築してみた話を書きましたが、今回はその続編。今度は、自分用のアプリを作ってみた話です。
私は趣味で15年ほどランニングをしていて、今も楽しく継続できています。しかし、もっと楽しく、継続にやりがいを感じるための1つの試みとしてランニング用アプリを作ってみました。まあ、世の中にはきっと似たようなものがすでにあるとは思いますが…💦でも最初はそんな事を気にするよりも、自分の好きなこと関連のものを作るのが一番だと思います。
今回の記事ではなるべく専門用語を使わずに、作業の流れを書きました。プログラミングはほとんどできない素人だとこんな感じになるのか…という参考になれば幸いです☺️
まずは成果物紹介
アプリの名前は「WORLD RUN」です。
画面の中央にドーンと世界地図が表示されていて、東京を出発点として世界各地の名所を経由しながら地球一周（40,075km）を目指す、というコンセプトです。オレンジの点が現在地で、アプリの画面では点滅しています（これがそれっぽくてカッコいい✨️）。地図の下には実走行距離・換算距離・残り距離が表示されていて、今どのあたりにいるのか一目でわかります。
実走行距離を1倍、2倍、5倍、10倍した距離が換算距離です。ランニングガチ勢の人は1倍、初心者の人は10倍に設定してもらい、達成の難易度を調整できるようになっています。
どうでしょう？この画面、プログラミングなんてほぼできない素人が作ったとは思えないクオリティではないでしょうか？
作業内容の紹介
ここからは、主な作業内容について紹介していきます。アプリの開発は全てChrome上で行うので、色々調整した結果がリアルタイムで確認できるところが最高に楽しかったですね✨️
世界地図画像の作成
まず最初にやったのが、「カッコいいルート付きの世界地図の作成」です。実は、一番最初にcodeが作ってくれたものは、正直地図がカッコ悪い。小学生が書いたような、かろうじて5大陸が分かるだけのチープな代物でした。
そこで、ここは画像生成の上手いGeminiを使うことを私がcodeへ提案。するとcodeは今のアプリの雰囲気に合わせた世界地図画像をGeminiに生成してもらうためのプロンプトを出力してくれました。すると予想通り、センスのいい画像が生成され即採用。codeも素直に負けを認めていましたねｗ
現在地をオレンジの点滅で表現
一番最初に作ったものでは、世界地図のどこまで走ったことになるのか分かりづらかったので「現在地点を点滅する光点で表現してほしい」とcodeに日本語で依頼。すると、「光点の色はオレンジか、黄色かどっちにしますか？」と聞いてきたので、両方のサンプル画像を出力してもらい、オレンジに決定…という流れでした。
ちなみに現在地の計算は、チェックポイント間の直線距離をもとに算出しています。だから厳密にはルートの線上にピッタリ乗るわけではないですが、「大体このあたり」がわかれば十分なので、codeと相談してそこは妥協することにしました。
アプリの設定は別画面で実行できるよう「設定」タブを追加
最初はスマートウォッチ等に記録された走行距離をアプリに反映させるための設定や、走行距離の倍率設定（1〜10倍）がメインの画面にゴチャゴチャと並んでいました。
メインの画面には世界地図をもっと強調して表示したいんだけど…とcodeに相談すると、設定は別画面で実行することを提案してくれました。
そこで画面下部にタブを追加して、設定系は「設定」タブにまとめることに。おかげでホーム画面は地図がドーンと大きく見えるようになって、スッキリしました。実際にどうすればいいかはわからなくても、「もっとこうしたい」ということを伝えるとそれに対する的確なアドバイスをくれる。codeの優秀さを感じた一場面でしたね。
スマホからアイコンタップで起動できるように設定
これが今日の一番のハイライトかもしれません。
GitHubというサービスを使って、アプリをインターネット上に公開。さらにPWAという仕組みを使って、スマホのホーム画面にアイコンを追加できるようにしました。これがすごくて、アイコンをタップするとまるでアプリをインストールしたみたいに起動できます。アイコンはGeminiに作ってもらったものを使いました。
「スマホアプリみたいに起動したい！」と伝えるとcodeが「なら、これをやりましょう」と上記の作業の流れとやり方を丁寧に教えてくれました。
GitHubへのアカウント登録やその後の設定作業、そしてPWAに関する設定作業の流れの解説はありがたかったです。英語表記&メニューが多かったので1人でやっていたら確実に迷いまくったでしょうね😅
初めてのアプリ開発の感想
前回の記事でも触れましたが「自然言語で伝えたら、ほぼそのとおりにやってくれる」。これが本当に楽しいです。
👨「設定タブ作ってほしいんやけど…」
🤖「了解しました。画面上部と下部、どっちに表示させますか？」
👨「下部で頼むわ」
🤖「（カチャカチャ…）作りました」
👨「サンクス、確認するわ」
画面や仕組みを作るのはAIに任せて、自分は「どんな画面ならもっと楽しいだろう？どんな機能があったらもっと便利になるだろう？」という事を考える、想像することに専念できます。
非エンジニアでもアイデア次第で今までになかったサービスを提供するアプリを1人で作り出せる。本当に、そんな時代になりつつあることを体験できた気がします。
今回開発したアプリをもっと楽しく、見やすくするためのアイデアがいくつか浮かんでいるので、さっそくcodeに相談してみようと思います。ワクワクしますねー✨️
関連記事
Codeと一緒にやってみたシリーズはこちらです。
コメント