選択肢で次のページを変える
ちょっとびっくりするくらい順調です。
こういう時は、Google様への貢ぎ物(検索ワード)が上等な品物なのでしょう。
皆様には中身が見れていないですが、間もなく『Ionicでゲームブックアプリを作ろう！』アプリをリリース出来そうな気がします。
さて表題
最初にも書きましたが、実はHTML版は完成済みなので、それをアプリ化しようというのが(そしてなろう初投稿も)今回の記録目標です。
前回までは、選択肢無しで1ページ目と2ページ目の表示を切り替えるだけでしたが、いよいよ選択肢を追加してゲームブックらしくしていきます。
１．選択肢追加
さて選択肢ですが、容易に思いつくようにページによって表示する数が異なりますよね？
それをコントロールするにはどうするの？と言うのが、この小題です。
まず、選択肢の数と選択肢の文言、そして各選択肢で飛ぶページをsrc\app\MyData\Page.JSONに追加で記載します。
この時ちょっとはまったのが、コマンドプロンプトで動いているionic serveをいったん終了して再起動しないと、src\app\MyData\Page.JSONの変更が反映されなかったのでご注意を！(ここは早めに解決したいですが、とりあえず今回の完成には影響ないので後回しです。何か登録が必要なのでしょうね。）
２．選択肢の非表示
選択肢は、ラジオボタン(一つだけ選択できる丸い奴)を使いましたが、ページによって選択肢の数が異なるので、それをどうする？と言う問題です。
調べていくとsrc\app\home\home.page.html に、条件分岐の"*ngIf"と言うのが見つかりました。
ラジオボタンの部分のソースをコピーします。
src\app\home\home.page.html
----------------------------------------
<ion-list>
<ion-radio-group> ←ラジオボタングループの始まりです。
<ion-item *ngIf=dispSelect1> ←1番目のラジオボタン、dispSelect1(後述)がTrueならば表示
<ion-label>{{SelectText1}}</ion-label> ←{{SelectText1}}は選択肢文言
<ion-radio value="Select1" slot="start"></ion-radio>
</ion-item>
<ion-item *ngIf=dispSelect2> ←2番目のラジオボタン、dispSelect2(後述)がTrueならば表示
<ion-label>{{SelectText2}}</ion-label> ←{{SelectText2}}は選択肢文言
<ion-radio value="Select2" slot="start"></ion-radio>
</ion-item>
<ion-item *ngIf=dispSelect3> ←3番目のラジオボタン、dispSelect3(後述)がTrueならば表示
<ion-label>{{SelectText3}}</ion-label> ←{{SelectText3}}は選択肢文言
<ion-radio value="Select3" slot="start"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
----------------------------------------
dispSelect1～3を、src\app\home\home.page.ts でtrueかfalseかを定義してやれば、選択肢の表示非表示が制御できます。SelectText1～3は、選択肢文言ですので説明割愛しますね。
src\app\home\home.page.ts から定義と制御を行っている部分をコピーしますね。
src\app\home\home.page.ts
----------------------------------------
//PageDataのSelectNumの数を見てラジオボタンの表示数を変える
if(PageData[1].SelectNum == "1"){
this.dispSelect1 = true;
this.dispSelect2 = false;
this.dispSelect3 = false;
}
if(PageData[1].SelectNum == "2"){
this.dispSelect1 = true;
this.dispSelect2 = true;
this.dispSelect3 = false;
}
if(PageData[1].SelectNum == "3"){
this.dispSelect1 = true;
this.dispSelect2 = true;
this.dispSelect3 = true;
}
----------------------------------------
ゲームブックの1ページ目のデータ、PageData[1].SelectNumを見て選択肢の表示数を変えてみました。
いよいよ、次は選択肢によって飛ぶページを変えていきます。
３．ホームページからデータを受け取る
当然ながら、ページで選んだ選択肢がどれを知らないと、次にどのページを表示すべきか判りませんね？
今までは、アプリから既に持っている情報に従いページを表示していましたが、今度はページにユーザーが入力した情報を受け取り、それに基づいた処理が必要になります。
さて、ここでハマり中ですので、一旦投稿して調べものに集中します。
