tutorial | Casual Developers Note

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

[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

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

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

最近はITの情報は全て英語で仕入れるようになりました。英語ができるからではありません。単純に新しいことをやろうとすると日本語の情報が少なすぎるからです。なので毎日英語の勉強を必ずしています。英語の勉強は時間のかかる戦いです。一度でも立ち止まってしまったら終わりです。「継続は力なり」という古い言葉を噛み締めています。皆さんはペラペラですか？

前回までで「文章を話すデスクトップアプリ」の機能は全て作り終えました。ただ、まだこのデスクトップアプリを世の中に出すには問題がいくつかあります。今回はその一つであるメニューバーをカスタマイズしてみましょう。

前回のおさらい

インスタントコーヒーのような味気ない人生より選択を楽む人生にしよう
Web Speech APIを使えば文章を読み上げる機能が作れる
WebのライブラリやAPIはElectronでは大抵使える

1. メニューバーのカスタマイズ

1-1. メニューバーとは？

デスクトップアプリのメニューバーと言ってイメージできますか？そうです、アプリを起動している時に左上にあるメニューのことです。

前回までのアプリを起動していみると、メニューバーはデフォルトのままなので、以下のようになっています。

これじゃ、いくらなんでも誰かにアプリを提供できません。なので、メニューバーをカスタマイズする必要があるわけです。

1-2. ドキュメントを読んでみよう

ElectronではMenuオブジェクトを使ってメニューバーのカスタマイズを行います。以下のドキュメントに軽く目を通して下さい。

2. コーディングしよう！

それではメニューバーをカスタマイズしていきましょう。

2-1. 独自メニューバーを作る

今回はデフォルトのメニューバーを無効化した上で、簡単にアプリが終了できるようにQuitのメニューをメニューバーに追加してみましょう。

いつも通りまずはフォルダ構成を確認します。

$ cd speak-sentences
$ ls
index.html         index.js           input.html         node_modules/      package-lock.json  package.json

変更するファイルはindex.jsだけです。以下のコードを追加しましょう。

index.jsに変更・追加する部分

const { app, BrowserWindow, ipcMain, Menu } = electron;

app.on("ready", () => {
  mainWindow = new BrowserWindow({
    width: 500,
    height: 500
  });
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.on("closed", () => app.quit());
  // Menu
  const mainMenu = Menu.buildFromTemplate(menuTemplate);
  Menu.setApplicationMenu(mainMenu);
});

// Menu
const menuTemplate = [
  {
    label: "Menu",
    submenu: [
      {
        label: "Quit",
        accelerator: process.platform === "darwin" ? "Command+Q" : "Ctrl+Q",
        click() {
          app.quit();
        }
      }
    ]
  }
];

MenuオブジェクトのbuildFromTemplateを使い、Javascriptオブジェクトの配列として書いたメニューから、カスタマイズされたメニューバーを生成して登録しています。Command+Qで終了するようにショートカットも設定しています。

2-2. 開発者用メニューバーを作る

先程の独自メニューバーには開発する上で問題があります。Webデザイナかフロントエンジニアならすぐに気づいたと思いますが、Command+Alt+Iが効かないのです。プロダクションとしてはそれで良いですが、開発する場合は困ってしまいます。ということで、Developメニューを追加しましょう。

以下をindex.jsに追記します。

// Show Developer Tools
if (process.env.NODE_ENV === "development") {
  menuTemplate.push({
    label: "Develop",
    submenu: [
      {
        label: "Developer Tools",
        accelerator:
          process.platform === "darwin" ? "Command+Alt+I" : "Ctrl+Shift+I",
        click(item, focusedWindow) {
          focusedWindow.toggleDevTools();
        }
      }
    ]
  });
}

NodeJSの環境変数であるprocess.env.NODE_ENVに応じて、プロダクション版か開発者版かを切り替えるようにしています。

2-3. 必要に応じてメニューバーを調整する

ここまででメニューのカスタマイズは完成しています。あとは好みの問題だとは思いますが、Macの場合はメニューテンプレートの一番最初のラベルがアプリケーションのラベルと重なってしまい見えません。これをわかった上で今回は作っているので問題ありませんが、ズラして表示したい場合は以下のコードを追加しましょう。

同様にindex.jsに以下を追加するとメニューバーのラベルが全て見えるようになります。

if (process.platform === "darwin") {
  menuTemplate.unshift({});
}

これを設定すると、以下になっていたものが。

以下のようになります。

Macの場合、だいたいアプリ名の下にメニューがありますから、この動きを前提に作った方が個人的には自然な気がします。これはお好みで。

2-4. 開発者版とプロダクション版でコマンドを分ける

NodeJSでは当たり前ですが、process.env.NODE_ENVによって動きを分けているので、コマンドも分けます。

以下のようにpackage.jsonのscriptsを変更しましょう。

  "scripts": {
    "electron": "NODE_ENV=development electron .",
    "production": "NODE_ENV=production electron ."
  },

2-5. 全体のソースコード(今回編集分)

今回編集したソースコードの全体は以下です。

index.js

const electron = require("electron");

const { app, BrowserWindow, ipcMain, Menu } = electron;

let mainWindow;
let inputWindow;

app.on("ready", () => {
  mainWindow = new BrowserWindow({
    width: 500,
    height: 500
  });
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.on("closed", () => app.quit());
  // Menu
  const mainMenu = Menu.buildFromTemplate(menuTemplate);
  Menu.setApplicationMenu(mainMenu);
});

function createInputWindow() {
  inputWindow = new BrowserWindow({
    width: 300,
    height: 300
  });
  inputWindow.loadURL(`file://${__dirname}/input.html`);
  inputWindow.on("closed", () => (inputWindow = null));
}

// Create a input window.
ipcMain.on("inputWindow:create", event => {
  createInputWindow();
});

// Send a sentence to a main window.
ipcMain.on("sentence:insert", (event, sentence) => {
  mainWindow.webContents.send("sentence:insert", sentence);
  inputWindow.close();
});

// Menu
const menuTemplate = [
  {
    label: "Menu",
    submenu: [
      {
        label: "Quit",
        accelerator: process.platform === "darwin" ? "Command+Q" : "Ctrl+Q",
        click() {
          app.quit();
        }
      }
    ]
  }
];

// Show Developer Tools
if (process.env.NODE_ENV === "development") {
  menuTemplate.push({
    label: "Develop",
    submenu: [
      {
        label: "Developer Tools",
        accelerator:
          process.platform === "darwin" ? "Command+Alt+I" : "Ctrl+Shift+I",
        click(item, focusedWindow) {
          focusedWindow.toggleDevTools();
        }
      }
    ]
  });
}

package.json

{
  "name": "speak-sentences",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "electron": "NODE_ENV=development electron .",
    "production": "NODE_ENV=production electron ."
  },
  "keywords": [],
  "author": "Keid",
  "license": "MIT",
  "dependencies": {
    "electron": "^1.7.6"
  }
}

3. 動かして確認しよう！

では起動してみます。プロダクト版と開発者版でメニューバーが変わるか確認していきましょう。

3-1. 開発者版として実行

$ npm run electron

以下のようにメニューバーが表示され、メニューやショートカットが動けば成功です。

ショートカットもちゃんと動きますか？

3-2. プロダクト版として実行

$ npm run production

以下のようにメニューバーからDevelopメニューが消えていれば成功です。

これでメニューバーを他人に見せても恥ずかしくないですね。

宿題

次回はこのデスクトップアプリをビルドします。なので、アイコンが必要です。次回までにicnsのアイコン画像の準備をお願いします。まあ、無い場合はアイコン無しで進められますが、若干物足りなさがありますので、準備することをお薦めします。

最後に

今回でアプリ作成としては終了です。必要に応じてCSSなどでデザインを飾っていくとオシャレになっていきますよ。次回はこのシリーズの最後の、Electronのビルドです。ここまでくればそれなりのものを作って配布できるようになります。ではお楽しみに。

環境

OS: macOS Sierra 10.12.6
NodeJS: v8.4.0
NPM: 5.4.0
Electron: 1.7.6

2017年9月24日 By KD コメントを書く

[Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #3 Web Speech APIを使った音声機能実装編

コーヒー豆が尽きた時にインスタントにするのですが味気ない。。。自分はそんなにコーヒーの味にうるさい方では無いのですが、ドリップしたての香りがたまらないのです。買いに行こうかな。新しいものを買うことは常にメリットがあります。選択できるからです。今まで使っていた商品か新しい商品かを選択できるチャンスです。そして、大抵新しい商品を買って後悔します。コーヒーの場合はね(笑)

前回は「文章を話すデスクトップアプリ」の基本機能まで作りました。今回はメイン機能である音声機能を作りましょう。音声機能の実装には、Chromeに搭載されているWeb Speech APIを利用します。使ったことがある人なら余裕でElectronとインテグレーションできます。

前回のおさらい

一流たるもの我慢強くなければならない
Electronのウィンドウ間のデータ通信方式にはIPCシステムが使われている
Electronアプリ作成はやってみると結構簡単。てか、楽しい

1. Web Speech APIとは？

Web Speech APIとは、音声合成(Text-to-Speech)と音声認識(Asynchronous Speech Recognition)から成る音声機能APIです。各ブラウザで実験的に実装が開始されており、ChromiumからできているElectronでもこの実験的な機能を利用することができます。今回はこのAPIの音声合成機能を使っていきます。(ちなみに、音声認識機能に関しては使うまでに少しハードルがあります。使うには、現時点でchromium-devグループへの参加とGoogle API Keyの取得が求められ、かつ、50回/日の制限付きです。ですが、この機能も面白いので試してみたい方は調べてみて下さい。ハードルをクリアした上でElectronで実行する場合は、「GOOGLE_API_KEY=XXXX npm run electron」のように渡してあげれば良いです。)

その他に、GoogleはGoogle Cloud Speech APIという有料のクラウドサービスを開始しています。無料なオープン展開を基本としているGoogleにしては残念なサービスですが、サポートもあるのでお金がある人にとってはいいかもしれません。

2. 音声機能を追加しよう！

それでは作っていきましょう。

2-1. 今回追加する機能の確認

まずは今回追加する機能を確認します。前回のUIイメージを思い出してください。残っている機能は？

そうです！Speakボタンが残っていました。このボタンをクリックした時に文章を読み上げてほしいのです。さらに、文章読み上げ中に中断できるように同じボタンをクリックすると音声が停止する機能も一緒に作りましょう。

2-2. Speak機能のコーディング

一応前回のフォルダ構成を見てみましょう。

$ cd speak-sentences
$ ls
index.html         index.js           input.html         node_modules/      package-lock.json  package.json

今回編集するのはindex.htmlだけです。

body部分に追加

  <button id="speak-sentences">Speak/Stop</button>

scripts部分に追加

    const speak = document.getElementById('speak-sentences');

    // Speak sentences through SpeechSynthesis in Web Speech API.
    const synth = window.speechSynthesis;
    speak.addEventListener('click', (event) => {
      // Stop.
      if (synth.speaking) {
        synth.cancel();
        return;
      }
      // Speak.
      const sentences = Array.from(document.querySelectorAll('#sentences p'))
        .map((sentence) => {
          return sentence.firstChild.nodeValue;
        });
      sentences.forEach((sentence) => {
        const message = new SpeechSynthesisUtterance(sentence);
        message.lang = 'ja-JP';
        synth.speak(message);
      });
    });

2-3. 全体のソースコード

全体のコードは以下のようになります。

index.js

const electron = require("electron");
const { app, BrowserWindow, ipcMain } = electron;

let mainWindow;
let inputWindow;

app.on("ready", () => {
  mainWindow = new BrowserWindow({
    width: 500,
    height: 500
  });
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.on("closed", () => app.quit());
});

function createInputWindow() {
  inputWindow = new BrowserWindow({
    width: 300,
    height: 300
  });
  inputWindow.loadURL(`file://${__dirname}/input.html`);
  inputWindow.on("closed", () => (inputWindow = null));
}

// Create a input window.
ipcMain.on("inputWindow:create", event => {
  createInputWindow();
});

// Send a sentence to a main window.
ipcMain.on("sentence:insert", (event, sentence) => {
  mainWindow.webContents.send("sentence:insert", sentence);
  inputWindow.close();
});

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Speak Sentences</title>
</head>

<body>
  <h1>Speak Sentences</h1>

  <button id="input-sentence">Input</button>
  <button id="clear-sentences">Clear</button>
  <button id="speak-sentences">Speak/Stop</button>

  <div id="sentences"></div>

  <script>
    const electron = require('electron');
    const { ipcRenderer } = electron;

    const sentences = document.getElementById('sentences');
    const insert = document.getElementById('input-sentence');
    const clear = document.getElementById('clear-sentences');
    const speak = document.getElementById('speak-sentences');

    // Request a input window.
    insert.addEventListener('click', (event) => {
      ipcRenderer.send('inputWindow:create');
    });

    // Clear sentences.
    clear.addEventListener('click', (event) => {
      sentences.innerHTML = '';
    });

    // Insert sentence.
    ipcRenderer.on('sentence:insert', (event, sentence) => {
      if (sentence.trim() === '') {
        return;
      }
      const text = document.createTextNode(sentence);
      const p = document.createElement('p');
      p.appendChild(text);
      sentences.appendChild(p);
    });

    // Speak sentences through SpeechSynthesis in Web Speech API.
    const synth = window.speechSynthesis;
    speak.addEventListener('click', (event) => {
      // Stop.
      if (synth.speaking) {
        synth.cancel();
        return;
      }
      // Speak.
      const sentences = Array.from(document.querySelectorAll('#sentences p'))
        .map((sentence) => {
          return sentence.firstChild.nodeValue;
        });
      sentences.forEach((sentence) => {
        const message = new SpeechSynthesisUtterance(sentence);
        message.lang = 'ja-JP';
        synth.speak(message);
      });
    });
  </script>
</body>

</html>

input.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Input Text</title>
</head>

<body>
  <form>
    <div>
      <label>Text: </label>
      <input autofocus />
    </div>
    <button type="submit">Enter</button>
  </form>

  <script>
    const electron = require('electron');
    const { ipcRenderer } = electron;

    // Insert text.
    document.querySelector('form').addEventListener('submit', (event) => {
      event.preventDefault();
      const { value } = document.querySelector('input');
      ipcRenderer.send('sentence:insert', value);
    });
  </script>
</body>

</html>