Google、Chromeブラウザに3つのAI機能 タブの自動グループ化など
米Googleは1月23日（現地時間）、WindowsおよびMac版のChromeブラウザに3つのAI機能を追加すると発表した。同日配信開始のバージョン121.0.6167.85/86で、米国から順次「実験的な生成AI機能を導入」していくとしている。 本稿執筆現在、利用できるのはGoogleアカウントにログインした米国在住の18歳以上となっている。利用できるようになったら、Chromeの右上の縦［…］→［設定］に「Experimental AI」（日本語版での項目名はまだ不明）という選択肢が表示されるようになる。 AIタブオーガナイザーでタブの自動グループ化 Chromeには2020年からタブグループ化機能がある。現在はユーザーが手動で関連するタブをグループ化する必要があるが、タブオーガナイザーを使えば、Chromeがタブの内容に基づいてグループを提案し、作成する。 タブを右クリックして「
HTTPが全てを飲み込む（前編）～HTTPの2層構造と、HTTP Semanticsとは何か？
Webを構成する重要な要素の1つであるHTTPは、その最新仕様で2層構造となり、バージョンに関係なく使えるSemanticsと、特徴の異なる通信仕様を定めたHTTP/1.1、2、3に分割されました。 さらに現在では、HTTPの上にあらためてUDPやIP、イーサネットなどのプロトコルを実装する提案が行われており、まさにHTTPは通信の全てを飲み込む勢いで進化しつつあります。 こうしたHTTPの最新動向の解説が、大手CDNベンダでエッジクラウドなども展開するFastlyが2023年11月8日開催したイベント「Yamagoya 2023」で同社シニアプリンシパルエンジニアの奥一穂氏が行ったセッション「HTTPが全てを飲み込む」にて行われました。 本記事ではこのセッションをダイジェストで紹介していきます。記事は以下の3つに分かれています。 HTTPが全てを飲み込む（前編）～HTTPの2層構造と、H
グーグルが選ぶ、2023年のお気に入り「Chrome」拡張機能--AI関連が多数
自分に合ったブラウザー拡張機能を見つけるのはなかなか難しい。興味のあるものを検索して見つけるだけでなく、実際に追加して使い勝手をひとつずつ試してみる必要があるからだ。 Googleが先頃発表した、2023年のお気に入り「Chrome」拡張機能をチェックすれば、そうした手間が少し省けるかもしれない。 Googleはまず、「Get tasks done faster」（タスクを迅速に終える）というカテゴリーで同社お気に入りの5つの拡張機能を挙げている。これらはいずれも人工知能（AI）を活用したものだ。 「Scribe」はAIを用いてユーザーのワークフローを文書化することで、職場でのさまざまなプロセスの訓練を実施するためのガイド作成を支援してくれる。「DeepL翻訳」はウェブページの内容を即座にさまざまな言語に翻訳する拡張機能だ。「QuillBot」は、文章作成時（電子メールの作成や返信）におけ
CSSのmargin: auto;の仕組みをおさらい、最近の実装で使用される中央配置やナビゲーションのテクニック
margin: auto;は非常に便利なCSSで、使用することも多いと思います。 そのmargin: auto;の仕組みをおさらいし、最近の実装で使用される中央配置のテクニックを紹介します。また、ナビゲーションでタイトル以外のリンクを右寄せに配置させるなど、便利なテクニックが満載です。 All About 'margin: auto' in CSS: Centering and More by Ritika Agrawal 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 「auto」とはどういう意味ですか？ 「利用可能なスペースを占める」とはどういう意味ですか？ ブロックレベル要素でautoを使用する 絶対要素でautoを使用して中央配置 CSS GridとFlexboxでautoを使用して中央配置 Flexboxとa
CSSのみで簡単に実装できる！ マグネットのようにくっついて追従するホバーエフェクトを実装するテクニック
CSSの:has疑似クラスとCSS Anchor Positioningを使用して、:hoverにマグネットのように追従するホバーエフェクトを実装するテクニックを紹介します。 一昔前なら、JavaScriptなどを使用し...記事の続きを読む
WebAssemblyのガベージコレクションが正式機能に、最新版のChrome 119で。Firefoxも今月リリースのFirefox 120で正式機能になる見通し
WebAssemblyのガベージコレクションが正式機能に、最新版のChrome 119で。Firefoxも今月リリースのFirefox 120で正式機能になる見通し 2023年2月にリリースされたChrome 111から試験的実装となっていたChromeにおけるWebAssemblyのガベージコレクション機能（以下、WasmGC）が、10月31日にリリースされたChrome 119で正式機能になったことが明らかになりました。 Firefoxでも今月（2023年11月）21日リリース予定のFirefox 120においてWasmGCが正式機能になる見通しです。 WasmGCを利用することで、ガベージコレクション機能が言語のランタイムに含まれているJavaなどプログラミング言語をWebAssemblyで実装することが容易になるため、今後WebAssembly上でさまざまなプログラミング言語の実装
ChromeがHTTPSに優先アクセスする307リダイレクトをHSTS関係なくやるようになった - Code Day's Night
2023年11月1日の時点の情報です。 先にまとめを書きます。興味があれば詳細もどうぞ。 まとめ 10月16日のChrome 118からHTTPS ファーストモードがデフォルトでオンに 条件によってHTTPS Upgradeが働いてhttpのサイトにアクセスするとhttpsに優先的にアクセスさせる挙動（Chromeが内部で擬似的に307リダイレクトを返してhttpsに誘導） HSTSサイトではないhttpサイトでもこの挙動となるケースがある httpsにアクセスできない場合やレスポンスに3秒以上かかる場合はフォールバックでhttpに誘導（Chromeが内部で擬似的に307リダイレクトを返して元のhttpに誘導） 詳細 条件 307で擬似的にリダイレクトする条件は、いくつかあるようです。把握しているものを列挙します。 HSTSサイト（HSTSヘッダ指定、Preloadリストのサイト） HST
CSSでライトモードとダークモードのスタイルを簡単に定義できる、新しい関数「light-dark()」が便利すぎる！
CSS Color Module Level 5に追加された新しい関数light-dark()を使用すると、ライトモードとダークモードのスタイルを簡単に定義できるようになります。 下記のようにlight-dark(#333, #ccc)と記述すると、テキストのカラーにライトモードでは#333が、ダークモードでは#cccが適用されます。 Easy Light-Dark Mode Color Switching with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライトモードまたはダークモードへの対応 light-dark()関数によるライトモードとダークモードの対応 <color>値以外への対応は？ light-dark()関数のブラウザサポート light-dark
Google Chrome、全ユーザーに対しHTTPからHTTPSへ自動変更
Bleeping Computerは10月30日(米国時間)、「Google Chrome now auto-upgrades to secure connections for all users」において、GoogleがすべてのChromeユーザーに対し、HTTPリクエストを自動的にHTTPSリクエストに変更する「HTTPSアップグレード」を開始したと報じた。Googleはこれまでにも同機能を限定的に展開していたが、2023年10月16日に安定版のすべてのユーザーが対象になったという。 Google Chrome now auto-upgrades to secure connections for all users 歴史的に、ブラウザはHTTPSをサポートするサイトにおいて安全ではないHTTPリクエストを行うことがある。Google Chromeでは、次のような条件でHTTPリソー
いざという時に使える7つのHTML&CSS Tips集vol.2 | BUILD Journal
いざという時のために覚えておくと便利なHTML＆CSS Tips集の第2弾です。何かで困った時に読み返してみてください。何かでお役にたてると思います。 グラデーションを使ったテキストアニメーション See the Pen Text gradient animation by BUILD (@buildstd) on CodePen. テキストカラーにグラデーションを使ったアニメーションを施す方法。 テキスト要素の背景にanimation プロパティでアニメーションさせたグラデーションを設定し、background-clip: text で背景グラデションをテキストのかたちに切り抜くイメージです。color: rgba(0 0 0 / 0) でテキストカラーを透明にしないと背景グラデーションが表示されないので指定します。 CSSp { color: rgba(0 0 0 / 0); -web
マイクロソフト、Webアプリのテスト自動化サービス「Microsoft Playwright Testing」プレビュー公開。クロスブラウザ／クロスプラットフォームのテストを並列実行
マイクロソフトは、Webアプリケーションのテスト自動化ライブラリ「Playwright」を用いた、Microsoft Azure上のテスト自動化サービス「Microsoft Playwright Testing」のプレビュー公開を発表しました。 Microsoft Playwright Testingに使われている「Playwright」は、マイクロソフトが中心となってオープンソースで開発しているWebアプリケーション向けテスト自動化ライブラリです。対応環境が幅広く柔軟で、精度の高いテストを特長としています。 具体的には、Chrome、Edge、Firefox、Safariの主要なWebブラウザのすべてを対象にしたテスト自動化が可能で、ヘッドレス、ヘッドありのいずれにも対応。モバイルエミュレーションを用いたAndroid版Google ChromeとMobile Safariのテストも、実
ブラウザ上のJavaScriptでの非同期処理を、今までどのように実現してきたか 「コールバック地獄」なども乗り越えてきた歴史
Go、Python、Kotlin、Rust、TypeScript の5つの言語について「並列処理、並行処理の手法」というテーマに絞り解説する「並列処理をGo/Rust/Kotlin/Python/JSで解説！思想の違いを体感しよう」。JavaScript編では橘氏が登壇。JavaScriptが疑似的な非同期処理をどう実現しているのかと、JavaScriptの非同期処理の歴史について紹介します。 橘氏の自己紹介 橘ゆう氏（以下、橘）：よろしくお願いします。風邪でめちゃくちゃ顔が死んでいるので、カメラオフでいきます。橘です。今日は「JSの非同期処理パターン Promise、async/awaitを理解する」というテーマについて話していきたいと思います。 簡単な自己紹介ですが、もともとDeNAにいて事業統合でそのままGOに移り、今は森下さん（森下篤氏）と同じチームで、主にサーバーサイドやMLOp
CSSを初期化しないとどうなるか？ - Qiita
なぜ知りたいと思ったか？ marginやpaddingを指定していないのに、要素と要素の間に余白ができているのが気になった 余白を指定していないのに、初めから余白が出来ているのはなぜか？ ①ブラウザのデフォルトCSSを参照しているので、初めから余白が出来ている 下のWebページでは見出しタグしか設定していないが、margin-topとmargin-bottomが設定されている ②ブラウザによってスタイルが違う 「Google Chrome」や「Safari」等のブラウザ毎にスタイルの表示方法が異なるので、CSSを初期化して設定し直す 以下のURLを確認すると、ブラウザによってスタイルが微妙に違う https://gray-code.com/html_css/make-the-website-vol8/ リセットCSSの機能とは？ デフォルトCSSを使ってリセットすれば、どのブラウザでも同じ
なぜHTTP/3は急速に普及していったのか、その利点とは？
2022年にインターネット技術の標準を策定する団体のIETFがHTTPの新しいバージョンとして「HTTP/3」を標準化して以降、HTTP/3の利用はウェブの世界で急速に普及していきました。HTTP/3にどのような利点があり、なぜ急速に普及したのかについてウェブに関するエキスパートエンジニアのロビン・マークスさんがAPNICのブログに投稿しています。 Why HTTP/3 is eating the world | APNIC Blog https://blog.apnic.net/2023/09/25/why-http-3-is-eating-the-world/ GoogleやMetaなどの大企業がHTTP/3を採用しているため、GIGAZINEやAPNICのブログ記事の読み込みも含めて多くの通信でHTTP/3が利用されています。通信に利用されているHTTPのバージョンごとの推移を調査し
古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset
モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！ A (more) Modern CSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) Modern CSS Resetの前のバージョンも解説しています。 2023年、現在の環境に適したリセットCSSのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説
CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます
先日の記事（Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ）で触れましたがCCSS Gridのsubgrid値が、grid-template-columnsとgrid-template-rowsの2つで設定できるようになりました。Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できます。 CSSのサブグリッド（subgrid）を使用すると、下記のように子要素（画像・見出し・テキスト）の水平グリッドも簡単に揃えることができます。 CSSのサブグリッド（subgrid）で子要素のグリッドを揃える CSSのサブグリッド（subgrid）のサポートブラウザ デモページの解説 CSSのサブグリッド（subgrid）で子要素のグリッドを揃える 3つのカードがあり、それぞれに画像・見出し・テキストがあります。subgrid以前は、
知っておくと便利！ CSSだけで要素がスクロールできるかどうかを検出する方法
CSSだけで要素がスクロールできるかどうかを検出する方法を紹介します。 先日紹介したスクロール駆動アニメーション（Scroll-Driven Animations）はスクロール可能なオーバーフローがある場合にのみアクティブになるため、要素がスクロール可能かも検出することができます。 Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSで要素がスクロールできるかどうかを検出する アクティブと非アクティブなスクロール駆動アニメーション CSSの変数を追加して、スクロール検出機能を作成 実装でより使いやすくする 実装例 はじめに スクロール駆動ア
CSSはこんなにも進化していたのか！ CSSのかなり高度なテクニック -Expert CSS: The CPU Hack
当ブログの記事でも、JavaScriptで実装していたのがCSSで実装できるようになりました、と今までにいくつか紹介してきましたが、今回紹介するのはそれらとはかなり異なるCSSのかなり高度なテクニックです。 CSSでCPUのようにデータを継続的に解析し、状態を再評価します。簡単に言うと、スクリーンの高さや幅を取得したり、マウスの座標を取得したり、さらにはブロック崩しなどのゲームもCSSのみで実装できます。 もう私が知っているCSSをはるかに超えたCSSです。 Expert CSS: The CPU Hack br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSのエキスパート: The CPU Hack 5つの観測可能性 The CPU Hackの始まり The CPU Hack 終
CSSアニメーションの実装がこれで簡単に！ Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ
先週リリースされたChrome 117でサポートされた、CSSの6つの新しい機能とプロパティを紹介します。 今までのCSSでは不可能だったことやJavaScriptを使用しないとできなかったことが、数行のCSSで実装できるようになります。たとえば、アニメーションで変化する前のスタイルを設定したり、最上位レイヤーとの間で要素をアニメーションさせたり、本文テキストのレイアウトを自動で最適化したりできます。 Chrome 117 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @starting-styleルール overlayプロパティ transition-behaviorプロパティ CSS Gridのsubgrid値 text-wrap: pretty; contain
Safari 17.0がリリース、プロファイル機能のほか、多数のAPIや要素のサポートが追加される
AppleがiOS 17・iPadOS 17・macOS Ventura・macOS Monterey・macOS Sonoma向けにSafari 17.0を2023年9月26日にリリース予定です。リリースに先立って、Safari 17.0のレンダリングエンジンであるWebKitのアップデート内容をAppleのWebKit開発陣がブログでまとめています。 WebKit Features in Safari 17.0 | WebKit https://webkit.org/blog/14445/webkit-features-in-safari-17-0/ ◆HTMLのアップデート ・「search」要素をサポート 検索機能は多くのウェブサイトにとって重要な機能となっていることを受けて、新たに「search」要素が追加されました。従来は、全てのユーザーが検索機能を適切に利用できるようにするに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
