Electronデスクトップアプリ開発入門(5)

Electronデスクトップアプリ開発入門(5)

Electronアプリのデバッグと、パッケージ化

2017年2月28日

本格的にElectronアプリ開発を進める方に向けて、そのデバッグ方法と、製品リリースのためのパッケージ作成の方法について説明する。

尾崎 義尚
  • このエントリーをはてなブックマークに追加

 前回まではデモアプリ「Electron API Demos」を通じて、Electronの機能と開発方法を紹介してきた。連載をここまで読んできた方は、「ある程度理解できたので、Electronアプリ開発を始めた」という人もいることだろう。実際にアプリ開発を進めていくうえでは、不具合を解消するために、デバッグが必要になることが多い。そこで今回は最終回として「Electronアプリのデバッグ方法」を簡単に紹介し、製品としてリリースするための「パッケージ作成」について解説する。

デバッグ

 Electron専用の開発&デバッグツールとしては、Devtronがお勧めである。本稿ではこれを使ったデバッグ方法を紹介する(もちろんElectronは、Node.jsアプリをデバッグするときと同様に、Visual Studio Codeなどのデバッグ機能を使って、ブレークポイントで停止したり、1行ごとステップ実行したりして、コードをデバッグすることも可能である。それに合わせてDevToolsやDevtronを活用すれば、より高度で効率的なデバッグが可能になる)。

 まずはリスト29のコマンドを実行して、DevtronをインストールしてElectronアプリを起動してほしい。

Bash
npm install --save-dev devtron
electron .
リスト29 npmコマンドでdevtronをインストールして、electronコマンドでアプリを起動する

 アプリが起動したら、アプリケーションメニュー(=メニューバー)の[View]-[Toggle Developer Tools]をクリックして(もしくはmacOSならCommandOptioniキー、WindowsやLinuxならCtrlShiftiキーを押す)、開発者ツール(中身はChromeのDevToolsと同じ)を表示する。そのDevToolsで、[Console]パネルを開いて、リスト30に示す「Devtronをインストールするコマンド」を実行する。

Bash
require('devtron').install()
リスト30 Devtronをインストールするコマンド

 Devtronのインストールが完了すると、DevToolsに[Devtron]パネルが追加されて、実行中のElectronアプリをデバッグできるようになる(図3)。

図3 [Devtron]パネルの[Require Graph]タブ

 図3に表示されているように、左側にある[Require Graph]タブでは、アプリで読み込まれているモジュールとバージョンが表示される。階層表示されているので、依存関係を把握できる。

 [Event Listeners]タブでは、アプリに登録されているイベントとそのコードが表示される(図4)。

図4 [Devtron]パネルの[Event Listeners]タブ

 [IPC]タブでは、アプリ内で発生したIPC通信がモニターできる(図5)。

図5 [Devtron]パネルの[IPC]タブ

 [Lint]タブでは、アプリに未実装で実装するべきコードをアドバイスしてくれる(図6)。

図6 [Devtron]パネルの[Lint]タブ

 [Accessibility]タブでは、アクセシビリティとして実装するべき項目をチェックしてくれる(図7)。[Status]列がFailなのが実装するべき項目だ。

図7 [Devtron]パネルの[Accessibility]タブ

 ここでは簡単に機能概要を紹介したが、実際に手を動かしながら機能を試してみてほしい。

パッケージの作成

 作成したアプリは実行ファイルの形式で配布できる。パッケージを作成するモジュールはいくつかあるが、ここではelectron-packagerを使った手順を紹介する。electron-packagerを使うと、実行形式のファイル(Windowsは<アプリ名>.exeファイル。macOSは<アプリ名>.appファイル、Linuxは拡張子のない<アプリ名>ファイル)を作成できる。

 まずは、electron-packagerをインストールする(リスト31)。

Bash
npm install -g electron-packager
リスト31 electron-packagerのインストール

 インストールが完了したら、アプリのディレクトリでelectron-packagerを実行する(リスト32)。

Bash
electron-packager . --platform=darwin,win32,linux --arch=ia32,x64,armv7l --electron-version=1.4.14
リスト32 electron-packagerの実行

コマンドライン引数として順に、パッケージを作成するソースの場所、ターゲットプラットフォーム、ターケット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アプリ開発を進める方に向けて、そのデバッグ方法と、製品リリースのためのパッケージ作成の方法について説明する。

イベント情報(メディアスポンサーです)

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社