選択肢をラジオボタンで選ぶ
※ソースコードを表示する場合は、特に断りの無い場合、インデント部分を全角スペース変換して表示します。
前回で各ページのデータを扱えるようになりました。
ただし選択肢を選び、その選択肢のページに移行する事は出来ていません。
そこでラジオボタンを使い、選んだ選択肢に対応するページに移行するよう修正します。
ラジオボタンは言葉で説明するより見た方が早いと思います。
ラジオボタンイメージ
---------------------
〇 選択肢１
◎ 選択肢２
〇 選択肢３
---------------------
１．ラジオボタンを使う
ionic DocsのUIコンポーネントのページを見て見ましょう。
https://ionicframework.com/docs/ja/components
ラジオボタンのサンプルコードは以下の通り(判りやすいように少し変更しました)
---------------------------------------------------------------
<ion-list>
<ion-radio-group value="elephant"> ←ラジオボタンの集まりを示す
同じvalueの値を持つラジオボタンが初期選択
<ion-list-header> ←ラジオボタングループの上につける
<ion-label>好きな動物は？</ion-label>←タイトル(無くてもいい)
</ion-list-header>
<ion-item>
<ion-label>キリン</ion-label>
<ion-radio slot="start" value="giraffe"></ion-radio>
</ion-item>
<ion-item> ←ion-radio-groupのvalueと同じなので
<ion-label>ゾウ</ion-label> この項目が初期選択
<ion-radio slot="start" value="elephant"></ion-radio>
</ion-item>
<ion-item>
<ion-label>ライオン</ion-label>
<ion-radio slot="start" value="lion"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
---------------------------------------------------------------
さて上のサンプルを参考にしてゲームブック用に変更します。
まず"home.page.ts"と"home.page.html"の間でデータのやり取りをするために、プロパティ"SelectPage"を"home.page.ts"に定義します。
------------------------------------------
//選んだ選択肢
private _SelectPage : string;
public get SelectPage() : string {
return this._SelectPage;
}
public set SelectPage(v : string) {
this._SelectPage = v;
}
------------------------------------------
次に"home.page.html"側の"ion-radio-group"を以下のように変更します。
------------------------------------------
<ion-radio-group [(ngModel)] = "SelectPage">
------------------------------------------
これでラジオボタングループ(複数のラジオボタンがあるのでグループです)の値をプログラムで参照したり変更したりが可能になります。
注意点として、[(ngModel)]を"ion-radio-group"内に付け加えると、初期状態として任意のラジオボタンを選択状態に（valueをセットしても）出来ません。(おそらく仕様)
ですが、プログラム内で任意のラジオボタンを選択できますので、特に問題は無いと思います。
(あるいはすべてのラジオボタンを未選択にも出来ます。)
選択・未選択のコードは以下の通り。
------------------------------------------
this.SelectPage = "elephant"; ← valueが"elephant"のラジオボタン選択
this.SelectPage = undefined; ← すべてのラジオボタンを未選択にする
------------------------------------------
ですので上記サンプル”<ion-radio-group value="elephant">”のvalueは削除します。
まだまだ変更点があるので、ソースコードは最後にコピーします。
２．選択肢の数に応じた表示・非表示
現在の"Page.json"は最大3つの選択肢を設定できます。
しかし、ページによって選択肢を1つだけにしたり2つだけにしたいことも想定できます。
つまり選択肢の数によって、表示されるべきラジオボタンの数が変わりますのでWebページ上のコントロール(例えばラジオボタン)の表示・非表示が次の課題になります。
必要なラジオボタンの数が動的に変わる場合、技術的には、
・必要な数をWebページ上に(動的に)作る
・最大数を用意して不要なラジオボタンを(動的に)非表示にする
の2つがあると思いますが、ここでは動的に非表示にする方法を採用したいと思います。
(それなりに理由はありますが勉強が追い付いていないのが最大の理由)
さて、Webページ上のコントロール(例えばラジオボタン)の表示・非表示などを制御する関数を作ろうと思いますが、VisualStudioCodeの入力補助機能で探しやすくするために、今まで作った関数およびこれから作る関数の頭に"fn"と言う文字をつけ、次の文字を大文字にすることにします。(今更ですね)
例：setTitle(newTitle: string) → fnSetTitle(newTitle: string)
入力補助で関数がfn～でひとまとめになれば探しやすくなります。(くどいですが今更です)
閑話休題
複数あるラジオボタンの表示・非表示の制御のために、個々のラジオボタンをまとめたタグを次のように変更します。
------------------------------------------
<ion-item *ngIf=dispSelect1>
------------------------------------------
意味としては、『"dispSelect1"と言うプロパティがfalseならば、このアイテムを一時的に削除する。trueならば復活させる。』と言う感じのようです。(勉強不足で恐縮です。）
ですので3つの選択肢に相当するプロパティ"dispSelect1"～"dispSelect3"を作ります。
このプロパティは今までの文字列stringではなくて真偽値booleanになります。
"home.page.ts"のプロパティ"dispSelect1"の定義です。
------------------------------------------
private _dispSelect1 : boolean;
public get dispSelect1() : boolean {
return this._dispSelect1;
}
public set dispSelect1(v : boolean) {
this._dispSelect1 = v;
}
------------------------------------------
値がtrue(真)あるいはfalse(偽)のいずれかの値を持つboolean型であることに注意です。
対応する"home.page.html"側のプロパティ"dispSelect1"対応のラジオボタン
------------------------------------------
<ion-item *ngIf=dispSelect1>
<ion-label>{{PageSelectText1}}</ion-label>
<ion-radio slot="start" value={{PageSelectPage1}}></ion-radio>
</ion-item>
------------------------------------------
１行目：dispSelect1の値(trueあるいはfalse)により表示・非表示が決定
２行目：選択肢1の説明文PageSelectText1を表示
３行目：選択された場合、PageSelectPage1が値になる(そのページに移動)
slot="start" はラジオボタンの位置がテキストの左
（slot="end" ならテキストの右位置にくる）
４行目：このラジオボタン設定終わり
これで選択肢を表示・非表示するための準備が出来ましたので、PageSelectNumの値に従い、各ラジオボタンの表示・非表示を制御する関数を作ります。
"home.page.ts"の関数"fnDispThisPage()"の定義
---------------------------------------------------------------
fnDispThisPage(){
//選択肢の表示・非表示
switch(this.PageSelectNum){
case "1":
this.dispSelect1 = true;
this.dispSelect2 = false;
this.dispSelect3 = false;
break;
case "2":
this.dispSelect1 = true;
this.dispSelect2 = true;
this.dispSelect3 = false;
break;
case "3":
this.dispSelect1 = true;
this.dispSelect2 = true;
this.dispSelect3 = true;
break;
default:
}
this.SelectPage = undefined; //ラジオボタンの選択解除
}
---------------------------------------------------------------
ゲームブックの機能が増えるに従い(例えばサイコロを振る機能)、この関数に機能追加していきます。
３．エラー表示
最後にエラー表示を実装します。
この場合、『選択肢を選ばずに次へボタンを押す』時に表示されるエラーです。
"home.page.ts"にプロパティ"dispSelect1"と同じくboolean型の値を持つプロパティ"dispMessageErrorText"を定義します。
また、"home.page.html"に以下の行を追加します。(次へボタンの下）
---------------------------------------------------------------
<p *ngIf=dispMessageErrorText><strong>選択肢を選んでください。</strong></p>
---------------------------------------------------------------
再び"home.page.ts"に戻り、"fnDispThisPage()"に次の行を追加します。
---------------------------------------------------------------
//エラーメッセージの非表示
this.dispMessageErrorText = false;
---------------------------------------------------------------
また次へボタンを押した時に実行される関数"fnOnClickNextPage()"を以下のように変更します。
---------------------------------------------------------------
fnOnClickNextPage(){
if(this.SelectPage != undefined){
this.ThisPage = this.SelectPage;
this.fnSetPropValFromPage();
this.fnDispThisPage();
this.dispMessageErrorText = false;
}else{
this.dispMessageErrorText = true;
}
}
---------------------------------------------------------------
上述の"fnDispThisPage()"内でラジオボタンの表示・非表示とともに、"this.SelectPage"に = undefinedをセットしてラジオボタンの選択解除していることを思い出してください。
新たにラジオボタンを選択しない限り、次へボタンを押してもページは変わらずエラーメッセージが表示されるだけです。
(選択肢が一つしかない場合に、その選択肢を選択済みにする事は一考の価値はありますが)
これで単純なゲームブックの完成です。
(console.logに出力部分は後で手を入れます)
モバイルアプリにするためには、AndroidStudioでビルドとリリースするための作業が必要ですが、ここまでの"home.page.html"と"home.page.ts"のソースを次ページにコピーします。(インデント処理を行わず、そのままコピーします。)
"home.page.ts"は長いですが、半分近くはPage.jsonから自動的に作ったプロパティ定義です。
https://ncode.syosetu.com/n5283hn/34/
自動作成のプロパティ定義
・// Prpoperty From Page.json Start
・// Prpoperty From Page.json End
で囲まれた部分
自動作成の関数
・// Function Set Property Value From Page.json Start
・// Function Set Property Value From Page.json End
で囲まれた部分
