前書き
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を登録しておきます。
必要に応じて、環境変数にしてください。
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を書いておきます。
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にありますので、よければ使ってみてください！