Ionicでモバイルアプリを作ろう！(14)プラットフォームに応じて表示を変える

クロスプラットフォーム対応のモバイルアプリ開発フレームワークであるIonicの使い方を紹介していきます。

今回は実行プラットフォーム(Android or iOS)に応じて表示を切り替える方法を紹介します。

ShowWhen

Ionicフレームワークは、プラットフォーム毎に自動でレイアウトを切り替えてくれるので、同一のテンプレートを用いてAndroid/iOS両方に対応したアプリを作ることができるのが特徴です。とはいえ、それぞれのプラットフォームに合わせたレイアウトを個別に実装しなければならない場合がどうしても出てきます。そのような場合に便利なのがshowWhen属性です。

Ionicには標準でshowWhen属性が用意されています。値としてプラットフォーム名を指定することで、その評価値がtrueならば表示、falseなら非表示にすることが出来ます。これによってプラットフォームに応じて表示を切り替えます。値には”android”または”ios”を指定します。

ちなみにhideWhenという属性もあり、こちらは評価値がfalseならば表示、trueならば非表示にしてくれるので同じことが可能です。)

サンプル

以下でshowWhenを用いた表示切り替えのサンプルを提示します。

Modalのナビゲーションバー（ツールバー）上にModalを閉じるボタンを実装する例です。
Androidではバツアイコンをバーに表示することが多いですが、iOSではあまり見ません。よって以下の例では、Androidではバツアイコン、iOSでは「キャンセル」テキストのボタンを表示します。

<ion-header>
  <ion-navbar color="primary">
    <ion-title>モーダル</ion-title>
    <ion-buttons start>
      <button ion-button (click)="dismiss()">
        <span showWhen="ios">キャンセル</span>
        <ion-icon name="md-close" hideWhen="ios"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
 
<ion-content>
  //コンテンツ
</ion-content>