<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<p>少し出遅れ感はありますが、Azure OpenAI ServiceのプレビューであるChatGPT 3.5を使ってLINEのチャットボットを作りました。</p>
<p>Azureへのデプロイテンプレート(Bicep)、チャットプログラム(Python)は既に一式をGitHub上に公開しています。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__282422c9f26" src="https://embed.zenn.studio/card#zenn-embedded__282422c9f26" data-content="https%3A%2F%2Fgithub.com%2Fkatakura%2Fazure-line-chatbot" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/katakura/azure-line-chatbot" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/katakura/azure-line-chatbot</a></p>
<h2 id="%E7%89%B9%E5%BE%B4">
<a class="header-anchor-link" href="#%E7%89%B9%E5%BE%B4" aria-hidden="true"></a> 特徴</h2>
<p>リポジトリに公開しているAzureインフラ構成は以下の特徴があります。</p>
<ul>
<li>Bicepテンプレートによるデプロイ</li>
<li>Azureリソース間はManaged Idを使ったAAD認証(パスワードを独自に保持していない)</li>
<li>LINE Messaging APIの認証トークン、シークレットはAzure Key Vault上に安全に保存</li>
<li>いつものスマホに皆入れているLINEアプリでChatGPTが利用可能になる
<ul>
<li>可愛いネコキャラがゆるい会話で和ましてくれる</li>
<li>スタンプに対しても頑張って返答してくれる</li>
</ul>
</li>
</ul>
<h2 id="%E5%BF%85%E8%A6%81%E3%81%AA%E3%82%82%E3%81%AE">
<a class="header-anchor-link" href="#%E5%BF%85%E8%A6%81%E3%81%AA%E3%82%82%E3%81%AE" aria-hidden="true"></a> 必要なもの</h2>
<p>以下が必要です</p>
<ul>
<li>Azure Subscription
<ul>
<li>加えてOpenAI Serviceの利用申請を行いChatGPT 3.5の利用が可能になっていること<br>
<a href="https://learn.microsoft.com/ja-jp/azure/cognitive-services/openai/overview" target="_blank" rel="nofollow noopener noreferrer">https://learn.microsoft.com/ja-jp/azure/cognitive-services/openai/overview</a>
</li>
</ul>
</li>
<li>LINE Developerアカウント
<ul>
<li>LINEアカウントがあれば簡単に利用可能になります<br>
<a href="https://developers.line.biz/" target="_blank" rel="nofollow noopener noreferrer">https://developers.line.biz/</a>
</li>
</ul>
</li>
</ul>
<h2 id="%E6%A7%8B%E6%88%90%E3%81%AE%E8%AA%AC%E6%98%8E">
<a class="header-anchor-link" href="#%E6%A7%8B%E6%88%90%E3%81%AE%E8%AA%AC%E6%98%8E" aria-hidden="true"></a> 構成の説明</h2>
<ul>
<li>LINEでフレンド追加されたChatBotがWeb HookにてAzure Functionsを呼び出します</li>
<li>Functions上のプログラムが実行され以下の処理を行います
<ul>
<li>LINEユーザ識別子を元に過去の会話履歴をAzure Table Storageから取得します</li>
<li>過去の会話履歴(直近10分かつ5件以内)を含め、ChatGPTに送信します</li>
<li>ChatGPTから受けた返信メッセージをLINEに返却します</li>
<li>最新のチャットメッセージ(ユーザ、アシスタント)をAzure Table Storageに追加します</li>
</ul>
</li>
</ul>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--2Ypd3j30--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/28c213c5103bf7101e14a06e.png%3Fsha%3D10e81a2dffa2a27e0e20cc53486f4338eddd5fa7" alt="img" loading="lazy" class="md-img"></p>
<h2 id="%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E6%96%B9%E6%B3%95" aria-hidden="true"></a> デプロイ方法</h2>
<h3 id="%E3%83%84%E3%83%BC%E3%83%AB%E3%81%AE%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99">
<a class="header-anchor-link" href="#%E3%83%84%E3%83%BC%E3%83%AB%E3%81%AE%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99" aria-hidden="true"></a> ツールの事前準備</h3>
<p>クライアントPCに以下のツールをインストールしておきます</p>
<ul>
<li>Azure CLI<br>
<a href="https://learn.microsoft.com/ja-jp/cli/azure/install-azure-cli" target="_blank" rel="nofollow noopener noreferrer">https://learn.microsoft.com/ja-jp/cli/azure/install-azure-cli</a>
</li>
<li>Azure Functions Core Tools<br>
<a href="https://learn.microsoft.com/ja-jp/azure/azure-functions/functions-run-local" target="_blank" rel="nofollow noopener noreferrer">https://learn.microsoft.com/ja-jp/azure/azure-functions/functions-run-local</a>
</li>
</ul>
<h3 id="line-developers%E3%81%AB%E3%81%A6messaging-api%E3%81%AE%E6%BA%96%E5%82%99">
<a class="header-anchor-link" href="#line-developers%E3%81%AB%E3%81%A6messaging-api%E3%81%AE%E6%BA%96%E5%82%99" aria-hidden="true"></a> LINE DevelopersにてMessaging APIの準備</h3>
<p>以下を控えておきます</p>
<ul>
<li>チャネルシークレット</li>
<li>チャネルアクセストークン（長期）</li>
</ul>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>後日こちらの手順についても図解する予定です</p>
</div></aside>
<h3 id="github%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%81%AEclone">
<a class="header-anchor-link" href="#github%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%81%AEclone" aria-hidden="true"></a> GitHubリポジトリのclone</h3>
<p>適当なディレクトリ配下でファイル一式をcloneしてきます。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token function">git</span> clone https://github.com/katakura/azure-line-chatbot.git
</code></pre></div><h3 id="azure%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%81%AE%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4">
<a class="header-anchor-link" href="#azure%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%81%AE%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4" aria-hidden="true"></a> Azureリソースのデプロイ</h3>
<p>以下の手順を参考にAzure上にデプロイします。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token comment"># 環境変数の設定</span>
<span class="token assign-left variable">rg_name</span><span class="token operator">=</span><span class="token string">"rg-chatbot"</span>
<span class="token assign-left variable">location</span><span class="token operator">=</span><span class="token string">"japaneast"</span>
<span class="token assign-left variable">openai_location</span><span class="token operator">=</span><span class="token string">"eastus"</span>
<span class="token assign-left variable">line_token</span><span class="token operator">=</span><span class="token string">"???"</span> <span class="token comment"># 先ほど控えたLINEトークン</span>
<span class="token assign-left variable">line_secret</span><span class="token operator">=</span><span class="token string">"???"</span> <span class="token comment"># 先ほど控えたLINEシークレット</span>

<span class="token comment"># Azure Subscriptionへログイン</span>
az login

<span class="token comment"># リソースグループの作成</span>
az group create <span class="token parameter variable">-g</span> <span class="token variable">$rg_name</span> <span class="token parameter variable">-l</span> <span class="token variable">$location</span>

<span class="token comment"># リソースデプロイ</span>
az deployment group create <span class="token parameter variable">-g</span> <span class="token variable">$rg_name</span> --template-file templates/deploy.bicep <span class="token parameter variable">--parameters</span> <span class="token assign-left variable">location</span><span class="token operator">=</span><span class="token variable">$location</span> <span class="token assign-left variable">openAiLocation</span><span class="token operator">=</span><span class="token variable">$openai_location</span> <span class="token assign-left variable">lineToken</span><span class="token operator">=</span><span class="token variable">$line_token</span> <span class="token assign-left variable">lineSecret</span><span class="token operator">=</span><span class="token variable">$line_secret</span>
</code></pre></div><h3 id="functions%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4">
<a class="header-anchor-link" href="#functions%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4" aria-hidden="true"></a> Functionsアプリのデプロイ</h3>
<p>Functions Core Toolを使ってアプリをデプロイします。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token comment"># 作成されたFunctiosnのリソース名取得</span>
<span class="token assign-left variable">func_name</span><span class="token operator">=</span><span class="token variable"><span class="token variable">$(</span>az functionapp list <span class="token parameter variable">-g</span> $rg_name <span class="token parameter variable">--query</span> <span class="token string">"[0].name"</span> <span class="token parameter variable">-o</span> tsv<span class="token variable">)</span></span>

<span class="token comment"># アプリデプロイ</span>
func azure functionapp publish <span class="token variable">$func_name</span>
</code></pre></div><h3 id="line-messaging-api%E3%81%AEweb-hook%E7%99%BB%E9%8C%B2">
<a class="header-anchor-link" href="#line-messaging-api%E3%81%AEweb-hook%E7%99%BB%E9%8C%B2" aria-hidden="true"></a> LINE messaging APIのWeb Hook登録</h3>
<p>FunctionsにデプロイされたアプリのWebhookのURLを確認します。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">func azure functionapp list-functions <span class="token variable">$func_name</span> --show-keys
</code></pre></div><div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">実行例</span></div>
<pre class="language-text"><code class="language-text">$ func azure functionapp list-functions $func_name --show-keys

Functions in func-chatbot-xxxxxxxxxxxxx:
    line-chat - [httpTrigger]
        Invoke url: https://func-chatbot-xxxxxxxxxxxxx.azurewebsites.net/api/line-chat?code=xxx...xxx==
</code></pre>
</div><p>アプリのデプロイ完了まで少し時間がかかりますので5分くらい待ちます。</p>
<p>Invoke urlに表示されている内容をLINE DevelopersのWebhook URLに設定します。</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>後日こちらの手順についても図解する予定です</p>
</div></aside>
<h2 id="%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D">
<a class="header-anchor-link" href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 動作確認</h2>
<p>LINE Developersのコンソール画面でMessaging API設定のページにQRコードが表示されていますので、それをスマホで撮影してLINEのフレンドとして登録します。</p>
<p>あとは好きな会話を楽しみましょう！</p>
<p>まずは普通の会話</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--AkwQK1fo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/22cb9ae354689f43053deed5.png%3Fsha%3D63055a16b4108e029f687af0598de39f83f614a0" alt="img" loading="lazy" class="md-img"></p>
<p>スタンプにもKeyword属性が含まれているものであればその内容に応じて返信してくれる</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--KiHWwvj9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/628bdabf6a09b2266d35d4b8.png%3Fsha%3D00a79a5facb8808410dd9c970dd950d6b0d44c7d" alt="img" loading="lazy" class="md-img"></p>
<p>昔話も創作してくれる</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--5yVj8i_q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/ad640069e68b0d24aad76d3b.png%3Fsha%3D6a7d6f828582e63a347033b50c51695223ec05dc" alt="img" loading="lazy" class="md-img"></p>
<p>会話の脈絡を保持しているのでスムーズな会話ができる（ネコなので直近10分で最大5つしか覚えられない）</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--Cw3MzPlQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/aadfe442b74222b250a81454.png%3Fsha%3D55bf54c5bbd647ef58da5d14847cae47df580f8f" alt="img" loading="lazy" class="md-img"></p>
<p>ツンデレになってもらうにゃ</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--48AUnibg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/ee47610294b786e8b0168ed8.png%3Fsha%3D22ad6a15874cfcec17f73586c38ee604d928ea92" alt="img" loading="lazy" class="md-img"></p>
<p>急に真面目な質問してもちゃんと真面目に答えてくれる</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--WCrlfxIu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/be98793907f02ca15865ffb5.png%3Fsha%3D4dab6d4002b53d7c50d01ff3bfb13b2f94328d6b" alt="img" loading="lazy" class="md-img"></p>
<h3 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h3>
<p>時間を見つけて記事内容を今後も拡充していきますが、取り急ぎスピード感重視で一旦ポストしました。</p>
<p>始めはPythonの勉強がてら始めたのですが、自分で使ってみると正直すごく便利な仕組みだなと思いました（自画自賛）。</p>
<p>いつも手元にあるLINEで、知りたいことがあれば直ぐに使えるところが良いですね。</p>
<p>GitHub上のPythonコードは「とりあえず動いている」感があるので、是非有識者の方からのアドバイス(Issue)や、修正案(Pull Request)を頂けると助かります。</p>


Azure OpenAI Service(ChatGPT)を使ってLINE Chatbotを作る

LINE DevelopersにてMessaging APIの準備

line

azure

functions

Discussion