web-dev-qa-db-ja.com

HTML / CSS / JavaScriptを使用してデスクトップアプリを開発する方法

まず、これを専門的に行うことには興味がありません。私はウェブ開発者で、最近Spotifyのために去った同僚で、彼はSpotifyデスクトップアプリのためにほとんどJavaScriptで作業すると言いました。彼はそれが "Chromeフレーム"を使用しており、内部のすべてがWebアプリケーション（HTML/JS/CSS）のように行われていると述べました。

デスクトップ用に何も構築したことがないWeb開発者として、これは素晴らしいニュースです。私がすでに知っているテクノロジーを使用して、それらをある種の「フレーム」の中に実装しても、それでもウィンドウズやもっと良いクロスプラットフォームのアプリを作ることができるなら。

私はデータベースについては何も言及しなかったことを知っていますが、Webテクノロジーを備えた単純なhello worldデスクトップアプリケーションでさえうまくいくでしょう。

それでは、これについてどのように考えますか？正確には何が必要ですか/知る必要がありますか？

javascripthtmlcssdesktop-applicationgoogle-chrome-frame
187
TK123

あなたはデスクトップ開発者のためにTitaniumから始めるかもしれません。また、Chromium Embedded Frameworkをご覧ください。それは基本的にクロムに基づいてWebブラウザコントロールです。

C++で書かれているので、コンテナアプリケーションで必要なすべての低レベルOSの機能（Growl、トレイアイコン、ローカルファイルアクセス、COMポートなど）を実行してから、すべてのアプリケーションロジックとGUIをHTML/Javascriptで実行できます。それはあなたがローカルリソースを提供するか、またはいくつかのカスタムアクションを実行するためにhttpリクエストを傍受することを可能にします。たとえば、 http://localapp.com/SetTrayIconState?state=active に対する要求がコンテナによってインターセプトされ、トレイアイコンを更新するためにC++関数が呼び出される可能性があります。

また、JavaScriptから直接呼び出すことができる関数を作成することもできます。

JavaScriptをCEFで直接デバッグすることは非常に困難です。 Firebugのようなものに対するサポートはありません。

AppJS.com（デスクトップアプリケーションの構築に役立ちます。Linux、Windows、Macの場合はHTML、CSS、 JavaScript）

@Clintが指摘したように、brackets.io（Adobe）のチームは、Chromium Embeddedを使用して素晴らしいシェルを作成しました。使いやすくするためのフレームワーク。括弧はShellと呼ばれます。 github.com/Adobe/brackets-Shell 詳細については、こちらを参照してください。 clintberry.com/2013/html5-desktop-apps-with-brackets-シェル

73
blasteralfred Ψ

NW.js

（以前はnode-webkitとして知られていました）

あなたがNodeに慣れているかJavaScriptを経験しているならば、私はNW.jsを提案するでしょう。

NW.jsはChromiumとnode.jsに基づいたアプリランタイムです。

特徴

  • 現代のHTML5、CSS3、JS、WebGLで書かれたアプリ
  • Node.js APIとそのすべてのサードパーティモジュールを完全にサポートします。
  • 優れたパフォーマンス：NodeとWebKitは同じスレッドで実行されます。関数呼び出しは単純明快です。オブジェクトは同じヒープ内にあり、互いに参照することしかできません。
  • アプリのパッケージ化と配布が簡単
  • Linux、Mac OS X、およびWindowsで利用可能

NW.jsリポジトリ こちら 、およびNW.jsの紹介 こちら を見つけることができます。あなたが空想学習 Node.js 私はお勧めします this SOたくさんの良いリンクを付けて投稿してください。

33
Rawa

Awesomium C++または.NETアプリケーションでHTML UIを使いやすくします。

更新

私の以前の答えは古くなっています。最近では、 Electron を使わないでください。多くの人気のあるデスクトップアプリケーションは、その上に開発されています。

26
Ronnie Overby

注： AppJS は廃止予定で、もう推奨されていません。

代わりに NW.js を見てください。

16
Siwei Shen 申思维

HTML/JS/CSSデスクトップアプリケーション用のソリューションは不足していないようです。

私が遭遇したばかりの1つの解決策はTideSDKです： http://www.tidesdk.org/ 、これはドキュメントを見て非常に有望に思えます。

Python、PHP、またはRubyを使って開発し、それをMac、Windows、またはLinux用にパッケージ化することができます。

9
mydoghasworms

あなたのバブルを破って申し訳ありませんがSpotifyデスクトップクライアントは 単なるWebkitベースのブラウザ です。もちろん、これは特定の追加機能を公開しますが、JSエンジンとChromiumレンダリングエンジンを備えているため、JSを実行してHTML/CSSをレンダリングすることしかできません。これは、クライアントサイドのWebアプリケーションのコーディングや複数のプラットフォームへのデプロイには役立ちません。

探しているものは Sencha Touch - HTML5アプリをiOS、Android、そしてBlackberryデバイスにネイティブにデプロイできるようにするフレームワークに似ています。基本的には、特定のAPI呼び出しと利用可能なデバイス固有の機能の間の仲介役として機能します。

私は appcelerator については経験がありませんが、それを正確に行っているように見えます - そして非常に好意的なレビューをオンラインで入手できます。それを試してみるべきです（1999年に戻って MS HTA ;でロールバックしたいのでなければ）。

3
o.v.

Fluid と Prism （他にもありますが、これは私が使っていたものです）があることを知っています。

Chromeでは、Webサイト用のデスクトップショートカットを作成できます。 （Chrome内からそれを行うのであれば、それをアプリケーションにパッケージ化することはできません）Chrome Frameは異なります。

Google Chrome Frameは、オープンソースのChromiumプロジェクトに基づくInternet Explorer用に設計されたプラグインです。それはGoogle Chromeのオープンウェブ技術をInternet Explorerにもたらします。

あなたはあなたのWebアプリケーションのためにそのようなある種のラッパーを持っている必要があるでしょう、そしてそれから残りはあなたが慣れ親しんだWeb技術です。あなたはアプリがオフラインの間にデータを保存するためにHTML5 ローカルストレージ を使うことができます。私はあなたがSQLiteでも動作できるかもしれないと思います。

しかし、OS固有の機能にアクセスする方法がわかりません。上記で説明した内容には、「通常の」Webサイトと同じ制限があります。うまくいけば、これはどこから始めるべきかについてのある種の手引きを与えることになります。

1
sachleen

あなたはAdobe AIRでJavascriptアプリを構築することができます… http://www.Adobe.com/products/air.html

1
Clintm

CEFはカスタマイズのための多くの柔軟性とオプションを提供します。しかし、目的が迅速に開発することであれば、node-webkitも良い選択肢です。 Node-WebキットはDOMから直接ノードモジュールを呼び出す機能も提供します。

Node-Webkitを統合するためのネイティブモジュールがない場合は、燃費が向上します。ネイティブモジュールC/C++あるいはC＃では、CEFの方が優れています。

0
harsha