Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What is going on with this article?
@nadonado

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

More than 3 years have passed since last update.

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:アイコンファイルを指定する

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

10
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
nadonado
東京の青山からクリエイティブな表現を制作しています。 アートディレクター, デザイナー, プログラマー, フォトグラファー

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
10
Help us understand the problem. What is going on with this article?