この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11
ContentsHTMLCSSWeb APIsJavaScriptWeb AppsMediaPrivacySecurityWKWebViewSafari Web ExtensionsWeb InspectorFeedbackAnd More With over 70 additions to WebKit, Safari 15.4 is packed with new web technologies, updates, and fixes. We’ve assembled a huge release as part of our commitment to web developers, and the people who use the web. This is the first big WebKit release of 2022, and we’re just getting
経緯Chrome/Firefoxのはてブ機能拡張は配布されているが、Mac版Safariの機能拡張は数年前から配布されていない。 Safariに乗り換える際の個人的な障壁であったが、Chrome版機能拡張をSafari向けに変換して利用する事ができたので、メモ代わりに記しておく。 必要なものmacOS Big Sur以降XCodeはてブ拡張をインストール済のChrome インストール手順1. Chromeのアドレスバーに「chrome://extensions/」と打ち込み、機能拡張の画面を表示する。 2. 同画面右上の「デベロッパー モード」をONにする。 3. 同画面内の「はてなブックマーク」の欄に表示されている「ID：xxxxxx」を次手順で使用する。 4. FinderでChromeのはてブ機能拡張がインストールされているフォルダが存在する事を確認する。 /Users/(ユーザー名
Appleの新しいクロスサイト計測規制：Private Click Measurement（PCM）の内容と運用型広告に与える影響 「アンチトラッキング」の潮流電通デジタルでソリューション開発のプロマネをしている三谷です。Ads Data HubをはじめとしたData Clean Roomを活用した分析パッケージの開発であったり、ADとCRMデータを連携した新しい広告運用”X-Stack”や広告の因果推論評価を行う新指標”True Lift Model®”の考案など、広告主の事業成果を向上させるための新規ソリューションの開発を担当しています。 今回は10年に1度の大変動であるアンチトラッキングの実情と電通デジタルの対応についてご紹介します。 近年、Cookieやモバイル広告ID（ADID/IDFA）の利用に制限がかかる、というニュースが多く報じられています。デジタルマーケティング業界内では
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Firefox / Safari 先日Appleが、Safariは幾つかのWebAPIに対応しないと公言しました。 日本語記事も幾つか出ています。 しかし、どのサイトも対応しないAPIの一覧を並べてはいるのですが、それぞれのAPIが具体的にどのようなものなのかを記載した記事が見当たらなかったので、以下はそれらについて調べてみたものです。 対応しない理由 a threat to user privacy、すなわち、あくまでブラウザフィンガープリントなどの手段によって個人を特定・追跡できてしまうからという理由です。 セキュリティ的にも問題な
Web developers today are shipping faster. Web apps are becoming increasingly sophisticated and run across all devices — our phones, tablets and desktops — each running a different browser engine. This increase in velocity and targets puts immense pressure on the testing process: automated cross-browser testing has become more important than ever. Automated end-to-end tests can be incredibly powerf
This blog post covers several enhancements to Intelligent Tracking Prevention (ITP) in iOS and iPadOS 13.4 and Safari 13.1 on macOS to address our latest discoveries in the industry around tracking. Cookies for cross-site resources are now blocked by default across the board. This is a significant improvement for privacy since it removes any sense of exceptions or “a little bit of cross-site track
TestCafe とは？ TestCafe とは、Developer Express Inc. というアメリカのシステム開発会社が開発している E2E テストツールです。 A node.js tool to automate end-to-end web testing | TestCafe 同社はもともと TestCafe Studio という IDE（E2E テストケースオーサリングツール）を商用として提供していましたが、2016 年に TestCafe Studio のコア部分を OSS として提供するようになりました。今回ご紹介するのは、このコア部分についてです。 シリーズ一覧 概要説明 と Hello World 👈 この記事 ベーシック認証とユーザーロール（アカウント認証） よりプログラマブルな作りにする 関心の分離・メンテナブルなテストを書くためのベストプラクティス 大まか
[レベル: 上級] 多くのサイトが PWA に対応するようになってきました。 しかし、PWA がネイティブアプリの完全な置き換えになるには克服しなければならない問題がまだ残されているように思えます。 Stefan Dorresteijn 氏が dev.to で、PWA が現状で抱えている大きな問題を 3 つ指摘しました。 どんな問題なのかを、追加情報を交えてこの記事で完結にまとめます。 Apple の PWA サポート状況 Android の Chrome では、ネイティブアプリに引けを取らないほどに PWA の機能が充実してきました。 これに対し、iOS の Safari は PWA のほとんどの機能をサポートできていません。 こちらは、Google の Thomas Steiner 氏が作成した、PWA のサポート状況を検出するツールを使って iOS 版 Safari をチェックした状
Note: Read about past updates to this technology in other blog posts about Intelligent Tracking Prevention, and the Storage Access API. The beta releases of iOS 12.2 and Safari 12.1 on macOS High Sierra and Mojave include an updated version of Intelligent Tracking Prevention (ITP). For purposes of developer communication, we’ll refer to it as ITP 2.1. With this update we further reduce trackers’ a
Update at 2018.10.31 This bug has been fixed in iOS 12.1, have a good day~ I found a problem with Array's value state in the newly released iOS 12 Safari, for example, code like this: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>iOS 12 Safari bugs</title> <script type="text/jav
はじめに ITP（Inteligent Tracking Prevention）はブラウザ（Safari）上のユーザ行動の追跡を抑止する機能で、2017年に発表された最初のバージョンであるITP1.0は広告業界を震撼させました。 そして、2018年6月4日に新しいバージョンであるITP2.0が発表されました。ITP2.0ではさらに厳しいユーザ行動の追跡抑止機能が追加されています。 ITP2.0の主な機能として、 トラッカー（ユーザ行動の追跡者）により付与された3rd Party Cookieの即時的な排除 Storage Access APIを利用したCookieの管理 ファーストパーティバウンストラッカーに対する保護 リファラヘッダからドメイン以外部分の排除 があります。*1 今回はこれらの機能について、トラッキング環境を擬似的に構築し、動作検証を行なっていきます。 検証環境 macOS
[レベル: 上級] PWAをサポートしていないブラウザでもホーム画面アイコンを追加できる仕組みとして、PWACompat を Google は公開しました。 PWACompat を構成すると、Web App Manifest を解釈しないブラウザために、関連する meta タグや link 要素を自動的に挿入してくれます。 PWACompat で iOS 版 Safari にもホーム画面アイコンを追加 iOS 版 Safari は Service Worker のサポートに着手しましたが、完成にはまだほど遠い状態です。 たとえば、Web App Manifest（マニフェスト ファイル）によるホーム画面アイコン追加の機能をまだサポートできていません。 iOS にホーム画面アイコンを追加させようとしたら、link rel="apple-touch-icon" のようなタグを別途追加する必要が
PWAで表示速度が2倍に！ スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット＆デメリット ネイティブアプリに近い体験を簡単に提供できるとして注目を集めている「PWA」。実際に導入し、表示速度が2倍になったという日経新聞電子版の開発者に「PWA」のメリットとデメリットを伺いました。 PWA（Progressive Web Apps）は本当に「アリ」なのか――？ ネイティブアプリの開発にはWebとは異なる専門知識が必要であり、またAndroidやiOSなどOSごとでも異なるため、リソースが膨大にかかるという課題があります。そこで昨今は、XamarinやReact Nativeなどのクロスプラットフォーム開発ツールを使い、ネイティブアプリやWebの開発を一本化しようという動きが活発になっています。 一方で、ネイティブアプリに近い体験を簡単に提供できるとして注目を集めているのが、Goog
指定したページが一般的なブラウザやデバイスでどのように表示されるか、1クリックで確認できるChromeの機能拡張を紹介します。 WindowsからSafari, iOSの確認、macOSからIE, Edge, Androidの確認もできます。 Multi-browser Screenshots Multi-browser Screenshotsで対応しているブラウザ・デバイスは、下記の通り。 ※2018年5月現在 それぞれ、WindowsからでもmacOSからでも利用できます。 Edge 15.0(Windows 10) IE 11.0(Windows 10) Chrome 50.0(Windows 10) Firefox 45.0(Windows 10) Safari 9.1(OS X El Capitan) IE 10.0(Windows 7) IE 9.0(Windows 7) IE
Safari 11.1Safari 11.1 ships with iOS 11.3 and macOS 10.13.4. It is also available for macOS 10.12.6 and 10.11.6. Highlights of Safari 11.1Service Workers. Implement background scripts for offline web applications and faster web pages. Payment Request. Provide a consistent user payment experience in Safari using a standards-based API. Security Improvements. Improved protection against memory corru
JavaScriptでは他のJSファイルを読み込みES Modulesという仕組みがあり、Chrome、Edge、Safariなどブラウザのサポートが拡大しつつあります（参考記事「JavaScriptでモジュールを使う時代に！ ブラウザで覚えるES Modules入門」）。 さらに、モジュールをimport()を使って「関数のように」呼び出すためのdynamic importという仕組みが2020年に公開されるECMAScriptの仕様で導入されます（tc39/proposal-dynamic-import）。Google Chrome、Firefox、Safariではモジュールのdynamic importに対応しており、ブラウザでその挙動を確認できます。 dynamic importのメリットは、任意のタイミングでモジュールを読み込めること。たとえば、ページの初期表示に必要なJavaS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
