[Ionic x Vue] タブによる画面遷移を構築する

IonicとVueを組み合わせたWebアプリを作りましょう。タブを使った画面遷移を作ってみました。

諏訪 悠紀

2019.07.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

Ionicはクロスプラットフォームのモバイルアプリ向けフレームワークです。主にiOS/Android向けに、ワンソースコードでモバイルアプリを開発することができます。

今回はタブの使い方を解説します。

事前準備

こちらのブログ を通して作成したプロジェクトをベースに進めます。

タブとは

タブは画面下部に表示することが多い、機能を切り替える形で画面を遷移させるコンポーネントです。画面上部に表示することもできます。

タブのポイントは、単純な表示コンポーネントというだけではなく画面遷移を管理する機能も持っています。

次のように表示されます。

タブの基本構成

まずは基本的な構成を見ていきます。シンプルな構成としては以下のようになります。

<ion-tabs>
  <ion-tab tab="a">
  </ion-tab>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="a">
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

まず ion-tabs で ion-tab と ion-tab-bar を囲います。

ion-tab はタブ内に含める各画面要素です。タブ内に収める画面要素はこの中に入れる必要があります。

ion-tab-bar は実際に画面下部に配置するコンポーネントです。中にある ion-tab-button がタブバーに表示されるアイコンのボタンになります。

ion-tab と ion-tab-bar には tab 属性で同じ値を設定することで、タブが選択されたときにルーティングと現在選択されているタブがリンクします。

タブを実装する

App.vue に ion-tabs を配置します。

App.vue

<template>
  <div id="app">
    <ion-app>
      <ion-tabs>
        <ion-tab tab="music">
          <ion-header translucent>
            <ion-toolbar>
              <ion-title>Music</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content fullscreen class="ion-padding">
            <h1>Music</h1>
          </ion-content>
        </ion-tab>
        <ion-tab tab="movies">
          <ion-header translucent>
            <ion-toolbar>
              <ion-title>Movies</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content fullscreen class="ion-padding">
            <h1>Movies</h1>
          </ion-content>
        </ion-tab>
        <ion-tab tab="games">
          <ion-header translucent>
            <ion-toolbar>
              <ion-title>Games</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content fullscreen class="ion-padding">
            <h1>Games</h1>
          </ion-content>
        </ion-tab>
        <ion-tab-bar slot="bottom">
          <ion-tab-button tab="music">
            <ion-label>Music</ion-label>
            <ion-icon name="musical-note"></ion-icon>
          </ion-tab-button>
          <ion-tab-button tab="movies">
            <ion-label>Movies</ion-label>
            <ion-icon name="videocam"></ion-icon>
          </ion-tab-button>
          <ion-tab-button tab="games">
            <ion-label>Games</ion-label>
            <ion-icon name="logo-game-controller-b"></ion-icon>
          </ion-tab-button>
        </ion-tab-bar>
      </ion-tabs>
    </ion-app>
  </div>
</template>

タブ表示だけ見るとかなりシンプルで、これだけでロジックの制御なく画面切り替えが実現できます。

アプリらしい基本構成になる

多機能なアプリにはタブバーは導入頻度が非常に高いコンポーネントです。特にオムニチャネル系のアプリなどは必ずと言って良いほど導入されています。かつ、Ionicだとネイティブアプリよりもかなりシンプルに記述できて良い感じですね。

AWS