エミュレート成功！したので一旦、整理－３
前回は、Angularの機能を使いページタイトルを変更しました。
次は、表示される文章を変える方法です。
１．変更するファイル
変更するファイルは、次の2つです。
・src\app\home\home.page.html → htmlに相当するファイル
・src\app\home\home.page.ts ← 色々動かすファイル
ページタイトルの変更は、"home.page.ts" の変更だけで出来ました。
文章などの変更は、上の2つのファイルを変更する必要があります。
２．変更する方法(内部的に何をやっている?)
技術的な話をどこまでするかは難しい所ですが、大雑把にでも知っておけば
自分で手を加える役にも立つと思いますので簡単に説明します。
VisualStudioCodeで見ると、"\home.page.html" はhtmlに似た感じです。
(名前からしてもそうですね)
"\home.page.ts" はよく判らないかもしれないので説明します。
思いっきり簡略化すると、"\home.page.ts" は下記のようになります。
(Page.jsonも読まないしタイトルも変えない)
---------------------------------------------------------------
import { Component, setTestabilityGetter } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html', ← ひな形に'home.page.html'
styleUrls: ['home.page.scss'], ← CSS系(右詰めとか)ファイル
})
//---------------------上と下で分けられる---------------------
export class HomePage {
constructor() {
}
}
---------------------------------------------------------------
コメントを入れましたが、上下2つに分かれます。
上の部分には、別に作ったページデータを使う、あるいはページタイトルの
変更をするためAngularの機能を使うと言った"事務的な"部分です。
下の部分は、まさにアプリの本体です。
内容を無理に日本語化すれば、
①(よそから呼ばれたら)HomePage と言う名前のクラスを用意する。
②その際、初期化のため、constructor(){}で定義したアクションをする。
とでもなるでしょうか？
上のクラス宣言は(存在する以外)何もしないクラスになっていますが、これに
Text1と言う入れ物を用意し、そのText1に指定されたページの文章を入れたり
することが出来ます。
入れ物の方をプロパティ、文章を入れるアクションをメソッドと呼びます。
Text1と言う名前のプロパティを用意して、表示したい文字をセットして
"\home.page.html"にそれを書けば それだけで表示できます。
例: <strong>{{Text1}}</strong>
こう書くと、Text1にセットした文字が太字で表示されます。
※"{{" と "}}" で囲むこと
３．表示を変更して見る①（"\home.page.html"の変更）
"\home.page.html" も思いっきり簡略化すると下のようになります。
------------------------------------------
<ion-content [fullscreen]="true">
<div id="container">
<strong>{{PageText1}}</strong> ← "PageText1" プロパティを表示
</div>
</ion-content>
------------------------------------------
名前は"PageText1"にしましたが、"\home.page.ts"にその名前のプロパティを
用意すれば太字で表示されます。(それのみを表示)
４．表示を変更して見る②（"\home.page.ts"の変更）
次に"\home.page.ts"側に入れ物"PageText1"を用意します。
VisualStudioCodeは、優れた入力補助機能があるので利用になれたいところです。
"export class HomePage {" の下、 "constructor(" の上に空行を用意して
(エンターキー押下)、そこに一文字ずつ "prop" と入力すると入力候補が一つに
なるのでエンターキーを押下します。
以下のように、プロパティの宣言が補間されます。
---------------------------------------------------------------
export class HomePage {
private _value : string; ← ここからプロパティの定義
public get value() : string {
return this._value;
}
public set value(v : string) {
this._value = v;
} ← ここまでプロパティの定義
constructor() {
---------------------------------------------------------------
この段階では、"value"の箇所がすべて選択状態で点滅しています。
そのままプロパティの名前を入力すると、すべての"value"が入力した名前に
変更されます。
またプロパティの宣言に"string"の文字列にも注目してください。
(2か所ありますね)
これはデフォルトの値ですが、このプロパティの値が文字列という事です。
(真か偽かの値を表す"boolean "などに変更する場合もあります)
この段階では、"PageText1"と言うプロパティだけを使いましょう。
今後、たくさんプロパティを使うならばお好みのエディターで名前を置換して
VisualStudioCodeに貼り付けるのが早いかもしれません。(慣れたら別かも?)
この値に、constructorの中でPageData1ページ目のText1の値をセットします。
(まだメソッドを用意していないのでconstructor以外にセットできる場所が無い)
---------------------------------------------------------------
constructor() {
this.PageText1 = PageData[1].Text1;
}
---------------------------------------------------------------
※"this"と言うキーワードも注意してください。
このクラスの中で定義したプロパティやメソッドをクラス内で使う時、
頭に"this."と書きます。
上の例では、"this.PageText1" がそれにあたります。
セーブして、コマンドプロンプトから以下の2つのコマンドを走らせると
白紙のページの真ん中に太字でPageData1ページ目のText1の値”湖畔の城”が
表示されます。
------------------------------------------
cd c:\MyTest\GameBook
ionic serve
------------------------------------------
５．ボタンを押して次のページを表示する。
次に"\home.page.html"に入力ボタンを追加し、これを押すと1ページ目の
Text1から2ページ目のText1に表示変更する機能をつけます。
"\home.page.html"に以下の1行を追加しボタンを表示します。
------------------------------------------
<ion-button>次へ</ion-button>
------------------------------------------
ionicにはコンポーネントと呼ばれるアプリのインターフェイスが色々用意され
サンプルコードを見ると比較的簡単に使えるような気がします。
ionic Docs > UIコンポーネント
https://ionicframework.com/docs/ja/components
上のボタンのコンポーネントもその一つです。デザインも色々いじれそうですが
まず"onClickNextPage()"と言うメソッドを"\home.page.ts"に定義します。
全体のソースコードは次ページにまとめて書きますが、決め打ちで2ページ目の
テキスト1を表示するだけです。
------------------------------------------
onClickNextPage(){
this.setTitle(PageData["2"].Text1);
this.PageText1 = PageData["2"].Text1;
}
------------------------------------------
コマンドプロンプトから"ionic serve"で動かして動作を確認してください。
次ページは使用した以下の2つのファイルのソースコードです。
・src\app\home\home.page.html ← htmlに相当するファイル
・src\app\home\home.page.ts ← 色々動かすファイル
"Page.json" は https://ncode.syosetu.com/n5283hn/15/ を参照願います。
