Webアプリラッパーとは何か｜Macでタブをアプリに変える前の判断材料

Webアプリラッパーとは、ひとつのWebサイトだけを表示する専用の窓を作り、それをmacOSに「アプリ」として認識させる道具のことです。名前だけ聞くと大げさですが、やっていることは単純で、毎日開くサイトをブラウザのタブの列から引き剥がし、Dockのアイコンから直接開ける場所へ移すだけです。問題は、この「だけ」の中身が道具によってかなり違い、ログインの持ち方も、通知の出方も、数年後に動いているかどうかも変わることにあります。

Webアプリラッパーが実際に包んでいるもの

まず誤解を解いておくと、包んだからといってサイトが手元にダウンロードされるわけではありません。何かがコンパイルされることもありません。表示しているのはブラウザで開くのと同じHTMLとCSSとJavaScriptで、描いているのもブラウザのエンジンです。変わるのは中身ではなく、外側の入れ物です。

この分類には、もっと古くて正確な呼び名があります。サイト固有ブラウザ、英語ではsite-specific browserと呼ばれ、2007年のMozilla Prism、同年にmacOS向けに登場したFluid、2008年にChromeへ加わったアプリケーションショートカットの作成と、およそ10年ごとに作り直されてきました。ブラウザが「何でも開ける」方向に育つほど、「ひとつしか開けない窓」の価値が戻ってくる、という繰り返しです。

入れ物が変わると手に入るのは、次の5つです。

• Dockに専用のアイコンが並ぶ
• Command＋Tabの一覧とMission Controlに、ブラウザとは別の項目として出る
• タブバーもアドレスバーも無い窓になり、別のページへ迷い込む経路が消える
• システム設定の「通知」に単独のアプリとして並ぶ
• 道具によっては、Cookieの保管場所がブラウザから分かれる

この5つのうち2つも満たさないものは、見た目の良いブックマークです。同じような画面写真で紹介されている道具どうしが、1か月使うとまったく違う挙動になるのは、ここの差が原因です。

エンジンの違いで3種類に分かれる

作り方は大きく3つあり、その違いは画面より先にディスクの使用量に現れます。

	独自のChromiumを同梱	システムのWebKitを使う	導入済みのブラウザを動かす
1本あたりの容量	大きい。エンジンごと入る	小さい。数メガバイト程度	小さい。ブラウザは既にある
安全性の更新	道具の更新に合わせて届く	macOSの更新に合わせて届く	ブラウザの更新に合わせて届く
拡張機能	道具が対応していれば使える	使えない	元のブラウザのものが使える
ログインの分離	アプリごとに独立	アプリごとに独立	ブラウザのプロファイルに従う
表示の再現	Chromeと同じ	Safariと同じ	動かしているブラウザと同じ
壊れるとき	開発が止まったとき	システム側の挙動が変わったとき	ブラウザやプロファイルを消したとき

1列目はElectronを使う作りで、公式の解説にも代償がはっきり書かれています。Chromium、V8、Node.jsをアプリの実行ファイルに同梱するため、多くのアプリが100メガバイトを超える、という趣旨の記述がElectronのドキュメントにあります。10個のサイトをこの方式で包めば、ブラウザのエンジンが10個ディスクに並び、更新の経路も10本に増えます。見返りは、Chromeとまったく同じ表示になることと、システム側の変更に振り回されにくいことです。

2列目はずっと軽い作りです。この分野で最も古い道具のひとつであるFluidは、いまも配布ページでバージョン2.1を6.3メガバイトのダウンロードとして案内しています。システムのエンジンを借りればこの大きさで済みます。代わりに、そのエンジンの挙動をそのまま引き受けることになり、サイトがSafari向けに別の画面を返す設計だった場合はその影響も受けます。

ログインの置き場所が最大の分かれ目

道具を選ぶときに最初に確かめるべきなのは、機能の一覧ではなく、初回起動でログイン画面が出るかどうかです。出るなら、その道具はアプリごとにCookieを分けています。macOS標準の経路については、Appleが明記しています。

閲覧履歴、Cookie、Webサイトデータ、設定情報はSafariと共有されません。 出典: support.apple.com

最初の10秒は不具合に見えますが、これが選ぶ理由になります。ログインが分かれていれば、同じサービスの2つ目のアカウントを同時に開いたままにできます。仕事用と個人用でプロファイルを切り替えていた人は、その切り替え作業そのものが不要になります。

逆に、導入済みのブラウザを動かす方式は、そのプロファイルのログインをそのまま引き継ぎます。開いた瞬間にログイン済みで、パスワードの自動入力も拡張機能も普段どおりに動きます。代わりに、そのアプリはブラウザの下流に置かれます。プロファイルを消したり作り直したりすれば、アプリ側のログインも一緒に失われます。どちらが優れているという話ではなく、そのサイトに独立した身元が必要かどうかで決まります。取引先ごとの管理画面には分離が要り、1つのアカウントしか使わない社内の道具には共有のほうが速い、という判断です。

タブのままにしておいたほうがよいもの

包むほど良いわけではありません。ラッパーは「読むための窓」としては出来が悪く、外部へのリンクを踏んだときの行き先が、この分野で最も荒い部分です。窓にタブが無い以上、別サイトのページを置く場所がありません。既定のブラウザへ渡すか、アプリ内の素の窓で開くか、その場で読み込んで専用の窓を汎用の窓に変えてしまうか。3つ目は最悪の結果で、わざわざ包んだ意味が消えます。導入を決める前に、外部リンクを1回踏んで行き先を見る。この確認だけで、設計された道具とそうでないものが分かれます。

そこから導かれる使い分けは単純です。目的地は包み、読み物はタブに残す。チャット、案件の一覧、メール、カレンダーは目的地で、意識して開き、1日に何度も戻ってきます。記事、検索結果、資料のページは通りすがりです。通りすがりを包むと、1週間で半端なアイコンの列ができます。

通知とキーボードからの距離が定着を決める

窓が独立することは目に見える変化ですが、1か月後にそのアプリが使われ続けているかどうかを決めるのは、もっと小さな部分です。

まず通知です。通知の許可はブラウザ側ではなく、包んだアプリの中で出し直す必要があります。macOSから見れば別のアプリなので、ブラウザで3年前に許可したサイトでも、新しいアプリでは許可がゼロからのやり直しになります。許可を出すと、システム設定の通知一覧に単独の項目として並びます。ここが要点で、集中したい時間帯にそのサイトの通知だけを止めたり、集中モードでそのアプリだけを通してブラウザ全体は黙らせたり、という調整ができるようになります。タブのままでは、ブラウザという1つの単位でしか扱えません。

次にキーボードからの距離です。独立したアプリはCommand＋Tabの一覧に自分の枠を持つので、ブラウザの窓がいくつ開いていても、そのサイトへは2打鍵で戻れます。Dockのアイコンを副ボタンでクリックしてオプションを選べば、特定のデスクトップに固定できます。ログイン項目に加えておけば、朝の最初の操作より前に窓が開いた状態になります。ピン留めしたタブでは、どれも実現できません。

初日に確かめておくとよいのは2点です。未読の件数がDockのアイコンにバッジとして出るか。そして、開いたときに実際に使う画面が出るか、それともサイトの入口ページが出るかです。後者は起点のURLを指定し直すだけで直りますが、毎朝入口ページを見せられるアプリは1週間で消されます。

社内の管理画面こそ向いている

この分野の紹介では有名なサービスばかりが例に出ますが、効果がはっきり出るのは社内向けの画面です。管理コンソール、検証環境、監視の画面、認証の内側にある問い合わせの一覧。

理由は3つ重なります。1つ目は、ログインが長く続くうえに、日常の閲覧と混ぜたくない種類のものだということです。この場合の分離は便利さではなく安全側の性質になります。2つ目は、アドレスが基本的に安定しているのに、まれに別のサブドメインへ移るということです。あとからURLを書き換えられる道具かどうかが、その移転に耐えられるかを決めます。3つ目は、環境の取り違えです。本番のつもりで検証環境を触る、あるいはその逆という事故は、窓とアイコンと名前が分かれているだけで目に見えて減ります。

注意点も2つあります。社内の認証は複数のドメインを経由することが多く、戻るボタンの無い窓では途中で行き先を見失うことがあります。認証を通すアプリでは、ナビゲーションの操作を出したままにしておくほうが安全です。もう1つは、セッションの寿命を意図的に試しておくことです。14日で切れる認証は初日には何の問題も起こさず、忘れたころの月曜日に落ちます。まず1本だけ作り、いったんログアウトして、アプリの中で再ログインできるところまで確認してから他へ広げてください。

止まった道具をどう見分けるか

この分野には、開発が止まった道具が何層にも積み重なっています。2016年から2022年ごろの解説記事に必ず出てくるコマンドラインの道具であるNativefierは、GitHubのリポジトリが2023年9月29日に凍結され、読み取り専用になっています。Fluidの配布ページは、必要な環境としてMac OS 10.12以降と案内しています。どちらも、今日作ったアプリが明日動かなくなるという意味ではありません。ただ、仕事の流れをその上に乗せる前に見ておく種類の事実です。

確認すべきなのは3点です。最後に更新が出たのはいつか。エンジン側に安全性の修正が入ったとき、そのアプリはどう追随するのか。そして、その道具が明日止まったとして、包んだアプリを全部作り直すのに何分かかるのか。3つ目が実は一番重要で、一覧から数分で作り直せる道具なら、止まっても損失はほとんどありません。1本あたり20分の設定が必要だった道具は、そのまま乗り換えの費用になります。

どのサイトを包むかを決める3つの問い

候補を思いついたら、作る前に次の順で当てはめてください。

平日は毎日開いているか

週に1回では足りません。目的でないアイコンも、Dockを見るたびに視線が飛び越える対象になります。週1回のサイトはブックマークで足ります。

ブラウザを経由せずに届く必要があるか

見逃したくない通知、ブラウザを再起動しても残っていてほしい窓、他の窓に埋もれているときにDockから一発で開きたい場面。どれにも当てはまらないなら、ピン留めしたタブのほうが安上がりです。

ブラウザとは別の身元が必要か

同じサービスの2アカウント、個人のログインと絶対に混ぜたくない取引先の環境、公開ページの隣に置きたくない管理画面。ピン留めしたタブに唯一できないのがこの分離なので、たいていはこの問いが決め手になります。

3つとも通るサイトは、多くの人で3個から6個に収まります。それが適正な数です。

対応サービスの一覧から読み取れること

道具を比べるとき、機能の箇条書きより先に見ると判断が速くなる情報が2つあります。

1つは、雛形として用意されているサービスの数と偏りです。対応サービス一覧のようなページには300以上のプリセットからすぐ作れることが掲げられており、その並びを眺めれば、その道具が想定している使い方が見えます。チャットとメールしか並んでいない一覧なら、社内の管理画面を包む用途は想定の外かもしれません。設定項目の細かさはできることで確認でき、実際の手順の量は使い方ガイドを見れば見当が付きます。

もう1つは費用の形です。買い切りか継続課金か、対応するmacOSの下限はどこかを料金で先に確認しておくと、あとから乗り換える手間が減ります。判断が割れやすい点はよくある質問にまとまっているので、包む前に目を通す価値があります。

そして、この3種類は排他ではありません。通知と2アカウントが要るものは標準の経路で、拡張機能が要るものはブラウザを動かす方式で、アイコンとリンクの制御まで欲しいものだけ専用の道具で作る。長く残っている構成は、たいていこの混在型です。