[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita
2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。 View Transitions APIとは View Transitions APIは、画面遷移をなめらかに行うことができる機能です。 この機能を使うと、以下の動画で紹介されているように、ページ遷移にアニメーションをつけることができます。 まずはView Transitions APIの特徴から紹介したいと思います。 特徴1：異なるDOM要素間でアニメーションできる アニメーション前後のDOM構造が異なっていても、アニメーションを行うことが可能です。 例えば、<div>がアニメーションで変化しつつ<img>要素になる、といったアニメーションが可能です。 特徴2：アニメーションがCSSで自由自在 アニメー
![[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/40f0bdd895644cfec9e8497e08ce9c0883edb8d0/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSlMlRTMlODElQUElRTMlODElOTclNUQlMjAlRTMlODMlOTElRTMlODMlQUYlRTMlODMlQkMlRTMlODIlQTIlRTMlODMlODMlRTMlODMlOTclRTMlODElOTclRTMlODElOUZWaWV3JTIwVHJhbnNpdGlvbnMlMjBBUEklRTMlODElQTdNUEElRTMlODIlOTJTUEElRTMlODElQkYlRTMlODElOUYlRTMlODElODQlRTMlODElQUIlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWFhYTFiMTIzMDhkZDMyYmMzOTg1Zjg5MjVhYWZiOWI4%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBhY2Nlc3MzMTUxZnEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWMzODc4MWE1MWNmYzRiZGJlNTcyYzdjM2RkZDMxNDE0%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D3626912c51af4270ad5c67dd51388c1e)
highlight.js
192 languages and 496 themesAutomatic language detectionWorks with any HTML markupZero dependenciesCompatible with any JS frameworkSupports Node.js and DenoCurrent release: 11.9.0 #!/bin/bash ###### CONFIG ACCEPTED_HOSTS="/root/.hag_accepted.conf" BE_VERBOSE=false if [ "$UID" -ne 0 ] then echo "Superuser rights required" exit 2 fi genApacheConf(){ echo -e "# Host ${HOME_DIR}$1/$2 :" } echo '"quote
HTML5 Drag and Drop API を使用する | Articles | web.dev
HTML5 Drag and Drop API を使用する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 HTML5 Drag and Drop API を使用すると、ページ上のほぼすべての要素をドラッグ可能にすることができます。この投稿では、ドラッグ&ドロップの基本について説明します。 ドラッグ可能なコンテンツを作成する ほとんどのブラウザでは、テキスト選択、画像、リンクはデフォルトでドラッグ可能です。たとえば、ウェブページ上でリンクをドラッグすると、タイトルと URL が記載された小さなボックスが表示されます。このボックスをアドレスバーやデスクトップにドロップして、ショートカットを作成したり、リンクに移動したりできます。他のタイプのコンテンツをドラッグ可能にするには、HTML5 Drag and Drop API を使用する必要があります。 オブジェ
【HTML】ドラッグ＆ドロップについて復習する【標準API】 - Qiita
HTML ドラッグ＆ドロップ API とは？ HTML ドラッグ & ドロップインターフェイスにより、アプリケーションはブラウザーでドラッグ＆ドロップ機能を使用することができます。ユーザーはマウスでドラッグ可能な要素を選択し、その要素をドロップ可能な要素へドラッグし、マウスボタンを離すことでドロップすることができます。ドラッグ操作の間、ドラッグ可能な要素の半透明の表示がマウスポインターに続きます。 引用：HTML ドラッグ＆ドロップ API - Web API _ MDN 実装してみる まずはプレーンなHTMLとcssのみで実装してみる。 JavaScriptによる実装は何も無いので、この状態ではまだ要素をドラッグできるだけである。 See the Pen lesson1 by naoki-funawatari (@naoki-funawatari) on CodePen. ドラッグされる
Beacon送信の信頼性を向上させるためのfetchLater APIという提案
fetchLater APIは提案・策定中のものです。本記事で紹介した内容は時間経過とともに変更される可能性があります。 最新の情報は https://github.com/WICG/pending-beacon を参照ください。 fetchLater APIとは fetchLater APIは現在提案・策定が進められているAPIです。このAPIはユーザがページを離れたときにデータ（以下Beacon）を送信する際の信頼性（reliability）の向上を目的として提案されています。初期にはPendingBeacon APIという名で提案されていました。 fetchLater APIはChrome 120でDev Trial（Origin Trialが120 ~ 125）となっており、試せるようになりました。 fetchLater API - Chrome Platform Status f
Leaflet — an open-source JavaScript library for interactive maps
an open-source JavaScript library for mobile-friendly interactive maps Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of JS, it has all the mapping features most developers ever need. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can b
なんとなく CORS がわかる...はもう終わりにする。 - Qiita
Access to XMLHttpRequest at 'http://localhost:8081' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is ther
Chrome 111 の View Transitions API でリッチなページ間トランジションを実現する
Chrome 111 は CSS の色関数 や 三角関数の追加 など、目を引く更新が多いですが、中でも View Transitions API は、Web アプリの UX 向上という観点で、高いポテンシャルを秘めた API です。 この記事では、この View Transitions API について、実装例・実用例を交えて概説します。 View Transitions API とは View Transitions API は、『画面の更新前後の異なる DOM 要素間のトランジションを、簡素な記述で実現』 する API です。 PC および Android の Chrome 111 以上、または Edge 111 以上 で使用できます。 つまりどういうこと？ モバイルのネイティブ App には、以下のように、 『ページ遷移が発生したとき、同じ要素がページをまたいで移動する』 ような、リ
Intersection Observer API の使い方
Intersection Observer API の使い方 Intersection Observer API は特定の領域を監視して指定した要素がその領域に入ったかどうかを検知してくれる JavaScript の API です。 例えば、スクロールして要素が画面上に現れた時にアニメーションを開始したり、スクロールスパイ（要素が表示されている位置に対応するリンクをハイライトする）などの機能を比較的簡単に実装できます。 スクロールを検出する方法とは異なり、パフォーマンス的にも優れていて、主なモダンブラウザで利用することができます。can i use IntersectionObserver IE など古いブラウザに対応するには polyfill が必要です。 その他の Observer のページ ResizeObserver の使い方 MutationObserver の使い方 Inter
Timers Promises API が最高 - Panda Noir
名前から既にワクワクするこのAPIは、なんとPromiseを返すsetTimeout、setInterval関数を提供しています！最高です… というわけで今回はそれの紹介です。 基本的な使い方 await setTimeout(1000) ←これができるんです！素晴らしくないですか？？ top-level await や for-awaitと組み合わせるとこんな感じで書けます import { setTimeout } from 'timers/promises'; console.log('start'); await setTimeout(1000); // これでいける！！ console.log('1s passed'); import { setInterval } from 'timers/promises'; console.log('start'); for await (
Webの技術だけで作るQRコードリーダー - Qiita
この記事はPWA Advent Calendar 2019の1日目の記事です。 以前、PWA Night vol.9 で、Web技術だけで作るQRコードリーダーという内容で紹介したのですが、当日は時間の問題で概要程度だったのでもう少し技術的な詳細を書きます。(当日のスライドはこちら) 作ったもの まずは、実際に見ていただくのがイメージつきやすいと思うので動作しているGIFです。 QRコードを読み込んで結果を表示するというものですが、これがブラウザで動いています。 実際に公開されていますのでよかったら使ってみてください。 サイト：https://simple-qr.netlify.com/ GitHub：https://github.com/KanDai/simple-qr-reader 確認している対応ブラウザは以下です。 Android Chrome Android Firefox iO
ウェブサイトをグローバル化するために便利なIntl APIの話 - Qiita
この記事はトレタ Advent Calendar 2016の13日目の記事になります。 トレタでは飲食店の予約アプリを作成しています。 今流行のウェブ予約も飲食店向けに開放していますので、見たことある人もいるかと思います。 インターナショナル対応について まず、インターナショナル対応の定義を考えてみましょう。 i18n internationalization（国際化）の略で始めのiから終わりのnまでの間に18文字入っているのでi18nと呼ばれています。 いわゆる言語変換で、日本語を英語に置き換えたりします。 l10n localization(地域化)の略でlとnの間が10文字入っているのでl10nといいます。 こちらは言語に加え、地域も考慮に入ってきます。 公用語が英語の国は多々あれど、文化がちがい、英語の代表的な国のイギリスとアメリカでも結構違っています。 さて、ウェブアプリを作成す
まだXMLHttpRequestを使ってるの？ fetchのすすめ
JavaScriptでWeb的なプログラムを書いたことがある人は、XMLHttpRequestを使った経験もあるのではないかと思います。XMLHttpRequest，略してXHRは、JavaScript（+DOM）でサーバーとHTTP通信をするための唯一の方法としての地位を長らく保ってきましたが1、ここ3〜4年でより新しいAPIであるfetch APIが登場しました。fetch APIが出たばかりの頃は何だこのおもちゃはと正直思いましたが、いつの間にか仕様が充実していい感じになっていました。 皆さんは、この新しいAPIであるfetchをちゃんと使っているでしょうか。それとも、古いXHRを未だに使っているのでしょうか。この記事では、未だにfetchを使っていない人を主な対象としてfetchの使い方を解説します。（XHRと比較しながら解説するので$.ajaxとかaxiosとかしか使ったことがな
JSON API — A specification for building APIs in JSON
If you’ve ever argued with your team about the way your JSON responses should be formatted, JSON:API can help you stop the bikeshedding and focus on what matters: your application. By following shared conventions, you can increase productivity, take advantage of generalized tooling and best practices. Clients built around JSON:API are able to take advantage of its features around efficiently cachi
React + Redux + WP REST API + SSRで爆速ブログを作ったので事例として紹介します
WordPress 4.7では、これまでプラグインとして提供されていたWP REST APIが機能として組み込まれ、標準でREST APIが使えるようになりました。このことにより予想されることは、PHP以外のプラットフォームで、WordPressのブログテーマやWordPressの機能を使ったサービスが今後どんどん生まれてくると言うことです。 ちょうど自分の扱っている新規事業の企画でブログメディアを作ることになりました。新しいメディアを運営する上で、技術的にも注目されるようなものを作りたいと思ったので、今回このWordPressのREST APIを使って、React + Reduxベースでブログを作ることにしました。爆速なブログができあがったので事例として紹介させてください。 LifeGadget（ライフガジェット）人々の日常生活に役立つ情報（ライフハック術、ガジェット、アプリ、サービスな
Google人気JavaScriptライブラリ配布開始、ネット全体でキャッシュ効果
GoogleからGoogle AJAX APIを拡張する新しいサービス「The AJAX Libraries API」が公開された。The AJAX Libraries APIはGoogleのサイトで人気のある有益なJavaScriptライブラリを提供しようというもの。これまでYUIであればYahoo!、DojoであればAOLなどが同類のサービスを提供していたが、特定のJavaScriptライブラリに限定することなく有益であれば配布に追加するというポリシーをもっている点が新しい。 JavaScriptライブラリを活用するタイプのWebアプリケーションは数多くある。結果として、何度も似たようなJavaScriptライブラリをダウンロードしていることになり、このままいけば今後ライブラリ自体のサイズの巨大化や多くのサービスの登場でライブラリダウンロード総量は増加することになる。 The AJAX
HTML5で Speed Test, Navigation Timing APIによる性能データ収集 - ぼちぼち日記
今日は、HTML5 Advent Calendar 2011 9日目です。 何を書こうかネタに迷い、ひたすらHTML5のマイナーなAPIをあさっておりました。 FullScreen API/Page Visibility API も既に 登場してしまい、 @sada_h さんから Quota Management API はいかがとお奨めを受けましたがさすがに Quota管理だけでネタを展開するのは辛く、途方に暮れていました。 そんな折、ふと見かけたのが「Navigation Timing API」。マイナーだと思いますねぁ。今回このAPIの紹介とデモをさせていただきます。 Navigation Timing API 「いったい Navigation Timing API は何をするAPIか？ 」単純です。 「ブラウザーがWebの画面を表示する時にどこにどれだけ時間がかかているか知るAPI
HTML5サンプル集 - 株式会社あゆた
このページでは、HTML5のAPIを利用した簡単なサンプルを公開しています。 このサンプルの多くは、弊社技術顧問の白石氏がマイコミジャーナルに寄稿した記事で使用したプログラムを元に、多少の改変を加えたものです。 どれも非常にシンプルなものではありますが、HTML5の各機能を試すためのとっかかりとしてご利用頂けると思います。 白石氏が寄稿した記事はこちらになります。これらの記事と合わせてサンプルをご利用になって頂く事で、各機能の理解がより深まることでしょう。 詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 アプリケーションキャッシュのサンプル (ダウンロード) (Safari4、Google Chrome3で動作確認済み。Firefoxだと、アプリケーションキャッシュのイベントが正しく発生せず、動作しないと
[JS]あなたのウェブページを52の言語に自動翻訳するボタンを簡単に設置できる -Translate This Button
<textarea name="code" class="html" cols="60" rows="5"> <!-- Begin TranslateThis Button --> <div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script> <script type="text/javascript"> Trans
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Popover API - JavaScript不要、HTMLのみでポップオーバーUI
