回答:
dataurl-syntaxを使用してHTMLドキュメントに画像を埋め込むことができます。これにより、バイナリ画像データのbase64表現を画像のsrc属性として配置できます。これは、他の種類のメディアファイルでも機能します。
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9EFBAoYMhVvMQIAAAAtSURBVHicY/z//z8DHoBH+v///yy4FDEyMjIwMDDhM3lgpaEuh7gTEzDiDxYA9HEPDF90e5YAAAAASUVORK5CYII=">
CSSスタイルシートを使用すると、これらの完全な手続き型をJavaScriptで作成できます。
すべてのファイルを.zipファイルに入れるだけでは、ほとんどのWebアプリケーションはHTTP要求を介してリソースにアクセスできるようにWebサーバーを必要とするため、実行可能なソリューションではありません。一部のシステムでは、file://
URI-schemeを介してファイルにアクセスできますが、セキュリティ上の理由によりどこでも機能することは保証されておらず、AJAXリクエストなどの場合は失敗します。
ほとんどのリソースがインラインにある非常にシンプルなアプリでは機能するかもしれませんが、これは私が誰にもお勧めするアプローチではありません。ただし、次のような代替手段があります。
Node-Webkitを使用して、Webアプリケーションをネイティブアプリとしてパッケージ化できます。これを使用して、ネイティブのデスクトップ機能(ローカルのセーブゲームなど)をゲームに追加することもできます。
しかし、これは「パッケージ化された」アプローチではありません。おそらく、アプリケーションの一部を書き直して、異なるローダーを作成する必要があります(例えば、デスクトップアプリケーションでは、ファイルシステム経由でファイルをロードし、 -ブラウザ/オンラインゲームでのリクエスト)。
プレーヤーがゲームをオフラインでプレイできるようにすることが主な目的である場合は、アプリケーションキャッシュを使用してアプリのオフラインアクセスを許可することもできます。これは、ほとんどの最新のブラウザで機能する機能です。追加の利点は、ユーザーが何もダウンロードする必要がなく、ブックマークを使用してオフラインでもゲームをプレイできることです。
非同期にロードされるリソース(AJAX)の場合、別個のロードメカニズムを実装する必要もあります。あなたはの使用作ることができるローカル・ストレージをオフラインで使用するために、これらのリソースを節約するために。
file:///
プロトコルへのアクセスを許可していますlocalStorage
。これは保存に役立ちます。オンラインプレイを除いて、HTMLゲームでできることなら何でも実行できます。
ゲームをオフラインで実行し、いくつかのネイティブ機能を楽しむためのChromeベースのソリューションについては、Chromeアプリの作成を検討できます。
これにより、Chrome Web Storeで配布して可視性を高めたり、強力なAPIを楽しんだり、スタンドアロンアプリのように見せることができます。
欠点は、もちろん、Chromeが必要なことです。
まあそれはあなたが本当にそれにどれだけの仕事をしたいのかによる。Web APIの現在のセットを使用すると、次のことができます。
Cmd+S
またはCtrl+S
ブラウザーで)保存するか、ページをPWAとしてキャッシュすることを推奨します。モバイルでは、dataURIのパフォーマンスがあまり良くないことを知ってください。zip
ファイルを続行したい場合は、JSZipをチェックアウトしてください。私はあなたがそれをどのように使うことができるのか分かりませんが、誰かが良いアイデアを思い付くことができると確信しています(あなたのファイルをzipしてからバイナリデータを文字列に変換してhtmlにインラインで配置するかもしれません)。