UIの学習は難しくありません。このセクションでは、はじめてのモバイルアプリを開発するための基本的な内容を記述しています。UIの「ページ」アプリケーションの世界では、ページはウィンドウや画面のことを指します。UIでは、ビューポート(通常は画面)を完全に覆うコンテナのことを指します。ページを定義するには、ons-pageコンポーネントを使用します。ページとツールバーを持つサンプルアプリ下記のコードは、ページとツールバーが1つずつ定義された最も基礎的なアプリの例になります。UIコンポーネントを含められます。UIアプリの完成です。ページ内に他のコンポーネントを入れていき、アプリを完成させてください。通常のアプリは複数のページを持ち、ページ同士が互いに遷移します。次の章では、複数のページを管理する方法について見ていきましょう。ページを管理するほとんどのアプリは複数のページ(画面)を持ちます。UIでは、複数のons-pageコンポーネントを定義して実現します。テンプレート複数ページを作成するには、テンプレートの仕組みを学ぶ必要があります。テンプレートとは実行時に構築される、画面のレイアウトを定義したものです。アプリの実行中にテンプレートを変更しても、既に作成されたものには変更が行われず、今後作成されるものだけに反映されます。UIではレイアウトはons-pageコンポーネントで定義します。他のコンポーネントは、ページの子要素になります。後で参照するためにテンプレートには特定のIDを割り当てます。テンプレートの定義には下記の2つの方法があります。ons-pageではじまるHTMLファイルをテンプレートとして利用できます。IDはそのプロジェクトのパス(例えば./my/views/page1.html)となります。メインのファイル(index.html)内に複数のテンプレートを定義できます。HTMLのtemplate要素を使うと、別のファイルに定義されているかのように扱うことができます。下記のように、IDはid属性で定義します。テンプレートの内容をここに記述--></ons-page></template><ons-template>要素も同じ目的で利用できますが、バージョン2.4.0以降はネイティブの<template>要素を使うことを推奨します。これらで定義したページの間をどのように推移して、表示を切り替えれば良いのでしょうか。UIには、その目的でons-navigator、ons-tabbar、ons-splitterという3つのコンポーネントを用意しています。複数のページを階層的に管理する必要がある場合は、ナビゲーターを使用してください。ページスタックの機能を持っており、遷移アニメーションを持つ、ページの追加(プッシュ)操作と破棄(ポップ)操作を行えます。詳細は、ons-navigatorのリファレンスを参照してください。同じレベルに複数のページがあるような場合は、タブバーを使うのがよいでしょう。この場合はタブの項目をタップすることで、ページを切り替えることができます。詳細については、ons-tabbarのリファレンスを参照してください。スプリッタースプリッターという名前ではありますが、スマートフォンなどの小さな画面を持つ端末においては、ユーザーの操作で出し入れできるサイドメニュー機能を提供します。画面サイズが大きい場合は、1つの画面を2つのページに分割します。ons-splitterのリファレンスを参照してください。これらのコンポーネントを使って複数のページを管理することで、簡単なものだけでなく、複雑なUIを持つページを作成することができます。ページは好きな順序で入れ替えることができるなど、自由に配置をすることができます。これらの3つのコンポーネントのおかげで、いわゆるルーターの仕組みを導入する必要はありません。ページのレイアウトに必要な事前知識は以上となります。ここからはJavaScriptを用いて、動的なコンポーネントを構築する方法を見ていきましょう。onsオブジェクトonsオブジェクトはJavaScriptのグローバルスコープで利用でき、多くの便利なメソッドやプロパティを提供してくれます。ons.ready(callback)メソッドはアプリの初期化(DOMContentLoadedとCordovaのdevicereadyイベント)を待つために使用できます。このイベントの後にCordovaのAPIを実行してください。</script></head>ons.ready()はons-pageの初期化とは関係ないことに注意が必要です。詳細については、ページのライフサイクルをお読みください。UIのコンポーネントは、すべてDOM要素(JavaScriptオブジェクト)です。他の要素と同様に、独自のプロパティやメソッド、イベントなどを呼び出すことができます。これによりコンポーネントの挙動を変更したり、特定のアクションを実行することができます。具体的な例としてons-navigatorを参考に見ていきましょう。属性(Attribute)は、コンポーネントのデフォルト状態や振る舞いを変更するために使用します。ほとんどの属性は任意項目となっています。いくつかの属性はページが初期化されるよりも前に指定されている必要があることに注意が必要です。ons-navigatorではanimationという属性があり、これはどのタイミングでも変更することができます。'lift');</script>プロパティプロパティ(Property)はDOM要素を使って参照できます。ons-navigatorのtopPageプロパティを使うと、一番上のページの情報を取得できます。document.querySelector('ons-navigator');console.log(myNavigator.topPage)メソッドメソッド(Method)とは関数のことで、何らかの実行を行う時に使用します。下の例はpushPageメソッドを呼び出し、新しいページを開いています。document.querySelector('ons-navigator');myNavigator.pushPage('page2.html');イベントDOMイベントは特定のタイミングで実行されます。イベントを受け取るにはaddEventListener()関数を使用します。イベントが発生した際にはイベントオブジェクトも渡されます。event);});親のコンポーネントやdocumentにイベントリスナーをセットしてもイベントを受け取ることができます。これはイベントのバブリングと呼ばれます。おめでとうございます。UIの基礎はこれで以上となります。ここから先は、他の記事を読み進めていただいても構いませんし、Playground(チュートリアル)やGitHubレポジトリなども参考になると思います。subscribing!。