Onsen UI のススメ
最近 WebView で包んだ iPhone/Android アプリってのを 仕事, プライベート問わずよく作ってたりします.
色々触った結果, 一旦 Onsen UI ってのに落ち着いたので, 備忘録がてら簡単に紹介したいと思います.
Onsen UI とは?
OnsenUI とは, Web 上でアプリっぽい UI を表現できる
JavaScript/CSS(主にCSS)フレームワークです.
驚くほど簡単にネイティブと見分けの付かない UI を Web 上で構築することができます.
また, AngularJS をベースとしてるので,
MVほにゃららな開発も手軽にできます.
(個人的には AngularJS はあまり好みではないので無理やり Riot.js と組み合わせて開発してますがw)
ちなみに名前の由来は, Onsen UI => 温泉 => SPA => Single Page Application からきてるらしいです.
とってもユーモラスですね!!?
Slide
OnsenUI リードエンジニアさんの書かれた本家スライド
Onsen UI Usage
Onsen UI の使い方です.
cdn.js に一通りアップされているのでそこから参照して使う方法を紹介します.
1. 必要な script, stylesheet を読み込む
下記のものが必要になります. コピペして貼り付けるだけで ok です!
<link rel='stylesheet' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css' />
<link rel='stylesheet' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css' />
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js'></script>
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js'></script>
2. Onsen UI をロード
script で下記の処理を実行することで Onsen UI を読み込むことができます.
ここではまだ何も表示されません.
ons.bootstrap();
3. Onsen UI 用の html を書いていく
もちろん Web ベースなので HTML で UI を構築していきます. body タグ内に下記のように書いてみてください.
<ons-page>
<ons-toolbar>
<div class="center">Hello, Onsen UI</div>
</ons-toolbar>
<div style="text-align: center">
<p>
こんな感じで使えるよ♪
</p>
</div>
</ons-page>
ons-page
で page を定義して, その中に ons-toolbar
でツールバーを定義しています.
うまくいけばこのような画面が表示されるかとおもいます.
Runstant Lite で OnsenUI Get Started
Runstant でも Get Started 作ってみたのでよかったら直接イジって遊んでみてください♪