カレンダー・ToDo・メモを1つに。ChatGPTとCodexで自分用アプリを作ってみた
カレンダー、ToDo、メモ。
それぞれ便利なアプリはありますが、今回作りたかったのは、この3つを一つにまとめたアプリでした。
例えば、期限を設定したToDoはカレンダーにも表示したい。終わったタスクは取り消し線を付けて、未完了のものと区別したい。今日の予定と、やるべきことも一目で確認できるようにしたい。
一つひとつは小さな希望です。でも、毎日使うものなら、こうした部分も自分の使いやすい形にしたい。
そこで、ChatGPTとCodexを使って、自分用のWebアプリを制作することにしました。
最終的にはWindowsで作成したアプリをインターネット上に公開し、iPhoneのホーム画面から起動するところまで確認できています。
ただし、最初から簡単にできたわけではありません。長いコードを何度もコピーしていた時期もあれば、エラーが出て修正を繰り返したこともありました。
この記事では、なぜ自分で作ろうとしたのか、どんな機能を考えたのか、ChatGPTとCodexをどう使ったのかを、実際の制作記録をもとに紹介します。
自分でも似たアプリを作ってみたい人向けに、必要な準備や具体的な依頼文もまとめました。
最初に欲しかったのは、3つの機能をまとめたアプリ
自作を考えた最初の理由は、カレンダー・ToDo・メモを一つにしたかったことです。
単に3つの画面を用意するだけではなく、それぞれの機能をどう使うかも考えました。
例えば、ToDoに期限を設定したらカレンダーでも確認できるようにする。今日の画面には、その日の予定と期限付きのタスクを表示する。
完了したToDoには取り消し線を付けて、未完了のものと区別する。こうした細かな表示も希望していました。
既存のアプリにも、似た機能を持つものはあります。
今回、自作を選んだからといって、既存アプリが使いにくいと決めつけるつもりはありません。設定を工夫すれば、十分に目的を達成できるアプリもあるはずです。
それでも、自分が欲しい機能や表示方法を一つずつ決められるのは、自作する方法ならではの利点です。
最初からプログラミングの技術を学ぶことを目的にするのではなく、自分が使いたいものを形にするためにAIを活用する。今回は、その方向で制作を進めました。
実際に作ったのは4画面のWebアプリ
最終的に、アプリの画面は4つになりました。
最初に考えていた3つの機能に加えて、その日の情報をまとめて確認できる「今日」の画面を用意したためです。
「今日」
今日の予定と期限付きToDoをまとめて表示する画面です。カレンダーを開いて日付を選ばなくても、その日に確認したい情報へアクセスできる構成にしました。
「やること」
ToDoの登録、完了状態の切り替え、期限の設定などを行う画面です。最初から希望していた、完了済みタスクの見せ方も仕様として検討しました。
「カレンダー」
月間カレンダーから日付ごとの予定や期限付きタスクを確認する画面です。予定には開始・終了時刻も設定できる構成です。
「メモ」
思いついたことや残しておきたい内容を保存する画面です。検索や編集ができ、スマートフォンでは一覧から編集画面へ切り替える作りにしました。
※画像はAI生成による説明用イメージです。実際のアプリ画面そのものではなく、画面内の予定・タスクも架空の内容です。
アプリはWindowsでも開けますが、普段使うことを想定してiPhone向けの表示も調整しています。
PCでは上部に画面切り替えメニューを配置し、スマートフォンでは下部に「今日・やること・カレンダー・メモ」のメニューを並べました。
また、バックアップや復元といった使用頻度の低い機能は、通常の画面に置くのではなく設定画面へまとめています。
こうしてみると、欲しい機能を考えるだけでなく、どの操作をどこに置くと使いやすいかも、アプリ制作で決めることの一つだと分かります。
ただし、ここで紹介した機能のすべてをiPhone実機で検証し終えたわけではありません。実際に確認できた範囲については後半で説明します。
自分用アプリを作るなら、最初に何を決めればいい？
今回のようにChatGPTやCodexを使う場合でも、最初からAIに「便利なアプリを作って」と頼むだけでは、欲しいものが正確に伝わるとは限りません。
例えば、「ToDoアプリが欲しい」という言葉だけでは、期限が必要なのか、完了したタスクをどこへ表示するのか、カレンダーと連動させたいのかが分かりません。
そこで、まずは次の3点を整理すると進めやすくなります。
何を管理したいのか。 予定、ToDo、メモなど、必要な情報を決める。
どう操作したいのか。 期限を付けたらカレンダーに表示する、完了済みを区別するなど、動作を具体化する。
どこで使いたいのか。 Windowsだけなのか、iPhoneでも使うのかを決める。
この段階では、ReactやJavaScriptといった技術を理解している必要はありません。
「こういうときに、こう表示してほしい」という希望を、普段の言葉で伝えるところから始められます。
ChatGPTへの相談文の例
これから同じようなアプリを作るなら、例えば次のように相談できます。
【コピーして使える例文】
自分用のカレンダー・ToDo・メモアプリを作りたいです。
Windows PCで制作し、最終的にはiPhoneでも使えるWebアプリにしたいと考えています。
必要な画面は「今日」「やること」「カレンダー」「メモ」の4つです。
ToDoには期限を設定できるようにし、期限付きのものはカレンダーでも確認できるようにしたいです。
完了したToDoは取り消し線で区別し、未完了のタスクを見やすくしてください。
画面はできるだけシンプルにしたいので、必要のない機能を勝手に増やさないでください。
まずコードを書き始める前に、必要な機能、画面構成、データの保存方法、実装の順番を整理してください。
不足している条件があれば質問してください。
これは今回の制作方針をもとに、読者向けに作成した例文です。当時の入力内容をそのまま再現したものではありません。
重要なのは、作ってほしい機能と、勝手に追加してほしくない機能の両方を伝えることです。
また、最初から4画面をすべて作る必要はありません。
まずはToDoの追加・完了・削除だけを作り、正常に動くことを確認してから、期限やカレンダーへ広げていく方法もあります。
ChatGPTで作り始めたものの、コードの貼り付けが大変だった
今回の開発で、途中から作業方法を変更した理由があります。
最初はChatGPTにコードを出力してもらい、自分でファイルを作成したり、既存のコードを貼り替えたりしていました。
小さな修正なら、それほど困りません。
しかし、アプリの画面や機能が増えるにつれて、コードも長くなっていきます。
一つの修正で複数のファイルを変更する場合もあります。
どのファイルに貼り付けるのか。以前のコードは消してよいのか。別の機能に影響しないのか。
そうした確認が必要になり、長いコードを何度もコピーする方法には負担を感じました。
そこで試したのが、Codexを使って実際のファイルを編集する方法です。
Codexでは、ファイルを直接編集してもらえる
Codexは、OpenAIが提供するコーディング支援ツールです。
ChatGPTとの会話でコードを受け取り、自分で貼り付ける方法とは異なり、指定した開発フォルダのファイルを読み取り、編集やテストを進める使い方ができます。
実際の作業でも、元のアプリをそのまま変更するのではなく、別の作業用フォルダへコピーしてからCodexを試しました。
これは、すでに動いているアプリを壊さないようにするためです。
Codexの利用方法はOpenAI公式の案内で確認できます。Windowsで利用できる方法があるため、Macを用意する必要はありません。
Codexに依頼するときの例文
例えば、既存のReactアプリへ機能を追加する場合は、次のように頼めます。
【コピーして使える例文】
このフォルダはReactとViteで作成したWebアプリです。
最初にファイル構成と現在の機能を確認してください。
既存のToDo機能を残したまま、タスクに期限を設定できるようにしてください。
期限を設定したタスクはカレンダー側にも表示したいです。
作業対象はこのプロジェクト内だけに限定してください。
ファイルの削除や大きな構成変更が必要な場合は、実行する前に説明してください。
編集が終わったらビルドと必要なテストを行い、変更したファイル、動作確認できた内容、まだ確認できていない項目を報告してください。
この例文も、今回の作業方法を参考にした読者向けのものです。
Codexがファイルを変更できると、毎回長いコードを手作業で貼り付ける負担を減らせます。
ただし、修正内容が必ず正しいとは限りません。
AIから「作業が完了しました」と報告されても、ブラウザを開いて実際に使えるかどうかは確認する必要があります。
今回の開発でも、コードの修正、ビルド、ブラウザでの動作確認を重ねながら進めました。
Windowsでアプリを動かすために使ったもの
今回のWebアプリでは、ReactとViteを使用しています。
Reactは画面を組み立てるための技術、Viteは開発中の起動や公開用ファイルの作成を助けるツールです。
初めての人は、最初から詳しい仕組みを覚える必要はありません。まずは、Windowsで開発用の画面を表示できるところまで進めれば十分です。
Node.jsを準備する
最初に、Node.jsの公式サイトからWindowsに対応するLTS版をインストールします。
続いてPowerShellやWindows Terminalを開きます。
Node.jsとnpmが使えるかどうかは、次のコマンドで確認できます。
node --version
npm.cmd --version
それぞれバージョン番号が表示されれば、基本的な準備ができています。
ViteではNode.js 20.19以降、22.12以降などが必要です。使用するテンプレートがさらに新しいバージョンを要求する場合は、公式案内に従って更新してください。
Reactアプリの土台を作る
次のコマンドを順番に実行します。
npm.cmd create vite@latest my-iphone-webapp -- --template react
cd my-iphone-webapp
npm.cmd install
npm.cmd run dev
実行に成功すると、ブラウザで開くためのURLが表示されます。
通常はhttp://localhost:5173/ですが、ほかのプログラムが同じポートを使用している場合は番号が変わることがあります。
ターミナルに表示されたURLを開き、ReactとViteの初期画面が表示されたら準備完了です。
ここで作成されるのは、まだ機能のないアプリの土台です。
ChatGPTで整理した仕様をもとに、Codexで必要な画面や機能を追加していきます。
詳しい環境構築方法はVite公式ガイドでも確認できます。
実際に困ったことと、修正したこと
アプリ制作では、コードを書いたり機能を追加したりする以外にも、さまざまな問題が発生しました。
例えば、開発中にブラウザでERR_CONNECTION_REFUSEDと表示されたことがあります。
これは、必ずしもアプリのコードが壊れているという意味ではありません。
開発サーバーが起動していなかったり、違うポート番号にアクセスしていたりする場合にも発生します。
そのため、画面が開かないときは、まずnpm.cmd run devが実行されているか、ブラウザのURLが正しいかを確認します。
また、Reactの変数参照や日付処理で問題が起きたこともありました。
特に日付を扱うアプリでは、時刻の変換方法によって表示日がずれることがあります。
こうした問題は、「画面が動かないから全部作り直す」ではなく、どの操作で何が起きたのかを調べ、原因になっている部分を修正する必要があります。
AIに修正を頼むときも、原因を伝える
もし同じようなエラーが起きたら、次の情報をまとめてCodexへ伝えると状況を整理しやすくなります。
どの画面で起きたのか
エラーが出る直前に何をしたのか
画面やターミナルにどんなメッセージが表示されたのか
本来はどう動いてほしかったのか
コードの全体を書き直してもらう前に、原因となる部分だけ確認してもらうことが重要です。
AIが修正したあとも、エラーが消えたことだけでなく、以前から使えていた機能が壊れていないか確認します。
今回の制作では、Codexにファイルを編集してもらう方法へ変えたことで、作業手順を整理しやすくなりました。
ただし、手作業で編集した場合とCodexを使った場合の所要時間を同じ条件で比較したわけではありません。そのため、「何倍速くなった」といった効果までは確認できていません。
Windowsで作ったアプリをiPhoneから使うまで
Windows上でWebアプリが動くようになったら、次はiPhoneから開ける状態にします。
今回使った公開先はFirebase Hostingです。
Firebase Hostingは、作成したWebアプリのファイルをインターネット上に配置するためのサービスです。
Windowsで作成したアプリをFirebase Hostingに公開すれば、iPhoneのブラウザからURLへアクセスできるようになります。
なお、これはApp Storeからインストールするネイティブアプリではありません。ブラウザで利用するWebアプリをホーム画面に追加する方法です。
まず公開用ファイルを作る
Viteを使った標準的なReactプロジェクトでは、次のコマンドで公開用のファイルを作成できます。
npm.cmd run build
通常はdistというフォルダが作成され、公開に必要なファイルが保存されます。
Firebase Hostingで公開する
まずFirebaseコンソールで新しいプロジェクトを作成します。
今回の開発では、以前に作成した別のアプリへ誤って公開しないよう、専用のプロジェクトを用意しました。
料金プランも確認し、Sparkプランで進めています。
Firebase Hostingには無料で利用できる枠がありますが、利用量には上限があります。料金やサービスの条件はFirebase公式料金ページで確認してください。
Firebase CLIをインストールする場合は、PowerShellで次のコマンドを実行します。
npm.cmd install -g firebase-tools
続いてログインします。
firebase.cmd login
ログイン後は、利用できるプロジェクトを確認します。
firebase.cmd projects:list
公開するアプリのプロジェクトフォルダで、Hostingの初期設定を行います。
firebase.cmd init hosting
設定画面では、公開先のFirebaseプロジェクトと、配信するフォルダを選びます。
Viteの標準構成では公開用フォルダがdistなので、Firebaseの初期値であるpublicと間違えないようにします。
Reactで一ページ型のアプリを作っている場合は、その構成に合った設定も確認します。
設定後、もう一度ビルドと公開先を確認してから、次のコマンドで公開します。
firebase.cmd deploy --only hosting
成功すると公開URLが表示されます。
より詳しい設定はFirebase Hosting公式ガイドを参照してください。
公開するときにもエラーが起きた
実際の開発では、Firebase Hostingの設定や公開処理でも問題が発生しました。
Codexの作業報告では、公開工程でアップロード前に2回失敗し、設定の扱いを修正してから成功しています。
AIに任せていても、設定の問題が自動的にすべて解決するとは限りません。
特に公開先を間違えると、別のアプリへ変更を反映してしまう可能性があります。
複数のプロジェクトを扱う場合は、公開前に接続先を確認しておく必要があります。
また、ログインに使用する認証情報やトークンを、公開用のファイルや記事に含めないことも重要です。
iPhoneのホーム画面から起動する
Firebase Hostingで公開できたら、iPhoneでURLを開きます。
今回の開発では、実際にiPhoneのEdgeでアプリの画面を表示し、ホーム画面に登録しました。
その後、追加したアイコンから起動できたことも確認しています。
これから試す人には、Appleが公式に案内しているSafariでの方法もあります。
iPhoneのSafariでWebアプリのURLを開く
ページメニューから「共有」を選ぶ
「ホーム画面に追加」を選ぶ
「ウェブアプリとして開く」をオンにする
「追加」を押す
これでホーム画面にアイコンが追加され、そこからWebアプリを開けます。
Safariの操作はiOSのバージョンや画面設定によって異なる場合があります。詳しくはApple公式の案内を確認してください。
今回、本人が実際に確認したのはEdgeからのホーム画面登録です。Safariでの方法は公式手順として紹介しています。
また、ホーム画面に追加したからといって、オフラインでも動いたり、別の端末とデータが自動的に同期されたりするわけではありません。
作ってみて分かった、便利さと注意点
今回の制作で、自分が考えた画面構成や操作方法を具体的な形にするところまで進められました。
一方、アプリは画面が表示できれば完成、というものでもありません。
実際に使い続けるためには、いくつか確認しておきたいことがあります。
PCとiPhoneのデータは自動的には共有されない
今回のアプリでは、ToDo・予定・メモをブラウザのlocalStorageに保存しています。
これは、ブラウザ側にデータを保存する仕組みです。
そのため、同じWebアプリのURLをPCとiPhoneで開いても、登録した内容が自動的に同期されるわけではありません。
また、同じPCでも開発用のURLが違えば、保存先も異なる場合があります。
例えば、localhost:5173とlocalhost:5174では保存領域が別です。
コピーしたアプリを開いたときにデータが表示されないからといって、元のデータが消えたとは限りません。
バックアップは必要になる
localStorageに保存したデータは、通常の再読み込み後も保持できます。
ただし、ブラウザのデータ削除などで失われる可能性があるため、大切なデータの保存先として無条件に信用することはできません。
今回のアプリには、JSON形式でバックアップと復元を行う機能も追加しました。
Windowsのテスト環境では、実際にバックアップファイルをダウンロードし、内容を確認しています。
一方、iPhone上での全機能の操作や長期的なデータ保持、バックアップからの復元については、開発記録上まだ十分な実機確認ができていません。
本格的に使い始める前には、少量のテストデータで保存・復元を試す必要があります。
公開したアプリが自動的に非公開になるわけではない
今回のWebアプリにはログイン機能を設けていません。
そのため、公開URLを知っている人は、基本的にアプリの画面へアクセスできます。
検索エンジンに表示させないための設定もありますが、それはアクセスを制限する仕組みではありません。
一方、今回のlocalStorage方式では、ほかの端末から同じURLを開いただけで、自分のToDoやメモが自動的に共有されるわけではありません。
ただし、共有端末で同じブラウザを使用する場合などは注意が必要です。
個人情報や重要な情報を扱うアプリなら、ログイン機能やデータの保存方法について、さらに検討する必要があります。
既存アプリを使うのと、自分で作るのはどちらがいい？
ここまで制作方法を紹介しましたが、誰にとっても自作が最善というわけではありません。
すでに使いやすいアプリがあるなら、そのまま利用する方が手間は少なく済みます。
自作する場合は、画面や機能を自分の希望に合わせられる一方で、制作後の修正、データの管理、使い続けるための確認も必要になります。
今回のようにAIを活用すれば、コードの作成や修正を手伝ってもらえます。
しかし、何を作るか決めること、正しく動くか確認すること、公開してよいか判断することまで、すべて任せきりにはできません。
自分で作る価値があるのは、その手間をかけてでも実現したい使い方がある場合だと思います。
今回でいえば、出発点はカレンダー・ToDo・メモを一つにまとめたいという希望でした。
そこから期限の扱い、タスクの表示、画面構成などを考え、AIと相談しながら少しずつ具体化していきました。
まずは、自分が欲しい機能を3つ書き出してみる
Windowsで制作したWebアプリを公開し、iPhoneのホーム画面から起動するところまで進められました。
ただ、最初に必要だったのは、プログラミングの知識ではありません。
どんなアプリが欲しいのか。どんな場面で使いたいのか。何ができれば自分にとって使いやすいのか。
そうした希望を整理することから始まっています。
もし自分用のアプリを作ってみたいなら、まず欲しい機能を3つだけ書き出してみるのも一つの方法です。
例えば「ToDoを登録する」「期限をカレンダーで見る」「メモを残す」。
それをChatGPTに伝え、必要な画面や作り方を整理してもらう。最初は一つの機能だけ実装し、動いたことを確認してから次へ進める。
その積み重ねで、自分の使い方に合ったものへ近づけていけます。
便利なアプリを探すだけでなく、自分に必要なものを自分で考えて作るという選択肢もある。
今回の制作で紹介したかったのは、その方法です。
共有化もしたので気になる方はこちら
