Onsen UI
Onsen UIとはモバイル向けWebアプリで使用できるコントロールのセットのことをいい、
Monacaの提供元からオープンソースで公開されている。Monacaアプリには、これを標準的に組み込むことができる。
例えばボタンは<ons-button></ons-button>のようにHTMLのタグ形式で記述するだけで、Onsen UIの機能を備えたボタンコンポーネントとして使用できる。また、「UI」という名前が付いているものの、Onsen UIにはナビゲーションや画面遷移などのシステム寄りの機能も組み込まれており、例えば次へ移動して前に戻るナビゲーションシステムは<ons-navigator>コンポーネントが制御、管理する。
Monaca IDEの基本機能
メニュー
Monaca IDEの上部にあるメニューには［ファイル］や［編集］など、見慣れた項目が並んでおり、主に以下のような機能が提供されている。
［ファイル］からの選択でよく使用する機能には［JS/CSSコンポーネントの追加と削除］がある。ここからはjQueryやCordovaの機能がプラグインとしてプロジェクトに追加できる
［ビルド］はMonacaアプリのアプリケーションファイルの作成に使用する
［設定］からはハイブリッドアプリのOSごとの設定に使用する項目にアクセスできる
デバックパネル
コードエディターの下にあるのはデバッグパネルと呼ばれる領域だ。
このパネルでは主に、デフォルトで表示される［Console］タブの［Log］タブの機能を使用する。Monacaデバッガーで実行するアプリのconsole.log()関数の結果はここに表示される。console.log()の結果は、後述するデバッガーの［App Log］画面でも確認できるが、特にアプリを実行しながら結果をリアルタイムに確認したい場合に非常に役立つ。
コード記述
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
ここではviewportメタタグを使って表示領域をデバイスの幅と高さに設定し、初期と最大の表示倍率を「1」、ユーザーのズーム操作を許可しない、という設定を行っている。viewportメタタグのこの設定によって、このアプリはモバイルデバイスの画面で適切に表示されるようになる。
{<ons-navigator title="Navigator" var="myNavigator" page="page1.html">
</ons-navigator}>
<ons-navigator>というのはOnsen UIのコンポーネントの1つで、ページのナビゲーションを管理、制御する。Onsen UIコンポーネントは、HTMLと同じタグ形式でHTMLファイル内に記述していく。titleやvar、pageは<ons-navigator>の属性だ。varにはJavaScriptコードからこの<ons-navigator>コンポーネントを参照するための名前を指定する。page属性には<ons-navigator>で最初に表示するHTMLページを指定する。“初めてのOnsen UIアプリ”を起動して最初にpage1.htmlが表示されたのは、page属性に「page1.html」が指定されていたためだ。
その他記述について
最終更新：2017年05月29日 18:01
