はじめに：これまでのおさらい
こんにちはクサハラです。
「AIが事務仕事を奪う」というニュースを見るたび、正直穏やかではいられません。子どもが大きくなるまでに自分の仕事がなくなっては困る。だったら奪われる側で怯えるより、使いこなす側に回りたい。そう思ってAIの勉強を始め、まずは練習として個人利用の資産管理アプリ作りに挑戦しています。
この記事は、全３回の記事の最終回です。
前編では、スプレッドシートを「全員に公開」にすることに戸惑い、方針を切り替えるまでの経緯を書きました。中編では、セキュリティ強化を試みたものの、Googleアカウント認証（OAuth）がうまくいかなかった話をしました。
できそうでできない。じれったい。なんでもよければ最初の案ですでに完成していたのでしょうが、作っているうちにだんだん欲が出てきて、もっと良いアプリにしたいと思えてくるものです。
AIは「もう完成でいいでしょ」とは言ってくれません。AIを使ったアプリ開発は、自分で引き際を決めるのが案外難しいと感じました。
要は「どこにアプリを置くか」という問題だった
前回行き詰まったので、改めてClaudeに相談しました。すると、こんな提案が返ってきました。
「ローカルで開くのではなく、インターネット上のサーバーにアプリを置いてブラウザからアクセスする形式にすれば、Googleアカウント認証（OAuth）の問題が解決できます」
なるほど、考えてみれば当たり前の話です。Webアプリというものはそもそもそういうもの。YouTubeもGoogleマップも、ファイルを自分のPCに置いてダブルクリックして開くわけではありません。URLをブラウザに打ち込んでアクセスするものです。OAuthはそういうWebアプリに対しての認証システムなのです。
わたしにはなんとなく「アプリ＝PCに入れるもの」という固定観念がありました。自分のPCに置いておいた方が安全だろう、という気持ちもあった。でも今回作ろうとしているのはブラウザで動くアプリなので、インターネット上のどこかにファイルを置き、そこにブラウザでアクセスする形が自然なのかもしれません。
「サーバーにファイルを置く」と聞いて真っ先に心配したのは、サーバーを借りたらお金がかかるんじゃないか、ということでした。設定も難しそうです。しかし、今はとても手軽に、しかも無料でできるサービスがあるとのこと。
良い時代になったものです。
Cloudflareとは何か
ここで登場するのが、Cloudflare（クラウドフレア）です。
Cloudflareは、もともとサイバー攻撃からWebサイトを守ることを得意とするセキュリティ会社だそうです。世界中にサーバーを持ち、多くの大手企業のWebサービスを陰で支えています。世界のインターネットトラフィックのかなりの部分が、このCloudflareを経由していると言われているそうです。
NY市場に上場していて、時価総額は７００億ドル以上。日本企業の中に入ったらトップ３０に入るくらいの大きな会社です。
全く知りませんでしたが、すごい会社っぽいです。
そのCloudflareが提供しているサービスのひとつが、Cloudflare Pagesです。HTMLファイルなどのWebサイトをCloudflareのサーバーに置いて公開できる、というサービスになります。
個人利用には十分すぎるほどの機能が、なんと無料で使えるとのこと。今回のような単一HTMLファイルのアプリであれば、帯域（通信量）は無制限、デプロイ（ファイルの更新）は月500回まで無料！ 操作もシンプルで、管理画面にHTMLファイルをドラッグ&ドロップするだけでURLが発行されます。GitHubなどの専門知識も不要でした。
GitHubは以前ちょっとだけ使ったのですが、難しかったのでなるべく使いたくなかった……
セキュリティ問題はどう解決されたのか
アプリをCloudflare Pagesで公開する形にしたことで、前回までの問題が本当に解決するかはちょっと不安でした。
OAuthが使えなかった理由は、「ローカルで開くHTMLファイルには、ちゃんとしたURLがない」ことでした。Googleの認証システムは「どこのサービスからのアクセスか」を確認する仕組みになっているため、URLがないと認証が通らなかったのです。
Cloudflare Pagesで公開すれば、アプリに正式なURL（xxx.pages.devという形式）が割り当てられます。これで認証を通す仕組みが成立するようになりました。
最終的に採用したのは、GAS（Google Apps Script）とサービスアカウントを組み合わせた方式です。
サービスアカウントとは、Googleが提供している「人間のユーザーではなく、プログラムのためのアカウント」のようなもの。スプレッドシートへのアクセス権をこのサービスアカウントにだけ与えておき、GASというGoogleのプログラム実行環境がそのアカウントを使ってデータを取り出す、という仕組みです。
とわかった風に書いていますが、ちょっとあやふやです。
これにより、
- スプレッドシートは「全員に公開」にしなくて済む（制限付き共有のまま）
- アプリのファイルに秘密のキーを書き込まなくて済む（GAS側でのみ管理）
という、これまでの二つの悩みが同時に解決されました。
実際にデプロイしてみたら、拍子抜けするほど簡単だった
Cloudflare Pagesへのデプロイは、拍子抜けするほど簡単でした。
- Cloudflareのサイトでアカウントを作成（メールアドレスのみ）
- 管理画面から「Pages」を選んで新規プロジェクトを作成
- HTMLファイルをドラッグ&ドロップ
- URLが発行される
以上です。こんなんでほんとにできんのかよ、って感じです。
でも、できました。
発行されたURLをスマホでブックマークしておけば、PCでもスマホでも同じアプリにアクセスできます。ローカルにファイルを置いていたときは「PC用のファイル」と「スマホ用のファイル」が別々に存在してしまっていましたが、URLが一本化されたことで管理がぐっと楽になりました。
アプリを修正したときも、更新したHTMLファイルを同じ画面にドラッグ&ドロップするだけ。数十秒で新しいバージョンが公開されます。
ちなみにNetlifyも試していた
実はCloudflare Pagesに落ち着く前に、同じ種類のサービスであるNetlify（ネットリファイ）を先に試していました。
Netlifyも同様にHTMLファイルをドラッグ&ドロップするだけで公開できる便利なサービスです。ただ、無料プランで使える容量がCloudflare Pagesより少なく、開発中に修正のたびデプロイを繰り返していたら、あっという間に制限に引っかかってしまいました。制限が解除されるのは1か月後。そんなに待てないし、課金もしたくない。そこで別のサービスをClaudeに探してもらい、見つかったのがCloudflare Pagesでした。
AIで開発していると、どうしてもデプロイ回数が多くなります。その点でも、Cloudflare Pagesの方が向いていると感じました。
ちなみにClaudeはCloudflare Pagesをべた褒めで、「Netlifyより絶対こっちがいいですよ」と勧めてきました。しかし、最初に適したサービスを聞いたときは「Netlify」がイチ押しでした。「言ってること変わってるし……」と、少し呆れてしまいました。
今回の開発で完成したもの
最終的に完成した資産管理アプリには、次のような感じです。
- ダッシュボード：資産ごとの現在値、前月比、前年比をウィジェット形式で一覧表示
- グラフ：折れ線グラフ・円グラフ・積み上げ棒グラフで資産推移を可視化
- 暴落シミュレーション：リーマンショック・コロナショック・金利上昇の3シナリオで資産への影響を試算
- 将来予測：複利計算をもとに、積立設定を加味した資産の将来価値を予測
スプレッドシートへの入力方法はこれまでと変わらず、アプリを開いて「同期」ボタンを押すだけで最新データが反映されます。
暴落シミュレーションと将来予測は、あえて単純な作りにしました。複雑な予測機能を作ったとしても、正しい計算が行われているかを自分で検証するのは大変です。「どれだけ緻密に計算しても、現実はシミュレーション通りになんてならない」と割り切ることにしました。
やってみてわかったこと
今回の開発を通じて、あらためて感じたことがあります。
AIが出した答えは、必ずしも正しいわけでもないし、ベストなわけでもありません。鵜呑みにせず、自分で内容を理解して判断する必要があります。
今回のアプリ開発でも、失敗と相談を繰り返すことで、「Webアプリとはそもそも何か」「サーバーとローカルの違い」「認証の仕組み」といった基礎的な概念が、少しずつ頭の中で整理されていきました。
確かに、ノーコードでアプリを作ることはできる。でも、知識ゼロのままではよいアプリを作ることはできない。それが正直な感想です。スタートは知識ゼロでもいいのですが、作りながら学んでいかなければならないと思います。
AIがコードを書いてくれても、仕組みを理解する努力は自分でしなければなりません。逆に言えば、仕組みさえ理解できていれば、コードが書けなくてもアプリは作れるということです。
限られた隙間時間を使ってのアプリ開発でしたが、今後の業務用のアプリ開発に挑戦するための、良い練習になりました。
もうちょっと練習して、次は業務用アプリの開発に取り組もうと思っています。
最後まで読んでいただきありがとうございました。
※本記事は筆者個人の体験・記録であり、記事中で紹介したツールやサービス、シミュレーション機能の利用を推奨・保証するものではありません。ツールの仕様や無料プランの内容は変更される場合があるため、実際に利用される際は最新の情報をご確認ください。
コメント