$30 off During Our Annual Pro Sale. View Details »

Electronで製造ラインアプリ開発/Business application by Electron

Electronで製造ラインアプリ開発/Business application by Electron

Lightning Talks at NodeFest 2016 first day

MURAKAMI Masahiko

November 12, 2016
Tweet

More Decks by MURAKAMI Masahiko

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. Electron
    を採用した理由
    5

    View Slide

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

    View Slide

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

    View Slide

  8. そして
    を使いたかった!
    8

    View Slide

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

    View Slide

  10. シリアル通信
    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

    View Slide

  11. 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

    View Slide

  12. ネイティブモジュー
    ルの利用
    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

    View Slide

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

    View Slide

  14. サブプロセス起動での失敗
    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

    View Slide

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

    View Slide

  16. 自動アップデー

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide