第14話「AIを本番で動かすのは、思ったより大変だった。」

第14話「AIを本番で動かすのは、思ったより大変だった。」

第13話では、Arrowsに機能を追加していくうちに、今度はArrowsそのものが使いにくくなってきた話を書きました。

機能を増やすだけではなく、どうやって使ってもらうかまで考えないといけない。

これはUIの話でしたが、AIでも似たようなことが起きました。

第8話、第9話で書いたように、ArrowsではSAVEした仕事をあとから見つけやすくするためにAIを使うことにしました。

やりたいこと自体はシンプルです。

必要な情報をAIに送る。

AIに概要を作ってもらう。

その結果をSAVED CASESに残す。

最初は、

「APIを呼べばいいんでしょ？」

くらいに考えていました。

実際、自分のPCでAIを動かすだけなら、そこまで難しくありませんでした。

問題は、その先でした。

APIキー、どこに置くの？

AI APIを使うにはAPIキーが必要です。

自分だけで使うプログラムなら、自分の環境にAPIキーを設定して動かせます。

でもArrowsはChrome拡張です。

これから知らない誰かにもインストールして使ってもらいたい。

そこで、

「APIキーって、Chrome拡張の中に入れていいの？」

という、かなり基本的な問題にぶつかりました。

調べてみると、そんなわけにはいきません。

配布する拡張機能の中に秘密のAPIキーを入れてしまえば、取り出される可能性があります。

つまり、

Chrome拡張
↓
Claude

と直接つなげば終わり、ではありませんでした。

APIキーをユーザー側へ渡さずにAIを使える仕組みが必要になります。

ここから急に話が大きくなりました。

AIを1個入れたいだけだったのに

最終的にArrowsでは、AIとの間にCloudflare Workerを置く構成を考えました。

Chrome拡張から直接AIへアクセスするのではなく、

Arrows
↓
認証
↓
Worker
↓
AI

という形です。

APIキーはChrome拡張には入れず、サーバー側で管理する。

こう書くと当たり前に見えるのですが、私は最初からここまで考えていたわけではありません。

ただ、

「SAVEしたページをAIで分かりやすくしたい。」

だけだったんです（笑）

それなのに気付けば、

Google OAuthはどうする。

誰からのリクエストなら受け付ける。

APIキーはどこに置く。

利用回数はどう数える。

AIが失敗したらどうする。

使われすぎたらどうする。

費用が想定以上になったらどう止める。

という話を考えていました。

AI機能そのものより、その周りを作っている時間の方が長いんじゃないかと思うくらいでした。

「動いた！」では公開できなかった

AIを使ったものを作っていると、最初にAPIから回答が返ってきた瞬間はかなりうれしいです。

「できた！」

と思います。

でも今振り返ると、あれは完成ではなく、

「AIと通信できることが確認できた」

だけでした。

自分しか使わないなら、それでもいいのかもしれません。

でも他の人が使うサービスになると、考えることが変わります。

たとえば100人が同時に使ったらどうなるのか。

誰かが大量にリクエストしたらどうするのか。

AI側で障害が起きたらどうするのか。

認証に失敗したとき、どこまで処理を進めるのか。

想定外の状態になったときに、「たぶん大丈夫」でAIへ送信していいのか。

Arrowsでは、分からない状態なら処理を止める方向で設計していきました。

便利さより先に、

「判断できないときは送らない。」

です。

第9話で「AIに全部見せる必要はなかった」と書きましたが、それと同じで、

AIだから特別に何でも許すのではなく、

必要なときだけ、必要なものだけ、決めた経路で使う。

という形に少しずつなっていきました。

もう一つ怖かったのが、料金でした

AI APIは、使えば使うほど費用が発生します。

自分でテストしているときは、利用量もだいたい分かります。

でも公開したあとに何人が使うかは分かりません。

もちろん、たくさん使ってもらえるならうれしい。

100万ユーザーを目指しているくらいですから（笑）

でも、

「100万人に使ってほしい」と「100万人が好きなだけAPIを叩いても大丈夫」は別の話です。

ここも実際に公開を考え始めてから気付きました。

そこでArrowsでは、ユーザーごとの利用上限や予算側の安全策も考えることになりました。

さらに、同じボタンを連打して何回もAIが走らないようにする。

一定の条件を超えたら止める。

異常な状態なら処理を続けない。

AIの回答を作る部分とは直接関係ありません。

でも、サービスとしてAIを使うなら必要でした。

AI機能は、AI以外の部分の方が大きかった

ここまで作ってきて、一番意外だったのはこれです。

AI機能を作る＝AIのコードを書く

ではありませんでした。

むしろ、

認証。

秘密情報の管理。

通信経路。

利用制限。

予算管理。

エラー処理。

プライバシー。

このあたりを考える時間がかなり多かったです。

プロンプトを工夫してAIの回答を良くするのも大切です。

どのモデルを使うかも大切です。

でも、実際に他の人へ配るところまで考えると、それだけでは全然足りませんでした。

これはArrowsを作らなかったら、私はたぶん分からなかったと思います。

💡今回の開発メモ

AIを使った機能を作ろうとしている人に、今の私なら最初に一つ確認します。

「そのAI機能、自分以外の人も使いますか？」

もし答えがYESなら、AIモデルやプロンプトを考えるのと同時に、

APIキーをどこに置くのか。

誰が利用できるのか。

どこを経由してAIへ送るのか。

どこまで使えるのか。

失敗したらどう止めるのか。

想定以上に使われたらどうするのか。

ここまで最初にざっくり考えておいた方がいいと思います。

私は、

「まずAIを動かして、あとで公開用にすればいい。」

くらいに考えていました。

もちろん試作品としては、それでいいと思います。

でも、

AIのデモを作ることと、AIを使ったプロダクトを作ることは違いました。

ここは実際に作ってみて、かなり勉強になったところです。

そして、認証やWorkerまで用意して、

「これでいける。」

と思いました。

ところが、いざ本物の通信を試してみると、

動きませんでした（笑）

しかも、原因がよく分かりません。

少しだけ次回予告

Chrome拡張。

Google OAuth。

Cloudflare Worker。

Claude。

必要なものをつないで、いよいよ実際にAI概要を作ってみる。

当然動くと思っていました。

でも返ってきたのは、AI概要ではなくエラーでした。

直す。

もう一度試す。

また違うところで止まる。

そして途中から、

「そもそも、今どこまで届いてるんだ？」

という状態になりました。

次回は、ArrowsのAI機能を本番に近い環境で動かそうとして実際にハマった、**「動かない。でも、原因が分からない。」**という話を書こうと思います。

◀ 前の話

▶ 次の話

📚 全話一覧

サービス

🐔 Deskflow Labs公式サイト

🧩Google拡張機能

Arrows Lite｜

Chromeのタブを整理して生産性が上がるツール。
100万インストールを目指してます！
整理するのは、タブではなく仕事そのもの。

noteフォロバチェッカー｜

実はnoteの友人管理の決定版ツール

📱iPhone(App Store)/▶️android(Google Play)

Channel Timeline Viewer｜

androidは5000インストール+ のYouTube Viewerの決定版！超おすすめです

ジュエリーサンフラワーROOMパートナークラブ｜

・楽天市場のジュエリーサンフラワーというお店を運営しております！
・ジュエリーでは楽天アフィリエイトで料率20%と異常な高利率の還元をしていて実はめちゃ稼げますw　一か月で一人の方に70万円以上お支払したことがあります(2024年12月の実績)

📱iPhone(App Store)

ナンプレIQ｜

他所のナンプレアプリにはまってた時に動画広告がうざかったので自分で作りましたｗ

💎 ECショップ運営

ジュエリーサンフラワー楽天市場店｜

プチプライスジュエリーのデパートのキャッチフレーズで3000種類以上のジュエリーを販売してます！
楽天市場のショップオブザマンス2回受賞 (2023/9、2024/12)
楽天NATIONS BASICの講師も担当しました。

🧩Cursor/VScode拡張機能

Windows Copy Paste Mode｜

2026/7に作って放置していたツールですが470ダウンロードされている隠れた人気ツールです。
cursorでWindowsのようにスクショのペーストやCtrl+CとCtrl+Vのこぴぺができないことに絶望して、作りました