狠狠撸

● Electronとは
● Electronの特徴
● Electronの仕組み
● Electronを触ってみよう
● おまけ
● まとめ
Index

#1. Electronとは
Windows / macOS / Linuxで実行できるデスクトップアプリを
HTML / CSS / JavaScriptで開発できるフレームワークです。

#2. Electronの特徴
● ES2015記法でJSを扱うことが出来る
● Node.jsが組み込まれているため、ファイルシステムや OSの機能をnpmパッケージで呼び出し利
用できる
● レンダリングにChromiumというOSSのブラウザを使用しており、ベンダープレフィックスの記述が
不要
● デスクトップアプリには欠かせないメニューやダイアログ操作等々、 OSのネイティブAPIを呼び出さ
ないといけない部分については Electronが内部的にAPIをラップしてJSで呼び出せる仕組みになっ
ている。

#3. Electronの仕組み
　　　　　コマンドを実行すると、package.jsonファイル内の
mainに記述されているjsファイルをメインプロセスとして起
動します。
JavaScript側のメインプロセスと表示する側のレンダラープ
ロセスでIPC通信を行います。
electron

#3. Electronの仕組み
メインプロセス
あらゆるElectronアプリケーションのエントリーポイントです。
ダイアログのオープンやメニュー操作などはリソースを集中的に使うので、レンダラープロセスを妨げないようメインプロ
セスで実行されます。
また、メインプロセスには完全なNode APIがビルドインされています。
レンダラプロセス
レンダラプロセスはアプリケーションにおけるブラウザウィンドウです。
メインプロセスとは異なり複数のプロセスの存在が可能で、1つが故障しても他のプロセスに影響しないのが特徴です。
またレンダラプロセスは隠すことも可能でブラウザ表示されずバックグラウンドでコードのみ実行させることも可能です。

#4. Electronを触ってみよう

今回は右のような簡単なコメントを投稿してリストとし
て表示することができるアプリケーションを作りたい
と思います。

1. アプリケーション作成の準備
右図のようなpackage.jsonになっていることを確
認して下さい。
{
“name”: “electron-app”,
“version”: “1.0.0”,
“description: “first electron app”,
“main”: “index.js”
“scripts”: {
“test”: “echo ”Error: no test specified” && exit 1”,
},
“author”: “your name”,
“license”: “MIT”
}

1. アプリケーション作成の準備
以下のコマンドでElectronをインストールしてください
試しにElectronを起動してみましょう。
npm install electron@1.8.2 --save-dev
./node_modules/.bin/electron
右図の画面が表示されたらインストール完了です

2. アプリケーション作成
それでは早速アプリケーションを作成していこうと思いま
す。
まずはエントリポイントになる index.jsを右図のように作成し
てください。
const { app, BrowserWindow } = require('electron');
let win;
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL(`file://${__dirname}/index.html`);
win.on('closed', () => { win = null; });
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (win === null) {
createWindow();
}
});
index.js

次に読み込むHTMLを記述し、</body>タグの
前で次ページで記述する jsファイルを読み込み
ます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My First Electorn app</title>
</head>
<body>
<h1>CommentBox</h1>
<form id="comment-form">
<input type="text" id="comment-input" placeholder="コメント">
<input type="submit" value="投稿">
</form>
<ul id="comments"></ul>
<script src=/slideshow/electron-88047032/88047032/"renderer.js"></script>
</body>
</html>
index.html

最後にコメント投稿時の動作用
JavaScriptを記述していきます。
document.addEventListener('DOMContentLoaded', () => {
// formのsubmit時の動作を定義する
document.getElementById('comment-form').onsubmit = () => {
// コメントを入力するinputを取得する
const commentInput = document.getElementById('comment-input');
if ( commentInput.value === '' ) {
// コメントが入力されていない場合何もしない
return false;
}
// 入力されたコメントを元にli要素を作成
const newComment = document.createElement('li');
// 作成したli要素をDOMに挿入する
newComment.innerText = commentInput.value;
document.getElementById('comments').appendChild(newComment);
// コメント入力のinputは空にしておく
commentInput.value = '';
return false;
};
});
renderer.js

　　　　　(./node_modules/.bin/electron .)
コマンドを実行してください。
右図のような画面が出てきたら成功です。
electron .

#5. おまけ
Electronの開発に役立つ記事やビデオ、必要なリソースが Awesome Electronというサイトにまとめられてい
るので是非参考にしてみてください。
具体的には以下のような情報がまとめられています（抜粋）
● Apps：Electronで開発されたアプリが列挙されており、「 Open Source」となっているものはソースの閲
覧が可能です。
● Boilerplates：あらかじめ登録されているテンプレートが紹介されています。フロントのフレームワークと
してReact.jsやVue.jsを使いたい場合はここから使用するとすぐに始められます。
● Tools：Electronの開発に役立つリソースが紹介されています。

#6. まとめ
● 複数書かずに各OS対応のデスクトップアプリが作れます。
● Node.jsやJavaScriptを使用することで幅広い表現が可能です。
● App StoreやGoogle Playへの認証もなく配布できる
今回はElectronについてと導入についてお話ししました。
アプリケーション制作と敷居を高く感じることなく、制作配布できるも
のなんだなと覚えていただけたら嬉しいです。

有难うございました！

Good is good.
We provide opportunities to the SEKAI by fusing technology and ideas.
テクノロジーとクリエイティブでセカイをより良くする
お問い合わせはこちらから
https://giginc.co.jp/contact/

狠狠撸

Electron

Recommended

More Related Content

Similar to Electron (20)

More from GIG inc. (20)

Electron