ElectronでWebサイトにマルチアカウントでログインできるアプリを作った
AWSアカウントを7アカウントほど利用していてChromeのアカウント切り替えが面倒になってきたので、こんな感じのものを作った。
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にまとめ記事でも書きたい。
