アール・デコのデザインを取り入れたブラウザを作っています。

みなさんこんばんは、かんぬきです。
ブログ、ネタが尽きたかと思ったらちゃんとありました。しっかりと続けていきますよ。

さて今回は、音楽再生アプリ「Daycore」と並行して作っている Apple Silicon 搭載 Mac 用 web ブラウザを紹介しようと思います。その名も「Skyscraper」です。
※リンク先はダウンロードページになっています。

ところで、みなさんはアール・デコというデザインをご存知でしょうか？
アール・デコは、1920年代から1930年代にヨーロッパやアメリカを中心に流行した、直線や幾何学模様を基調とした装飾美術様式です。
代表的な例をここに書くには長くなるので、Wikipedia を参照してください。すぐに分かると思います。
僕はこのアールデコが大好きでしてね、日常に取り入れたいなと常日頃から思っていました。が、これがなかなか見つからないんですよね。
無いものは作ればいいので、Claude と一緒に何か作ってみることにしました。Daycore にアールデコのデザインを取り入れるには画面が小さすぎるため見送り。
他に日常で触っているもの……そう、ブラウザです。
画面的にも大きく、デザインを取り入れるにはぴったりな題材かなと思いました。

名前の由来

この「Skyscraper」という名前、直訳すれば「摩天楼」です。
着想はそのまま、アール・デコの代表格であるニューヨークの超高層ビル群から来ています。
1930年完成のクライスラー・ビルディング。てっぺんの、扇のように放射状に広がるステンレスの尖塔。翌1931年完成のエンパイア・ステート・ビルディング。上へ向かって段々と細くなっていくシルエット。
ちなみにこの「段々」、当時のニューヨークに高層ビルの壁面後退を義務付ける条例があったせいで生まれた形だそうです。「制約から生まれた形がそのまま時代の意匠になってしまった」。こういう話、僕はめっぽう好きなんですよね。
で、眺めているうちに思ったわけです。上へ伸びる縦の構造、段々に積み上がるシルエット、放射状に広がる扇の装飾。……これ、そのままブラウザの UI にできるんじゃないか？

そんなわけで Skyscraper は、

• タブは縦に積み上げる(最近流行りですよね)

• 新規タブページに階段状のビルのシルエット

• 区切り線はジグザグ、装飾に扇のモチーフ

• 配色は黒と金

こういう設計になっています。名前が先かデザインが先か、もう自分でも覚えていませんが、少なくとも「Skyscraper」以外の名前は思いつきませんでした。
Claude がサンプルを作ってくれた時に Solaris という名前も出たんですけど、既に誰かに取られていそうな名前(どこぞの会社のOSの名前と同じ)だったので見送りました。

中身の話

そんなブラウザこと Skyscraper ですが、Swift で作っています。最初は Chromium ベースにしようと思ったのですが、そもそもの準備で 512GB もの容量を要求されるため断念しました。いくら iMac のストレージ容量が 2TB あるとはいえ、1/4 のストレージ容量を使い潰されるのは許容できません。
しょうがないので WKWebView という WebKit ベースのコンポーネントを使うことにしました。これなら個人の趣味レベルであればひとまずのものを作ることができます。

今のところ実装できている機能は、

• ブラウジング機能 — これがないとブラウザとは呼べませんよね!

• タブの自動グルーピング — Apple Foundation Models を使って、開いているタブのタイトルを端末内のローカル AI が読み、勝手にグループ名を付けて束ねてくれます。サーバーには一切飛びません。Apple Silicon だからこその機能です

• 広告ブロック — 拡張機能なし、ブラウザ本体に内蔵。海外の大手アドネットワークだけでなく、日本の広告配信網もリストに入れてあります

• リーダーモード — 記事本文だけを抜き出して読む。もちろんアール・デコの装飾付きで

• セッション復元 — 前回開いていたタブを丸ごと復元。遅延読み込みなので、20個開いていても起動は一瞬です

• 閉じたタブの復活 — 戻る/進むの履歴とスクロール位置まで含めて元通りになります

• 動画再生中のスリープ抑止 — 動画を見ている間だけ Mac のスクリーンセーバーが起動しません。タブ単位で判定しているので、裏で開きっぱなしのタブのせいでスクリーンセーバーが起動しない、ということもありません

• 日本語入力の変換確定ガード — アドレスバーで変換を確定した Enter が、そのまま検索実行になりません。地味ですが日本語入力には必須な機能です

• ブックマーク・ダウンロード・翻訳

などなど、日常で使う分には困らない機能を Claude と一緒に実装できました。
履歴機能だけは敢えて削っています。履歴を気にせずブラウジングしたいので。

デザインの話

さて、本題のデザインです。ここが作りたかったものの全てと言っても過言ではありません。
まず配色。黒と金です。これ以外に選択肢はありませんでした。アール・デコといえば黒地に金、あるいは黒に真鍮。クライスラー・ビルのステンレスも、夜の写真を見てみると金色に光っていました。これは悩む余地がないですね。
タブは縦置きです。上へ上へと積み上がるビルのフロアのイメージですが、実用面でも理由があります。
今どきのディスプレイは横に広くて縦に狭いじゃないですか。
タブを横に並べると、貴重な縦幅を削られる上に、タブが増えるほど一つひとつが潰れていきます。
その点、縦なら幅は一定のまま、タイトルもちゃんと読める。
そのタブの形は六角形です。角を落とした幾何学的な形は、アール・デコのポスターや建物の装飾によく出てくる形ですね。
区切り線はジグザグにしました。アール・デコの意匠でよく見るやつです。地味な部分ですが、こういうところの積み重ねが全体の印象を決めるのかなと思っています。
新規タブページには、階段状のビルのシルエットを置きました。先ほど書いたセットバックのあれです。段々に積み上がっていく摩天楼。このアプリの名前の由来そのものを、一番目に触れる場所に置いた形になります。
利便性を考えると、最初に開くページは設定できた方が良いんだろうなと思ったんですが、今後の課題としておきます。

↑タブの自動グルーピング機能もバッチリ動作していますね！

装飾には扇のモチーフを散らしています。放射状に広がる扇形、いわゆるパルメット。クライスラー・ビルの尖塔がまさにこれですね。
こうして並べてみると、やっていることは単純です。
1920年代の建築家たちが使っていた語彙を、そのままブラウザの部品に置き換えているだけ。
縦、段々、ジグザグ、扇。それだけです。
ただ、それだけのことをやっているブラウザが世の中に一つも無かったので作りました。
理由なんてそんなもんです。

苦労した話

ここまで良いことばかり書いてきましたが、当然ながら苦労もありました。特に印象に残っているものを一つ。

広告ブロック

Skyscraper の広告ブロックは、WebKit の WKContentRuleList という仕組みを使っています。ブロックしたいドメインのルールを JSON で書いて渡すと、あとは WebKit が勝手にやってくれる。楽なもんです。
……楽なはずでした。
ルールを書いて、ビルドして、広告だらけのサイトを開く。
広告が出る。
あれぇ？と思い、ルールを見直す。合っている。
ビルドし直す。広告が出る。
エラーログは何も出ません。警告すら無い。
原因は文字列連結でした。JSON を Swift の文字列補間で組み立てていたのですが、ドメインを正規表現で書く都合上 doubleclick.net のようなバックスラッシュが混ざります。これが文字列リテラルのエスケープと衝突して、出来上がった JSON が壊れていたと。
そして WKContentRuleList は、JSON が壊れているとルールリスト全体を無言で拒否します。一行でも間違っていれば全部が無効。しかも何も言わない。
JSONSerialization で組み立てるように書き直したら、あっさり動きました。ついでにコンパイルの成否をログに出すようにもしました。
「動かない」より「何が起きているか分からない」方が怖いということを、身をもって学びましたね……

配布まわりの話

作ったからには配りたい。というわけで、配布の仕組みも一通り整えました。
Skyscraper のインストーラは、家にある Raspberry Pi 5 で配布しています。クラウドを借りるなんていう発想はありません。そもそも個人の趣味アプリで、手元にあるもので済むならそれに越したことはありません。そのためのラズパイです。
棚の上で静かに動いている小さなサーバーが、僕のアプリの配布元というわけです。
アップデートには Sparkle を使っています。macOS アプリでは定番の自動更新フレームワークです。新しいバージョンを出すと、アプリが勝手に気づいて「更新がありますよ」と教えてくれます。自分で作ったアプリが自分に更新を促してくるのは、なかなか妙な気分ですが。
そして Apple の公証 (Notarization) も通しています。これを通さないと、macOS が「開発元を確認できないため開けません」と言って弾いてきます。App Store の外で配る以上、ここは避けて通れません。
Developer ID で署名して、Apple のサーバーに投げて、審査を待って、結果をアプリに埋め込む。リリースのたびにこれをやるのは面倒なので、ビルドから署名、公証、DMG の作成、GitHub のリリース作成、Raspberry Pi への転送まで、Claude と全部シェルスクリプトに押し込みました。
今はコマンド二発でリリースが終わります。
僕はめんどくさがりなので、シェルで終わるならそれに越したことはありません。ここまで作り込んでしまいました。

ソースコードは GitHub で公開しています。綺麗なコードとは口が裂けても言えませんが、中身が気になる方はどうぞ。

おわりに

というわけで、Apple Silicon 搭載 Mac 用ブラウザ「Skyscraper」の紹介でした。
ダウンロードはリンクから。無料です。
作り始めたきっかけは「アール・デコを日常に取り入れたい」という、それだけの理由です。気がついたら広告ブロックを実装し、ローカル AI にタブを整理させ、Raspberry Pi で配布ページを立てていました。人生、何がどう転ぶか分からないものですね。
当面の課題はパスキー対応です。Apple の申請が通り次第、実装に取りかかります。早く承認通らないかな。その他にも作りたいものは色々あるので、進展があればまたここで書こうと思います。

それでは、また次回。