Cogbot勉強会に参加させていただいたので、復習を兼ねて、自分なりにbotを作ってみました。
0. 開発環境
- Windows10
- Node.js (v8.6.0)
- Microsoft Translator API
- Microsoft Bot Framework
1. 勉強会資料
駅すぱあと x Cognitive Services で 画像DE路線当てBOT を作ろう! [Custom Vision 編]
駅すぱあと x Cognitive Services で 画像DE路線当てBOT を作ろう! [BOT実装(Node.js ver) 編]
2. Microsoft Translator API の利用開始
2.1. 登録
https://portal.azure.com/# で 「+新規」押下
検索文字列に「translator」を入力して、「Translator Text API」を選択
「作成」押下
各入力項目を設定して「作成」押下
- Name … API名称
- サブスプリクション … 作成先(今回は無料)
- 価格レベル … 利用価格帯(今回はFree)
- Resource Group … よく分かんないけど、API名称を小文字にして、新規作成
- Resource Group location … 東日本 or 西日本
できました!
2.2. 疎通確認
2.2.1. アクセストークン取得
「Show access keys ...」押下
「KEY1」の値をコピー
curl コマンドで、アクセストークン取得
curl --data "" "https://api.cognitive.microsoft.com/sts/v1.0/issueToken?Subscription-Key=<KEY1>"
2.2.2. 翻訳テスト
参考)Microsoft Translator Text API
ブラウザのURLに下記を指定する
https://api.microsofttranslator.com/V2/Http.svc/Translate?appid=Bearer <アクセストークン>&text=おはよう&to=en
翻訳されました!
3. Bot開発①
3.1. 開発環境
勉強会資料参照
3.2. ひな形作成
勉強会資料参照
初期化
D:\<path>\source\master>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (master) hello-azure-bot
version: (1.0.0) 0.0.1
description:
entry point: (index.js) app.js
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\<path>\source\master\package.json:
{
"name": "hello-azure-bot",
"version": "0.0.1",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes) y
D:\<path>\source\master>
botフレームワークをインストール
D:\<path>\source\master>npm install --save botbuilder restify
> dtrace-provider@0.8.5 install D:\<path>\source\master\node_modules\dtrace-provider
> node scripts/install.js
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN hello-azure-bot@0.0.1 No description
npm WARN hello-azure-bot@0.0.1 No repository field.
+ botbuilder@3.10.1
+ restify@6.0.1
added 138 packages in 16.012s
app.jsを作成
勉強会資料参照
エミュレータ起動
node app.js
で、nodejsを起動して、エミュレータで動作を確認します。
オウム返しができました!
3.3. git
ソースコードの管理とリリースは、gitを介して行います。
ひな形の時点で、一旦githubに登録してしまいます。
D:\<path>\source\master>git init
D:\<path>\source\master>git add .
D:\<path>\source\master>git commit -m "initial"
D:\<path>\source\master>git remote add origin https://github.com/<gitアカウント>/hello-azure-bot.git
D:\<path>\source\master>git push origin master
Counting objects: 3774, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (3550/3550), done.
Writing objects: 100% (3774/3774), 4.13 MiB | 211.00 KiB/s, done.
Total 3774 (delta 861), reused 0 (delta 0)
remote: Resolving deltas: 100% (861/861), done.
To https://github.com/<gitアカウント>/hello-azure-bot.git
* [new branch] master -> master
D:\<path>\source\master>
登録できました!
4. Bot開発②
「Microsoft Translator API」を使った形に変更していきます。
参考)
4.1. モジュール追加インストール
D:\<path>\source\master>npm install --save dotenv request
npm WARN hello-azure-bot@0.0.1 No description
npm WARN hello-azure-bot@0.0.1 No repository field.
+ dotenv@4.0.0
+ request@2.82.0
added 1 package and updated 1 package in 2.578s
4.2. ソースコード
var restify = require('restify');
var builder = require('botbuilder');
require('dotenv').config();
var request = require('request');
var server = restify.createServer();
server.listen(process.env.port || process.env.PORT || 3978, function () {
console.log('%s listening to %s', server.name, server.url);
});
var connector = new builder.ChatConnector({
appId: process.env.MICROSOFT_APP_ID,
appPassword: process.env.MICROSOFT_APP_PASSWORD
});
server.post('/api/messages', connector.listen());
// アクセストークン取得処理
function getToken(callback){
//アクセストークン設定
var options = {
url: process.env.ACCESSTOKEN_URI,
headers: {
'Ocp-Apim-Subscription-Key': process.env.TRANSLATOR_TEXT_KEY
},
method: 'POST'
};
//アクセストークンリクエスト送信
request(options, function (error, response, body) {
if(!error && response.statusCode == 200) {
console.log("accesstoken="+ body);
// トークンをコールバック
callback(body);
} else {
console.error("response.statusCode: " + response.statusCode);
console.error("error: " + error);
// コールバック(nullでエラー判定させる)
callback(null);
}
});
};
var bot = new builder.UniversalBot(connector, function (session) {
// 10文字以下のテキストが送付されているか
// APIの制限があるので、文字数制限を行っておく
if(session.message.text.length <= 10) {
translate(session.message.text, 'en', function(trans_text){
// 翻訳後の文字列を返す
// もしくはエラーメッセージを返す
session.send("%s", trans_text);
});
} else {
session.send("10文字以内で話しかけてください");
}
});
// 翻訳処理
function translate(text, language, callback){
getToken(function(token){
if (!token) {
// トークンが取れなかったら、認証失敗
callback("認証に失敗しました。もう一度話しかけてください。");
return;
}
//リクエストヘッダ
var headers = {
'Authorization': 'Bearer ' + token
};
//クエリ
var query = {
'to': language,
'text': text
};
//オプションの定義
var options = {
url: process.env.TRANSLATOR_TEXT_API_URI,
qs: query,
method: 'GET',
headers: headers,
json: true
};
//リクエスト送信
request(options, function (error, response, body) {
if(!error && response.statusCode == 200) {
//タグの除去
body = body.replace(/<(.+?)>|<\/string>/g, '')
// コールバック
callback(body);
} else {
console.error("response.statusCode: " + response.statusCode);
console.error("error: " + error);
// コールバック
callback("失敗しました。もう一度話しかけてください。");
}
});
});
};
.envファイル
ACCESSTOKEN_URI=https://api.cognitive.microsoft.com/sts/v1.0/issueToken
TRANSLATOR_TEXT_KEY=<Translator API の KEY1>
TRANSLATOR_TEXT_API_URI=https://api.microsofttranslator.com/V2/Http.svc/Translate
英語に翻訳したオウム返しができました!
5. git commit
翻訳版をgitにコミットします。
git add .
git commit -m "翻訳オウム返し機能追加"
git push origin master
6. botサービス公開
パブリックサービスとして公開していきます。
参考)Microsoft Bot Framework、Azureを利用したBot開発!Bot作成からWeb上で公開するまで
6.1. Web App として登録
「+新規」から「Web App」を選択
アプリ名を入力して作成
(リソースグループは勝手にアプリ名と同じのが入りました)
「デプロイオプション」>「ソースの選択」>「GitHub」選択
「承認」でアクセス許可を承認
GitHubにログイン済みの場合、そのアカウントでの接続が求められます。
別のアカウントで接続したい場合、一旦GitHubをログアウトしてから接続してください。
「プロジェクトの選択」で、コミットしたbotプロジェクトを選択
ブランチは切ってないので、そのまま「master」を選択
パフォーマンステストはそのままで構いません。
翻訳オウム返しがサーバーを介して返ってきました!
6.2. Microsoft Bot Framework への登録
Microsoft Bot Framework>「My bots」>「Create a bot」を選択
※botがまだ1件も作成されていない場合、この画面になりません。次の画面が表示されます。
Registerのラジオボタンを選択して、「OK」
- Display name … 表示名(変更可)
- Bot handle … エンドポイントとして使用される名前(変更不可)
- Long description … 説明
- Messaging endpoint … httpsから始まるAzure Web App のURL(エミュレータで使用していたURLのhttps版)
「Create Microsoft App ID and password」を押下
※別窓が開きます
「アプリパスワードを生成して続行」を押下
ここで表示されたパスワードは二度と表示されないので、どこかにメモっといてください
「終了してボットのフレームワークに戻る」押下
※別窓閉じます
自動的にAppIDが入っているので、そのまま登録。
(今回はAnalyticsは設定しません)
6.3. Azure Web App と Bot Framework の結合
AzureのWeb App > アプリケーション設定 > アプリ設定 に、先ほど取得したIDとパスワードを登録します。
6.4. Bot Framework のテスト
Bot Framework に戻って、右上の「Test」で、エミュレータと同じように疎通テストが出来ます。無事翻訳されて返ってきました。
7. Facebook bot への登録
Connect a bot to Facebook Messenger
力尽きました…
bot登録したら、テスターを登録して、テスターにページURLを送って、メッセンジャーで話しかけてもらえれば、レスポンスが返るようになります。
8. 感想
botのデバッグとリリース方法がずっと分かんなくて、今回ようやくそれが理解できて、ここまで作る事ができました。
勉強会に参加して本当に良かったです。ありがとうございました!
手順が分かってきたので、結構色んな事ができそうで、ワクワクしています。
後は、Azureの無料プランでどこまでいけるか、とか、運用周りどうするか、とかですかねー。