Edited at

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

More than 1 year has passed since last update.

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

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


この記事の最新版

最新版はブログに掲載しています。

http://ja.katzueno.com/2016/02/3566/


インストール

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を使ってみる

以上