スマホ向けサイトを作るのに、いい感じ表示してくれるツールとして、今まではjQuery Mobileをたま〜に利用していました。
ですが、最近は「jQueryはもう時代遅れの技術」みたいな話をちょいちょい見かけるので、最近流行り？のOnsenUIでページを作成してみました。
とりあえず今回はOnsenUIをダウンロードして、使えるようにするところまでやってみたいと思います。
ダウンロード & インストール
GithubのReleaseページからOnsenUIの最新版をダウンロードしてきます。
wget https://github.com/OnsenUI/OnsenUI-dist/archive/2.0.4.tar.gz tar xvf 2.0.4.tar.gz # 展開 mv OnsenUI-dist-2.0.4 OnsenUI-2.0.4 # 名前の変更
ブログ作成現在では、2.0.4が最新版でした。
ページヘの埋め込み
いろいろなサンプルページからOnsenUIの利用方法をみてそれっぽく書いてみます。
公式チュートリアルのJS:Creating a pageを参考に記述しました。
<!DOCTYPE html>
<html lang="js">
<head>
<meta charset="UTF-8">
<title>OnsenUI test</title>
<!-- OnsenUIを使うための記述 -->
<link rel="stylesheet" href="OnsenUI-2.0.4/css/onsenui.css">
<link rel="stylesheet" href="OnsenUI-2.0.4/css/onsen-css-components.css">
<script src="OnsenUI-2.0.4/js/onsenui.min.js"></script>
<!-- なんだかこの記述が必要っぽいけど、あるとエラーとなるし動いてるからとりあえずよしとする…。
<script type="text/javascript"> ons.bootstrap(); </script>
-->
</head>
<body>
<ons-page id="helloworld-page">
<ons-toolbar>
<div class="center"></div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<p style="text-align: center">
<ons-button>Click me!</ons-button>
</p>
</ons-page>
<script type="text/javascript">
document.addEventListener('init', function(event) {
var page = event.target;
if (page.matches('#helloworld-page')) {
page.querySelector('ons-toolbar .center').innerHTML = 'My app';
page.querySelector('ons-button').onclick = function() {
ons.notification.alert('Hello world!');
console.log("clicked");
};
}
});
</script>
</body>
</html>
ブラウザから file:///File/to/path/inde.html みたいな感じにアクセスすると、それっぽくなったページが表示されます。(Chromeの開発タブ?からスマホっぽいビューを使いました)
 |
 |
まとめ
とりあえず、これでOnsenUIを単体で利用することができました。多くの記事はAngularJSとかと組み合わせたりしています。また、それらをbrewやnpmなどパッケージ管理ツールを用いてインストールをしていますが、とりあえず素の？状態で動作させることができました。
JSを見ていると、やっぱりOnsenUIはきれいに見せるためのもので、それに対してJSをゴリゴリ生で書くのは大変そうですね…。やっぱり、AngularJSとか使うべきなのかな。。。
参考ページ
Onsen UI 2: HTML5モバイルアプリを速く、美しく (OnsenUI公式サイト)