Vueの構成で、DBに保存したレコードを画面表示するところまでを書きました。APIを叩いて結果を取得するまでを書いてみます。して、azureにサインアップ後、APIを有効にしてkeyを取得する必要があります。keyの発行については以下の記事が参考になりました。日本語を英語に翻訳するサンプルkeyの発行が済んだら、次に進みましょう。clientであるhttpoisonを導入します。parserのpoisonも合わせて入れておきましょう。depsに追記します。deps.getを実行しておきます。deps.getAPIを叩くmoduleを用意するAPIを叩くコードを書きます。実際にAPIを叩く部分を、lib/translate_api.exモジュールとして切り出してみました。endendtranslate()にリストを渡せば、日本語→英語へ翻訳した結果が取得できるようにしました。"World"]APIの実行にtokenが必要なので、token取得用の関数を用意しました。end)の部分でpost用のデータを作ってます。...]APIを叩いてレコードの値を翻訳→Viewに渡すarticle_controller.exのindex()を修正します。endDBから取得したレコードの各行に対して、タイトルと本文に対して翻訳を実行し、articleのマップに追加しています。レコード数分リクエストが走っちゃうので、ちゃんと作るなら実装に工夫が必要そうです。実はこれだけではviewで値は利用できません。article_view.exのrender("article.json")部分に、翻訳結果のフィールドを追記します。endこれで、view側に値が渡るようになりました。渡ってきた値を表示してみましょう。APIを利用して文字列の翻訳ができました。