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


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

<img width="1194" alt="Ionic" src="https://qiita-image-store.s3.amazonaws.com/0/34871/57415f91-078e-1a18-deb2-fda12254d66f.png">
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に対応したページが作成されたことが確認できます。

<img width="1101" alt="IonicPageに対応したページ作成後" src="https://qiita-image-store.s3.amazonaws.com/0/34871/cc0de3a6-7cb4-3f9c-2502-5fce04dc553f.png">


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

```js: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 {}
```

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

```js: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)を追加する手順を記載します！