Asial Blog

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

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

カテゴリ :
デザイン・UI
タグ :
Web
Onsen UI
HTML5

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
  8. onsenui#1.2.2 bower_components/onsenui
  9. └── angular#1.3.15
  10. angular#1.3.15 bower_components/angular

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




Onsen UIのファイル一覧

Onsen UIのファイル一覧



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.
  4. See `npm help json` for definitive documentation on these fields
  5. and exactly what they do.
  6. Use `npm install <pkg> --save` afterwards to install a package and
  7. save it as a dependency in the package.json file.
  8. Press ^C at any time to quit.
  9. name: (onsenui_for_website) 
  10. version: (1.0.0) 0.0.1
  11. description: Web site that use the Onsen UI
  12. entry point: (index.js) 
  13. test command: 
  14. git repository: 
  15. keywords: 
  16. author: Atsushi Nakatsugawa
  17. license: (ISC) MIT
  18. About to write to /Users/nakatsugawa/Dropbox/DevRel/Monaca/onsenui_for_website/package.json:
  19. {
  20.   "name": "onsenui_for_website",
  21.   "version": "0.0.1",
  22.   "description": "Web site that use the Onsen UI",
  23.   "main": "index.js",
  24.   "scripts": {
  25.     "test": "echo \"Error: no test specified\" && exit 1"
  26.   },
  27.   "author": "Atsushi Nakatsugawa",
  28.   "license": "MIT"
  29. }
  30. 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です。




Onsen UIのファイル構成

Onsen UIのファイル構成



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を使ったプロフィールページ

Onsen UIを使ったプロフィールページ



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




サムネイル付きリストページ

サムネイル付きリストページ






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



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

コメント

  • yusuke

    お世話になっております。
    こちらの方法でWEBサイトを作成した際には、従来のMonaca開発のように
    navigator要素の子ページごとにhtmlを分けることは出来ないのでしょうか?

    index.htmlとpage1.htmlを同フォルダ内に配置し、navigator.pushPage('page1.html')を実行したところ(Error: Page is not found: page1.html)となってしまいます。

    http://ja.onsen.io/guide/overview.html#DefiningMultiplePagesinSingleHTML を参考に
    全てindex.html内にまとめれば動作はするのですが、ページ数が多いと見辛くなることを懸念しております。

  • MOONGIFT 中津川篤司

    いえ、そのようなことはないかと思います。

    http://stackoverflow.com/questions/27994598/using-multiple-html-files-in-onsen-ui

    などのやり取りをみてもらうのが分かりやすいかと思いますが、別ファイルの場合はons-templateの指定を外すことで動くようになります。

    後はOnsen UIのブログ(英語)でもマスター/詳細型のアプリ構成は別ファイルで行っています。

    http://blog.asial.co.jp/1219?lang=en

    ご確認ください。

  • シャネル 長財布 バイマ

    最高品質ブランドコピーしかお出ません!
    コピーブランドもお取寄せ可能!
    までお問い合わせください。
    シャネル 長財布 バイマ http://www.ooowatch.com/tokei/vc/index.html

コメントフォーム



captcha_key

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

最近の記事