HTML / CSS / JavaScriptを使用してデスクトップアプリを開発する方法 [閉まっている]


189

まず、私はこれを専門的に行うことに興味がありません。私はウェブデベロッパーで、最近Spotifyに赴任した同僚で、主にSpotifyデスクトップアプリのJavaScriptで作業する予定であると述べました。「Chromeフレーム」を使用しており、内部はすべてWebアプリ(HTML / JS / CSS)のように行われると彼は言った。

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

データベースについては何も触れなかったのはわかっていますが、Webテクノロジーを備えた単純なhello worldデスクトップアプリでも、うまくいくでしょう。

それで、これをどうやって行うのですか?正確に何が必要/知っている必要がありますか?


web-app-inessには少なくとも2つの非排他的な層があることに注意してください。1つはクライアント側の単一ページのアプリケーションスタイルアプリで、もう1つはデータベースなどで状態を維持するアプリです。(もちろん、最高のアプリは両方です。)他のことをあまり学ばなくても、1つの方法を学ぶことができます。
Waleed Khan、

ここにある別の関連スレッド[JavaScriptを使用してデスクトップ開発を行うことはできますか?] [1] [1]:stackoverflow.com/questions/109399/… よろしくお願いします、ベン
benbai123

あなたはそれを間違っています。Webはデスクトップアプリ用に設計されていません。期間。必要に応じて、QML / QtQuickを使用できます。これは良いトレードオフです(ただし、Webではなくデスクトップのままです)
Stef


回答:


74

デスクトップ開発用のTitaniumから始めることができます。また、Chromium Embedded Frameworkもご覧ください。基本的には、クロムに基づくWebブラウザーコントロールです。

それはC ++で書かれているので、コンテナーアプリで必要なすべての低レベルOSの操作(グロー、トレイアイコン、ローカルファイルアクセス、COMポートなど)を実行できます。その後、html / javascriptですべてのアプリケーションロジックとGUIを実行できます。これにより、httpリクエストをインターセプトして、ローカルリソースを提供したり、カスタムアクションを実行したりできます。たとえば、http://localapp.com/SetTrayIconState?state = activeへのリクエストはコンテナによってインターセプトされ、C ++関数を呼び出してトレイアイコンを更新できます。

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

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

AppJS.comを試すこともできます(HTML、CSS、JavaScriptを使用してLinux、Windows、Mac向けのデスクトップアプリケーションを構築するのに役立ちます)

また、@Clint、でチームが指摘したようにbrackets.io(アドビシステムズ社)は、始めるのは、それがはるかに容易になりクロム組み込みフレームワークを使用して素晴らしいシェルを作成しました。ブラケットシェルと呼ばれます:github.com/adobe/brackets-shell詳細については、こちらをご覧ください:clintberry.com/2013/html5-desktop-apps-with-brackets-shell


3
CEFにはChrome開発ツールが組み込まれているので、これを使用してjsをデバッグできます。AppJSは、nodejs APIを使用してOSに低レベルでアクセスすることもできます。
Morteza Milani

1
Bracket.io(Adobe)のチームは、Chromium Embedded Frameworkを使用して素晴らしいシェルを作成しました。括弧はシェルと呼ばれる:github.com/adobe/brackets-shell ここでそれについての詳細を見つける:clintberry.com/2013/html5-desktop-apps-with-brackets-shell
クリント

私は現在CEFとEclipseを開発ツールとして使用しています。プログラムの引数の実行構成に--remote-debugging-port = 8080を渡してCEFをChromeデベロッパーツールにリンクし、Chromeのlocalhost:8080に移動することができます。 。したがって、その部分を削除してください。CEFでJavaScriptを直接デバッグすることは非常に困難です。Firebugなどのサポートはありません。-
本鎖キッド

また、CEF、PhoneGap、AdobeのBacket.io、AppJSなどに基づくWin32、Linux、Unixのような、MacおよびSmartPhone向けのソリューションを開発するためにKontenaコンテナgithub.com/jhg/kontenaの開発を開始しています。 。非常に不安定で、MVPを取得するためのプロトタイプのみであり、Python for testコンセプトで記述されていますが、コードはQT5を使用してC ++ / Cに変換され(現在はQT4を使用)、C ++ / Cの場合はmobilの変換を開始しますサポート。

@JHG正解です。正式にリリースされ、バグが修正されたときにお知らせください
2016

33

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を学びたい場合は、この SO投稿に多くの優れたリンクを付けることをお勧めします。


2
出向。素晴らしいツール。
エリック・レッペン2014

しかし、これは、nodeとnode-webkitをインストールするように要求せずに人々の間で配布することはできません。
ジャニスGruzis

@JānisGruzisいいえ、NW.jsバイナリを使用してアプリ出荷しました
Approxiblue 2016年

27

Awesomiumを使用すると、C ++または.NETアプリでHTML UIを簡単に使用できます

更新

以前の答えは古くなっています。最近では、Electronをこれに使用しないように気を配る必要があります。その上に、多くの人気のデスクトップアプリが開発されています。



9

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

私が遭遇した1つのソリューションはTideSDKです。 http://www.tidesdk.org/、非常にドキュメントを見て、有望と思われます。

Python、PHP、またはRubyで開発し、Mac、Windows、またはLinux用にパッケージ化できます。


1
有望に見えたが、もう開発されていないように見える。コアチームはTideKitと呼ばれるものに取り組んでいますが、リリースするのに永遠にかかります
それに

1
はい、残念です。私が答えたとき、それは有望に見えました。それが、彼らが推奨事項に関する質問に不満を抱く理由の1つだと思います。
mydoghasworms 2015年

3

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

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

私はappcelerator使った経験はありませんが、まさにそれを実行しているようで、オンラインで非常に好意的なレビューを得ています。あなたはそれを試してみる必要があります(1999年に戻ってMS HTAで転がりたいと思ったのでなければ;)


アプリケーションにはWebkitを使用しますが、メインのソフトはhtml / jsに基づいていません
Sucrenoir

1

流体プリズムがあることを知っていますスタンドアロンアプリのように見えるものにウェブサイトをロードしてみましょう(私が使用するために使用されるものだと、他のものがあります)。

Chromeでは、ウェブサイトのデスクトップショートカットを作成できます。(これはChrome内から行いますが、アプリでパッケージ化することはできません/すべきではありません)Chrome Frameは異なります。

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

あなたはあなたのウェブアプリのためにそのようなある種のラッパーを持つ必要があるでしょう、そしてそれから残りはあなたが慣れているウェブ技術です。HTML5 ローカルストレージを使用して、アプリがオフラインのときにデータを保存できます。SQLiteで作業できるかもしれません。

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



0

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

Node-Webkitを統合するネイティブモジュールがない場合は、より優れたマイレージを提供できます。ネイティブモジュールC / C ++またはC#の場合は、CEFの方が適しています。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.