すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

お役立ち情報

【お役立ち情報】Webページをアプリ化できるFluidを使ってアカウント切り替えのイライラを解消しよう!

ぴっかちゃん
ぴっかちゃん

クラウドサービスが増えて便利になる一方で、複数のアカウントを切り替えたり、ブラウザのタブが増えるといった作業上のストレスも多くなってきました。WebページをMacアプリ化できるFluidというツールを使うことで、そんなイライラを解消しましょう!

Fluidの動画

クラウドサービスが普及してきたことで、ブラウザ環境で動作するWebサービスを利用する機会が増えてきました。「簡単に導入できる」「マルチデバイスに対応できる」といったメリットがある一方で、「ブラウザのタブが増えていく」「頻繁にアカウントの切り替えを行う必要がある」といった作業上のストレスを感じることも少なくありません。

些細なことかもしれませんが、継続的に小さなイライラが積み重なると、仕事や学習に対する意欲や作業効率も落ちてしまいますよね。

本記事では、そんなイライラを解消できる一つの方法として、WebページをMacアプリ化できるFluidというツールを紹介します。

Fluidの利用方法

Fluidは公式ページよりダウンロードすることで利用できます。以下にその手順を説明します。

インストール方法

1.Fluidの公式ページにアクセスしてFluidのzipファイルをダウンロード

Fluidの公式ページにアクセスし、トップページにある「Free Download」をクリックして「Fluid」のzipファイルをダウンロードします。
インストール方法の画像1

2.zipファイルを解凍してインストール

zipファイルがダウンロードできたら、ファイルをクリックして解凍します。解凍されると地球の形をしたFluidのアイコンが表示されます。
インストール方法の画像2

3.アクセシビリティの設定

App Store以外でダウンロードされたアプリは、アプリケーションの実行許可に制限がかかっています。「システム環境設定」「セキュリティとプライバシー」で、「一般」のタブにある「ダウンロードしたアプリケーションの実行許可」の項目が「App Storeと確認済みの開発元からのアプリケーデョンを許可」にチェックがついている場合は、下記の画像のような表示がでてきますので、こちらで「開く」をクリックします。
インストール方法の画像3
「セキュリティとプライバシー」の設定については、こちらの記事の該当箇所を参照してください。
「開く」をクリックするとFluidの設定画面が表示されます。

ポイント:インストールの手順
  1. Fluidの公式ページにアクセスしてFluidのzipファイルをダウンロード
  2. zipファイルを解凍してインストール
  3. アクセシビリティの設定

Webページをアプリ化する方法

次に、実際にWebページをアプリ化する方法を解説します。ここでは、Web開発者が参照サイトとしてよく使っている「MDN」をFluidでアプリ化してみましょう。

1.Fluidを起動して、アプリ化したいWebページを入力する

Fluidの設定画面にある「URL」の欄に、アプリ化したいWebページのURLを入力します。
Webページをアプリ化する方法1

2.アプリ化したWebページの名前を入力

「Name」の欄に、アプリ化したWebページの名前を入力します。アプリ名は自由に設定できますので、自分のわかりやすい名前を入力することも可能です。後からも変更できますので、迷ったらサイト名を入力しておきましょう。
Webページをアプリ化する方法2

3.アプリを設置する場所を指定する

「Location」の欄で、アプリを設置する場所を選択します。アプリ作成後、移動することもできます。今回はわかりやすいようにデスクトップを選択します。
Webページをアプリ化する方法3

4.アイコンを設定する

「Icon」の欄で、どの画像をアイコンにするかを選択します。設定方法には以下の2つがあります。

ファビコンをアイコンにする方法

Fluidでは、アプリ化したサイトのアイコンも自由に設定できます。特にこだわりがない場合は、ファビコン(タブやURLのとなりに表示されているアイコンのこと)をアプリのアイコンとして設定できます。こちらの方法は以下の画像のようにアプリ化された時点でボタンをクリックすれば良いので簡単です。すぐにアプリを作成したい場合は、こちらを選択しましょう。ファビコンが設定されていないサイトでも、Macデフォルトのアプリアイコンがアイコンとして設定されます。
Webページをアプリ化する方法4

自分の好きな画像をアイコンに設定する方法

もう一つの方法は、自分でアイコン画像を設定する方法です。特に前述したようなファビコンが設定されていないサイトは、どんなアプリなのか視覚的にわかりずらくなるので、指定の画像ファイルをアイコン画像にしてみましょう。フリー画像素材サイトなどから、目当てのWebサービスのアイコンをダウンロードしてアイコンに設定したり、自分で作成した画像をアイコン画像として使うといったこともできます。
Pikawakaのマスコット「ぴっかちゃん」を、Pikawakaアプリのアイコンとして設定する方法を例にして説明します。

1.画像を選択

アイコンに設定したい画像を選択します。
Webページをアプリ化する方法5

2.「Create」ボタンをクリック

「Icon」の欄に、指定した画像が表示されているか確認をし「Create」をクリックします。
Webページをアプリ化する方法6

3.指定した画像がアイコンになったアプリが作成される

指定した画像がアイコンになったWebページアプリが作成できました。
Webページをアプリ化する方法7

5.アプリ化したWebページを起動する

設定項目の入力が終わり「Create」をクリックすると、「Succcess!」と表示された下の画像のような画面が表示されます。すぐに起動させたい場合は「Launch Now」を選択します。「Reveal in Finder」を選択すると、Finderが開いて作成されたアプリの場所を表示してくれます。「OK」を選択すると、Webページをアプリ化するだけで起動はされません。
Webページをアプリ化する方法8
アプリが作成されたら、アイコンをクリックしてみましょう。下の画像は実際にアプリ化されたWebページを起動した画面になります。メニューバーに作成したアプリのアプリケーションメニューが表示されています。
Webページをアプリ化する方法9
ワンクリックでMDNが辞書アプリのように立ち上がるので、Web制作の作業環境が、より快適になりそうです。

このようにFluidは、シンプルで非常に簡単に操作できるツールです。日本語対応はしていませんが、4つの項目を入力・選択するだけで簡単にアプリを作成できますので、英語が苦手な人も問題なく利用できます。

ポイント:Webページをアプリ化する手順
  1. Fluidを起動して、アプリ化したいWebページを入力する
  2. アプリ化したWebページの名前を入力
  3. アプリを設置する場所を指定する
  4. アイコンを設定する
  5. アプリ化したWebページを起動する

Fluidの特徴とメリット

スマホやタブレットでのアプリの利用に慣れてくると、PC環境でもモバイル端末アプリのような使い方でサービスを利用したいと思うことはないでしょうか。モバイル向けのアプリを中心に展開しているサービスでも、普及率が高いものはPC版のアプリも提供していることもあります。しかし、アプリとして提供されているのはモバイル版のみで、PCは基本的にブラウザで動作するWebサービスというツールは沢山あります。

こうしたツールにこそ、Fluidを使うメリットがあります。Fluidを使うメリットは4つあります。

  1. ネイティブアプリのように使える
  2. SaaSなどクラウドサービスの増加に上手く対応できる
  3. 仕事用とプライベート用のアカウントを使い分けられる
  4. 余計なWebブラウジングを防いで集中力をアップできる

では、この4つのメリットについて一つ一つ詳しくてみていきます。

ネイティブアプリのように使える

URLをデスクトップにドラックアンドドロップしてファインダーからファイルの「情報を見る」を選択し、アイコン画像を設定するという方法でも、ワンクリックで特定のページに直接アクセスすることはできます。しかし、この方法はメインに設定したブラウザが起動していることには変わりありません。

Fluidによるアプリ化の特徴は、単に指定のWebページにアクセスできるのではなく、メインのブラウザとは別動するネイティブアプリのように使えるという点です。アプリケーションメニューも表示されるようになります。下の動画のように、アプリとして認識されますので下の動画のようにDocにも追加できます。

ネイティブアプリのようにDocに追加できる動画

「Chromeがメモリを食いすぎる」という話題は、よく聞きますよね。Chromeに限らず、メインで使っているブラウザは、どんどんメモリの使用率が高くなってきます。Fluidでは、ブラウザのプラグインなどアドオンによる負荷がかからないため、メモリCPU使用率を抑えられるメリットがあるのです。

また、有料版にすると、Webページをメニューバーの右側(音量やWifiの設定アイコンが表示される部分)に表示されるメニューバーアプリケーションとして機能させることも可能です。

SaaSなどクラウドサービスの増加に上手く対応できる

様々な分野でクラウドサービスの利用が広がっています。「freee」「やよいの青色申告」「マネーフォワード」などの会計ツール、「Asana」「Trello」「Jira」などのタスク管理ツール、「SmartHR」などの人事労務ツールといったように、バックオフィス業務をサポートする分野においては特にSaaSが普及してきています。

すでに、これらのSaaSを導入している企業や事業主の方も多いと思いますが、毎回ブラウザのブックマーク経由で立ち上げるのは少し面倒だと感じる人もいるのではないでしょうか。

SaaSをアプリ化する画像

これらのSaaSもFluidでアプリ化してしまえば、ワンクリックでサービスが利用できるようになります。

仕事用とプライベート用のアカウントを使い分けられる

Webサイト制作などの仕事をしているときに、クライアント用のアカウントにログインして作業することがよくあります。短期的な仕事であれば、業務終了後にクライアント用のアカウントからログアウトして、パズワードなどの情報もすべて削除することができます。しかし、継続的な業務になると、毎回アカウントを切り替えて作業するといった状況も出てきます。

Web制作の現場では「Google Analytics」「Google Search Console」などの閲覧、「Google Recaptcha」の設定、Twitter、Facebook、InstagramなどのSNSアカウントとの連携などで、アカウントの切り替えが必要になることがあります。

Googleアカウントの権限についての動画

一般のビジネスシーンでも「Googleドキュメント」「Googleスプレッドシート」などのGoogle系Webアプリを使用することが増えてきており、ここでもアカウントの切り替えが必要になることが多いです。上の動画のように、ファイル共有はGmailのアカウントに基づいて権限を与えられますので、普段プライベート用のGoogleアカウントでログインしている人は、仕事用のアカウントに切り替えないと、ファイルにアクセスできません。

このように、ブラウザで動作するWebサービスやSNSが非常に多いので、各サービスでアカウント数が増えていく一方ですよね。GoogleやFacebookなどは使用端末を切り替えたりすると、一旦ログアウトしてログインし直す際に、二段階認証を求められる場合もあります。

こうしたプチストレスもFluidを使えば解消されます。アカウントごとにログイン・ログアウトを繰り返す必要もなく、プライベート用のアカウントで、メッセージのやり取りをしながら、クライアントのSNSを管理するといったことも可能になります。さらに、同じWebサービスをアカウントごとにアプリ化することも可能です。下の画像は、Googleドキュメントにアカウントの切り替えなしで、同時にログインしている画像になります。

Googleドキュメントに同時ログインしている画像

下の動画のようにリンクが送信されてきて、クリックしても権限の与えられていないGoogleアカウントでログインしているときは、ブラウザからアクセスできません。そんなときも、例えば仕事用のGoogleスプレッドシートをFluidでアプリ化し、起動すると共有されているデータにすぐアクセスできます。

Googleスプレットシートにログインしている動画

だだし、ブラウザに依存した機能(Chromeを使わないと動作しないものなど)は使えませんので、その点は注意しましょう。複数のブラウザで動作するWebサービスであれば、基本は問題なく利用できますので、実際にアプリ化して操作感を試してみると良いでしょう。

余計なWebブラウジングを防いで集中力をアップできる

Webブラウザを使っていると、どうしても他のサイトを閲覧してしまいがちです。Fluidでアプリ化されたページは、そのページの利用だけにしか使えません。

また、Mac OSのMission Controlを使って作業している方も多いと思います。Mission Controlとは、下の動画のように複数の操作スペースを作ったり、現在開いているウィンドウや操作スペースを一覧で表示できる機能です。

Mission Controlの動画

このMission Controlでは、使いたいWebサービスが表示されているタブだけを、作業用の操作スペースに移動して、作業環境を作る必要があます。タブごとに操作スペースを割り当てるのは、割と面倒な作業です。作業中に操作スペースが切り替わることもあり、集中力が切れてしまう原因ににもなります。

Fluidで作業環境を構築する動画

上の動画のようにFluidを使えば、アプリ化されたWebページを目当ての操作スペース上でクリックすることで瞬時に作業環境を構築することができます。

作業上の小さなイライラも、積み重なると大きなストレスになります。本記事で解説したように、Fluidを使うことで、作業環境の構築において様々なメリットがあります。おすすめのツールですので、ぜひ導入を検討してみてください!

この記事のまとめ

  • FluidはWebページをMacのネイティブアプリ化できるツール
  • インストールと使用方法も非常に簡単
  • ブラウザのタブ増加、アカウントの切り換え、ブラウザのメモリ使用領域の問題といった作業上のイライラをFluidを使うことで解消できる

2

わかった!