[Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #5 ビルド編

Congratulations!!ここまでお疲れ様でした。今回で最後です。前回までで「文章を話すデスクトップアプリ」の全機能は完成しました。残りはアプリを配布するために重要なトピック、そう、ビルドです。それでは、はじめましょう！

前回のおさらい

• 英語は毎日コツコツ勉強するしかない
• Electronのメニューバーは簡単にカスタマイズできる
• ElectronはNodeJSと同じように環境を設定できる

1. Electronのビルドは必要？

今までElectronのアプリをどう実行していましたか？そうです。NPMのScriptsからelectronコマンドで実行していました。配布する上でこれは何が問題でしょうか？残念ながら、エンドユーザは大抵npm installなんてしれくれないですし、PCにNodeJSやGitは入っていないから実行できません。仮に開発者専用ツールなどでエンドユーザがエンジニアだったとしても、例えばMac上で作られたツールをWindows上で動かさなければならない場合は誰も使ってくれません。エラーが出るに決まってるからです。エラーを解析してプルリクくれる親切な人なら良いですが、大抵は違います。エラーを解析するより別のツールを捜した方が早いからです。

そこで、解決策として、Electronの実行環境を含めたパッケージとしてアプリを提供しようと言う訳です。パッケージ化する際にMacやWindows、Linuxなど配布する環境に合わせてビルドすることで、誰でも実行できるようになります。誰でも実行できるなら人気のアプリになるかもしれませんよね。

2. ビルドしよう！

2-1. 宿題の確認(アイコンの配置)

前回の宿題を覚えていますか？え？忘れた？廊下に立ってなさい(笑)秀才の方々はアイコンを準備していると思います。そのアイコンを以下の場所(プロジェクトフォルダ配下のassetsフォルダ)に配置してください。ファイル名はとりあえず「icon.icns」としましょう。

$ cd speak-sentences
$ mkdir assets
$ ls assets/
icon.icns

2-2. ビルドのためのツールのインストール

ビルドにはelectron-packagerを使います。このパッケージはwineというライブラリに依存しているため、先にそれをインストールしましょう。

$ brew install wine

次に、electron-packagerをインストールします。

$ npm install electron-packager --save-dev

これで準備はできました。

2-3. ビルドを実行してみる

まず、package.jsonにアプリ名(productName)を追加し、scriptsにビルドコマンドを追加します。

  "productName": "SpeakSentences",
  "scripts": {
    "electron": "NODE_ENV=development electron .",
    "production": "NODE_ENV=production electron .",
    "build":
      "electron-packager . --platform=darwin,win32 --arch=x64 --icon=./assets/icon.icns --out=./build --overwrite"
  },

今回はelectron-packagerで以下の設定をしました。

• 対象のフォルダ: カレントディレクトリ(.)
• アプリ名: SpeakSentences(package.jsonのproductName)
• platform: MacとWindowsの両方対応
• arch: 64ビット版
• icon: 「./assets/icon.icns」のアイコンを使用
• out: 「./build」フォルダに出力
• overwrite: コマンド実行時に出力先のファイルを上書きする

それではコマンドを実行してみましょう。

$ npm run build

> speak-sentences@0.0.0 build /Users/username/workspace/speak-sentences
> electron-packager . --platform=darwin,win32 --arch=x64 --icon=./assets/icon.icns --out=./build --overwrite

Packaging app for platform darwin x64 using electron v1.7.6
Packaging app for platform win32 x64 using electron v1.7.6
Wrote new apps to:
build/SpeakSentences-darwin-x64
build/SpeakSentences-win32-x64

成功すれば、Mac用とWindows用のフォルダが作成されます。

$ ls build/
SpeakSentences-darwin-x64/ SpeakSentences-win32-x64/

2-4. 起動してみましょう。

ビルドで作成されたアプリを実行してみましょう。コマンドラインから実行していますが、単純にフォルダを開いてSpeakSentences.appをクリックしても起動します。通常のデスクトップアプリと同じです。

$ ls build/SpeakSentences-darwin-x64/
LICENSE                 LICENSES.chromium.html  SpeakSentences.app/     version
$ open build/SpeakSentences-darwin-x64/SpeakSentences.app

前回までで完成させた「文章を話すデスクトップアプリ」がプロダクション版で起動すれば成功です。

メニューバーがアプリ名になっています。アイコンを設定していればアイコンも設定したものなります。ここまでやると達成感がありませんか？いい感じです。

最後に

今回でこのシリーズは終了です。楽しんでいいただけましたか？Electronって楽しいですよね？ここで得た知識を活かして何か便利なアプリを作ったらコメントくださいね。

Next Step

実は、Electronにはもう一つ大事なトピックが残っています。そう、Reactなどのフロントエンドフレームワークとのインテグレーションです。本当はそこまで記事にしようと思ったのですが疲れてしまったので後は皆さんにお任せします。ここまで来た皆さんなら自力で実現できると思いますので、興味があれば調べて挑戦してみてください。

環境

• OS: macOS Sierra 10.12.6
• NodeJS: v8.4.0
• NPM: 5.4.0
• Electron: 1.7.6
• electron-packager: 1.7.5
• wine: wine-2.0.2

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

最新記事 by KD (全て見る)

• 2020年JS周辺のバックエンド寄りの注目技術！ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
• 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
• ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日