phi

I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python

phiaryjust a creator

Onsen UI のススメ

4 years ago

最近 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 でツールバーを定義しています. うまくいけばこのような画面が表示されるかとおもいます.

onsenui usage

Runstant Lite で OnsenUI Get Started

Runstant でも Get Started 作ってみたのでよかったら直接イジって遊んでみてください♪