Electron入門メモ 1

ElectronでHTMLファイルを埋め込んだウィンドウを開くところまでやってみた．よくわかっていないけれどとりあえず動いている，といような段階なので，気付いたことをメモしておく程度でまとめてみる．主にRendererプロセスの方の話になる．

https://i.gyazo.com/669055ea3769169486600518c9376050.png

タイトル

ウィンドウのタイトルに表示されている文字列はpackage.jsonのnameで指定したものではなくて，表示中のHTMLのtitleタグで指定したもの．
- サブウィンドウとかでも好きなタイトルを指定できそう

画像表示

画像の読み込みは簡単
Chrome Appでは外部リソースを表示させることの制約が厳しくて大変だった部分もあったけれど，こちらではシンプルだった．
パッケージ内の画像を表示するときは，メインプロセスを管理するJSからの相対パス表現で書く．場所がわからなくなったらwindow.location.hrefをconsole.logで確認すると良い．
外部サイトの画像を表示するときは，<img>のsrcにURIを書く．
JSで画像を操作しようとするとセキュリティの制限がかかってくるかもしれない．今後試す．

リンク先をブラウザで開く

これが結構ハマった．ごく一般的な<a target="_blank">タグをクリックしてもブラウザは開いてくれない．ブラウザが開く代わりにElectronアプリ用のウィンドウパネルみたいなものが新たに開いて表示される．これだとブックマークできなかったりと不便なのでブラウザで開きたい．以下のようなコードを書いて，aタグの挙動定義をopenExternalメソッドで上書きしてしまえば良い．

$(document).on('click', 'a', e => {
    var $a = $(e.target);
    require('shell').openExternal($a.attr('href'));   
    return false;
});

jQueryを使う

上のコードのように，jQueryも使用できる．ただ，scriptタグでの読み込み方法が普段と少し違って．

<script>
    window.jQuery = window.$ = require('jquery.js');
</script>

となる．
requireの引数は，メインプロセスを管理するJSファイルの位置からの相対パス表現で指定する．

Chrome Dev Tools

使用できる
画面を右クリックしてもメニューが表示されないので，Command + Alt + IやCtrl + Shift + Iで開く．
console.logで値を確認したりブレークポイントを仕掛けたりできるので便利
コンソールでchromeやchromiumと打ってみたが，さすがにnot definedだった．（ということは，chrome.*系APIは全部使えないのか...）

ひとまず，こんな感じです！

#daiizメモ

Scrapboxに夢中