Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / 技術 Tips & Tutorials / [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #5 ビルド編

2017年10月8日 By KD コメントを書く

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

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

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

見出し

  • 1 前回のおさらい
  • 2 1. Electronのビルドは必要?
  • 3 2. ビルドしよう!
    • 3.1 2-1. 宿題の確認(アイコンの配置)
    • 3.2 2-2. ビルドのためのツールのインストール
    • 3.3 2-3. ビルドを実行してみる
    • 3.4 2-4. 起動してみましょう。
  • 4 最後に
  • 5 Next Step
    • 5.1 環境
    • 5.2 関連記事

前回のおさらい

  • 英語は毎日コツコツ勉強するしかない
  • 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
Twitter のプロフィール

KD

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

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

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

関連記事

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #1 開発環境準備編

    最近Electronが面白くて仕方がないです。なんてったって、Webの標準技術でデスクトップアプリが作れちゃうんですから…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #4 メニューバー実装編

    最近はITの情報は全て英語で仕入れるようになりました。英語ができるからではありません。単純に新しいことをやろうとすると日…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #2 基本機能実装編

    アメリカの友人と初めて職業について話していた時のことです。自分がエンジニアであることを言うと「Oh, you are p…

カテゴリ : 技術 Tips & Tutorials タグ : build, distribute, electron, tumblr-imported, tutorial

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

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

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • TumblrからWordPressにブログ移転する最適な方法
    TumblrからWordPressにブログ移転する最適な方法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~
    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~
  • バンクーバー留学豆知識: バンクーバーのカジノを攻略せよ!必勝法を公開します!
    バンクーバー留学豆知識: バンクーバーのカジノを攻略せよ!必勝法を公開します!

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

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

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

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

関連記事

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #1 開発環境準備編

    最近Electronが面白くて仕方がないです。なんてったって、Webの標準技術でデスクトップアプリが作れちゃうんですから…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #4 メニューバー実装編

    最近はITの情報は全て英語で仕入れるようになりました。英語ができるからではありません。単純に新しいことをやろうとすると日…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #2 基本機能実装編

    アメリカの友人と初めて職業について話していた時のことです。自分がエンジニアであることを言うと「Oh, you are p…

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes