2022.12.05 コラム CookieレスGTMTreasureDataクッキーレステックコラム 【テックコラム】2022年の Cookie 関連トピックスの振り返りと現状整理 ● はじめに こんにちは！DataCurrent ジョージです。 デジタルマーケティングに欠かせない Cookie ですが、クッキーレスという言葉が生まれて数年経ち、Cookieに依存しないソリューションも増えてきました。 一方で、Google Chrome の サードパーティ Cookie 廃止は度重なる延期となり、2022年12月時点でもCookie はデジタルマーケティングにとって有効な技術要素であり続けています。

実際に試した 実際にPLUGを試してみた。アプリストアから「PLUG」アプリをインストールし、手順に従うだけで簡単にSafari機能拡張を導入できた。 筆者は最近、デイキャンプがマイブームで新しいバーベキューコンロを探していた。そこで、Colemanの商品ページを開いたところ、商品ページ上でPLUGの「最安」マークが表示された。 また、「最安」アイコンをクリックすると、他のサイトでの販売価格も一覧できた。まだPLUGを信じ切っていないので他の価格比較サイトも参照してみたが、確かに最安圏のようで、安心して購入できた。 担当者によると、現在開催中のブラックフライデーのようなセールでも「一定のキャッシュはある」ものの、基本的に価格は即時反映されるという。 また、PLUGを有効にしていると、1100以上のECサイトで使えるキャッシュバッククーポンが届くという。筆者にも早速Ankerのクーポンが届い

9月17日、AppleはSafari 18.0をリリースした。iOS 18、iPadOS 18、macOS Sequoia、そしてvisionOS 2と共に、53の新しいウェブプラットフォーム機能、25の非推奨機能、そして209の修正が加えられた。このリリースでは、特にCSS、HTML、JavaScriptの新機能に注目すべき点が多く、Webエンジニアにとっては重要なアップデートである。 Safari 18.0における新機能 1. Distraction Control Safari 18では「Distraction Control」が導入された。この機能により、ウェブ閲覧中に表示されるサインインバナーやクッキー通知、ニュースレターのサインアップオーバーレイなど、煩わしい要素を非表示にできる。Distraction ControlはiOS 18、iPadOS 18、macOS Sequoi

5月15日、AppleはSafariの次期バージョン17.5に関するブログを公開した。 これは2024年における3度目の大規模アップデートであり、7つの新機能と22のバグ修正が含まれている。 以下に要点をまとめて紹介する。 新機能 CSS テキストラップのバランス機能 テキストの折り返しを調整するための新しいtext-wrap: balanceプロパティが追加された。この機能により、テキスト行が均等に配置される。 text-wrap: balance; このプロパティは、特定のブラウザでのアルゴリズムの違いによるテキスト折り返しの違いを考慮する必要がある。また、Safariでは無制限の行数をバランスするが、Chromiumブラウザは6行以下、Firefoxは10行以下をバランスする。 テキストラップのショートハンドとロングハンド text-wrapプロパティは実際にはtext-wrap-s

4月11日、AppleはSafari Technology Preview Release 192を発表した。このリリースは、認証、CSS、編集、JavaScript、メディア、レンダリング、Web API、Web Extensions、およびWeb Inspectorに関連する多数の改善と新機能が導入されている。 4月11日、AppleはSafari Technology Preview Release 192を発表した。このリリースは、認証、CSS、編集、JavaScript、メディア、レンダリング、Web API、Web Extensions、およびWeb Inspectorに関連する多数の改善と新機能が導入されている。 特に注目すべき新機能には、View Transitions APIのサポート、メディアソース拡張（MSE）のワーカーでのサポート、JavaScriptのObject

はじめに iOS の Mobile Safari にて、モーダルを開くためのボタンをクリックしてモーダルが表示された瞬間にキーボードを表示させるには一工夫が必要だったのでその話をしたいと思います。 実現するために行ったこと モーダルを開いた瞬間(マウントされた瞬間)にモーダル内に設置している input に focus させればキーボードを表示できると思っていましたが表示されませんでした。 詳しく見てみると focus を呼んだ時に focus はしている模様。 そこで調べてみると、キーボードを表示させるにはどうやらユーザーのアクションが必要ということが判明しました。 解決策 下記のようにボタンを クリックした時(ユーザーのアクション) に行うモーダルを開く処理の後にモーダル内の input に focus させることで解決できました。 let button = document.getE

本スクラップは自動フォーカスによる仮想キーボードの表示を推奨するものではありません。あくまでも仮想キーボードを表示するための情報提供のみを目的としております。 時折、仮想キーボードを表示させるためにプログラムでフォーカスを制御するケースがあります。しかし、iOS のブラウザ（e.g. Mobile Safari）はプログラムで制御されたフォーカス時に仮想キーボードを表示しません。本挙動はバグではなく開発者（Apple）が意図的に行なっているかと思います。Apple は WebKit のバグチケット「Autofocus on text input does not show keyboard」に次のように言及しています。 We (Apple) like the current behavior and do not want programmatic focus to bring up th

ContentsHTMLCSSImages and videoJavaScriptWeb APIWeb AppsWebGLPrivacyWeb InspectorFixes for Interop 2023 and moreUpdating to Safari 17.2Feedback Web technology is constantly moving forward, with both big new features and small subtle adjustments. Nowadays, web developers expect web browsers to update multiple times a year, instead of the once or twice a year typical of the late 2000s — or the once

CSSの@counter-styleがSafari 17でも対応⁠⁠⁠⁠、すべてのブラウザでサポートへ iOSやiPadOSが18日にリリースされ、同OS向けにSafariが更新されてSafari 17.0もあわせてリリースされた。なお、macOSのSafari 17.0は現在パブリックベータ版であり、9月26日にリリースされる予定となっている。 Safari 17.0の新機能の詳細は公式ブログを参照してもらうとして、ここでは、このバージョンのSafariからCSSの@counter-styleに標準で対応したことを取り上げたい。 @counter-styleを使うことで、順序付き箇条書きの連番（マーカー）や章タイトルの見出しなどで出てくる章番号などのカウンタースタイルが単純ではない場合の指定を設定できるようになる。 そして、擬似要素で使われるcontentプロパティで指定できるcount

iPhone の Safari がプッシュ通知を正式にサポートしました。 iOS/iPadOS 16.4 で Web Push Apple は先日、iOS および iPadOS の最新バージョンとなる 16.4 をリリースしました。 このアップデートにはいくつもの新機能や更新、セキュリティ修正が含まれますが、最も注目に値するのは、Safari 16.4 での Web Push（プッシュ通知）のサポートです。 Web Push を有効にすると、ユーザーがブラウザでサイトを訪問していないときでも通知を送信できます。 プッシュ通知は、更新記事や最新ニュース、重要なお知らせなどをユーザーに即座に伝えるために非常に有効なツールです。 スマートフォンの多くのネイティブアプリが実装しています。 Web Push は、ネイティブアプリではなく、（ブラウザで閲覧する）ウェブサイトでプッシュ通知を実現する機能

Webブラウザ上でNode.js環境を実現する「WebContainer」、iOS/iPadOS版Safariに対応。iPhone/iPadでWeb開発環境が起動 WebAssemblyを用いてWebブラウザ上でNode.js環境を実現する「WebContainer」などを提供するStackBlitzは、WebContainerがiOS/iPadOS 16.4以降のSafariに対応したことを明らかにしました。 iPhoneやiPad上のSafari上で、Node.jsをベースとしたWeb開発環境が起動することになります。 Big news: WebContainers are now supported on Safari, iOS and iPadOS!https://t.co/6SfOUDn4z2 pic.twitter.com/9PykipdNxJ — StackBlitz (@s

はじめに 2023年3月27日に iOS 16.4 が公開され、iPhoneのSafariでもPush通知が利用できるようになりました。 Web Push機能を実装したPWAが iOS 16.4 Safariでどのように動作するか検証したのでまとめます。（動作検証端末：iPhone 13 mini） 目次 Push通知の動作確認 バックグラウンドやスリープ時の動作確認 Push通知にURLを指定した場合の動作確認 まとめ プッシュ通知の動作確認 Web Push機能を持つPWAを用意して、次のようなパターンで動作を検証します。 Safari（ブラウザ上）でPush通知が動作するか ホーム画面に追加したPWAでPush通知が動作するか Push通知の動作確認用のWebページは次に示すような実装をしました。 ホーム画面にインストールする実装 manifest.jsonファイルを作成する Ser

Today marks the release of iOS and iPadOS 16.4 beta 1, and with it comes support for Web Push and other features for Home Screen web apps. Today also brings the first beta of Safari 16.4. It’s a huge release, packed with over 135 features in WebKit — including RegExp lookbehind assertions, Import Maps, OffscreenCanvas, Media Queries Range Syntax, @property, font-size-adjust, Declarative Shadow DOM

（2023/08/29） 全ブラウザでネストに対応したので記事を更新しました。 本日2023/08/29、全ブラウザでCSSでネスト（入れ子）ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。

アドレスバーのテーマカラー変更、meta name=”theme-color”をノッチ付きスマホで試してみた メタ、テーマカラーとは theme-colorとはAndroidのChromeやGoogleのiOSアプリで、アドレスバーの色を設定することができるhtmlメタデータ要素です。 iOSではSafari15 からテーマカラーをサポートし、iPhoneでもテーマカラーが反映されるようになりました。 theme-color の値は要素の name 属性において、ユーザーエージェントがページやその周辺のユーザーインターフェイスの表示をカスタマイズするために使用すべき推奨色を示します。指定された場合、 content 属性には有効な CSS の が含まれていなければなりません。 引用元：MDN Web Docs ブラウザーの互換性 対応するブラウザは多くありませんが、Google公式のSEO

iOS SafariやAndroid Chromeの画面の高さいっぱいにヒーローイメージを表示するという表現は、よく見かけます。 高さをいっぱいに広げるのに100vhを使うと、不要なスクロールが発生し、意図通りに表示されません。 この問題を解決するために、特殊なCSSを使ったりJSを使ったりと、開発の現場では多くの苦労がありました。 本日（2022/11/30）リリースされたGoogle Chrome 108で対応したsvhを使えば、手軽に画面いっぱいのヒーローイメージを作れます。 Safari・Firefoxでは対応済み、Chromeと中身が同じEdgeは12/1週リリースの108で対応するので、全ブラウザで使える時代が来ます。もちろん、iOS・Androidも対応です。 本記事では、svhの使い方、同様に使えるようになったdvhやsvmaxなどの違い、従来の手法のデメリットをデモを交え

11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。 サイズ変更動作の内容とサイズ変更の仕組み、Chrome 108のリリースまでに何を準備しておけばよいのかを紹介します。 特に、position: fixed;を使用している要素やビューポート相対単位に依存している要素は配置がずれてしまう可能性があるので、対応が必要です。 Prepare for viewport resize behavior changes coming to Chrome on Android by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに レイアウトビューポートと