この記事はIonic Advent Calendar 2018 18日目の記事になります。
今年になってIonicを触り始め、技術書典5にもIonicの本を出させてもらいました。
この記事では、カスタムコンポーネントで神ゲーであるペルソナ5のフレームUIを再現します。
開発環境
-
Ionic
- Ionic CLI : 4.1.0
- Ionic Framework : ionic-angular 3.9.2
- @ionic/app-scripts : 3.2.1
-
System
- NodeJS : v10.9.0
- npm : 6.2.0
- OS : macOS High Sierra
Ionicでペルソナ5みたいな枠を使いたいッッッ！
こんなの↓
想定
想定としては、枠の中はion-cardと同様の使い方をしたいです。
ページのsassファイルを汚してしまうのは嫌なのでカスタムコンポーネント化します。
不規則なデザインかつ、大きさ(幅と高さ)も可変式にする必要があるのでsvgを使ってデザインを行います。
カスタムコンポーネント作成
$ ionic generate component p5-card
htmlテンプレート編集
<ion-card id="p5-card" (tap)="p5TapEvent()" no-margin>
<!-- 外側の黒い枠 -->
<svg class="p5-card-frame" viewBox="0,0,100,100" width=100 height=100 preserveAspectRatio="none" fill="black">
<polygon points="0,95 90,100 100,0 5,10"></polygon>
</svg>
<!-- 内側の白い枠 -->
<svg class="p5-card-frame" viewBox="0,0,100,100" width=100 height=100 preserveAspectRatio="none" fill="white">
<polygon points="5,90 89,95 95,5 7,15"></polygon>
</svg>
<!-- <p5-card>ここがng-contentとして挿入される</p5-card> -->
<ng-content></ng-content>
</ion-card>
やっていることは、<ion-card>の幅と高さを100として計算し、svgで枠の形のボックスを挿入しているだけです。
こうすれば、ion-cardの恩恵を受けつつ枠を作ることができます。
.scss編集
p5-card {
.p5-card-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
z-index: -1;
}
#p5-card {
position: relative;
background-color: rgba(0,0,0,0);
border: none !important;
box-shadow:none;
padding: 15px 30px 15px 20px;
text-align: center;
width: 100%;
}
}
.ts編集
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'p5-card',
templateUrl: 'p5-card.html'
})
export class P5CardComponent {
@Output() p5Tap = new EventEmitter();
constructor() {
}
p5TapEvent() {
this.p5Tap.emit();
}
}
アウトプットイベントにp5Tapというイベントを作成しました。
このように、Outputデコレータを使えばカスタムコンポーネント独自のイベントを作ることができます。
問題発生
このままionic serveしてもエラーが出ます。
標準では、カスタムコンポーネント内ではion-*といったIonicのコンポーネントを使うことができません。
では、使える使えるようにしましょう。
components.module.tsを編集します。
components.module.ts編集
import { NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from 'ionic-angular';
import { P5CardComponent } from './p5-card/p5-card';
@NgModule({
declarations: [P5CardComponent,
],
imports: [CommonModule,
IonicModule],
exports: [P5CardComponent,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class ComponentsModule {}
ここで新たにimportしたのは
- P5CardComponent
- CUSTOM_ELEMENTS_SCHEMA
- CommonModule
- IonicModule
P5CardComponentは言うまでもなく、先ほど作成したカスタムコンポーネントです。
CUSTOM_ELEMENTS_SCHEMA
まずschemasと言うのは、
Angularのコンポーネントやディレクティブではない、Angular外で定義された要素とプロパティをHTMLパーサがどのように取り扱うか指定するもの
CUSTOM_ELEMENTS_SCHEMAは、
Angularの標準コンポーネント以外をカスタムコンポーネント内で使っても認識するようにするもの
こうすることで、カスタムコンポーネント内でion-*系のコンポーネントや自分で定義したコンポーネントを使えるようになります。
CommonModule
CommonModuleは
カスタムコンポーネント内で、Angular標準のDirectiveやPipeを使えるようにするもの
つまり、
- ngIf
- ngFor
- ngSwitch
などの構造Directiveや
- AsyncPipe
- DecimalPipe
などのPipeをカスタムコンポーネントで使えるようになります。
IonicModule
app.module.tsで以下のように定義したデザインの条件をカスタムコンポーネントでも使えるようにします。
@NgModule({
declarations: [ MyApp ],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {
backButtonText: 'Go Back',
iconMode: 'ios',
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
tabsPlacement: 'bottom',
pageTransition: 'ios-transition'
}, {}
)],
bootstrap: [IonicApp],
entryComponents: [ MyApp ],
providers: []
})
IonicModuleをimportしていないと、アイコンやモーダルなど影響を受けるコンポーネントは正常に動作しなくなります。
完成
課題
paddingの値を適当に決めてしまっているので、検証してベストな値を見つけたい。
おまけ
この記事の要領でトグルとスライダーも作ってみた。
