Webサイトアプリ化をMacで｜入れたアプリらしく振る舞わせる

Webサイトのアプリ化をMacで検討している人が本当に欲しいのは、ホーム画面に置くアイコンではなく、「入れてあるアプリと同じように振る舞ってくれること」です。ところが、アプリらしさと呼ばれているものは1つの機能ではなく、少なくとも7つの別々の要素に分かれています。どれが手に入り、どれは手に入らないかを先に切り分けておくと、どの道を選ぶかも、どこで期待を下げるかも決まります。

「アプリに変える」で実際に手に入るもの

先に前提を1つ置きます。どの方法で作っても、中身はブラウザのエンジンが描くWebページのままです。何かがコンパイルされるわけでも、サイトから専用のソフトが降ってくるわけでもありません。変わるのは、ページを包んでいる入れ物のほうだけです。

その入れ物が変わることで得られるものを分解すると、次のようになります。

要素	何が変わるか	どこまで得られるか
独立した窓	ブラウザを閉じても残る	どの道でも得られる
Command+Tabの並び	単独のアプリとして出る	どの道でも得られる
セッションの分離	別アカウントを同時に開ける	道によって差がある
通知とバッジ	Dockに未読件数が出る	サイト側の対応が要る
アイコンと名前	見分けが付く	差し替え可否は道による
起動時の自動起動	ログイン項目に入る	どの道でも得られる
リンクの行き先	外部リンクをブラウザへ逃がす	設定できる道は限られる

上から2つは、どの作り方を選んでも同じように手に入ります。判断が分かれるのは3つ目以降です。

この表の使い方は1つだけです。7つのうち、いま自分が困っている項目に印を付けること。印が上の2つだけに付いたなら、macOSやブラウザに含まれる機能で終わります。3行目より下に印が付いたときに初めて、道具を比べる意味が出てきます。逆の順番で進めると、機能の一覧を延々と読み比べたあげく、実際には最初の2行しか使わなかった、ということが起こります。

独立した窓と、Command+Tabの並びに入ること

タブから外に出したときに最初に効くのは、閉じる操作が別々になることです。ブラウザの窓を閉じても、そのサイトの窓は残ります。作業の途中でブラウザごと閉じてしまい、書きかけの入力が消える事故は、この時点で起きなくなります。

もう1つは、Command+Tabの並びに単独で並ぶことです。ブラウザのタブは、どれだけ増やしてもCommand+Tabからは1つの項目にしか見えません。30枚のタブから目的の1枚を出すには、ブラウザに切り替えてからタブを探す2段階が必要です。アプリにすると、この2段階が1回のキー操作になります。

窓の状態が個別に保存される点も、地味に効きます。位置と大きさ、フルスクリーンかどうかが、そのアプリだけの設定として残ります。カレンダーは左半分に固定して、チャットは細長い窓で右端に置く、といった配置が毎回再現されます。ブラウザのタブでは、この配置をサイトごとに持つことができません。

ただし、この2つはどの道を選んでも手に入るものです。ここだけが目的なら、macOSやブラウザに含まれる機能で足ります。道具を追加する理由になるのは、次の項目からです。

セッションが分かれると、何ができるようになるか

見落とされやすいわりに、日々の効き目が大きいのがここです。Safariの機能で作ったアプリは、Safari本体とデータを共有しません。

Webアプリは、Safariとは別に機能します。閲覧履歴、Cookie、Webサイトデータ、設定情報はSafariと共有されません。 出典: support.apple.com

共有しないという性質は、最初は不便に見えます。作った直後にもう一度ログインしなければならないからです。しかしこの性質があるおかげで、同じサービスの2つのアカウントを、切り替えずに同時に開いておけます。仕事用と個人用のメール、複数の顧客の管理画面、検証用と本番用の環境。ブラウザのプロファイル切り替えでやっていた操作が、窓を2つ並べるだけで済むようになります。

道による差はここに出ます。Chromeの機能で作ったものは、作成元のプロファイルのセッションを引き継ぐため、初回のログインは不要な代わりに、そのプロファイルと運命を共にします。専用の道具で作ったものは、アプリごとに独立した保管場所を持つのが一般的です。

判断の目安は単純です。同じサービスで2つ以上のアカウントを日常的に使っているなら、セッションが分かれる道を選ぶ価値があります。1つしか使わないなら、この違いは体感されません。

通知とDockのバッジは、どこまで動くか

「入れたアプリらしさ」として期待されがちなのが通知です。ここは、サイト側の実装に依存する部分が大きいところです。

通知を送るように作られているサイトであれば、アプリの中で許可を出すことで、通知センターやロック画面に表示されるようになります。加えて、未読の件数がDockのアイコンに赤い丸で出ます。この件数表示は、ブラウザのタブで開いている限り得られないもので、アプリにする実利としては分かりやすい部分です。

注意点が2つあります。1つは、許可をブラウザ側で出していても、アプリ側では別に出し直す必要があることです。データが分かれている以上、許可の設定も分かれています。もう1つは、サイトがそもそも通知に対応していない場合、どの道で包んでも通知は出ないことです。社内で作られた管理画面などは、この対応が入っていないことが珍しくありません。

通知が主目的でアプリ化を検討しているなら、包む前にブラウザ上でそのサイトの通知が届くかを確かめておくと、無駄が減ります。

バッジをいくつまで出すかも決めておく価値があります。バッジが役に立つのは、その数字を見て「いま開くかどうか」の判断が変わる場合だけです。ゼロにならない件数が3つ並んでいると、目が全部を無視するようになり、飾りと同じになります。通知を許可するのは、未読の数に意味がある1つか2つに絞ったほうが、結果として気づける状態が保てます。

アイコンと名前が効くのは、探す時間ではなく取り違えの回数

アイコンの話は見た目の好みに見えますが、実際の効き目は別のところにあります。

既定のままだと、アイコンはそのサイトのファビコンになります。ファビコンは小さく表示される前提の画像で、Command+Tabの並びやDockの中では細部がつぶれます。同じサービスを2つ作った場合、この2つは完全に同じ絵柄で並びます。名前を見ないと区別できない状態は、切り替えのたびに一瞬の判断を要求します。

対策は2つです。名前に用途を入れること。そしてアイコンを差し替えることです。アイコンを差し替えられるかどうかは道によって差があります。Safariで作ったものは設定から画像を選び直せます。専用の道具では、作る時点で選べるものが多く、サービスごとに用意された絵柄から選ぶ形になっているものもあります。

名前の付け方の目安は、Spotlightで2文字か3文字打ったときに一意に決まることです。「メール 社内」「メール 顧客」のように用途を前に出すと、キーボードだけで狙ったほうを開けます。

起動と常駐をどう設計するか

アプリらしく振る舞わせるうえで、最後に決めるのが起動の扱いです。

毎朝必ず使うものは、ログイン項目に登録しておけば、Macを開いた時点ですでに立ち上がっています。Appleの資料でも、ログイン項目として追加できることが機能として挙げられています。カレンダーや勤怠の打刻画面のように、開く時刻が決まっているものはここに向きます。

一方で、すべてを自動起動にすると逆効果になります。チャットのように通知が随時来るものを常に開いた状態にしておくと、集中を保ちたい時間帯にも視界に入り続けます。自動起動に入れるものと、必要なときだけ開くものを分けておくほうが、結果として使われます。

Dockに固定するかどうかも同じ観点で決められます。固定する場合は並び順を変えないことが条件です。位置が毎回動くと、アイコンを目で探す時間が戻ってきて、タブを探していた頃の状態に近づきます。

作ったのにタブへ戻ってしまう3つのパターン

アプリ化がうまくいかない例には、はっきりした型があります。どれも作り方の失敗ではなく、対象の選び方か設定の詰めが原因です。

1つ目は、検索から入るサイトを包んだ場合です。調べ物の途中でたどり着くサイトは、リンクをたどってブラウザで開かれます。せっかく作ったアプリは開かれず、Dockに残るだけになります。判定の材料は、そのサイトをブックマークやDockから直接開いている割合です。ほとんどが検索経由なら、包む対象として向きません。

2つ目は、リンクの行き先を決めていない場合です。アプリの中で外部のリンクを押したとき、窓の中で開く設定のままだと、戻る手段が乏しい画面に迷い込みます。数回それを経験すると、最初からブラウザで開く習慣に戻ります。逆に、すべて外に逃がす設定にすると、アプリの中で完結させたい操作まで外へ出ます。どちらに寄せるかを、包む対象ごとに決めておく必要があります。

3つ目は、数を作りすぎた場合です。10個を超えたあたりから、Dockの中で目的のアイコンを探す動作が発生します。タブを探していた頃と手間が変わらなくなり、結局ブラウザの検索窓から開くようになります。長く残っている構成が3つから5つに収まるのは、この上限があるためです。

包んでも変わらないこと

期待を外さないために、変わらない部分もはっきりさせておきます。

• 表示の速さは変わりません。読み込みにかかる時間はサイト側の作りと回線で決まります
• オフラインでは原則として使えません。サイト側がその仕組みを持っている場合に限られます
• サイト独自のキーボードショートカットは、そのまま使えるものと、macOSの標準操作と衝突するものがあります
• サイトの仕様変更には追随できません。画面の作りが変わればアプリの中身も変わります

この4つを踏まえると、アプリ化が効くのは「同じ場所を毎日開く」型のサイトに限られることが分かります。検索から都度たどり着くサイトや、月に1回開く手続きのページは、包んでも使われないまま残ります。

対応サービスと料金の見方

道具を選ぶ段階に入ったら、機能の一覧を眺めるより先に見ておくと判断が早くなる情報が2つあります。

1つは、想定されている使い方の幅です。この種の道具の一覧には300を超える雛形が並ぶものもあり、その並びを見れば、チャットとメール中心の想定なのか、社内の管理画面まで含んでいるのかが読み取れます。設定できる項目の範囲はできることで確認でき、実際の操作の細かさは使い方ガイドで見当が付きます。包みたいサービスが名前で並んでいるかは対応サービス一覧を先に見ておくと、作ってから引き返す手間が減ります。300以上のプリセットからすぐ作れる形であれば、URLとアイコンを自分で用意する工程が省けます。

もう1つは費用の形です。買い切りか継続課金か、対応するmacOSのバージョンがどこまでかを料金で確認しておくと、あとで乗り換える手間が減ります。細かい判断で迷う点の多くはよくある質問にまとまっているので、作り始める前に一度目を通す価値があります。

そして、7つの要素を全部そろえる必要はありません。窓を分けたいだけならmacOSの機能で足り、2アカウントとアイコンまで欲しいものだけ専用の道具で作る。長く残っている構成の多くは、この使い分けの形になっています。