View Transition API によるスムーズな遷移 | View Transitions | Chrome for Developers
View Transition API を使用すると、ウェブサイト上のさまざまなビュー間でシームレスな視覚的な遷移を作成できます。これにより、サイトがマルチページ アプリケーション（MPA）として構築されているか、シングルページ アプリケーション（SPA）として構築されているかにかかわらず、サイトをナビゲートする際に、ユーザーが視覚的に引き付けられるユーザー エクスペリエンスを提供できます。 ビュー遷移を使用する一般的な状況は次のとおりです。 商品リストページのサムネイル画像は、商品の詳細ページで商品のフルサイズ画像に切り替わります。 ページを移動しても固定されたままのナビゲーション バー。 フィルタするたびにアイテムの位置が移動するグリッド。 View Transition API で作成された遷移。デモサイトをお試しください。Chrome 111 以降が必要です。 ビューの遷移を実装す
Navigator: share() メソッド - Web API | MDN
ウェブ共有 APINavigatorインスタンスプロパティactiveVRDisplays 非標準 非推奨; appCodeName 非推奨; appName 非推奨; appVersion 非推奨; bluetooth Experimental buildID 非標準 clipboardconnectioncontacts Experimental cookieEnabledcredentialsdeviceMemorydevicePosture Experimental doNotTrack 非標準 非推奨; geolocationglobalPrivacyControl Experimental gpu Experimental hardwareConcurrencyhid Experimental ink Experimental keyboard Experimental lan
Preparing for the end of third-party cookies | Privacy Sandbox | Google for Developers
Stay organized with collections Save and categorize content based on your preferences. If your site uses third-party cookies, it's time to take action as we approach their deprecation. To facilitate testing, Chrome has restricted third-party cookies for 1% of users from January 4th, 2024. Chrome plans to ramp up third-party cookie restrictions to 100% of users from Q3 2024, subject to addressing a
<script>: スクリプト要素 - HTML: ハイパーテキストマークアップ言語 | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback <script> は HTML の要素で、実行できるコードやデータを埋め込むために使用します。ふつうは JavaScript のコードの埋め込みや参照に使用されます。 <script> 要素は WebGL の GLSL shader プログラミング言語、 JSON 等の他の言語にも使用することがで
Window.requestAnimationFrame() - Web API | MDN
WindowインスタンスプロパティcachesclosedcookieStorecredentialless Experimental crossOriginIsolatedcryptocustomElementsdevicePixelRatiodocumentdocumentPictureInPicture Experimental event 非推奨; external 非推奨; fence Experimental frameElementframesfullScreen 非標準 historyindexedDBinnerHeightinnerWidthisSecureContextlaunchQueue Experimental lengthlocalStoragelocationlocationbarmenubarmozInnerScreenX 非標準 mozInnerScree
MediaStream 収録 API - Web API | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback MediaStream 収録 API (MediaStream Recording API) は、単に Media Recording API または MediaRecorder API と呼ばれることもありますが、メディアキャプチャとストリーム API および WebRTC API と密接に関
ウェブ音声 API - Web API | MDN
ウェブ音声 API (Web Speech API) で、音声データをウェブアプリに組み入れることができます。 ウェブ音声 API は、SpeechSynthesis （音声合成、Text-to-Speech）と SpeechRecognition （非同期音声認識、Asynchronous Speech Recognition）の 2 つの部分から成り立っています。 ウェブ音声 API は、ウェブアプリが音声データを扱えるようにします。 この API には 2 つの構成要素があります。 音声認識は SpeechRecognition インターフェイス経由でアクセスされます。これは、音声入力（通常は端末の既定の音声認識サービス）から音声の文脈を認識し、適切に応答する機能を提供します。 通常は、インターフェイスのコンストラクターを使用して新しい SpeechRecognition オブジェク
MDN Plus
//////////// //////////// //////////// //////////// //////////// //////////// //////////// ++++++ ++++++ ++++++ ++++++ ++++++ ++++++ ++++++{{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} ../../ ../../ ../../ ../../ ../../ ../../ ../../<></><></><></><></><></><></><></><></><></><></><></><></><></><></><></><></> AI HelpGet real-time assis
JavaScript で parseInt / parseFloat を使わない方が良い理由
となるのが原因です。parseInt というのは、文字列を解析して整数値（int）を返すグローバル関数であり、引数をまず文字列に変換する仕様となっております。その段階で 0.0000005 が "5e-7" という文字列に変換されてしまい、その文字列の先頭の 5 だけが数字として解析されてしまったため、結果として parseInt(0.0000005) === 5 となりました。 なぜ String(0.000005) === "0.000005" に、String(0.0000005) === "5e-7" になるのかについては、この記事の最後で余談として説明します。 整数化には Math.trunc を使おう このように、parseInt は文字列を引数にすることを前提にしているため、速度の面でも可読性の面でも「小数値を整数値に変換したい」という場合に使うのは望ましくありません。最も望
イベントリファレンス | MDN
イベントは、コードの実行に影響を与える可能性のある「興味深い変化」をコードに通知するために発行されます。これは、マウス操作やウィンドウのサイズ変更などのユーザー操作や、環境の変化 (バッテリー残量の低下や OS のメディアイベントなど)、その他の原因によって発行されます。 それぞれのイベントは、 Event インターフェイスに基づいたオブジェクトで表現され、何が起こったかについての情報を提供するために、追加のカスタムフィールドや関数を持つことがあります。各イベントのドキュメントには、関連するイベントインターフェイスへのリンクや、その他の関連情報を含む表が (上部付近に) あります。イベントの種類の一覧は、イベント > Event を基にしたインターフェイスにあります。 この記事では、興味のありそうな主なイベントの種類 (アニメーション、クリップボード、ワーカーなど) と、それらの種類のイベ
History - Web API | MDN
History インターフェイスは何もプロパティを継承していません。 length 読取専用 現在読み込まれているページを含むセッション履歴の要素数を表す Integer を返します。たとえば、新しいタブで読み込まれたページのこのプロパティは 1 を返します。 scrollRestoration ウェブアプリケーションが履歴の操作で既定のスクロール位置の復元を明示的に設定できるようにします。このプロパティは auto または manual を指定することができます。 state 読取専用 履歴スタックの最上位にある状態を表す any の値を返します。これは popstate イベントを待たずに状態を確認する方法です。 History インターフェイスは何もメソッドを継承していません。 back() これは非同期メソッドであり、ユーザーがブラウザーの戻るボタンをクリックしたときと同じく、セッ
ScrollTrigger - Let your page react to scroll changes
Trigger classes based on scroll position The most basic usage of ScrollTrigger is to trigger classes based on the current scroll position. E.g. when an element enters the viewport, fade it in. You can add custom offsets per element, or set offsets on the viewport (e.g. always trigger after the element reaches 20% of the viewport) Execute callbacks on entering / leaving the viewport When using the
Polyfill.io
What is Polyfill.io? It's a service which accepts a request for a set of browser features and returns only the polyfills that are needed by the requesting browser. Why do I need it? There are lots of differing browsers and browser versions in use throughout the world, each one has a slightly different set of features to the rest. This can make developing for browsers a difficult task. The latest v
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - cozmo/jsQR: A pure javascript QR code reading library. This library takes in raw images and will locate, extract and parse any QR code found within.
画面キャプチャ API - Web API | MDN
Curves | D3 by Observable
Chart.js
GitHub - dsktschy/viewport-extra: A liblary to enable to set min-width and max-width to viewport.
GitHub - yubinbango/yubinbango
GSAP | Docs & Learning
