モバイルアプリの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ファイルの内容は以下のとおりです。



  
    
Back
メモ入力
保存

このソースについてプレビューを見てみると、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
メモ入力

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でコンポーネントを設置するタグ

タイトルとURLをコピーしました