Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

アシアル株式会社

April 23, 2018
Tweet

More Decks by アシアル株式会社

Other Decks in Technology

Transcript

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

    View full-size slide

  2. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 2
    Onsen UIとは

    View full-size slide

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

    View full-size slide

  4. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 4
    Onsen UIの使い方
    独自タグを記述することで、ネイティブライクなUIを簡単に構築
    することができます。

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 9
    アプリの作成

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 14
    実習

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  17. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 17
    【Onsen UI】

    • 複数ページの管理とナビゲーション機能を提供します。画面上に描画されるコンポーネント
    ではありません。
    • 画面遷移のためのメソッドを持っています。

    View full-size slide

  18. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 18
    【Onsen UI】

    • 内の各ページは、それぞれタグで定義します。
    • タグは各HTMLファイルの最上位要素として、1つだけ配置します。

    View full-size slide

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

    View full-size slide

  20. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 20
    【Onsen UI】HTMLファイルを分割する例
     index.html



     page1.html

    ページ1
    次のページへ

     page2.html

    ページ2

    View full-size slide

  21. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 21
    【Onsen UI】

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

    View full-size slide

  22. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 22
    【Onsen UI】index.htmlに各ページをまとめる例
     index.html




    ページ1
    次のページへ




    ページ2



    この要素にはpage2.htmlという
    URLでアクセスすることができる

    View full-size slide

  23. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 23
    【Onsen UI】

    • ツールバーを表示する。left、center、rightというクラス名を指定して、ツールバー上に配
    置する要素の位置を指定することができます。
    • ツールバー上の要素として、やを配置できます。





    View full-size slide

  24. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 24
    【Onsen UI】内の要素

    • 1つ前のページに戻ります。

    • ツールバー上に配置する、戻るボタン以外の用途のボタンです。

    • アイコンを表示するコンポーネントです。以下の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)

    View full-size slide

  25. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 25
    【Onsen UI】

    • 端末の状態に応じて表示する内容を切り替える場合に利用します。プラットフォーム種別と
    端末の向きを判定することができます。
    お使いの端末はAndroidです
    お使いの端末はiOSです
    お使いの端末はその他OSです
    縦向き
    横向き

    View full-size slide

  26. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 26
    【Onsen UI】

    • マテリアルデザインのフローティングアクションボタンを表示します。表示位置をposition
    プロパティで指定できます。

    View full-size slide

  27. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 27
    【Onsen UI】フォーム要素

    • テキストボックスを描画します。HTML5標準のinputタグと同じ用途で利用します。他に
    や などのコンポーネントもあります。

    • HTML5標準のbuttonタグと同じ用途で利用します。ボタンのサイズなどをカスタマイズでき
    ます。

    View full-size slide

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

    View full-size slide

  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();
    }

    View full-size slide

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

    View full-size slide

  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されます。

    View full-size slide

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

    View full-size slide

  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('' + memo + '', {append:list});
    });
    }
    });

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    • リスト全体を囲むコンテナとなるコンポーネントです。
    【Onsen UI】リストの表示

    • リスト内の1件分の要素を表します。

    メモ3
    メモ2
    メモ1

    View full-size slide

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

    View full-size slide

  38. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 38
    参考ドキュメント

    View full-size slide

  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

    View full-size slide

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

    View full-size slide