家計簿アプリや、健康管理アプリ、タスク管理のアプリなど…
スマホで使える公式アプリには便利なものがたくさんありますよね。
でも、ちょっと使うとすぐ課金を求められたり、
広告が入って時間を取られたりするのがほとんどです。
今はAIの進歩のおかげで、ほぼコードを書かずに自分専用のアプリを作ることもできる時代になりました。
これを機に、無料・無制限に使えて、自由にカスタマイズできる、
オリジナルのアプリを作ってみましょう。
非プログラマーがAIがあってもできないこと
この記事では、プログラミングの知識等がない方がほぼコードを書かずにオリジナルアプリを開発することを想定しています。
AIがあっても、プログラマーレベルの技量がないと難しいことを最初にまとめておきます。
❌公式アプリとして配布する
→App StoreもしくはGoogle Playでアプリを公開するのは審査を通過できるレベルの技量が必要で、登録費もかかります。
❌完全オフラインで動く高機能アプリの開発
→メモリやデータベースなどの深い知識が求められるのでかなり難しい。
まず最初はオンラインで動くアプリ開発に挑戦しましょう。
❌OSに深く関わるアプリの開発
→スマホの通話履歴や、バックグラウンド常駐など、OSの深い知識が求められるので難しいです。
アプリ内でやりたいことが完結するものから始めましょう。
❌アプリからの通知機能
→これもOSに深く関わる部分なので難しいです。
iPhoneなら標準の「リマインダー」アプリがあるので、そこから通知がくるようにしましょう。
今回自作するアプリ：習慣トラッカー
今回は、ラジオ体操のスタンプカードのように、継続している習慣の成果をカレンダーで振り返ることができる習慣トラッカーアプリを作成します。
習慣トラッカーアプリを作成するにあたって、最低限必要なものはこちら。
- PC
- スマホ
- ネットワーク環境
PCでアプリを制作し、完成したアプリをスマホで使えるようにするまでがゴールです。
ChatGPTにプロンプトを入力する
まずは、PCでChatGPTにログインしてください。
ChatGPTに今回どんなアプリを作成するのかを説明するため、以下のプロンプトを入力します。
これから自分専用の習慣トラッカーWebアプリを作りたいです。
条件は以下です。
・HTML / CSS / JavaScriptのみで作成
・サーバーサイド処理なし
・データはlocalStorageに保存
・iPhoneのSafariでも使える
・GitHub Pagesで公開して使う想定
・自分専用なのでログインや共有機能は不要
機能要件：
・習慣（タスク）を複数登録できる
・タスクを実行したらスタンプ（チェック）を記録できる
・1日に何回でも記録できる
・タスクごとにカレンダー形式で達成履歴を表示できる
・日付は内部では YYYY-MM-DD 形式で扱う
まずはコードを書かずに、
・画面構成
・必要なデータ構造
・実装の流れ
を初心者にも分かるように整理してください。
専門用語を簡単に説明します。
HTMLとは：
画面に何を表示するかを決める、アプリの土台になるものです。
CSSとは：
文字の大きさや色、配置など、見た目を整えるためのものです。
JavaScriptとは：
ボタンを押したときの動きや、データを保存する処理を担当します。
localStorageとは：
ブラウザの中にデータを保存しておける仕組みで、アプリを閉じても記録が残ります。
GitHub Pagesとは：
作ったHTMLやJavaScriptを置いて、URLとして使える無料の置き場所です。
YYYY-MM-DD 形式とは：
日付を「2026-01-20」のように統一して扱うための、機械に分かりやすい書き方です。
続けて、以下のプロンプトを入力してください。
いきなり全部作ってもらうより、少しずつ生成してもらって、さらにフィードバックして生成してもらう方が最終的に完成度が高いものに仕上がります。
ではまず最小構成で実装したいです。
・タスクを1つだけ仮で用意
・今日の日付を取得
・ボタンを押すと今日のカウントが +1 される
・localStorageに保存される
・リロードしても消えない
この機能だけを持つ
index.html / style.css / script.js
をそれぞれ分けてコードを書いてください。
デザインは最低限で構いません。
３つのファイルが生成されますので、続けてこちらのプロンプトを入力してください。
今のコードをベースに、以下の機能を追加したいです。
・タスクを複数登録できる
・タスク一覧画面を作る
・タスクを選択すると詳細画面に遷移する
・タスクごとに日付別の記録を保存する
既存のコードを大きく壊さない形で修正してください。
変更点も説明してください。
続けて、こちらのカレンダーを表示するプロンプトを入力します。
タスク詳細画面に、
1か月分のカレンダーを表示したいです。
要件：
・表示月を指定できる
・その月の日付をマスで表示
・記録がある日にはスタンプ（チェック）を表示
・今日の日付が分かるようにする
まずは
・1タスク
・1か月固定
で動くコードを書いてください。
ここまできたら、ChatGPTが生成してくれたHTML、CSS、JSの３つのコードを以下のファイル名でPCのローカルの１つのフォルダ内に保存しておきましょう。
- index.html
- style.css
- script.js
そして、HTMLのindex.htmlファイルをダブルクリックして、ブラウザで確認してみてください。
私の方ではこんな感じになりました。
今の状態だと、過去のカレンダーが見れなかったり、複数の目標を設定できなかったり、あと見た目が地味なので色々直したいですね。
基本的に一気に直そうとせず、１つの改善につき１つのプロンプト入力がおすすめです。
まずはカレンダーを月切り替えできるようにします。
現在のカレンダーは「今月」しか表示できません。
以下を追加したいです。
・表示する年と月を状態として持つ
・「前の月」「次の月」ボタンで切り替えできる
・過去の記録があればスタンプが表示される
・localStorageに保存されている既存データをそのまま使う
まずは
・1タスク
・カレンダー表示部分のみ
に限定してコードを修正してください。
変更点と追加したコードの意図も説明してください。
そして、複数の目標を設定できるようにします。
現在のカレンダーは「今月」しか表示できません。
以下を追加したいです。
・表示する年と月を状態として持つ
・「前の月」「次の月」ボタンで切り替えできる
・過去の記録があればスタンプが表示される
・localStorageに保存されている既存データをそのまま使う
まずは
・1タスク
・カレンダー表示部分のみ
に限定してコードを修正してください。
変更点と追加したコードの意図も説明してください。
作成したタスクを消せるようにします。
削除ボタンを、開くを押した後のカレンダーの画面で
「このタスクを削除する」
って下に小さく出るようにできますか？
見た目を好きなように調整してみましょう。
私はちょっと可愛い感じにしたいのでこうしました。
機能は揃ったので、見た目を最低限整えたいです。
要件：
・モノクロではなく、アイスブルー中心のやや柔らかい配色
・カレンダーのマスが押しやすい
・スタンプ（チェック）が視覚的に分かりやすい
・iPhoneで片手操作しやすいレイアウト
フレームワークは使わず、CSSのみで改善してください。
ここまできたら、先ほどPCのローカルに保存した３つのファイルを更新しましょう。
テキストエディタでもできると思いますが、できればVScodeなどのコードエディタで編集するのがおすすめです。
私の方はこんな感じで、かなりいい感じにできました。
ここからは、データが消失しないように対策していきます。
localStorageのデータ保存
localStorageはユーザーが直接触れる形では保存されていません。
今この状態だと、以下の条件等でデータが消失する可能性があります。
- ブラウザデータ削除
- プライベートモード使用
- iPhone機種変更
- PC買い替え
- Safari / Chrome再インストール
せっかく頑張って続けた習慣の実績データですから、消えないようにバックアップとインポートの機能も加えておきましょう。
以下のプロンプトを続けて入力してください。
バックアップ、エクスポート機能を追加します
タスク一覧画面の一番下に小さく 「全データをバックアップ」 「バックアップから復元」 のリンクを追加してください
ChatGPTはコードを省略して解答を生成する時がありますが、どこにコードを入れるのかわからなくなったら
「コードを省略せず完全版をください」
というと、そのままコピペで更新できて楽です。
「全データをバックアップ」リンクをクリックすると、jsonファイルがダウンロードフォルダにダウンロードされます。
このjsonファイルを「バックアップから復元」リンクをクリックして選択すると、データが上書きされて復元されるようになります。
これでPC上ではアプリが完成です！
GitHub Pagesで公開する
この３つのファイルをGitHub Pagesに公開します。
GitHub Pagesにサインインしてください。
サインインしたら、Create repositoryボタンをクリックします。
Repository nameに、英数字でアプリの名前を入力します。
入力したら、Create repositoryボタンをクリックして次に進みます。
uploading an existing fileリンクをクリックします。
PCローカル上で作成した３つのファイルをドラッグして突っ込みます。
３つのファイルがアップできたのを確認できたら、Commit changesボタンをクリックします。
３つのファイルがコミットできたら、上のSettingsタブをクリックします。
Settingsの中の、左側のメニューのPagesをクリックし、
BranchのNoneのドロップダウンからMainを選択します。
Saveをクリックします。
ページを何回か更新すると、同じページにYour site is live at…というリンクが出ます。
Visit siteボタンをクリックして、公開したページを確認してみましょう。
ちゃんとアプリが表示できていたら、このURLをコピーして、スマホからペーストできるようにしておきます。
GitHub Pagesは公開URLになりますが、
記録データは各端末のブラウザ内に保存されるため、
他人に見られることはありません。
iPhoneショートカットでアプリをホーム画面に追加する
iPhoneの標準アプリ、ショートカットを開きます。
右上の+ボタンをタップします。
ドロップダウンをタップ。
名称変更をタップして、アプリ名を入力します。
ChromeまたはSafari、いつも使っているブラウザアプリをタップします。
コピーしたURLを貼り付けます。
ドロップダウンをタップして、ホーム画面に追加をタップ。
アプリのアイコンや色を好きなものに設定したら、右上の追加ボタンをタップします。
これで、iPhoneホーム画面にオリジナルアプリが追加されました。
開いてみるとこんな感じです。
画面サイズの小さい機種だと多少表示崩れが起きるので微調整が必要ですが、かなりいい感じ。
iPhoneに追加したことで、すぐ入力しやすくなったのも便利です。
自分でほぼコードを書かずにこのクオリティの自作アプリが完成してしまうなんて、すごい時代になりましたね。
まとめ
多少技術的な制限はあるものの、AIを活用することで、ほぼコードを書かずに自分専用のオリジナルアプリが作れました。
ここまで読んでくださりありがとうございました！
