{"componentChunkName":"component---src-modules-datocms-post-page-page-tsx","path":"/posts/59","result":{"data":{"post":{"title":"Nativefierでどんなウェブアプリも一撃Macアプリ化！ブラウザとアプリの用途を分けて仕事を効率化しよう","author":{"name":"suin","images":{"r32":{"src":"https://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&fm=png&h=32&mask=ellipse&w=32","srcSet":"https://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=1&fm=png&h=32&mask=ellipse&w=32 1x,\nhttps://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=1.5&fm=png&h=32&mask=ellipse&w=32 1.5x,\nhttps://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=2&fm=png&h=32&mask=ellipse&w=32 2x,\nhttps://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=3&fm=png&h=32&mask=ellipse&w=32 3x"},"r48":{"src":"https://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&fm=png&h=48&mask=ellipse&w=48","srcSet":"https://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=1&fm=png&h=48&mask=ellipse&w=48 1x,\nhttps://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=1.5&fm=png&h=48&mask=ellipse&w=48 1.5x,\nhttps://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=2&fm=png&h=48&mask=ellipse&w=48 2x,\nhttps://www.datocms-assets.com/29850/1591833290-avatar512.jpg?auto=format&dpr=3&fm=png&h=48&mask=ellipse&w=48 3x"}},"bio":"好き: TypeScript, DDD, OOP／#YYTypeScript の主催者／Qiita 4位／株式会社クラフトマンソフトウェア取締役／『実践ドメイン駆動設計』邦訳レビュア／#分報 考案者／Web自動テストShouldBeeを開発"},"date":"2015年11月16日","tags":[],"category":"プログラミング","body":"\"image.png\n

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

\n

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

\n

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

\n\n

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

\n

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

\n
\"2.jpg
業務遂行のためのアプリタブと情報収集のためのタブが入り乱れる
\n

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

\n

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

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

\n > NativefierとはNativefierとは

\n

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

\n

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

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

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

\n

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

\n

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

\n
npm install nativefier -g\n
\n

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

\n

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

\n

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

\n
\"3.jpg
IconfinderではMoreからICNSがダウンロード可能
\n

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

\n
\"4.jpg
iConverterで変換したicnsファイルをダウンロードする
\n

\n > アプリ化するアプリ化する

\n

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

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

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

\n"}},"pageContext":{"id":"DatoCmsPost-5142996-ja","description":"HTML5やJavaScriptでの表現力が非常に高くなった昨今、アプリをウェブだけで提供しているサービスは少なくない。今回はそうしたアプリをあたかもネイティブMacアプリのように変換できるNativefierについて紹介したい。 アプリとブラウザを分けるメリット 仕事をする上で、昨今のブラウザは2つの目的で使われる。 情報収集 特定業務の遂行 1つ目は、情報収集のツールとしてブラウザを使う。知りたいこと分からないことなどをGoogleなどの検索エンジンで検索し、調べ、業務の課題を解決するために使う。2つ目は、特定業務の遂行を目的に使う。例えばチャットツールのChatWorkやチケット管理のR","toc":[{"tag":"h1","depth":1,"href":"#%E3%82%A2%E3%83%97%E3%83%AA%E3%81%A8%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%92%E5%88%86%E3%81%91%E3%82%8B%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88","text":"アプリとブラウザを分けるメリット","html":"アプリとブラウザを分けるメリット"},{"tag":"h1","depth":1,"href":"#Nativefier%E3%81%A8%E3%81%AF","text":"Nativefierとは","html":"Nativefierとは"},{"tag":"h1","depth":1,"href":"#Nativefier%E3%81%A7%E3%82%A6%E3%82%A7%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92Mac%E3%82%A2%E3%83%97%E3%83%AA%E5%8C%96%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95","text":"NativefierでウェブアプリをMacアプリ化する方法","html":"NativefierでウェブアプリをMacアプリ化する方法"},{"tag":"h2","depth":2,"href":"#Nativefier%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B","text":"Nativefierをインストールする","html":"Nativefierをインストールする"},{"tag":"h2","depth":2,"href":"#%E3%82%A2%E3%83%97%E3%83%AA%E5%8C%96%E3%81%97%E3%81%9F%E3%81%84%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%92%E7%94%A8%E6%84%8F%E3%81%99%E3%82%8B","text":"アプリ化したいアプリのアイコンを用意する","html":"アプリ化したいアプリのアイコンを用意する"},{"tag":"h2","depth":2,"href":"#%E3%82%A2%E3%83%97%E3%83%AA%E5%8C%96%E3%81%99%E3%82%8B","text":"アプリ化する","html":"アプリ化する"}],"ogpImageUrl":"https://www.datocms-assets.com/29850/1593190022-pastedimage20200627146.png?fm=png&mark64=aHR0cHM6Ly93d3cuZGF0b2Ntcy1hc3NldHMuY29tLzI5ODUwLzE1OTMxNTQ2MzYtdHJhbnNwYXJlbnQtcGl4ZWwucG5nP3c9NDAwJmg9NjQmZml0PWNyb3AmYmxlbmQ2ND1hSFIwY0hNNkx5OTNkM2N1WkdGMGIyTnRjeTFoYzNObGRITXVZMjl0THpJNU9EVXdMekUxT1RFNE16TXlPVEF0WVhaaGRHRnlOVEV5TG1wd1p6OXRZWE5yUFdWc2JHbHdjMlVtWm0wOWNHNW5KbmM5TWpVMkptZzlNalUyJmJsZW5kLWg9NjQmYmxlbmQteD0wJmJsZW5kLXk9MCZibGVuZC1tb2RlPW5vcm1hbCZtYXJrNjQ9YUhSMGNITTZMeTloYzNObGRITXVhVzFuYVhndWJtVjBMMzUwWlhoMFAzUjRkQzFoYkdsbmJqMXRhV1JrYkdVbE1rTnNaV1owSm5SNGRDMW1iMjUwUFhOaGJuTXRjMlZ5YVdZbE1rTmliMnhrSm5SNGRDMWpiMnh2Y2oweU1qRTRNVFltZEhoME5qUTlZek5XY0dKbkpuUjRkQzF6YVhwbFBUTXdKbWc5TmpRJm1hcmsteD02NCZtYXJrLWFsaWduPW1pZGRsZSUyQ2xlZnQ&mark-align=bottom%2Cleft&mark-x=100&mark-y=496&blend64=aHR0cHM6Ly93d3cuZGF0b2Ntcy1hc3NldHMuY29tLzI5ODUwLzE1OTMxNTQ2MzYtdHJhbnNwYXJlbnQtcGl4ZWwucG5nP3c9MTIwMCZoPTYzMCZmaXQ9Y3JvcCZtYXJrNjQ9YUhSMGNITTZMeTkzZDNjdVpHRjBiMk50Y3kxaGMzTmxkSE11WTI5dEx6STVPRFV3THpFMU9UTXhOVEE1TkRBdFkzSmhablJ6YldGdUxUQXhMbkJ1WncmbWFyay1hbGlnbj10b3AlMkNjZW50ZXImbWFyay13PTI1MCZtYXJrLXk9ODAmYmxlbmQ2ND1hSFIwY0hNNkx5OWhjM05sZEhNdWFXMW5hWGd1Ym1WMEwzNTBaWGgwUDNSNGRDMWhiR2xuYmoxdGFXUmtiR1VsTWtOalpXNTBaWEltZEhoMExXWnZiblE5YzJGdWN5MXpaWEpwWmlVeVEySnZiR1FtZEhoMExYQmhaRDB4TURBbWRIaDBMV052Ykc5eVBUSXlNVGd4TmlaMGVIUTJORDFVYlVZd1lWaGFiRnB0Ykd4amRVOUNjQzFQUW5GbFQwTnJMVTlDY1hWUFEzQjFUME53TFU5RWJIVlBRMjkxVDBSc0xVOUVjWFZQUTJkMVV6Um5UMkZUWnpBeGFGa3RUME52ZFU5RWJDMVBSSEYxVjAxc2RTMDRaMlZQUkd4MVQwUnhaVTlEY0hWUFEzUjFUMEp4VDA5RGIzVlBSR3d0VDBSeGRVOUNjblZsVlhGUGJVRnNUMDlEYTNWWFNXaDFUMEpyWlU5Q2NIVlROMnhsVXpacExVOURhM1ZYUzNWbFpVOW9MVmROYkhWUFFtd3RUME5wVDA5Q2FHY21kSGgwTFhOcGVtVTlOVFVtZHoweE1qQXdKbWc5TmpNdyZibGVuZC1tb2RlPW5vcm1hbA&blend-mode=normal","otherPost":{"type":"author","title":"1円/時のVPS「DigitalOcean」をコマンドで操作する方法","slug":"/posts/61"}}}}