Ionicでウォークスルーをつくる方法

スマートフォンを操作するサムネイル

この記事は執筆当時のバージョン v3.19.1 の内容で、現在は仕様が変更されている可能性があります。
2019年5月に、Ionic は v4.4.0 ( コードネーム : Beryllium ) が発表されています。
https://blog.ionicframework.com/ionic-release-4-4-0-beryllium/

今後の Ionic の更新状況にあわせ、随時情報を収集予定です。

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のコンポーネントやその他機能について、紹介していければと思います!