Progressive Web App (PWA) の勉強がてら <code>https://blog.bokken.io</code> を PWA 化した。本記事では、その内容をまとめておきたい。

自分自身で Web サイトを作る際に、プライバシーポリシーをどのように扱うべきか、どのように記載するのがよいのかを考えて記載することとした。昨今の GDPR などと合わせて最終的にどのようなプライバシーポリシーとなったのかを紹介したい。

ブラウザをスクラッチで書いている。そのときに HTML の標準を読みながらブラウザを書 いているそのときに仕様の不備のように疑われる挙動に出会った。内容について調査しているうちにということを再認識できたので、その内容について紹介したい。

最近生産性アップのためにやっていてよかったなと思うことがあったので紹介したい。要点は下記である。プロジェクト内での開発において、特定のコマンド列による操作を繰り返すことがよくある。例えば DB の初期データのインサート、テストコマンドの実行などである。コマンド列にすると下記のようなコマンドである。

もともと<a href="https://negi-works.hatenablog.com/">昔にブログ</a>を書いていたが、 ブログとしてアウトプットをする時間を取らず更新が滞ってしまっていた。

趣味でブラウザを作っている延長で、 Chromium をビルドしてテストを走らせて遊んでいる。その際、ビルド、実行に必要なリンクが各所にあって難しいなと感じたので、この記事にまとめて備忘録としておきたい。

趣味でブラウザを作っている延長で、 Chromium をビルドしてテストを走らせて遊んでいる。その際、ビルド、実行に必要なリンクが各所にあって難しいなと感じたので、この記事にまとめて備忘録としておきたい。

結論からいうと <code>chrome://flags</code> の <code>Omnibox keyword search button</code> の設定が enable になってしまったからだった。設定を戻せば引き続き使える。アップデートによって実験的に機能をいくつかのユーザに公開しているのでその影響なのだろう。

2021年がもう終わろうとしているので振り返りをしたい。 テックよりの話とライフイベントよりな話の両方でつらつらとまとめてみる。例年は本を読んだり、自分でプログラムを書いたりして一人で満足しているだけだったのだが、 今年はいつもに比べて対外的な活動、人と関わりがある活動を進めていこうとしてもがいていた年だった。

最近、大きなコードベースを触る機会が増えてきれいなコミットメッセージについて考える事が増えた。 きれいなコミットメッセージの定義は様々あると思うが、筆者は下記がきれいなコミットメッセージに必要なことだと考えている。

最近、Chromium へのコントリビューション活動をしている。 直近で Chromium のバグ fix のために仕様を読んでいて面白いなと思ったことがあったので共有したい。具体的に取り組んでいたのは、<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=978146">こちらのバグ</a>である。

最近、Web 標準を読む会を開催して、複数人で Web 標準を読んでいる。やっていることはシンプルで、 <a href="https://fetch.spec.whatwg.org/">Fetch Standard</a> を DeepL で日本語に翻訳している文章を参加者が順番に音読する。 そしてその内容を読み解くというものだ。

今年から <a href="https://opensource.googleblog.com/2021/11/expanding-google-summer-of-code-in-2022.html">Google Summer of Code (GSoC) の応募制限が緩和</a>されて、18 歳以上であれば、 誰でも応募できるようになった。

Chromium の開発をしているときに、他の人にコードのどの部分かを説明したいことがある。そんなときに GitHub では、<a href="https://marketplace.visualstudio.com/items?itemName=mattlott.copy-github-url">Copy GitHub URL</a>というプラグインで、VS Code で編集しているコードのパーマリンクを取得できるため、このパーマリンクを共有すればよい。

<a href="https://web-study.connpass.com/event/250730/">HTTP RFC Publication Study</a>に発表者として参加した。

筆者は VS Code で <a href="https://marketplace.visualstudio.com/items?itemName=mattlott.copy-github-url">GitHub の permalink をコピーできる拡張機能</a>をよく使っている。

<a href="https://chromium-news.vercel.app">Chromium News</a> というサイトを作りました。 現状は Chromium の commit を検索できるだけのサイトだが、今後様々な情報ソースを集約したり、それらをまとめる記事を書ければと思っている。

<a href="https://wicg.github.io/anonymous-iframe/">Anonymous iframe</a> という仕様がある。 この仕様が何を問題意識として、何を解決するための仕様なのかをまとめる。

<a href="https://blog.bokken.io/articles/2022-09-27/about-anonymous-iframe.html">前回の Anonymous iframe の記事</a>で、storage について触れた。

Prerender は Rendering を予め行い、ユーザのリンククリック時にあらかじめレンダリングされた結果を表示することで、閲覧体験を向上させる機能といえる。いずれにしても Legacy Prerender は一度こういった背景で取り下げられた。ここまで、Prerender2 の歴史について主に触れてきたが、次節からは Prerender2 をどのように使うのかを紹介する。

3rd Party Cookie をブロックする制限を緩和するための仕様である CHIPS が策定されている。近年、ユーザの Privacy の向上を目的として 3rd Party Cookie をブロックする流れがある。cross site でユーザトラッキングを提供する多くのツールは 3rd Party Cookie を使っているため、3rd Party Cookie をブロックすることで解決

リクエストのコンテキストをサーバ側に伝えることで、サーバ側でリクエストが危険なものかを判別するための Fetch Metadata Request Headers という仕様がある。今回、このヘッダがどういったものなのかについて Fetch Metadata Request Headers を読んだり、周辺のドキュメントを読んでまとめる。Sec-Fetch- はクライアント側では特に何も設定する必要はなく、サポートされていればブラウザによってリクエストに自動でヘッダに付与されサーバに送付されるサーバは送られてきた Fetch Metadata をもとに CSRF などの、攻撃の可能性があるリクエ

リクエストのコンテキストをサーバ側に伝えることで、サーバ側でリクエストが危険なものかを判別するための Fetch Metadata Request Headers という仕様がある。今回、このヘッダがどういったものなのかについて Fetch Metadata Request Headers を読んだり、周辺のドキュメントを読んでまとめる。Fetch Metadata ヘッダはクライアント側では特に何も設定する必要はなく、サポートされていればブラウザによってリクエストに自動的にヘッダに付与されサーバに送付されるサーバは送られてきた Fetch Metadata をもとに CSRF などの、攻撃の可

Clear-Site-Data というクライアントサイドのデータを削除するためのヘッダがある。最近 Safari の Beta Release にリリースされ、もうすぐ主要ブラウザベンダで実装が出揃う形になる。この記事では、Clear Site Data とはどういう仕様なのかをまとめる。Web アプリケーションでは、オフライン時にも利用できるようにリソース (データ) をキャッシュしたり、パフォーマンスを高めるため、 local マシンにリソース (データ) を保持することがある。また、サービスをログインするのに Cookie にセッション情報 (データ) を保持したりする。これらの保存された

IETF 116 Yokohama に参加した。 私としてははじめての IETF 参加だった。今後の参加者たちの参考にどういった体験だったのか記録として残しておきたい。私は普段 Web フロントエンドの開発をしているため、プロトコル関連の実装をしている訳ではない。なので IETF で議論されされている内容に関して専門家ではない。趣味で少し HTTP/3 や QUIC を勉強している程度である。そういった人物が行った場合にどうだったのかが記載されている。インターネットの最前線を見られたことに感動したドラフトは読んだ方が楽しめる読まなくても雰囲気は分かるが内容は分からない未予習者には BoF がおす

Web サイトのパフォーマンスを計測するための API がいくつか提供されている。ユーザ体験を向上させるのはもちろん。Google は Core Web Vitals を検索エンジン上で考慮すると述べている。高精度のい時間情報が必要。ただ、高精度の時間の情報は脆弱性にもなり得る。Spectre や Meltdown。このことから Web サイトのパフォーマンスを把握するのは非常に重要であるといえる。Performance Observer が定義されている。こちらの Performance Observer に計測したいメトリクスを定義することで、そのメトリクスを Observe して知らせてく

パスワード変更のためのURLを示すための、A Well-Known URL for Changing Passwords という仕様が存在する。この仕様は主にクライアントサイドのパスワード管理ツールで使われる想定の仕様だ。本記事ではこの仕様がどういうものか、どういった利点があるのかについてまとめる。パスワード管理ツールはクロスサイトでのパスワードの再利用を防いだり、オートフィルをしてユーザビリティを高めてくれる良いツールだ。 ブラウザにもパスワード管理ツールが搭載されていたり、有名どころでは1PasswordやBitwardenのようなツールがある。これらのツールの中にはパスワードの強度を教えて

本記事ではPrerender2で事前描画したページを更新し続けるときに、少しだけ便利なヘルパーを作ったので、Prerender2の挙動とあわせて紹介する。Prerender2 という機能が Chrome/Chromium で実装されている。この Prerender2 という機能は、リンク先のページを事前描画する機能である。リンク先への遷移が一瞬で完了するため、高速な閲覧体験をユーザに提供できる機能だ。Prerender2 によって、例えば非常に重い画像が複数あるページであっても(事前描画が終わっていれば)一瞬で表示される。その簡単なデモが次の例だ。最初のデモでは Prerender2を使わずに重

ブラウザは様々なストレージや内部状態を持っている。例えば、Cookieなどがわかりやすい例だろう。 この内部状態を元にoriginと通信をするが、セキュリティやプライバシーの観点から、この内部状態は許可されていない異なる origin へ漏れないようにしなければいけない。では、実際にどういったストレージや内部状態を持っていて、それをどのように漏洩しないようにしているのか。この記事では、W3C の Privacy Community Group で検討されている Client-Side Storage Partitioning で検討されている内容について紹介して、それを概観する。各種ストレージや

とあるきっかけでずっと積んでしまっていた「Weaving the Web: The Original Design and Ultimate Destiny of the World Wide Web」(以下、Weaving the Web) を読んだ。読んだ内容を忘れないように備忘録として書き留めておく。「Weaving the Web」はひとことで言うなら、Web 好きにはたまらない本だ。著者は Tim Berners-Lee 氏と Mark Fischetti 氏で、この本には Web の発明者である Tim Berners-Lee 氏と World Wide Web の歴史について事細か

Software Design 2023 年 10 月号の HTTP/3 の特集の第一章に寄稿する機会を頂きました。https://gihyo.jp/magazine/SD/archive/2023/202310第一章の内容は、HTTP の歴史と HTTP/3 の特徴についてまとめたものになっています。今回、執筆にあたって、調べれば調べるほど HTTP についてまとめたいことが湧いてきてしまって、前回の記事で紹介した『Weaving The Web』を読んだり、インターネットの資料を読み漁ったりしました。手前味噌ではありますが、短いページに HTTP の歴史と HTTP/3 の特徴を詰め込むこと

現在 Web ブラウザでは、プライバシーの観点から、サードパーティ Cookie をブロックする流れがある。しかし、Web コンテンツプロバイダーは複数のドメインでコンテンツを提供していて Cookie を共有したいことがある。例えば、アプリケーションごとにドメインを分けるケースだったり、アセットのためにドメインを分けているが Cookie を メインのサイトと共有したいケースがあるだろう。そういった異なるドメイン間において、サードパーティ Cookie を許可できるのが Related Website Sets (First-Party Sets)という仕様だ。もともとは、First-Part

ことのはじまりは https://crbug.com/853508 を見つけたことだった。この bug は HTTP Caching に関わる話で、Expires: 0 がレスポンスに付与されていた際には、ブラウザはこのキャッシュを expired なものとして扱わなければいけないというものだった。A cache recipient MUST interpret invalid date formats, especially the value &quot;0&quot;, as representing a time in the past (i.e., &quot;already expi

今年ももう終わってしまうので、今年にあったことで印象的だったことを振り返る。今年もなんとか毎月ブログ記事を毎月出せた。すべて月末に偏っているのは、普通に時間がかかるのと、ある程度記事を温めているからというのもあるが、締め切り駆動にあってるからというのもある。来年は月初に出して月末はゆうゆうと過ごしたい。ブログ記事を毎月書いた今年もなんとか毎月ブログ記事を毎月出せた。すべて月末に偏っているのは、普通に時間がかかるのと、ある程度記事を温めているからというのもあるが、締め切り駆動にあってるからというのもある。来年は月初に出して月末はゆうゆうと過ごしたい。今年もChromiumにパッチを送れた。合わせて

今回、Chromeとブラウザ好きが幸いして、Software Design誌にて「あなたの知らないChromeの世界」の連載をさせていただくことになりました。連載の回数は6回〜12回程度とあまりしっかりきまっていないのですが、Chromeを中心にブラウザの話をお伝えできればと思っています。Software Designは、設計やアーキテクチャ、言語やクラウドの利用方法といった実務ですぐに役立つような記事が多い中で、果たして実務に役に立たないChromeやブラウザの歴史や、細かい中身の話が面白いと思ってもらえるのか少し不安はありますが、頑張って最後まで連載を終えられるように頑張っていきたいと思いま

以前の記事でChromiumのビルドをする際のコマンドを備忘録のためにまとめた。基本的にはデフォルトの設定を使っているのだが、デバッガと併用して使う場合には別途設定ファイルを変更して利用する必要があるため、その内容についてまとめる。現状、デフォルトビルドの際には次のようなオプションを使用している。これでも最低限、動作確認やテストの実行などはできる。デフォルトの動作の確認以外にもデバッガを使いたいときがある。そういったときに上記の設定だとブレイクポイントが飛び飛びで止まってしまい期待する動作をしてくれない。その際はデバッグビルドの際には次の設定を使用している。差分はis_debugとsymbol_

ずいぶん昔に「Chromium のコミットを検索できるサイトを作った」という記事を書きましたが、そのサービスを一度停止します。理由としてはそのサービスでは内部的にPlanetScaleを使っており、無料で使えるHobby Planが2024年4月8日以降に使えなくなってしまうためです。今後もしかしたら他の技術構成で再開するかもしれないし、再開しないかもしれません。もしも使って頂いていた方がいたら申し訳ありません。今後もなにか新しいサービスを作った際にはお知らせしようと思います。

今月のSoftware Design11月号で、「あなたの知らないChromeの世界」の連載が無事に終了しました。至らない点もあったかもしれませんが、無事に連載を終えることができてほっとしています。読んでくださった方がいたら、ありがとうございました。「あなたの知らないChromeの世界」では次のトピックについて紹介しました。「Google Chromeの登場」, Software Design 2024年2月号, 2024年1月18日, https://gihyo.jp/magazine/SD/archive/2024/202402「Chromiumとは」, Software Design 20