Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@flour_planaria(こむぎこ)inPlanaria Inc.

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

Last updated at Posted at 2019-08-02

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.

add_tabs1.png

add_tabs2.png

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

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?