このサイトは、Braveブラウザのプロジェクトに参加しています。Braveブラウザは新しいインターネットの形を提案するブラウザです。

   =>詳しくはこちら(Braveとブラウザとは)

Ionicでtabとサイドバーを備えたプロジェクトを作成する

0

概要

最近のアプリは、下部にTabの切り替えをおく構造が増えており、従来Webを中心に多用されていたハンバーガーメニューと併せて使用されるケースがおおくなっています、ハンバーガーメニューはユーザーが見つけにくいため、よく使用するメニューをTabに配置して、必要だけどあまり頻繁にアクセスしないもの(プライバシーポリシーなど)をハンバーガーメニュー経由でサイドメニューに配置するのが良いと考えます。

ここではIonicのTabプロジェクトへサイドメニューを追加する方法を記載します。

流れ

元になるプロジェクトをIonicのデフォルトテンプレートのひとつであるTabプロジェクトから生成します。これにサイドメニューを追加します。

参考文献

https://petercoding.com/ionic/2019/05/05/side-menu-in-ionic4/

https://ionicframework.com/jp/docs/api/menu

動作検証の環境

$ ionic info
Ionic:
   Ionic CLI : 6.4.1
Utility:
   cordova-res (update available: 0.14.0) : 0.9.0
   native-run (update available: 1.0.0)   : 0.2.9
System:
   NodeJS : v12.10.0
   npm    : 6.14.2
   OS     : macOS Mojave

準備 デフォルトのプロジェクトを作成する

Ionicのプロジェクトを新規作成します。

ionic start

としたあと、いくつか選択肢が表示されるので、

Framework → Angular

project name  → template_with_tabs_and_side

デフォルトテンプレート  → tabs

で進めます。さらにCapacitorを入れますか?(Integrate your new app with Capacitor to target native iOS and Android?) と聞かれるのでこれはどちらでもいいです。Yesにしておきました。

$ ionic start

Pick a framework! 😁

Please select the JavaScript framework to use for your new app. To bypass this
prompt next time, supply a value for the --type option.

? Framework: Angular

Every great app needs a name! 😍

Please enter the full name of your app. You can change this at any time. To
bypass this prompt next time, supply name, the first argument to ionic start.

? Project name: template_with_tabs_and_side

Let's pick the perfect starter template! 💪

Starter templates are ready-to-go Ionic apps that come packed with everything
you need to build your app. To bypass this prompt next time, supply template,
the second argument to ionic start.

? Starter template: (Use arrow keys)
❯ tabs         | A starting project with a simple tabbed interface 
  sidemenu     | A starting project with a side menu with navigation in the cont
ent area 
  blank        | A blank starter project 
  list         | A starting project with a list 
  my-first-app | An example application that builds a camera with gallery 
  conference   | A kitchen-sink application that shows off all Ionic has to offe
(Move up and down to reveal more choices)

その後、作成したプロジェクトへ移動します。今回はtemplate_with_tabs_and_sideという名前にしたので下記でプロジェクトへ移動します。

$ cd template_with_tabs_and_side/

Copy

でプロジェクトへ移動したあと、起動できるか試します。

ionic serve

Copy

こんな画面が立ち上がればOKです。なお、デフォルトがIEなどのブラウザになっているとそもそも表示されないです。ChromeやEdgeでアクセスしてください。

これがTabを備えたIonicのテンプレートプロジェクトです。Tabsの構造はSIdeMenuより実装が難しいので、Tabsのプロジェクトを元にSideMenuを備えたプロジェクトを作成していきます。

サイドバーに配置するページを作成しておく

それでは、サイドバーに配置するページを作成しておきます。mySide1,mySide2というページを作っておきます。新しいターミナルを立ち上げてプロジェクトフォルダまで移動したあと、下記コマンドでpageを2つ追加します。

ionic generate page mySide1
ionic generate page mySide2

そしたら、

http://localhost:8100/my-side1
http://localhost:8100/my-side2

で新しいページにアクセスできるようになります。こんな感じです。

以上で準備は完了です。あとはこの2つのページへハンバーガメニューからアクセスできるようにします。

実装する

考え方

Ionicは、サイドメニューを簡単に作成するためにion-menuと呼ばれるコンポーネントを提供していますので、app.component.tsとapp.component.htmlでこれを設定して、ハンバーガメニューを設置したい任意のページから呼び出します。(ようするに、<ion-menu-button></ion-menu-button>というTagでハンバーガメニューを設置できるようになります)

app.component.tsへの変更

app.component.ts とapp.module.tsに設定しおけば任意のページから呼び出すことができます。

まず、ルートコンポーネントであるapp.component.tsです。ここでハンバーガメニューの情報を設定します。

export class AppComponent {
  navigate : any;
  constructor(private platform    : Platform,
              private splashScreen: SplashScreen,
              private statusBar   : StatusBar) 
  {
    this.sideMenu();
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  sideMenu()
  {
    this.navigate =
    [
      {
        title : "Side1",
        url   : "/my-side1",
        icon  : "home"
      },
      {
        title : "Side2",
        url   : "/my-side2",
        icon  : "home"
      },
    ]
  }
}

URLで表示する配列を上記のように追加したら、app.component.htmlにion-menuコンポーネントを追加して、サイドメニューを作成します。

変更前:

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

となっているのを丸ごと下記に変えます。

<ion-app>
    <ion-menu side="start" menuId="first" contentId="content1">
        <ion-header>
          <ion-toolbar>
            <ion-title>Navigate</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list *ngFor="let pages of navigate">
          <ion-menu-toggle auto-hide="true">
            <ion-item [routerLink]="pages.url" routerDirection="forward">
                <ion-icon [name]="pages.icon" slot="start"></ion-icon>
                   {{pages.title}} 
            </ion-item>
          </ion-menu-toggle>
          </ion-list>
        </ion-content>
      </ion-menu>
  <ion-router-outlet id="content1"></ion-router-outlet>
</ion-app>

<ion-router-outlet id=”content1″>という部分のid=の部分がないと動かないので気をつけてください。

以上で終わりです。最後に配置したいページでMenu Buttonの設定します。

配置したいページでのMenu Buttonの設定

‘http://localhost:8100/tabs/tab1 ‘に接続したとき左上にハンバーガメニューを設置します。


変更前:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 1</ion-title>
    </ion-toolbar>
  </ion-header>

  <app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>

となっているのを下記のように変更します

<ion-header>
  <ion-toolbar>
      <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
      </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 1</ion-title>
    </ion-toolbar>
  </ion-header>

  <app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>

そうすると、http://localhost:8100/tabs/tab1にアクセスすると下記のように表示されます。

0

⭐️Brighten up your day with NP-Systems⭐️


this is single-default.php