ElectronでHTMLファイルを埋め込んだウィンドウを開くところまでやってみた．よくわかっていないけれどとりあえず動いている，といような段階なので，気付いたことをメモしておく程度でまとめてみる．主にレンダープロセスの方の話になる．
タイトル
- ウィンドウのタイトルに表示されている文字列は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')); returnfalse; });
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は全部使えないのか...）
ひとまず，こんな感じです！