JSゲームをダウンロード可能にするにはどうすればよいですか?


20

HTMLとJavaScriptを同じ.htmlファイルにまとめることができますが、画像は別々のファイルである必要があります。私の頭に浮かぶ唯一の解決策は、ユーザーに.zipフォルダーを与えることです。

しかし、これはきれいではありません...他にどのようにこれを行うことができますか?


8
「標準」、JSゲームをダウンロード可能にすることではありません。ブラウザでのみ機能します。あいまいな方法もありますが、率直に言って、それを強制する理由は次のとおりです。仕事に適切なツールを使用してください。
ジョーク14

回答:


21

dataurl-syntaxを使用してHTMLドキュメントに画像を埋め込むことができます。これにより、バイナリ画像データのbase64表現を画像のsrc属性として配置できます。これは、他の種類のメディアファイルでも機能します。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9EFBAoYMhVvMQIAAAAtSURBVHicY/z//z8DHoBH+v///yy4FDEyMjIwMDDhM3lgpaEuh7gTEzDiDxYA9HEPDF90e5YAAAAASUVORK5CYII=">

CSSスタイルシートを使用すると、これらの完全な手続き型をJavaScriptで作成できます。


もちろん、BASE64は、ファイルサイズを4倍、より多くのスペースを取り...
トビアスKienzler

10
@TobiasKienzler:64 * 4 = 256は、1バイトをエンコードするのに4倍のデータが必要であることを意味しませんが、各バイトの8ビットごとに6ビット(2 ** 6 = 64)しか使用しません。つまり、3バイトをエンコードするには4バイトかかり、サイズが33%増加します(必要に応じてパディングはカウントされません)。ほとんど4倍。データサイズが4倍になる唯一のケースは、1バイトをエンコードする場合です。これには、2データバイトと2パディングバイトが必要です。
パンダパジャマ14

2
@PandaPajama悪いのは、「2/4 = 1/4の無駄なビットのため」「4分の1ずつ増加する」と言うつもりでした。とにかく間違いを犯したのは明らかですが、あなたが導き出した33%は正しいです。それでも、それはオーバーヘッドであり、電子メールの添付ファイルからも「有名」です
トビアスキンツラー14

1
そのベース64インラインエンコーディングは、.wav、.ogg、.m4aなどのその他のリソース、および一般的にはどのファイルでも機能しますか?
DrZ214

1
@ DrZ214試したことはありませんが、URLが機能する場所であればどこでも機能するはずです。
フィリップ

31

すべてのファイルを.zipファイルに入れるだけでは、ほとんどのWebアプリケーションはHTTP要求を介してリソースにアクセスできるようにWebサーバーを必要とするため、実行可能なソリューションではありません。一部のシステムでは、file://URI-schemeを介してファイルにアクセスできますが、セキュリティ上の理由によりどこでも機能することは保証されておらず、AJAXリクエストなどの場合は失敗します。

ほとんどのリソースがインラインにある非常にシンプルなアプリでは機能するかもしれませんが、これは私が誰にもお勧めするアプローチではありません。ただし、次のような代替手段があります。

ネイティブアプリケーションを構築する

Node-Webkitを使用して、Webアプリケーションをネイティブアプリとしてパッケージ化できます。これを使用して、ネイティブのデスクトップ機能(ローカルのセーブゲームなど)をゲームに追加することもできます。

しかし、これは「パッケージ化された」アプローチではありません。おそらく、アプリケーションの一部を書き直して、異なるローダーを作成する必要があります(例えば、デスクトップアプリケーションでは、ファイルシステム経由でファイルをロードし、 -ブラウザ/オンラインゲームでのリクエスト)。

HTML5機能を使用して、アプリのオフラインアクセスを許可します

プレーヤーがゲームをオフラインでプレイできるようにすることが主な目的である場合は、アプリケーションキャッシュを使用してアプリのオフラインアクセスを許可することもできます。これは、ほとんどの最新のブラウザで機能する機能です。追加の利点は、ユーザーが何もダウンロードする必要がなく、ブックマークを使用してオフラインでもゲームをプレイできることです。

非同期にロードされるリソース(AJAX)の場合、別個のロードメカニズムを実装する必要もあります。あなたはの使用作ることができるローカル・ストレージをオフラインで使用するために、これらのリソースを節約するために。


2
Node-Webkitは非常に大きいため、「hello world」JSゲームを含めると60MBになります。
ashes999

1
これは、アプリケーションがリモートでさえ複雑な場合の正しい答えです。
ヴォーンヒルツ14

1
@ ashes999同意しますが、最近のデスクトップアプリでは60MBがまだかなり小さいです。汎用フレームワークの多くは、ファイルサイズのオーバーヘッドを発生させます(顕著な例としてUnityを取り上げます)。ストレージスペースが増え続けると、ファイルサイズよりも利便性が高くなります;)
bummzack 14

2
@bummzack私は同意しません。アートやオーディオを追加する前に、〜100kbのJSゲームをプレイして60MBになるのを見るのは気のめいるだけです。誰かがもっと良い方法を思いつくことを願っています。+1 btw
ashes999 14

1
この答えには多くの有用な情報がありますが、先頭の文は明らかに間違っています。ゲームデータをJavaScriptファイルに入れることができ、最新のブラウザーは少なくとも数MBのJavaScriptを処理できる必要があります。また、キャンバスから画像データを読み取ろうとしない限り、画像ファイルを使用しても問題はありません。 。前回チェックしたとき、最新のブラウザーはすべて、file:///プロトコルへのアクセスを許可していますlocalStorage。これは保存に役立ちます。オンラインプレイを除いて、HTMLゲームでできることなら何でも実行できます。
aaaaaaaaaaaa 14

7

ゲームをオフラインで実行し、いくつかのネイティブ機能を楽しむためのChromeベースのソリューションについては、Chromeアプリの作成を検討できます。

これにより、Chrome Web Storeで配布して可視性を高めたり、強力なAPIを楽しんだり、スタンドアロンアプリのよう見せることができます。

欠点は、もちろん、Chromeが必要なことです。


1
Firefox(およびFirefos OS)にはOpenWebApps(developer.mozilla.org/en/Apps/Quickstart/Build/…)があります。これは、アプリケーションとしてインストールされたダウンロードされたWebアプリケーションIDです。両方のソリューションは、共通の標準html5doctor.com/web-manifest-specificationに収束する必要があります。参照:code.google.com/p/chromium/issues/detail
id

@ysdxあなたが言及する収束標準は、Chromeが「ホスト型アプリ」と呼ぶものに対するものであり、「パッケージ型アプリ」とも呼ばれる自己完結型のダウンロード可能なアプリに対するものです。Firefoxにも同じ用語が適用されます。残念ながら、パッケージ化されたアプリはアーキテクチャ上非常に異なり、収束する可能性は低いです。
ザン

@Xanパッケージアプリとは何ですか?「ホストされた」アプリと「パッケージ化された」アプリの両方は、FirefoxとChromeアプリストアで利用できますか?
Qsigma 14

1
@Qsigmaパッケージ化されたアプリは、ローカルファイルシステムアクセスなどの強力なAPIにアクセスできる、ほとんどが自己完結型のHTML5アプリです。ダウンロードに独自のリソースが含まれているため、「パッケージ化」されています。「ホストされた」アプリは、基本的に、何らかのメタデータを持つWebサイトへのリンクです。ショートカットとブックマークのクロスと考えてください。Firefoxストアについては説明できませんが、最初のコメントのドキュメントでは、パッケージ化されたアプリの作成方法について説明しています。
ザン14

クリックして、追加のクォータとアクセス許可でダウンロードせずにアプリをオフラインで実行することと、追加のクォータおよびアクセス許可でダウンロードせずにアプリを実行してクリックすることの違いは何ですか?技術的には違いがありますが、それらの違いは表面的なものであり、ユーザーにとって違いはありません。適切に設計されたホスト型アプリのパッケージ化は、適切なマニフェストを使用することで非常に簡単になります。パッケージ化されたアプリの欠点は、外部のパッケージマネージャーなしでは自分自身を更新できないことです。ホストされたアプリでは、ブラウザー自体がパッケージマネージャーになります。
ライライアン14年

0

まあそれはあなたが本当にそれにどれだけの仕事をしたいのかによる。Web APIの現在のセットを使用すると、次のことができます。

  • 作成プログレッシブWebアプリケーション(PWA)は(悲しいことのPWAのみ、携帯電話とChrome OSのためのものですが、私がいることを聞いたデスクトップ用のChromeはすぐにすぐにそれをサポートしています。今のところ、それは旗の後ろに隠して)古いため、アプリケーションキャッシュは非推奨になりました
  • すべてをテキスト画像音声)に変換ます。そして、ユーザーにWebページをそのまま(ブラウザーを使用して、Cmd+SまたはCtrl+Sブラウザーで)保存するか、ページをPWAとしてキャッシュすることを推奨します。モバイルでは、dataURIのパフォーマンスがあまり良くないことを知ってください。
  • あなたは、作成することができChromeアプリを、それはクロームのOS上で実行されていない任意のChromeバージョンでは動作しません。これは、代わりに拡張機能を作成する方が良いことを意味します
  • ほとんどのゲームは10 MB未満で、ゲームのすべてのデータをローカルストレージにキャッシュできます。これをどのように行うかはあなた次第です:上記を行う(すべてをテキストに変換する)、Blob apiを使用する、などができます。つまり、すべてが正常であることを確認する必要があります(コードがまだメモリにある場合)。つまり、読み込み時間が長くなり、ユーザーの電話がクラッシュする可能性があります。ただし、この道を進むことを選択した場合、LocalForageを使用することで間違いなくメリットが得られます。
  • 使用する電子またはNW.js、あなたはデスクトップアプリケーションを作成するためにあなたのHTML、CSS、およびJSを使用することができます。同様の方法を使用して、モバイルアプリを作成することもできます(CordovaまたはPhoneGapなどの依存関係を使用)。これを行い、必要に応じてユーザーがゲーム全体をダウンロードできるようにします。
  • それでもzipファイルを続行したい場合は、JSZipをチェックアウトしてください。私はあなたがそれをどのように使うことができるのか分かりませんが、誰かが良いアイデアを思い付くことができると確信しています(あなたのファイルをzipしてからバイナリデータを文字列に変換してhtmlにインラインで配置するかもしれません)。
  • この奇妙なハックにより、テキストデータをデータブロックとして知られるものとしてロードできます。これは、アセットをHTMLファイルに埋め込むために使用できる別のツールです。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.