MacでWebサービスをデスクトップアプリ化して利用する方法

WebサイトやサービスをMac用デスクトップアプリ化する方法がいくつかあるので紹介します。

アプリ化するメリット
アプリ化するいくつかの方法
終わりに
- 参考サイト

アプリ化するメリット

デスクトップ版アプリであれば、MacではSpotlightやAlfredといったランチャーからの起動や、⌘+tabでの表示切り替えができるようになります。

大画面のiMacやサブディスプレイを利用していれば複数Webサイトを開きっぱなしにできますが、Macbookなど狭い画面の作業ではそうもいきません。頻繁に表示・操作するサイトは⌘+tabですぐ切り替えたいのです。

また、サイトの仕組みやアプリ化の方法次第では、デスクトップ通知機能が利用できます。

アプリ化するいくつかの方法

1. Fluid

Fluid – Turn any webpage into a real Mac App

2011年に登場したアプリですが、今も尚アップデートが続けられており、最新のMojave環境でも問題なく使えます。
こちらは Fluid 起動時の画面。

f:id:rokuzeudon:20181021084439p:plain

URL
アプリのタイトル
生成先フォルダ
設定したい .icns データ

を入力。

f:id:rokuzeudon:20181021085015p:plain

Createすると生成完了。Launch Nowですぐ起動できます。

f:id:rokuzeudon:20181021085153p:plain

このように、Asanaをデスクトップアプリとして使えるようになりました。

f:id:rokuzeudon:20181021085317p:plain

ただ、このままだと外部ドメインを経由したログイン認証で必ずエラーになります。英語ですが公式サイトにその辺りのことが書いてあります。

なので、生成したアプリ内の設定画面「Whitelist」へログインに関連するURLの登録が必要です。例えばGoogleログインであれば、"accounts.google.com/ServiceLoginAuth"を追加します。

f:id:rokuzeudon:20181021085508p:plain

ちなみに $5 の有料版では、次の機能を利用できます。

Pin Fluid Apps to the MacOS Status Bar.
Use Userscripts or Userstyles in your Fluid Apps.
Use Full Screen mode in your Fluid Apps.

特に2の「Userscripts」が便利。

Fluid Apps automatically include some additional JavaScript APIs in all browser windows that can be accessed by either webapp developers via remote scripts or Fluid users via Userscripts. This API is very similar in nature to the window.widget API from Dashboard Widgets. The JS API available is listed below:

window.fluid.dockBadge = "10"

window.fluid.requestUserAttention() // bounce Dock icon

window.fluid.beep() // sounds system beep

window.fluid.playSound("Basso") // plays system sound if name is valid

window.console.log(obj)