画像の使用とツール系関数などを別ファイルにまとめる
色々覚えることが多いです。
ただ、ちゃんとしたやり方かは、余り自信は無いですが・・・
１．画像の使用
例えば、サイコロの目など画像を使用したくなる時があります。
以下のサイトが参考になりました。
Ionic 入門
画像の配置場所
https://ionic.keicode.com/basics/image-location.php
こんな感じに使います。
------------------------------------------
<img src="../../assets/cube1.gif" class="imgDice">
------------------------------------------
class="imgDice"は枠線を表示するのに使いました。
C:\MyTest\GameBook\src\app\home\home.page.scssに追加
------------------------------------------
.imgDice{
border:1px solid #000
}
------------------------------------------
\home.page.scssの初使用ですね。(もう少し出番はあるはずです）
実装時には、１～６のサイコロ画像を用意して、*ngIfで出た目をのみを表示させるのが簡単と考えています。
２．関数のお引越し
Angularの機能を使うと、意外に関数コードは長くならない予感もしますが、ゲームブック本体に関係ない関数や汎用的に使える関数は、別なファイルに置いた方が判りやすいと思います。
今までの例で言えば、Page.jsonからプロパティ定義や読み込み関数を出力する”fnMakePropertyAndFunction”が引越し対象ですね。
手順としては、
・関数をまとめたファイルを置くフォルダの用意
・そのフォルダに新規ファイルを作る
・そのファイルに関数を書く
・src\app\home\home.page.tsでそのファイルの使用関数をImportする
となります。
新規フォルダと新規ファイルの作成はVisualStudioCodeで作るのが良いかも？
(特にファイルは、そのまま関数を書くので)
ごく簡単なサンプルを書きます。
関数を書いたファイル
C:\MyTest\GameBook\src\app\home\MyWork\tool.ts
------------------------------------------
export function TestMyTest() :void{
alert("a");
}
export function TestMyTest2() :void{
alert("b");
}
------------------------------------------
ポイントは”export function ”を付けて外部で使う関数と明示させることですね。
\home.page.tsでのインポート部分
------------------------------------------
import {TestMyTest, TestMyTest2} from '../home/MyWork/tool';
------------------------------------------
使う関数をすべてimportします。fromの部分にtool.tsの"ts"が無いですが、入力補助機能を使うと気づく事も無いと思います。
なお使われていない関数は薄暗い色で、カーソルを上に置くと次のエラー表示が出ます。
『'TestMyTest2' が宣言されていますが、その値が読み取られることはありません。ts(6133)』
\home.page.tsでの使用部分
------------------------------------------
TestMyTest();
------------------------------------------
\home.page.tsで宣言したのと同様に使えます。
(正確には\home.page.tsで宣言した時に必要な"this."が無くなります。)
※注意
\MyWork\tool.ts内に、”fnMakePropertyAndFunction”を引っ越した場合、
\MyWork\tool.tsの中でも、Page.jsonのインポートが必要です。
\MyWork\tool.ts内に以下のコードをお忘れなく！
------------------------------------------
import PageData from 'src/app/MyData/Page.json';
------------------------------------------
３．クラスも・・・
関数だけでなく、大量のプロパティ定義もやりようによっては外部に移せそうですが、今回は見送りです。
