![[Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #1 開発環境準備編](https://casualdevelopers.com/wp-content/uploads/2017/10/electronlogo-700x300.png)
最近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
最新記事 by Keid (全て見る)
- CircleCI 2.0とCodecovでNodeJSアプリケーションをテストしてカバレッジを測定する方法(Jest編) - 2018年8月13日
- UXデザイン初学者のための基本用語まとめ - 2018年8月6日
- Heroku Container Registryのcontainer:push後のcontainer:releaseの対応方法 - 2018年8月3日
コメントを残す