Mac
Web
Application
Nativefier

Webページをデスクトップアプリ化する方法

More than 1 year has passed since last update.

MacでWebページをデスクトップアプリにします。
そうすると、いちいちタブなどで移動していた手間が省けてとても有意義です。
操作はターミナルから行い、npmで提供されているNativefierを使います。
npmを使うにはNode.jsが必要です。

1. Node.jsのインストール

直接公式サイトからダウンロード、インストールする場合

https://nodejs.org/

バージョン管理もしっかりやりたい場合

こちらはともにターミナルでの作業。
パスを通したりしないといけないので、少し専門的になります。
Nodeはバージョンの誤差とかあるので、プログラマーとかの人は、バージョン管理必須。
その場合は最初に「Homebrew」入れて、次に「Nodebrew」入れて、それからNodeのインストール。
Node.js入れたら、npmも入ります。

Homebrew
https://brew.sh/index_ja.html
Nodebrew

詳しくはこちら
http://qiita.com/nadonado/items/6b59dbcc1a883ae4dedd

インストールの確認

インストールされたかどうかの確認はターミナルで下記のコマンドを入力。
バージョンが表示されれば問題ありません。

$ node -v
$ npm -v

2. nativefierのインストール

ここまでくればもう一息です。
narivefierは、npmで出ています。下記のコマンドでインストール。

$ npm install -g nativefier

3. アプリを作成する

制作環境ができたので、あとは簡単なコマンドを打てば完了。
きちんとアイコンも用意したい場合は、アイコン変換サイトで指定の形式のものを作りましょう。

アイコンの作り方

アイコンはicnsというファイルが必要です。
jpgやpngファイルを下記サイトでicons形式に変換できます。

https://iconverticons.com/online/

アプリの作り方

下記のようにターミナルで指定すると、Homeフォルダにアプリが生成されます。

Qiitaの場合

$ nativefier --name "Qiita" "http://qiita.com/" --badge --icon=qiita.icns

Mediumの場合

$ nativefier --name "Medium" "https://medium.com/" --badge --icon=medium.icns

name:アプリケーション名
badge:通知表示
icon:アイコンファイルを指定する

※適時パスは書き換えてください。