<p><span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__179a94fa750ea" src="https://embed.zenn.studio/tweet#zenn-embedded__179a94fa750ea" data-content="https%3A%2F%2Ftwitter.com%2FKichikuouWeb%2Fstatus%2F1785245207413633293" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://twitter.com/KichikuouWeb/status/1785245207413633293" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://twitter.com/KichikuouWeb/status/1785245207413633293</a><br style="display:none">
これをどう作ったかの解説。</p>
<h2 id="pwa">
<a class="header-anchor-link" href="#pwa" aria-hidden="true"></a> PWA</h2>
<p>まず、上のスクリーンショットのアイコンはSafariの「ホーム画面に追加」で作られたものである。タップするとフレームなしのブラウザが立ち上がって、xsystem4（ゲームエンジン）のWebAssembly版が起動する。xsystem4のWebAssembly移植についてはこちらの記事に書いた。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__30982142b586" src="https://embed.zenn.studio/card#zenn-embedded__30982142b586" data-content="https%3A%2F%2Fzenn.dev%2Fkichikuou%2Farticles%2Fa4d773c6d549a2%23" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/kichikuou/articles/a4d773c6d549a2#" style="display:none" target="_blank">https://zenn.dev/kichikuou/articles/a4d773c6d549a2#</a></p>
<p>この種のWebアプリは<a href="https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps" target="_blank" rel="nofollow noopener noreferrer">プログレッシブウェブアプリ (PWA)</a>と呼ばれる。最近<a href="https://gigazine.net/news/20240302-apple-pwa-support-not-remove/" target="_blank" rel="nofollow noopener noreferrer">さっくり廃止されかかった</a>りして、いつまで使えるかは少し心配でもあるが…。</p>
<h3 id="ios-%2F-ipados-safari%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8Bpwa">
<a class="header-anchor-link" href="#ios-%2F-ipados-safari%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8Bpwa" aria-hidden="true"></a> iOS / iPadOS SafariにおけるPWA</h3>
<p>SafariのPWA対応は他プラットフォームのChromium系ブラウザと大きく違っている点が一つあって、SafariとインストールされたPWAはストレージを共有しない。つまり、例えばSafariでログインしたユーザーがホーム画面にサイトをインストールしてそちらを開くと、ログイン状態ではなくなってしまう。</p>
<p>また同じPWAを複数回インストールした場合、インストールごとに個別のストレージが用意される。これを利用してアカウントを切り替える使い方ができる。</p>
<p>環境によって動作が違うという点では悩ましいが、今回は（Androidでは<a href="https://github.com/kichikuou/xsystem4-android" target="_blank" rel="nofollow noopener noreferrer">xsystem4のネイティブアプリ</a>が使えるということもあり）Safariの仕様にべったり依存して作ることにした。ストレージ分離のおかげで複数のゲームをインストールでき、またホーム画面から削除するとそのゲームのストレージだけ解放されるためわかりやすい。</p>
<h3 id="pwa%E3%81%A8%E3%82%B9%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B8">
<a class="header-anchor-link" href="#pwa%E3%81%A8%E3%82%B9%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B8" aria-hidden="true"></a> PWAとストレージ</h3>
<p>昔のiOS Safariはオリジンごとに50MBとかしか保存できなかったと記憶しているが<sup class="footnote-ref"><a href="#fn-0438-1" id="fnref-0438-1">[1]</a></sup>、Safari 17.0でストレージポリシーが緩和されてWebアプリに大容量のデータを保存できるようになった。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b7fe2b21f91a2" src="https://embed.zenn.studio/card#zenn-embedded__b7fe2b21f91a2" data-content="https%3A%2F%2Fwww.webkit.org%2Fblog%2F14403%2Fupdates-to-storage-policy%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.webkit.org/blog/14403/updates-to-storage-policy/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.webkit.org/blog/14403/updates-to-storage-policy/</a></p>
<p>System4ゲームの多くは1GB以上のデータを持つため、これらをインストールするにはSafari 17以降が必須ということになる。</p>
<p>また、<code>navigator.storage.persist()</code>を呼び出すと保存したデータをブラウザが自動的に（ユーザーの許可なしに）削除しないように指定できる。これが許可されるには条件があるが、ホーム画面にインストールされたPWAなら大丈夫なはず（未確認）。</p>
<h2 id="xsystem4-web%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%A9">
<a class="header-anchor-link" href="#xsystem4-web%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%A9" aria-hidden="true"></a> XSystem4 Webインストーラ</h2>
<p>こうした仕様を踏まえて、<a href="https://xsystem4-pwa.web.app" target="_blank" rel="nofollow noopener noreferrer">XSystem4 Webインストーラ</a> Webサイトの実装を解説する。ソースコードは以下にある。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__72b77deba2682" src="https://embed.zenn.studio/card#zenn-embedded__72b77deba2682" data-content="https%3A%2F%2Fgithub.com%2Fkichikuou%2Fxsystem4-web" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/kichikuou/xsystem4-web" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/kichikuou/xsystem4-web</a></p>
<p>xsystem4実行エンジンを別にすれば小規模なコードベースなので、その気になれば全部読めると思う。</p>
<h3 id="%E5%85%A8%E4%BD%93%E3%81%AE%E6%B5%81%E3%82%8C">
<a class="header-anchor-link" href="#%E5%85%A8%E4%BD%93%E3%81%AE%E6%B5%81%E3%82%8C" aria-hidden="true"></a> 全体の流れ</h3>
<p>ゲーム起動までの流れは以下のようになる。</p>
<ol>
<li>ユーザーがトップページ <a href="https://xsystem4-pwa.web.app/" target="_blank" rel="nofollow noopener noreferrer">https://xsystem4-pwa.web.app/</a> を訪れる。</li>
<li>ファイル選択ダイアログを使って、ユーザーが別途用意した（ゲームデータが入った）ZIPファイルを読み込む。</li>
<li>ZIP中のデータを参照して、インストール用の<a href="https://developer.mozilla.org/ja/docs/Web/Manifest" target="_blank" rel="nofollow noopener noreferrer">Web App Manifest</a>を作る。ゲームデータのインストールはこの時点では行わないことに注意。なぜならここでゲームデータを保存しても、上記のストレージ分離によってインストールされたPWAからはアクセスできないからである。</li>
<li>「ホーム画面に追加」を行うよう促すメッセージを表示する。</li>
<li>ユーザーがホーム画面に追加したアイコンをタップすると、新しいブラウザウィンドウが開き、先ほどと同じZIPファイルをもう一度選択するよう指示される。</li>
<li>ユーザーが選んだZIP内のファイルを<a href="https://developer.mozilla.org/ja/docs/Web/API/File_System_API/Origin_private_file_system" target="_blank" rel="nofollow noopener noreferrer">OPFS</a>に展開する。ゲームデータはここでインストールされる。</li>
<li>インストールが完了すると、OPFS内のファイルを使ってxsystem4の実行環境を設定し、ゲームを起動する。</li>
</ol>
<p>次回以降ユーザーがホーム画面アイコンをタップすると、ステップ7から始まる。</p>
<p>以下、主要なステップをより詳しく見ていく。</p>
<h3 id="zip%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%AA%AD%E3%82%80">
<a class="header-anchor-link" href="#zip%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%AA%AD%E3%82%80" aria-hidden="true"></a> ZIPファイルを読む</h3>
<p>まずはユーザーが指定したZIPファイルを読む必要がある。JavaScriptからZIPを扱うライブラリはいくつもあるが、</p>
<ul>
<li>巨大なZIPファイルを扱える</li>
<li>ランダムアクセス可能</li>
<li>パス名の文字エンコーディングを指定可能（特にShift_JIS）</li>
</ul>
<p>を全て満たすものが見つからなかったため、自前でZIPファイルをパースすることにした。Deflate圧縮の展開はブラウザ組み込みのDecompressionStream（Safariでは16.4からサポート）に任せてしまえるため、必要最低限の実装なら100行足らずで書けてしまう。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__ee6b7e5644944" src="https://embed.zenn.studio/github#zenn-embedded__ee6b7e5644944" data-content="https%3A%2F%2Fgithub.com%2Fkichikuou%2Fxsystem4-web%2Fblob%2F0f2a03539e977acd0998209e99676fe824adab97%2Fsrc%2Fzip.ts" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/kichikuou/xsystem4-web/blob/0f2a03539e977acd0998209e99676fe824adab97/src/zip.ts" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/kichikuou/xsystem4-web/blob/0f2a03539e977acd0998209e99676fe824adab97/src/zip.ts</a></p>
<h3 id="%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E7%94%A8%E3%81%AEweb-app-manifest%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E7%94%A8%E3%81%AEweb-app-manifest%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B" aria-hidden="true"></a> インストール用のWeb App Manifestを生成する</h3>
<p>Web App ManifestはPWAインストール用のメタデータを記述したJSONファイル。ここでZIPファイルから取り出す必要があるのは、ゲームの名前とアイコン画像である。</p>
<p>System4ではゲームタイトルは設定ファイル<code>System40.ini</code>または<code>AliceStart.ini</code>に記述されているので、ZIPファイルからそれらを探して読めば良い。</p>
<p>アイコンに関しては２つのケースがある。</p>
<ul>
<li>拡張子<code>.ico</code>のファイルとして存在</li>
<li>Windows実行ファイルにリソースとして含まれる</li>
</ul>
<p>後者の場合は<a href="https://github.com/kichikuou/xsystem4-web/blob/0f2a03539e977acd0998209e99676fe824adab97/src/icon_extractor.ts" target="_blank" rel="nofollow noopener noreferrer">実行ファイルのリソースセクションを読み込んで<code>.ico</code>を抽出</a>している。</p>
<p>Safariは<code>.ico</code>形式を理解するので画像形式の変換は不要。data: URLにエンコードしてマニフェストの<code>icons</code>に指定するか、<code>&lt;link rel="apple-touch-icon"&gt;</code>要素に指定する。</p>
<p>マニフェストを生成したら、<code>&lt;link rel="manifest"&gt;</code>要素としてDOMに追加する。これで「ホーム画面に追加」が実行された時、マニフェストの情報に従ってアイコンが作られる。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__9fc166063a57d" src="https://embed.zenn.studio/github#zenn-embedded__9fc166063a57d" data-content="https%3A%2F%2Fgithub.com%2Fkichikuou%2Fxsystem4-web%2Fblob%2F0f2a03539e977acd0998209e99676fe824adab97%2Fsrc%2Findex.ts%23L43-L75" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/kichikuou/xsystem4-web/blob/0f2a03539e977acd0998209e99676fe824adab97/src/index.ts#L43-L75" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/kichikuou/xsystem4-web/blob/0f2a03539e977acd0998209e99676fe824adab97/src/index.ts#L43-L75</a></p>
<h3 id="%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> ゲームデータのインストール</h3>
<p>上で生成したマニフェストの<code>start_url</code>は、<code>/play.html</code>になっている。このページはゲームがインストールされていれば起動するが、PWAの初回起動でゲームデータがまだインストールされていない場合は<code>/install.html</code>に遷移する。</p>
<p><code>/install.html</code>ではユーザーにZIPをもう一度選択してもらい、ZIPの内容をOrigin Private File Systemに展開する。…と書くと単純な話のようだが、Safari特有の小さな落とし穴がいくつもある。</p>
<h4 id="%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89%E3%81%8B%E3%82%89%E3%81%AFopfs%E3%81%AB%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%82%81%E3%81%AA%E3%81%84">
<a class="header-anchor-link" href="#%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89%E3%81%8B%E3%82%89%E3%81%AFopfs%E3%81%AB%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%82%81%E3%81%AA%E3%81%84" aria-hidden="true"></a> メインスレッドからはOPFSに書き込めない</h4>
<p>Safariでは<code>FileSystemWritableFileStream</code>が<a href="https://bugs.webkit.org/show_bug.cgi?id=231706#c7" target="_blank" rel="nofollow noopener noreferrer">未実装</a>のため、ファイルに書き込むにはまずWorkerを作らなければならない。（読み込みはメインスレッドからも可能。）</p>
<h4 id="%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%8B%E3%82%89stream()%E3%81%A7%E8%AA%AD%E3%81%BF%E5%87%BA%E3%81%99%E3%81%A8out-of-memory">
<a class="header-anchor-link" href="#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%8B%E3%82%89stream()%E3%81%A7%E8%AA%AD%E3%81%BF%E5%87%BA%E3%81%99%E3%81%A8out-of-memory" aria-hidden="true"></a> ファイルから<code>stream()</code>で読み出すとOut of Memory</h4>
<p>ファイルの<code>(begin, end)</code>の範囲を圧縮解除するには、ストリームAPIを使って</p>
<div class="code-block-container"><pre class="language-js"><code class="language-js">file<span class="token punctuation">.</span><span class="token method function property-access">slice</span><span class="token punctuation">(</span>begin<span class="token punctuation">,</span> end<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">stream</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">pipeThrough</span><span class="token punctuation">(</span>
    <span class="token keyword">new</span> <span class="token class-name">DecompressionStream</span><span class="token punctuation">(</span><span class="token string">'deflate-raw'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>とすればいいように思える。しかし<a href="https://github.com/WebKit/WebKit/blob/976416306c9f8fb8b5811e69abffef8a1b0f35c4/Source/WebCore/fileapi/Blob.cpp#L307-L366" target="_blank" rel="nofollow noopener noreferrer">WebKitのBlob::stream()の実装</a>はファイルを全力で読んでストリームにプッシュするので、圧縮されたデータが数百MBあるとOut of Memoryエラーを吐いてしまう。</p>
<p>仕方ないのでファイルを少しずつ読むReadableStreamを自分で書いた。まあ大した手間ではないが…。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__f67bc50fa3cb5" src="https://embed.zenn.studio/github#zenn-embedded__f67bc50fa3cb5" data-content="https%3A%2F%2Fgithub.com%2Fkichikuou%2Fxsystem4-web%2Fblob%2F0f2a03539e977acd0998209e99676fe824adab97%2Fsrc%2Fworker%2Finstaller_worker.ts%23L52-L73" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/kichikuou/xsystem4-web/blob/0f2a03539e977acd0998209e99676fe824adab97/src/worker/installer_worker.ts#L52-L73" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/kichikuou/xsystem4-web/blob/0f2a03539e977acd0998209e99676fe824adab97/src/worker/installer_worker.ts#L52-L73</a></p>
<h4 id="%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%81%BF%E3%81%AB%E5%A4%B1%E6%95%97%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%81%BF%E3%81%AB%E5%A4%B1%E6%95%97%E3%81%99%E3%82%8B" aria-hidden="true"></a> ファイルの書き込みに失敗する</h4>
<p>時々、OPFSへのファイルの書き込みが "Failed to write to file" や "Context has stopped" というエラーメッセージとともに失敗することがある。原因はよくわからないが、再度書き込むと成功することが多いのでリトライ処理を入れている。</p>
<h3 id="%E3%82%B2%E3%83%BC%E3%83%A0%E8%B5%B7%E5%8B%95">
<a class="header-anchor-link" href="#%E3%82%B2%E3%83%BC%E3%83%A0%E8%B5%B7%E5%8B%95" aria-hidden="true"></a> ゲーム起動</h3>
<p>OPFSにファイルを置いた後に<code>/play.html</code>に遷移するとゲームの起動処理に入る。具体的には以下のような流れとなる。</p>
<ol>
<li>xsystem4のEmscriptenモジュールをロード</li>
<li>ゲームのファイルをOPFSからEmscriptenのファイルシステムに投入</li>
<li>フォント等、他のリソースをEmscriptenファイルシステムに投入</li>
<li>準備ができたら、xsystem4の<code>main()</code>を開始する</li>
</ol>
<p>その他、このページにはxsystem4のWebAssemblyと協調して動作するJavaScriptが含まれる。例えばSystem4のゲームではセーブデータにコメントを書き込めるものがあるが、コメント入力画面で仮想キーボードが使えるよう<a href="https://github.com/kichikuou/xsystem4-web/blob/0f2a03539e977acd0998209e99676fe824adab97/src/input.ts" target="_blank" rel="nofollow noopener noreferrer">透明な<code>&lt;input type="text"&gt;</code>を画面に重ねる</a>ためのコードなどがある。</p>
<h2 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h2>
<p>独自仕様や制限が多くWebアプリには厳しい環境のiOS Safariだが、ストレージ制限の緩和など最近の改善によってこのようなPWAも作れるようになった。</p>
<p>外部のデータをホーム画面に「インストール」する仕組みは面白いと思うので、この方式のPWAを作る際の参考になれば幸いである。</p>
<section class="footnotes">
<span class="footnotes-title">脚注</span>
<ol class="footnotes-list">
<li id="fn-0438-1" class="footnote-item">
<p>今調べたところ、その後<a href="https://trac.webkit.org/changeset/237700/webkit/" target="_blank" rel="nofollow noopener noreferrer">500MB上限</a>の時代があったようだ <a href="#fnref-0438-1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>


iPadに18禁ゲームをインストールする（ためのWebアプリを作る）

インストール用のWeb App Manifestを生成する

Discussion