【GAS】Googleの生成AI「Gemini Pro API 」を使ってLINE botを作成する!(前編)

皆さん、Googleが2023年12月7日にとんでもないものを発表したことをご存じでしょうか?
そう、Googleの生成系AI「Gemini」です

こーすけ先生

3つのモデルのうち、2023年12月13日から「Gemini Pro」だけ使えるようになっています!「Google×生成AI」これは使うしかないでしょ!

というワケで、本記事では話題の「Gemini Pro API 」を使ってLINE botを作る方法を解説していきます!

本記事の内容
  • Googleの生成AI「Gemini Pro」を使ってオリジナルのLINE botを作る
  • GAS上で「Gemini Pro API」と「LINE Messaging API」を組み合わせる
こーすけ先生

この記事を読んで「こんなに簡単にLINE botが作れるの?!」と驚くかもしれません…
この機会に、皆さんも話題の「Gemini Pro API」を使ってみましょう!

この記事を読めば、簡単にあなただけのオリジナルLINE botが完成します!
かなりワクワクする内容だと思うので、是非読んでいってください!

この記事の執筆者について
  • GASの人
  • ITベンダSEとして12年勤務する中で民間、金融、官公庁の現場を一通り経験済
  • 現在は公務員をやりながら起業に向けて着々と準備中
GASなら任せろ!

​GASを極めたい方や、業務の効率化を図りたい方は、ぜひこの記事を読んください!
難しいことはGASに任せて、我々人間は楽しちゃいましょう!

こーすけ先生

当ブログでは実際に仕事でGASを扱っている私が、GASの魅力について徹底的に取り上げていきます!

目次

生成AI「Gemini Pro」を使ってオリジナルのLINE botを作ろう!

本記事で取り組む演習
  • 「LINE Messaging API」を使うための準備
  • GAS上で「LINE Messaging API」に値を返却
  • Webhook設定
  • 「Gemini Pro API」の返答を「LINE Messaging API」に返却
こーすけ先生

完成形のイメージはこんなカンジ!
今回の記事では、1問1答形式のLINE botの完成を目指します!
次回の記事で前の会話を参照できるよう作っていくよ!

前回の記事で、GAS上で「Gemini Pro API」を動かしてみるところまでやりました

こーすけ先生

前回の記事をまだ読んでない方はチェックしてみてくださいね!

【STEP1】LINE Messaging APIを使うための準備

本セクションでは、LINE Developersに未登録の方を前提に手順を示しています
そのため、すでにアカウントをお持ちの方は、それをお使いの上、手順No.8から実施してください!

こーすけ先生

「LINE Messaging API」の取得方法に関する説明が不要な方は【STEP2】までジャンプしてください!

STEP
以下にアクセスして、「アカウントを作成」をクリック
STEP
「メールアドレスで登録」をクリック
STEP
ご自身のメールアドレスを入力のうえ「登録用のリンクを送信」をクリック
STEP
入力したメールアドレス宛に登録用リンクが送られてくるため、メール内の「登録画面に進む」または「登録用リンク」をクリック
STEP
登録画面が開くため、[名前]と[パスワード]を入力し「登録」をクリック
STEP
「サービスに移動」をクリック
STEP
開発者情報の登録画面が開くため、[開発者名]と[メールアドレス]を入力し「アカウントを作成」をクリック
STEP
プロバイダー登録を行うため「新規プロバイダー作成」をクリック
STEP
[プロバイダー名]を入力し「作成」をクリック
こーすけ先生

一般的に法人であれば企業名、個人であれば個人名などを入力します
何でもよいので好きな名前を入れてください

STEP
プロバイダーの管理コンソールに遷移するので、「Messaging API」をクリック
STEP
新規チャネル作成画面に遷移するため、必要最低限の入力項目を入力し「作成」をクリック
こーすけ先生

ここで登録した内容は、あとで変更することは可能なので考えすぎずに!

STEP
内容を確認し「OK」をクリック
STEP
情報利用に関する同意事項を確認し「同意する」をクリック
STEP
個人規約に関する同意事項を確認し「同意する」をクリック
STEP
作成したチャネルの管理画面に遷移するため「Messaging API 設定」をクリック
STEP
[QRコード]欄にLINEの友だち追加用のQRコードがあるため、これをスマホで読み込みLINEで友だち追加
こーすけ先生

これはあとからでも構いませんが、先に作成したLINE botにつなげてみましょう

STEP
[チャネルアクセストークン]欄の「発行」をクリック
こーすけ先生

このトークンがLINE Messaging APIにつなぐためのキーとなります!
発行後はトークンをコピーしておいてください

こーすけ先生

この後の【STEP3】でLINE Developerには戻ってきますので、ページは閉じずに残しておいてください!

2023年12月時点での登録手順となるため、画面遷移等が若干異なる場合がございます
予めご了承ください

【STEP2】LINE Messaging APIについて解説

LINE Messaging APIは仕様も日本語でばっちり公開されてますので、自分がやりたいことをうまく探し当てることができれば、比較的簡単に実装が可能です

こーすけ先生

例えば、今回の実装で必要なことは以下の2点です

  • ユーザーからメッセージが送信された時、GAS側で送信情報を受け取る
  • 送信情報を読み取り、ユーザーに対してGAS側からメッセージを送信する

ユーザーからメッセージが送信された時、GAS側で送信情報を受け取る

こーすけ先生

これにはWebhookという仕組みを使います

この仕組みを用いることで、LINE上でユーザがメッセージを送信すると、LINEからWebhook先(これがGASでデプロイ時に発行されるURL)にPOSTされ、GASで情報を受け取ることが可能になります

WebhookによりGASが受け取る情報:イベントオブジェクトの中には、以下のような情報が含まれています

{
  "destination": "xxxxxxxxxx",
  "events": [
    {
      "type": "message",
      "message": {
        "type": "text",
        "id": "14353798921116",
        "text": "Hello, world"
      },
      "source": {
        "type": "user",
        "userId": "U80696558e1aa831..."
      },
      "replyToken": "757913772c4646b784d4b7ce46d12671",
    }
  ]
}

この中で、今回使用するのは、events->messege->typeevents->messege->textevents->replyTokenの3つです

送信情報を読み取り、ユーザーに対してGAS側からメッセージを送信する

こーすけ先生

これにはLINEの応答メッセージを使います

応答メッセージはその名の通りですが、ユーザからのメッセージに対して返信する際に使用します

curl -v -X POST https://api.line.me/v2/bot/message/reply \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer {channel access token}' \
-d '{
    "replyToken":"nHuyWiB7yP5Zw52FIkcQobQuGDXCTA",
    "messages":[
        {
            "type":"text",
            "text":"Hello, user"
        },
        {
            "type":"text",
            "text":"May I help you?"
        }
    ]
}'
こーすけ先生

これを見ると、以下のことがわかります

スクロールできます
項目
Fetch先のURLhttps://api.line.me/v2/bot/message/reply
method種別POST
データ種別application/json
認証Bearer {channel access token}
データ本体{
  “replyToken”:”nHuyWiB7yP5Zw52FIkcQobQuGDXCTA”,
  “messages”:[
    {
      “type”:”text”,
      “text”:”Hello, user”
    }
  ]
}

 “replyToken”:”nHuyWiB7yP5Zw52FIkcQobQuGDXCTA”の箇所はサンプルで記載されているものであり、実際はLINEから受信したイベントデータ内に入っているevents->.replyTokenを使います

【STEP3】LINE Messaging APIをGASで実装する

こーすけ先生

今回もスタンドアロン型でGASを記述していきます!
こちらを参考にGASエディタを起動してください

const REPLY_URL     = 'https://api.line.me/v2/bot/message/reply';
const LINEAPI_TOKEN = '**STEP.1のNo.17で取得したチャネルアクセストークンを記載する**';

/**
 * LINEのトークでメッセージが送信された際に起動するメソッド
 * @param {EventObject} e - イベントオブジェクト
 */
function doPost(e){
  // イベントデータはJSON形式となっているため、parseして取得
  const eventData = JSON.parse(e.postData.contents).events[0]
        , repToken = eventData.replyToken;
  replyTxt(repToken, `LINEへの返信確認`);
}

/**
 * LINEのトークにメッセージを返却するメソッド
 * @param {String} token - メッセージ返却用のtoken
 * @param {String} text - 返却テキスト
 */
function replyTxt(token, txt){
  const message = {
                    'replyToken' : token,
                    'messages' : [{
                      'type': 'text',
                      'text': txt
                    }]
                  }
        , options = {
                    'method' : 'post',
                    'headers' : {
                      'Content-Type': 'application/json; charset=UTF-8',
                      'Authorization': 'Bearer ' + LINEAPI_TOKEN,
                    },
                    'payload' : JSON.stringify(message)
                  };
  UrlFetchApp.fetch(REPLY_URL, options);
}

このGASのコードは、LINE Messaging APIのWebhookを受信して、受け取ったメッセージに対して返信するためのものです

こーすけ先生

LINEのAPI仕様をもとにGASで表現しました
(※【STEP2】参照)

これでGAS側のプログラムはできました

【STEP3】の補足説明

doPost関数

こーすけ先生

doPost関数とは、フォーム送信時に実行される特殊な関数です
(関数名は固定)

function doPost(e){
  const eventData = JSON.parse(e.postData.contents).events[0];
  const repToken = eventData.replyToken;
  replyTxt(repToken, `LINEへの返信確認`);
}
  • doPostでWebhookからイベントオブジェクトを受信し、イベントデータを処理
  • e.postData.contents で受信したデータをJSON形式に変換し、最初のイベントを取得
  • replyTokenを用いて、https://api.line.me/v2/bot/message/replyにFetch
  • eventData.replyToken で返信に使用するトークンを取得して、replyTxt 関数に渡す

doPostはGAS上でPOSTリクエストを受け取るための特殊な関数であるためメソッド名称固定になります

replyTxt部分の補足説明

こーすけ先生

replyTxt 関数は、指定されたトークンとテキストメッセージを使用して、LINEにメッセージを返信します

function replyTxt(token, txt){
  const message = {
                    'replyToken' : token,
                    'messages' : [{
                      'type': 'text',
                      'text': txt
                    }]
                  }
        , options = {
                    'method' : 'post',
                    'headers' : {
                      'Content-Type': 'application/json; charset=UTF-8',
                      'Authorization': 'Bearer ' + LINEAPI_TOKEN,
                    },
                    'payload' : JSON.stringify(message)
                  };
  UrlFetchApp.fetch(REPLY_URL, options);
}
こーすけ先生

【STEP2】で触れたように、GASではevents->messege->typeevents->messege->textevents->replyTokenの3つを使用しています

【STEP4】GAS上でデプロイする

こーすけ先生

次にLINE Messaging APIでWebhook登録するために、作成したプログラムをデプロイします

GASでdoPostを記述したとしてもデプロイしたURLが払い出されないと誰もGASに対してPOSTリクエストを送ることができません

そのため、先ほど記載したプログラムをデプロイしましょう

STEP
GASエディタから「デプロイ ▼」をクリック
STEP
「新しいデプロイ」をクリック
STEP
デプロイ管理ダイアログが表示されるため、やや左上の歯車をクリック
STEP
「ウェブアプリ」をクリック
STEP
以下を設定し「デプロイ」をクリック
  • 新しい説明文
    適当に記載
  • 次のユーザとして実行
    自分
  • アクセスできるユーザー
    全員
こーすけ先生

設定したら「デプロイ」をクリック

STEP
「アクセスを承認」をクリック
STEP
デプロイが完了したら、[ウェブアプリ]欄に記載のURLをコピー
こーすけ先生

ひとまずGAS側でウェブアプリのURLを取得することができました!
お疲れ様です

【STEP5】LINE Messaging APIとGASをつなぐ「Webhook設定」

こーすけ先生

続いて、LINE Developer側で【STEP4】で取得したURLを設定していきましょう!

こーすけ先生

「コンソール」から管理画面に入ってね

STEP
[Webhook設定]欄の「編集」をクリック
STEP
[Webhook URL]にSTEP.2-3 No.7で取得したURLを設定し「更新」をクリック
STEP
GASでデプロイしたURLが機能するかどうかを検証のため「検証」をクリック

URLに誤りがなければ成功ダイアログが表示されます

こーすけ先生

エラーが出る場合は、チャネルアクセストークンが間違っていないか、「デプロイの設定」でアクセスできるユーザーを「全員」にしているか確認してね!

STEP
[Webhookの利用]欄の「ラジオボタン」をクリックして活性状態にする
STEP
ページ下段の[応答メッセージ]欄の「編集」をクリック
STEP
LINE Official Account Managerで[応答メッセージ]欄および[応答時間]欄のラジオボタンをクリックして非活性状態にする

これまで行ってきた設定から、以下の2点が実現できるようになりました。

  • ユーザからメッセージが送信された場合にGASでその情報を受け取る
  • GASからユーザに対してメッセージを送信する
こーすけ先生

それでは、改めて自分が作成したLINEアカウントに文字を送信してください!
以下のように返ってくるはずです

こーすけ先生

この「LINEへの返信確認」というテキストメッセージは、「doPost関数」で設定した値ですね!

function doPost(e){
  // イベントデータはJSON形式となっているため、parseして取得
  const eventData = JSON.parse(e.postData.contents).events[0]
        , repToken = eventData.replyToken;
  replyTxt(repToken, `LINEへの返信確認`);
}

【STEP6】Gemini Pro APIの返答をLINE Messaging APIに返却する

ここまで長丁場でしたが…ここからは簡単です!

こーすけ先生

前回の記事でお伝えしたGemini Pro APIの呼び出し部分を組み合わせれば完成です!

要は、以下のreplyTxtで返却している「LINEへの返信確認」を固定文字列ではなく、Geminiからの返却値にすればいいだけです

function doPost(e){
  // イベントデータはJSON形式となっているため、parseして取得
  const eventData = JSON.parse(e.postData.contents).events[0]
        , repToken = eventData.replyToken;
  replyTxt(repToken, `LINEへの返信確認`);
}
こーすけ先生

具体的には以下の通りです!

const GEMINI_API      = '**前回記事のSTEP.1のNo.5で取得したAPI keyを記載する**'
      , REPLY_URL     = 'https://api.line.me/v2/bot/message/reply'
      , LINEAPI_TOKEN = '**STEP.1のNo.17で取得したチャネルアクセストークンを記載する**';

/**
 * LINEのトークでメッセージが送信された際に起動するメソッド
 * @param {EventObject} e - イベントオブジェクト
 */
function doPost(e){
  // イベントデータはJSON形式となっているため、parseして取得
  const eventData = JSON.parse(e.postData.contents).events[0]
        , repToken = eventData.replyToken
        , msgType = eventData.message.type;
  // テキストメッセージのときのみ
  if (msgType=='text') {
    let uText = eventData.message.text
        , gemini = getGeminiProAnswerTxt(uText);
    replyTxt(repToken, gemini);
  }
}

/**
 * LINEのトークに送信されたメッセージをGemini Pro APIに渡して回答を得るメソッド
 * @param {String} txt - 送信されたメッセージ
 */
function getGeminiProAnswerTxt(txt) {
  const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${GEMINI_API}`
        , payload = {
            'contents': [
              {
                'parts': [{
                  'text': txt
                }]
              }
            ]
          }
        , options = {
            'method': 'post',
            'contentType': 'application/json',
            'payload': JSON.stringify(payload)
          };

  const res = UrlFetchApp.fetch(url, options)
        , resJson = JSON.parse(res.getContentText());

  if (resJson && resJson.candidates && resJson.candidates.length > 0) {
    return resJson.candidates[0].content.parts[0].text;
  } else {
    return '回答を取得できませんでした。';
  }
}

/**
 * LINEのトークにメッセージを返却するメソッド
 * @param {String} token - メッセージ返却用のtoken
 * @param {String} text - 返却テキスト
 */
function replyTxt(token, txt){
  const message = {
                    'replyToken' : token,
                    'messages' : [{
                      'type': 'text',
                      'text': txt
                    }]
                  }
        , options = {
                    'method' : 'post',
                    'headers' : {
                      'Content-Type': 'application/json; charset=UTF-8',
                      'Authorization': 'Bearer ' + LINEAPI_TOKEN,
                    },
                    'payload' : JSON.stringify(message)
                  };
  UrlFetchApp.fetch(REPLY_URL, options);
}
こーすけ先生

ここでのポイントは以下の2つです

Point1:LINEからのメッセージ送信がテキストのときのみ、その入力テキストをGeminiに送る

msgType = eventData.message.type;
uText = eventData.message.text;
// これもWebhookのイベントオブジェクトに記載の通りに取得しています。

Point2:Geminiは入力されたテキストをパラメタに設定したうえでFetchし、返却値をLINEへ返す

メッセージタイプがテキスト以外(画像や位置情報)の場合はGeminiの入力パラメタを作成できないためこのようにしています

こーすけ先生

ただし、画像の場合はGemini Pro Visionもあるため、あくまでも今回はという前提です

【STEP7】デプロイ

こーすけ先生

プログラムの修正が終わったら、再デプロイしましょう

デプロイ方法を誤るとデプロイされたURLが変わってしまうので、必ず以下の手順に従ってください!
(※URLが変わるとLINE Developer側の設定も変更しなければなりません)

STEP
「デプロイを管理」をクリック
STEP
デプロイ管理ダイアログが表示されるため、やや右上の鉛筆マークをクリック
STEP
[バージョン]に新バージョンを選択し「デプロイ」をクリック

これで完成です!お疲れ様でした!

こーすけ先生

自分が作成したアカウント宛に何かメッセージを送ってみてください!
「Gemini Pro」を介して返答があります!

自分で「Gemini Pro」を使ってLINE botを作れるのってけっこう感動しますよね!
ところで…

こーすけ先生

無事、「Gemini Pro API」を使うことができたけど、このメッセージ消したいなと思いませんか?

安心してください、消せます

こーすけ先生

ホームの「自動応答メッセージ→応答メッセージ」を選択し、デフォルト文の「利用」のトグルボタンをオフすることで消せるよ!

これで「前編」は本当に終わりです!
お疲れ様でした

がすぴょん

前編は…ということは、つまり…

こーすけ先生

そう…
中編、後編があります!

実はまだこれでおわりではない

こーすけ先生

今回の相談Botのままでは、会話の継続が実現できていません

東京の魅力を教えて?

とBotに聞くと、Geminiはすごい量の情報を教えてくれます
そこで、続けて

すごいね、じゃあそれを200字程度で要約して?

とBotに聞くと、会話の継続ができていないため、東京の魅力を要約することはなく、まったく別の回答が返ってきます

こーすけ先生

さぁこれをどうするか
次回を乞うご期待!!!!

こーすけ先生

私が作った「LINE bot」です!
良かったらお友だちになってください!

まとめ

今回は「GAS × Gemini Pro API × LINE Messaging API によるあなただけの相談Botを作成する」といテーマで、LINE Messaging APIを利用するための準備から、GASとLINEをつなぐための手順、さらにそこにGemini Proを組み合わせる…とかなり盛りだくさんな内容でした!

GASはなんでもできる! と述べていたのがかなり実感してきたのでは!?

こーすけ先生

GAS×LINE APIだとログが出力されない!と質問を受けたので、外部サービスと連携する際にログを出力する方法についてまとめました!

ぜひ、皆さんも実業務での活用に取り組んでみてください
引き続き、GASを楽しんでいきましょう!!

こーすけ先生

X(旧:Twieer)にて、ブログの更新やQiita記事の更新、GAS情報をお届けしますので、是非フォローしてください!

こーすけ先生

おかげさまで今年5月に起業しました!
GASやGoogleサービス、プログラミング全般のご相談承ります!

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

GASの人。ITベンダSEとして12年勤務し、民間、金融、官公庁の現場を一通り経験済。html、css、JavaScript、Java、PHPも分かります。最近は専らGASで小規模アプリケーションを頻繁に作成しています。GASのことなら何でもお任せあれ!現在は公務員として働きながら、起業に向けて着々と準備中です!

コメント

コメントする

CAPTCHA


目次