前書き

Microsoft社の翻訳APIを使いたかったので、和英辞書を作りました！

翻訳APIの使い方についてはMicrosoft Translator APIを使ってみるを参考にしました。

コードもほぼ拝借しましたm(_ _)m

自己紹介

Twitter @konojunya

じゅんじゅんというニックネームで、関西を拠点に活動しているフロントエンドエンジニアです。

HAL大阪の2回生です👍 (2016.5.24現在)

よくstart up系イベントに行くので、大阪らへんの方は会いましょう！

では、早速。

準備

まずtranslateAPIを使うために、client keyとsecret keyを取得しておきます。

取得の方法についてはこちらをご覧ください！

次に、milkcocoaにアプリの登録をします。

milkcocoaで登録して、app IDをメモしておいてください！

開発

まずapp.jsにtranslate APIのkeyを登録しておきます。

必要に応じて、環境変数にしてください。

app.js

function getAccessToken(callback) {
  var body = '';
  var req = https.request({
    host: 'datamarket.accesscontrol.windows.net',
    path: '/v2/OAuth2-13',
    method: 'POST'
    }, function (res) {
      res.setEncoding('utf8');
      res.on('data', function (chunk) {
        body += chunk;
      }).on('end', function () {
        var resData = JSON.parse(body);
        callback(resData.access_token);
      });
    }).on('error', function (err) {
      console.log(err);
    });
  var data = {
    'client_id': 'クライアントキー',
    'client_secret': 'シークレットキー',
    'scope': 'http://api.microsofttranslator.com',
    'grant_type': 'client_credentials'
  };
  req.write(qs.stringify(data));
  req.end();
}

次にpublic/js/main.jsにmilkcocoaのapp idを書いておきます。

main.js

var milkcocoa = new MilkCocoa('milkcocoaのappID');

これで準備は整いました。

すでに動く状態になっています。

使い方

上のテキストエリアに日本語を入れて、翻訳ボタンを押すとajaxで/translateへ日本語を送信。その後、/translateから返ってきた値を、milkcocoaのデータストアに保存。

翻訳履歴にもレンダリングされる仕様になっています！

基本的に画面遷移するのが今までwebサービスを作ってきた中で多かったので

初めて、Ajaxで通信している間の待ち時間を待ってる感出しました笑

アイコンも手作りですd(￣￣)

機能

昨日は大きく分けて3つにしました。

1.翻訳
2.ggれカス
3.履歴の削除

1は、まぁ翻訳アプリなのだから当たり前ですね。説明不要。

2、ggれカスとは何なのか。

ggれカスは、日本語→英単語の翻訳はしたものの、その英単語でちょっと調べたいことが！

英単語の他の意味も知りたいからググるか。。

みたいな時に役に立ちます！

履歴の左側にある、虫眼鏡のようなボタンを押すと、その英単語を英単語をもとにgoogleへ飛びます。

と言ってもこれは、少しでも便利にしようとつけただけなので、ただgoogleの検索するときのURLに、英単語をパラメータで持して、window.openで飛んでいるだけです。

ここで一つ、新しいことに気がつきました。

HTMLのmeta要素のapple仕様にするやつありますよね？

<meta name="apple-mobile-web-app-capable" content="yes">

これです。

これでwebアプリ化している時の注意点として、<a>などでリンクを踏むとブラウザが起動してしまうということです。

しかし、window.openで開いた場合は、そのwebアプリ内で完結してくれます！

これは少し便利だなと思いました！！

3の削除機能ですが、これも履歴にいつまでもあっても仕方ないものは消す。ただそれだけです。。

コードは、僕のgithubにありますので、よければ使ってみてください！