めとべや東京 #10 にて Electron を知ってもらう話をしてきました

www.slideshare.net

きっかけ

ぐらばくさん「BPS 氏なにか話さない?」
僕「Electron なら」
ぐらばくさん「ええやん」

きっかけおしまい。

なんで Electron

Windows(限定ではないけれど)向けのデスクトップアプリを作る新たな手段を知って欲しかったから。

私自身、Electron ゴリゴリ開発しているわけではないのだけれど、既存 WEB アプリケーションの移行が信じられないほど簡単なことにびっくりしたし、革命的だと感じました。
Windows でデスクトップアプリというと WPF、最近だと UWP が連想されやすいのかな、と思いますが、Electron のパワーはその選択肢に加わる力が備わっている印象を受けました。 もちろん、ちゃんと全ての機能を動かすのにはその規模に応じて追加実装・修正が必要です。とはいえ検証のためにやってみた、私が React + ES6 の学習テーマとして作っている MarkdownPreview の移行にかかった時間は正味5分。

Electron アプリケーションとして起動するためのコード(メインプロセス側)に書いたコードはこれだけです。

'use strict';

// アプリのライフサイクルを管理するモジュール
const app           = require('app');
// ウィンドウのモジュール
const BrowserWindow = require('browser-window');
let   mainWindow    = null;

// ウィンドウが全て閉じたらアプリも終了
// 本来は、現在動作しているのがどの OS かによっても条件分岐させる
app.on('window-all-closed', () => {
    app.quit();
});

// 
app.on('ready', () => {
    mainWindow = new BrowserWindow({
        'width' : 800,
        'height': 600
    });

    mainWindow.loadURL('file://' + __dirname + '/index.html');
    mainWindow.on('closed', () => mainWindow = null);
});

これを作業ディレクトリ直下に main.js という生で保存し、 electron ./ とコマンドを叩いてあげるとデスクトップアプリとして起動できます。 もちろん、配布時にはパッケージングを施す必要があります。

とっても簡潔ですが、メインプロセス側に記述すること(ウィンドウ作ったり、読み込んだり)が増えると、ダラダラとしたものになってしまう心配もあります。 そこらへんの知見は、まだ構築できていません。

準備とか

セッションや LT の経験がなかったので、資料作りには今まで参加した様々な勉強会のスライドを参考にしました。 こういった勉強会では「当日だけどスライド作ってない芸」が催されることもあるようですが、あくまでも経験者による綿密な計算の上に成り立つ高度なテクニックであることは周知の事実ですので、スライド作成には2週間をかけました。 といいつ、ギリギリまで仕上げをしていました。お前は何のために参加者席に座っていたんだ。

間違った話をするわけにはいかないので、何度も公式や他資料をにらめっこしていました。

時間も押していることもありビクビクしながらの発表でしたが、間に挟んだポイントでちゃんと笑い声が聞こえてよかったです。。 滑ったら滑ったで次回のネタになるからいいんだけれど。

失敗したこと

LT なのにボリューム盛りすぎました。

f:id:bps_tomoya:20151220131125p:plain