ChromeExtentionsで英-日翻訳アプリを作ってみたら40分で出来上がった・・・。

ChromeExtentionsで何か作りたいなーとか思ってあれこれ考えるもいいアイデアが浮かばずなんだかなーと思っていた所、仕事でWeb上の英語ドキュメント読む時わからん単語とかを翻訳サイトで翻訳したりするのだけどそれがすごく面倒だったのでそうだChromeExtentionsだと思ってよっしゃいっちょやったると思って着手したら40分で完成した。

1.アイコン作る

何はなくともアイコンだ。という事でアイコン生成できるサイトでスッと作成。 CSS Button Designerという所で作成。ここではCSSでのボタンなので出来上がったものをPrintScreen+ペイントのコンボで取り出し。

2.画面を作る

画面はpopupを利用します。そこに画面を出します。
内容は簡単です。原文と訳文、翻訳の選択、翻訳実行ボタンを配置して完成。 

 

3.翻訳機能を実装する 

翻訳機能はGoogle Ajax Language APIを利用しました。
機能はすべてjavascriptで実装する訳ですが、
Google Ajax Language APIを使ったお陰で翻訳処理のメソッドは15行で完了。
英日とかの判定、翻訳、結果表示全部で15行。
APIすごい。



----------------------------------------------
以上で完成。
公式にリリースするようなものでもないのでここで公開します。

こちらからTranslator.zipをダウンロード
zipを解凍するとディレクトリが出来ます。これがGoogleExtentionsのアプリ本体です。
Chromeのメニューから拡張機能を開きます。
「パッケージ化されていない拡張機能を読み込みます」を選択。
そして解凍してでけたディレクトリを選択するとインストール完了です。