cordova でのスマホアプリ開発 ３

Ionic の構成

作成したアプリケーションのフォルダ構成は以下の通り

[C:\cordova_app\helloIonic]
├─e2e
├─node_modules
├─platforms
├─plugins
├─resources
├─src
└─www

機能追加する場合は、/src 以下を編集する

前回、アプリケーション作成時のテンプレートとして tab を選んでいるため /src/app 以下に TAB の構成が作成されている

[C:\cordova_app\helloIonic\src]
├─app
│ ├─tab1
│ ├─tab2
│ ├─tab3
│ └─tabs
├─assets
│ └─icon
├─environments
└─theme

ファイルの種類

テンプレートや generate で page 作成した場合、以下のファイルが作成される

• app-routing.module.ts：ルーティング定義

• app.module.ts：component の定義と読込

• app.component.html：html を記載

• app.component.scss：css を記載

• app.component.spec.ts：テスト用

• app.component.ts：ページ内処理

なお、app-routing.module.ts は app、tabs 内、app.component.scss はそれ以外のフォルダにのみ作成される

呼出

\src\main.ts

AppModule の起動定義が記載されている

import { AppModule } from './app/app.module';

\src\app\app.module

ルーティングの読み込み

import { AppRoutingModule } from './app-routing.module';

\src\app\app-routing.module.ts

ルーティング定義

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }
];

\src\app\tabs\tabs.module.ts

ルーティングの読み込み

import { TabsPageRoutingModule } from './tabs.router.module';

\src\app\tabs\tabs.router.module.ts

ルーティング定義

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: '../tab3/tab3.module#Tab3PageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

tab の追加

tab を追加するには、まず page を新たに作成する必要がある

他のタブをコピーしても良いが、ionic ではコマンドで page を作成することができるのでそちらを利用する

C:\cordova_app\helloIonic>ionic g
? What would you like to generate? (Use arrow keys)
> page
  component
  service
  module
  class
  directive
  guard
(Move up and down to reveal more choices)

C:\cordova_app\helloIonic>ionic g
? What would you like to generate? page
? Name/path of page: tab4
> ng.cmd generate page tab4
CREATE src/app/tab4/tab4.module.ts (533 bytes)
CREATE src/app/tab4/tab4.page.html (123 bytes)
CREATE src/app/tab4/tab4.page.spec.ts (677 bytes)
CREATE src/app/tab4/tab4.page.ts (248 bytes)
CREATE src/app/tab4/tab4.page.scss (0 bytes)
UPDATE src/app/app-routing.module.ts (538 bytes)
[OK] Generated page!

ionic g コマンドで各機能をアプリケーションに追加することができる

古いバージョンでは tabs が候補にあったようであるが、ionic5 では無くなっているので、page で作成

※ヘルプを参照することで、どんな機能を作成できるかは参照可能

C:\cordova_app\helloIonic>npx ng g --help
Generates and/or modifies files based on a schematic.
usage: ng generate <schematic> [options]

arguments:
  schematic
    The schematic or collection:schematic to generate.

options:
  --defaults
    When true, disables interactive input prompts for options with a default.
  --dry-run (-d)
    When true, runs through and reports activity without writing out results.
  --force (-f)
    When true, forces overwriting of existing files.
  --help
    Shows a help message for this command in the console.
  --interactive
    When false, disables interactive input prompts.

Available Schematics:
  Collection "@schematics/angular":
    application
    class
    component
    directive
    e2e
    enum
    guard
    interface
    library
    module
    page
    pipe
    service

page を作成後、名前を指定（上記では tab4 としている）することで生成が始まる

\src\app\app-routing.module.ts の修正

追加した page は自動的に app-routing.module.ts に追記される

今回は tab として利用するので削除する

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'tab4', loadChildren: './tab4/tab4.module#Tab4PageModule' }
];

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }
];

\src\app\tabs\tabs.router.module.ts の修正

逆に、abs.router.module.ts にルーティング定義を追記する

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: '../tab3/tab3.module#Tab3PageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: '../tab3/tab3.module#Tab3PageModule'
          }
        ]
      },
      {
        path: 'tab4',
        children: [
          {
            path: '',
            loadChildren: '../tab4/tab4.module#Tab4PageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

\src\app\tabs\tabs.page.html の修正

tabs.page.html にはタブ表示部の内容が記載されているので追記

    <ion-tab-button tab="tab4">
      <ion-icon name="pulse"></ion-icon>
      <ion-label>Tab Four</ion-label>
    </ion-tab-button>

コンパイルして確認する

C:\cordova_app\helloIonic>ionic serve
> ng.cmd run app:serve --host=localhost --port=8100
[INFO] Waiting for connectivity with ng...

[INFO] Development server running!

       Local: http://localhost:8100

       Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

[ng] i ｢wdm｣: wait until bundle finished: /
[ng] Date: 2019-07-18T05:52:25.384Z
[ng] Hash: 2f715eebf9043dbf4796
[ng] Time: 10432ms
[ng] chunk {common} common.js, common.js.map (common) 14.2 kB  [rendered]
[ng] chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 285 kB [initial] [rendered]
[ng] chunk {main} main.js, main.js.map (main) 23.9 kB [initial] [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 8.94 kB [entry] [rendered]
[ng] chunk {styles} styles.js, styles.js.map (styles) 67.6 kB [initial] [rendered]
[ng] chunk {tab1-tab1-module} tab1-tab1-module.js, tab1-tab1-module.js.map (tab1-tab1-module) 6.42 kB  [rendered]
[ng] chunk {tab2-tab2-module} tab2-tab2-module.js, tab2-tab2-module.js.map (tab2-tab2-module) 4.6 kB  [rendered]
[ng] chunk {tab3-tab3-module} tab3-tab3-module.js, tab3-tab3-module.js.map (tab3-tab3-module) 4.6 kB  [rendered]
[ng] chunk {tab4-tab4-module} tab4-tab4-module.js, tab4-tab4-module.js.map (tab4-tab4-module) 4.68 kB  [rendered]
[ng] chunk {tabs-tabs-module} tabs-tabs-module.js, tabs-tabs-module.js.map (tabs-tabs-module) 8.03 kB  [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.45 MB [initial] [rendered]
[INFO] ... and 95 additional chunks
[ng] i ｢wdm｣: Compiled successfully.

定義を修正しないといけないので、コマンドで生成するメリットはあまり感じない

blank ページを作る場合以外は、コピーしたほうが早そう

cordova でのスマホアプリ開発 ４