Ionicのコンポーネントは多種多様

Ionicには、実に多種多様なコンポーネントが用意されています。

今日は、
その中から、アプリのいわゆる「ウォークスルー」画面が簡単に実装できる
コンポーネントを紹介します。

今回ご紹介するのはこれのことです。
https://ionicframework.com/docs/api/slides

記述するのは下記。ウォークスルーを表示したい対象の画面に、これを記述するだけ。

<ion-slides pager>
  <ion-slide>
    <h2>Slide 1</h2>
  </ion-slide>
  <ion-slide>
    <h2>Slide 2</h2>
  </ion-slide>
  <ion-slide>
    <h2>Slide 3</h2>
  </ion-slide>
</ion-slides>

…なんとも簡単なのですが、
これを、対象のページの view に相当するhtmlに記述して
ビルドするだけで、
いわゆる「ウォークスルー」の原型ができてしまいます。

備忘録：ビルドに関するコマンドは下記の通り

Andoroidの場合：

$ ionic cordova build android --prod

iOSの場合：

$ ionic cordova build ios --prod

ウォークスルーのページを増やすには

ウォークスルーのページを増やしたい場合は

 <ion-slide></ion-slide>

を増やしていくイメージです。

ion-slide の中のコンテンツ(つまり、ウォークスルーの中の各スライド)に対する装飾は、
通常のWebサイトを記述するように、html,scssで行うことができます。

このように、ionicはデフォルトのコンポーネント自体がとても豊富で、
「これを作りたい」と思った時にすぐに実装自体はできてしまいます。
(※「実装自体」というのは「車輪の再発明」をしなくて良い、という意味で。)

ionicのコンポーネント一覧：
https://ionicframework.com/docs/components/

まとめ

上に書いたように、ウォークスルーの機能自体はあらかじめ用意されているので、ionicの実行環境さえ整えてあれば、すぐにウォークスルーを実装することが可能です。
もちろん独自のUIを作りたい場合も、
scssやjs側で手を加えることによっていくらでも実現が出来ますので、オリジナリティを出す事も充分に可能です。

今後も、ionicのコンポーネントやその他機能について、紹介していければと思います！