ユーザ用ツール

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
ハイハイスクールアドベンチャー_web版 [2024/02/14 06:51] – [概要] arakiハイハイスクールアドベンチャー_web版 [2025/10/20 02:00] (現在) – [PWA] araki
行 37: 行 37:
  
 [[https://www.wildtree.jp/~araki/HHSAdv/|ゲームはこちらから]] [[https://www.wildtree.jp/~araki/HHSAdv/|ゲームはこちらから]]
 +
 +PWA対応なので、インストールして遊んでくれてもいいんだよ！
 +
 +{{::hhsadv:pwa_install.png?400|}}
 +
 +インストールはアドレスバーの右端にあるボタン、またはブラウザのメニューから。
  
 {{::hhsadv:game_screen.png?400|}} {{::hhsadv:game_screen.png?400|}}
行 60: 行 66:
 じゃあ、メモリ上に置いといて、書き込みは処理が終わってまとめてやればいいんじゃないかということになるが、画像を RGBA形式で保持していると、結局読み出しが遅いのだ。 じゃあ、メモリ上に置いといて、書き込みは処理が終わってまとめてやればいいんじゃないかということになるが、画像を RGBA形式で保持していると、結局読み出しが遅いのだ。
  
-そもそもそんなに色数使わないので、8bitのインデックスを作ってペイントバッファとしてそれを使えばいいんじゃないかということに気づいてそのようにした。+そもそもそんなに色数使わないので、8bitのインデックスを作ってペイントバッファとしてそれを使えばいいんじゃないかということに気づいて((気づきが遅い!))そのようにした。
  
 なお、当初は、普通に一枚の canvasでやりくりしてたし、速度的には十分だったが、下に書くように、画面の表示領域をネイティブのサイズより大きくしたかったので、画面の canvas要素へ拡大転送するための canvasを作成して、ネイティブサイズ((256x152ピクセル))の画像はそこに描画されている。 なお、当初は、普通に一枚の canvasでやりくりしてたし、速度的には十分だったが、下に書くように、画面の表示領域をネイティブのサイズより大きくしたかったので、画面の canvas要素へ拡大転送するための canvasを作成して、ネイティブサイズ((256x152ピクセル))の画像はそこに描画されている。
行 73: 行 79:
 ウェブページ上に 512x304((要するに倍のサイズ))で canvasを用意して、プログラム中ではネイティブサイズのダミーの canvas に書き込みを行い、倍サイズの表示領域に拡大転送することでこれを実現している。 ウェブページ上に 512x304((要するに倍のサイズ))で canvasを用意して、プログラム中ではネイティブサイズのダミーの canvas に書き込みを行い、倍サイズの表示領域に拡大転送することでこれを実現している。
  
-<code>+<code javascript>
 this.zctx = document.getElementById("HHSAdv").getContext('2d'); this.zctx = document.getElementById("HHSAdv").getContext('2d');
 this.zctx.imageSmoothingEnabled = true; this.zctx.imageSmoothingEnabled = true;
行 94: 行 100:
 2011年ごろの JavaScript によるオブジェクト指向プログラミングというと、クラスも何もなくて、普通の変数の宣言を利用してやっていたのが実態であった。 2011年ごろの JavaScript によるオブジェクト指向プログラミングというと、クラスも何もなくて、普通の変数の宣言を利用してやっていたのが実態であった。
  
-<code>+<code javascript>
 var Klass = function() var Klass = function()
 { {
行 116: 行 122:
 基本的にデータファイルも、CGIで描画させた画像もこの枠組みを使ってやりとりしていたので、これも大きかった。 基本的にデータファイルも、CGIで描画させた画像もこの枠組みを使ってやりとりしていたので、これも大きかった。
  
-<code>+<code javascript>
 var req = new XMLHttpRequest(); var req = new XMLHttpRequest();
 req.open('GET', 'cgi/loadB64.rb?name=" + name, true); req.open('GET', 'cgi/loadB64.rb?name=" + name, true);
行 130: 行 136:
 これはラムダ式を使うのが今風なんだと。 これはラムダ式を使うのが今風なんだと。
  
-<code>+<code javascript>
 fetch('data/xxx.dat').then((res) => res.blob()).then((blob) => blob.arrayBuffer()).then((abuf) => { fetch('data/xxx.dat').then((res) => res.blob()).then((blob) => blob.arrayBuffer()).then((abuf) => {
     var buf = new Uint8Array(abuf); // arrayBuffer型はそのままでは利用できないので適当な形式にする。     var buf = new Uint8Array(abuf); // arrayBuffer型はそのままでは利用できないので適当な形式にする。
行 142: 行 148:
 全部をひとまとまりでやろうとするとうまく動かない。 全部をひとまとまりでやろうとするとうまく動かない。
  
-<code>+<code javascript>
 fetch('data/xxx.dat').then((res) => { fetch('data/xxx.dat').then((res) => {
     if (res.ok)     if (res.ok)
行 199: 行 205:
 マニフェストファイルは、HTMLファイルの linkタグを使って次のようにマッピングする。 マニフェストファイルは、HTMLファイルの linkタグを使って次のようにマッピングする。
  
-<code>+<code html>
 <link rel="manifest" href="hhsadv.webmanifest" /> <link rel="manifest" href="hhsadv.webmanifest" />
 </code> </code>
行 206: 行 212:
 もっと詳細な仕様を記述できるが、詳しくは[[https://developer.mozilla.org/ja/docs/Web/Manifest|こちら]]などを参照してほしい。 もっと詳細な仕様を記述できるが、詳しくは[[https://developer.mozilla.org/ja/docs/Web/Manifest|こちら]]などを参照してほしい。
  
-<code>+<code css>
 { {
         "background_color": "black",         "background_color": "black",
行 240: 行 246:
 Service WorkerもHTMLファイルから登録してやる必要がある。 Service WorkerもHTMLファイルから登録してやる必要がある。
  
-<code>+<code javascript>
 if ('serviceWorker' in navigator) if ('serviceWorker' in navigator)
 { {
-    navigator.serviceWorker.register('js/sw.js');+    navigator.serviceWorker.addEventListener('message', (event) => { 
 + if (event.data && event.data.type == 'UPDATE_AVAILABLE') { 
 +     const shouldReload = confirm('更新が利用可能です。更新しますか？'); 
 +     if (shouldReload) 
 +     { 
 + window.location.reload(); 
 +     } 
 + } 
 +    }); 
 +    navigator.serviceWorker.register('sw.js');
 } }
 </code> </code>
行 249: 行 264:
 Service Worker本体((ここでは js/sw.js))も最低限だと以下のようになる。 Service Worker本体((ここでは js/sw.js))も最低限だと以下のようになる。
  
-<code>+<code javascript>
 // cache // cache
 var CACHE_NAME = 'hhsadv-caches'; var CACHE_NAME = 'hhsadv-caches';
行 273: 行 288:
         'js/global.js',         'js/global.js',
         'js/map.js',         'js/map.js',
-        'js/sw.js'+        'sw.js'
 ]; ];
  
行 292: 行 307:
                 })                 })
         );         );
 +});
 +
 +// update
 +self.addEventListener('activate', (event) => {
 +  const cacheWhitelist = []; // 現在有効なキャッシュ名
 +
 +  event.waitUntil(
 +    caches.keys().then((cacheNames) => {
 +      return Promise.all(
 +        cacheNames.map((cacheName) => {
 +          // 現在のバージョンに含まれていない（古い）キャッシュを削除
 +          if (cacheWhitelist.indexOf(cacheName) === -1) {
 +            console.log('古いキャッシュを削除:', cacheName);
 +            return caches.delete(cacheName);
 +          }
 +        })
 +      );
 +    })
 +    // すべてのキャッシュ削除が完了したら、クライアントへの制御を引き継ぐ
 +    .then(() => self.clients.claim())
 +  );
 +  
 +  event.waitUntil(
 +    // すべてのクライアントに更新完了を通知
 +    self.clients.claim().then(() => {
 +      self.clients.matchAll().then((clients) => {
 +        clients.forEach(client => {
 +          client.postMessage({ type: 'UPDATE_AVAILABLE' });
 +        });
 +      });
 +    })
 +  );
 }); });
 </code> </code>
行 297: 行 344:
 要はキャッシュを登録しているだけである。 要はキャッシュを登録しているだけである。
 これでオフラインでも使えるようになるらしい((そのように作られていれば))が、やってみていないのでわからない。 これでオフラインでも使えるようになるらしい((そのように作られていれば))が、やってみていないのでわからない。
 +
 +なお、キャッシュされるオブジェクトの指定は、sw.jsのある場所からの相対パスまたは絶対パス、URIなどで、これを間違うとエラーをはいてキャッシュに失敗する。
 +
 +ブラウザによってはsw.jsがエラーを出しているとインストールボタンを表示してくれない厳格なやつもいたりするので、よく確認してほしい。
  
 === トラブルシュート === === トラブルシュート ===
行 304: 行 355:
  
 {{::hhsadv:devtool_manifest.png?400|}} {{::hhsadv:devtool_manifest.png?400|}}
 +
 +==== 音とか ====
 +
 +PalmOS、Android、そして Qtでは音がある場面では音が鳴るようになっている。
 +Web版を再公開したときに、「誰か解けたのか？」というようなことをつぶやくと「校歌は歌った」というような返事があった。
 +そういえばWeb版では音のことをすっかり失念していた。
 +
 +HTML5ではaudioコンポーネントがあり、JavaScriptに Audioクラスが実装されている。
 +そしてほとんどすべてのモダンなブラウザでMP3形式の音源を鳴らすことができる。
 +
 +=== 音を鳴らせ ===
 +
 +HTMLで audio 要素を配置してもいいのだが、別に画面上に何かがいる必要はないので、適宜動的に確保する方向で実装する。
 +動的に確保された Audio のインスタンスは再生が終わったらガベージコレクションの対象になるって書いてあるので、音を鳴らすときに確保して、鳴らしたら勝手に消えることを期待する。
 +
 +<code javascript>
 +var m = new Audio();
 +m.src = this.base_uri + "/data/" + ZAudio.sources[n] + ".mp3";
 +m.load();
 +m.volume = 1.0;
 +m.loop = false;
 +m.play();
 +</code>
 +
 +ボリュームは1.0が100%になる。
 +
 +=== 音を鳴らすな ===
 +
 +多分、音鳴ったら困る環境の人も少なくないだろう。
 +いきなり、ハイハイスクールの校歌が流れたらびっくりするだろうし、大体が、この校歌結構長尺で鳴り出すと止まらないのだ。
 +
 +なので、ミュート機能はつけておいた方がいいと判断した。
 +まあ、PCなり、スマホなりでミュートできるだろうけれど。
 +どっちかというと、ミュートというよりデフォルトでミュートしておいて、鳴らしたい人だけ解除するイメージだ。
 +
 +まあ、単純にチェックボックスを一個置いておけばいいのだが、今時のインターフェイスとしてはちょっとカッコ悪い。
 +そもそもこの昭和レトロなアドベンチャーゲームに何をいっているんだという向きもあるだろうが、せっかくなので、今風のスライドスイッチにしておきたい。
 +
 +Safariなら、そういう要素がサポートされているらしいが、多くのブラウザでは未サポート((2024年2月現在))なので、別の方法でやることにする。
 +
 +世の中には優れた人が多くいて、既にCSSを駆使して、そういうものをチェックボックスに付加してくれているので、まるっとそれをいただくことにする。
 +
 +<code html>
 +<label for="mute" class="switch_label">
 + <div class="switch">
 + <input type="checkbox" id="mute" checked="true" />
 + <div class="circle"></div>
 + <div class="base"></div>
 + </div>
 + <span class="title">MUTE</span>
 +</label>
 +</code>
 +
 +チェックボックスがスイッチの本体だが、チェックボックスを消して、代わりに circleと baseでスイッチを構成する。
 +この部分はすべてCSSに記述されている。
 +
 +<code css>
 +.switch {
 + position: relative;
 +}
 +
 +.switch_label {
 + display: flex;
 + align-items: center;
 +}
 +
 +.switch input[type='checkbox'] {
 + position: absolute;
 + width: 0;
 + height: 0;
 +}
 +
 +.switch .base {
 + width: 28px;
 + border-radius: 8px;
 + height: 16px;
 + background-color: #ddd;
 +}
 +
 +.switch .circle {
 + position: absolute;
 + top: 2px;
 + left: 2px;
 + width: 12px;
 + height: 12px;
 + border-radius: 6px;
 + background-color: white;
 + transition: 0.5s;
 +}
 +
 +.title {
 + margin-left: 4px;
 +}
 +
 +.switch input:checked ~ .base {
 + background-color: rgb(219, 234, 254);
 + transition: 0.5s;
 +}
 +
 +.switch input:checked ~ .circle {
 + transform: translateX(100%);
 + background-color: blue;
 +}
 +</code>
 +
 +なお、実際に使用しているスタイルシートは、レスポンシブデザインっぽく、px使わないでサイズを指定しています。
 +
 +==== 設定 ====
 +
 +基本的には、特に設定項目はなかったのだが、音を鳴らすことにしたら、Qt版同様に、音を鳴らすのかどうかを覚えておいた方がいいような気がしてきた。
 +
 +まあ、毎回 Mute ONにしてしまうでもいいような気もしたが、将来何かの設定を追加したときに、それも覚えておいた方がいいような気がしたので、保存できるようにした。
 +
 +ゲームデータ保存用objectStoreはIndexedDBに作ってあったので、バージョンを2にして、設定用のobjectStoreも作るようにした。
 +DBのアップグレードとかしないと思ってたが、いきなりすることになるとは先見の明がなさ過ぎた。
 +
 +<code javascript>
 +const req = indexedDB.open(Database.DBNAME,Database.VERSION);
 +req.onupgradeneeded = (event) =>
 +{
 + const db = event.target.result;
 + const oldver = event.oldVersion;
 + const newver = event.newVersion;
 + const migrations = {
 + "1": () => {
 + db.createObjectStore(Database.STORENAME, {keyPath:'id'});
 + },
 + "2": () => {
 + db.createObjectStore(Database.PREFSTORE, {keyPath:'pref'});
 + }
 + }
 + for (var v = oldver + 1 ; v <= newver ; v++)
 + {
 + if (migrations[v]) migrations[v]();
 + }
 +};
 +</code>
 +
 +バージョン更新のやり方は、どこかで見かけたのを参考にした。
 +
 +==== テーマ ====
 +
 +今どきのアプリとしては、システムのテーマに追随しないわけにはいかない。
 +
 +テーマへの追随に関しては、システムがダークモードだったら、body要素に class='theme-dark' を指定すればいいらしい。
 +これを動的に行うコードを追加し、初期化時にチェック、またシステム設定が変更された場合には検出し追随するようにイベントリスナーを登録して対応する。
 +
 +<code javascript>
 +    applySystemTheme(e)
 +    {
 + if (e.matches)
 + {
 +     document.body.classList.add('dark-theme')
 + }
 + else
 + {
 +     document.body.classList.remove('dark-theme')
 + }
 +    }
 +    
 +    this._darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
 +    this.applySystemTheme(this._darkModeQuery);
 +    this._darkModeQuery.addListener(this.applySystemTheme);
 +</code>
 +
  

This website uses cookies. By using the website, you agree with storing cookies on your computer. Also, you acknowledge that you have read and understand our Privacy Policy. If you do not agree, please leave the website.

More information