ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Webアプリケーションはブラウザさえあればどの環境でも動かせる便利な仕組みですが、大きな欠点としてはネットワークがないといけないというのがあります。オフラインでも対応しようと思うとダウンロードと設定がとても面倒です。

その点、バイナリの実行ファイルはダウンロードしてすぐに実行できます。同じような仕組みをWebアプリケーションでも可能にするのがHTML5-Packerです。

HTML5-Packerのインストール

まずはインストールします。npmでインストールできます。

$ npm install html5-packer --save-dev

これで準備は完了です。

HTML5-Packerの使い方

ローカルにあるWebアプリケーションをパッキングします。この時、gruntと組み合わせて実行します。

grunt HTML5_Packer
Running "HTML5_Packer:demo" (HTML5_Packer) task

- gathered 7 files
- inlined css/main.css
- inlined js/core.js
- inlined js/canvas.js

こちらは普通のWebアプリケーションです。
こちらは普通のWebアプリケーションです。

こちらはパッキング済み。一つのHTMLだけで動作しています。
こちらはパッキング済み。一つのHTMLだけで動作しています。

その内容。スクリプトが暗号化されて文字列だらけになっています。
その内容。スクリプトが暗号化されて文字列だらけになっています。

なおAjaxリクエストの結果はメモリに蓄積されるようです。ちょっとした計算や、WebGLを使ったようなWebアプリケーションをパッキングし、配布するなんてのも面白いかも知れません。

HTML5-Packerはnode/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Demo App

elias94xx/HTML5-Packer

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2