モバイルアプリのUIフレームワークOnsen UIでコンポーネントを設置するタグ


みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

モバイルアプリ開発プラットフォームMonacaとUIフレームワークOnsen UIの初心者向けセミナーのレポートをお届けしています。

前回の記事はこちら!

モバイルアプリ向けUIフレームワークOnsen UIとは?またその特徴は?
iOS/Androidの両方に対応するハイブリッドアプリを開発できる「Monaca」。今回は、そのMonacaに標準搭載されているUIフレームワーク「Onsen UI」とその特徴についてお伝えします。

Onsen UIとは何か、またその特徴についてお伝えしました。

今回は、前回紹介したMonacaでのサンプルコードの解説をしながら、Onsen UIでいくつかのコンポーネントを配置するタグをお伝えしたいと思います。

では、行ってみましょう!

前回紹介したhtmlファイル

早速ですが、前回紹介したhtmlファイルの内容は以下のとおりです。

このソースについてプレビューを見てみると、iOS/Androidでそれぞれ以下のような画面になります。

MonacaでOnsen UIのサンプルをiOSでプレビュー MonacaでOnsen UIのサンプルをAndroidでプレビュー

それぞれのUIコンポーネントとそのタグの表記方法について解説をしていきますね。

UIコンポーネントとタグ表記

Backボタン

Onsen UIでBackボタン(前の画面に戻る)を配置するには、ons-back-buttonタグを使います。

書き方は以下のとおりです。

<ons-back-button>Back</ons-back-button>

文字列「Back」は変更もできるのでしょうが、ほとんどの場合は「Back」なんでしょうね。
 
Onsen UIのBackボタン(iOS) Onsen UIのBackボタン(Android)

Backボタンをタップしたらどうなるの?が、見た感じ不明ですが、その機能については、次回以降の記事で紹介します。

ツールバー

Onsen UIで上部のツールバーを表示するには、ons-toolbarタグを使います。

書き方は以下のとおりです。

<ons-toolbar>
 <div class=”left”>
  左側に配置する要素
 </div>
 <div class=”center”>
  中央に配置する要素
 </div>
 <div class=”right”>
  右側に配置する要素
 </div>
</ons-toolbar>

配置する場所に応じて、class属性をleft,center,rightにしたdivタグ内に要素を配置します。

今回の例では以下の部分ですね。

Backボタンを左側に、「メモ入力」という文字列を中央に配置しています。

Onsen UIのツールバー(iOS) Onsen UIのツールバー(Android)

テキストボックス

Onsen UIでテキストボックスを表示するには、ons-inputタグを使います。

書き方は以下のとおりです。

<ons-input></ons-input>

ons-inputタグには属性がいくつか付与できますが、以下のとおりです。

  • modifier属性:materialを設定するとマテリアルデザインに、underbarを設定するとテキスト入力に下線を表示する
  • placeholder属性:プレースホルダテキストを表示する。

今回の例では以下の部分ですね。

Onsen UIのテキストボックス(iOS) Onsen UIのテキストボックス(Android)

ボタン

Onsen UIでボタンを表示するには、ons-buttonタグを使います。

書き方は以下のとおりです。

<ons-button>文字列</ons-input>

onclick属性に関数を指定すればタップしたときの動作を設定することができます。

今回の例では以下の部分ですね。

Onsen UIのボタン(iOS)
Onsen UIのボタン(iOS)

まとめ

以上、Onsen UIのいくつかのコンポーネントについてのタグとイメージについて解説をしてみました。

つまり、普段使うUIパーツに関しては、Onsen UIでほぼ用意されているような感じなわけですね。

ありがたいです。

さて、次回ですが、Onsen UIを語る上で重要な「SPA」についてお伝えしたいと思います。

どうぞお楽しみに!

連載目次:Monacaによるはじめてのハイブリッドアプリ開発

HTML5とJavaScriptのスキルだけでiOS/Androidにワンソースで対応できるハイブリッドアプリを開発できるプラットフォーム「Monaca」。その最初の一歩の知識と使い方について解説をしていきます。
  1. Monacaを使えばHTML5とJavaScriptでだけでスマホアプリを作れるぞ
  2. はじめてのMonacaアプリでハイブリッドアプリ開発のスタートを切ろう
  3. Monacaで最初っからアプリ完成までを簡単なカメラアプリで体験してみよう!
  4. Monacaで作成した超簡単カメラアプリのソースコードについて解説します
  5. Monacaで作成したアプリのビルド作業の一連の流れをつかもう
  6. モバイルアプリ向けUIフレームワークOnsen UIとは?またその特徴は?
  7. モバイルアプリのUIフレームワークOnsen UIでコンポーネントを設置するタグ

  投稿者プロフィール

タカハシノリアキ株式会社プランノーツ 代表取締役
株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ
★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ
★フォロー頂ければ嬉しいです。

コメント