レイアウトを行うためのもの
それではまず、最もベーシックなコンポーネントとして、各種画面内の外側でコンテンツを囲むために使われたり、レイアウトを組むために使われるコンポーネントについて解説します。図1のドキュメントの中でいうと、表1の2つがこれにあたります。
| UIの種別 | 概要 |
|---|---|
| Content | 表示領域を囲むためのUI |
| Grid | グリッド状のUIを表示する |
まずは、事実上、画面全体を囲むために使用される、Contentと呼ばれるコンポーネントについて解説します。実体としては<ion-app>と<ion-content>というコンポーネントがあります。実例はリスト1をご覧ください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ionic Framework - レイアウト</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
</head>
<body>
<!-- (1) Ionic Framework製のアプリケーションの最も外側に必ず配置する -->
<ion-app>
<!-- （3）ヘッダー -->
<ion-header>
<ion-toolbar>
<ion-title>Ionic Framework - レイアウト</ion-title>
</ion-toolbar>
</ion-header>
<!-- (2) コンテンツ -->
<ion-content class="ion-padding"><!-- (4) -->
<!-- テキストを表示 -->
<ion-text color="primary">color=primaryのテキストです</ion-text>
</ion-content>
</ion-app>
<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.js"></script>
</body>
</html>
リスト1を実際に動かすと、図2のようになります。
（1）の<ion-app>はIonic Frameworkで作成するすべてのアプリケーションの最も外側に配置するコンポーネントです。画面にオーバーレイするタイプのコンポーネントは<ion-app>の領域に描画されます。
他にもいくつかの効果があるので、是非外側に配置しておいてください。（2）の<ion-content>は、その画面のメインコンテンツを表示するための領域を提供します。1画面につき配置してよい<ion-content>は1つだけです。（3）のようなヘッダーやフッターと併用することで、コンテンツ部分とタイトルやコントロールの部分を分離して扱うこともできます。
ちなみに、（4）の ion-paddingというクラスはCSSユーティリティと呼ばれる、便利なCSSとしてフレームワーク側で用意されているものです。フレームワーク標準のちょうどいいマージンやパディングが付与されるので、活用するとよいでしょう。
もう一つ、Gridについても紹介します。<ion-grid>は、コンテンツを格子上に配置するためのコンポーネントです。行を表す<ion-row>と、列を表す<ion-col>を組み合わせて利用します（リスト2）。
<ion-grid>
<ion-row>
<ion-col>1-1</ion-col>
<ion-col>1-2</ion-col>
<ion-col>1-3</ion-col>
</ion-row>
<ion-row>
<ion-col>2-1</ion-col>
<ion-col>2-2</ion-col>
<ion-col>2-3</ion-col>
</ion-row>
<ion-row>
<ion-col>3-1</ion-col>
<ion-col>3-2</ion-col>
<ion-col>3-3</ion-col>
</ion-row>
</ion-grid>
リスト2を実行すると図3のようになります。
格子状のレイアウトが必要になった場合は、Gridを活用するとよいでしょう。
データを入力する
データの入力のためのコンポーネントは、表2のように多様に用意されています。
| UIの種別 | 概要 |
|---|---|
| Action Sheet | 画面下に選択肢のシートを表示する |
| Button | ボタンを表示する |
| Checkbox | オンオフができるチェックボックスを表示する |
| Date & Time Pickers | 日時を選択するUIを表示する |
| Floating Action Button | 画面右下に固定で表示するボタンを表示する |
| Input | ユーザー入力を受け付ける |
| Radio | ラジオボタンで選択する |
| Range | スライダーを動かして範囲や程度を決める |
| Reorder | 並べ替え可能なリストを表現する |
| Searchbar | 検索バーを表示する |
| Segment | iOSの切り替えボタンを表示する |
| Select | 選択ダイアログを表示する |
| Toggle | トグルスイッチを表示する |
これらの多くはHTMLフォームと併用可能なので、いくつか組み合わせてフォームを作成する例をリスト3で示します。
<form method="post">
<ion-item>
<ion-label position="fixed">名前</ion-label>
<!-- (1) -->
<ion-input type="text" name="name"></ion-input>
</ion-item>
<ion-item>
<ion-label position="fixed">希望日時</ion-label>
<!-- (2) -->
<ion-datetime-button datetime="datetime"></ion-datetime-button>
<!-- (3) -->
<ion-modal>
<ion-datetime id="datetime" name="desired-datetime"></ion-datetime>
</ion-modal>
</ion-item>
<div class="ion-padding">
<!-- (4) -->
<ion-checkbox name="agree-to-terms">利用規約に同意します</ion-checkbox>
</div>
<!-- (5) -->
<ion-button type="submit">送信</ion-button>
</form>
実際に動かして、いくつか値を入力してみたのが図4です。
それでは、リスト3の構成要素について解説します。まずはベーシックなところで、（1）では「Input」にあたる<ion-input>を使って入力欄を作成しました。HTML標準の<input>と、さほど使い方は変わりませんが、入力時にアニメーションがついたりして、少しリッチになっています。
次に、日時入力の例として、（2）には「Date & Time Pickers」の<ion-datetime-button>を使用しました。これは単に選択中の日時を表示するだけのボタンなのですが、（3）の日時選択UIである<ion-datetime>とモーダル表示のための<ion-modal>を組み合わせることで、手軽に日時選択モーダルをフォームへと組み込むことができます。
<ion-datetime-button>のdatetime属性に、<ion-datetime>のid属性を指定することで、ボタンと選択UIが連動します。実際に日付のボタンをクリックすると、図5のようなモーダルが表示されます。
もう一つ、簡単な入力値の例として（4）に「Checkbox」である<ion-checkbox>も使ってみました。こちらも<input type="checkbox">と近い挙動をしますが、子要素をラベルとして扱える点で、HTML標準のものよりも使い勝手が向上しています。最後に、（5）で「Button」にあたる<ion-button>を使いました。こちらもHTMLのものと近い使い方ができます。
最後に、ちゃんとフォームとして成立しているかを確認するために、送信ボタンを押してみます。ブラウザの開発者ツールを見てみましょう（図6）。
図4の内容と同等のフォームデータが送られていました。このように、自分でJavaScriptを書かなくても、少しリッチなフォームを作成できました。
