ここからは足早に手じまい２
さて、前回までで自分で作ったゲームブックデータを扱える(表示がどうのとかには目をつむる)所まで出来たのを確認しました。
ここから、もうちょっとだけゲームブックアプリっぽくするのが目標になります。
これを書きながら調べものしてテストして・・・スンナリ行くかは分からないですが、ライブ感的なもの位は感じられたら・・・いいのかな？
１．UIコンポーネント(ユーザーインターフェースの部品)
実の所、ionic提供の白紙テンプレートアプリには、"Ready to create an app?Start with Ionic UI Components"とか表示されてます。
UI Components の所にはリンクがあって、Ionic提供のUIコンポーネントのページに飛びます。
とりあえずは、Button と、 Card と言うのがあればなんとかなりそうに思いました。
２．Card を使う
Card は説明によると(部分的にですが日本語選択すると日本語で書いて有ります)画像、ボタン、テキストを入れる入れ物のような感じのようですね。
見た感じですが、src\app\home\home.page.html の <div id="container"></div>の間に入れれば動きそうですね。
サンプルコードもあったので早速入れてみます。
追加したサンプルコード
----------------------------------------
<ion-card>
<ion-card-header>
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
<ion-card-title>Card Title</ion-card-title>
</ion-card-header>
<ion-card-content>
Keep close to Nature's heart... and break clear away, once in awhile,
and climb a mountain or spend a week in the woods. Wash your spirit clean.
</ion-card-content>
</ion-card>
<ion-card>
<ion-item>
<ion-icon name="pin" slot="start"></ion-icon>
<ion-label>ion-item in a card, icon left, button right</ion-label>
<ion-button fill="outline" slot="end">View</ion-button>
</ion-item>
<ion-card-content>
This is content, without any paragraph or header tags,
within an ion-card-content element.
</ion-card-content>
</ion-card>
<ion-card>
<ion-item href="#" class="ion-activated">
<ion-icon name="wifi" slot="start"></ion-icon>
<ion-label>Card Link Item 1 activated</ion-label>
</ion-item>
<ion-item href="#">
<ion-icon name="wine" slot="start"></ion-icon>
<ion-label>Card Link Item 2</ion-label>
</ion-item>
<ion-item class="ion-activated">
<ion-icon name="warning" slot="start"></ion-icon>
<ion-label>Card Button Item 1 activated</ion-label>
</ion-item>
<ion-item>
<ion-icon name="walk" slot="start"></ion-icon>
<ion-label>Card Button Item 2</ion-label>
</ion-item>
</ion-card>
----------------------------------------
幾つかの使用例があるようですが、ボタンを使用した例も有り、このまま使えそうですね。
多少いじってみたところ、直感でどうにかなる部分も多いようですので、書きながら編集していきます。
２．ボタンとカード
カードのサンプル2のボタンがついている奴を使う事にします。
元のコードは
----------------------------------------
<ion-card>
<ion-item>
<ion-icon name="pin" slot="start"></ion-icon>
<ion-label>ion-item in a card, icon left, button right</ion-label>
<ion-button fill="outline" slot="end">View</ion-button> ←ここがボタン
</ion-item>
<ion-card-content>
This is content, without any paragraph or header tags,
within an ion-card-content element.
</ion-card-content>
</ion-card>
----------------------------------------
まずボタンを右から左に移動させます。
単純に <ion-item> の位置を変えればいいかと思いましたが、うまく行きません。
slot="end"の部分が怪しいかなと思い、勘でend をstart にしたところ、これが正解。
以下のように変更しました。
----------------------------------------
<ion-card>
<ion-item>
<ion-label>ion-item in a card, icon left, button right</ion-label> ←テキストをいじるのが次の目標
</ion-item>
<ion-item>
<ion-button fill="outline" slot="start">次へ</ion-button>
</ion-item>
</ion-card>
----------------------------------------
選択肢とかはなしで、とりあえず1ページ目を表示して2ページ目に移動。そして1ページ目に戻る形を目指します。
３．テキストを表示しよう
まず<ion-label>ion-item in a card, icon left, button right</ion-label>の部分を書き換えたいと思います。
ほぼ経験なしのIonicですが、<ion-label>{{PageText1}}</ion-label> と言う感じにしてPageText1に出力したい内容を書けば良さそうです。
・・・・・・・・・・・・・・しばらく試行錯誤が続きました。
ああでもない、こうでもないでVisualStudioCode様のありがたいアドバイスを聞きながら解決したので、顛末をある程度書きながら、変更ソースをコピーしますね。
４．クラスと言うもの
もっと早く気づくべきだったのですが、src\app\home\home.page.ts の中身はクラスの宣言です。
つまり、Ionicは"HomePage"と言うクラスを作るあれこれを手伝ってくれているわけです。
さて、クラス。
オブジェクト指向と言う言葉を聞いたことがあるかもしれませんが、プログラミングする上で単なる変数を別々に扱うよりも、名前、Lv、HP、スキルと言った性質をひとまとめにすると、色々楽できるよね？と言う考えです。(ひとまとめにしたものをオブジェクトと呼ぶわけです)
クラスと言うのもオブジェクトで、色々な性質や動きを持たせることが出来る訳です。
(その一つとして、src\app\home\home.page.htmlをひな型として使うよ。という事も書いて有る)
ですので、src\app\home\home.page.htmlでゲームブックデータのText1を表示させたいならば、そういう性質を持たせればいい訳です。
src\app\home\home.page.tsに以下のようにPageText1と言うプロパティ(性質・特性)を追加
----------------------------------------
private _PageText1 : string;
public get PageText1() : string {
return this._PageText1;
}
public set PageText1(v : string) {
this._PageText1 = v;
}
----------------------------------------
汝に名を与える！という訳で、これでPageText1と言うモノに中身を書いたり読んだりできるようになりました。
次にsrc\app\home\home.page.tsのコンストラクタ（constructor()、"HomePage"と言うクラスを作る時の動作を規定）で、PageText1にゲームブックデータのPage1のText1を表示させることに成功しました。
コンストラクタ部分
----------------------------------------
constructor() {
this.PageText1 = PageData[1].Text1;
}
----------------------------------------
src\app\home\home.page.htmlの表示部分
----------------------------------------
<ion-card>
<ion-item>
<ion-label>{{PageText1}}</ion-label> ←{{PageText1}}がコンストラクタで設定した中身
</ion-item>
<ion-item>
<ion-button fill="outline" slot="start">次へ</ion-button>
</ion-item>
</ion-card>
----------------------------------------
これだけですと中身も変わらないですが、キリがいいので投稿して、次の準備をしておきます。
