Onsen UIをWebサイトで使ってみよう

HTML5のUIフレームワークであるOnsen UIはMonacaとの相性を考えて開発されていますが、必ずしもハイブリッドアプリ専用という訳ではありません。Webサイト開発にも利用が可能です。

GoogleがWebサイトのモバイル対応が行われているかどうかを検索順位に反映することを発表していたり、HTML5によってWebもどんどん多機能になっている中、Onsen UIを使うことで高速な描画で使いやすいWebサイトが構築できるはずです。

そこで今回はOnsen UIをWebサイト開発に利用する方法について紹介したいと思います。

準備

Onsen UI自体はJavaScript/スタイルシートで出来ていますのでダウンロードして配置するだけですが、今回はbowerを使って行いたいと思います。Onsen UIはbowerからコマンド一つでインストール可能です。bowerはnode.jsのパッケージ管理、npmを使ってインストールします。

1. node.jsのインストール（npmもインストールされます）
2. Gitのインストール
3. bowerのインストール

node.jsはNode.js Downloadからダウンロード/インストールができます。GitはMac OSXであればHomebrewやMacPortsから、WindowsであればGit for Windowsをダウンロード/インストールしてください。終わったら続いてbowerをインストールします。

1. $ npm install -g bower

これでインストールは完了です。

作業用ディレクトリの作成

続いてWebサイトを作るディレクトリ（フォルダ）を作成します。今回は onsenui_for_website としています。そのディレクトリの中でbowerコマンドを実行します。

1. $ bower install onsenui
2. bower cached        git://github.com/OnsenUI/OnsenUI.git#1.2.2
3. bower validate      1.2.2 against git://github.com/OnsenUI/OnsenUI.git#*
4. bower cached        git://github.com/angular/bower-angular.git#1.3.15
5. bower validate      1.3.15 against git://github.com/angular/bower-angular.git#~1.3.0
6. bower install       onsenui#1.2.2
7. bower install       angular#1.3.15
9. onsenui#1.2.2 bower_components/onsenui
10. └── angular#1.3.15
12. angular#1.3.15 bower_components/angular

Onsen UIがダウンロードされて、 bower_components 以下に展開されます。

Onsen UIを使う上で関連付いているAngularJSも一緒に展開されます。これでほぼ準備は完了です。

Gulpの準備

そのまま使っても良いのですが、 bower_components というフォルダに入ってしまっていたり、実際の運用時には不要なファイルも多いので Gulp を使ってまとめることにします。既にnpmは入っていますので、インストールは簡単です。まず最初にnpmで必要なパッケージを管理するようにします。

1. $ npm init
2. This utility will walk you through creating a package.json file.
3. It only covers the most common items, and tries to guess sane defaults.
5. See `npm help json` for definitive documentation on these fields
6. and exactly what they do.
8. Use `npm install <pkg> --save` afterwards to install a package and
9. save it as a dependency in the package.json file.
11. Press ^C at any time to quit.
12. name: (onsenui_for_website) 
13. version: (1.0.0) 0.0.1
14. description: Web site that use the Onsen UI
15. entry point: (index.js) 
16. test command: 
17. git repository: 
18. keywords: 
19. author: Atsushi Nakatsugawa
20. license: (ISC) MIT
21. About to write to /Users/nakatsugawa/Dropbox/DevRel/Monaca/onsenui_for_website/package.json:
23. {
24.   "name": "onsenui_for_website",
25.   "version": "0.0.1",
26.   "description": "Web site that use the Onsen UI",
27.   "main": "index.js",
28.   "scripts": {
29.     "test": "echo \"Error: no test specified\" && exit 1"
30.   },
31.   "author": "Atsushi Nakatsugawa",
32.   "license": "MIT"
33. }
36. Is this ok? (yes) yes

そうすると package.json というファイルが作成されて、ライブラリを管理できるようになります。後はGulpと必要なライブラリをインストールしていきます。

1. $ npm install --save-dev -g gulp
2. $ npm install --save-dev gulp-changed # ここから下はGulpのプラグインです。
3. $ npm install --save-dev gulp-concat
4. $ npm install --save-dev gulp-coffee
5. $ npm install --save-dev gulp-uglify
6. $ npm install --save-dev gulp-sourcemaps
7. $ npm install --save-dev gulp-webserver
8. $ npm install --save-dev del

後はGulp用の設定ファイル、gulpfile.js を作成します。

1. // gulpfile.js
2. var gulp = require('gulp');
3. var coffee = require('gulp-coffee');
4. var concat = require('gulp-concat');
5. var uglify = require('gulp-uglify');
6. var webserver = require('gulp-webserver');
7. var sourcemaps = require('gulp-sourcemaps');
8. var del = require('del');
9.  
10. var paths = {
11.   scripts: ['app/js/**/*.coffee', '!app/external/**/*.coffee']
12. };
13.  
14. // Webサーバの機能です
15. gulp.task('webserver', function() {
16.   gulp.src(&quot;./&quot;)
17.     .pipe(webserver({
18.       livereload: true,
19.     }));
20. });
21.  
22. // スクリプトの結合と配置を行っています
23. gulp.task('scripts', function() {
24.   return gulp.src([
25.       './bower_components/onsenui/build/js/angular/angular.min.js',
26.       './bower_components/onsenui/build/js/onsenui_all.min.js'
27.   ])
28.     .pipe(concat('all.js'))
29.     .pipe(gulp.dest('./javascripts/'));
30. });
31.  
32. // ファイルの変更を監視しています（今回は使っていません）
33. gulp.task('watch', function() {
34.   gulp.watch(paths.scripts, ['scripts']);
35. });
36.  
37. gulp.task('default', ['webserver', 'scripts', 'watch']);

これで $ gulp scripts と実行すると、AngularJSとOnsen UIのJavaScriptファイルがくっついた状態で javascripts/all.js として生成されます。なおスタイルシートについても同様の操作が可能ですが、今回は bower_components/onsenui/build/css/ を プロジェクトルート直下に stylesheets という名称でコピーしています。

その結果、次のようなファイル構成になっていればOKです。

index.htmlの編集

では実際に表示を行うindex.htmlを作成しましょう。まず最初に次のようにHTMLファイルを作成します。

1. <!DOCTYPE html>
2. <html class="">
3.   <head>
4.     <meta charset="UTF-8">
5.     <meta name="robots" content="noindex">
6.     <link rel="stylesheet prefetch" href="stylesheets/onsenui.css">
7.     <link rel="stylesheet prefetch" href="stylesheets/onsen-css-components.css">
8.   </head>
9.   <body>
10.   <script src="javascripts/all.js"></script>
11.   <script>
12.       ons.bootstrap();
13.       //@ sourceURL=pen.js
14.     </script>
15.   </body>
16. </html>

この形が Onsen UIの基本形になります。後はこの <body>〜</body>の間にコンテンツを書くだけです。JavaScript | Onsen UIには多くのコンポーネントを用意しています。例えばチェックボックスを表示します。内容はPattern: Checkbox List | Onsen UIにもありますが、bodyタグの中に次のように記述します。

1. <ons-page>
2.   <ons-toolbar>
3.     <div class="center">Checkboxes</div>
4.   </ons-toolbar>
5.   <ons-list>
6.     <ons-list-header>Favorite Sports</ons-list-header>
7.  
8.     <ons-list-item modifier="tappable">
9.       <label class="checkbox checkbox--list-item">
10.         <input type="checkbox">
11.         <div class="checkbox__checkmark checkbox--list-item__checkmark"></div>
12.         Baseball
13.       </label>
14.     </ons-list-item>
15.  
16.     <ons-list-item modifier="tappable">
17.       <label class="checkbox checkbox--list-item">
18.         <input type="checkbox">
19.         <div class="checkbox__checkmark checkbox--list-item__checkmark"></div>
20.         Soccer
21.       </label>
22.     </ons-list-item>
23.  
24.     <ons-list-item modifier="tappable">
25.       <label class="checkbox checkbox--list-item">
26.         <input type="checkbox" checked="checked">
27.         <div class="checkbox__checkmark checkbox--list-item__checkmark"></div>
28.         Basketball
29.       </label>
30.     </ons-list-item>
31.  
32.     <ons-list-item modifier="tappable">
33.       <label class="checkbox checkbox--list-item">
34.         <input type="checkbox" checked="checked">
35.         <div class="checkbox__checkmark checkbox--list-item__checkmark"></div>
36.         Golf
37.       </label>
38.     </ons-list-item>
39.  
40.     <ons-list-header>Favorite Food</ons-list-header>
41.  
42.     <ons-list-item modifier="tappable">
43.       <label class="checkbox checkbox--noborder checkbox--list-item">
44.         <input type="checkbox" checked="checked">
45.         <div class="checkbox__checkmark checkbox--noborder__checkmark checkbox--list-item__checkmark"></div>
46.         Hamburger
47.       </label>
48.     </ons-list-item>
49.  
50.     <ons-list-item modifier="tappable">
51.       <label class="checkbox checkbox--noborder checkbox--list-item">
52.         <input type="checkbox">
53.         <div class="checkbox__checkmark checkbox--noborder__checkmark checkbox--list-item__checkmark"></div>
54.         Beefsteak
55.       </label>
56.     </ons-list-item>
57.  
58.     <ons-list-item modifier="tappable">
59.       <label class="checkbox checkbox--noborder checkbox--list-item">
60.         <input type="checkbox" checked="checked">
61.         <div class="checkbox__checkmark checkbox--noborder__checkmark checkbox--list-item__checkmark"></div>
62.         Spaghetti
63.       </label>
64.     </ons-list-item>
65.  
66.     <ons-list-item modifier="tappable">
67.       <label class="checkbox checkbox--noborder checkbox--list-item">
68.         <input type="checkbox">
69.         <div class="checkbox__checkmark checkbox--noborder__checkmark checkbox--list-item__checkmark"></div>
70.         Natto
71.       </label>
72.     </ons-list-item>
73.   </ons-list>
74. </ons-page>

この内容を書いたら、 gulp コマンドを実行します。そうすると8000番ポートでWebサーバが立ち上がるので、 http://localhost:8000/ にアクセスします。

プロフィール風画面を作る

同じようにbodyタグの内容を次のように変更します。

1. <ons-page>
2.   <ons-toolbar>
3.     <div class="left"><ons-back-button>Back</ons-back-button></div>
4.     <div class="center">Profile</div>
5.     <div class="right">
6.       <ons-toolbar-button><ons-icon icon="ion-gear-a" style="vertical-align: -4px; font-size: 28px;"></ons-icon></ons-toolbar-button>
7.     </div>
8.   </ons-toolbar>
9.  
10.   <div class="profile-card">
11.     <img src="images/profile-image-01.png" class="profile-image">
12.     <div class="profile-name">Dave Graham</div>
13.     <div class="profile-id">@davegraham</div>
14.     <div class="profile-desc">Freelance designer, software engineer and cyclist</div>
15.   </div>
16.  
17.   <ons-list>
18.     <ons-list-item>
19.       <ons-row>
20.         <ons-col class="info-col">
21.           <div class="info-num">87</div>
22.           <div class="info-unit">Comments</div>
23.         </ons-col>
24.         <ons-col class="info-col">
25.           <div class="info-num">40</div>
26.           <div class="info-unit">Following</div>
27.         </ons-col>
28.         <ons-col class="info-col">
29.           <div class="info-num">38</div>
30.           <div class="info-unit">Followers</div>
31.         </ons-col>
32.       </ons-row>
33.     </ons-list-item>
34.   </ons-list>
35.  
36.   <ons-list modifier="inset" style="margin-top: 10px">
37.     <ons-list-item modifier="chevron">
38.       Write a comment
39.     </ons-list-item>
40.     <ons-list-item modifier="chevron">
41.       See details
42.     </ons-list-item>
43.     <ons-list-item modifier="chevron">
44.       Save to the list
45.     </ons-list-item>
46.   </ons-list>
47.   <br>
48. </ons-page>

この場合は、別途スタイルシートが必要です。stylesheets/profile.cssなどとして次の内容でファイルを作成してください。また、HTML側でlinkタグを使って読み込み指定してください。

1. .profile-card {
2.   width: 100%;
3.   text-align: center;
4.   color: white;
5.   padding: 30px 0;
6.   line-height: 1.4;
7.   background-color: #33393c;
8.   text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
9. }
10.  
11. .profile-image {
12.   height: 100px;
13.   width: 100px;
14.   border-radius: 50%;
15.   -webkit-border-radius: 50%;
16.   background-color: black;
17.   border 1px solid white;
18.   box-shadow:rgba(0, 0, 0, 0.2) 0px 2px 0px 0px;
19.   -webkit-box-shadow:rgba(0, 0, 0, 0.2) 0px 2px 0px 0px;
20. }
21.  
22. .profile-name {
23.   margin: 20px 0 0 0;
24.   font-weight: 600;
25.   font-size: 17px;
26. }
27.  
28. .profile-id {
29.   margin: 0 0 5px 0;
30.   font-size: 14px;
31.   opacity: 0.6;
32. }
33.  
34. .profile-desc {
35.   font-size: 15px;
36.   opacity: 0.6;
37.   width: 90%;
38.   text-align: center;
39.   margin: 0 auto;
40. }
41.  
42. .info-col {
43.   height: 60px;
44.   line-height: 1;
45.   padding: 12px 0 12px 4px;
46. }
47.  
48. .info-num {
49.   font-size: 16px;
50.   font-weight: 500;
51.   opacity: 0.8;
52. }
53.  
54. .info-unit {
55.   margin-top: 6px;
56.   font-size: 14px;
57.   opacity: 0.4;
58. }

後、こちらの画像をダウンロードして、 images/profile-image–01.png として保存してください。作業が完了すると、次のように表示されるはずです。

他にもサムネイル付きリストページのテンプレートパターンもあります。こういったデザインはブログやメディアサイトの記事一覧でも利用できるのではないでしょうか。

Onsen UIのアイコンはFont AwesomeやIoniconsを使えるようになっていますので、フラットUIなWebサイトを構築する際にも便利に使えます。よりスタイリッシュで高パフォーマンスなモバイルWebサイトを実現するためにOnsen UIをぜひご利用ください！

Onsen UI - A Custom Elements-Based HTML5 UI Framework | Onsen UI