読者です 読者をやめる 読者になる 読者になる

miyasakura’s diary

日記です。

ElectronでWebサイトにマルチアカウントでログインできるアプリを作った

AWSアカウントを7アカウントほど利用していてChromeのアカウント切り替えが面倒になってきたので、こんな感じのものを作った。

f:id:miyasakura:20161205220543p:plain

Electronを触ったことない状態から4時間くらいである程度動作するところまで。

設定画面はなくてサイトのURLなどはHTMLべた書き。

コードとしては https://github.com/saenzramiro/rambox を参考にしつつ作って https://github.com/miyasakura/multi-acc-electron こんな感じのものになった。動作はMacのみで確認。

感想としてはElectronすごい。Chrome AppがDeprecateとなる今となってはデスクトップアプリ作るにはElectronは良い選択肢。

ということでいくつか実装のポイントをメモ。

タブ切り替えの実装

アプリは一つのHTMLで構成。上部にリンクを配置して下にWebViewを配置。

WebViewはHTML上に全て配置しておき、上部のリンクのクリックでclassを付け替えることでdisplay:noneの切り替えている。

タブごとにセッションを切り替える

ひとつのウインドウがBrowserWindowというものになるようなので、それを切り替えるのかなと思ったら、どうやらWebviewにpartitionというものがありWebViewごとにセッションを持たせられる模様。

https://github.com/miyasakura/multi-acc-electron/blob/master/index.html#L13

接頭辞にpersist:を指定することでアプリを閉じてもセッションを保持。

コピー&ペーストなどの動作

デフォルトではctrl+cなどが動作しないので編集メニューを定義することで利用できるように。

https://github.com/miyasakura/multi-acc-electron/blob/master/menu.js#L21

タブ単位でのリロード動作

メニューでctrl+rを定義して、メインで実行されるjs側からはDOM操作はできないので下記のような実装にする。

https://github.com/miyasakura/multi-acc-electron/blob/master/menu.js#L16

https://github.com/miyasakura/multi-acc-electron/blob/master/index.html#L37

アプリアイコンを指定する

使い勝手を考えると実は重要なアプリアイコン。

packagerのオプションで --icon=icon.icns を指定するだけではあるものの、 .icsnってなんだよという。

512x512pxのpng画像を用意して、Macのプレビューで開き、「ファイル」→「書き出す」でオプションキーを押しながらフォーマットを選択すると ICNS で保存できた。

課題

最低限の動作はするので今のところはこれで満足しているものの、一日使ってみてローディングの表示が無いのと右クリックでダウンロードが機能しないっぽいのが課題。

しばらく使ってこの辺を解決できたらQiitaにまとめ記事でも書きたい。