IonicPage採用時のHTMLタグ拡張(Custom Components)実装について (1/2)

Ionicは標準で美しいコンポーネントが用意されており、
「非デザイナー ✕ マルチプラットフォームアプリを一度に作りたい」デベロッパーにとって非常にありがたいフレームワークです。

Ionic - Build Amazing Native Apps and Progressive Web Apps with Ionic Framework and Angular http://ionicframework.com/

Ionicに用意された標準コンポーネントを自由に使いまわすことで、
UIのトンマナが統一され誰でも洗練されたインターフェイスを持つアプリケーションが作れます。

トンマナとは、「トーン＆マナー」の略で、 広告におけるデザインの一貫性を持たせることを指します。また、ブランドのイメージカラーとホームページのデザインカラーを合わせる必要があるなど、「 トンマナ」は企業部 ブランディングにおいても重要です。
https://ferret-plus.com/980

#Ionic標準コンポーネントだけでアプリがつくれるか？
とはいえ、標準コンポーネントでできることは、大枠のUIを整えるところに終始するケースが多く、
少しきめ細かなインターフェイスを作りたいと考えると従来のように標準HTMLタグを使用しながらレイアウトを作っていくことになります。

そして
「ここも標準プラスアルファのUIが必要」
「こっちもだ・・・」
「あ、ここも」
とHTMLをどんどん打ち込むことで、
徐々にHTMLの可読性が下がりメンテナンスや開発効率がさがってきます。

また
「この画面とこの画面のUIはよく似てるな・・」
「コピペしちゃえ！」
みたいなことも現場でのあるあるではないでしょうか？

それらを解決するのが「カスタムコンポーネント」と呼ばれるものです。

#カスタムコンポーネント

カスタムコンポーネントは、複雑になりそうであったり、繰り返し利用されそうなUIを新しいHTMLタグとして独自定義し、
アプリケーション内で使い回しができるHTMLの標準機能になります。

「HTML に新しい要素を定義する」
https://www.html5rocks.com/ja/tutorials/webcomponents/customelements/

#Ionicにおけるカスタムコンポーネント

Ionicでカスタムコンポーネントを用意するのは簡単です。
詳細はこちらの公式ブログで紹介されています。

「Custom Components in Ionic 2」
https://www.joshmorony.com/custom-components-in-ionic-2/

#IonicPage

IonicにはLazyLoadingに対応したIonicPageという考え方があります。

※LazyLoadingは、アプリ起動時間の短縮を目的に、モジュールの分割を行い、必要時にダウンロードを行わせる考え方です

参考：[Ionic]LazyLoadingでのファイルのサイズとかロード時間とか
https://qiita.com/yosshitaku067/items/383ca4ad906905c59f57

IonicPageに対応した新しいページを作るためには、ionic g page などのCLIコマンドで作成できます。
(以下はhomeという新しいページを作成したサンプル)

注意：
ionic startなどでプロジェクトを作成された場合は、事前に
./src/pages/homeフォルダを削除
./src/app/app.module.tsからHomePage関連の設定削除
./src/app/app.component.tsから
import { HomePage } from '../pages/home/home'; を削除
rootPage:any = HomePage;
↓
rootPage:any = "HomePage";
に修正が必要です。

$ ionic g page

? What should the name be? home
[OK] Generated a page named home!

上のコマンドを実行するとIonicPageに対応したページが作成されたことが確認できます。

若干の修正として、HomePageをimportしている箇所などが不要になります。（以下でコメント化しています）

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
// import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    // HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    // HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

また、画面遷移についても、インスタンス連携ではなく、文字列での遷移に代わります。

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
// import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  // rootPage:any = HomePage;
  rootPage:any = "HomePage";

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

ここまでがIonicPageの説明や作成サンプルになります。
次回、IonicPageへHTMLタグ拡張(Custom Components)を追加する手順を記載します！