ElectronでOnsenUIを利用してみよう！
Electronはクロスプラットフォームで稼働するアプリをHTML5、CSS3、Javascriptで構築できるプラットフォームアプリケーションとなっています。しかし、まだデザインフレームワークが確立されておらず、その辺りはスクラッチで作成するか、既存のWEBテンプレートで対応するしかありません。そこで今回はOnsenUIを利用してElectron上で動かしてみたいと思います。
Electronのインストールとプロジェクトの起動方法
執筆時点でのElectronとOnsenUIのバージョンは下記の通りです。
- Electron： v0.31.1
- OnsenUI： 1.3.8
- angular： 1.4.5
インストール
まずはベースとなるElectronのインストールからです。Nodeを利用してインストールします。
$ npm install -g electron-prebuilt
プロジェクト設定
プロジェクトディレクトリを作成して、package.jsonの初期設定を行います。ここでは /electron-sample を対象ディレクトリとします。
$ mkdir /electron-sample
$ cd /electron-sample
$ npm init -y
以下のようなpackage.jsonができ上がると思いますが、Electronの起動は、main.jsとなりますので、“main”の属性だけ修正しておいて下さい。
{
"name": "electron-sample",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" & & exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
まずはプロジェクト作成
ディレクトリの最小構成は、下記の通りです。
.
├── ./index.html
├── ./main.js
└── ./package.json
main.js は、Electronの起動スクリプトです。
'use strict';
var app = require('app');
var BrowserWindow = require('browser-window');
require('crash-reporter').start();
var mainWindow = null;
app.on('window-all-closed', function() {
if (process.platform != 'darwin')
app.quit();
});
app.on('ready', function() {
// Windowサイズの指定
mainWindow = new BrowserWindow({width: 800, height: 600});
// 初期ロードのファイル
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
});
index.html では、“Hello World” を表示するHTMLを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron at OnsenUI</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Electronの実行
プロジェクトルート（/electron-sample）より下記のコマンドを実行します。
$ electron .
このように起動すればOKです。
OnsenUIを組み込んでみる
OnsenUIのインストール
OnsenUIで用意されているbowerを利用して、OnsenUIをプロジェクトに組み込みましょう。
$ sudo npm install -g bower
$ bower install onsenui
ディレクトリ構成は以下の通りになります。
.
├── ./bower_components
│ ├── ./OnsenUI
│ └── ./angular
├── ./index.html
├── ./main.js
└── ./package.json
最初のElectronとOnsenUI
index.html を以下の通り書き換えます。まずはツールバーにメッセージを表示するだけの、簡単なサンプルです。
<!DOCTYPE html>
<html lang="ja" ng-app="app">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="bower_components/OnsenUI/build/css/onsenui.css"/>
<link rel="stylesheet" href="bower_components/OnsenUI/build/css/onsen-css-components-blue-basic-theme.css"/>
<!-- JavaScript -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/OnsenUI/build/js/onsenui.js"></script>
<title>Electron de OnsenUI</title>
<script>
var module = ons.bootstrap('app', ['onsen']);
module.controller('AppController', function($scope) { });
</script>
</head>
<body ng-controller="AppController">
<ons-toolbar>
<div class="center">Electron温泉</div>
</ons-toolbar>
</body>
</html>
書き換えたら、Electronを起動します。
$ electron .
次の通りElectronが起動すればOKです。
タブを表示してみる。
index.html の<body>タグの内部を、以下の通り書き換えます。
<ons-tabbar>
<ons-tab page="home.html" label="Home" icon="ion-home" active="true"></ons-tab>
<ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab>
<ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab>
<ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab>
</ons-tabbar>
<ons-template id="home.html">
<ons-toolbar>
<div class="center">Home</div>
</ons-toolbar>
<p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>
<ons-template id="comments.html">
<ons-toolbar>
<div class="center">Comments</div>
</ons-toolbar>
<p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>
<ons-template id="tags.html">
<ons-toolbar>
<div class="center">Tags</div>
</ons-toolbar>
<p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>
<ons-template id="feed.html">
<ons-toolbar>
<div class="center">Feed</div>
</ons-toolbar>
<p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>
<ons-template id="settings.html">
<ons-toolbar>
<div class="center">Settings</div>
</ons-toolbar>
<p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>
同様にElectronを実行して、次の通り起動すればOKです。各タブをクリックすると、画面が遷移します。
ElectronとOnsenUIの相性について
今回は試した限りではスライドナビゲータや、カルーセルの動作はできませんでした。カルーセルで利用している、Hammerスクリプトとの相性の問題がありそうです。
また、OnsenUIはタッチやスワイプイベントを利用することもありますが、その辺りはElectronと相性の問題で動作が難しいケースがあるでしょう。今後変わっていくと思われますが、AngulerJSのディレクティブで対応してみる手もありそうです。拡張についてはOnsenUIが柔軟な設計になっていますので、AngulerJSに明るければ、対応は十分可能でしょう。
最後に
駆け足でElectron上でOnsenUIの可能性を見てきましたが、多少相性の問題があるものの、AngulerJSにも明るければ実用には問題ないレベルかと思います。ただ、初期のテンプレートで躓くとプロジェクトが思うように進まない状況が多々あります。また、UIをスクラッチで作るのも、コストの面から選択技としてはないでしょう。Electronをタブレットに見立て、OnsenUIを利用して開発すると良いかもしれません。
本記事が、皆さまのお役に立てれば幸いです。
