Electron で製造ラインアプリ 開発 東京Node 学園祭2016 2016-11-12 村上 雅彦 @fossamagna

村上 雅彦 a.k.a @fossamagna 株式会社 永和システムマネジメント 所属 2

今日の話 Electron ベー スの製造ラインアプリ ( 業務アプリ) を作ったときの話 なぜ Electron なのか Electron でよかったこと Electron で大変だったこと 3

製造ラインアプリ ゴルフクラブ組み立て工場の組み立てライン上で作業 者が利用するアプリ。 組み立ての指示や生産実績の入 力などを行う。 クライアント : Electron 今日はこっち サー バ : Node.js 4

Electron を採用した理由 5

Web 開発のスキルで開発できる 豊富な既存のモジュー ルが利用できる HTML, CSS, JavaScript なので取っ掛かりやすい 情報が多い 公式ドキュメントがしっかりしている Electron を取り上げるサイトも多い 参考になる実装(Atom とか) が多い 6

ネイティブ寄りの技術が必要 シリアルケー ブル(RS-232C) で接続されたパトライ トに信号を送って制御したい ラベルプリンタからラベルを印刷したい 7

そして を使いたかった！ 8

ソフトウェアの構成 Electron v1.4.4 ( 初期リリー スは v0.36) Mithril v0.2.5 Bootstrap v3.3.7 9

シリアル通信 n o d e ­ s e r i a l p o r t で簡単にシリアル通信ができた。 実 装はJS のみで可能。 ネイティブモジュー ルなのでリビルドして Electron で利用した。 リビルドには e l e c t r o n ­ r e b u i l d を利用した。 $ n p m i n s t a l l ­ ­ s a v e ­ d e v e l e c t r o n ­ r e b u i l d $ . / n o d e _ m o d u l e s / . b i n / e l e c t r o n ­ r e b u i l d 10

node-serialport の問題 開発開始当時(2015/11) は n o d e ­ s e r i a l p o r t が Electron に対応していなかったのでリビルドした モジュー ルを読み込めない問題があった。 ビルド結果の出力先のディレクトリディレクト リ名を期待する名前に変更して対応。 https://github.com/electron/electron- rebuild/issues/33 現在(v2.1.2 以降) は対応済み。 n o d e ­ p r e ­ g y p (v0.6.25 以降) を利用しているので大丈夫。 11

ネイティブモジュー ルの利用 ABI に違いがなければリビルドなしで使える場合も あるけど、 基本はリビルドするのがオススメ。 e l e c t r o n ­ r e b u i l d を利用するのがもっとも簡単な方 法 ネイティブモジュー ルが Electron 未対応の場合、 n o d e ­ p r e ­ g y p に依存している場合は、 e l e c t r o n ­ r e b u i l d v1.1.0 以降なら ­ ­ p r e ­ g y p ­ f i x オ プションで対応可能な場合もある。 12

ラベルプリンタの印刷 プリンタメー カー からSDK( 実際はCOM オー トメー ションサー バ) が提供されている 動作要件はWindows のみ WSH(Windows Script Host) をサブプロセスで起動 して対応 13

サブプロセス起動での失敗 a s a r にパッケー ジングした場合にWSH 側で引数で 指定したスクリプトファイルが読み込めない。 サブプロセスに指定したパスは a s a r アー カイブ内 にあるので、 実際にファイルシステム上はファイ ルとして存在しないのでエラー になる。 実行時にファイルシステム上にサブプロセスが読 み込むファイル群のコピー を作成して対応。 単一ファイルなら c h i l d _ p r o c e s s . e x e c F i l e が使え る。 14

UI SPA フレー ムワー ク(Mithril) を使ったので、 通常の Web でのSPA 開発と同じ。Electron を意識する部 分は少ない。 メインプロセスとの通信などは Electron 特有。 ブラウザと違って戻るボタンやアドレスバー が無 いのでさらに考慮しないといけない点が減った。 当たり前だけどElectron 以外( のブラウザ実装) のみ 考慮すればいい。 15

自動アップデー ト アプリをインストー ルする端末数が多いので自動 アップデー トがないとバー ジョンアップ時に大変 a u t o U p d a t e r モジュー ルを利用すると簡単に実装で きた Atom のその部分のソー スがすごく参考になった 16

テスト サー バサイドはmocha でテスト。 クライアントアプリもElectron に依存しない部分 はmocha でテスト。 Electron のAPI に依存する部分はSpectron でテス ト。 17

まとめ JavaScript 触り始めて1 年弱くらいで開発を開始し たが、 大きくはまらずに作れた。 情報はたくさんある 公式ドキュメント。 Electron ベー スのOSS も参考になる。 デスクトップアプリの開発を始めるなら Electron で始めるてみるといいと思う。 18

Electron でデスクトップアプ リの開発を始めてみよう 19