みなさまお元気ですか 暑さも少し落ち着いてきて、ようやく外に出てもいいかなという気になってきました。季節の変わり目体調には気をつけていきたいですね。 実は、一ヶ月くらい前に Linux PC を自作して Mac から移行しました。そのときの考え、その後の感想を残しておきます。 また、学んだことや作業のログを細かく残しておきたいと思います。（どこかの誰かが不安に思ったときに同じ失敗や疑問を経験した人がいて安心してもらえたら嬉しい） Ubuntu のインストール画面 (ベストオープンソースと開発しよう！) 目次 Mac をやめるきっかけ、経緯 Ubuntu に移行して一ヶ月の感想 おまけ1: どのような PC になったか おまけ2: 事前に学んだこと おまけ3: PC の組み立て おまけ4: Ubuntu のセットアップ 加筆/修正 指摘のあった誤字を修正 NVEnc について誤った内容があっ
Seleniumの独自実装が元となって2018年にはW3C勧告として標準化されました。[1] 言葉の使い方が非常にややこしいのですが、ここでいうW3CのWebDriverはChrome Driver, geckodriverといった具体的な実装ではなく、ブラウザを自動化するためのAPIとプロトコルを規定したものを指しています。 Selenium4を例にとるとWebDriver型のツールは次の流れで動作しています。 Driverに対してクライアントから自動化コマンドを送る Driverが実際のブラウザ操作に変換し、ブラウザを自動操作 Architecture of Selenium WebDriver この方式はW3Cの標準が存在しクロスブラウザ対応が容易な点でメリットがあります。一方で仕組み上flakyになりやすかったり、websocketを使った実装に比べて低速であるというデメリットがあ
こんにちは、yebis0942です。 先日、@basemachina/bm-view-previewというツールをnpmで公開しました。ベースマキナのビュー機能のソースコードをローカル環境で編集しながら、Next.jsのnpm run devのようにライブプレビューで動作を確認できるツールです。 ライブプレビューはPlaywrightによってコントロールされたChromiumで表示しています。PlaywrightをE2Eテストや自動化以外の用途で使うのは珍しい事例かと思いますので、その背景と実装の裏側についてご紹介します。 ビュー機能とは ローカル環境で開発したい bm-view-previewの内部構成 ライブラリとしてのPlaywright ブラウザを人の手で操作できるようにする ウィンドウを表示する ウィンドウのリサイズに対応する ダイアログを自動で閉じない できなかったこと アプリ
Storybook 8.3 のリリーつについて 先日 Storybook 8.3 がリリースされました。 このリリースでの目玉機能は、なんといっても、待望の Vitest 対応ではないでしょうか。 以下は、7月末に一部公開されていたスクリーンキャスト。 とはいえ、何故か大々的に告知されていなかったり、Changelog には以下のようにあるのですが ⚡️ First-class Vitest integration to run stories as component tests 🔼 Next.js-Vite framework for Vitest compatibility and better DX 🗜️ Further reduced bundle size for a smaller install footprint 🌐 Experimental Story globa
前提知識 これから書くことがナンノコッチャわかる自信がない方は、Ubuntu Weeky Recipe 第717回を読んでください。 2年以上前の記事ですが、現状もあまり違いはありません。snap版Firefoxは現在はネイティブWaylandで動作するようにはなりました。すばらしいですね。 概要 前提知識にもあるように、ChromiumはデフォルトでXwaylandで動作します。この状態でスケールをいじると文字がぼやけます。これはどちらかといえばXwayland側の制限です。 ChromiumのツールキットであるところのOzoneはWaylandにも対応していますが、そうすると今度は日本語入力に問題が発生します。ただしこれはGNOME（正確にはウィンドウマネージャーのMutter）マターの話で、KDE Plasmaでは特に問題ありません。これは単純にGNOMEではtext-input-v
PR TIMESフロントエンドのCI パイプラインを改善して、CI 処理時間とBillable Time を50%を削減した話 | PR TIMES 開発者ブログ
ここんにちはPR TIMES開発本部のインターンの Chanoknan です。 PR TIMESについてフロントエンドのCI パイプラインを改善についてお話しします。 PR TIMESでは、Reactで書かれたすべてのフロントエンドのコードのコードはMonorepo として管理しています。 そのMonorepoのCI パイプラインは、システム全体のLint、Type Check、Test、Buildを行うようにCIパイプラインが設定されており、これにはかなりの時間がかかり、GitHub ActionsのBillable Timeにも影響を与えます。これを緩和するため、CI処理時間を減らすためのいくつかの戦略を実施しています。詳細については、以下の記事を参照してください。 改善できる点を特定する この作業に取り組む前、私はCIパイプラインやGitHub Actionsについて詳しくありません
Chromeを使っている人も多いとは思いますが、ブラウザに関してはそれ以外の選択肢もあります。中でも私の一番のおすすめはFirefoxです。 ChromeからFirefoxに乗り換えるべき理由まず知っておきたいのは、Chromeに代わる選択肢として人気のあるブラウザの中にはChromiumベースのものがある、ということです。Chromiumはオープンソースのブラウザエンジンですが、開発元はGoogleです。 Google Chromeに関して大きな変更が発表されれば、Brave、Opera、Microsoft Edgeといった、Chromiumベースの人気ブラウザにも影響があることを覚悟しておきましょう。 一方、FirefoxはChromiumを採用せず、Geckoという独自のブラウザエンジンを使っています。つまり、Chromeがまもなく実施予定の、広告ブロッカーや拡張機能を妨害するような
WebAssembly を使ったサーバレス開発の基礎と実践 (ServerlessDays Tokyo 2024 配布用資料) - Qiita
WebAssembly を使ったサーバレス開発の基礎と実践 (ServerlessDays Tokyo 2024 配布用資料)WebAssemblyfastlyサーバレスCompute@EdgeFastlyCompute 用語解説 WebAssembly スタックベースの仮想マシン用のバイナリ命令フォーマット しばしば拡張子が .wasm であるバイナリファイルのことを指す それ自体は実行ファイルではなく、Wasmランタイムに読み込ませて動作する ランタイムの例：主要なブラウザ、Wasmtime など WebAssembly が使われているケース ブラウザ上: Figma, Photoshop, Unity, Google Meet etc ブラウザ外(Wasi): エッジコンピューティング, コンテナ, IoT etc 参考リンク https://www.w3.org/groups/wg
Chrome“一強”、Webの進化は停滞した？「ブラウザの母」が語る、閉塞感を打破する鍵【フォーカス】 レバテックラボ（レバテックLAB）
TOPフォーカスChrome“一強”、Webの進化は停滞した？「ブラウザの母」が語る、閉塞感を打破する鍵【フォーカス】 一般社団法人 WebDINO Japan 代表理事 瀧田 佐登子 国内大手IT企業でUNIX・インターネット事業に携わった後、米 Netscape 社でブラウザ製品の国際化・日本語化に従事。その後、 Netscape のソースコードを引き継ぐかたちで誕生したオープンソースブラウザ Firefox のリリースを機に、米 Mozilla 財団 （ Mozilla Foundation ）が設立されたのを受け、その日本支部として、2004年に Mozilla Japan を設立。代表理事として、 Mozilla の製品・技術の普及のみならず、Web標準技術やオープンソースの推進、Webの新たな可能性の探求や人材育成などにも取り組む。2017年7月より、社名を一般社団法人 Web
Intro HTML の <dialog> 要素と、 popover 属性、および関連する様々な仕様が標準化され、実装が進められている。 Open UI を中心に進められているこれらの改善は、多くのサイトで共通したユースケースがありながら、長らくミッシングピースとなっていた重要な機能だ。 もし今、同等のユースケースを自前で実装しているのであれば、適切な仕様を用いた実装に刷新することで、従来はほぼ不可能だった UX を提供できるようになる。 今回から、数回の連載形式で、これらの仕様がどのように標準化され、我々開発者はこれをどのように使っていくべきなのかについて解説する。 showModalDialog Modal や Dialog と言われる UI の歴史は Web においても古く、ブラウザでは IE4 くらいのころに独自実装された window.showModalDialog() が最初に
さまざまな脆弱(ぜいじゃく)性やエクスプロイトについて研究するMicrosoftセキュリティレスポンスセンターが、北朝鮮のサイバー攻撃集団「Citrine Sleet(UNC4736)」がブラウザエンジンであるChromiumの脆弱性「CVE-2024-7971」を悪用してリモートコード実行のゼロデイエクスプロイトを行ったと報告しています。Citrine Sleetは仮想通貨を盗む目的で金融機関などの組織を標的にしていたとみられています。 North Korean threat actor Citrine Sleet exploiting Chromium zero-day | Microsoft Security Blog https://www.microsoft.com/en-us/security/blog/2024/08/30/north-korean-threat-actor-
ネットサーフィンをする上で欠かせないのがWebブラウザなのですが、これらは非常に数多く存在しています。 現在ではGoogle Chromeが一強という状態ではあるのですが、知名度では劣っていても使い勝手の面ではより優れているブラウザは無数に存在しています。 そこで、この記事では筆者が触ったことのあるブラウザを批評していきたいと思います。 Chrome系ブラウザの批評まとめ Google Chrome Microsoft Edge Opera Vivaldi Sleipnir Brave SRWare Iron Firefox系ブラウザ批評まとめ Firefox Waterfox Basilisk Pale Moon Lunascape Orion Floorp Chrome系ブラウザの批評まとめ 現在のWebブラウザの多くはChromeに採用されているレンダリングエンジンであるBlinkを
Previous slideNext slideToggle fullscreenOpen presenter view Open UIによるWeb UI標準化への アプローチ ゆめみ×LayerX×サイボウズ3社合同フロントエンドカンファレンス北海道2024後夜祭＠東京 saku / @sakupi01 saku Web Frontend Engineer @Cybozu 24卒// / > 𝕏 @sakupi01 ブラウザネイティブUIの進化へ: Open UIによるWeb UI標準化への アプローチ Available in EN 1. Open UIとは Open UIの概要 W3C Community Groupの一つ 一般的なUIパターンを体系化して汎用的なUIコンポーネントやコントロールを提案、その技術を標準化する提案に取り組んでいる 独自UIを作るにはどうHTML, CS
ユーザー（手書き入力）を認識する | Web Platform | Chrome for Developers
手書き入力認識 API とは何ですか。 Handwriting Recognition API を使用すると、ユーザーの手書き文字（インク）をテキストに変換できます。 一部のオペレーティング システムには以前からこのような API が搭載されています。この新機能により、ウェブアプリで この機能を使用しますコンバージョンはユーザーのデバイスで直接行われ、 オフライン モードで起動できます。サードパーティのライブラリやサービスを追加する必要はありません。 この API は、いわゆる「オンライン」ほぼリアルタイムの認識ですつまり、 手書き入力をキャプチャして分析することで、ユーザーが手書き入力を できます。「オフライン」とは対照的に、光学式文字認識（OCR）などの手順を用います。 最終製品のみがわかっているため オンラインアルゴリズムは 個々のインク ストロークの時間的シーケンスや圧力などの追加
はじめに 本記事では中間証明書が正しく設定されていないWebサーバーへのリクエスト時に、各アプリケーションがどのような動作をするかについて調査した結果をまとめます。最初に前提知識や調査に至った理由を書き、その後に調査結果を述べます。 前提知識 本記事を読むにあたって簡単なSSL/TLSの基本的な知識が必要です。 サーバー証明書／中間CA証明書／ルート証明書の違いとは？ サーバー側ですべき設定 WebサイトをSSL化するためには、サーバー側がサーバー証明書と中間証明書を設定する必要があります。しかし、Webサーバーで中間証明書を設定する場合、Webサーバーソフトによっては中間証明書を設定する項目がない場合があります。例えば"Nginx"には中間証明書を直接指定するディレクティブが用意されていないため、サーバ証明書と中間証明書を結合したものを"ssl_certificate"で指定します。"A
9月3日、海外のテックメディアThe Registerが「Zen Browser is a no-Google zone that offers tiling nirvana」という題した記事を公開した。 この記事では、Zen Browserという新しいウェブブラウザの特徴や、その進化について詳しく紹介されている。 Zen Browserは、タイル配置やワークスペース機能などを取り入れ、ウェブブラウジングを近代化するために開発された新たなブラウザである。 その最大の特徴はFirefoxベースであり、Googleのコードを一切使用していない ことだ。近年登場したブラウザは、Googleが開発したChromiumブラウザをベースにしていることがほとんどで、Firefox由来の新たなブラウザは非常に珍しい。 現在は開発の初期段階（α版）にあるが、非常に活発に開発が行われており、速いペースでバージ
What's new in DevTools, Chrome 129 | Blog | Chrome for Developers
Recorder supports export to Puppeteer for Firefox As part of WebDriver BiDi support, the Recorder panel can now export recordings to Puppeteer for Firefox. With Puppeteer's support of Firefox, you can now record user flows using the Chrome DevTools Recorder panel, export them, and run them against both Firefox and Chrome. For more information, see WebDriver BiDi - The future of cross-browser autom
4GBのRAMを搭載する「Raspberry Pi 5」よりも10ドル安い2GBモデルが発売されたことを受けて、予想通り、2GBのRAMで十分なのだろうか、という疑問の声が上がっている。 ほかのほとんどのことと同様、それは用途次第だ。 筆者は新しい2GBのRaspberry Pi 5と4GBモデルおよび8GBモデルの比較テストを実施した。RAMの容量、そして、2GBモデルが新しいD0プロセッサーステッピングを使用していることを除けば、これら3つのモデルのハードウェアに違いはない。 最初のテストでは、大きな違いは確認できなかった。3台とも起動時間は約22秒で、コールドブートでの再起動時のRAM使用量もほぼ同じだった。具体的には、2GBモデルのRAM使用量は約630MBと最も多かったが、4GBモデルと8GBモデルはどちらも570MB前後だった。 バンドルされているさまざまなアプリの読み込み時間
This document explains the technical details behind Chrome accessibility code by starting at a high level and progressively adding more levels of detail. Please read the accessibility overview first. Accessibility for a simple (non-browser) applicationAs described in the overview, every platform has its own accessibility APIs that are used by both assistive technology and sometimes by automation s
Progressive Web Applications (PWA)Progressive Web Applications (PWAs) offer the reach and accessibility of web applications combined with the features and user experience of native mobile apps. With Next.js, you can create PWAs that provide a seamless, app-like experience across all platforms without the need for multiple codebases or app store approvals. PWAs allow you to: Deploy updates instantl
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mac やめて Linux PC を自作した - IT戦記
次世代のブラウザテスト自動化プロトコルWeb Driver BiDi
Playwrightでライブプレビューツールを実装する - ベースマキナ エンジニアブログ
Storybook 8.3 で導入された Vitest 対応を React と Next.js で試す
Chromium+GNOME+Waylandで日本語入力が可能に
ChromeからFirefoxに乗り換えた理由とその方法 | ライフハッカー・ジャパン
Dialog と Popover #1 | blog.jxck.io
AR/VRヘッドセット用Webブラウザー「Wolvic」の「Chromium」バージョンがv1.0に到達／「Firefox Reality」の後継プロジェクト。視線追跡ナビゲーションにも対応
北朝鮮のサイバー攻撃集団がChromiumの脆弱性を悪用して仮想通貨を盗んだと判明、脆弱性は修正済み
Windowsパソコン向けブラウザ批評まとめ 2024年度版 - 格安ガジェットブログ
Open UIによるWeb UI標準化へのアプローチ
中間証明書に対する対応が各アプリケーションで異なる話 | さくらのナレッジ
革新的なUIを備えた新たなWebブラウザ「Zen」登場 — 非Chromiumブラウザに新たな選択肢
「Raspberry Pi 5 2GB」を試す--どれだけの負荷に耐えられるかを4/8GBモデルと比較
Chromium Docs - How Chrome Accessibility Works
Configuring: Progressive Web Applications (PWA) | Next.js