Google翻訳のデスクトップ版クライアントを作成しました。

PC

なかったので作りました。

GitHub - ioridev/GoogleTranslateDesktop: simple Google translation desktop client.
simple Google translation desktop client. Contribute to ioridev/GoogleTranslateDesktop development by creating an account on GitHub.

なぜこんなものを?

エラーメッセージ、英語のチャット、ちょっとした英文などの翻訳で一日になんどかグーグル翻訳先生にはお世話になっているのですが、使うたびにブラウザを開いてグーグル翻訳にアクセスするのはめんどくさいのでデスクトップクライアントがあればなあと思っていました。

ブラウザを開きっぱなしにしておけばいいのですが、Chromeのタブはつねに開きまくりになっていてすぐどこにいるのか探せられないし、Google Chromeの機能にある ショートカットを作成 から ウィンドウで開く を選択すればデスクトップアプリのようになりますがタスクバーにピン留めができない!

そもそもmacOSにはウィンドウで開く、が存在しない、どうして・・・

私はよく使うアプリはショートカットではなく、タスクバーにピン留めやMacならDockへ追加して管理しているのですが、これはWebアプリと相性がよくないんですよね。

とりあえず簡単に作成したのでデスクトップアプリとしてGoogle翻訳が使えるようになりました。タスクバーにピン留めやDockへ追加もできるので、すばやくGoogle翻訳へアクセスできます。

ダウンロード方法

GithubリポジトリのREADMEにダウンロードリンクを記載しています。

GitHub - ioridev/GoogleTranslateDesktop: simple Google translation desktop client.
simple Google translation desktop client. Contribute to ioridev/GoogleTranslateDesktop development by creating an account on GitHub.

上のリンクがWindows用、下のリンクがmacOS用(Darwin)となっています。

技術よりの話 Electron を利用して開発しました。

iosのWKwebviewのように簡単にデスクトップアプリでwebを表示するアプリ作れないかなーと思って「webview クロスプラットフォーム デスクトップ」とかで検索してたどり着いたような気がします。

これなら特に何もわからなくても20分くらいあればクロスプラットフォームの特定URL専ブラ作れるじゃん!と思って手を付けました。

実際20分くらいで作れるものなのですが、色々ハマって金曜のアフターファイブから土曜日がまるまる吹き飛んでしまいました。

公式の electron-quick-start が同ディレクトリ内のhtmlを表示するアプリになっているので、同じようなアプリはすぐに作れます。

GitHub - electron/electron-quick-start: Clone to try a simple Electron app
Clone to try a simple Electron app. Contribute to electron/electron-quick-start development by creating an account on GitHub.

具体的にはコード内の

  mainWindow.loadFile('index.html')

 var URL = "https://dle.work"
 mainWindow.loadURL(URL)

みたいな感じにすれば大丈夫です。ちなみに最新バージョンだとloadUrlではなくloadURLと大文字にする必要あり。

頭の中がiosすぎて読み込んだindex.html内で<webview url>とか最初書いてましたが、普通にmain.jsでloardURLするだけでよかった。

頭を悩ませたError Cannot read property ‘on’ of undefined at Object.

ビルドしたアプリやテストで可動させた際に

Cannot read property ‘on’ of undefined at Object.

と出力されてしまう現象に数時間悩まされました。

同じ現象を報告しているサイトを貼っておきますが、解決しませんでした。

Electron: can't access main.js from another .js file
I have all my html handlers in a second file (b.js). They look like this: window.onload = function () { let btn = window.getElementById('btn'); button.addE
Cannot read property 'on' of undefined in electron javascript
I am trying to run this code but every time I am getting this error message. First I installed npm globally. Then I installed it within my app but still getting
Nuxt.jsからPuppeteerが実行できない TypeError: Cannot read property 'on' of undefined - Qiita
現象単体のCLIから起動すると成功するコードを、NuxtのserverMiddlewareとしてリクエスト経由で起動するとpage.gotoが動かない。実行環境Windows7Node.js…
Electron で "cannot read property 'on' of undefined"と言われたときの対処 - Qiita
参考:require('electron') can be overridden by "electron" npm module症状Electronアプリを作成していて、実行すると"canno…

npm install electon とか npm install electron-prebuilt してるのが問題?

最終的には npm install して package.json の中で start electron を指定したらうまくいきました。

簡単クロスプラットアプリ作成

初めてデスクトップのアプリを作ったのでいい経験になりました。こういうWebフロント系の技術を使っていけばモバイルからデスクトップまで一気に作れそうですね。Javascriptがまったくなので厳しいですが・・・

今回作ったアプリはGithubにて、オープンソースで公開しています。

GitHub - ioridev/GoogleTranslateDesktop: simple Google translation desktop client.
simple Google translation desktop client. Contribute to ioridev/GoogleTranslateDesktop development by creating an account on GitHub.



インターネット回線はNUROがおすすめ!
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

この記事を書いた人
IORI

雑記ブログ、ガジェットやパソコン系の記事が多いです。
Youtubeでも活動しているので是非そちらもチェックしてみてください。

IORIをフォローする
Twitterをフォローして最新ツイートをチェックしよう
毎日更新してます。
PC おすすめ記事 プログラミング/ハック
スポンサーリンク
IORIをフォローする
DLE.work

コメント

タイトルとURLをコピーしました