Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Electron で作るはじめてのguiアプリ

1,563 views

Published on

づや会vol.4の登壇資料です。 以前コマンドラインで作成したPDFの差分比較ツールを、Electronを使ってGUIアプリにしてみました。

ブログで更に詳しい情報を掲載しています:
http://media-massage.net/works/docs/my_first_electron_app_for_pdf_comparison/

Published in: Software
  • Be the first to comment

Electron で作るはじめてのguiアプリ

  1. 1. P R E S E N T A T I O N : フロントエンドエンジニア 堀祐磨(ほりでー) Electronで作る
 はじめてのGUIアプリ PDF差分比較アプリを作ってみた
  2. 2. Electronで作るはじめてのGUIアプリ づや会 Vol.4 node.js 2
  3. 3. Electronで作るはじめてのGUIアプリ 自己紹介 堀 祐磨 (ほりでー) 1988年生まれ。多摩美術大学を中退後、 デザイナーとしてグラフィックデザイン・ Webデザイン・UIデザインを経験。 2015年、株式会社LIGにフロントエン ドエンジニアとして入社。
  4. 4. Electronで作るはじめてのGUIアプリ DTP制作 4
  5. 5. Electronで作るはじめてのGUIアプリ DTP制作の辛さ IllustratoとかInDesignで 印刷物を作るお仕事 バージョン管理とか無理
 (全部バイナリ) 5
  6. 6. Electronで作るはじめてのGUIアプリ DTP制作の辛さ カタログとかで商品の値段とかを校正後 に間違って変えようものなら(=デグレ)… 数万部の刷り直し! 
 損害賠償!
  7. 7. Electronで作るはじめてのGUIアプリ 目視で確認なんて
 やってられん 7
  8. 8. Electronで作るはじめてのGUIアプリ GraphicsMagickの gm compare コマンド 8
  9. 9. Electronで作るはじめてのGUIアプリ 1枚づつの比較しかできない 印刷用PDFを分解→個別に比較→再結合~の流れをgulp 化 便利なんだけどターミナルから叩くのは直感的ではない GUIアプリにしよう! 9
  10. 10. Electronで作るはじめてのGUIアプリ コマンドライン版
 差分比較ツール 便利なんだけどターミナルから 叩くのは直感的ではない GUIアプリにしよう! Electronでやってみよう! 10
  11. 11. Electronで作るはじめてのGUIアプリ つくってみた 11
  12. 12. Electronで作るはじめてのGUIアプリ GUI版差分比較アプリ ファイルをGUIから指定して、ボタンを押すとコマンドが走る! 12 裏側
  13. 13. Electronで作るはじめてのGUIアプリ gulp以外使わないから node.jsのAPIが分からん! 13
  14. 14. Electronで作るはじめてのGUIアプリ const fs = require('fs'); 14
  15. 15. Electronで作るはじめてのGUIアプリ node.jsの標準API "fs" ファイルシステムまわりの機能 フォルダを作る ファイルを読み取る ファイルの存在確認 ファイルの権限確認 ファイルの読み書きするならこれ 15
  16. 16. Electronで作るはじめてのGUIアプリ const child = require('child_process'); 16
  17. 17. Electronで作るはじめてのGUIアプリ node.jsの標準API "child_process" spawn childProcessインスタンスを返し、そいつのイ ベントを使ってあれこれする exec コマンド実行後にコールバックが走り、それであ れこれする execFile シェルスクリプトファイルにパラメータを渡して 実行し、そいつの実行後にコールバックが走り、 その中であれこれする 上記は全部非同期処理だが、それぞれ同期処理版(~ Sync)のメソッドもある 17 OSのシェルを叩けるので、これさえあれば何でもできる!
  18. 18. Electronで作るはじめてのGUIアプリ electronで child_process使う際は 罠があるので注意
 (後述) 18
  19. 19. Electronで作るはじめてのGUIアプリ 同期処理と非同期処理 多くのAPIが非同期で、たいてい同期 バージョン(~Sync)も用意されている 同期バージョンは実装が考えやすいが、 処理が終了するまで他の処理が全部止 まる 今回のアプリは同期処理中心に実装 19
  20. 20. Electronで作るはじめてのGUIアプリ electronのAPI 20
  21. 21. Electronで作るはじめてのGUIアプリ dialogモジュール 21
  22. 22. Electronで作るはじめてのGUIアプリ dialogモジュール ユーザーとの対話ウィンドウ(OSネイティブ)を出す showMessageBox 通知や選択を求める一般的なダイアログを表示 showOpenDialog ファイルやフォルダの選択を求めるダイアログを表示 showSaveDialog ファイルの保存先を求めるダイアログを表示 返り値がシンプルで使いやすい 22
  23. 23. Electronで作るはじめてのGUIアプリ BrowserWindow
 モジュール ウィンドウ1つに相当するオブジェクト ブラウザ画面のサイズやURLを指定し たり、様々な状態についてのプロパティ を持つ 23
  24. 24. Electronで作るはじめてのGUIアプリ appモジュール アプリケーション全体についての色々なイベントを持っている アプリ全体に影響するメソッド quit/hide/show 環境やOSによっていい感じに内容を変えてくれる便利メソッド getPath('hoge') アプリの現在パス OSのユーザーホームのパス OSのテンポラリフォルダのパス ~などを取得できる 24
  25. 25. Electronで作るはじめてのGUIアプリ メインプロセスと
 レンダラプロセス 25
  26. 26. Electronで作るはじめてのGUIアプリ メインプロセスと
 レンダラプロセス メインプロセス 1個しかないプロセスで、consoleは electron実行時にCLI上に出てくる サーバ的な役割 26
  27. 27. Electronで作るはじめてのGUIアプリ メインプロセスと
 レンダラプロセス レンダラプロセス ウィンドウごとに立ち上がるプロセスで、 consoleはChromiumのデバッグ画面上に出て くる クライアント的な役割 メインプロセスに比べて制約が大きいらしい
 (セキュリティの為) 27
  28. 28. Electronで作るはじめてのGUIアプリ メインプロセスと
 レンダラプロセス 両プロセス間の通信はイベントを使った非同期通 信が基本(ipcMain/ipcRendererモジュール) 同期的な通信機能も用意されているものの、メ インプロセスから結果が帰ってくるまでレンダラ プロセスは応答しなくなる(非推奨) remoteを使うと擬似的にレンダラプロセスから メインプロセス内にあるモジュールも利用可能 28
  29. 29. Electronで作るはじめてのGUIアプリ Electronアプリの
 テンプレート 29
  30. 30. Electronで作るはじめてのGUIアプリ frontplate
 ビルド構成 gulp + webpack + babel テスト環境 gulp + webpack + babel + Karma + mocha + power-assert 30 ※LIGのCTOが作ったテンプレ(OSS)
  31. 31. Electronで作るはじめてのGUIアプリ webpackやKarmaの
 設定でつまづいたところ 31
  32. 32. Electronで作るはじめてのGUIアプリ つまづきポイント webpackがnode.jsの __dirname を置き換えちゃう webpack.confに設定追記で解決 32
  33. 33. Electronで作るはじめてのGUIアプリ つまづきポイント webpackがnodeの標準モジュールを合体 させようとして壊れる! targetをelectronにして解決! 33
  34. 34. Electronで作るはじめてのGUIアプリ つまづきポイント Karmaがrequire()できないって言ってくる karma-electronを導入 ブラウザテスト用にrequireを実装(テスト時のみ) 34
  35. 35. Electronで作るはじめてのGUIアプリ ビューの実装 35
  36. 36. Electronで作るはじめてのGUIアプリ 安心のBootstrap! 36
  37. 37. Electronで作るはじめてのGUIアプリ 安心のjQuery()! 37
  38. 38. Electronで作るはじめてのGUIアプリ アプリのパッケージ化 38
  39. 39. Electronで作るはじめてのGUIアプリ asar atom-shell app packages 39
  40. 40. Electronで作るはじめてのGUIアプリ electron-packager 40
  41. 41. Electronで作るはじめてのGUIアプリ ここに大きな罠が… 41
  42. 42. Electronで作るはじめてのGUIアプリ asarの罠 child_processはほとんど使えない! 42
  43. 43. Electronで作るはじめてのGUIアプリ43 http://electron.atom.io/docs/ v0.36.3/tutorial/application- packaging/
  44. 44. Electronで作るはじめてのGUIアプリ asarの罠 任意のコマンド実行できちゃうじゃん! そんな危険なもの配れないよ! でもchild_process.execFile()なら 使っていいよ! 44
  45. 45. Electronで作るはじめてのGUIアプリ asarの罠:execFileなら許す 何が違う? 実行するシェルスクリプトが事前に必要 そのシェルスクリプトは、asarのビルド時に unpackオプションを指定しておくこと 同期版のchild_process.execFileSync()は 使えない 45
  46. 46. Electronで作るはじめてのGUIアプリ 非同期処理が面倒臭いから execSync()で作ってたの に~!!! 46
  47. 47. Electronで作るはじめてのGUIアプリ そういう訳で、 このデモアプリはCLIから しか起動できません orz 47 (いつか非同期化する…絶対…)
  48. 48. Electronで作るはじめてのGUIアプリ 感想 48
  49. 49. Electronで作るはじめてのGUIアプリ 感想 開発環境と違う挙動するasarは曲者 同期的なメソッドを使うと、作りやすいけどやっぱり微妙 非同期処理怖い(特にループ) 自分の人生じゃ当分来ないだろうと思ったけど、案外早 く来た… GUIアプリ初挑戦したけど面倒臭い オプションを変更するUIを置くだけでも面倒臭い… 49
  50. 50. Electronで作るはじめてのGUIアプリ 感想 シェル叩く機能を作るのであれば、 nodejs側のロジックを作りこむより も、シェルスクリプトとして作り込ん だ方が作りやすい? マルチプラットフォーム対応するのは 難しそうだけど、OSXだけならこっ ちの方が楽かも…? 50
  51. 51. Electronで作るはじめてのGUIアプリ 今後の展開 非同期化してパッケージ化できるように する graphicsmagickなどのバイナリもパッ ケージ内にまとめ、インストール不要に したい GUIから設定できるオプションを増やす 51
  52. 52. Electronで作るはじめてのGUIアプリ 最後に宣伝 52
  53. 53. http://media-massage.net/ ブログもあるよ! /
  54. 54. Thank you! http://media-massage.net/ デザインとWeb開発とその他諸々。

×