Electronデスクトップアプリ開発入門（5）
Electronアプリのデバッグと、パッケージ化
本格的にElectronアプリ開発を進める方に向けて、そのデバッグ方法と、製品リリースのためのパッケージ作成の方法について説明する。
前回まではデモアプリ「Electron API Demos」を通じて、Electronの機能と開発方法を紹介してきた。連載をここまで読んできた方は、「ある程度理解できたので、Electronアプリ開発を始めた」という人もいることだろう。実際にアプリ開発を進めていくうえでは、不具合を解消するために、デバッグが必要になることが多い。そこで今回は最終回として「Electronアプリのデバッグ方法」を簡単に紹介し、製品としてリリースするための「パッケージ作成」について解説する。
デバッグ
Electron専用の開発＆デバッグツールとしては、Devtronがお勧めである。本稿ではこれを使ったデバッグ方法を紹介する（※もちろんElectronは、Node.jsアプリをデバッグするときと同様に、Visual Studio Codeなどのデバッグ機能を使って、ブレークポイントで停止したり、1行ごとステップ実行したりして、コードをデバッグすることも可能である。それに合わせてDevToolsやDevtronを活用すれば、より高度で効率的なデバッグが可能になる）。
まずはリスト29のコマンドを実行して、DevtronをインストールしてElectronアプリを起動してほしい。
|
npm install --save-dev devtron
electron .
|
アプリが起動したら、アプリケーションメニュー（＝メニューバー）の［View］－［Toggle Developer Tools］をクリックして（もしくはmacOSならCommand＋Option＋iキー、WindowsやLinuxならCtrl＋Shift＋iキーを押す）、開発者ツール（中身はChromeのDevToolsと同じ）を表示する。そのDevToolsで、［Console］パネルを開いて、リスト30に示す「Devtronをインストールするコマンド」を実行する。
|
require('devtron').install()
|
Devtronのインストールが完了すると、DevToolsに［Devtron］パネルが追加されて、実行中のElectronアプリをデバッグできるようになる（図3）。
図3に表示されているように、左側にある［Require Graph］タブでは、アプリで読み込まれているモジュールとバージョンが表示される。階層表示されているので、依存関係を把握できる。
［Event Listeners］タブでは、アプリに登録されているイベントとそのコードが表示される（図4）。
［IPC］タブでは、アプリ内で発生したIPC通信がモニターできる（図5）。
［Lint］タブでは、アプリに未実装で実装するべきコードをアドバイスしてくれる（図6）。
［Accessibility］タブでは、アクセシビリティとして実装するべき項目をチェックしてくれる（図7）。［Status］列がFailなのが実装するべき項目だ。
ここでは簡単に機能概要を紹介したが、実際に手を動かしながら機能を試してみてほしい。
パッケージの作成
作成したアプリは実行ファイルの形式で配布できる。パッケージを作成するモジュールはいくつかあるが、ここではelectron-packagerを使った手順を紹介する。electron-packagerを使うと、実行形式のファイル（Windowsは＜アプリ名＞.exeファイル。macOSは＜アプリ名＞.appファイル、Linuxは拡張子のない＜アプリ名＞ファイル）を作成できる。
まずは、electron-packagerをインストールする（リスト31）。
|
npm install -g electron-packager
|
インストールが完了したら、アプリのディレクトリでelectron-packagerを実行する（リスト32）。
|
electron-packager . --platform=darwin,win32,linux --arch=ia32,x64,armv7l --electron-version=1.4.14
|
コマンドライン引数として順に、パッケージを作成するソースの場所、ターゲットプラットフォーム、ターケットCPUアーキテクチャ、Electronのバージョンを指定している。
electron-packagerコマンドを実行すると、パッケージが作成される。--platformオプションには、対象とするプラットフォームを指定している。darwinは「macOS」の意味である。macOSでWindows向け（win32）のパッケージを作成するときは、事前にWine（＝Windows用アプリを動かすための互換環境）をインストールしておく必要がある（※インストール方法の説明は割愛する）。
作成したアプリは、実行ファイルを単に配布するだけでなく、申請を通過することによりMac App Store（MAS）とWindows Storeでも配布できる。申請用のパッケージを作成する手順の説明はここでは省略するが、下記リンク先のElectron公式のドキュメントを参考にしてほしい。
最後に
Web技術だけでデスクトップもカバーできるようになるというのは、長年の夢であったが、ようやく実現できるようになったといえる。本稿では機能の一部しか紹介できていないが、Web技術は日々進歩していて、デスクトップ機能をカバーしつつある。ElectronのベースとなっているNode.jsやChromiumはかなり速いスピードで新しい技術を取り入れており、Electronも同時に速いスピードで進化している。将来、Electronが主流になるかは分からないが、学んでおいて損がないことは確実なので、これをきっかけに触れる機会を持っていただけたら幸いである。
1. Electronとは？ アーキテクチャ／API／インストール方法／初期設定
Windows／macOS／Linuxで実行できるデスクトップアプリをWeb技術で作ろう！ Electronの概要から開発を始めて動かすところまでを解説する。
2. Electron APIデモから学ぶ実装テクニック ― ウィンドウ管理とメニュー
Electron API Demosで紹介されている、Electronアプリの実装テクニックを紹介。今回はウィンドウ管理とメニューの実装方法を基礎から説明する。
3. Electron APIデモから学ぶ実装テクニック ― ネイティブUIと通信
Electron API Demosで紹介されている、Electronアプリの実装テクニックを紹介。今回はネイティブUIと通信の実装方法を基礎から説明する。
4. Electron APIデモから学ぶ実装テクニック ― システムとメディア
Electron API Demosで紹介されている、Electronアプリの実装テクニックを紹介。今回はシステムとメディアの実装方法を基礎から説明する。
5. 【現在、表示中】≫ Electronアプリのデバッグと、パッケージ化
本格的にElectronアプリ開発を進める方に向けて、そのデバッグ方法と、製品リリースのためのパッケージ作成の方法について説明する。
