UnityとBluemix Watsonでドラえもんのひみつ道具「ほんやくコンニャク」を作る

# 追記（2017年3月3日）
Language Translatorが日本語対応したみたいです

# 前置き
## Bluemixとは
- IBMが提供するPaaS(Platform as a Service)。
- 迅速かつ簡単にクラウド上でアプリケーションを作成、デプロイ、管理することができる。
- 数多くのアプリやサービスが提供されており、自然言語を解釈するWatsonなどが有名。

## Watsonとは
- IBMが提供するBluemixのサービスの枠組みの一つ。
- 自然言語解析を主な機能として、複数のサービスを提供している。
    - Speech to Text : 音声言語をテキストへ変換
    - Text to Speech : テキストを音声へ変換
    - Natural Language Classifier: 質問テキストに対する自然言語の分類
    - Language Translator : 多言語への翻訳

## ほんやくコンニャクとは[^1]
- これを食べると、日本語が外国語に、外国語が日本語に聞こえる。
- また本来食べる事の出来ないロボットにも、対象の上に乗せれば自動的に翻訳してくれる。
- 会話だけでなく、外国語で書かれた文章を読む事も可能。
- さらに外国人だけではなく、宇宙人、動物、ロボットの言葉、古い言語なども翻訳出来る。
- 映画「のび太の日本誕生」では、お味噌味が登場した。
- 『ほんやくコンニャクアイス味』もある。

## 経緯
Bluemix Watsonが（というよりもIBMが）UnityのSDKを提供していたので使ってみた。

## やりたいこと
日本語で喋ると英語（またはその多言語）に翻訳されて喋ってくれる。
### 必要な機能
1. 話した言葉をテキストに変換
2. 特定の言語から、別の言語への翻訳
3. 翻訳された言葉を音声として出力

# やってみる
## 前提
### ユーザ登録
- Bluemix(IBM ID)をすでに登録済み（トライアルでも可）であること
    - 登録していない人は https://console.ng.bluemix.net/registration から登録

### 各ツール・プラグイン等
- Unity 5.5.0p3
- Watson Developer Cloud Unity SDK v0.12.0

### プラットフォーム
- 開発＆リリース
    - macOS
    - Windows

### 実行環境
**マイクのついたPC**であること

## 内容
### Unityの基本的な部分
1. Unity Projectの作成
    - 2Dで作成する(3Dの必要はないため)
1. Watson SDKのimport
    - [watson-developer-cloud/unity-sdk](https://github.com/watson-developer-cloud/unity-sdk) からWatson SDKをダウンロード
    - 現時点での最新版はここ：[releases/tag/0.12.0](https://github.com/watson-developer-cloud/unity-sdk/releases/tag/0.12.0)
    - 解凍後のフォルダ名Watsonに変更し、Assetsフォルダに配置

### Watson資格情報の設定
1. Watsonサービスの立ち上げ
    - Speech to Text
    <img width="787" alt="スクリーンショット 2017-01-14 00.45.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/153015/1722aaad-d8dd-bbbe-b163-4a6545b23cc7.png">
    - Text to Speech
    <img width="814" alt="スクリーンショット 2017-01-14 00.43.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/153015/054f6950-d208-7e39-6c68-5757a9ae22c8.png">
1. 資格情報のコピー(作成していない場合は作成)
    - Speech to Text、Text to Speechのサービスから資格情報を開き、`{`から`}`までをコピー
    <img width="756" alt="スクリーンショット 2017-01-14 00.47.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/153015/78b900d5-37b2-2211-4e25-b22a9d08b868.png">
    補足）右上のファイルアイコンのクリックでもクリップボード上にコピー可

1. UnityにWatsonの資格情報を設定
    - Unity EditorのメニューからWatson - Configuration Editorを選択
    <img width="357" alt="スクリーンショット 2017-01-13 00.07.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/153015/dfa4150b-162d-0747-cffc-634c18c7d99f.png">
    - 以下のWindowが開かれる
    <img width="786" alt="スクリーンショット 2017-01-14 00.49.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/153015/a99e9e16-7e01-d7f8-6389-a9879b5dee7f.png">
    - 「PASTE CREDENTIALS BELOW」の下のテキストエリアに、先ほどコピーした資格情報をそのまま貼り付け、「Apply Credentials」をクリックする
    - すると、以下のように資格情報を登録したサービスがグリーンに変化する（＝資格情報の登録完了）
    <img width="750" alt="スクリーンショット 2017-01-14 00.51.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/153015/a7e25736-0bc2-5e1f-8dda-1f7a369566c2.png">


### Watson APIの実装
1. SpeechToText.csの修正
    - 提供されているSDKでは日本語対応していないため、日本語対応する(半ば強制的に)
    - 対象ファイル
        - Assets/Watson/Scripts/Services/SpeechToText/SpeechToText.cs
    - 修正内容
        - 下記文字列の一括置換
            - 検索文字列：en-US
            - 置換文字列：ja-JP
        - 例）

            ```cs:SpeechToText.cs(修正前)
            private string m_RecognizeModel = "en-US_BroadbandModel";   // ID of the model to use.
            ```
            ```cs:SpeechToText.cs(修正後)
            private string m_RecognizeModel = "ja-JP_BroadbandModel";   // ID of the model to use.
            ```
1. Speech to TextとText to Speech呼び出し用スクリプトの作成
    - [WatsonManager.cs](https://gist.github.com/d858c2af90081259bc4cf4c8a501caf3.git)をコピーして、適当な場所に配置する

### 翻訳の実装
1. Simple Jsonをimport
    - Google Translateを用いるために利用(APIの結果がjson形式で返ってくるため)
    - [SimpleJSON.zip](http://wiki.unity3d.com/images/8/82/SimpleJSON.zip)からダウンロードして解凍後、SimpleJson.unitypackageをimportする
1. Google Translate[^2]の入出力を行うためのスクリプト作成
    - [GoogleTranslate.cs](https://gist.github.com/444f3f5d4ab2898dba539e2e34609e0c.git)をコピーして、適当な場所に配置する

### UIの作成とイベントの紐付け
1. 各種スクリプトの追加
    - 適当なGameObjectの作成（例ではScriptsと名称変更）
    - GameManager.cs、WatsonManager.cs、GoogleTranslate.csを作成したGameObjectに追加
    - 音声の出力のため、Audio Sourceも合わせて追加
    - 例）        
        <img width="616" alt="スクリーンショット 2017-01-15 22.25.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/153015/801fcfd2-e7d0-b717-18dd-2f5c9785804c.png">

1. 音声録音開始ボタンの作成
    - UI - Buttonを選択してボタンを追加（適当に装飾）
    - クリックイベントにGameManager.SpeechStartOnClickを追加
    - 例）        
        <img width="797" alt="スクリーンショット 2017-01-15 22.19.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/153015/cd6647fd-53d4-0ab7-9188-30122a34d741.png">

1. 音声録音終了ボタンの作成
    - UI - Buttonを選択してボタンを追加（適当に装飾）
    - クリックイベントにGameManager.SpeechEndOnClickを追加
    - 例）        
        <img width="744" alt="スクリーンショット 2017-01-15 22.32.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/153015/afd18555-8887-555b-3ea7-a228dca8781e.png">

1. 発声した言葉をテキストとして表示するフィールドの作成
    - UI - Textを選択してテキストを追加（適当にサイズ、フォントを修正）
    - 例）
        <img width="1560" alt="スクリーンショット 2017-01-15 22.37.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/153015/93244483-042a-bd7f-f7ed-e34c930a3dc6.png">

1. 翻訳された言葉をテキストとして表示するフィールドの作成
    - UI - Textを選択してテキストを追加（適当にサイズ、フォントを修正）
    - 例）
        <img width="1555" alt="スクリーンショット 2017-01-15 22.39.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/153015/43242463-eeb0-8aee-8934-046dca496f3a.png">

1. 上記で作成した４つのコントロールを、GameManagerに紐付け
    - 例）        
        <img width="617" alt="スクリーンショット 2017-01-15 22.41.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/153015/6ccb5117-d825-0784-ec39-4f9e01a125f1.png">

### 実行
1. 実行ボタンを押す
    <img width="66" alt="スクリーンショット 2017-01-15 22.46.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/153015/ca35322c-0ee2-16ae-9e97-326bca1f7e16.png">

1. 録音開始ボタンを押す
    <img width="67" alt="スクリーンショット 2017-01-15 22.48.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/153015/92540d3f-7cb2-a8a1-1e2f-47b3d2496a19.png">

1. 何か話す
    - 注意）長文は控える
        - GoogleTranslate.csが対応していない（適当に作ったので、最初の一文しか翻訳取得しない）
        - 音声データのやりとりが発生するので、リターンが遅くなる

1. 録音停止ボタンを押す
    <img width="64" alt="スクリーンショット 2017-01-15 22.48.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/153015/026bcb85-21aa-1d57-8f20-f600a0901869.png">

1. 話した言葉と、翻訳された言葉が、画面に表示される

以上

### 補足
上記で紹介したUnity C#スクリプトは、https://gist.github.com/sear-azazel にUPしている。

### 注釈
[^1]: 出展：http://www.doraemondb.com/ddb/index.php?item=ほんやくこんにゃく
[^2]: Bluemixにも翻訳サービス**Language Translator**があるが、現時点で日本語対応していないため、こちらを用いる