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

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

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

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

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

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

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

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

> NativefierとはNativefierとは

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

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

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

> NativefierをインストールするNativefierをインストールする

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

npm install nativefier -g

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

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

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

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

> アプリ化するアプリ化する

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

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

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