Casual Developers Note

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

現在の場所：ホーム / 技術 Tips & Tutorials / [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #1 開発環境準備編

By コメントを書く

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

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

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

今回から何回かに分けて「文章を話すデスクトップアプリ」をステップバイステップで作っていきますので、ぜひ楽しんで下さい。

Electronとは？

ElectronとはGitHub社が開発しているHTML5とNodeJSを組み合わせて、Web技術だけでデスクトップアプリが作れるというフレームワークです。

ご存知の方も多いと思いますがGitHub上にコミットされているプログラミング言語でトップはJavascriptです。それは自然な話で、コミッターがプログラマやエンジニアだけならいろいろな言語がトップになる可能性が出てきますが、Webデザイナーもコミットしていますし、最近のWeb技術はJavascriptフレームワークのオンパレードなので、相対的にJacascriptが多くなるのは当然ですね。

流行りのエディタのATOMやVisual Studio CodeはElectronで書かれていますし、チャットアプリのSlackやデスクトップ版のWordPressもElectronで書かれています。

Javascriptでフレームワークを作ってオープンにすれば流行るというGitHubの思惑は大成功していますね。あなたもこの波に乗ってみませんか？

対象

HTMLとJacascript、NodeJSの基本知識があれば誰でもOKです。ES6を知っているとなお良いです。実際は、コードは全て載せますので、何も知らなくても動くものは作れます。

1. 開発環境準備

まずはベイビーステップというこで、開発環境を作りましょう。すでに開発環境がある人は飛ばして構いません。

Macなので当然全てコマンドラインから行います。簡単なので。もしインストーラをダウンロードしている人がいたら時代遅れなので、この機会にコマンドラインからインストールする方法を学ぶことをお薦めします。黒い画面が怖い人は白い画面にすれば大丈夫です。Macの標準は白ですけどね(笑)

1-1. Homebrewのインストール

ターミナルを開いて以下のコマンドでHomebrewとHomebrew-Caskをインストールしましょう。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew tap caskroom/cask

1-2. エディタのインストール

Jacascriptを開発するためのエディタは2択です。Visual Studio CodeかATOMの好きな方を入れて下さい。エディタ議論は趣味の問題なので、強い嗜好が無い人は基本的に新しいものから選ぶとはずれないです。お薦めはVisual Studio Codeなので、以下のコマンドでインストールできます。

$ brew cask install visual-studio-code

1-3. NodeJSのインストール

ここでは最新のNodeJSをインストールしましょう。

$ brew install node

もしバージョンを変えていろいろ管理したい場合は、nvmやnodebrew、anyenvなどを試してみて下さい。nodebrewの使い方を詳しく知りたい場合はこちらの記事へどうぞ。

1-4. Electronのインストール

チュートリアル用のプロジェクトフォルダを作って、Electronをインストールしましょう。

$ mkdir speak-sentences
$ cd speak-sentences
$ npm init -y
$ npm install electron --save
$ ls
node_modules/      package-lock.json  package.json
$ cat package.json
{
  "name": "speak-sentences",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^1.7.6"
  }
}

これで準備は万端です。簡単ですね。

2. Hello, Electron!

それではいよいよElectronでアプリを書きましょう。エディタでプロジェクトフォルダを開いて下さい。

2-1. package.jsonにElectronコマンドを追加する

すでにあるpackage.jsonのscriptsを変更するだけです。

{
  "name": "speak-sentences",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "electron": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^1.7.6"
  }
}

2-2. 表示するメインウィンドウをHTMLで作成する

プロジェクトフォルダ内で「index.html」ファイルを作成しましょう。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Hello, Electron!</title>
</head>

<body>
  <h1>Hello, Electron!</h1>
</body>

</html>

2-3. ElectronのメインとなるJavascriptを作成する

プロジェクトフォルダ内で「index.js」ファイルを作成しましょう。

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

let mainWindow;

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

appがElectronのメインアプリケーションオブジェクト、BrowserWindowオブジェクトはElectronでウィンドウを作る時に使うオブジェクトです。やっていることは、BrowserWindowオブジェクトを生成して、そのウィンドウにindex.htmlを読み込んでいるのと、メインウィンドウなので、画面を閉じた時にElectronが終了するように設定しています。このindex.htmlに通常のWebデザインを施せば、オシャレなデスクトップアプリを作ることができます。

2-4. Electronを実行する

それでは最後に実行して動くことを確認してみましょう。 ターミナルを開いて以下を実行してみてください。

$ npm run electron

以下の画像が表示されれば成功です！

うまくいきましたか？ちなみに、メインウィンドウ上でOption+Command+Iを実行してみてください。Chromeと同じデベロッパーツールが使えることが分かります。デバッグ方法も同じなので、慣れたもんですね。

最後に

今回は簡単なウォーミングアップという感じで環境を準備しました。次回からは機能を作りはじめます。では。

環境

  • OS: macOS Sierra 10.12.6
  • Homebrew: 1.3.1
  • Homebrew-Cask: 1.3.1
  • NodeJS: v8.4.0
  • NPM: 5.4.0
  • Electron: 1.7.6
The following two tabs change content below.
KD
Twitter のプロフィール

KD

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

関連記事