コンテンツへスキップ

HTML5でローカルアプリケーション(PC,Mac向け)を開発できるフレームワークまとめ

by : 2014/11/18

HTML5の機能が充実し、JavaScriptが高速化するのに伴って、ローカルアプリケーションとWebアプリケーションの垣根がどんどん低くなってきています。数年前まではまるで無理だった多機能な操作もWebブラウザ上で実現できるようになっています。

とはいえファイルシステムやネットワークなど、まだまだWebアプリケーションだけでは完結できないこともあります。そこで使ってみたいのが、HTML5アプリケーションをラッピングしてローカルアプリケーション化するフレームワーク達です。なお、今回紹介するものは基本的にデスクトップPC(Windows)およびMac向けのアプリに変換するものです。

node-webkit

node-webkitはnode(node.js)/HTML5/JavaScriptでローカルアプリケーションを提供するソフトウェアです。nodeがネイティブの機能(ファイルシステムやネットワークなど)を提供し、JavaScriptで通信できるようにしています。

画面はChromium(Google Chromeのオープンソース版)を使っており、WebKit(最近ではBlink)ベースのレンダリングをサポートしています。

rogerwang/node-webkit

Web2Executable

Web2Executableはnode-webkit向けに作られたパッケージをランタイムとともにラッピングし、実行ファイルに変換します。Windows/Mac OSX/Linux向けに、それ単体で動作するバイナリに変換してくれます。

ランタイムを内包するため、その分サイズは大きくなります。とはいえ実行に際してnode-webkit環境のインストールが不要になりますので、配布時にはとても便利でしょう。

jyapayne/Web2Executable

HTML5-Packer

HTML5-PackerはHTML5/JavaScript/スタイルシートをはじめ、さらに画像、オーディオ、動画も含めてすべて一つのファイルとしてラッピングしてくれるソフトウェアです。ラッピングすると一つのHTMLファイルができます。他にも何のファイルもいりませんので、Webアプリケーションとしての配布がとても楽になります。

elias-schuett/HTML5-Packer

slfsrv

slfsrvはHTML5/JavaScript/スタイルシートを読み込むためのWebサーバを提供します。slfsrvでラップされた実行ファイルを起動すると、Webサーバが立ち上がります。後はWebブラウザからアクセスすれば、Webアプリケーションとして利用できる仕組みです。Windows/Mac OSX/Linux向けに実行ファイルが生成されます。

HTML5-PackerはローカルのHTMLファイルとして利用するのでセキュリティ上の制限がありますが、slfsrvは外部リソース(JavaScriptなど)の読み込みにも対応しています。

BrentNoorda/slfsrv

Chromeless

ChromelessはMozillaが開発している技術で、xulrunnerを使ってHTML5/JavaScript/スタイルシートを一つのデスクトップ実行ファイルにラッピングします。ぱっと見ではWebブラウザのように見えますが、指定されたドメイン外には出られませんので、セキュリティ上も安心できる仕組みです。なお、現在は開発が終了しています。

mozilla/chromeless

Bowline

Bowlineは他のnodeとは違い、Rubyでローカル側の仕組みを作り、HTML5/JavaScriptでUIを作成します。開発は数年前から停止している模様です。

maccman/bowline


いかがでしょうか。意外と便利なのが利用者への配布ではないかと思います。URLを覚えてもらうのではなく、アプリケーションとして提供してしまえば起動するだけでサービスにアクセスできます。実際のデータはWeb APIを通じてサーバから提供する形でも良いでしょう。

さらにアプリケーションが限定されたドメインにしかアクセスできないことで、外部への不用意なデータ流出を避けると言った目的にも使えます。業務中で使う小さなアプリケーションをWeb化する際に使ってみてはいかがでしょう。

hifive – HTML5企業Webシステムのための開発プラットフォーム

HTML5企業Webシステムのための開発プラットフォーム

From → まとめ, HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。