第15話 動かない。でも、原因が分からない。

第14話では、AIを自分のPCで動かすことと、他の人にも安全に使ってもらえる状態にすることは、全然違ったという話を書きました。

Chrome拡張から直接Claudeを呼ぶのではなく、

Arrows
↓
Google OAuth
↓
Cloudflare Worker
↓
Claude

という形にして、APIキーをユーザー側へ置かない。

認証も入れる。
利用制限も入れる。
予算の安全策も考える。

かなり準備しました。

そして、いよいよ本物の通信を試します。

ボタンを押しました。

エラー。

まあ、最初ですからね。

何か間違っているんでしょう。
直せばいい。

問題は、

何が間違っているのか分からない。

ことでした。

「エラーです」だけでは、何も分からない

画面に出ていたのは、ざっくり言えば、

「リクエストに問題があります。」

というようなエラーでした。

これだけでは原因が分かりません。

Chrome拡張がおかしいのか。

Google OAuthなのか。

Cloudflare Workerまで届いていないのか。

Workerには届いているけど、その先で失敗しているのか。

Claudeまで届いているのか。

そもそもURLが違うのか。

候補が多すぎます。

しかも、セキュリティを考えて詳しい内部情報をユーザー画面へそのまま出すわけにもいきません。

安全のためにエラーを単純化した結果、

開発している自分にも原因が分からない（笑）

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

ローカルでは通る

そこでまず、実際に送っているものと同じ形のデータを使って、ローカルで確認しました。

通ります。

Chrome拡張側の形式も確認する。

問題なさそう。

Worker側の受け取り方も確認する。

こちらも問題なさそう。

「じゃあ、なんで本番だけ動かないの？」

となりました。

こういうとき、私はつい、

「とりあえずもう一回やってみよう。」

となります。

そして、もう一回やる。

やっぱり失敗する（笑）

でも途中から、これを繰り返しても意味がないことに気付きました。

必要なのは再実行ではなく、

今、どこまで処理が届いているのかを確認できること
でした。

原因は、ものすごく地味だった

そこで、秘密情報を出さない範囲で、

「どの段階まで処理されたのか」

「どの種類のエラーなのか」

を確認できる診断情報を追加していきました。

すると、少しずつ見えてきます。

そして最初に見つかった原因は、

AIでもなければ、

Google OAuthでもありませんでした。

接続先のURLです。

設定していたCloudflare WorkerのURLが、AI概要を処理するための正しいエンドポイントまで指定されておらず、Workerのルートを向いていました。

つまり私は、

「AIとの通信が失敗しているのかな？」

と一生懸命調べていたのに、

そもそも正しい入口に行っていなかった。

地味です（笑）

でも、実際の開発ってこういうことが多い気がします。

難しそうなところを疑っていたら、原因はその手前にある。

直した。今度こそ……

URLを直しました。

さらに、同じ間違いを繰り返さないように、

正しい形式のURLでなければビルド時に止める

チェックも追加しました。

これで同じ設定ミスは起こりにくくなります。

よし。
今度こそ。

もう一度試します。

今度は、さっきとは違うエラーが出ました。

まだ動かない（笑）

ただ、これは前進でした。

エラーの種類が変わったということは、少なくとも前に止まっていた場所は通過した可能性が高い。

次はGoogleのユーザー情報を確認するところで止まっていることが分かりました。

一つ直すと、その奥にあった次の問題が見える。

開発中はちょっと心が折れそうになりますが、今振り返ると、

ちゃんと一段ずつ奥へ進んでいた

んだと思います。

「原因が分からない」が一番つらい

このとき感じたのは、

エラーが出ること自体より、

なぜエラーになっているのか分からない状態の方がつらい

ということでした。

原因が分かれば、直せるかもしれません。

少なくとも調べられます。

でも、「なんか動かない。」

だけだと、どこから見ればいいのかすら分かりません。

そこでArrowsでは、診断の仕組みを少しずつ追加していきました。

ただし、何でもログに出せばいいわけではありません。

認証情報。
APIキー。
送信した内容。
個人情報につながるもの。

そういうものまでデバッグのために表示したら、本末転倒です。

だから、
原因を特定するために必要な情報は残す。でも、秘密情報は残さない。
このバランスを考える必要がありました。

次に見つかったのは、コードのほんの小さな違い

Googleのユーザー情報取得で止まっているところまで分かったので、さらに調べました。

最終的に見つかった原因の一つは、Worker側でfetchを呼び出す方法でした。

コードだけを見ると、ほんの小さな違いです。

でもCloudflare Workerの実行環境では、その呼び出し方によって正常に動かないケースがありました。

そこを修正して、また試す。

今度はさらに先へ進む。

こうして、
URL。
認証。
Worker。
AI。

と、一段ずつ確認していきました。

最初から全部を眺めて、

「どこがおかしいんだろう？」

と考えていたときより、

通信経路を小さく分けて、一個ずつ確認する方が圧倒的に早かったです。

当たり前と言えば当たり前なのですが、実際にエラー画面を前にすると忘れます（笑）

バグを直すだけではなく、同じバグを起こしにくくする

もう一つ、このとき意識するようになったことがあります。

原因を見つけて、

「URLが間違っていました。」

で終わらせない。

URLを直すだけなら、その場では動きます。

でも数か月後、また同じ設定ミスをするかもしれません。

だったら、
間違ったURLではビルドできないようにする。

エラーの種類が分からなかったなら、
秘密情報を出さずに、どこで失敗したか判別できるようにする。

つまり、
バグを直す＋同じ種類のバグを見つけやすくする。

ここまでやる。

これはArrowsの開発を続ける中で、かなり意識するようになりました。

💡今回の開発メモ

今回の経験で一番学んだのは、

外部サービスが増えたら、「成功する経路」だけではなく「どこで失敗したか分かる経路」も作っておく

ということです。

たとえば、

アプリ
↓
認証
↓
自分のサーバー
↓
外部API

という構成なら、

「失敗しました。」

だけでは足りません。

認証まで成功したのか。

サーバーまで届いたのか。

外部APIを呼ぶ前なのか。

外部APIからエラーが返ったのか。

これを、秘密情報を漏らさず判別できるようにしておく。

私は最初、

動かすことばかり考えていました。

でも実際には、

動かなかったときに調べられることも、プロダクトの一部でした。

特にAIの場合、

「AIがおかしいのかな？」

と思いがちですが、実際にはAIへ到達するずっと前で止まっていることもあります。

今回のArrowsが、まさにそうでした。

難しそうなClaudeを疑う前に、

まず入口のURLを確認する。

地味ですが、これも立派な開発Tipsだと思います（笑）

そして、こうした問題を一つずつ潰して、ようやくAI機能も実際に使える形へ近づいていきました。

ここまで来ると、次に考え始めたのは技術の問題ではありません。

私はArrowsで、

100万ユーザー

を目指しています。

だったら、日本語だけで作っていていいのか。

という問題でした。

少しだけ次回予告

自分で使うだけなら、日本語だけで何の問題もありません。

日本で公開するだけなら、それでもいいのかもしれません。

でも目標は100万ユーザーです。

だったら最初から、海外の人にも使える形にしておいた方がいいんじゃないか。

そこでArrowsは、日本語だけのChrome拡張から、複数言語に対応する方向へ進みます。

ところが、

「文字を翻訳すれば終わり」ではありませんでした。

次回は、**「日本語だけでは、100万人に届かない。」**という話を書こうと思います。

◀ 前の話

▶ 次の話

📚 全話一覧

サービス

🐔 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のこぴぺができないことに絶望して、作りました