JavaScript
npm
Electron

Webページをデスクトップアプリ化 - nativefierを使ってみる

More than 1 year has passed since last update.


nativefierとは

1行でシングルページWebアプリケーションをデスクトップアプリ化してくれる優れもの

WebアプリをElectronでWrapし、Electron-packagerを使ってネイティブ( .exe .app ... )を出力するみたいです


Githubリポジトリ : jiahaog/nativefier - Github


主としてOSX向けに開発したそうですが、Linux・Windowsでも動くそうです


インストール

npmでパッケージとして公開されています

$ npm install -g nativefier 

もしnpm入ってない人はbrewなりapt-getなりでNode.js入れて、npmインスコすると幸せになれます

注)アプデが非常に激しいので、本記事も極力最新版の情報に更新しています

既に入っている人はnpm updateしてもらえると整合性が取れるかと思います...


使いかた

試しに

$ nativefier maps.google.com

とすると、カレントディレクトリにGoogle Maps- *フォルダが生成されます

中を覗くとライセンスなどと共に、お目当のデスクトップアプリが入っているかと思います。

生成されたアプリはこんな感じになりました

Google Map.png


*認証の必要なWebサイトをアプリ化

Twtter , Whatsapp , Facebook Messenger など認証が必要なサイト(原文:Certain Websites)は --pretend --honest オプションをつけてやります

$ nativefier --honest "http://web.whatsapp.com"


アプリの名前を指定

--nameオプションで名前を指定することができます

$ nativefier --name "Google Map" "maps.google.com"


アプリのアイコンを指定

OSXでは--iconオプションで.icnsファイルを指定します

.icnsの詳しい作りかたは以下のサイトに委ねたいと思います


Macアプリの.icnsを作るときのメモ - Qiita



その他の主なオプション

基本的に

$ nativefier [options] <targetUrl> [dest]

と指定していきます。

項目
説明

options
オプションをぶちこむ場所

targetUrl
アプリケーションにしたいWebアプリのURL

dest
ビルドしたファイルを出力する場所 ( 省略した場合はカレントディレクトリ )

となってます


・高さ、幅指定

--width <value>

--height <value>

デフォルトはそれぞれ1280px,800pxです


・通知を表示

--counter

OSXのみ、Dockに通知を表示することができます(Webページが対応している場合)


・プラットフォーム、アーキテクチャの指定

-p, --platform <value>

-a, --arch <value>

プラットフォームはdarwin,linux,win32 アーキテクチャはia32x64を指定できます。デフォルトでは自動で識別します。


・ヘルプの表示 

-h, --help


使ってみた所感

私自身TweetDeckとFacebookなどはいつもブラウザで開きっぱなしでタブがかさばっていたので幾分か楽になった気がします

しばらくコードいじって遊んでみて、気が向いたらプルリクでもぶん投げようかなと思っている所存です

Electronいいっすね