今日の作業は「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号)

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

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

以上です！

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

今日の作業は「画面に収まりきらないUIの切り替え処理その3」です。

昨日はマウスの移動量に応じてUIの表示範囲がずれるようにしましたが、移動量に制限がないためUIが完全に見えなくなるまでスクロールしてしまっていたので、適切にスクロールのリミットをかけました。

また、スクロールした場合は各種UI(ラジオやボタン)が反応しないように調整しました。スクロールしたと思ったのにボタン反応したらイライラしますからね。

これでUIのスクロール処理が完成しました！今後は画面の表示範囲を気にせずガンガンUIを追加できます！

以上です！

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

今日の作業は「画面に収まりきらないUIの切り替え処理その2」です。

昨日は、とりあえずUIの上でマウスが動いたら無条件で表示範囲を少しずつ上にずらす処理を入れましたが、今日はマウスの移動量に応じてUIの表示範囲が変化するようにしました。

特に処理が重くなることもなく、UIがスムーズにスクロールしまいた。良い感じです。

以上です！

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

今日の作業は「画面に収まりきらないUIの切り替え処理その1」です。

調子に乗ってUIを追加しまくってたら、ご覧の通り、画面サイズによってはUIが全て表示できなくなっていました。

隠れているUIの表示方法は、ページを切り替えるように表示を切り替えるページ切り替え方式と、マウスドラッグによりUIの表示範囲を動かすドラッグ方式のどちらにするか迷ったのですが、ドラッグ方式で行くことにしました。

より工数がかかりそうですがこちらの方がスマートな気がします。

で、今日はとりあえずUIの上でマウスが動いたら無条件で表示範囲を少しずつ上にずらす処理を入れて見ました。

はい、ご覧のように上にずれました。明日はマウスドラッグの方向に従ってずらす方向を調整したいと思います。

以上です！

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

会社は爆発しませんでしたが、今日はボタンを押した際に、ボタンの色がちゃんと反転するように実装しました。

また、ボタン押下によりライフのランダマイズ処理を行うようにしました。

今日も作業は順調です。以上です。

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

今日の作業は「ボタンの実装」です。

一番下の RND というのがボタンです。とりあえず表示だけは出来ましたが、タップ/クリックした際にボタンの色を白に、文字を黒にする反転処理を行いたいと思っていて、それについては今日実装が出来ませんでした。

明日続きを頑張ろうと思います。

明日会社が爆発して行く必要がなくなれば、作業が劇的に進むと思いますが無理ですかそうですか。

以上です。

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

いきなりですが今日の作業結果です。

え？これは何かって？え？どうでも良いって？

これはボタン用のテクスチャです。２つのサイズを作り、それぞれに対して押したとき用の白く色がついたものも作りました。

今日はこれだけ！

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

私の作業メモと化してしまったこのブログですが、作業は順調なので気にせずに続けます。

71日目：ボタンのテクスチャ作成
72日目：ボタンの実装
73日目：ボタン押下によるライフのランダマイズ処理
74日目：画面に収まりきらないUIの切り替え処理その1
75日目：画面に収まりきらないUIの切り替え処理その2
76日目：画面に収まりきらないUIの切り替え処理その3
77日目：予備日(次の週の予定を立てる)

以上です！

本家デアゴGTR-NISMO箱積状況：0箱(32号まで完成済)

今日の作業は「スライダー左右ボタンの値更新タイミング調整」です。

スライダー左右の三角形ボタンでの値更新タイミングについて、今まではタップした指が離れたタイミングで値を更新してましたが、もたつきを感じていました。そこでタップした瞬間にすぐ値を変更するようにしました。

さらに、タップし続けると値が継続してどんどん加算/減算されるようにしました。

押した瞬間に値が1加算/減算され、その0.5秒後から2.5秒後までは0.1秒間隔で値が加算/減算され、2.5秒後以降はスクリーンの更新タイミング1/60秒毎に値が加算/減算されます。

スライダーのつまみ(縦の棒)部分をドラッグする事でも既に柔軟に値を変更出来ますが、ボタンを押すだけでも出来るだけ使い易いようになりました。

開発工数をかけた贅沢なUIです。

個人開発なので、どこに工数をかけるかは自由に決められます。あとはもうちょっと見栄えをよくしたいなぁ。

以上です！

本家デアゴGTR-NISMO箱積状況：0箱(32号まで完成済)