ブラウザの戻る/進むを高速に！ヤフーにおけるBFCache有効化に向けた取り組み
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、第11/12代黒帯（ヤフー内のスキル任命制度／Webフロントエンド領域）の浜田（@narirow）と、Yahoo!ニュースのエンジニアの喜楽（@gladenjoy）です。今回は、ヤフーで対応をすすめてきた、BFCacheの有効化にむけた取り組みについてお話しします。BFCacheとはそもそも何か、有効化のボトルネックには何があるか、そして調査方法などの具体的な手法などを交えてご紹介します。 ヤフーではこれまでスムーズなユーザー体験を実現するべく、高速にページを表示できるBFCache技術の検証と、BFCacheの有効化率を上げる取り組みを行ってきました。その結果、Yahoo!ニュースでの検証では、PVが+2％向上、広告
朗報！ CSS Flexboxの8年越しのバグがようやく修正されます
CSS Flexboxのこのバグに悩んだ人もいると思います。 リスト要素をFlexboxで複数列に配置し、ulにborderを適用したのに、ボーダーが全体を囲まないバグが8年越しにようやく修正されます。 左: バグ、右: 期待する表示 まずは、そのバグが確認できるデモをご覧ください。 すべてのアイテムはul内のliで実装されており、CSSでulにborder: 1px solid red;を設定しています。 しかし、ボーダーはリスト全体ではなく左端の1列のみに適用されます。このバグは現在、Chrome, Safari, Firefoxで確認できます。 参考: Issue 507397 ※上記ではEdge（non chromium version）は期待通りに表示されるとあり、Edge 115（chromium version）ではバグで表示されます。 See the Pen "flex-f
ChatGPT Google Chrome拡張機能おすすめ7選｜活用して業務効率を高めよう
AI技術の進化により、私たちの働き方も大きく進化していくと想定されています。特に注目を集めているのが、OpenAIが開発したAI文章生成モデル「ChatGPT」です。このChatGPTは、自然な文章を生成することで有名で、様々なシーンで利用が進んでいます。そんなChatGPTを手軽に使えるツールとして、Google Chromeの拡張機能があります。 今回は、ChatGPTを使ったGoogle Chromeの拡張機能おすすめ7選を紹介します。これらの拡張機能を活用することで、ウェブブラウジングの体験が一段と豊かになるでしょう。 そして、本記事では各拡張機能の特徴だけでなく、インストール方法や使い方、さらには連携可能な他のプラットフォームや注意点、問題対処方法まで詳しく解説します。これらの情報を元に、あなたのブラウジング体験を効率的に、そして楽しく進化させてみてください。
「まるでDRM」Googleが開発中のWEI APIにブラウザ開発者が猛反発
7/29、BleepingComputerは、GoogleがChromeに導入しようとしているWeb Environment Integrity（WEI）APIに対して、ブラウザ開発者たちから強い反対の声が上がっていると報じました。 ブラウザ開発者たちはこの提案を、ユーザーの自由を制限し、オープンなウェブの基本原則を損なうものだとしています。 WEIとは？ Web Environment Integrity（WEI）は、ウェブサイトがクライアント（ブラウザ）のデバイスとネットワークトラフィックの真正性を評価し、偽造や安全でないインタラクションをブロックする新しいAPI提案です。例えば、この仕組みを使って、ウェブサイトは人間かボットかを判別したり、特定のデバイスの特定のブラウザが信頼できるかどうかを判断したりすることができます。ウェブサイトは認定された「attester」からトークンを取得し
逆向きに接続する Reverse HTTP Transport の仕様 - ASnoKaze blog
『Reverse HTTP Transport』という提案仕様がIETFに提出されています。著者はMetaとNokiaの方々らです。また、HAProxyの方も同様の機能を検討しているそうです(参考URL)。 普通のProxyサーバでは、Proxyサーバからオリジンサーバにコネクション確立するのが一般的です。そのためにオリジンサーバが外部から接続を受けられるようにする必要があります。 Reverse HTTP Transportでは、逆にオリジンサーバからProxyサーバにコネクションを確立し、HTTPリクエストを受け付けるという構成になります。コネクションの確立/TLSハンドシェイクだけが逆向きで、コネクション確立された接続上で、ProxyからHTTPリクエストが送られます。 これによりオリジンサーバをインターネットに公開する必要がなくなります。 プロトコルについて この Reverse
ChatGPTの最強Chrome拡張『Sider』導入から使い方まで徹底解説！ | WEEL
今回は、Chromeの拡張機能でChatGPTが使えるようになるSiderをご紹介します！ ブラウザ上でどのページを開いてもChatGPTが使えるようになる便利なツールです。 導入方法から概要、機能までこの記事を見ればSiderの全てがわかるようにまとめました。 ぜひ、最後までご覧ください。 また、お時間がない方は、目次からまとめをクリック！ ぱっと概要を理解できるようにしています！ なお弊社では、生成AIツール開発についての無料相談を承っています。こちらからお気軽にご相談ください。 →無料相談で話を聞いてみる Sider（ChatGPT Sidebar）とは？ Siderは、ChatGPTがブラウザ上どこでも使えるようになるChromeの拡張機能です。 ※アプリ版もあるのですが、今回ご紹介するブラウザ版とは全く違う機能なので、機会があれば別の記事で解説します！ Siderは、Chrome
Web標準に新たなステータス「Baseline」が登場。変化し続けるWeb標準のうちWeb開発者が安心して使える機能群を示す。MDNドキュメントなどで表示開始
Web標準に新たなステータス「Baseline」が登場。変化し続けるWeb標準のうちWeb開発者が安心して使える機能群を示す。MDNドキュメントなどで表示開始 Web開発者の開発体験を改善することなどを目的としたW3CのWebDX Community Groupは、つねに新たな機能などが登場し変化し続けるWeb標準のうち、Web開発者が安心して使える機能群を示す新たなステータス「Baseline」を発表しました（Googleによる発表、MDNによる発表）。 現在、Web標準はリビングスタンダードとしてつねにアップデートが行われており、ChromeやFirefox、Safariなどの主要なWebブラウザは、Web標準で新たに策定される機能をそれぞれ実装し、最新版に反映させています。 そのため、それぞれのWebブラウザがWeb標準のどの機能をいつ頃実装し、最新版に反映させるのかは時期が異なりま
次世代のCSSグラデーションツールが美しすぎる！ すべての新しい色空間を完全にサポート -CSS HD Gradients
すべての新しい色空間を完全にサポートする新しいグラデーションツールを紹介します。UIデザイン向けの美しいグラデーションのプリセットも豊富に用意されており、カスタマイズも簡単です。 CSSの色指定に何を使用していますか？ #FFFFFFのようなHEX値だったり、whiteのようなキーワードだったり、rgb(255, 255, 255)のようなRGB色空間の人も多いと思います。最近では色相・彩度・輝度で指定できるhsl(0, 0%, 100%)もすべてのブラウザにサポートされており、増えてきたと思います。 さらに今までよりも広色域のP3カラーに対応したoklch()もChrome 111, Safari 15.4でサポートされ、注目されています。 CSS HD Gradients CSS HD Gradientsは、Google ChromeのデベロッパーであるAdam Argyle氏（@ar
ブラウザ上で3Dキャラクターと会話できる「ChatVRM」をオープンソースで公開しました - pixiv inside
こんにちは、VRoid部のkeshigomuです。 普段は主にVRoid Hubのフロントエンドエンジニアとして、3Dキャラクターを表示するビューワーの開発に携わっています。また@pixiv/three-vrmという、Web上で3Dモデルを使ったコンテンツを開発するためのOSSライブラリの運用も行っています。 今回、ブラウザで簡単に3Dキャラクターと会話できる技術デモ「ChatVRM」とそのコードをオープンソースで公開しました。 「ChatVRM」は、テキスト・口頭で話しかけた言葉にキャラクターがフルボイスで回答してくれる「キャラクターと会話できる」デモです。WEBブラウザ上で動作でき、3Dキャラクターのインポート・切り替え、キャラクターに併せて声を調整することもできます。 (2023/07/10追記) 読み上げ音声の生成に使用していたKoeiro APIの提供終了に伴い、以前のデモとコー
CSSのこの新機能、すごく楽しみ！ UI要素にさまざまなアニメーションを簡単に実装できるようになります
朗報です！！！ 今までJavaScriptや複雑なCSSを使用しないと実装できなかったアニメーションが、簡単なCSSだけで実装できるようなります！ たとえば現在のCSSではtransitionでdisplayは機能しませんが、CSSの新機能を使用すると、下記のようなCSSで表示・非表示のアニメーションを実装できるようになります。 このCSSの新機能により、UI要素にさまざまなアニメーションを簡単に実装できるようになります。 Google ChromeのデベロッパーUna氏（@Una）によると、transitionプロパティでdisplayが使用できるようになり、要素の表示・非表示、ポップオーバーなどのアニメーションが簡単なCSSで実装できるようになるとのことです。 👀 An early look at transitioning to and from display: none in
Webブラウザ上で3D/2Dモデルをぬるぬる動かせる「Babylon.js 6」正式版に。レンダリング性能が最大50倍、WASM化した物理演算エンジン搭載、液体のレンダリングも
マイクロソフトは、Webブラウザ上で2Dや3Dモデルの高速なレンダリングなどを可能にするオープンソースのJavaScriptライブラリ「Babylon.js」の最新版「Babylon.js 6.0」正式版をリリースしました。 We are thrilled to officially announce the release of Babylon.js 6.0! The web just got a WHOLE lot more exciting!https://t.co/q0JVsQaTSd#babylonJS6 #gamedev #indiedev #webdev #Metaverse #3D #webgl #gamedevelopment #IndieGameDev #webdeveloper pic.twitter.com/owV6YLp1zc — Babylon.js (@bab
【JavaScript】Qiitaトレンドのプロフィール画像をマウスオーバーした時にプロフィールをツールチップで表示する - Qiita
【概要】 Qiitaトレンドのプロフィール画像をマウスオーバーした時に、マウスオーバーしたユーザのプロフィールをツールチップで表示します。 開発者ツールのコンソールでコードを実行することで実現します(Chromeの拡張機能にした方がよかったかも)。 【環境】 Google Chrome 【コード実行時の注意点】 Qiitaトレンドのプロフィール画像領域や、ツールチップに表示するユーザ画面のプロフィール領域はCSSクラス名で取得しています。 そのCSSクラス名はおそらく自動生成されているため、今後下記コード内で定義しているクラス名を変更する必要がある可能性があります。 【コード】 準備用 const importScriptArray = [ "https://code.jquery.com/jquery-3.6.4.min.js", "https://unpkg.com/@popperjs
CSSのネストがついにブラウザで使用できるようになった！ 基礎知識、便利な使い方を詳しく解説
CSSのネストがついに、Chrome 112, Edge 112にサポートされました。 追記: 2023/8/29リリース予定のFirefox 117でもサポート予定。 ネストはSassなどのCSSプリプロセッサですでに使用している人も多いと思いますが、CSSのネストは仕様が少し異なります。とは言え、CSSでネストが使用できるようになるのは、嬉しいことですね。 CSSのネストの基礎知識、便利な使い方を紹介します。ネストの使い方を学べるデモページもあるので、勉強するのにぴったりです。 CSS Nesting by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 CSSのネストとは CSSのネストの基礎知識 CSSのネストのパーサーについて CSSのネストを検出する方法 デベロッパーツールでCSSのネストをデバッグする方法 CS
ChromeのV8 JavaScriptエンジンのゼロデイ脆弱性に対する緊急アップデートをGoogleが実施、既に攻撃に悪用されまくっているため
Googleが2023年4月14日に、Google Chromeのゼロデイ脆弱(ぜいじゃく)性に関する緊急アップデートをリリースしました。Googleはこのアップデートにより、深刻度が「高」と設定された脆弱性の「CVE-2023-2033」に対応しました。 Chrome Releases: Stable Channel Update for Desktop https://chromereleases.googleblog.com/2023/04/stable-channel-update-for-desktop_14.html Google Chrome emergency update fixes first zero-day of 2023 https://www.bleepingcomputer.com/news/security/google-chrome-emergency-u
チャットAIをブラウザのWebGPUだけで実行でき日本語も使用できる「Web LLM」、実際に試してみる方法はこんな感じ
ChatGPTやBardなど、大規模言語モデルをベースに人間と会話できる対話型AIが登場していますが、これらの対話型AIを動作させるには膨大な演算リソースが求められ、通常はAIが動作するサーバーにアクセスする形で対話を可能にしています。Metaが開発した大規模言語モデルのLLaMAをファインチューニングしたVicuna-7Bをベースにした対話型AI「Web LLM」は、ブラウザ上でのGPU演算を可能にするWebGPUを使うことで、サーバーにアクセスすることなくブラウザ上で対話型AIにアクセスできるのが特徴。日本語にも対応しているとのことなので、実際にWeb LLMと日本語で対話してみました。 GitHub - mlc-ai/web-llm: Bringing large-language models and chat to web browsers. Everything runs in
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WindowsのChromeやEdgeでネットにつながりにくくなる現象、一部の家庭用ルーターが原因かも？ DNSの“TCPクエリ”うまく扱えない機種も存在。ChromeのTCPクエリ送信が引き金に
コピペで簡単！ CSSのみで、フォームの入力時にフロートする入力欄のラベルを実装するテクニック
秀丸エディタ、Webコンテンツ表示機能「ブラウザ枠」が実装。ChatGPTとの利用も
OpenAI提携で値上げしたBing検索API。Webブラウザ「Brave」が利用停止表明
【特集】 Edgeがいつの間にか高機能に？これはChromeより便利かも
