コンテンツへスキップ
Tags

hifive と Onsen UIを組み合わせてスマートフォン/タブレット向けのUIを簡単に実現する（基本編）

by : 2018/04/06

Onsen UIというモバイルアプリ向けのUIフレームワークがあります。HTML5とJavaScript、CSSを使ってスマートフォンアプリを作るハイブリッドアプリ用のUIフレームワークになります。UIをネイティブアプリ風にしてくれるのはもちろん、画面のスワイプであったり、リスト表示などをネイティブアプリ風の操作にしてくれます。

今回はそんなOnsen UIをhifiveと組み合わせて使う方法を紹介します。

利用するソフトウェア/ライブラリ

  • Bower
  • hifive
  • Onsen UI
  • jQuery

インストール

まず各ライブラリをインストールします。インストールはBowerを使って行います。

$ bower install hifive jquery onsenui --save
view raw index. hosted with ❤ by GitHub

今回は .bowerrc という設定ファイルを作成し、ライブラリのインストール先を指定しています。

{
"directory": "public/components"
}
view raw index.json hosted with ❤ by GitHub

index.htmlの作成

次に public/index.html を作成します。インストールしたライブラリを読み込んでいるだけです。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="components/onsenui/css/onsenui.min.css" />
<link rel="stylesheet" href="components/onsenui/css/onsen-css-components.min.css" />
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="" />
</head>
<body>
<script src="components/onsenui/js/onsenui.min.js"></script>
<script src="components/jquery/dist/jquery.min.js"></script>
<script src="components/hifive/ejs-h5mod.js"></script>
<script src="components/hifive/h5.js"></script>
<script src="js/app.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

Onsen UIの記述

bodyタグ内に次のように記述します。これはOnsen UIの記述に沿っています。詳しくはjQuery – Onsen UIをご覧ください。

<!-- Example: <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
<div id="app">
<ons-page>
<ons-toolbar>
<div class="center">Hello World</div>
</ons-toolbar>
<ons-button modifier="quiet" id="btn">ボタン</ons-button>
</ons-page>
</div>
view raw index.html hosted with ❤ by GitHub

この状態で読み込むと、Onsen UIが自動的にモバイルアプリ風のUIにしてくれます。

イベントハンドリング

次にボタンを押した時の処理を作ります。ここはhifiveを使います。 js/app.js に次のように記述します。

ons.ready(() => {
// ons.notification.alert({message: 'Hello'})
var helloWorldController = {
__name: 'HelloWorldController',
'#btn click'() {
ons.notification.alert('Hello World');
}
};
h5.core.controller('#app', helloWorldController );
});
view raw index.js hosted with ❤ by GitHub

通常とほとんど変わりませんが、jQueryでよく使う $(function() {}) ではなく、ons.ready を使います。これは $(function() {}) とほとんど変わりませんが、Onsen UIの画面構築まで終わったタイミングで呼ばれるメソッドになります。

ボタンを押した時のイベント処理も通常と変わりません。Onsen UIらしいアラートを出すために ons.notification.alert に置き換えているだけです。

これでボタンを押すとちゃんとアラートが表示されます。

今回のデモはGlitchにて試せます。

https://glitch.com/embed/#!/embed/exclusive-yard?path=script.js

Onsen UIとhifiveの基本的な組み合わせは以上になります。Onsen UIはReact/Angular/Vueなどをサポートしていますが、進化の速いフレームワークであるために業務システム開発には不向きでしょう。また、Onsen UIはjQueryからの利用もサポートしていますので、hifiveと組み合わせることでメンテナンスしやすい、中長期的な運用も視野に入れたモバイルアプリ開発が行えるようになります。

次はもう少し複雑な画面遷移の方法について紹介します。

From → hifive

コメントは受け付けていません。

«
»