やらかし記録 (メンテナンスメモ)



2023.4.15 追記
閲覧環境によってはブラウザ側にキャッシュファイルが残っていると更新後のインデックス部分が読み込みできないケースがあります。 原因は自作したJavaScriptでjQuery Ajax系関数でキャッシュを禁止にしないとサーバー側にアップロードした 更新ファイルを読み取れない場合があります。プログラム修正までは閲覧側(ローカル側)でキャッシュの手動削除が必要です。

2023.4.16 追記
メイン コンテンツ部分のJavaScript修正は完了。サブコンテンツは対応中です。

2023.4.17 追記
サブコンテンツ部分のJavaScript修正完了。

原因 : 自作したJavaScriptでjQuery Ajax系関数使用時にブラウザ側に残存するキャッシュファイルを考慮していなかった。
対策 : Ajax系関数を使用するとき読込ファイルに対してキャッシュする事を禁止する関数(デフォルト値)を組込する。


2023.6.1 追記
SSI(Server Side Includes)を利用してみる。
更新履歴の過去ページでSSIを利用したページを作成しました。
jQuery Ajaxを利用しない方法でファイルをHTMLに読み込みする方法(#include)です。
記述は1行だけ、<!--#include file="~" -->
レンタルサーバーの仕様とApacheのバージョンに依存するため、利用には注意が必要です。
例えばさくらのレンタルサーバーだと 拡張子を*.shtmlで指定する必要があります。
SSIには利点も多いのですが無料系のサーバーだと利用不可のサービスがあり、 セキュリティ的にも考慮点があるため利用時には考慮する必要があります。


2023.11.4 追記
脱jQueryでやっちゃった。
Fetch APIからinnerHTMLで読み込んだhtmlの中で再度Fetch APIを呼び出すと動かない。
jQueryで$('#sub_idx').load('../sub_idx.txt');と書いたところをfetch("../sub_idx.txt")~で置き換えるとダメ。
Fetch API単体だけなら問題がない。インデックスファイルを統合するためにあれこれやっていたのが原因。

現行はjQueryから.loadでAjaxを利用してその中で別*.jsから.loadで更にAjaxで呼び出ししても通るから原因が.loadとFetch APIをの違いか? XMLHttpRequestで置換してもダメ、というか正しく記述できているかかなり怪しい。 Vue.jsの知識は0点(皆無)なので本人が勉強しないと使用不可。 このホームページでjQueryとVueを共存させる必要性がない、今更新規に別フレームワークを入れる訳でもないのでちょっと考え中。

脱jQueryの理由はできるだけシンプルに。旧版jQueryの脆弱性が度々指摘され、クロスサイト・スクリプティングの原因になっていたり。 但し、このホームページでは入力項目がない、Cookieを利用していないためそこまで考える必要があるのかと言えばないかも知れません。

Bootstrap5に移行すればjQueryは不要になる(相互依存性がない)。個別にアップグレードできるため、とりあえず対応できたページからjQueryは 3.6.0から 3.7.1に更新する予定。


2024. 1.19 追記
トップページ以下いくつかをBootstrap5に移行したときに更新履歴関連の修正が漏れていた。
cssのclass設定変更もれ、だから更新履歴ページでプルダウンメニューが正常に動作しない。
footerの設定もNGだったからこれも修正済み。

Web Master : みやび(雅)


[ 戻る ]