LOGzeudon

名古屋で働いているWebデザイナーのブログです

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

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 の有料版では、次の機能を利用できます。

  1. Pin Fluid Apps to the MacOS Status Bar.
  2. Use Userscripts or Userstyles in your Fluid Apps.
  3. 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)

JavaScriptで、通知音やDockのバッジ表示などを設定できるようになります。

2. WebCatalog.app

WebCatalog - Run Web Apps like Real Desktop Apps

Fluidに比べるとモダンな外観です。3つ目以降のアプリを生成するのは有料($10)。
起動すると、最初に利用するブラウザを選択します。

f:id:rokuzeudon:20181021093143p:plain

次に、WebCatalog.appで利用可能なサービスが一覧で表示されます。わかりやすくて良いですね。

f:id:rokuzeudon:20181021093226p:plain

とりあえずAsanaを検索。

f:id:rokuzeudon:20181021093249p:plain

「Install」するだけでアプリが生成され、/Users/***/Applications/WebCatalog Lite Apps/(ユーザーのアプリケーションフォルダ)へと配置されます。

f:id:rokuzeudon:20181021093337p:plain

起動するとこんな感じ。Googleログインも問題なくできました。

f:id:rokuzeudon:20181021093351p:plain

選択したブラウザの名称がそのままメニューバーのタイトルになっているのが特殊です。アプリ名自体はちゃんとAsanaになっており、ランチャー起動には支障ありません。

f:id:rokuzeudon:20181021094011p:plain

尚、ブラウザ「Juli」では、

  • Notification
  • Dock badge
  • JS injection
  • Custom user-agent

など様々なオプションが利用できるそうです。例えばGoogleカレンダーの通知バナーはこんな感じ。

f:id:rokuzeudon:20181021100336p:plain

3. Nativefier

jiahaog/nativefier: Make any web page a desktop application

上記2つのアプリとは異なり、NativefierはターミナルなどCLIでの操作が必要です。インストール方法などはREADMEに全て記載されており、オプションでバッジ表示やアイコン画像の指定もできます。余計なものがなくシンプルなので、個人的には一番好き。

尚、こちらの記事が日本語でより詳しく紹介されています。
Nativefierでどんなウェブアプリも一撃Macアプリ化!ブラウザとアプリの用途を分けて仕事を効率化しよう | | Craftsman Software Inc.

実際にやってみると、このようにフォルダが生成されます。

f:id:rokuzeudon:20181020092724p:plain

終わりに

以上、「MacでWebサービスをデスクトップアプリ化して利用する方法」を紹介しました。
頻繁に利用するWebサービスにデスクトップ版アプリがなく不便に感じているなら、いずれかの方法をぜひ試してみてください。

参考サイト

公式ページ以外で参考にさせていただいたサイトです。