こんにちは、七宮さん(@shichinomiya_s)です。
前回、コマンドラインで動く家計簿アプリを作りましたが、「スマホでサッと記録できたら便利だな」と思いませんでしたか？
私も外出先で「今いくら使ったっけ？」と確認したくなることがよくあります。そこで今回は、スマホに最適化したWeb家計簿アプリを作ってみました。
ブラウザで動くので、パソコンでもスマホでもタブレットでも、どこからでもアクセスできます。Claude Codeを使えば、Webアプリも驚くほど簡単に作れます！
前回のおさらい
前回の記事では、コマンドラインで動く家計簿アプリを作成しました。
グラフ表示機能もあって便利でしたが、外出先での記録には向いていませんでした。
今回はその問題を解決するため、いつでもどこでも使えるWeb版を作っていきます。スマホの画面に最適化されているので、タッチ操作でサクサク入力できます。
作るもの：スマホ対応Web家計簿
今回作成するWeb家計簿アプリの仕様はこちらです。
・基本機能
- 支出の記録: カテゴリ、金額、メモを簡単に入力できる
- 今月の支出一覧: 最新の支出から順に表示
- 合計金額表示: 今月の支出合計が一目で分かる
- カテゴリ別集計: どこに多く使っているか確認できる
・スマホ最適化機能
- レスポンシブデザイン: スマホ画面に自動調整
- タッチ操作対応: 大きなボタンで入力しやすい
- シンプルなUI: 必要な情報だけを表示
- 即座に反映: 入力したらすぐに一覧に表示
Streamlitというフレームワークを使うので、PythonだけでモダンなWebアプリが作れます。
Claude Codeでプロジェクトを作成
では早速、Claude Codeを使って作っていきましょう。
・プロジェクトフォルダの作成
- デスクトップに「web_budget」というフォルダを作成
- PowerShellまたはコマンドプロンプトを開く
- 以下のコマンドを実行
cd Desktop/web_budget
claudeClaude Codeが起動したら、次のように指示します。
・Claude Codeへの指示
Streamlitを使ってスマホに最適化したWeb家計簿アプリを作ってください。
機能：
1. 支出の記録（カテゴリ、金額、メモ）
2. 今月の支出一覧を表示
3. 今月の合計金額を表示
4. カテゴリ別の集計を表示
要件：
- スマホ画面に最適化されたレイアウト
- タッチ操作しやすい大きなボタン
- データはJSONファイルに保存
- シンプルで見やすいデザインClaude Codeがこの指示を受けて、Webアプリを作成してくれます。
私の環境では、`app.py`というファイルが作成され、Streamlitのインストール手順も提示されました。
Streamlitをインストール
Webアプリを動かすために、Streamlitというライブラリが必要です。
・インストールコマンド
pip install streamlitこのコマンドを実行すると、Streamlitとその依存ライブラリが自動的にインストールされます。
インストールが完了したら、Webアプリを起動できるようになります。
Webアプリを起動してみる
では、作成したWeb家計簿を実際に起動してみましょう。
・起動方法
streamlit run app.pyこのコマンドを実行すると、ブラウザが自動的に開いて、Webアプリが表示されます。
URLは通常 `http://localhost:8501` です。このURLをスマホのブラウザで開けば、スマホからもアクセスできます。
・スマホでアクセスする方法
同じWi-Fiネットワーク内であれば、スマホからもアクセスできます。
- PowerShellに表示される「Network URL」を確認
- スマホのブラウザでそのURLを開く
- 外出先でも使いたい場合は、Streamlit Cloudにデプロイ
スマホでの操作感
スマホで実際に使ってみると、タッチ操作に最適化されていることが分かります。
・支出を記録してみる
画面上部の入力フォームで、カテゴリ、金額、メモを入力します。
カテゴリはドロップダウンで選択できるので、タッチ操作でも簡単です。金額とメモを入力したら、「記録する」ボタンをタップします。
入力したデータは即座に下の一覧に表示されます。この即時反映が、スマホアプリっぽくて使いやすいです。
・合計とカテゴリ別集計
画面の上部には、今月の支出合計が大きく表示されます。
さらに、カテゴリ別の集計も表示されるので、「今月は食費に多く使っているな」といった傾向がすぐに分かります。
デザインをカスタマイズ
基本的な機能は完成しましたが、もう少し見た目を良くしたいと思いました。
そこで、Claude Codeに追加のカスタマイズをお願いしました。
・カスタマイズリクエスト
カラーテーマを追加してください。
また、支出の削除機能も追加したいです。Claude Codeはすぐに対応してくれて、カラフルなカテゴリ別の色分けと、各支出項目に削除ボタンが追加されました。
色分けされたことで、カテゴリが一目で分かりやすくなりました。
Streamlit Cloudにデプロイ
ローカルで動かすだけでも便利ですが、外出先からも使いたいですよね。
Streamlit Cloudを使えば、無料でWebアプリを公開できます。
・デプロイ手順
- GitHubにリポジトリを作成
- 作成したアプリをpush
- Streamlit Cloudでリポジトリを連携
- デプロイボタンをクリック
デプロイが完了すると、`https://あなたのアプリ名.streamlit.app`のようなURLが発行されます。
このURLをスマホのホーム画面に追加すれば、まるでネイティブアプリのように使えます。
つまずいたポイントと解決策
実際に作ってみて、少しつまずいたポイントがありました。
・スマホでの画面幅
最初、スマホで見たときに横スクロールが発生してしまいました。
これはStreamlitのデフォルトの幅設定が原因でした。Claude Codeに「スマホで横スクロールが出ます」と伝えたところ、`st.set_page_config`でレイアウトを調整するコードを追加してくれました。
・データの永続化
Streamlitはページをリロードするたびに再実行されるため、データの保存方法に注意が必要です。
JSONファイルに保存することで、リロードしてもデータが残るようになりました。Streamlit Cloudにデプロイする場合は、データベースを使う方が良いかもしれません。
コマンドライン版との使い分け
今回Web版を作ってみて、コマンドライン版（Level 4）との使い分けが見えてきました。
・Web版が向いている場面
- 外出先での支出記録
- スマホから素早く入力したい時
- 家族と共有したい時
・コマンドライン版が向いている場面
- 詳細なグラフ分析をしたい時
- CSVでデータを出力したい時
- 大量のデータを一括処理したい時
個人的には、日常の記録はWeb版、月末の分析はコマンドライン版という使い分けが便利だと思います。
まとめ
今回は、Claude Codeを使ってスマホ対応のWeb家計簿アプリを作成しました。
・ポイント
- Streamlitを使えばPythonだけでWebアプリが作れる
- スマホに最適化されたレスポンシブデザイン
- タッチ操作しやすい大きなボタンとシンプルなUI
- Streamlit Cloudで無料公開できる
- Claude Codeがライブラリ選択から実装までサポート
次回は、さらに実践的なツールとして、Amazonなどの価格を自動監視するツールを作ってみたいと思います。
プログラミング初心者でも、Claude Codeを使えばスマホアプリのようなWebアプリが簡単に作れます。ぜひ自分の用途に合わせてカスタマイズしてみてください！
