最小限の単語翻訳アプリが欲しくなったので３時間で作った
最近、業務での実装中、変数名を考える時にいちいちタブで画面を切り替えて翻訳や英和辞典サービスで検索したりするのが面倒臭い。
画面の右下にテキストボックスが有って、そこに和名を投げたら英名が返ってくる、みたいなのが欲しい。（一応目検してそれっぽかったら採用）
おそらく似た感じのフリーソフトとかも有るのだろうけど、
入力→ボタン押す→変換された何かを取得 という仕組みは辞書以外にも何かと応用できるかもしれないので、自分で作って持っておくことにした。
という訳で、退勤して夕飯を食べてから早速取り掛かってみた。
着手前になんとなく考えていた案ではこんな感じ。
今回使用するフレームワークはElectron。
これはHTML/CSS/JavaScriptの知識があればアプリを作ることができる優れもので、一番使い慣れている。
ということで、自分用のgitに入れてあるElectronサンプルを引っ張ってきて、設定をいじる。
プロジェクト直下で「npm start」を実行すれば、「Hello World」のテキストのみが書かれたウインドウが表示される状態になっている。
まずは、脳死でBootstrapを適用。部品がちょっとだけいい感じになるのとマージン指定をclassで済ませられるから好き。
htmlの枠組みだけ作っていく。
ちっちゃいからbodyもこれだけ。
次に、JavaScriptの実装。
ここにきてAPIの選定を始めたが、
GoogleTranslationAPIを使うつもりでいる→適用目前に有料であることに気付く→どうしよう…→GAS内で使える翻訳ライブラリが無料であることを知る
という要らん手間を踏んでしまった。思いつきで進めるから。
という訳で先にGASを実装。
こちらの記事を参考にさせていただいた。
本当に３分くらいで出来たかもしれない。凄すぎる。
デプロイしてURLを発行し、再びJavaScriptの実装。
50行未満で済んだため、htmlファイル内に記述してしまった。
・セレクタのスペルミス
・return忘れ
等々おっちょこちょいあるあるの不具合をブラウザの開発者モードでデバッグしつつ解消し…
で…できた！
項目の配置やデザインにも拘りたいところだが、最初に書いた要件は最低限満たせたのでタイマーストップです。
20:30くらいから作って23:15辺りに終わったので約3時間としておこう。
一旦パッケージングし、明日から業務でガンガン使いつつ改良していこうと思う。
変数名検索用と割り切って、単語がスペース区切りで来た場合、キャメルケースにしてしまうのも良いかもしれない。
記事を編集していて気付いたが、「クリックしてクリップボードにコピー」を実装し忘れた。
他の自作アプリで書いたソースが手近にあるので、5分もあれば追加可能だろう。