9/210

ここからは足早に手じまい３

さて、前回はゲームブックのデータを表示するところまで持っていきました。

それで、長い文章なども使ってみたのですが後ろが省略されるようで、色々考えてcardの使用は止めておくことに。

src\app\home\home.page.html

----------------------------------------

<ion-header [translucent]="true">

<ion-toolbar>

<ion-title>

　　　　　　Ionicでゲームブックアプリに挑戦してみた

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content [fullscreen]="true">

スマホアプリに挑戦したい？

Ionic で<a target="_blank" rel="noopener noreferrer" href="https://mypage.syosetu.com/971387/">ゲームブックアプリを作ってみよう</a>

{{PageText1}}　　←{{なんとかかんとか}}の部分が勝手に書き換わるイメージ

{{PageText2}}　　←なんとかかんとかは、src\app\home\home.page.tsで定義します。

{{PageText3}}　　←以下同様

{{PageText4}}　　←

{{PageText5}}　　←

<ion-button>次へ</ion-button>

</div>

</ion-content>

----------------------------------------

要は、homepageクラスで宣言したプロパティは{{プロパティ名}}と言う書き方でhome.page.htmlに反映できますよ！と言う理解で大まか有ってると思います。

多分ですが何らかの形でメソッド(主人公のスキルみたいなもの)を定義してやれば、ボタンを押すと中身が書き換わる事も十分可能でしょう。

１．スキルじゃなくてメソッドじゃなくてイベント定義

"ion-button" でGoogle様にお聞きしたところ、数分で解決しました。

src\app\home\home.page.htmlの"ion-button"にイベントを追加して書き、その実装(動き)をsrc\app\home\home.page.tsで定義するだけ。

この文章書いたりの方が長かったりします。

例のごとくサンプルをコピー

src\app\home\home.page.html

----------------------------------------

<ion-button ion-button (click)="onClick()">次へ</ion-button>

----------------------------------------

src\app\home\home.page.ts

----------------------------------------

　　onClick(){

　　　　console.log("Button 1 Clicked!");

　　}

----------------------------------------

ボタンを押すとブラウザのウェブ開発ツールで"Button 1 Clicked!"の文字が確認されます。

まあ、この段階で色々マズそうなのは想像つきますが、とりあえずゲームブックが出来れば目標達成ですので先送りします。(複数ボタンあったりとか？）

と思って念のために実験すると、onClick()と言うのは予約された名前でなくて、onClick2()とかでも良い事を確認したので一つ懸案解決！

それどころか、当初の目的、1ページと2ページの表示を切り替えるまで完成してしまいました。

ソースは以下の通り

src\app\home\home.page.html

----------------------------------------

<ion-button ion-button (click)="onClick()">ページ1</ion-button>

<ion-button ion-button (click)="onClick2()">ページ2</ion-button>

----------------------------------------

src\app\home\home.page.ts

----------------------------------------

　　onClick(){

　　　　this.PageText1 = PageData[1].Text1;　　←ページ1のテキストをセットする

　　　　this.PageText2 = PageData[1].Text2;

　　　　this.PageText3 = PageData[1].Text3;

　　　　this.PageText4 = PageData[1].Text4;

　　　　this.PageText5 = PageData[1].Text5;

　　}

　　onClick2(){

　　　　this.PageText1 = PageData[2].Text1;　　←ページ2のテキストをセットする

　　　　this.PageText2 = PageData[2].Text2;

　　　　this.PageText3 = PageData[2].Text3;

　　　　this.PageText4 = PageData[2].Text4;

　　　　this.PageText5 = PageData[2].Text5;

　　}

----------------------------------------

2つのボタンを押すと1ページ目の内容と2ページ目の内容が切り替わる訳で、機能的には、まあこれでOKですが、さすがにデザイン的に色々いじりたくもあるので、ここで投稿して、また調べものしますね。