Ionicで簡易コーポレートサイト（アプリ）を作成する #3 -タブバー編-

# 概要
Top・Contactができたので、tabを設置してtabでTopとContactを行き来できるようにします。

# 完成イメージ
<img width=300 src=https://dl.dropbox.com/s/w8tusma1vumssfd/000001.jpg alt="000001.jpg" />
<img width=300 src=https://dl.dropbox.com/s/f94sdzj8op4lkex/000010.jpg alt="000010.jpg" />

# タブバー実装

Top・Contactが入るページを作成します。
routingでタブができます。

```
ionic generate page tabnav
```

srcフォルダにtabnavフォルダができてファイルができているのが確認できます。
<img width="300" src="https://dl.dropbox.com/s/zpg3qwaah33v6rd/000020.jpg" alt="000020.jpg">
アプリを起動したら、Tabnavが表示されるようにルーティングを変更します。


```diff_javascript:app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
+ {
+   path: '',
+   loadChildren: () => import('./tabnav/tabnav.module').then(m => m.TabnavPageModule)
+ },
- {
-   path: 'home',
-   loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
- },
- {
-   path: '',
-   redirectTo: 'home',
-   pathMatch: 'full'
- },
- {
-   path: 'contact',
-   loadChildren: () => import('./contact/contact.module').then( m => m.ContactPageModule)
- },
- {
-   path: 'tabnav',
-   loadChildren: () => import('./tabnav/tabnav.module').then( m => m.TabnavPageModule)
- },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

```


```ts:コピペ用
  {
    path: '',
    loadChildren: () => import('./tabnav/tabnav.module').then(m => m.TabnavPageModule)
  },
```

これでアクセスができるのはTabnavのみになります。
Tabnavが他の画面を含むようにします。
tabnavのルーティングを設定していきます。tabnav-routing.module.tsを開いて編集します。

```diff_javascript:tabnav-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { TabnavPage } from './tabnav.page';

+ const routes: Routes = [
+  {
+    path: 'tabs',
+    component: TabnavPage,
+    children: [
+      {
+        path: 'home',
+        loadChildren: () =>
+          import('../home/home.module').then((m) => m.HomePageModule),
+      },
+      {
+        path: 'contact',
+        loadChildren: () =>
+          import('../contact/contact.module').then((m) => m.ContactPageModule),
+      },
+    ],
+  },
+  {
+    path: '',
+    redirectTo: '/tabs/home',
+    pathMatch: 'full',
+  },
+];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class TabnavPageRoutingModule {}
```

```ts:コピペ用
const routes: Routes = [
  {
    path: 'tabs',
    component: TabnavPage,
    children: [
      {
        path: 'home',
        loadChildren: () =>
          import('../home/home.module').then((m) => m.HomePageModule),
      },
      {
        path: 'contact',
        loadChildren: () =>
          import('../contact/contact.module').then((m) => m.ContactPageModule),
      },
    ],
  },
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full',
  },
];
```

routingができたので、ページをそれぞれ示します。
`ion-tabs`コンポーネントはスタイルを持たず、ナビゲーションを処理するために動作します。タブを切り替えるため、ion-tabsの中で`ion-tab-bar`を用意します。

```tabnav.page.html
<ion-content>
  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="home">
        <ion-icon name="home"></ion-icon>
        <ion-label>Top</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="contact">
        <ion-icon name="information-circle-outline"></ion-icon>
        <ion-label>お問合せ</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>
```
Headerを各ページにつけます。

```html:サンプル
<ion-header>
  <ion-toolbar translucent>
    <ion-title text-left>Title</ion-title>
  </ion-toolbar>
</ion-header>
```
今回は「contact.page.html」と 「home.page.html」で下記のように設定します。

```home.page.html
<ion-header>
  <ion-toolbar translucent>
    <ion-title text-left>TOP</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div id="Top">
    <p id="Title">bluecode, Lifestyle developer.</p>
  </div>
  <div id="Content">
    <p>websiteの最新情報</p>
    <p>最新の情報をご案内します。</p>
  </div>
</ion-content>
```

```contact.page.html
<ion-header>
  <ion-toolbar>
    <ion-title>CONTACT</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div id="container">
    <strong>お問い合わせ</strong>
    <form id="form" [formGroup]="ionicForm" (ngSubmit)="submitForm()">
<!-- 省略 -->
```

ionic/Androidで確認すると、タブが作成されて、遷移も可能になりました。

<img width=300 src=https://dl.dropbox.com/s/w8tusma1vumssfd/000001.jpg alt="000001.jpg" />

<img width=300 src=https://dl.dropbox.com/s/f94sdzj8op4lkex/000010.jpg alt="000010.jpg" />

# 関連コンテンツ
* 前：[Ionicで簡易コーポレートサイト（アプリ）を作成する #2 -Contact画面編-](https://qiita.com/minimumskills/private/78c450595274d78803d6)
* [超シンプルなWeb（アプリ）作成を通して各種フロントエンド技術を体験する - 2023 Early -](https://qiita.com/minimumskills/private/9e7efe86e244bb9844b0)