uka.apple のすべての投稿


const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const hour = now.getHours();
const min = now.getMinutes();
const sec = now.getSeconds();

var key = year + "_" + month + "_" + day + "_" + hour + "_" + min + "_" + sec;

$(document).ready(function(){

    let paramIndex = location.href.indexOf('?');
    if (-1 == paramIndex) {
        location.replace(location.href + "?date=" + key);
        return;
    } else if (location.href.slice(paramIndex + 1) !== "date=" + key) {
        location.replace(location.href.slice(0, paramIndex) + "?date=" + key);
        return;
    }
    // js load
    let scripts =['SF_utils.js?date=' + key
                    ,'SF_base.js?date=' + key
                    ,'SF_points.js?date=' + key
                    ,'SF_plates.js?date=' + key
                    ,'SF_cubes.js?date=' + key
                    ,'SF_cubesIns.js?date=' + key
                    ,'SF_Controls.js?date=' + key
                    ,'SF_UI.js?date=' + key
                    ,'SF_Life_CPU.js?date=' + key
                    ,'SF_Life.js?date=' + key
                    ,'SF_Land.js?date=' + key
                    ,'SF_Steve.js?date=' + key
                    ,'main.js?date=' + key];
    
    function onloaded(e){
        onload();
    }
    let len = scripts.length;
    let i = 0;
    (function appendScript() {
        let script = document.createElement('script');
        script.src = scripts[i];
        if(typeof scripts[i] == "undefined"){
            return false;
        }
        document.head.appendChild(script);
        if (i++ < len) {
            script.onload = function(e){
                if (i == len) {
                    onloaded(e);
                } else {
                    appendScript();
                }
            }
        }
    })();
});

昨日のCache BustingをJSに適用した形です。htmlの場合はhref.replaceで画面遷移しましたが、jsはタグを生成して動的に追加しています。

"onloaded"に処理が来た時点で、全てのjsが読み込まれた状態になっています。

イメージやcssなども同様の手法で行けると思います。

これでリロード地獄から解放されました！やった！

以上です！

本家デアゴGTR-NISMO箱積状況：2箱(33,34号)

独創アプリ開発日記

デアゴスティーニ商法作業管理での78日目作業

2019年4月23日 uka.apple コメントする

今日の作業は「htmlキャッシュ防止」です。

開発時は頻繁にhtmlやjsを変更します。ブラウザに変更を反映するにはその度にキャッシュを削除したり”スーパーリロード”が必要なのですが、面倒になってきました。

そこで常に最新ソースをロードするような仕組みを作りました。しかもphpなどサーバサイドの言語を使わず、htmlとjavascriptのみで、です。


let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
let day = now.getDate();
let hour = now.getHours();
let min = now.getMinutes();
let sec = now.getSeconds();

let key = year + "_" + month + "_" + day + "_" + hour + "_" + min + "_" + sec;

let paramIndex = location.href.indexOf('?');
if (-1 == paramIndex) {
    location.replace(location.href + "?date=" + key);
    return;
} else if (location.href.slice(paramIndex + 1) !== "date=" + key) {
    location.replace(location.href.slice(0, paramIndex) + "?date=" + key);
    return;
}
・・・以降処理内容

?とそれ以降の文字列を付加してロードする方法で、これをCache Bustingと言います。こうすることでブラウザに関係なく必ず最新のソースを取って来れます。上記コードは1秒毎に新しいコードをサーバに取りに行ってくれますが、本番リリース時は1日単位くらいに調整予定です。

明日はJSもキャッシュしないようにします。

以上です！

本家デアゴGTR-NISMO箱積状況：2箱(33,34号)

独創アプリ開発日記

デアゴスティーニ商法作業管理での77日目作業

2019年4月22日 uka.apple コメントする

今日は一週間の予定を立てる日です。

78日目：htmlキャッシュ防止
79日目：jsキャッシュ防止
80日目：画面サイズ変更時にパターン保持その1 – 画像保存
81日目：画面サイズ変更時にパターン保持その2 – 画像描画
82日目：画面サイズ変更時にパターン保持その3 – 画像調整
83日目：画面サイズ変更時にパターン保持その4 – 仕上げ
84日目：予備日(次の週の予定を立てる)

以上です！

本家デアゴGTR-NISMO箱積状況：1箱(33号)

独創アプリ開発日記