6
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-06-11

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

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

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

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

こちらはともにターミナルでの作業。
パスを通したりしないといけないので、少し専門的になります。
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形式に変換できます。

アプリの作り方

下記のようにターミナルで指定すると、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:アイコンファイルを指定する

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

6
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?