Intro Chromium にコントリビュートするためには、ソースコードを理解する以外にも、もろもろ必要な周辺知識がある。 ドキュメントはかなり整備されている方ではあるが、そのドキュメントにたどり着くのが難しい場合もある。 レビュアーなどが親切に教えてくれるものをローカルにメモしているが、それも散らばってきたため、ここにまとめることにする。 まずは初期状態で公開するが、どんどん更新していき、長くなっても分割しないで追記を繰り返そうと考えている。 関連サイト 始めて取り組もうとすると、まずどこを見ればわからないところから始まる。 似たようないくつかのサイトがあり、使い分けがされているからだ。 code search https://source.chromium.org/chromium/chromium/src コードをインタラクティブに検索するためのサイト Workspace 風の U
FirefoxがついにChromeよりも高速なブラウザに
Treeherderは、Mozillaの開発するソフトウェアのテスト結果や、ウェブサービスや外部ツールで取り込んだデータを抽出・加工するETL機能などを有するウェブサイトです。このTreeherderに、Google ChromeとFirefoxのベンチマークテスト結果をまとめたデータが公開されました。これによると、FirefoxはChromeよりも高いスコアを出している、つまりは高速なブラウジングが可能なブラウザということのようです。 Perfherder https://treeherder.mozilla.org/perfherder/graphs?timerange=31536000&series=mozilla-central,3735773,1,13&series=mozilla-central,3412459,1,13 Firefox has surpassed Chrome
Chrome for Testing: reliable downloads for browser automation | Blog | Chrome for Developers
Today we’re happy to announce Chrome for Testing, a new Chrome flavor that specifically targets web app testing and automation use cases. This article explains why the Chrome team felt this was needed, and walks through concrete examples where Chrome for Testing might benefit you as a developer. Background Browser testing is a vital component of creating a high-quality web experience, regardless o
Cache Storageがめちゃくちゃ肥大化する問題 TBSのニュースサイト、TBS NEWS DIGがめちゃくちゃブラウザのストレージを消費しているという話がはてブや増田で話題になっています。 TBSのニュースサイトヤバない？ – はてな匿名ダイアリー 同・はてなブックマーク 確かに、手元でも同様の状況を観測できる。 当該サイトのストレージ使用状況 はたして、これは真実なのだろうか。本当に1.4GBも食うことがあるのだろうか…… そんなわけない、ということで調査 まずは再現性を確認するためにChromeのゲストモードで当該のサイトのDevtoolを開いてましょう。すると、StorageのUsageは386MBになっていました。（適当なページを開き、リロードした時点で340MB程度であった） 当該サイトのストレージ割合 上記のスクリーンショットをよく見ていただけるとわかると思いますが、こ
GitHub - fathyb/carbonyl: Chromium running inside your terminal
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel
We’re excited to announce Vercel OG Image Generation – a new library for generating dynamic social card images. This approach is 5x faster than existing solutions by using Vercel Edge Functions, WebAssembly, and a brand new core library for converting HTML/CSS into SVGs. Dynamic with limitsThe engagement rate of Tweets that embed a card is 40% higher. While creating and sharing static social image
電子情報学特論： Chromium のアーキテクチャを解き明かす 〜 EEIC の授業が生きるプロダクトの世界〜 Kentaro Hara 2022 April (๑>ᴗ<๑) * * * *
キャッシュは、CPUのバスやネットワークなど様々な情報伝達経路において、ある領域から他の領域へ情報を転送する際、その転送遅延を極力隠蔽し転送効率を向上するために考案された記憶階層の実現手段である。(引用: フリー百科事典『ウィキペディア（Wikipedia）』) こんにちは、@kaa_a_zu です。私たちエンジニアは、「キャッシュ」というワードをよく口にしています。それはインフラの設計をしている時かもしれないし、表示されるコンテンツが変わらない時かもしれないし、パフォーマンスの改善をしている時かもしれません。普段何気なく使っている「キャッシュ」とは一体何なのでしょうか。この記事は、そんな「(Webフロントエンドを触るエンジニアが知るべき)キャッシュ」について、どんなものがあるのかがちょっと分かったという状態になることを目的に書いています。
米Googleは3月29日（現地時間）、Webブラウザ安定版のアップデートとなる「Chrome 100」（バージョン100.0.4896.60）をWindows、Mac、Linux向けに公開したと発表した。数日かけてロールアウトしていく。 2008年9月1日に最初のβ版をリリースしてから約13年でバージョン100を迎えた。 一般ユーザー向けの新機能としては、ロゴのデザイン変更、Webアプリでのマルチディスプレイ対応、［設定］→「プライバシーとセキュリティ」の「安全確認」の改善などが追加された。 新しいロゴについてGoogleは、隣接する色の境目にあったシャドウをなくし、中心の円を大きくし、色も明るくしたと説明した。 Webアプリのマルチディスプレイ対応で、プレゼンなどで大画面でスライドを表示し、手元のPCで原稿メモを表示するような使い方ができるようになる。 バージョンが3桁になり、UA（ユ
WindowsやmacOS、Linuxなどのクロスプラットフォーム対応のデスクトップアプリ開発を容易にするフレームワークとして高い人気を持つフレームワークが「Electron」です。 ElectronはChromiumとNode.jsを用いることで、HTML/CSS/JavaScriptのWebテクノロジーによってデスクトップアプリケーションを開発できるのが最大の特徴です。 いまやElectronは、Visual Studio CodeやMicrosoft Teams、Slack、GitHub Desktop、そして最近話題のNotionなど、さまざまなアプリケーションに採用されています。 このElectronの優れた特徴を備えつつ、よりメモリ消費量が小さくファイルサイズもコンパクトで、高いセキュリティを備え、柔軟なライセンスを実現しようと開発されたのが「Tauri」です。 Tauriは、
WebAssembly製のx86仮想マシン「WebVM」が登場、Webブラウザ上でLinuxや各種コマンド、アプリがそのまま実行可能
WebAssembly製のx86仮想マシン「WebVM」が登場、Webブラウザ上でLinuxや各種コマンド、アプリがそのまま実行可能 Leaning Technologiesは、Webブラウザ上でx86バイナリをそのまま実行できるWebAsesmbly製の仮想マシン「WebVM」を発表しました（同社による紹介記事「WebVM: server-less x86 virtual machines in the browser」）。 Google ChromeやMicrosoft Edge、Firefox、Safariなどのモダンブラウザであれば、上記のURLにアクセスすることで誰でもWebブラウザ上にx86仮想マシンを走らせることが出来ます。 WebVMではx86仮想マシンの上でLinux OSのDebianがバイナリが変更なしにそのまま稼働し、さまざまなコマンドも実行可能。 Linuxアプリ
As you can see from the table above, it is easy to be confused about which products will support which Debian/Raspbian ports. Using arm6hf (Raspbian’s derivative of armhf with ARMv7-only instructions removed but floating-point instructions retained) provides us with an operating system which will run on every device we have ever manufactured, all the way back to 2011. But we’ve come to realise tha
Webに最適なメディアフォーマットを整理する - 2021
macOS 12 Montereyがリリースされました。また2021年09月にはiOS 15もリリースされています。 2020年にリリースされたiOS 14 / macOS 11ではWebPのサポートを開始し、macOS 12ではOpusのサポートを開始しました。 また最近ではGoogle Chrome、FirefoxがAVIFのサポートを開始するなど、新たなメディアフォーマットも登場しています。 そこで2021年現在、Webにおける最適なメディアフォーマットを整理しようと思います。 TL; DR 画像: WebP もしくは SVG 音声: AAC - .mp4 動画: H.264 - AAC - .mp4 もしくは VP9 - AAC - .mp4 最適とは なるべく多くのデバイスとOSとブラウザでデフォルトで使える macOS: Chrome、Firefox、Safari、Edge (
オープンソースのコミュニティに関わる人々から、なぜ Vivaldi ブラウザは完全なオープンソースではないのかと、よく訊かれます。このブログ記事で Vivaldi の立場を詳しくご説明したいと思います。 見方によっては、Vivaldi ブラウザのソースコードをオープンソースライセンスの下でリリースするのは、とても簡単なことのように思えるかもしれません。 Vivaldi は無料で提供されており、検索やパートナーとの提携で収益を得ています。そう考えると、Vivaldi の開発に役立つ可能性があるのに、なぜソースコードにアクセスできるようにしないのか？という疑問がわきますよね。 Vivaldi としては、そのような観点があることも理解していますし、Vivaldi 社内でもオープンソースやオープンソースのソフトウェアの使用を支持する人が多くいるのは事実です。この点は社内でもよく議論されています。
What's New In DevTools (Chrome 94) | Blog | Chrome for Developers
Use DevTools in your preferred language Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language! Open Settings, then select your preferred language under the Preferences > Language dropdown and reload DevTools. Preferences" width="800" height="494"> Chromium issue: 1163928 New Nest Hub devices in the Device list You can now simulate the dimensions of Ne
Cross Origin iframe からの alert/confirm/prompt 呼び出しの無効化 | blog.jxck.io
しかし、実際に M92 がリリースされてからは、この機能が壊れたことによる影響が多数報告されていたため、実装者が想定していた以上に影響はあったといえるだろう。 他のブラウザの反応 実際にロールアウトしたのが Chrome/Edge であったため、いつものように「また Google が勝手にやっている」と思う人もいるようだが、実際には他のブラウザも Positive を表明している。 Firefox: https://github.com/whatwg/html/issues/5407#issuecomment-606417807 Safari: https://github.com/whatwg/html/issues/5407#issuecomment-760574422 また、この合意が取れているため、既に仕様にもマージされている。 Add early return to JS dia
GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ「TablesNG」で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。 tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応していません。それらに対応し、不整合を修正するのが今回の取り組みです。 TablesNG Resolves 72 Chromium Bugs for Better Interoperability by Una Kravets, Aleks Totic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに TablesNGの取り組み 1. テーブルの行にposition: sticky 2. バック
Chrome 92以降のSharedArrayBuffer警告に対するZOZOTOWNが実施した調査と解決策 - ZOZO TECH BLOG
こんにちは、ZOZOTOWN部フロントエンドチームの高橋（@anaheim0894）です。 Chrome 92から「SharedArrayBuffer」の仕様が変更されます。それに伴い、ZOZOTOWNの対応方針と解決策をご紹介いたします。そもそも「SharedArrayBuffer」が何のことなのか分からず困っている方も多いかと思います。本記事で紹介するZOZOTOWNの取り組みが対応時に皆様の参考になれば幸いです。 取り組みのきっかけ 2021年3月、Google Search Consoleに以下メッセージが送られてきました。 Googleの公式アナウンスによると、「Chrome 92からはcross-origin isolation（クロスオリジン分離）が構成されていないと正常に動作しなくなる」と書かれていました。 つまりSharedArrayBufferを引き続き使うには、他サイ
Webブラウザの拡張機能を標準化へ、Apple、Google、Mozilla、マイクロソフトらがW3C WebExtensions Community発足
W3Cは、Apple、Google、Mozilla、マイクロソフトらがWebブラウザの拡張機能の標準化や仕様改善のためのグループ「WebExtensions Community Group」を発足させたことを発表しました。 #w3ccommunity Forming the WebExtensions Community Group https://t.co/WrPPsRt23M — W3C (@w3c) June 4, 2021 WebExtensions Community Groupは、「ブラウザ拡張機能に関する共通のビジョンを持ち、将来の標準化に向けて活動する」ことを目的としています。 そのなかでも特に、開発者が拡張機能を簡単に作成できるように一貫性のあるモデルと共通化された機能やAPIなどの策定、および高性能かつ高セキュリティなアーキテクチャのアウトラインを示すことに注力するとし
TechCrunch
The savvy marketers at Boston Dynamics produced two major robotics news cycles last week. The larger of the two was, naturally, the electric Atlas announcement. As I write this, the sub-40 second vide
こんにちは、One Capital の三好（@saas_penguin）です。 Product hunt で話題になったため、すでに知っている方も多いかと思いますが、今回は超高速ブラウザ「Sidekick」について紹介します。ずっと使いたいと思っていたものの、なかなかM1 Macで安定稼働してくれず・・・ようやく安定してきたので、使ってみた感想や気になるポイントを書いていきます。 昨今のブラウザ事情について 本題へ移る前にブラウザを取り巻く環境について簡単に触れておきます。デスクトップブラウザのシェア推移を見ると、10年前は Internet Explorer（以下、IE）が約50％、Firefox が30％のシェアを握るという2強状態でした。しかし、2008年に誕生した Google Chrome が Android 端末の普及とともにシェアを急拡大させます。2011年には Firefo
25 年に渡る JavaScript の歴史 | JetBrains: プロデベロッパーとチーム向けの開発ツール
SpaceX Dragon の発射により、JavaScript が宇宙へと旅立つ！Dragon 2 のフライトインターフェースは Chromium と JavaScript を使って構築された。フライトコンピューターには C++ が使用されている。 SpaceX Dragon の発射により、JavaScript が宇宙へと旅立つ！Dragon 2 のフライトインターフェースは Chromium と JavaScript を使って構築された。フライトコンピューターには C++ が使用されている。
テックカンパニーをテックカンパニーたらしめているものはなにか？技術か、人か、それともチームなのか。 連載「Technology Company Internals」では、テックカンパニーの内側で働くエンジニアに、技術に精通したエキスパートが対面で話を聞き、テックカンパニーとは何か？を探るだけでなく、テックカンパニーを目指す企業の指針となることを目指します。 様々なデバイス上で動くブラウザを開発するのが仕事です 白石: 本日はよろしくお願いします。自己紹介からお願いできますでしょうか？ 梅田: 梅田と申します。株式会社ACCESSで、webブラウザ開発事業のマネージャーを担当しています。 白石: ブラウザ開発を生業にしている、ってすごいですよね。珍しいというか。 梅田: はい、日本だと唯一…かどうかはわかりませんが、相当珍しいと思います（笑） 白石: それで上場までされているというのもすごい
Webブラウザ「Brave」を開発する米Braveは1月19日（米国時間）、P2P分散ファイルシステムプロトコルであるIPFS（InterPlanetary File System）を同ブラウザでネイティブサポートすると発表した。最新バージョンである1.19.86から利用可能。 IPFSを利用することで地理的に離れたところに分散したコンテンツの読み込みが可能になり、IPFSのP2Pプロトコルを使ったコンテンツをシームレスにブラウズできる。コンテンツの指定にはHTTPおよびHTTPSではなく「ipfs://」で始まるURIを用いる。 デスクトップ版BraveのユーザーはコンテントハッシュであるContent identifier（CID）を用いてダウンロードもできる。一度見たコンテンツはオフラインでも再視聴可能だ。 Braveは、IPFSはプライバシーとセキュリティにも有用だと主張している。
Sidekick : download fast and secure browser for work. Remove tab clutter and be more productive!
A productivity browser for focused work Sidekick makes the Internet distraction-free. It speeds up your workflow and protects against attention killers Loved by 70,000+ from companies likeManagersHeads of MarketingHeads of ProductHeads of DesignCEOsFoundersCo-foundersproduct managersUX designersengineering managersprogram managersbusiness analystsproduct marketing managersproduct designersManagers
AWS の Lambda 経由でクローリング/スクレイピングを行いたい場合、Headless Chrome (chromium) を用いることで実現できますが、更にその際、Tor を用いることで IP アドレスを秘匿化する方法について紹介したいと思います。 ※ 実装は TypeScript で行っていきます。 Tor のレイヤー化 「Tor ブラウザ」があるので勘違いされやすいですが、Tor は別に Tor ブラウザに限定されているものではなく、自分でtorコマンドを実行することで、例えば普段使っている Chrome 等の一般のブラウザも「Tor化」することができます。 torコマンドは こちら の Tor プロジェクトでバージョン管理されており、ダウンロード＆コンパイルすることで誰でも簡単に使用することができます。また、自分でコンパイルせずとも、例えば MacOS だと Homebrew
社内に古いInternet Explorer（IE）専用Webページ／アプリが残っていたり、自治体などのIEしか対応していないWebサイトへアクセスが必要であったりするせいで、いまだにIEの利用が強いられている。しかも、IEでは利用できないネットサービスが増えていて、他のWebブラウザと併用せざるを得ず、面倒だ……。 さらに、2022年6月にはブラウザとしてのIEのサポートが終了し、IEが起動できなくなるとのこと。このままでは、IE専用のWebページ／アプリを使い続けられなくなる。かといって、IE以外のブラウザでも利用できるようにサーバ側のシステムを改修するのは到底間に合わない……。 このような場合、Chromiumベースの「Microsoft Edge（以下、Edge）」への移行を検討してみるとよい。「IEモード」という、EdgeのタブでIE専用のWebページ／アプリをシームレスに表示で
Google ChromeやMicrosoft Edgeのベースであるオープンソースのウェブブラウザ「Chromium」には、アドレスバーと検索バーを一体化させた「Omnibox」という機能が搭載されていますが、そのOmniboxによってDNSのルートサーバーに大きな負荷がかかっていると、ベリサインのCSOであるMatthew Thomas氏が報告しています。 Chromium’s impact on root DNS traffic | APNIC Blog https://blog.apnic.net/2020/08/21/chromiums-impact-on-root-dns-traffic/ A Chrome feature is creating enormous load on global root DNS servers | Ars Technica https://ar
エンジニアお茶会 2020/08/19 pastak.icon @pastak この発表のゴール 現代のウェブブラウザの目指している方向性について紹介する モダンブラウザで使える最新の面白便利APIを紹介する ちゃんと仕様に入りそうなもの(Googleの力技で…も含む) （前半の各ベンダの話はpastak.icon個人の見解を含みます） 次ではない フロントエンドなんでも相談室 前提知識のコーナー "WebAPI"とは何を指すのか、標準化について ECMAScript Ecma InternationalにてECMA-262という規格番号 ほぼLiving Standardという雰囲気もあるけど、年に1回タグが付く ES2020: ECMAScript® 2020 Language Specification 最新の様子: https://tc39.es/ecma262/ Array、Nu
最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で
めっちゃダッシュするイヌさん英語で先に書いてから日本語訳しています ⇒ English version is available here. こんにちは、TAKUYAと申します。InkdropというMarkdownノートアプリを開発しています。このアプリはElectronで作っています。Electronは、NodeJSとChromium(ブラウザ)ベースでクロスプラットフォームなデスクトップアプリが開発できるフレームワークです。このフレームワークは基本的に素晴らしいです。なぜならあなたはネイティブ用のフレームワークを学ぶ必要がなく、JavaScript、HTMLとCSSでアプリが作れるからです。もしあなたがウェブデベロッパーだったら、手軽にアプリが作れるでしょう。一方で、多くの人がElectronの弱い点についても言及しています。それはアプリの起動速度が遅い傾向にある、という点です。僕のア
2020年、知っておくと便利なCSSのプロパティのまとめ
ChromiumベースのEdgeもリリースされ、最近のブラウザ状況は大きく変わってきました。知っておくと便利なCSSのプロパティを紹介します。 一昔前まではJavaScriptでないと実装できなかったもの、CSS Gridでの中央揃え、Flexboxでの中央揃え、リストのカラーを変更する方法、アイコンの横並び、タイル状の背景をいい感じに配置など、実践的なテクニックが満載です。 Uncommon CSS Properties by Ahmad Shadeed はじめに CSS Gridでの中央揃え place-itemsプロパティ Flexboxと古き良きmargin: auto; あまり知られていない::marker疑似要素 text-alignプロパティ display: inline-flex;プロパティ column-ruleプロパティ background-repeat: roun
最終フロンティアに到達したJavaScript：宇宙
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
Googleが、Webページ内の特定のテキストにリンクを張れるChrome拡張機能を公開した。Chromium版Edgeでも利用可能だ。 米Googleは6月17日（現地時間）、Chrome拡張機能「Link to Text Fragment」をChrome Web Storeで公開した。Webページ上の特定のテキストへのURLを生成できる。 拡張機能をインストールしたら、リンクしたいテキスト部分を選択し、右クリックで表示されるメニューで「Copy link to Selected Text」を選ぶ。 これでURLが生成されるので、後はメールなりメッセンジャーなりにペーストするだけだ。例えば記事の途中などにもリンクできる。リンクをクリックすると、リンク先として選ばれた部分が黄色く表示される。 長い論文で参照したい部分の覚え書きにも使えそうだ。 筆者の環境では、Chromium版Edgeでも
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chromium にコントリビュートするための周辺知識 | blog.jxck.io
WindowsのChromeやEdgeでネットにつながりにくくなる現象、一部の家庭用ルーターが原因かも？ DNSの“TCPクエリ”うまく扱えない機種も存在。ChromeのTCPクエリ送信が引き金に
Cache Storage がめちゃくちゃ肥大化する問題について調べる | ぴんくいろにっき
GitHub製コードエディター「Atom」の最終版が公開 ～8年間の開発に終止符／12月15日をもってリポジトリはアーカイブ
電子情報学特論：Chromiumのアーキテクチャを解き明かす
フロントエンドエンジニアが知るべきキャッシュを理解する
「Chrome 100」リリース 新ロゴやユーザーエージェント対策など
Electronの代替を目指す軽量なRust製フレームワーク「Tauri」、リリース候補版に到達
【西川和久の不定期コラム】 Google本家からChrome OS Flex登場！いろいろなマシンへ入れてみた
Raspberry Pi OS (64-bit) - Raspberry Pi
Vivaldi ブラウザがオープンソースでない理由 | Vivaldi Browser
Firefoxのユーザー、約3年で4600万人減……その理由を考察したレポートが海外で話題に【やじうまWatch】
HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG
生産性が爆上がりするブラウザ：Sidekick｜One Capital｜note
「Chromium開発に興味あるエンジニア探してます」ブラウザ開発の仕事ってどんな感じか聞いてみた
Braveが非中央集権Webをブラウズする「IPFS」をサポート 政府で禁じられたサイトへもアクセス可能に
【悪用厳禁】AWS Lambda で Tor を使う
Edgeの「IEモード」を、サポートが終了するIE代わりに使う方法
Google Chromeは「DNSルートサーバー」に大きな負荷をかけている、その理由とは？
【西川和久の不定期コラム】 余ったマシンで無償Chromium OSをお試し! Neverwareの「CloudReady」
面白Web API 100連発 - pastak-pub
開発体験を変える! Chrome DevTools Tips 7選 - Qiita
Electron製アプリの起動速度を1,000ミリ秒速くする方法
Webページの特定のテキストにリンクを張れるChrome拡張機能、Googleが公開
メモリ食いのGoogle Chrome、ついに消費量削減へ
