デザインもいじりたい(苦手ですが)
さて、前回、目標機能的には完成と書きましたが、追記です。
予想はしていましたが、サーバを終了してもアプリのページ表示切替は問題ないです。
つまり、立ち上げ時、あるいはダウンロード時に読み込めば通信不要という事ですね。
続いて、デザインいじってみます。
１．ページタイトル
まず気に入らないのが、ホームページのタイトルが"Ionic APP"とかになっているので、これを修正します。
いつものようにGoogle様に、”ionic ページタイトル”とお伺いを立てるとドンピシャの結果が4番目に見つかりました。
いじるのは、src\app\home\home.page.tsだけで良いようです。
例のごとくソースコピーです。
----------------------------------------
前略
import {Title} from "@angular/platform-browser"; ←Titleと言う変数だかプロパティを使用可能に？
中略
@Component({
中略
styleUrls: ['home.page.scss'], ←Titleには関係ないようですがデザイン関係の参考先です。
providers : [Title] ←配布元をTitleの中身に？これが無くてもページタイトルは変わりました。
})
中略
constructor(private title: Title) { ←コンストラクタにTitleを渡さないと次の行がエラーになります
this.title.setTitle('Ionic でゲームブックアプリを作ってみよう'); ←ここでページタイトル変更
後略
----------------------------------------
こんな感じです。
また、色とか変えたかったので上のソースにちょっと書いて有りますが、['home.page.scss'] を見て見ます。
最初の段階では、以下の通りです。
src\app\home\home.page.scss
----------------------------------------
#container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#container strong {
font-size: 20px;
line-height: 26px;
}
#container p {
font-size: 16px;
line-height: 22px;
color: #8c8c8c;
margin: 0;
}
#container a {
text-decoration: none;
}
----------------------------------------
transform: translateY(-50%);は正直初めてみましたが、まあ、なんとなくわかるので適当に修正します。
うん、大分よくなりました。(あくまで習作として)
ただ選択肢もなく2ページの表示切替だけでは、ゲームブックとしてどうかと思いますので、次の投稿で、そこ直します。
手を入れるファイルが一つ増えたので、以下にまとめておきますね。
・tsconfig.json(プロジェクトフォルダー直下)
JSONデータを扱えるように、2行追加
・src\app\home\home.page.ts
これが多分本体。動きや変数の入れ物はここで定義
・src\app\home\home.page.html
これが器。表示したいものをここで書く。例：<p>{{PageText2}}</p>
・src\app\home\home.page.scss
いわゆるCSSファイル
・src\app\MyData\Page.JSON
作者が作ったゲームブックのページデータ
では、ここで投稿
