Asial Blog

Recruit! Asialで一緒に働きませんか?

ElectronでOnsenUIを利用してみよう!

カテゴリ :
デザイン・UI
タグ :
JavaScript
onsenui
Electron

Electronはクロスプラットフォームで稼働するアプリをHTML5、CSS3、Javascriptで構築できるプラットフォームアプリケーションとなっています。しかし、まだデザインフレームワークが確立されておらず、その辺りはスクラッチで作成するか、既存のWEBテンプレートで対応するしかありません。そこで今回はOnsenUIを利用してElectron上で動かしてみたいと思います。



Electronのインストールとプロジェクトの起動方法



執筆時点でのElectronとOnsenUIのバージョンは下記の通りです。



  • Electron: v0.31.1
  • OnsenUI: 1.3.8
  • angular: 1.4.5


インストール



まずはベースとなるElectronのインストールからです。Nodeを利用してインストールします。



  1. $ npm install -g electron-prebuilt

プロジェクト設定



プロジェクトディレクトリを作成して、package.jsonの初期設定を行います。ここでは /electron-sample を対象ディレクトリとします。



  1. $ mkdir /electron-sample
  2. $ cd /electron-sample
  3. $ npm init -y

以下のようなpackage.jsonができ上がると思いますが、Electronの起動は、main.jsとなりますので、“main”の属性だけ修正しておいて下さい。



  1. {
  2.   "name": "electron-sample",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "main.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1"
  8.   },
  9.   "keywords": [],
  10.   "author": "",
  11.   "license": "ISC"
  12. }

まずはプロジェクト作成



ディレクトリの最小構成は、下記の通りです。



  1. .
  2. ├── ./index.html
  3. ├── ./main.js
  4. └── ./package.json

main.js は、Electronの起動スクリプトです。



  1. 'use strict';
  2.  
  3. var app = require('app');
  4. var BrowserWindow = require('browser-window');
  5.  
  6. require('crash-reporter').start();
  7.  
  8. var mainWindow = null;
  9.  
  10. app.on('window-all-closed', function() {
  11.     if (process.platform != 'darwin')
  12.         app.quit();
  13. });
  14.  
  15. app.on('ready', function() {
  16.  
  17.     // Windowサイズの指定
  18.     mainWindow = new BrowserWindow({width: 800, height: 600});
  19.     // 初期ロードのファイル
  20.     mainWindow.loadUrl('file://' + __dirname + '/index.html');
  21.  
  22.     mainWindow.on('closed', function() {
  23.         mainWindow = null;
  24.     });
  25. });

index.html では、“Hello World” を表示するHTMLを作成します。



  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Electron at OnsenUI</title>
  6. </head>
  7. <body>
  8.   <h1>Hello World</h1>
  9. </body>
  10. </html>

Electronの実行



プロジェクトルート(/electron-sample)より下記のコマンドを実行します。



  1. $ electron .

このように起動すればOKです。




Hello Worldの表示

Hello Worldの表示



OnsenUIを組み込んでみる



OnsenUIのインストール



OnsenUIで用意されているbowerを利用して、OnsenUIをプロジェクトに組み込みましょう。



  1. $ sudo npm install -g bower
  2. $ bower install onsenui

ディレクトリ構成は以下の通りになります。



  1. .
  2. ├── ./bower_components
  3. │   ├── ./OnsenUI
  4. │   └── ./angular
  5. ├── ./index.html
  6. ├── ./main.js
  7. └── ./package.json

最初のElectronとOnsenUI



index.html を以下の通り書き換えます。まずはツールバーにメッセージを表示するだけの、簡単なサンプルです。



  1. <!DOCTYPE html>
  2. <html lang="ja" ng-app="app">
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.  
  7.     <!-- CSS -->
  8.     <link rel="stylesheet" href="bower_components/OnsenUI/build/css/onsenui.css"/>
  9.     <link rel="stylesheet" href="bower_components/OnsenUI/build/css/onsen-css-components-blue-basic-theme.css"/>
  10.  
  11.     <!-- JavaScript -->
  12.     <script src="bower_components/angular/angular.js"></script>
  13.     <script src="bower_components/OnsenUI/build/js/onsenui.js"></script>
  14.  
  15.     <title>Electron de OnsenUI</title>
  16.  
  17.     <script>
  18.         var module = ons.bootstrap('app', ['onsen']);
  19.         module.controller('AppController', function($scope) { });
  20.     </script>
  21. </head>
  22.  
  23. <body ng-controller="AppController">
  24.  
  25. <ons-toolbar>
  26.     <div class="center">Electron温泉</div>
  27. </ons-toolbar>
  28.  
  29. </body>
  30. </html>

書き換えたら、Electronを起動します。



  1. $ electron .

次の通りElectronが起動すればOKです。




Electron with OnsenUI

Electron with OnsenUI



タブを表示してみる。



index.html<body>タグの内部を、以下の通り書き換えます。



  1. <ons-tabbar>
  2.     <ons-tab page="home.html" label="Home" icon="ion-home" active="true"></ons-tab>
  3.     <ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab>
  4.     <ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab>
  5.     <ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab>
  6. </ons-tabbar>
  7.  
  8. <ons-template id="home.html">
  9.     <ons-toolbar>
  10.         <div class="center">Home</div>
  11.     </ons-toolbar>
  12.  
  13.     <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
  14. </ons-template>
  15.  
  16. <ons-template id="comments.html">
  17.     <ons-toolbar>
  18.         <div class="center">Comments</div>
  19.     </ons-toolbar>
  20.  
  21.     <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
  22. </ons-template>
  23.  
  24. <ons-template id="tags.html">
  25.     <ons-toolbar>
  26.         <div class="center">Tags</div>
  27.     </ons-toolbar>
  28.  
  29.     <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
  30. </ons-template>
  31.  
  32. <ons-template id="feed.html">
  33.     <ons-toolbar>
  34.         <div class="center">Feed</div>
  35.     </ons-toolbar>
  36.  
  37.     <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
  38. </ons-template>
  39.  
  40. <ons-template id="settings.html">
  41.     <ons-toolbar>
  42.         <div class="center">Settings</div>
  43.     </ons-toolbar>
  44.  
  45.     <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
  46. </ons-template>

同様にElectronを実行して、次の通り起動すればOKです。各タブをクリックすると、画面が遷移します。




Electron with OnsenUI(タブ表示)

Electron with OnsenUI(タブ表示)



ElectronとOnsenUIの相性について



今回は試した限りではスライドナビゲータや、カルーセルの動作はできませんでした。カルーセルで利用している、Hammerスクリプトとの相性の問題がありそうです。



また、OnsenUIはタッチやスワイプイベントを利用することもありますが、その辺りはElectronと相性の問題で動作が難しいケースがあるでしょう。今後変わっていくと思われますが、AngulerJSのディレクティブで対応してみる手もありそうです。拡張についてはOnsenUIが柔軟な設計になっていますので、AngulerJSに明るければ、対応は十分可能でしょう。



最後に



駆け足でElectron上でOnsenUIの可能性を見てきましたが、多少相性の問題があるものの、AngulerJSにも明るければ実用には問題ないレベルかと思います。ただ、初期のテンプレートで躓くとプロジェクトが思うように進まない状況が多々あります。また、UIをスクラッチで作るのも、コストの面から選択技としてはないでしょう。Electronをタブレットに見立て、OnsenUIを利用して開発すると良いかもしれません。



本記事が、皆さまのお役に立てれば幸いです。