mikeneko

リソースの管理について

画像やcss、CDNなどからダウンロードした外部JSライブラリファイル(jsファイル)をアプリ内部で使用するには
まずリソース用ディレクトリにファイルを設置する必要があります。

ビルド時にリソース用ディレクトリに設置されているファイルはすべてビルドファイル(index.js)に格納されます。
あとはそれをHTML側にて自動的に読込、もしくは任意でデータ内容を取得して使用します。

# リソースディレクトリの場所

リソース用のディレクトリはプロジェクト内のsrc/resourceです。
ここに画像ファイルなどを設置します。

# HTMLタグでのリソース読込

HTMLタグにて画像タグなどがある場合は表示後自動的に
パス情報からリソースファイルにアクセスして、それをdataURL形式に変換されます。

よって通常通りにファイルのパスを指定するのみで対応が可能となるため、
特別な設定方法を考慮する必要はありません。

例えば下記のようにimgタグを指定したとします。

<img src="img/cat.jpg">

あとはapp/resources/img/cat.jsに表示したい画像ファイルを設置してください。

cssの読込の場合も同様で、指定したパスにcssファイルを用意するだけです。

<link rel="stylesheet" href="css/style.css">

なおhtmlタグで直接対応可能なのは画像タグimgとcss読込用linkです。
それ以外では未対応であるため、リソース読込用ショートコードを使用するか
ViewまたはController等のスクリプトコード上から操作する必要があります。

# ショートコードを使用してリソースデータの設定