Ionic2アプリのイントロスライダーを作成する

Ionic2で利用可能なion-slidesコンポーネントを使用すると、アプリのイントロスライダーを簡単に作成できます。 これは、アプリの使用方法に関する簡単なチュートリアルまたは機能のショーケースとして使用できます。

イントロスライダーの実装は非常に簡単です。少し注意が必要なのは、アプリを初めて開いたときにイントロスライダーを1回だけ表示する方法だけです。 そのために、 IonicStorageを使用します。

イントロページの追加

Ionic CLI を使用して、イントロページを追加できます。

$ ionic g page Intro

次に、新しいページをアプリモジュールにインポートし、それをdeclarationsとentryComponentsに追加します。 また、ストレージをインポートし、プロバイダーのリストに含めていることを確認してください。

// ...
import { Storage } from '@ionic/storage';
import { IntroPage } from '../pages/intro/intro';

ホームページコンポーネント

この例では、 Home.ts がデフォルトのホームページコンポーネントであり、ユーザーはイントロスライダーを表示した後、またはイントロスライダーを一度表示した後に表示されます。

先に進み、ホームページコンポーネントにイントロページNavControllerとStorageをインポートします。 また、コンストラクターにNavControllerとStorageを挿入する必要があります。

// ...
import { NavController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { IntroPage } from '../pages/intro/intro';

constructor (public navCtrl: NavController, public storage: Storage) {}

そして、ホームページコンポーネントクラス内で、Ionicの ionViewDidLoad フックを使用して、intro-doneキーがストレージに設定されているかどうかを確認しましょう。 表示されていない場合は、イントロページが再度表示されないように設定してから、NavControllerを使用してスライダーでイントロページを表示します。 navCtrl.pushの代わりにnavCtrl.setRootを使用して、イントロページに戻るボタンが表示されないようにする方法に注目してください。

ionViewDidLoad() {
  this.storage.get('intro-done').then(done => {
    if (!done) {
      this.storage.set('intro-done', true);
      this.navCtrl.setRoot(IntroPage);
    }
  });
}

スライダーコンポーネント付きの紹介ページ

これでセットアップ作業が完了し、スライダーとイントロページ自体に焦点を当てることができます。 スライダーはion-slidesコンポーネントで定義し、個々のスライドはion-slideで定義します。

<ion-content>
  <ion-slides pager="true" parallax="true" padding>

    <ion-slide>
      <img src="assets/img1.svg">
      <h1>Welcome to my app!</h1>
    </ion-slide>

    <ion-slide>
      <img src="assets/img2.svg">
      <h1>All of the features</h1>
      <p>Here's what you can do with the app...</p>
    </ion-slide>

    <ion-slide>
      <img src="assets/img3.svg">
      <h1>Get started now!</h1>
      <button ion-button outline small (click)="navHome()">
        Start using the app
      </button>
    </ion-slide>

  </ion-slides>
</ion-content>

ion-slides コンポーネントは、さまざまなオプションを選択できます。 ここでは、ポケットベルと視差をtrueに設定します。 Pagerは、スライドの下部に小さな箇条書きを追加して、スライドの数と現在アクティブなスライドを示します。 すべてのオプションのリストについては、公式ドキュメントを参照してください。

スライダーがページの高さ全体を占めるようにするために、ページにナビゲーションバーがないことに注意してください。

ホームページに戻る

最後のスライドのボタンは、 navHome メソッドを呼び出して、ホームページをルートページに戻します。 Introページコンポーネントクラスでメソッドを定義するだけで、NavControllerがインポートされてコンストラクターに挿入され、ホームページがインポートされていることを確認できます。

// ...
import { NavController } from 'ionic-angular';
import { HomePage } from '../home/home';

// ...
export class IntroPage {
  constructor(public navCtrl: NavController) {}

ちょっとしたスタイル

最後に、スライダーのポケットベルの箇条書きはデフォルトで青色になっているため、ここでは、イントロページのSassファイルに少し追加して色を変更しました。

page-intro {
  .swiper-pagination-bullet-active {
    background: #A713E8;
  }
}