Facebook Messenger と ChatWork をネイティブアプリ化する (nativefier)

最近何かと話題の Electron と、頻繁に使っている Facebook Messenger の www.messenger.com が 2016/2/1 頃の Chrome のアップデートで異常に重くなったので、知人の Matsuda さんにに紹介してもらった「nativefier」という、ウェブサイトをネイティブアプリ化できるツールを使って劇的に解消することができました。

ついでに ChatWork もアプリ化しました。

インストール

npm install -g nativefier

お使いの Mac などに Node.js が入っていることが必要です。

Facebook Messenger をネイティブアプリにする

cd /Applications/
nativefier --honest --badge --app-name "Facebook Messenger" "www.messenger.com"

ChatWork をネイティブアプリにする

cd /Applications/
nativefier --honest --badge --app-name "ChatWork" "www.chatwork.com"

おまけ:アイコンを登録してみる

Messenger と ChatWork 2つつくると、アイコンがわかりづらいので、アイコンを登録してみます。

アイコンをゲットする

https://www.iconfinder.com/

より.icnsなアイコンファイルをゲットできます。

アイコンを作る

iPhone アプリから引っ張ってくるという手もあります。

  • Messenger と ChatWork アプリが入った iPhone を iTunes にバックアップ。
  • Home – Music – iTune Library – Mobile Application フォルダに行き、Messenger と ChatWork の ipa ファイルを見つけて適当な場所にコピーする
  • .ipa ファイルを .zip 拡張子に書き換える
  • ZIP を解凍する
  • フォルダを追うと、Mac OS では実行できない .app フォルダが現れるので、右クリック (Ctlr + クリック) でパッケージの中身を見る
  • PNG ファイルを取得する
  • Macアプリの.icnsを作るときのメモ」を参考にアイコンファイル作成

アイコン付きのネイティブアプリを作る

これで「messenger.icns」「chatwork.icns」というファイル名のアイコンを作り

cd /Applications/
nativefier --honest --badge --app-name "Facebook Messenger" --icon /【アイコンの保存先】/messenger.icns "www.messenger.com"
nativefier --honest --badge --app-name "ChatWork" --icon /【アイコンの保存先】/chatwork.icns "www.chatwork.com"

でアイコン付きのネイティブアプリを作成しました。

参考記事

nativefier の詳細ははこちらの記事を参考に
参考:Webページをデスクトップアプリ化 – nativefierを使ってみる