HTML5モバイルアプリ開発講座（Onsen UI入門編）

Copyright © 2011 Asial Corporation. All Rights Reserved. │ 1
HTML5モバイルアプリ開発講座 Onsen UI入門編アシアル株式会社

Onsen UIとは

Onsen UI • 豊富なUIパーツ • ネイティブと遜色ないパフォーマンス • OSSとして提供（Monacaに標準搭載） • Android/iOSのスタイルガイドライン準拠 • SPAの構築が容易簡単に使えてハイパフォーマンスな、HTML5モバイルアプリ／ Webアプリ向けのUIフレームワークです。

Onsen UIの使い方独自タグを記述することで、ネイティブライクなUIを簡単に構築することができます。

Onsen UIが提供するUIパーツ群マテリアルデザイン（Android）フラットデザイン（iOS） • OSに合わせて各スタイルが自動で適用されます。 • どちらかのデザインに統一したい場合、ons.forcePlatformStyling("android/ios") を実行します。

SPA（Single Page Application）とは • 従来型のWebアプリ index.html index.html page1.html page2.html page3.html page4.html TOP 画面1 画面2 画面3 画面4 リソースのダウンロードは最初の一回だけ Load Load Load Load Load Load → 画面切り替えの速度が速い • SPAアプリ

SPAのメリット・デメリット • SPAは従来の方法よりは構築の難易度が上がりますが、よりネイティブアプリに近いUI/UXを実現することができます。メリットデメリット • 各ページのリソースが最初にダウンロードされるので、画面切り替えの速度が早い • 画面遷移時に「真っ白なページ」の状態にならない • 初期ロードが遅い • JavaScriptの知識とフレームワークの導入が必須

Onsen UIの対応JavaScriptフレームワーク • Onsen UIは特定のJavaScriptフレームワークに依存しないため、任意のフレームワークと組み合わせて利用することができます。 • もちろん、フレームワークなしで利用することも可能です。 jQuery AngularJS Angular2+ React Vue.js

アプリの作成

今回作成するアプリ • 簡単なメモアプリを題材として、Onsen UIの代表的なコンポーネントの利用方法を学びます。メモデータはローカルストレージに保存します。 Android iOS

ローカルストレージとは • HTML5から追加された、キーバリュー形式でブラウザにデータを保存する技術です。 • Cookieよりも保存容量が多く、有効期限がないためデータを永続的に保存することができます。 • 保存できるデータは文字列のみなので、配列やオブジェクトを保存する場合はJSON という形式に変換します。 localStorage.setItem("キー", "保存する文字列"); データの保存 localStorage.getItem("キー"); データの取得

JSONとは • JavaScriptの配列やオブジェクトを文字列として扱うデータ形式です。 • JSONのデータとオブジェクトは相互に変換することができます。メソッド名説明 JSON.parse(JSON文字列) JSON文字列をオブジェクトに変換する JSON.stringify(配列やオブジェクト) オブジェクトをJSON文字列に変換する [ "りんご", "みかん", "ぶどう" ] 相互変換 JSON 0 1 2 りんごみかんぶどう JavaScriptの配列

参考：その他のデータ保存技術 IndexedDB • ローカルストレージの高機能版で、インデックスやトランザクションが使用できます。（iOS10/Android4.4以上対象） SQLite • ローカルで使える軽量なデータベースです。SQLを利用できます。 • Monacaでは、CordovaのSQLiteプラグイン（第三者提供）をインポートすることで利用可能となります。 外部データストレージ • データをサーバーに保存する場合、mBaaS (mobile Backend as a Service) を利用すると手軽にサーバーサイド機能を導入できます。既存のサーバーを利用することも可能です。

実習

プロジェクトをインポートする Monacaにログインした状態で、ブラウザの新規タブを開いてアドレスバーに以下のURLを入力します。 http://bit.ly/2rYdumd 「インポート」ボタンをクリックするとプロジェクトのインポートが完了します。

<ons-navigator> 【Onsen UI】画面の構成 • メモアプリは、一覧画面と入力画面の２つの画面から構成されています。このような複数のページを扱うには、全体を管理する<ons-navigator>というコンポーネントを使います。<ons-navigator>は、画面遷移などの機能を提供しています。

【Onsen UI】<ons-navigator>  <ons-navigator> • 複数ページの管理とナビゲーション機能を提供します。画面上に描画されるコンポーネントではありません。 • 画面遷移のためのメソッドを持っています。 <ons-navigator page="初期表示するページ"></ons-navigator>

【Onsen UI】<ons-page> <ons-page> <ons-page> • <ons-navigator>内の各ページは、それぞれ<ons-page>タグで定義します。 • <ons-page>タグは各HTMLファイルの最上位要素として、1つだけ配置します。 <ons-navigator>

Onsen UIの構造 • 各ページは異なるHTMLファイルに分割して記述されていますが、実行時には<ons- navigator>によって各ページが index.html の中に埋め込まれる形になります。よって list.html は index.html の <head> 内に記述された JS/CSSファイルの影響をうけます。 index.html list.html

【Onsen UI】HTMLファイルを分割する例  index.html <body> <ons-navigator page="page1.html"></ons-navigator> </body>  page1.html <ons-page> <p>ページ１</p> <ons-button onclick="next()">次のページへ</ons-button> </ons-page>  page2.html <ons-page> <p>ページ２</p> </ons-page>

【Onsen UI】<template>  <template> • 論理的なHTMLファイルを定義します。 • <template>を使うことで、一つのHTMLファイル内に複数のページを定義することができます。 • id属性に指定したHTMLファイル名をページのURLとして他のコンポーネントから参照することができるようになります。 index.html ページ１ページ２各ページを独立したHTMLファイルとして扱う

【Onsen UI】index.htmlに各ページをまとめる例  index.html <body> <ons-navigator page="page1.html"></ons-navigator> <template id="page1.html"> <ons-page> <p>ページ１</p> <ons-button onclick="next()">次のページへ</ons-button> </ons-page> </template> <template id="page2.html"> <ons-page> <p>ページ２</p> </ons-page> </template> </body> この要素にはpage2.htmlという URLでアクセスすることができる

【Onsen UI】<ons-toolbar>  <ons-toolbar> • ツールバーを表示する。left、center、rightというクラス名を指定して、ツールバー上に配置する要素の位置を指定することができます。 • ツールバー上の要素として、<ons-back-button>や<ons-toolbar-button>を配置できます。 <ons-toolbar> <div class="leftまたはcenterまたはright">  </div> </ons-toolbar>

【Onsen UI】<ons-toolbar>内の要素  <ons-back-button> • １つ前のページに戻ります。  <ons-toolbar-button> • ツールバー上に配置する、戻るボタン以外の用途のボタンです。  <ons-icon> • アイコンを表示するコンポーネントです。以下のWebアイコンフォントから選択できます。  Font Awesome（http://fortawesome.github.io/Font-Awesome/icons/）  Ionicons（http://ionicons.com/）  Material Design Icons（http://zavoloklom.github.io/material-design-iconic-font/icons.html） <ons-icon icon="アイコン名"><ons-icon>

【Onsen UI】<ons-if>  <ons-if> • 端末の状態に応じて表示する内容を切り替える場合に利用します。プラットフォーム種別と端末の向きを判定することができます。 <ons-if platform="android">お使いの端末はAndroidです</ons-if> <ons-if platform="ios">お使いの端末はiOSです</ons-if> <ons-if platform="other">お使いの端末はその他OSです</ons-if> <ons-if orientation="portrait">縦向き</ons-if> <ons-if orientation="landscape">横向き</ons-if>

【Onsen UI】<ons-fab>  <ons-fab> • マテリアルデザインのフローティングアクションボタンを表示します。表示位置をposition プロパティで指定できます。

【Onsen UI】フォーム要素  <ons-input> • テキストボックスを描画します。HTML5標準のinputタグと同じ用途で利用します。他に <ons-radio> や <ons-checkbox> などのコンポーネントもあります。  <ons-button> • HTML5標準のbuttonタグと同じ用途で利用します。ボタンのサイズなどをカスタマイズできます。

【実習】STEP① SPAの作成 • まずはメモアプリの枠組みを作成します。右上の[+]アイコンを押したときに一覧画面から入力画面に遷移し、保存ボタンを押したときに入力画面から一覧画面に戻るよう処理を加えましょう。

スクリプトの実装 js/app.js の末尾に以下のコードを追記します。 // Plusアイコン押下時 function onNewButtonClick() { document.querySelector('#navi').pushPage('input.html'); } // 保存ボタン押下時 function onSaveButtonClick() { var memo = document.querySelector('#memoText').value; util.addItem(memo); document.querySelector('#navi').popPage(); }

【Onsen UI】ページ遷移  ons-navigatorコンポーネントは、ページをスタック状に積み重ねて管理します。 ons-navigatorコンポーネント.pushPage('ページURL', オプション);  popPage() • １つ前のページに戻ります。 ons-navigatorコンポーネント.popPage();  pushPage() • 指定したページへ遷移します。第二引数に遷移アニメーションの種類や次ページへ渡すパラメータなどのオプションを指定することができます。

【Onsen UI】その他のページ操作メソッドメソッド名概要 replacePage(page, [options]) 現在表示中のページをを指定したページに置き換えます。 insertPage(index, page, [options]) 指定したpageをページスタックのindexで指定した位置に追加します。 removePage(index, [options]) 指定したインデックスにあるページを削除します。 resetToPage(page, [options]) ページスタックをリセットし、指定したページを表示します。 bringPageTop(item, [options]) 指定したページをページスタックの一番上に移動します。もし指定したページが無かった場合新しくpushされます。

【実習】 STEP➁ メモの一覧表示 • ローカルストレージに保存されたデータを読みだして、一覧画面に表示する処理を追加してみましょう。ローカルストレージ [ "メモ3", "メモ2", "メモ1" ]

スクリプトの実装 js/app.jsの末尾に以下のコードを追記します。 // 各ページが表示されたとき document.addEventListener('show', function(event) { var page = event.target; // 一覧画面が表示されたとき if (page.id === 'listPage') { // ons-list要素を初期化 var list = page.querySelector('#memoList'); list.innerHTML = ''; // メモの件数分、ons-list-item要素を挿入 var items = util.getItems(); items.forEach(function(memo) { ons.createElement('<ons-list-item>' + memo + '</ons-list-item>', {append:list}); }); } });

【Onsen UI】ページが表示されたときの処理  showイベント • 各ページが表示された（ページスタックの最前面になった）タイミングで、<ons-page> のshowイベントが発生します。 • showイベントのコールバック関数に渡されるイベント引数の中に、イベントの発生元である<ons-page>要素が含まれています。 document.addEventListener('show', function(event) { var page = event.target; if (page.id === '<ons-page>のID') { // ページに対する操作 } }); イベント引数の target の中に、イベント発生元要素である ons-page オブジェクトが含まれる

【Onsen UI】その他の<ons-page>イベントイベント名概要 init ページがスタックに新しく追加されたタイミングで発生します。ページ内要素に対するDOM操作やイベント登録などの初期処理を行う際に利用します。 hide ページが隠れた（ページスタックの最前面でなくなった）後に発生します。 destroy popPage() 等の実行によって、ページがページスタックから破棄される前に発生します。

 <ons-list> • リスト全体を囲むコンテナとなるコンポーネントです。【Onsen UI】リストの表示  <ons-list-item> • リスト内の１件分の要素を表します。 <ons-list> <ons-list-item>メモ3</ons-list-item> <ons-list-item>メモ2</ons-list-item> <ons-list-item>メモ1</ons-list-item> </ons-list>

【Onsen UI】要素の生成  ons.createElement() • 第一引数に指定したHTML文字列を元に、新しい要素を生成します。 • 生成した要素の挿入先を、第二引数のオプションで指定することができます。 ons.createElement(HTML文字列, オプション); オプション説明 append 生成した要素の挿入先となる親要素を指定します。省略した場合、body要素内に挿入されます。 insertBefore appendオプションで指定した親要素内での挿入位置となる、兄弟要素を指定します。生成された要素は、insertBeforeオプションで指定した要素の前に挿入されます。省略した場合、親要素内の末尾に挿入されます。

参考ドキュメント

参考ドキュメント • コンポーネントリファレンス https://ja.onsen.io/v2/api/js/ • プレイグラウンド https://onsen.io/playground/ • テーマローラー https://press.monaca.io/fran/1743 • GitHubページ（不具合報告をして頂ける場合はIssueを送ってください） https://github.com/OnsenUI/OnsenUI

HTML5モバイルアプリ開発講座（Onsen UI入門編）

HTML5モバイルアプリ開発講座（Onsen UI入門編）

More Decks by アシアル株式会社

Other Decks in Technology

Featured

Transcript