OnsenUIでWebページを作る

スマホ向けサイトを作るのに、いい感じ表示してくれるツールとして、今までは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公式サイト)

Onsen UI+Vue.js を使ってみた – Qiita

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください