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

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

本資料は、クリエイティブ・コモンズ・ライセンス 表示-改変禁止 (CC BY-ND 4.0)に基づいて公開しております。https://creativecommons.jp/licenses/

営利・非営利を問わず、勉強会やトレーニング等で自由にご活用頂けます。

200f7b54477ac809555e8e690ff3162a?s=128

アシアル株式会社

April 23, 2018
Tweet

Transcript

  1. 1.

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 1

    HTML5モバイルアプリ開発講座 Onsen UI入門編 アシアル株式会社
  2. 3.

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 3

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 4

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 5

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 6

    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アプリ
  6. 7.

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 7

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 8

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 10

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 11

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 12

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 13

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 15

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 16

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 17

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 18

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 19

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 20

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 21

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 22

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 23

    【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>
  21. 24.

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 24

    【Onsen UI】<ons-toolbar>内の要素  <ons-back-button> • 1つ前のページに戻ります。  <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>
  22. 25.

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 25

    【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>
  23. 26.

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 26

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 27

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 28

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 29

    スクリプトの実装 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(); }
  27. 30.

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 30

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 31

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 32

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 33

    スクリプトの実装 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}); }); } });
  31. 34.

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 34

    【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 オブジェクトが含まれる
  32. 35.

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 35

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 36

     <ons-list> • リスト全体を囲むコンテナとなるコンポーネントです。 【Onsen UI】リストの表示  <ons-list-item> • リスト内の1件分の要素を表します。 <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>
  34. 37.

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 37

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 39

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