Language Translatorを利用する最初のレシピ

# このページについて
このページはハッカソンを迅速にお楽しみいただくために開発した開発レシピ集です。レシピのまとめページは[IBM Cloudのビギナー開発者向け「最初のレシピ」集](https://qiita.com/yutaka-maruoka/items/5e38bed6d130eb427e2c)になります。

あくまで個人の活動として掲載しているので、[IBM ソーシャル・コンピューティング・ガイドライン](https://www.ibm.com/blogs/think/jp-ja/social-computing-guideline/)に則っています。

すなわち、このサイトの掲載内容は私自身の見解であり、必ずしもIBMの立場、戦略、意見を代表するものではありません。

# はじめに
IBM CloudとはIBM社が提供するクラウドサービスです。

クラウドとは・・・と紙で理解するよりは、実際に使って理解したほうが早いです。

そのため、ここでは言語系サービスであるTranslatorについてレシピとしてまとめます。

**なお、ここの記事はIBM Cloudライトアカウントを登録済みの人が対象です。**
[IBM Cloudライトアカウント登録＆初期設定確認](https://qiita.com/yutaka-maruoka/items/982d648cb7a7196a02e5)

# Translator作成
ダッシュボードから作業を始めます。

まずダッシュボードの右上にある、リソースの作成を押します。
![スクリーンショット 2018-07-01 13.55.42.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/b01f1b10-52a0-7e6b-3d19-1143e2be48ae.jpeg)

この画面はIBM Cloudの各種サービスを購入するカタログです。
検索バーに「label:ライト translator」と入力すると、１つだけに絞り込まれます。
この商品をクリックして選びましょう。

![スクリーンショット 2018-07-01 13.59.17.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/afc3e380-de44-20d4-c12f-de83c254ccf6.jpeg)

商品の購入ページに遷移します。
この画面を下にスクロールします。
![スクリーンショット 2018-07-01 14.00.33.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/010eb02b-5435-4be2-ea89-8aeee6139cd5.jpeg)

スクロールするとプランを選択することが出来ますが、初期設定されている「ライト」が選ばれていることを確認してから、「作成」ボタンをクリックします。

![スクリーンショット 2018-07-01 14.01.34.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/5efe7515-65bb-f516-5403-c7cb00cd4910.jpeg)

設定値が見える画面に移動すると思いますが、右上の「三」をクリックして、メニューを出します。
![スクリーンショット 2018-07-01 14.05.50.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/2177ea48-23d9-02e5-b089-0f8f1d95246e.jpeg)

次に「ダッシュボード」をクリックします。
![スクリーンショット 2018-07-01 14.03.44.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/767a2121-47a7-11c6-e97f-4f08ed32dcd8.jpeg)

Translatorが追加されていると思います。
![スクリーンショット 2018-07-01 14.07.20.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/af00c7ec-7343-e1aa-e492-ae2bac73c37e.jpeg)


# Node-RED環境の構築
開発環境とアプリ提供が統合されたNode-REDという環境を作ります。

まずは右上の「リソース作成」をクリックします。
![スクリーンショット 2018-07-01 14.07.20.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/2d906fcf-f88a-9b5e-22fc-e124fbfa59cb.jpeg)

リソースの検索で「label:ライト Node-RED」と入力して絞り込みます。
そして「Node-RED Starter」をクリックします。
![スクリーンショット 2018-07-01 14.11.21.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/d847493a-de3c-ad11-a784-8579001f7d68.jpeg)

「アプリ名」はIBM Cloud全体でユニークな名前であればOKです。
例えば「trans000001」と言った形でつけて、重複したら別のNoにするといった方法がわかりやすいと思います。
アプリ名を入力したら、「作成」ボタンを押します。
![スクリーンショット 2018-07-01 14.13.10.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/ecaedac9-84ee-7f8c-1fc1-0d44091a536d.jpeg)

その後、「三」をクリックして、メニューを出します。
![スクリーンショット 2018-07-01 14.16.01.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/cd7c99fc-2ed0-7b5f-0984-e843e031979a.jpeg)

そして「ダッシュボード」をクリックします。
![スクリーンショット 2018-07-01 14.17.14.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/ac1bbde3-8f01-b65e-db00-115fbc290641.jpeg)

# TranslatorとNode-REDを関連付ける
ダッシュボード画面に行くといくつかの行があります。
この中で「Croud Foundaryアプリケーション」にあるNode-REDアプリケーションをくりっくします。
![スクリーンショット 2018-07-01 14.18.10.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/a4d40612-ae24-2603-386a-08fa157769c3.jpeg)

次の画面を見ると、「接続」という項目があります。
「接続の作成」ボタンをクリックします。
![スクリーンショット 2018-07-01 14.21.26.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/304cdebd-2ff2-4324-5118-564cad6c997f.jpeg)

次の画面では、先程追加したTranslatorに「マウスカーソルを動かす」と、Connectボタンが出てきます。
![スクリーンショット 2018-07-01 14.22.35.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/b09af7ad-24bc-dd26-a76d-98b0dfb5e732.jpeg)

出てきた「Connect」ボタンをクリックします。
![スクリーンショット 2018-07-01 14.24.27.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/679106aa-7a36-a6b0-96d5-7252ab4c426f.jpeg)

「IAM対応サービスの接続」の画面が出てきますので、「接続」ボタンをクリックします。
![スクリーンショット 2018-07-01 14.25.01.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/ae118567-710a-ed2a-f64c-a5fd78733b3f.jpeg)

少し時間がたつと、「再ステージ」をクリックします。
![スクリーンショット 2018-07-01 14.25.25.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/0743ccdc-01a3-3bc7-900d-e04cf0398ead.jpeg)

「Node-RED」の接続画面に移動します。
赤線の箇所が「再ステージング中」となっていると思います。
これは「接続」の設定をシステムに反映するため、再構築を行っているためです。
１分程度待ちます。
![スクリーンショット 2018-07-01 14.27.11.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/3511c778-059c-1e0e-118f-99ef1a7ca463.jpeg)

時間が経つと、下記の赤線部分のようになります。
この１０日間でスリープとなるのは、「ライト・アカウント」の仕様なので、気にしないでください。
継続運用する場合には、通常のアカウント契約が必要になります。
![スクリーンショット 2018-07-01 14.29.05.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/caf59bed-92ca-ee39-c3d7-d548c6ad3c63.jpeg)

確認しら、ダッシュボードに戻りましょう。

「三」をクリックして、メニューを出します。
![スクリーンショット 2018-07-01 14.16.01.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/cd7c99fc-2ed0-7b5f-0984-e843e031979a.jpeg)

そして「ダッシュボード」をクリックします。
![スクリーンショット 2018-07-01 14.17.14.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/ac1bbde3-8f01-b65e-db00-115fbc290641.jpeg)

# Node-RED環境でアプリを作る

ダッシュボードにて、また、「Cloud Foundaryアプリケーション」を選びます。
![スクリーンショット 2018-07-01 14.32.44.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/b58edcc0-c298-2b10-04a7-2289b21834d4.jpeg)

次の画面で「経路▼」の「▼」をクリックします。
![スクリーンショット 2018-07-01 14.34.17.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/2f90d12b-2b84-fcc1-376b-7e61abbe1a2e.jpeg)

するとメニュー画面が出てきます。
リンク先のURLをクリックします。そうすると、別のウィンドウが出てきます。
![スクリーンショット 2018-07-01 14.35.05.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/c3854bc1-4114-9226-fca3-bc5a3aa0b0e4.jpeg)

# Node-RED環境の初期設定を行う
先程のクリックで出てきた画面は、Node-REDの初期登録画面です。

まずは、初期画面なので、「NEXT」ボタンをクリックします。
![スクリーンショット 2018-07-01 14.37.50.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/d03bec65-cf44-240e-524a-17d51bf1b37a.jpeg)

ユーザーIDとパスワードを入れます。
自己責任で決めてほしいですが、IBM Cloudライトアカウントと同じにすると忘れづらい気もします。
![スクリーンショット 2018-07-01 14.39.47.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/07250c2a-e78c-b241-34e7-fbcbe1a6b524.jpeg)

「NEXT」ボタンをクリックします。
![スクリーンショット 2018-07-01 14.41.10.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/2ddfa58f-0410-1484-200c-5acc60cad1f6.jpeg)

「Finish」ボタンをクリックします。
![スクリーンショット 2018-07-01 14.41.55.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/fca2ad35-0ddb-17cb-c4d8-d64cbe26dc9d.jpeg)

最終的に、画面に登録できました。
![スクリーンショット 2018-07-01 14.43.32.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/fd75761b-fd77-c9e3-7009-98d904332fb0.jpeg)

# Node-RED環境にログインする
初期登録が終わったとき、あるいは、初期登録が終わった状態でIBM CloudアプリのURLをクリックすると、下記の画面が表示されます。

「Go to your Node-RED flow editor」をクリックします。
![スクリーンショット 2018-07-01 14.43.32.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/c52a9138-8a70-a38d-778e-584c71706687.jpeg)

ユーザーIDとパスワードを入力し、「ログイン」をクリックします。
![スクリーンショット 2018-07-01 14.45.45.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/e4d719cd-2740-a7a9-2f9e-e993d2602372.jpeg)

ログインした結果、開発環境が表示されました。
![スクリーンショット 2018-07-01 14.47.50.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/6995177d-3795-6100-f3c8-2f44fcb1fb12.jpeg)

# Translatorアプリを作る
## ノードを配置する。
Node-RED上の「ノード」とは、フローを指すモジュールのことです。
開発画面では左側のメニューにいろんなノードが出てきます。

まずは必要なノードをピックアップして、開発画面に配置していきます。

左上の入力箇所で「http」と入力します。
そうすると、左のノードが絞り込まれると思います。
この中で、「入力」の「http」と、「出力」の「http」をドラッグ＆ドロップで移動させます。
![スクリーンショット 2018-07-01 14.48.50.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/b6fad541-f2a1-9f07-cf04-2ddfcecb1ebf.jpeg)

こうなったらOKです。
なお、ドラッグした「ノード」というモジュールは、マウスのドラッグで移動させることが出来ます。
![スクリーンショット 2018-07-01 15.18.34.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/a2f193bf-68e0-b3b0-3ba0-81e99677c54f.jpeg)

次に「http」と同様に左上の入力欄に「change」と入力してください。
そうすると「Change」ノードが出てくるので、HTTPど同様にドラッグ＆ドロップします。

![スクリーンショット 2018-07-01 15.19.55.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/20964b9f-aeb7-a406-b0b6-55cabbd94a71.jpeg)

さらに左上の入力欄に「language」と入力すると、関係するノードが表示されます。
「Language Translator」というノードをドラッグ＆ドロップします。
![スクリーンショット 2018-07-01 15.22.28.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/0ef606d8-8f14-0e01-57d3-4906286dcf4d.jpeg)

こんな感じで並べばOKです！
![スクリーンショット 2018-07-01 15.24.09.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/5d0c2ea1-05c8-ba71-9369-848a0cba35a7.jpeg)

## フローを作る
まず、「HTTP」の右丸とChangeの操作で登録した「set msg.payload」の左丸をドラッグ＆ドロップしてみます。
そうすると、２つのノードの間で線を引くことができると思います。
![スクリーンショット 2018-07-01 15.24.09.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/d771c85a-e08d-079e-de31-805613f60d31.jpeg)

こんな感じで線を結ぶことができればOKです。
![スクリーンショット 2018-07-01 15.27.15.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/94faf76f-9823-28e1-b0b9-16de7d2cf208.jpeg)

同様にして、他のノード間も線で結びます。
![スクリーンショット 2018-07-01 15.28.31.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/df18c43f-c5b6-f688-8aea-5a9ec911ebc2.jpeg)

これでフローができました。

## ノードの設定を行う
配置したノードに設定を行っていきます。

### HTTPノードの設定
まず一番左の「HTTP」をダブルクリックします。
![スクリーンショット 2018-07-01 15.29.43.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/2b4ba54a-4b83-419c-a5c4-752445fd6e0c.jpeg)

開かれたメニューの中でURLという項目に「/sample」と入力します。
これは、後でアプリを開く時のURLの一部となります。
![スクリーンショット 2018-07-01 15.30.15.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/40d9a732-1566-c4da-811f-f88e39d9e692.jpeg)

### CHANGEノードの設定
次に「Change」で設置したノードをダブルクリックして設定画面を出します。
そして、設定値を以下のように設定します。
- msg.payload
- msg.payload.text

Payload.textのところは、初期設定のプルダウンはmsgではないので、注意してください。

すべて確認したら、「完了」ボタンをクリックします。
![スクリーンショット 2018-07-01 15.38.59.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/2e2dd409-6b75-4f6a-8d93-817998e9ff28.jpeg)

### Language Translatorノードの設定
プルダウンのノードをダブルクリックして設定画面を開きます。
設定については、「Target」の項目を「Japanese」に変更するだけです。

設定が終わったら「完了」ボタンをクリックします。
![スクリーンショット 2018-07-01 15.42.49.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/ffcebb42-3b80-6497-fc3d-378e2bc5c82a.jpeg)

### アプリケーションの内容をシステムに反映する
画面右上の「デプロイ」ボタンをクリックするだけです。

![スクリーンショット 2018-07-01 15.46.50.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/0dc3d6c8-0617-3e93-498b-3943ae189a8d.jpeg)

デプロイが完了するとこのような、緑色の画面が出ます。
この画面は時間が消えます。ただ、「デプロイ」ボタンはグレーアウトされます。
![スクリーンショット 2018-07-01 15.48.28.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/9f6c1d29-fcca-3ccd-daf2-527f5b2b578a.jpeg)

# アプリをテストする
Node-REDを開いていたウィンドウの経路にあるURLをクリックします。
おそらくNode-REDのログイン画面が出てくると思います。
![スクリーンショット 2018-07-01 15.52.01.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/d7e80254-7eca-c8fa-31db-94670fa3dc78.jpeg)

ここで、重要なのは画面ではなく、URLです。

![スクリーンショット 2018-07-01 15.55.27.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/d58aa0f5-4b9b-90d6-1c5f-c775674b1626.jpeg)


URLを以下のように追記します。
URLは構築した環境の「アプリ名」が異なっているため、それぞれの名前で読み替えてください。

- https://trans000001.mybluemix.net/
↓
- https://trans000001.mybluemix.net/sample?text=hello

このURLでWebページを開くと以下のような画面が表示されます。
![スクリーンショット 2018-07-01 15.55.05.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/1a2d3576-188b-b309-5478-a9d5e2656304.jpeg)

![スクリーンショット 2018-07-01 15.54.52.jpg](https://qiita-image-store.s3.amazonaws.com/0/3168/c7ab4ff8-9eea-8e15-bf16-68da7fff8bfc.jpeg)

この「ハロー」はURLの「hello」を英語から日本語に変更したものです。

URLとNode-REDで設定した値は以下のとおりです。
- 「/sample」・・・HTTPノードの設定値と同じ
- 「?」・・・これはURLのルールなので、Node-REDとは直接関係ありません
- 「text」・・・Changeノードに設定した値のことです。
- 「hello」は任意の英文章です。英語を日本語になる理由は「Language Translator」で設定した値です

あとは、好きに書き換えて遊んでみてください。

Node-REDやWatsonの使い方になれたら、　少し複雑なVisual RecognitionやDiscoveryの利用にチャレンジしてみてください！

それでは！