Nativefierでどんなウェブアプリも一撃Macアプリ化!ブラウザとアプリの用途を分けて仕事を効率化しよう


Nativefier



 
HTML5やJavaScriptでの表現力が非常に高くなった昨今、アプリをウェブだけで提供しているサービスは少なくない。今回はそうしたアプリをあたかもネイティブMacアプリのように変換できるNativefierについて紹介したい。

アプリとブラウザを分けるメリット

仕事をする上で、昨今のブラウザは2つの目的で使われる。

  • 情報収集
  • 特定業務の遂行

1つ目は、情報収集のツールとしてブラウザを使う。知りたいこと分からないことなどをGoogleなどの検索エンジンで検索し、調べ、業務の課題を解決するために使う。2つ目は、特定業務の遂行を目的に使う。例えばチャットツールのChatWorkやチケット管理のRedmineといったツールを動かすためにブラウザが使われる。

ブラウザにこの2つの役割があるせいで、僕はたまに仕事のやりにくさを感じる。僕はGoogle Chromeを使って、今この記事を書くというタスクをやっているが、ブラウザのタブには、記事を書くタスクを管理するTrello、記事の下書きエディタとしてQiita Team、関連する情報を収集するためにウェブページが何タブも開いている。情報収集しているうちに、整理のため不要になったタブは閉じるが、知らぬ間に常に開いておきたいアプリまで閉じてしまっていることがあり、そこに不便さを感じる。

業務遂行のためのアプリタブと情報収集のためのタブが入り乱れる

業務遂行のためのアプリタブと情報収集のためのタブが入り乱れる



常に開いておきたいウェブアプリはNativefierでMacアプリにしておき、ブラウザはもっぱら情報収集専用ツールにしておくと、こうした不便さを解消するメリットがある。ブラウザのタブを乱暴に閉じても、ウェブアプリは別アプリとして起動しているので、誤って閉じてしまう心配がない。

加えてもう一つのメリットとして、MacアプリならOS再起動時に、そのアプリを自動的に起動することができる。MacにはミッションコントロールやTotal Spacesで仮想ディスプレイをいくつも設けることができる。自動起動するアプリは、何番目の仮想ディスプレイで起動するかも設定することができるため、この仕組を活用すると、画面にウィンドウを散らかすことなく、アプリをいくつも起動しっぱなしにしておける。

僕はTotal Spacesで16スクリーン作り、それぞれにアプリを立ち上げている

僕はTotal Spacesで16スクリーン作り、それぞれにアプリを立ち上げている



Nativefierとは

Nativefierは、ウェブアプリをElectronでラップし、OS実行形式(.app, .exeなど)に変換するコマンドツールだ。この記事では、主としてMacアプリ化ツールとして紹介しているが、WindowsアプリやLinuxアプリにも変換することができる。

Nativefierの競合として古くからFluidがあるが、Fluidは最近メンテが行われていない様子で、使われているWebkitが古く、ウェブアプリによってはレイアウトが崩れたり、機能が動かなかったりということがある。

Trelloをアプリ化した様子。Nativefier自体のUIは全くなくアプリに集中できる。

Trelloをアプリ化した様子。Nativefier自体のUIは全くなくアプリに集中できる。



NativefierでウェブアプリをMacアプリ化する方法

{{% steps %}}

Nativefierをインストールする

Nativefierはnpmで提供されているので、npmが入っている環境であれば次のコマンドでインストールすることができる。

npm install nativefier -g

アプリ化したいアプリのアイコンを用意する

Nativefierが対応しているアイコン形式は、Macの場合.icns形式だ。これは自分で用意する必要がある。アイコンを用意しなくてもアプリ化は可能だが、どのアプリもElectronのアイコンになってしまいDock上の見やすさが良くない。

アイコンを入手する最も簡単な方法はIconfinderで探す方法だ。たとえば、Bitbucketのアイコンなら、「Bitbucket」で検索し、FREEで絞り込むと無料のものを見つけることができる。提供される画像形式の中から、ICNSを選んでダウンロードするだけだ。

IconfinderではMoreからICNSがダウンロード可能

IconfinderではMoreからICNSがダウンロード可能



.icns形式を探しても見つからない場合は、透過PNG画像があれば、iConvertIconsがicns形式に変換してくれる。

iConverterで変換したicnsファイルをダウンロードする

iConverterで変換したicnsファイルをダウンロードする



アプリ化する

nativefierコマンドを実行するとアプリが生成される。Bitbucketをアプリ化する例:

nativefier Bitbucket https://bitbucket.org/ --platform=darwin --arch=x64 --version=0.35.0 --overwrite --badge --icon=bitbucket.icns

なお、--versionはElectronのバージョンを指定する。この最新バージョンはElectronのリリースページで確認できる。

{{% /steps %}}

アプリ化のプリセット

以上でNativefierを使ってアプリ化する手順を紹介した。ただ、これだけではアプリ化するのにアイコンを用意したり、コマンドを書く手間がある。ここではアプリ化を簡単にできるように、ビルド済みのアプリと、プリセットとして、主要なウェブアプリのアイコンとコピペで使えるコマンドを載せておく。もし、この中にアプリ化したいものがなければ、加筆するので遠慮無くコメントを寄せてほしい。

Backlog

PROJECTはプロジェクト名に置き換える。

wget https://c16e.com/static/1511170923/backlog.icns
nativefier Backlog https://$PROJECT.backlog.jp/ --platform=darwin --arch=x64 --version=0.35.0 --overwrite --badge --icon=backlog.icns

ChatWork

ChatWork.zipをダウンロード、もしくは:

wget https://c16e.com/static/1511170923/chatwork.icns
nativefier ChatWork https://www.chatwork.com --platform=darwin --arch=x64 --version=0.35.0 --overwrite --badge --icon=chatwork.icns

Gmail

Gmail.zipをダウンロード、もしくは:

wget https://c16e.com/static/1511170923/gmail.icns
nativefier Gmail https://mail.google.com --platform=darwin --arch=x64 --version=0.35.0 --overwrite --badge --icon=gmail.icns

Jira

Jira.zipをダウンロード、もしくは:

wget https://c16e.com/static/1511170923/jira.icns
nativefier Jira https://jira.atlassian.com/ --platform=darwin --arch=x64 --version=0.35.0 --overwrite --badge --icon=jira.icns

Qiita

Qiita.zipをダウンロード、もしくは:

wget https://c16e.com/static/1511170923/qiita.icns
nativefier Qiita http://qiita.com/ --platform=darwin --arch=x64 --version=0.35.0 --overwrite --badge --icon=qiita.icns

Qiita Team

TEAM_NAMEはチーム名に置き換える。

wget https://c16e.com/static/1511170923/qiita.icns
nativefier "Qiita Team" https://$TEAM_NAME.qiita.com/ --platform=darwin --arch=x64 --version=0.35.0 --overwrite --badge --icon=qiita.icns

Redmine

URLはお使いのRedmineのURLに置き換える。

wget https://c16e.com/static/1511170923/redmine.icns
nativefier Redmine $URL --platform=darwin --arch=x64 --version=0.35.0 --overwrite --badge --icon=redmine.icns

Toggl

Toggl.zipをダウンロード、もしくは:

wget https://c16e.com/static/1511170923/toggl.icns
nativefier Toggl https://toggl.com/app/timer --platform=darwin --arch=x64 --version=0.35.0 --overwrite --badge --icon=toggl.icns

Trello

Trello.zipをダウンロード、もしくは:

wget https://c16e.com/static/1511170923/trello.icns
nativefier Trello https://trello.com/ --platform=darwin --arch=x64 --version=0.35.0 --overwrite --badge --icon=trello.icns