こんにちは、まじんです。

最近、AIツールがかなり進化していて、アプリを作って公開するところまで、ほぼ自動でできるようになってきました。

話題のClaude Codeも触ってみたんですが、すごすぎてもう意味わかんないっすね…数ヶ月前と世界変わりすぎ。

自然言語でアプリを作る、いわゆる「バイブコーディング」はとても強力な選択肢で、私は非エンジニアがアプリ開発をすること自体には大賛成です。

ただ、ここで一つ立ち止まって考えてみてほしいことがあります。

今回の記事は、この問いから始まります。

AIアプリを作るとき、知らずにやってしまう3つの落とし穴

2026年2月の調査によると、生成AIの利用率は前年の27%から51%へとほぼ倍増し、すでに過半数に達しています。

活用が広がること自体は良い流れです。
でも広がるほど、いわゆる「シャドーIT」のリスクも高まっていきます。

IT部門が把握していないツールを、現場の判断で勝手に使い始めてしまう。SNSを見ていると「使わないと置いていかれるかも」と感じるのも無理はありません。

XでバズっているGitHubのURLをAIに渡すだけでセットアップまで自動で進む。
黒い画面が何やら動き出して、よく分からないまま承認ボタンを押す。
気づいたら「動いた！」となる。

そんな体験がコードを知らない初心者でも普通にできてしまう時代です。

便利な反面、見落とされがちなリスクがあります。具体的に3つ。

落とし穴1：無料のAPIキーで送ったデータは、AIの学習に使われる可能性がある

たとえば、無料のGemini APIキーを取得して使う場合、送信したデータはモデル改善に利用される可能性があります。利用規約にも明記されていますね。

議事録や顧客情報など、機密性のあるデータをそのまま扱うのはNGなんですが、知らずに突っ込んでしまっている人は多いんじゃないでしょうか。

落とし穴2：APIキーをコードに書いたまま共有してしまう

AIアプリを作ると、「ちょっと使ってみて」と誰かに共有したくなりますよね。

そのときにやりがちなのが、APIキーをコードに書いたまま渡してしまうパターンです。

これをやると、そのキーが第三者にそのまま見える状態に。
もし漏洩すれば、他人にAPIを使われてしまい、その利用料が自分に請求される可能性もあります。

落とし穴3：「動いた」＝「安全」だと思ってしまう

重要なのはAPIの問題だけではありません。

そのアプリがどこにデータを送っているのか。入力した情報がどう保存されているのか。誰がアクセスできるのか。

つまり自分が作成したアプリの行動範囲を把握できておらず、思わぬ情報漏洩トラブルに遭遇する可能性があります。

特に、私のフォロワーさんに多い医療や教育の現場では、扱う情報がとてもセンシティブです。「動いた」だけで安心してはいけない。

Gemini Canvasなら、この3つが構造的に解消される

ここで出てくるのが、Gemini Canvasです。
Geminiと会話しながら、アプリをプレビュー付きで作れる機能ですね。

私のnoteでも何度か紹介していますが、Canvasにはあまり知られていない強力な武器があります。

それが、Canvas内API（Proxy API）、APIキーなしでAIを使える仕組みです。

たとえば、このCanvasアプリにアクセスしてみてください。

ここに何か適当に話しかけると、音声が文字起こしされ、それがさらにAI音声に変換されます。（エラーでたらすみません）

特にAI音声の生成はGeminiやNotebookLMでは難しいですし、通常「Gemini TTS」という専用のAIモデルを使う必要があります。つまり普通はAPIキーが必要なんです。

ところが、見てください。
これはこのアプリのコードの一部なんですが、見ての通り、APIキーは空っぽになっています。

これが、先ほどの3つの落とし穴を構造的に解消してくれるんです。

まず、自前のAPIキーを用意する必要がないので、そもそもコードの中に誤って書いてしまうリスクがなくなります。

さらに、APIの利用料金も発生しないので、課金設定とか社内稟議のハードルから解放されます。（一日の実行上限回数はありますけどね）

そして一番の重要ポイント。
このCanvas内APIは、アプリを開いたユーザーのGemini環境に紐づくという点です。

ここから、この記事で一番大事な話をします。

Canvas内APIが「安全」と言える理由——GWSの保護の仕組み

皆様の会社では「GWSのGeminiとNotebookLMは使ってOK。その他の外部ツールは全部ダメ。」ってルールはありませんか？
私の前の務め先はそうでした。

どうしてGeminiとNotebookLMはいいのに、他のChatGPTとかはダメなんだろうって思ったことありませんか?

実はGWSの中にいるGeminiやNotebookLMって普通のAIツールと違って、送信したプロンプトやAIの出力はAIのモデル学習には利用されないし、その会社のGWS環境の外に漏れない安全設計になっているんです。

だから、そこまでAI導入が進んでいない企業でもGeminiやNotebookLMは使われているケースが多い。つまりガバナンス体制の構築のハードルが低いんです。

そしてここがポイントなんですが、Canvasアプリもこの保護の対象に入ります。

まず前提として、Canvasアプリは個人用のGeminiでしか「共有」ができません。GWSのCanvasには共有ボタンがないんです。組織のデータが意図せず外部に公開されることを防ぐための仕様ですね。もどかしいけど大事なやつです。

ただし、個人のGeminiで作成したCanvasアプリにGWS環境でアクセスして使うことはできるんです。

そして——

GWSアカウントでそのCanvasアプリを使うと、そのAPI通信はGWSの保護対象になるんです。

そうです！！
しかもCanvasって、良くも悪くもできることが限られているので、入力した情報がどこか知らないサーバーに保存されるとか、そういったリスクもほぼありません。

ここで、冒頭の問いに戻ります。

と思う方もいると思います。

確かに、Gemini本体でも同じような作業はできます。
でも、アウトプットを音声ファイルにしたり、動画やCSVとして書き出したりはGeminiではできませんよね。それをCanvasアプリは可能にしてくれるんです。

つまり、自分がやりたいことに特化した形で、ワークフローやアウトプットをまるごとパッケージ化できる。そういう「自分のための専用ツール」を、安全な環境の中で作れる。

「よく分からなくても、とりあえず安全側に倒れる。」

Canvasって、そういう場所なんです。
少し窮屈だけど、思いっきり試せる場所。

【実践】Canvas内APIを使うためのプロンプト

さて、ここまで聞いたら、Canvasアプリを作ってみたくなった方も多いはず。

しかしここで注意点があります。 Geminiに「〇〇アプリを作って」とだけ伝えると、自前APIキーを入力させる前提のアプリを作ってしまう可能性があります。

Canvas内APIを使ってもらうよう、Geminiに明確に伝えた方が確実です。
でもそんなに難しい話じゃありません。

作りたいAIアプリのイメージに、以下の文言を添えてみてください。

APIキーの定義は `const apiKey = "";` と空文字にすること。

これだけでほぼ確実にCanvas内APIを組み込んだアプリを作ってくれます。

試しに生成してみてください。
例えばこんなプロンプト。めちゃめちゃ簡単です。

【応用】Canvasで使えるAIモデル

先ほどの方法でCanvasアプリを作成すると、まず間違いなく「gemini-2.5-flash-preview-09-2025」というモデルが採用されます。去年まで使えた「Gemini 2.5 Flash」ですね。

この「2.5 Flashを使え」という命令がGeminiの内部に強めに組み込まれているようで、何も指定しないと必ずこちらが選ばれます。

でも実は「gemini-3-flash-preview」という新しいモデルも使えるんです。
今の"高速モード"の裏側で動いているモデル（3 Flash）ですね。

面白いのが、Gemini自身はそのことを知りません（2026年4月12日時点）。「2.5 Flashしか使えない」と思い込んでいる。なので、こちらから明示的に伝えてあげる必要があるんです。

これもプロンプトに以下を添えてあげるだけでOKです。

AIモデルはgemini-3-flash-previewを使用すること。

ちょっと複雑な処理をさせたいときは、gemini-3-flash-previewの方を使ってあげたほうが安定しそうですね。

ちなみに、2026年4月の執筆時点で、Canvas内APIで使えるAIモデルは以下の通りです。

テキスト生成: gemini-2.5-flash-preview-09-2025、gemini-3-flash-preview
画像生成: imagen-4.0-generate-001
音声合成（TTS）: gemini-2.5-flash-preview-tts

画像生成はNanobananaに比べて微妙ですが、TTSは色んな応用ができそうな画期的なモデルです。

完成したら共有リンクを発行して、ブックマークをしておけば、開くだけで即座にそのアプリを使えます。

では最後に、そのCanvasアプリをもっと手軽に使う方法を紹介します。

サイドパネルでCanvasアプリが動く——Chrome拡張「Canvas Dock」を無料公開します

ブックマークから呼び出して使えるだけでも便利。
でも、メインのブラウザ画面で別の作業をしながら横でCanvasアプリを使えたら、もっと実用的ですよね。

そこで今回実験したのが、Chrome拡張機能でCanvasアプリを使用できないか。試したところ普通に動きました。Canvas内APIも問題なく発動します。

この発見をきっかけに、Canvasアプリをブックマークしてすぐに呼び出せる専用のChrome拡張「Canvas Dock」を作りました。

まずはセットアップからいきましょう！

セットアップ手順

① Zipファイルをダウンロード

② ZIPファイルを解凍して任意のフォルダに格納

③ Chromeのトップ画面から「拡張機能の管理」へ

④デベロッパーモードをオン、「パッケージ化されていない拡張機能を読み込む」をクリックして、さっきのフォルダを選択

⑤マイクの使用を許可

⑥ 拡張機能アイコンをクリックして、Canvas Dockをピン留めしたらセットアップ完了！

続いては使い方の解説に入ります。

「Canvas Dock」の使い方

①拡張機能のアイコンをクリックするとサイドパネルが表示されます。
「最初のアプリを追加」をクリックしてください。

② ここに、作成したCanvasアプリの公開リンクを貼り付けて保存をしてください。（Geminiドメイン以外は保存不可）

③するとサイドバーの一覧に追加されます。ここから作成したCanvasアプリを選んでサイドパネルで使う感じですね。

なぜChrome Web Storeではなく、ZIPファイルで配布するのか

チームまじんでは、あえてZIPファイルとして配布して、ユーザー自身にデベロッパーモードで読み込んでもらう形をとっています。

理由は2つ。

① ZIP配布だとコードレビューができる

Chrome Web Storeで公開する場合、Googleの審査が入るので、一定の安全性は担保されます。ただ、その一方でユーザーからは中のコードが見えません。つまり、ブラックボックスの状態です。

実際、インストールした拡張機能が後から危険と判断されて、突然使えなくなるケースもありますよね。

ZIP配布ならGeminiにコードを渡して、「このChrome拡張は安全？」と聞けば、ある程度のチェックはできます。

② ZIP配布だと仕組みをパクれる

正直これが一番でかいです。

ZIPなら中身をそのまま活用できるので、お手元のAIに渡して技術を抽出したり、改造版を作ることもできます。ゼロから作るより、ずっとゴールが早い。

ちなみに、Canvas Dockがやっていることはシンプルです。URLをサイドパネルで開くだけ。ユーザーの入力データを外部に送信するような処理は入れていません。

もし不安な方は、ぜひ一度コードを開いて確認してみてください。
その"見える状態"こそが、この配布方法の一番の価値だと思っています。

おわりに

今回の記事では、非エンジニアがAIアプリを作るときに見落としがちなセキュリティリスクと、それをCanvasが構造的に解消してくれる仕組みを紹介しました。

まずはGeminiのCanvasで、ひとつアプリを作ってみてください。

Canvas Dockでサイドパネルにブックマークしておけば、いつでもワンタップで呼び出せます。

もしよければ、コメントで作成したCanvasアプリを紹介してください！
皆様それぞれの自信作を共有し合って、最強のCanvas Dockを作ってみませんか？

それではまた次回の記事でお会いしましょう！