Casual Developers Note

初級・中級のエンジニアやデザイナー向けに技術情報と英語学習情報を提供中。エンジニアもデザイナーも技術と英語を身に着けて海外に飛び立とう！

You are here: Home / 技術 Tips & Tutorials / [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #5 ビルド編

By Leave a Comment

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

[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.
Keid
Twitter のプロフィール

Keid

自由で楽しい世界を目指すフルスタックWebデベロッパー。 大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。全く英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。挑戦に終わりはない。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。

関連記事