Virtual TJBot[仮想ロボット]でAIを学ぼう(導入編)[2020年8月版]

# 1. Virtual TJBot
Virtual TJBotは、 ブラウザを使ったNode-REDのフローエディタ上で動作する仮想のTJBotです。
![Virtual TJBot](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/d7494cb3-e8ce-76d7-8add-a59b587fcc40.png)

ベースとなっている[TJBot](https://www.ibm.com/developerworks/jp/code/open/projects/tjbot/index.html)は、IBMのWatsonを学習するために開発したレーザーカットした段ボールで作るAIロボットキットです。

TJBotは、APIを使って他のデバイスと情報収集、体内のカメラやマイク使って情報収集(音声や画像)し、
その情報をIBM Cloud の Watson を使って、音声を文字に、文字を音声、画像認識、会話　することができます。TJBotは前述の機能がパッケージされているので、AI, IoTの世界を気軽に体感できます。

昨今、新型コロナ感染症の影響で、ハンズオンワークショップや学校での授業など、TJBotを使って対面で行うことが難しいため、利用者のブラウザを使って操作できるVirtual TJBotを使ったAIの学習に注目しています。そこで、今回は導入方法について、紹介します。この投稿がオンラインイベントのアイディアの１つとなれば嬉しく思います。

# 2. Virtual TJBot Starter Application
Virtual TJBot Starter Application は ボタン１つで、IBM Cloud 上の　Virtual TJBotに必要なサービスを自動設定で行う方法です。このアプリケーションはコミュニティベースでメンテナンスされており、日本では @ssakaigawa さんが中心に活動されています。いつもメンテナンスありがとうございます。

Virtual TJBot Starter Application を利用することで以下のIBM Cloud のリソースがIBM Cloudのライトプランの範囲内でインストールされます。
- Cloud Foundry アプリケーション「Node.jsサービスを利用したNode-REDのプラットフォーム」
- Cloud Foundry サービス「Node-Red Shared Cloudant」(データベース)
- Cloudant (データベース)
- Continuous Delivery (プログラムを自動でインストールするためのサービス）
- Watson Assistant(コンピュータと会話するための開発サービス）
- Language Translator(翻訳)
- Speech to Text(音声認識
- Text to Speech(音声発音)
- Visual Recognition(画像認識)  

# 3. Virtual TJBot Starter Application を使うための前提条件

Virtual TJBot Starter Applicationを利用するためには「 IBM Cloudのアカウント 」、「 インターネットに接続できるPC 」の２つが必要です。

IBM Cloudのアカウントは、クレジットカードの登録が不要なライトアカウントで利用できます。ライトアカウントの詳細は、次のURLで確認してください。 [https://www.ibm.com/jp-ja/cloud/lite-account](https://www.ibm.com/jp-ja/cloud/lite-account)
今回、私はクレジット登録しないライトアカウントを作成して、導入を試しました。

インストールされたIBM Cloud のリソースは、IBM Cloudのダッシュボードのリソースの要約で「すべて表示」で一覧表示されます。今回は、IBM Cloudのライトアカウントが前提でかつ、Virtual TJBotの導入を簡単にするために、Virtual TJBotに必要なリソースが自動導入されたので、各リソースの課金プランは、確認してくださいね。
![スクリーンショット 2020-08-16 10.52.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/fa3fdb8c-eb64-6afc-0ee9-f6a1b7ba2111.png)



# 4. 設定方法
設定は大きく分かれて、以下の２つあります。

- IBM Cloud へ Virtual TJBot Starter Applicationをデプロイ
- Node-Red instannce on IBM Cloud の初期設定

それでは、順に設定を始めましょう。

## IBM Cloud へ Virtual TJBot Starter Applicationのデプロイ 

1. Virtual TJBot Starter Applicationのページにアクセスし、「 Deploy to IBM Cloud 」ボタンをクリックする。
Virtual TJBot Starter Application のURL: https://github.com/tjbotfan/virtual-tjbot-starter
![スクリーンショット 2020-08-16 2.21.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/b9f086d0-1e73-d4ab-8801-46a5737d4227.png)

2. IBM Cloud にデプロイする画面が表示されます。この段階でIBM Cloud にログインしていない場合はログインします。
![スクリーンショット 2020-08-16 2.42.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/bbec7073-6e8f-636c-ca4e-b5a4aeca8b9d.png)

3. リージョンの選択（任意の場所）をし、設定はデフォルトのままで「作成ボタン」をクリックします。
    - 今回はダラスを選択しました。

4. IBM Cloud API　キー　で「値は必須です。」とエラー出力がでます。キーを作成するために「新規」ボタンをクリックします。
![スクリーンショット 2020-08-16 2.43.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/e703805d-4d88-e1a7-a9d3-accdd6c9fa35.png)

5. 「全アクセス権限を持つ新規APIキーの作成」画面が表示されます。今回は特に入力せずに 「OK」ボタンをクリックします。
![スクリーンショット 2020-08-16 2.45.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/e2609e73-869f-19ad-e4db-efa335825f2a.png)

6. IBM Cloud API キーが作られ、「作成」ボタンを実行します。
    - 「 組織　」と「 スペース　」 が作成されていない場合は作成します。　
![スクリーンショット 2020-08-16 3.29.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/791c21a7-c8ff-9903-5480-31d53fc671a4.png)

7. IBM Cloud にデプロイするための「 ツールチェーン 」が始まります。 「Delivery Pipline」をクリックして終了するまで待ちます。
![スクリーンショット 2020-08-16 2.59.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/65ae296b-16e4-0875-4671-5943bb6d8f86.png)

8. Delivery Pipelineの画面が表示されます。「 Build 」、「 Deploy 」 共に　"ステージは成功" とステータスが表示されたら、IBM Cloud にデプロイは完了です。　赤枠の「コンソールの表示」をクリックして次へ進みましょう。
![スクリーンショット 2020-08-16 3.02.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/dd053078-1cfe-8b45-2764-5b08b938f40b.png)

9. リソースリストに virtual-tjbot-starter-xxx が表示されます。  virtual-tjbot-starter-xxx は、Node-Red instannce on IBM Cloud のインスタンス名です。「 Visit App URL 」をクリックして、Node-Red instannce on IBM Cloud の初期設定に進みましょう。
![スクリーンショット 2020-08-16 3.24.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/147dc765-bedd-c596-c7ec-557def4c04ce.png)

## Node-Red instannce on IBM Cloud の初期設定

1. Node-Red instannce on IBM Cloudのウィザードが始まります。「Next」ボタンを押して次へ進みます。
![スクリーンショット 2020-08-16 3.30.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/f0417eee-1e8b-41b3-4e3b-36096000e46b.png)

2. Node-REDのフローエディタにアクセスする際に必要な「 Username 」と「 Password 」を入力して、Nextをクリックします。(ここの 「 Username 」と「 Password 」を忘れると、あとでログインできなくなるのでメモなどしてください。)
![スクリーンショット 2020-08-16 3.33.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/63d43645-c234-3a0c-4df7-d6203069b317.png)


3. オプション設定の画面が表示されます。ここではこのまま「 Next 」をクリックします。
![スクリーンショット 2020-08-16 3.38.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/1b1cae33-b0ed-3fd2-c71e-523dd0731e86.png)

4. 最後の画面「Finshi the install」が表示されます。「 Finish 」ボタンをクリックしましょう！
![スクリーンショット 2020-08-16 3.40.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/63b2328c-5871-ca4e-d5da-e374f13f6a20.png)

5. 入力した内容の設定とNode-Redの起動が始まります。終了するまで待機します。
![スクリーンショット 2020-08-16 3.43.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/a569828b-d8f0-98e4-8d99-dab6b18c94af.png)

6. Node-Redが起動すると”((L|o_o| < Hello, I'm Virtual TJBot”と表示されます。ついにきましたね！　![スクリーンショット 2020-08-16 3.47.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/c8509703-37a0-3a65-8732-57fcfe0d4d99.png)

# 5. Virtual TJBotの操作

1. ”((L|o_o| < Hello, I'm Virtual TJBot”　画面の 「 Go to your Node-Red flow editor 」 をクリックします。　

2. ユーザー名とパスワードの入力が求められるので、初期設定をした値を入力してください。
![スクリーンショット 2020-08-16 3.51.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/32ef6518-e643-47b4-7680-a39392df6002.png)

3. ついに、フローエディターが表示されます。
![スクリーンショット 2020-08-16 3.53.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/37299603-e59b-527e-3b00-0f7fb201f394.png)

4. Virtual TJBotを表示させるために、画面右上の「▼」をクリック、そして表示されたメニューの中から「Virtual TJBot」をクリックします。
![スクリーンショット 2020-08-16 3.58.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/f460a55b-0371-5c39-3398-eef5cefad0c2.png)

5. ついに Virtual TJBotが表示されました!
![スクリーンショット 2020-08-16 4.01.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/ec3c03c0-bf4c-8f9d-bfc2-4536700f5827.png)

6. Virtual TJBotの腕を振ってみましょう。　「 arm 」タブをクリックします。　そしてフローの中から「 up 」、「 middle 」、 「 down 」 をクリックします。するとVirtual TJBotが手を振ります。
![スクリーンショット 2020-08-16 4.24.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/1de134d4-0cfc-a80d-4b56-594473304ff6.png)

7. 次に　Virtual TJBotに話をさせましょう。　「 speaker 」タブをクリックします。　greetingノードの赤丸の部分をクリックします。 すると スピーカーから「こんにちは、僕の名前はTJボットです！」　と　聞こえてきます。 
![スクリーンショット 2020-08-16 4.30.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/694f75ec-e2d7-d5df-6410-baf188e71da5.png)

Virtual TJBotに話させる内容を変えたい場合は、「create sentence」をダブルクリック、templateノードを編集で、文言を変更して、「完了」ボタンをクリック、そして「デプロイ」ボタンで反映します。　そして、前の手順で、Virtual TJBotに話をさせてください。
![スクリーンショット 2020-08-16 4.37.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/3f7b5471-388e-12b1-8aff-3e2bae33a1bc.png)

# 6. 最後に
これで、Virtual TJBotが使えるようになりました。今回紹介しなかった翻訳(translation)、画像認識など初期で様々なフローが用意されていますのでお楽しみください。

また、TJBotFANグループ: [https://tjbotfan.tokyo](https://tjbotfan.tokyo) ページ(FaceBook / Twitterもこちらから）ではコミュティーのみなさんと情報交換をしていますので、ご参加ください！