ionicのWEBアプリをサブディレクトリにアップする方法・・・htmlファイルの<img>srcの変更(あと少し)
ionicのWEBアプリをサブディレクトリにアップする方法が判ったのですが、htmlファイルの<img>srcだけ(?)がうまく行かないというのが前回のお話でした。
ionicのWEBアプリをサブディレクトリにアップする方法
https://ncode.syosetu.com/n5283hn/161/
ionicのWEBアプリをサブディレクトリにアップする方法・・・あれれ？
https://ncode.syosetu.com/n5283hn/162/
調べていくと、javasciptの"location.pathname"で何とか対応できそうです。
現在のページのURLを取得する(location.href)
https://www.javadrive.jp/javascript/webpage/index10.html
これまた初めて知った手法ですが、何か解決したい問題があれば、ありがたいことにたいてい解決策はあるものですので、プログラム未経験の方がいらっしゃったら是非始めてもらえればうれしいですね。
さて、location.pathname。ionViewDidEnter()内(HTMLの各要素が準備できた直後のイベントと思ってください)で試してみました。
ionic serveでテストした場合は
location.pathname → /home
ionic build --prodでビルドしてサーバにアップした場合は
location.pathname → /アップしたサブディレクトリ名/home
となりました。
"home"についてはionicでプロジェクトを作る時、blankタイプで作った場合です。
これについては、なかなか興味深いので、もう少し調べて投稿するかもしれません。
とりあえずimgのパスについては"home"は、余分なパスと言う知識で十分かと思います。
(homeと言うサブディレクトリはサーバには存在しませんが、明らかにあるものとして扱っていますので、とても高度な事をやっているらしいという推測しか現時点じゃ判っていません）
さて、imgタグのsrc対応ですが、1のサイコロの目の場合
・location.pathname＝"home"ならば対応不要
(type="blank"の場合)
・それ以外ならば、末尾の"/home"を外し、"/assets/gamebook/image/cube1.gif"を追加
なお、追加する"/assets/gamebook/image/cube1.gif"は、固定文字列登録JSONファイルにセットしておきます。
この固定文字列登録JSONファイルやページJSONファイルにイメージファイルのアドレスをセットすれば、画像の使用も出来そうですね。
具体的には、こんな感じで行けそうです。
------------------------------------------
let locationpath = location.pathname;
if(locationpath == "/home"){
return;
}else{
locationpath = locationpath.replace("/home","")+追加文字列;
}
const elItems1 = document.querySelectorAll(".DiceSrc1");
elItems1.forEach(function(userItem) {
let elUnknown = userItem as HTMLImageElement;
elUnknown.src = locationpath;
});
------------------------------------------
今度は行けそう！と進めていくと
・戦闘及び選択などは問題なく表示
・しかし戦闘結果などの表示に使うモーダル画面での表示は失敗。
恐らくですが、モーダル画面<ion-modal>は、ionViewDidEnter()が動いた時点では作成されていないのかも？
そうなると少し厄介です。
モーダル画面のオープンは、有る変数の値で自動的に表示されますので、srcの変更タイミングが難しい。
(毎回作成しなおしだともっと厄介)
もうちょっと調べてみます。投稿
