Facebook Twitter Google Maps RSS
Home 未分類 【第5回】モバイルライクなUIを簡単に! ~ Onsen UI ~
formats

【第5回】モバイルライクなUIを簡単に! ~ Onsen UI ~

Published on 2015年12月7日, by in 未分類.

みなさんこんにちは!
今月もCordova関連の情報をお届けしたいと思います!

Cordovaは今までに何度かお伝えしたように、HTML5、CSS3、JavaScriptで作るハイブリットアプリのフレームワークです。
Cordovaを使用するにあたって、もう一つ大事になってくるのがUIだと思います。
ネイティブアプリのようなUIにできれば差を埋めることができると思うのですが、
はじめから作るとなるとかなり大変な作業です・・・。
ですが、便利なことにモバイルUIに特化したOnsenUIというものがあります!
今回はこのOnsenUIについてご紹介したいと思います。

    OnsenUIとは

OnsenUIはJavaScriptのフレームワークである、AngularJSとCSSを用いて各パーツが構成されているフレームワークです。
ダウンロードページからダウンロードし、HTMLのヘッダ部分で読みこめばすぐに使用することができます。

例:

先ほどOnsenUIはAngularJSで作られていると言いましたが、OnsenUIを使用するのはJavaScriptでも可能なので、
新しく学習コストや時間がかかる等の懸念点はなくなるのではないかと思います。

Link:OnsenUI公式ページ

使い方

これに関しては公式ドキュメントを見ていただけるとすぐに分かるのですが、

引用元:OnsenUI公式ページ
このようにのような予め用意されているタグを使用し、クラスを設定、modifier属性を設定すると、
簡単に見やすく、使いやすいUIにすることができます。

これらの他にも様々なパーツが用意されているので、ぜひ公式ドキュメントを参考にしてみてください!

では、続いて私自身が少し戸惑った部分の話をしたいと思います!

 

つまづいた点

OnsenUIはページ遷移等も制御でき、OnsenUIのルートのタグとして”ons-navigator”というものがあります。
これはその名の通りページのナビゲーションを制御できるものなのですが、
私がOnsenUIを触りだしてすぐのころ、ページを増やすとそのページが動かないといった初歩的なミスを繰り返していました。
原因はons-navigatorの子要素であるons-pageを書き忘れていたり、navigatorの外に書いてしまったりという簡単なミスでした。
まだまだ私が未熟だったということもありますが、しっかりと構成を理解したうえで取り組むと、そのようなミスは起きないだろうと思います。
また、都度ドキュメントを確認しながら実装を行い、手馴れてきた頃に応用的な利用方法を行うとなお良いと思います!

もう一つ、AndroidとiOSのOSの違いで微妙にデザインがずれたり、Android限定・iOS限定などのものもあるので、
そこも注意して実装していかないといけないと思います。

まとめ


今回はOnsenUIの内容が濃く、かなり前半しか紹介できませんでしたが、いかがでしょうか。
このような便利なUIフレームワークもあるよという紹介にはなったかなと思います。
あまり内部的な話ができていないので、また次回以降詳しく説明しようかな?と考えています。
実際に私も業務でこのフレームワークの存在を知り、いまでは自作のアプリでも取り込んでいるので、
かなり使いやすく、綺麗なものができるフレームワークだと思います。
気になった方はぜひ一度試してみてはいかがでしょうか!

この記事が少しでもみなさまのお役に立てれば幸いです。

ではまた次回!!
 
弊社開発実績はこちら

コメントを残す

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


*