web-dev-qa-db-ja.com

Webアプリケーションをデスクトップ実行可能ファイルに変換するにはどうすればよいですか?

AngularJS/jQuery/BootstrapでAJAX REST API。
Windowsオペレーティングシステム用の実行可能ファイル/インストーラーを作成することはできますか?

サードパーティのソフトウェアがなければ、ネイティブアプリケーションのように見えますが、HTMLになります。
たとえば、Slackメッセンジャーにはweb/mac/windowsバージョンがあり、同じように見えます。

何か案は?

// UPD

おそらくラッパー(webview)が必要ですが、EcmaScript5/CSS3のすべての機能が必要です。

22
Miraage

Electronが最も簡単な方法です。

1。電子をインストールする

2。main.jsの作成と編集:

const electron = require('electron');
const { app, BrowserWindow } = electron;

let mainWindow;

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 1000,
        height: 700
    });

    mainWindow.setTitle('title of the desktop app');
    mainWindow.loadURL('http://www.yourwebpage.com');

    mainWindow.on('closed', () => {
        mainWindow = null;
    });
});

。デスクトップアプリの実行:

electron main.js

アプリをビルドするには、electron-builderなどのビルダーを使用します。

それがあなたを助けることを願っています!

17
Aral Roca

私自身はしばらくの間、万能のソリューションを探していました。 TideSDK、AppJS、Appcelerator Titanium、VB.NETのネイティブコード、XCode、Python、C++、Electron、node-webkitなどのすべてを試してみました。

注意Electronは素晴らしいですが、64ビットプロセッサでのみ動作します。したがって、node-webkitは、32ビットプロセッサでアプリを実行する場合に適しています。

そこで、私は WebDGap という独自のオープンソースソリューションを構築することにしました。

現在、WebDGapはWindows、Linux、Mac OS X、Google ChromeおよびWebアプリケーションとして動作します!

How To Video をご覧になり、明らかにアプリの使い方を学んでください。

これがスクリーンショットです。 The WebDGap Application

すでにMacユーザーであるため、エクスポートしたアプリを1つの.app macファイルにマージできます。これは、Automator(および小さなシェルスクリプト)を使用して実行できます。

kodeWeave と呼ばれるこの機能が組み込まれたモバイルユーザー向けのコーディングプレイグラウンドもあります。

Macアプリとしてエクスポートする三目並べゲームを次に示します。 kodeWeave App

これで、WebアプリはネイティブMacアプリケーションとして実行されます! Tic-Tac-Toe is now running as a Mac App

5

アプリを多少書き換える必要がありますが、Apache cordovaはWindowsへの展開をサポートしています。

https://msopentech.com/blog/2014/09/25/Apache-cordova-gains-windows-8-1-and-windows-phone-8-1-support-2-2/ =

2
Robert Moskal

(完全な開示、私は ToDesktop の創始者です。ここでは客観的で偏見のないようにします。)

コンピュータサイエンスではいつものように、答えは「依存する」です。

自問すべき最初の質問は、デスクトップアプリを誰が使用しているのかということです。 ちょうどあなた?または、アプリを顧客に配布していますか?これら2つのセグメントのニーズは非常に異なるためです。

ちょうどあなた

ここには多くのオプションがあります(順不同):

  1. Nativefier —明白なオプション。多くの設定オプション、多くの貢献者、オープンソース、定期的に更新されます。自分用にアプリを作成する場合は、おそらくこれがデフォルトのオプションです。
  2. WebDGap —これは素敵なプロジェクトですが、少し古く、「2018年4月13日現在、WebDGapはアクティブなプロジェクトではなくなりました」。これは、Electronではなく、古いバージョンのnode-webkitで構築されていることにも注意してください。
  3. Web2Desk —コマンドラインをいじりたくない場合に最適なオプションです。 Nativefierの内部を使用します。スプラッシュスクリーンは無料、またはスプラッシュスクリーンを削除した場合は19ドルです。
  4. Electron を使用して日曜大工—基本は非常によくカバーされていました この以前の回答 。私はこのオプションが好きです。なぜなら、それはあなたが好きな場所にプロジェクトを取る完全な柔軟性を与え、あなたも少しのElectronを学ぶからです。
  5. Fluid App —これはMacのみですが、それ以外の場合は素敵なソリューションであり、非常に簡単です。標準バージョンでは無料ですが、フルスクリーンなどの機能を含む5ドルのバージョンもあります。
  6. FlotatoMacのみですが、これは非常に興味深いアプローチです。アプリのクローンを作成し、docs.google.comのような名前を付けるだけで、Googleドキュメントに変わります。これを書いている時点では、プレリリース版です(まだリリースされていません)が、これを注意深く見ていきます。とてもクールです。
  7. ToDesktop — ToDesktopは機能しますが、個人用アプリを作成している場合はおそらく少しやり過ぎです。また、このユースケースにはおそらく少し高すぎます。 ToDesktopは、顧客に配布するためのデスクトップアプリを作成することを目的としています(詳細については以下を参照)。

顧客への配布

顧客への配布用のデスクトップアプリを作成する際に重要になる、いくつかの追加の考慮事項があります。

  • Installer— Macユーザーは、「アプリケーションへのドラッグ」DMGファイルを期待しています。 Windowsユーザーはインストーラーを期待しており、コントロールパネルからアンインストールできることも期待しています。
  • コード署名—アプリがコード署名されていない場合、デフォルトでWindows AuthenticodeおよびAppleアプリが開かれないようにします。
  • Auto-update—デスクトップアプリの「下」で実行されているWebブラウザーがまだあります。2つの理由でこれを更新することが重要です。 1.セキュリティの問題+脆弱性は、時間をかけて修正する必要があります。 2.デスクトップアプリのブラウザーが更新されていないため、5年後に古いWebブラウザーのサポートに固執したくない

上記のツールはこれらの機能を提供していないため、アプリを顧客に配布するユースケースにはあまり適していません。これらは、ビルド時に追加したい機能ですToDesktop。したがって、このユースケースに非常にうまく適合すると思います。私たちは常に機能を追加していますが、先週 App Protocols and Deeplinks のサポートを追加しました。

1
DaveJ

オペレーティングシステムのファイルストレージAPIなどにアクセスできるネイティブアプリケーションにWebアプリをラップできるフレームワークがたくさんあります。 これはWindows固有のガイドです

BEOUTH THOUGH-ネイティブラッパー内のウェブサイトのように感じられないように、ネイティブアプリの確実なテストとQA作業に時間を費やす必要があります、互換性を確保したいOSのすべてのバージョンとうまく統合できます。 Tweetdeck for Macは、やってはいけないことの例です-基本的にはネイティブラッパーのWebブラウザー)。

0
Ben Rondeau

使用 Web2Desk :無料でシンプルなソリューションを探している場合。

Convert webapp to desktop app using web2desk

ここで行う必要があるのは、Webアプリ(またはWebサイト)のURLを入力するだけで、Mac、Windows、およびLinuxのデスクトップアプリはすぐに生成されます。

Desktop App for Mac, Linux and Windows platforms

0
Felix josemon

私が知っている最も簡単で迅速な方法は、electronjsの基礎となるnodejs/npmのnativefierライブラリを使用することです。 Windows用の実行可能ファイルを作成するのに5分かかります。プログラミングの経験がない人でも、Webアプリケーションからデスクトップアプリケーションを作成できます。以下の投稿では、Webアプリケーションをデスクトップアプリケーションに変換する手順について説明しています。必読 !

npmのnativefierを使用して、Webアプリケーションを2分でデスクトップアプリケーションに変換します

0
Vishwas