SMARTCAMP Engineer Blog

スマートキャンプ株式会社(SMARTCAMP Co., Ltd.)のエンジニアブログです。業務で取り入れた新しい技術や試行錯誤を知見として共有していきます。

WebのOSを目指す新しい体験のWebブラウザ「Arc」を紹介したい

こんにちは!スマートキャンプエンジニアの中田です。

みなさんWebブラウザには何を使われてますか? Chrome, Firefox, SafariにEdgeなど多くの選択肢があるWebブラウザですが、私は2ヶ月ほど前に長らく使ってきたChromeから移行し、現在は Arc というbeta版が公開されている新しいWebブラウザを使ってみています。

この Arc がとても便利で楽しいものだったので、本記事ではそんな Arc の紹介 (※普及活動) をしていきます!

Arcとは

概要

Arcは The Browser Company という、創立2019年、New Yorkが拠点の企業で開発されているそうです。

企業サイトの Values ページが個性的なので興味のある方はぜひご一読ください。

arc.net

ArcはブラウザエンジンにChromiumを使用したWebブラウザです。

現在はbeta版のみ公開されており、OSはmacOSにのみ対応しています。 (2023年中にはWindowsOSやモバイルのOSもサポート予定とのこと)

インストール方法

現在はbeta版公開のみのため、アプリを即時インストールできない仕様になっており、インストールには以下の手順を踏む必要があります。

  1. 登録ページから情報を入力
  2. 待機リストに入る
  3. 1~2週間ほどで招待メールが届く
  4. インストール

また、上記以外のフローとして、すでに導入済みのユーザーからの招待を受ける方法もあります。

  1. 導入済みのユーザーの招待機能で招待リンクを発行してもらう
  2. 招待リンクからインストール

※ 公式から情報を辿りたい方向けの補足

執筆に際して、Arcの公式サイトを再訪してみたものの、全体を通して情報が少量かつ抽象的で、具体的に「何ができるWebブラウザなのか」がサイト内の情報からは掴みづらい印象でした。

Arcの具体的な機能に関しては、Arcをインストールした後、アプリ内のヘルプから説明ページにアクセスできる導線になっており、企業サイトに記載のある価値観と照らし合わせて考えると、「まずは感覚的に使ってみてね!」という方針での設計なのかもしれません。

(私も説明を流し目に待機リストに飛び込んだ一人ですが、実際に使ってみて困ることは少なかった気がします)

また、YouTube にて公式が公開している解説動画も豊富にあるので、使うより先に情報が欲しい方は本ブログと共にそちらもチェックしてみるのをオススメします。

特徴

Arcが他のWebブラウザと異なる点を「機能」と「実装の方向性」の2つの観点で挙げてみます。

機能

1. タブ/ブックマークの管理

Arc利用時の全体画面

Arcを利用する際、アプリのコントロールは基本的に上図左のサイドバーから行います。

サイドバーについて

サイドバーは大きく3つのセクションに分かれています。 各セクションはざっくり以下のような使い分けができます。

  • ①: Favorites
    • よく使うタブを置いておくセクションです
    • (噂によるとSpotify等特定のアプリを置いておくと連動していい感じのアニメーションが出たりするそう)
  • ②: Pinned tab
    • Favoritesほどではないがよく使うなというタブを置いておくセクションです
    • (Chromeで言うブックマークにはこのセクションが一番近そうです)
  • ③: Today tab
    • Temporaryなタブが置かれるセクションです
    • (デフォルトの設定だと、12時間が経過するとこのセクションの内容はリセットされます)

①と②の特徴として、これらはブックマークでありながらタブのようにも機能します。

最初にアプリを開くときにはブックマークとして機能し、その後はサイドバー上の同位置に固定されたアプリのタブとして使えます。 これにより特定アプリのタブへの出戻りがしやすく、同アプリのタブが複数乱立するような状況が生まれづらくなっています。

これはChromeのブックマーク機能と大きく異なる点だと感じました。

①と②の使い分けが曖昧ですが、本記事では紹介しないSpace機能利用時の差分など、他にも若干の差分があるはずです。 が、私もまだ使い分け方を模索中なのと、正しいことが言える自信がないので曖昧のままに留めます。

個人的には③のタブが一定時間でリセットされる仕様も気に入ってます。

仕事を終えて次の日の朝、昨日のタブの残骸に脅かされる心配がなく快適です!

2. Note / Easel機能

Note機能

Noteはマークダウン形式で書けるメモ機能です。

ちょっとしたメモに別アプリを起動しなくても良いのは便利かもしれません。

Easel機能

Easelは画像を編集したり、ダッシュボードを作ることのできる機能です。

ダッシュボードとしての使い方は後ほどご紹介します!

3. Boosts機能

Boosts機能

Boostsは任意のWebサイトにカスタムCSS,JSを適用できる機能です。

(特定のサイトor全サイトで適用のスコープを選択できます)

エンジニア心をくすぐられる機能ですし、Chrome拡張のように作成 -> 申請のような過程を踏む必要なく、サクッと作ったスクリプトを適用できるのは嬉しいですね。

※ 中身がChromiumなのでChrome拡張も利用可能です。

Arcの機能に見えるような何かを自分の環境にだけ配置してオレオレArcを作ってみたりも楽しそうです。

実装の方向性

The Browser Company CEO(Josh Miller)への インタビュー記事 を読むと、以下の1点においてArcの特徴的な実装の方向性がうかがえます。

WebのOS的な立ち位置のアプリ

Arcはまさにこれを目指しているのです! Meta-OS Layer の新しいパラダイムを、グローバルノートのようなメタレイヤーのツールで実現することです。 ネイティブアプリケーションからブラウザベースのアプリケーションにワークフローを自然に移行させるような体験を提供するため、Meta-OS Layerの下にすべてのアプリケーションを少しずつ統合しているのだそうです。 (DeepLによる翻訳)

※ 引用:https://www.makingproductsense.com/i/67773152/enter-arc

上記の通り、ArcはWebのOS的な立ち位置を目指しているそうです。

Note, Easelのような機能も本来OSにも搭載されている機能に思えますし、書類や画像などPCのストレージに保存されているコンテンツへのアクセスがFinderを開かずにArc上からできるのもWebのOSを目指しての機能なのかも知れません。

Arc上で直アクセス可能

また、Arcはアプリをブラウザベースで管理するApp Launcherのようにも利用しやすく、その点もWebのOS的な思想が反映されていると言えそうです。

例えばChromeをお使いのみなさんは、一度は以下のような経験をされたことがあるのではないでしょうか?

  1. アプリをChromeでブックマークから開いて使用
  2. アプリを離れて別の作業をする
  3. しばらくして、さっき開いていたアプリを開きたくなる
  4. タブが乱立しておりどれが目当てのアプリタブか分からなくなる

"機能"セクションでも紹介したとおり、Arcはタブとブックマークの管理方法に特徴があり、1度開いたアプリタブを見失いづらい仕様になっています。 Arcを使うと以下のような体験に改善されそうです。

  1. アプリをArcのFavoriteから開いて使用
  2. アプリを離れて別の作業をする
  3. しばらくして、さっき開いていたアプリを開きたくなる
  4. Favoriteからアプリを開く (もう迷わない!)

個人的に、これまではなるべくデスクトップアプリを入れるようにしており、その理由は上記のタブ問題が主でした。

タブ問題の改善されたブラウザは、アプリウィンドウの数も増えづらく、各アプリへのアクセスもしやすいため、App Launcherに向いているなと感じました。

実際私は、Arcを使い始めてから2ヶ月ほどが経過した今、これまでデスクトップから開いていたほとんどのアプリにはWebブラウザ(Arc)からアクセスするようになりました。

推し機能

最後に、Arcの個人的な推し機能を1つご紹介します。

Note / Easelのキャプチャ機能

「Easelはダッシュボードとして使える」と先述しましたが、このキャプチャ機能を利用することでダッシュボード化が可能です。

キャプチャ機能紹介

上図は私物の「朝ボード」ですが、配置されている各コンテンツはキャプチャ機能を利用したもので、特定のWebページの特定の位置のコンテンツが投影されているような状態になっています。

(正確にはコンテンツをホバーすると同期ボタンが表示され、実行すると最新の状態になる仕様)

色んなサイトから手軽に情報を集めて自分用のダッシュボードを作れるのは相当便利です。

また、作成したEaselはWebに公開可能なので、複数人での共用ダッシュボードとしても利用できそうです。

この機能について興味本位で少し実装を探ってみると、キャプチャされたコンテンツはHTML上ではimgタグの要素となっていました。 Webページとページ内での位置情報をArc内部で持ちコンテンツと紐付けておき、同期の実行時に最新のキャプチャを撮影して置き換えるような実装なのかもしれません。

(同期はArc上でのみ可能かつArc上でEaselに対してはChromeのDevツールが禁止だったため、同期処理の内容についてはあくまでも想像です)

イチオシの機能なので、Arcを使われている/今後使われる方はぜひ試してみてください!

まとめ

いかがでしたでしょうか?

簡単にですが、WebのOSを目指す新しい体験のWebブラウザ Arc についてご紹介しました。

本記事では触れていないArcの魅力も多分にあると思うので、記事を通して少しでも興味を持たれた方はぜひ一度使ってみてください。

個人的に用法をユーザーで拡張できるようなツールが好きなので、Arcはツボでした。

直近にも高頻度でアップデートが来ており、今後リリースされる機能も楽しみです。 (betaでこのクオリティ...!と驚くばかりです)

最後までお読みくださりありがとうございました。それではまた!

参考サイト