【最速&詳細解説】ノーコードツールBubbleでGemini AIを動かす方法【Google AI Studio, Vertex AI, API】

CHAKE

2023年12月19日 20:53

はじめに

こんばんは！！

ノーコード（ローコード）開発ツールのbubbleに、数日前に公開されたばかりのGoogleの新しいAI「Gemini」を入れて動かす方法を初心者でも分かるように丁寧解説していきます！！

数日前にGoogleが公開してから、Gemini proをAPIたたいてbubbleで動かそうといろいろ試していたんですが、APIとかRESTはあまり得意分野ではないので四苦八苦していました。

発表されたのが数日前ということで、bubble×Gemini AI APIの方法もぜんぜんネットに上がっていなくて、結局公式ドキュメント見てなんとかできたといった感じです。

発表からまだ数日しかたってないので、恐らくこれがbubble×Gemini AI APIの最速解説記事になると思います。（少なくとも日本語では笑）違ってたらすいませーん！！

特にbubbleのAPI 設定のところは苦戦してうまくいくやり方みつけたので、分からない方は私の設定方法を参考にしてみてください！

API Keyの取得

まずはGeminiのAPIを取得しましょう！

APIとは
APIは、アプリケーション同士がデータや機能を共有するための仕組みです。これにより、異なるソフトウェアやサービスが連携して、相互に利用できるようになります。

下のリンクからGoogle AI Studioにとんで、API keyをげっとしましょう！！！

https://makersuite.google.com/app/prompts/new_freeform

最初に、”Terms of Service”という通知とチェックボックスがきたらチェックを入れて"Continue"を押してください。下の２つはチェックしなくてもよさそうです。一応、各チェックボックスの和訳をおいておきます。

✓生成AI、API利用規約及びGoogle API利用規約、Googleプライバシーポリシーに同意します。
✓Google AIに関するアップデートや役立つ情報に関するメールを受け取ります。
✓Google AIの改善に役立つ研究への参加招待を受け取りたいです。

下の画面のように、右上の"Get API Key"から"Create API Key in new project"を押してAPI keyを取得しましょう！

"Create API Key in new project"を押して、数秒すると"API Key Generated"という表記とともにAPI keyが表示されるのでコピー、メモしておきましょう！！（API keyはむやみに教えたらダメ！）

bubbleにプラグインを入れる

次に、bubble側の設定をしていきましょう！！bubbleでAPIを使用するには"API Connector"というプラグインを入れる必要があります。
bubbleを開いて、左のバーにある"plugins"の"Add Plugins"から新しいプラグインを入れましょう。

入れるのは"API Connector"というプラグインインです。恐らく画面の一番上にでてくると思いますが、もし出てこない場合は左の検索から探してください。”install”⇒"Done"でプラグインの導入完了です！

公式ドキュメント解説

【ここは解説だけなので、難しかったらここはパスしても大丈夫です👍】bubbleに"API Connector"を入れれたら、次はGeminiのAPIの設定ついて書かれたGoogle公式の説明文があるのでこれを見ていきましょう！！直接見たい方は下のリンクから飛んでください。

ここでは、Gemini AIのテキスト入力の場合のREST APIを見ていきましょう！

curl https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=$API_KEY \
    -H 'Content-Type: application/json' \
    -X POST \
    -d '{
      "contents": [{
        "parts":[{
          "text": "Write a story about a magic backpack."}]}]}' 2> /dev/null

【私の解説入りまーす！】
まず、curlというコマンドを使用して、REST APIにHTTPリクエストを送信しています。curlは、HTTPプロトコルを使用してデータを転送するためのコマンドラインツールです。

次に、URLについてです。これは、Generative Language APIのエンドポイントで、特定のモデル（この場合はgemini-pro）を使用してコンテンツを生成します。$API_KEYは、Googleから取得したAPIキーで、APIの使用を認証しています。

-H 'Content-Type: application/json'は、HTTPリクエストのヘッダーを設定しています。（この場合、送信するデータの形式はJSON）

-X POSTは、HTTPメソッドをPOSTに設定しています。POSTメソッドは、指定したURLにデータを送信するために使用されます！

-d '{...}'は、POSTリクエストのボディ（データ本体）を設定しています。ここでは、"Write a story about a magic backpack."というテキストを指定しています。（公式の例文）これがAPIによって解釈され、そのテキストに基づいて新しいコンテンツが生成されます。

最後に、2> /dev/nullは、エラーメッセージを制御するためのものです！

次は出力についてです。出力は下記のような形式になります！重要なのは"candidates"⇒"content"⇒"parts"の中の”text”です。ここにAIの返答が格納されます。

{
  "candidates": [
    {
      "content": {
        "parts": [
          {
            "text": "Once upon a time, in a small town nestled at the foot of towering mountains, there lived a young girl named Lily. Lily was an adventurous and imaginative child, always dreaming of exploring the world beyond her home. One day, while wandering through the attic of her grandmother's house, she stumbled upon a dusty old backpack tucked away in a forgotten corner. Intrigued, Lily opened the backpack and discovered that it was an enchanted one. Little did she know that this magical backpack would change her life forever.\n\nAs Lily touched the backpack, it shimmered with an otherworldly light. She reached inside and pulled out a map that seemed to shift and change before her eyes, revealing hidden paths and distant lands. Curiosity tugged at her heart, and without hesitation, Lily shouldered the backpack and embarked on her first adventure.\n\nWith each step she took, the backpack adjusted to her needs. When the path grew treacherous, the backpack transformed into sturdy hiking boots, providing her with the confidence to navigate rocky terrains. When a sudden rainstorm poured down, the backpack transformed into a cozy shelter, shielding her from the elements.\n\nAs days turned into weeks, Lily's journey took her through lush forests, across treacherous rivers, and to the summits of towering mountains. The backpack became her loyal companion, guiding her along the way, offering comfort, protection, and inspiration.\n\nAmong her many adventures, Lily encountered a lost fawn that she gently carried in the backpack's transformed cradle. She helped a friendly giant navigate a dense fog by using the backpack's built-in compass. And when faced with a raging river, the backpack magically transformed into a sturdy raft, transporting her safely to the other side.\n\nThrough her travels, Lily discovered the true power of the magic backpack. It wasn't just a magical object but a reflection of her own boundless imagination and tenacity. She realized that the world was hers to explore, and the backpack was a tool to help her reach her full potential.\n\nAs Lily returned home, enriched by her adventures and brimming with stories, she decided to share the magic of the backpack with others. She organized a special adventure club, where children could embark on their own extraordinary journeys using the backpack's transformative powers. Together, they explored hidden worlds, learned valuable lessons, and formed lifelong friendships.\n\nAnd so, the legend of the magic backpack lived on, passed down from generation to generation. It became a reminder that even the simplest objects can hold extraordinary power when combined with imagination, courage, and a sprinkle of magic."
          }
        ],
        "role": "model"
      },
      "finishReason": "STOP",
      "index": 0,
      "safetyRatings": [
        {
          "category": "HARM_CATEGORY_SEXUALLY_EXPLICIT",
          "probability": "NEGLIGIBLE"
        },
        {
          "category": "HARM_CATEGORY_HATE_SPEECH",
          "probability": "NEGLIGIBLE"
        },
        {
          "category": "HARM_CATEGORY_HARASSMENT",
          "probability": "NEGLIGIBLE"
        },
        {
          "category": "HARM_CATEGORY_DANGEROUS_CONTENT",
          "probability": "NEGLIGIBLE"
        }
      ]
    }
  ],
  "promptFeedback": {
    "safetyRatings": [
      {
        "category": "HARM_CATEGORY_SEXUALLY_EXPLICIT",
        "probability": "NEGLIGIBLE"
      },
      {
        "category": "HARM_CATEGORY_HATE_SPEECH",
        "probability": "NEGLIGIBLE"
      },
      {
        "category": "HARM_CATEGORY_HARASSMENT",
        "probability": "NEGLIGIBLE"
      },
      {
        "category": "HARM_CATEGORY_DANGEROUS_CONTENT",
        "probability": "NEGLIGIBLE"
      }
    ]
  }
}

以上が解説でーす！

API設定

続いて、bubble側でAPI設定をしていきます！！bubbleのプラグインに戻っていただいて、下図のように"Add another API"から新しいAPIを作成します！

設定を押したら、下のように記入していきます！！API Nameはなんでもいいですが、Gemini APIとかにしておきましょう！Authenticationは"None or self-handled"を選択してください（私はここの選択を間違えているのに気づかず、四苦八苦してました。URLの後ろにAPI_Keyとあるので、"Private key in URL"を選択したくなりますが、bubbleの罠です！笑。api_keyは次のところで設定します！）次に、"Add a shared header"を押して、keyを"Content-Type"、valueを"application/json"に指定してください。（理由は前の章参照）

続いて、下の赤丸の"expand"を押してください！そしたら、設定るところがたくさんでてきます笑。どんどん入力していきましょー！

２つ下の画像のように設定していきます！！Nameはなんでもいいですが、分かりやすく”Send message”としておきましょう。Use asは"Action", Data Typeは"JSON"に設定してください！（理由は前の章参照）。次は少し複雑ですが、"POST"を選択して下のURLを入力してください。

https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=[private_key]

keyは"private_key"、valueにはあなたが取得したAPI keyを貼り付けてください。チェックはprivateでOKです！

続いて、またまた２つ下の図のように設定してください。bodyのところは次のように入れてください。前の章のbodyのjsonをbubbleで動かすように変えたものです！<message contents>のところに聞きたいメッセージが入ります。

{
"contents": [{
"parts":[{
"text": "<message contents>"}]}]}

keyは"message contents"、Valueはてきとーに入れてください。私は”はろー！わーるど！”と入れています！チェックはAllow blankに入れてください。

これで、APIの設定は以上です。全体をみるとこんな感じです！！

最後に、問題なく接続できているか確認しましょう！下の"Initialize call"を押してみてください！

次のように出たら、OKです！

ちなみに赤線のところが、入力した質問に対するGemini AIの回答です！

これでAPI設定は以上です！お疲れさまでした！

次は、実際にbubble上ででGemini AIを動かしていきます！！（時間があれば追記します笑）

ありがとうございました！！

この記事が気に入ったらサポートをしてみませんか？