こんにちは、初めての方は初めまして。
AstCrowと申します。
タイトルのとうりですが、この回ではionicでの制作でガワ部分（見える部分）の制作云々で便利だったコンポーネントについて書いていこうかなと思います。
今回は
- コンポーネントとは
- 実際に使ってみたもの
- 使ってみたものの所感
あたりを書いておこうと思います。自分への忘れないようメモ書きでもあります。
この子はガワ兼仕組みと機能面にも関係あるので、デザインカンプ作る前にこんな機能が簡単に入れられるんだと、最初にさっとコンポーネントを確認してみてもいいかもしれないです。
コンポーネントとは
コンポーネントとはなんぞやと、詳細は公式さんのサイトをどうぞ。
ざっくりいって便利なUI等の機能が用意されているよ、簡単に決まったタグやソースを入れるだけで難しいこと書かなくても実装できるよ、と。
例えばアラート。
上記の公式サイトではデモが載っていて実際にこれをソースどうりに入れるとどんなものが出てくるのか確認することができます。
実装はhtmlとtype script（フレームワーク:Angular/Vue.js）、見た目を調整するならcssもといった感じで、例えばボタンを押してアラートを出す実装をしたい場合は
実装ページのhtml
<ion-content>~
//なにがしアラートを呼ぶボタンやら
//例：<button ion-button (click)="Alert()">●●/button>
~</ ion-content>
実装ページのtsファイル
~
import { AlertController } from '@ionic/angular';//追加
~constructor(public alertController: AlertController) {}
~async Alert() { const alert = await this.alertController.create({ cssClass: '●好きなclass名●',//アラートにclassを追加できます。オリジナルのアラートにしたい場合はどうぞ。header: 'Alert：ここが見出しです', subHeader: 'Subtitle：サブタイトル入れられます', message: 'ここにメッセージ入れます', buttons: ['ここがアラート下のボタン'] }); await alert.present(); }
~
といった感じで書くと
こんな感じでアラートを簡単に実装できます。（赤字の所を実装ページに追加する感じです）
css等いじらなくてもこの綺麗な形で出てきます。
見た目をいじりたい際は、アラートの実装ソースでcssClassを設定すると任意のclass名をアラートの頭に追加させることができるので、これを使って見た目もいじれる、と。
上記の例では単にアラートを出すだけのシンプルな実装をしていますが、アラートのボタン箇所をラジオボタンに変えたりボタン押した後に何かしらの仕掛けを入れたりといったことも可能です。
詳細は上記に公式さんのURL載せていますので、そちらを参考にどうぞ。
ちなみにこの記事で載せているソース等はionicフレームワーク4以降の内容です。
3系はまたソース等若干異なるので要注意です。３系のコンポーネントも公式サイトに載っているのでそちらを参考にすると確実かと思います。
前に間違えて3系のテンプレートを選んで作成してしまったことがあったのですが、その際アラートを入れようとした際subHeaderの指定ができなかった気がします。
実際に使ってみたもの
Astでは
-
アラート（ion-alert）
-
スライド（ion-slides）
-
リスト+ アイテム（ion-list + ion-item）
-
スクロール（ion-infinite-scroll）
-
ラジオボタン等の入力フォーム
あたりを使っています。さっくりこんな機能が追加できるよ、ここで使っているよ紹介しようかなと思います。
もし実際に動いている様子が気になりましたら無料アプリですので是非インストールしてみてください。私が喜びます（笑）。
アラート（ion-alert）
コンポーネントとは、でも既に紹介した子なのでこの子はちょっと省きます。
●●できません！といったエラー以外にもテンプレート選択でも使っていました。
スライド（ion-slides）
リスト+ アイテム（ion-list + ion-item）
これが一番便利だと個人的に思います。
フォームやデータを複数入れたり、スワイプさせて何かしらのボタンを出すような機能が簡単に実装できます。
ちょっとAndroidユーザにはピンとこない表現ですが…iphoneのメモ帳のメモ一覧リストみたいなスワイプ操作が実装できる感じです。簡易なメモアプリとかにも最適。
Astではデータ管理の画面でこれを使っていて、個々データの変更・削除をしたい際に変更したいデータのリストを右から左へスワイプ⇒該当ボタンタップの簡単操作でいじれるように実装しています。
スクロール（ion-infinite-scroll）
これも便利です！
一番下までスクロールした際にアクションを追加したりできるコンポーネントです。
Astの場合大量にデータを保存する可能性があるため、全部が全部データ管理画面に試合結果情報がリストで出ないようにしています。
表示が重くならないように、遅くならないよう対策でもあります。
で、一番下までスクロールした場合に画面に追加で20件づつ試合結果情報が追加表示されるといった感じ使用しています。
ちなみにスクロールしてアクションする際、ロードアイコンが動く読み込みモーションがデフォルトで付いてきますので見た目もあまり気にせずすぐに使える点も素敵。（オプションで種類もいくつか選べます。もちろん任意のものを作って変更も可能）
ラジオボタン等の入力フォーム
こちらhtmlタグでもありますが、コンポーネントで用意されているものもあります。
オプションで色を変えたりが可能なのと、既にできているパーツといった感じでサクッと見た目整ったものが使えるのがいい所。（もちろんcssである程度調整は可能）
ちなみにデフォルトそのままだとiphoneとAndroidでチェックボタンやラジオボタンでデザインが異なっていたりするので統一したい方は要注意。
使ってみたものの所感
::part(native)とかでいじれないとことはないのですが、AndroidでOSによってはこれが効かない場合があったり…。スクロール（ion-infinite-scroll）は下までスクロールしたらアクションとなっているが、画面からどのくらいスクロールしたかで判断しているぽいです。何か画面内にボックス等を作りその中でスクロールさせているものに実装しようとした際はうまく行かなかったです（私が変な実装していた可能性もあるのでアレですが）。
入力フォームは、テキストエリア等文字入力する系は要注意。iphone13.7以下で下から出てくる入力キーパッドによりフッターが持ち上がってしまう不具合が起きます。またこれが起きるとデザインや他実装よっては画面の高さが持ち上がったフッター分おかしくなってしまう場合もあり…ちなみにhtmlタグに変えてもダメだったので厳しい…。これが起きると画面の表示ボタンと実際のボタンアクション位置がずれてしまって押せないとかでAst制作時は悩みました…。
ただiphoneで13.7以下のユーザ数は割と少数なので、個人の制作アプリとかなら切り捨ても視野には入ると思います。
最後に
便利で簡単に実装できるコンポーネントですが、デザイン等の都合で細かい調整を入れようとすると意外なところで引っ掛かることが多かった気がします。
逆に公式さんのデモどうりとかの使い方や仕様の場合はそこまで引っ掛からなかった印象です。