LoginSignup
3

More than 5 years have passed since last update.

[Cogbot]Microsoft Translator API で Facebook Bot を作ってみた

Last updated at Posted at 2017-09-27

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/# で 「+新規」押下

translate01.png

検索文字列に「translator」を入力して、「Translator Text API」を選択

translate02.png

「作成」押下

translate02-2.png

各入力項目を設定して「作成」押下

  • Name … API名称
  • サブスプリクション … 作成先(今回は無料)
  • 価格レベル … 利用価格帯(今回はFree)
  • Resource Group … よく分かんないけど、API名称を小文字にして、新規作成
  • Resource Group location … 東日本 or 西日本

translate03.png

できました!

translate04.png

2.2. 疎通確認

2.2.1. アクセストークン取得

参考)Authentication Token API

「Show access keys ...」押下

translate05.png

「KEY1」の値をコピー

translate06.png

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

translate07.png

翻訳されました!

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を起動して、エミュレータで動作を確認します。

capture000970.jpg

オウム返しができました!

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. ソースコード

app.js
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

capture000972.jpg

英語に翻訳したオウム返しができました!

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」を選択

translate08.png

アプリ名を入力して作成
(リソースグループは勝手にアプリ名と同じのが入りました)

translate09.png

「デプロイオプション」>「ソースの選択」>「GitHub」選択

translate10.png

「承認」でアクセス許可を承認
GitHubにログイン済みの場合、そのアカウントでの接続が求められます。
別のアカウントで接続したい場合、一旦GitHubをログアウトしてから接続してください。

translate11.png

「プロジェクトの選択」で、コミットしたbotプロジェクトを選択

translate12.png

ブランチは切ってないので、そのまま「master」を選択
パフォーマンステストはそのままで構いません。

translate13.png

翻訳オウム返しがサーバーを介して返ってきました!

6.2. Microsoft Bot Framework への登録

Microsoft Bot Framework>「My bots」>「Create a bot」を選択

translate14.png

※botがまだ1件も作成されていない場合、この画面になりません。次の画面が表示されます。

Registerのラジオボタンを選択して、「OK」

translate16.png

  • Display name … 表示名(変更可)
  • Bot handle … エンドポイントとして使用される名前(変更不可)
  • Long description … 説明
  • Messaging endpoint … httpsから始まるAzure Web App のURL(エミュレータで使用していたURLのhttps版)

「Create Microsoft App ID and password」を押下
※別窓が開きます

translate17.png

「アプリパスワードを生成して続行」を押下
ここで表示されたパスワードは二度と表示されないので、どこかにメモっといてください

「終了してボットのフレームワークに戻る」押下
※別窓閉じます

自動的にAppIDが入っているので、そのまま登録。
(今回はAnalyticsは設定しません)

6.3. Azure Web App と Bot Framework の結合

AzureのWeb App > アプリケーション設定 > アプリ設定 に、先ほど取得したIDとパスワードを登録します。

translate19.png

6.4. Bot Framework のテスト

translate20.png

Bot Framework に戻って、右上の「Test」で、エミュレータと同じように疎通テストが出来ます。無事翻訳されて返ってきました。

7. Facebook bot への登録

Connect a bot to Facebook Messenger

力尽きました…

bot登録したら、テスターを登録して、テスターにページURLを送って、メッセンジャーで話しかけてもらえれば、レスポンスが返るようになります。

8. 感想

botのデバッグとリリース方法がずっと分かんなくて、今回ようやくそれが理解できて、ここまで作る事ができました。
勉強会に参加して本当に良かったです。ありがとうございました!
手順が分かってきたので、結構色んな事ができそうで、ワクワクしています。
後は、Azureの無料プランでどこまでいけるか、とか、運用周りどうするか、とかですかねー。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3