Edited at

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

More than 1 year has passed since last update.

Ionicは標準で美しいコンポーネントが用意されており、

「非デザイナー ✕ マルチプラットフォームアプリを一度に作りたい」デベロッパーにとって非常にありがたいフレームワークです。

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に対応したページが作成されたことが確認できます。

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