づや会vol.4の登壇資料です。 以前コマンドラインで作成したPDFの差分比較ツールを、Electronを使ってGUIアプリにしてみました。 ブログで更に詳しい情報を掲載しています: http://media-massage.net/works/docs/my_first_electron_app_for_pdf_comparison/

1. P R E S E N T A T I O N :
フロントエンドエンジニア 堀祐磨(ほりでー)
Electronで作る
はじめてのGUIアプリ
PDF差分比較アプリを作ってみた

2. Electronで作るはじめてのGUIアプリ
づや会 Vol.4 node.js
2

3. Electronで作るはじめてのGUIアプリ
自己紹介
堀 祐磨 (ほりでー)
1988年生まれ。多摩美術大学を中退後、
デザイナーとしてグラフィックデザイン・
Webデザイン・UIデザインを経験。
2015年、株式会社LIGにフロントエン
ドエンジニアとして入社。

4. Electronで作るはじめてのGUIアプリ
DTP制作
4

5. Electronで作るはじめてのGUIアプリ
DTP制作の辛さ
IllustratoとかInDesignで
印刷物を作るお仕事
バージョン管理とか無理
(全部バイナリ)
5

6. Electronで作るはじめてのGUIアプリ
DTP制作の辛さ
カタログとかで商品の値段とかを校正後
に間違って変えようものなら(=デグレ)…
数万部の刷り直し!
損害賠償!

7. Electronで作るはじめてのGUIアプリ
目視で確認なんて
やってられん
7

8. Electronで作るはじめてのGUIアプリ
GraphicsMagickの
gm compare コマンド
8

9. Electronで作るはじめてのGUIアプリ
1枚づつの比較しかできない
印刷用PDFを分解→個別に比較→再結合～の流れをgulp
化
便利なんだけどターミナルから叩くのは直感的ではない
GUIアプリにしよう!
9

10. Electronで作るはじめてのGUIアプリ
コマンドライン版
差分比較ツール
便利なんだけどターミナルから
叩くのは直感的ではない
GUIアプリにしよう!
Electronでやってみよう!
10

11. Electronで作るはじめてのGUIアプリ
つくってみた
11

12. Electronで作るはじめてのGUIアプリ
GUI版差分比較アプリ
ファイルをGUIから指定して、ボタンを押すとコマンドが走る!
12
裏側

13. Electronで作るはじめてのGUIアプリ
gulp以外使わないから
node.jsのAPIが分からん!
13

14. Electronで作るはじめてのGUIアプリ
const fs = require('fs');
14

15. Electronで作るはじめてのGUIアプリ
node.jsの標準API "fs"
ファイルシステムまわりの機能
フォルダを作る
ファイルを読み取る
ファイルの存在確認
ファイルの権限確認
ファイルの読み書きするならこれ
15

16. Electronで作るはじめてのGUIアプリ
const child =
require('child_process');
16

17. Electronで作るはじめてのGUIアプリ
node.jsの標準API "child_process"
spawn
childProcessインスタンスを返し、そいつのイ
ベントを使ってあれこれする
exec
コマンド実行後にコールバックが走り、それであ
れこれする
execFile
シェルスクリプトファイルにパラメータを渡して
実行し、そいつの実行後にコールバックが走り、
その中であれこれする
上記は全部非同期処理だが、それぞれ同期処理版(～
Sync)のメソッドもある
17
OSのシェルを叩けるので、これさえあれば何でもできる!

18. Electronで作るはじめてのGUIアプリ
electronで
child_process使う際は
罠があるので注意
(後述)
18

19. Electronで作るはじめてのGUIアプリ
同期処理と非同期処理
多くのAPIが非同期で、たいてい同期
バージョン(～Sync)も用意されている
同期バージョンは実装が考えやすいが、
処理が終了するまで他の処理が全部止
まる
今回のアプリは同期処理中心に実装
19

20. Electronで作るはじめてのGUIアプリ
electronのAPI
20

21. Electronで作るはじめてのGUIアプリ
dialogモジュール
21

22. Electronで作るはじめてのGUIアプリ
dialogモジュール
ユーザーとの対話ウィンドウ(OSネイティブ)を出す
showMessageBox
通知や選択を求める一般的なダイアログを表示
showOpenDialog
ファイルやフォルダの選択を求めるダイアログを表示
showSaveDialog
ファイルの保存先を求めるダイアログを表示
返り値がシンプルで使いやすい
22

23. Electronで作るはじめてのGUIアプリ
BrowserWindow
モジュール
ウィンドウ1つに相当するオブジェクト
ブラウザ画面のサイズやURLを指定し
たり、様々な状態についてのプロパティ
を持つ
23

24. Electronで作るはじめてのGUIアプリ
appモジュール
アプリケーション全体についての色々なイベントを持っている
アプリ全体に影響するメソッド
quit／hide／show
環境やOSによっていい感じに内容を変えてくれる便利メソッド
getPath('hoge')
アプリの現在パス
OSのユーザーホームのパス
OSのテンポラリフォルダのパス
～などを取得できる
24

25. Electronで作るはじめてのGUIアプリ
メインプロセスと
レンダラプロセス
25

26. Electronで作るはじめてのGUIアプリ
メインプロセスと
レンダラプロセス
メインプロセス
1個しかないプロセスで、consoleは
electron実行時にCLI上に出てくる
サーバ的な役割
26

27. Electronで作るはじめてのGUIアプリ
メインプロセスと
レンダラプロセス
レンダラプロセス
ウィンドウごとに立ち上がるプロセスで、
consoleはChromiumのデバッグ画面上に出て
くる
クライアント的な役割
メインプロセスに比べて制約が大きいらしい
(セキュリティの為)
27

28. Electronで作るはじめてのGUIアプリ
メインプロセスと
レンダラプロセス
両プロセス間の通信はイベントを使った非同期通
信が基本(ipcMain/ipcRendererモジュール)
同期的な通信機能も用意されているものの、メ
インプロセスから結果が帰ってくるまでレンダラ
プロセスは応答しなくなる(非推奨)
remoteを使うと擬似的にレンダラプロセスから
メインプロセス内にあるモジュールも利用可能
28

29. Electronで作るはじめてのGUIアプリ
Electronアプリの
テンプレート
29

30. Electronで作るはじめてのGUIアプリ
frontplate
ビルド構成
gulp + webpack + babel
テスト環境
gulp + webpack + babel + Karma
+ mocha + power-assert
30
※LIGのCTOが作ったテンプレ(OSS)

31. Electronで作るはじめてのGUIアプリ
webpackやKarmaの
設定でつまづいたところ
31

32. Electronで作るはじめてのGUIアプリ
つまづきポイント
webpackがnode.jsの __dirname を置き換えちゃう
webpack.confに設定追記で解決
32

33. Electronで作るはじめてのGUIアプリ
つまづきポイント
webpackがnodeの標準モジュールを合体
させようとして壊れる!
targetをelectronにして解決!
33

34. Electronで作るはじめてのGUIアプリ
つまづきポイント
Karmaがrequire()できないって言ってくる
karma-electronを導入
ブラウザテスト用にrequireを実装(テスト時のみ)
34

35. Electronで作るはじめてのGUIアプリ
ビューの実装
35

36. Electronで作るはじめてのGUIアプリ
安心のBootstrap!
36

37. Electronで作るはじめてのGUIアプリ
安心のjQuery()!
37

38. Electronで作るはじめてのGUIアプリ
アプリのパッケージ化
38

39. Electronで作るはじめてのGUIアプリ
asar
atom-shell app
packages
39

40. Electronで作るはじめてのGUIアプリ
electron-packager
40

41. Electronで作るはじめてのGUIアプリ
ここに大きな罠が…
41

42. Electronで作るはじめてのGUIアプリ
asarの罠
child_processはほとんど使えない!
42

43. Electronで作るはじめてのGUIアプリ43
http://electron.atom.io/docs/
v0.36.3/tutorial/application-
packaging/

44. Electronで作るはじめてのGUIアプリ
asarの罠
任意のコマンド実行できちゃうじゃん!
そんな危険なもの配れないよ!
でもchild_process.execFile()なら
使っていいよ!
44

45. Electronで作るはじめてのGUIアプリ
asarの罠：execFileなら許す
何が違う?
実行するシェルスクリプトが事前に必要
そのシェルスクリプトは、asarのビルド時に
unpackオプションを指定しておくこと
同期版のchild_process.execFileSync()は
使えない
45

46. Electronで作るはじめてのGUIアプリ
非同期処理が面倒臭いから
execSync()で作ってたの
に～!!!
46

47. Electronで作るはじめてのGUIアプリ
そういう訳で、
このデモアプリはCLIから
しか起動できません orz
47
(いつか非同期化する…絶対…)

48. Electronで作るはじめてのGUIアプリ
感想
48

49. Electronで作るはじめてのGUIアプリ
感想
開発環境と違う挙動するasarは曲者
同期的なメソッドを使うと、作りやすいけどやっぱり微妙
非同期処理怖い(特にループ)
自分の人生じゃ当分来ないだろうと思ったけど、案外早
く来た…
GUIアプリ初挑戦したけど面倒臭い
オプションを変更するUIを置くだけでも面倒臭い…
49

50. Electronで作るはじめてのGUIアプリ
感想
シェル叩く機能を作るのであれば、
nodejs側のロジックを作りこむより
も、シェルスクリプトとして作り込ん
だ方が作りやすい?
マルチプラットフォーム対応するのは
難しそうだけど、OSXだけならこっ
ちの方が楽かも…?
50

51. Electronで作るはじめてのGUIアプリ
今後の展開
非同期化してパッケージ化できるように
する
graphicsmagickなどのバイナリもパッ
ケージ内にまとめ、インストール不要に
したい
GUIから設定できるオプションを増やす
51

52. Electronで作るはじめてのGUIアプリ
最後に宣伝
52

55. http://media-massage.net/
ブログもあるよ! /

56. Thank you!
http://media-massage.net/
デザインとWeb開発とその他諸々。