ElectronでTerminalっぽいウィンドウを実現しよう


どうも、競プロ一切やってないのにJOI予選をギリギリで突破してしまい蟻本とAOJを始めたHinata(ふぁぼん)です。つら。
とうとうこのAdvent Calendarも5日目になりますが技術系の記事が少ないという謎の事態になってます。NPCAの誇るプログラマsがまだ記事を書いていないというだけの話ですが。
さて、Macのターミナルって素晴らしいですよね?ですよね?あの半透明なウィンドウがたまりませんよね?自分の作ったアプリにも取り入れたいですよね?
スクリーンショット 2015-12-21 21.37.29
さて、僕はWebしかいじれません。HTMLとかCSSとかJSくらいしか書けません(書けるとは言っていない)。C++なんて書けません。Swiftなんて知りません。というわけで、Electronを使います。
npm initしてnpm install electron-prebuiltしてElectronのQuick startのコードをコピペしてきてelectron .を実行すると見知ったいつもの画面が出てくるはずです。
スクリーンショット 2015-12-21 20.44.00
とりあえず、CSSをちょっと書いて背景色を透明がかったグレーにしておきます。さらにBrowserWindowを生成するときに渡すオプションでtransparentをtrue、frameをfalseに設定しておきます。
まず、Photonを使ってタイトルバーを作ります。
Photon
スクリーンショット 2015-12-21 22.45.43
その後、信号機(もといウィンドウコントロール)を作ります。
最後にボタンを押したときにウィンドウを閉じる/最小化する/フルスクリーンモードにする処理を書き足せば終了です。
さらっと書いていますが、意外と時間がかかりました。特に信号機(赤黃緑の円形のボタン)の色と位置を再現するのにかなり時間が取られました。
他にもtitleBarStyleをhidden-insetにしてPhotonのバーと信号機を重ねあわせたりしましたが、hidden-insetにすると信号機の位置が下にずれ、タイトルバーを合わせると太くなってしまいました。タイトルバーだけではなく各種ボタンなどを置くにはちょうど良さそうです。

実装例: electron-translucent-window

結論: Photon強い
追記: 乱文失礼しました。


AdventCalendar遅延証明書


駄菓子カップラーメンを食べながら執筆しているしゅがぽよであります。

この AdventCalendar のサイト、実は12/16 23:59 (JST)迄に構築しなければならなかったはずだったのですが手こずって12/17の4時頃になってしまいました。ごめんなさい。

設定ファイル書き換え後再起動せず、NPCAの他のサイトを落としてしまいそちらの原因を総当たりしなかったせいでした。

困ったら なんでもかんでも 再起動