Webページをデスクトップアプリ化するソフト「nativefier」の紹介です。

頻繁に利用するWebサービスをデスクトップ・アプリとして使いたい
そのようなことを考えたことがありませんか?

例えば、Webサイトを運用している人なら"Googleアナリティクス"。仕事で利用する管理システム。その他にもブラウザゲーム等々。

Google Chromeにはプラグインの他に"Chrome App"というクローム内でアプリケーションを実行する機能が備わっていますが、使いたいアプリがGoogle ウェブストア内に公開されていない場合は、自分で実装する必要があります。

そんなChrome Appと同等のことをコマンド一発で作成できるソフトウェアが「nativefire」です。

nativefireを使って"whatsapp"をデスクトップアプリ化しているデモ *公式ページから

nativefireを使えば、自分の好きなWebサービス・サイトをデスクトップアプリ化できます!
(クロスプラットフォーム上で動くので、Windows, Mac, Linuxで動作します )

nativefierのインストール

nativefirはnode.jsで作られたパッケージなので、事前にnode.jsがインストールされている必要があります
( node.jsの公式ページから入手できます *node.js v4以上で動作するのでお使いのバージョンを確認してください )

node.jsが導入されていたら、コマンドライン(Windowsであれば"コマンドプロンプト")からnpmコマンドを使ってnativefireをインストールします。

# nativefireのインストール * 環境によっては sudo が必要かもしれません
npm install nativefier -g

# 正しくインストールされているとnativefireコマンドが使えるようになります
$ nativefier

  Usage: nativefier [options] targetUrl [dest]
...

 

nativefierの使い方

nativefireの使い方は、コマンドプロンプトライン上からnativefire [url] [option]という形で簡単にWebページをアプリに変換・作成できます。

一例として、このサイトをデスクトップアプリ化する場合は下の様に。

# コンソール上のカレントディレクトリにアプリがビルドされます
# webページのタイトル名がアプリ名になりますが'name'オプションを付ければ自由にアプリ目を変更できます
nativefier http://co.bsnws.net/ --name cupOF

# コマンド実行時には下の様なメッセージが流れます * Mac環境でテストしました
Packaging app for platform darwin x64 using electron v1.1.3
App built to /Users/yourName/cupOF-darwin-x64


ビルドが終了すると、アプリ名-プラットフォームという形でフォルダが作成され、その中に実行ファイルが格納されます。
( windowsであれば '.exe'ファイルで実行されます )

作成されたアプリケーションのファイル構成

作成されたアプリケーションを実行してみました *アプリというより専用ブラウザが作成されたと言った感じです

nativefireには沢山のオプションが用意されており、ビルド時に様々な指定ができます。

nativefireはelectron(node.jsでGUIアプリを作るライブラリ)のラッパーなので electronのバージョンをバージョンを指定したり、flashを有効化したり(デフォルトでは無効)、違うOS用にビルドすることも出来ます。

* 用意されている、よく使いそうなオプション一覧

オプション 説明 注釈
-n OR --name [value] アプリケーション名の指定  
-p OR --platform [value] OSの指定 デフォルトでは自動で指定されますが、使っているOSから違うOS用のアプリにビルドすることができます (例: Mac -> Windows用)
-e, --electron-version [value] ビルド時に使用するElectronのバージョンを指定  
--no-overwrite ビルドするディレクトリの指定 このオプションがあるとディレクトリ上にアプリが存在する場合は上書きされません
--width [value] アプリ起動時の横幅のサイズ デフォルト: 1280px
--height [value] アプリ起動時の縦幅のサイズ デフォルト: 800px
--min-width [value] アプリ実行時の横幅の最小値  
--min-height [value] アプリ実行時の縦幅の最小値  
--max-width [value] アプリ実行時の横幅の最大値  
--max-height [value] アプリ実行時の縦幅の最大値  
-m, --show-menu-bar メニューバーの表示  
-f, --fast-quit アプリ終了時に完全終了するオプション * このオプションはMac専用です
-u, --user-agent [value] ユーザーエージェント名のセット  
--honest ユーザーエージェント名を上書きしないオプション このオプションがあるとユーザーエージェントの値が上書きされません
--ignore-certificate 証明書エラーを無視 このオプションがあるとcertificationエラーが回避されます
--honest ユーザーエージェント名を上書きしないオプション このオプションがあるとユーザーエージェントの値が上書きされません
--insecure セキュリティーエラーの非表示 このオプションがあるとセキュリティーエラーが表示されなくなります *http -> httpsが混ざっているサイトなど
--flash flashの有効化 このオプションがあるとflashが有効化されます *デフォルトでは無効
--inject ビルド時にjsやCSSのカスタムスクリプトを追加 例: $ nativefier http://google.com --inject ./some-js-injection.js --inject ./some-css-injection.css ~/Desktop
--full-screen フルスクリーンで起動 アプリ実行時にフルスクリーンで起動します
--maximize マックスサイズで起動  
--hide-window-frame フレームの無効  
--disable-context-menu メニューの無効 メニューが表示されなくなります
--disable-dev-tools dev-toolの無効 chromeに搭載されているdeb-toolsを表示させないように出来ます

上記のオプションを利用して、実際に使用する場合は下記のようになります

# flashゲームをアプリ化する例
# ドラゴンクエストのモンスターパレードをビルドしました
nativefier http://www.dqmp.jp/ -n dqmp --flash

# googleアナリティクスをアプリ化する例
nativefier https://analytics.google.com/analytics/web/ -n GoogleAnalytics --honest

# macからwindows用のアプリをビルドする例
# wineがインストールされいる必要があります
nativefier http://co.bsnws.net/ --name cupOF -p windows

# electronのバージョンを指定する場合
# 執筆時の最新バージョンを指定してビルドしました *オプション無しでは1.1.3でビルド
nativefier http://co.bsnws.net/ --name cupOF -e 1.4.3

自身の環境で色々なWebサービスをアプリ化してみました

Mac -> Windows用にビルドして動作テストしました


Summary

以上がnativifireの紹介でした。

nativefireを使ってモンパレや戦艦コレクション等のブラウザゲームを独立したデスクトップアプリ化したり、ITベンダーの人は Web管理システムの納品時にアプリ化すればでブラウザのバージョンも含めて統一してもらう事もできますね!

趣味 ~ 仕事まで幅広く使えそうなアプリなので、気になった人はゼヒ×2チェックしてください!

GitHub: jiahaog/nativefier

 

この記事のカテゴリ

PC・MAC

この記事のタグ

Windows , Macintosh , Linux

Socialシェアボタン

スポンサーリンク