[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)
HTML attributes vs DOM properties
Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example: <div foo="bar">…</div> <script> const div = document.querySelector('div[foo=bar]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' consol
もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita
HTMXとは https://htmx.org/ HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby on RailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogle
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 には、以下のように、 『ページ遷移が発生したとき、同じ要素がページをまたいで移動する』 ような、リ
Mutation observer
MutationObserver は DOM 要素を監視し、変更があった場合にコールバックを起動する組み込みのオブジェクトです。 最初に構文を確認してから、実際のユースケースを見ていきましょう。 構文MutationObserver は簡単に使用できます。 まず、コールバック関数を引数にもつオブザーバ(observer)を作成します。: config はブール値のオプションを持つオブジェクトで、“どの種類の変更に反応するか” を指定します。: childList – node の直接の子の変更, subtree – node のすべての子孫に対する変更, attributes – node の属性の変更, attributeFilter – 指定したものだけを監視するための、属性の配列 characterData – node.data (テキストコンテンツ) を監視するかどうか, ほかに
言語によるWebAssemblyファイルサイズの違い
WebAssembly自体はプログラミング言語ではありません。対応した各種言語から変換します。そのため、採用する言語によって利用できる機能や開発効率が異なるでしょう。 今回は生成されるバイナリをプログラミング言語ごとに見てみます。 GoとRust 利用したのはGoとRustです。RustはWebAssemblyで最初に採用されているプログラミング言語であり、サイズも最適化されているのではないかと予想されます。対してGoはWebAssemblyを目的としてはいませんし、標準ライブラリなども多数入りそうな予感がします。 どちらもHello Worldを出力するだけのWebAssemblyファイルを作った場合のサイズです。 Go : 1,301,957 byte Rust : 1,981,246 byte となり、意外にもGoのが小さくなります。 Rustのサイズを軽減する Rustはデフォルト
AJAX で拡張したサイト - ウェブマスター/サイト所有者 ヘルプ
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 JavaScript SEO の基本を理解する JavaScript には、ウェブを強力なアプリケーション プラットフォームに変える多くの機能が用意されており、ウェブ プラットフォームを支える重要な要素となっています。JavaScript を利用するウェブアプリを Google 検索で見つかりやすくしましょう。デベロッパー様のウェブアプリが提供するコンテンツを探している新しいユーザーの開拓や、以前に利用したことがあるユーザーの再エンゲージメントにつながります。 Google 検索は JavaScript を最新バージョンの Chromium で実行しますが、デベロッパー様側で最適化できる項目がいくつかあります。 このガイドでは、Google 検索で JavaScript が処理される仕組
innerHTML より insertAdjacentHTML を使う - Qiita
はじめに とある要素の中をいじりたいという時 innerHTML で操作することもあるかもしれません。 しかし、実はこれはあまりよろしくない。 innerHTML は既存の要素を破壊（？）する innerHTML を書き換えるということはつまり、要素の中身をすべて新しいものに書き換えるということです。 既存の要素は、新たな要素として扱われてしまいます。 サンプル 例えば、以下のようなHTMLとJavaScriptコードがあったとします。
アンカー上の target=_blank が rel=noopener を暗示するようになりました | Firefox サイト互換性情報
リリース: Firefox 79 カテゴリー: DOM, HTML, プライバシー & セキュリティ 概要Firefox 79 以降、target="_blank" を伴った <a> や <area> 要素は、現行の HTML 仕様 に従い、rel 属性が設定されていない限り暗黙的に rel="noopener" を適用します。noopener リンクタイプは新たに開かれたウィンドウ内の window.opener を null とすることで、この DOM プロパティが信頼できない第三者のサイトによって悪用されるのを防ぎます。必要な場合は、rel="opener" を明示的に設定することで挙動を反転させられます。 Apple は 2019 年 3 月公開の Safari 12.1 で最初にこの変更を行いました。Firefox では、Firefox 65 以降の Nightly と早期 Be
SEO担当者が知っておきたいJavaScriptの基本 ―― グーグルにサイトを正しく理解させるために（後編） | Moz - SEOとインバウンドマーケティングの実践情報
この記事は前後編の2回に分けてお届けする。お届けしている。今回は、検索エンジンにコンテンツを確実に取得してもらうための方法と、サイト表示の遅延について見ていこう。 →まず前編を読んでおく グーグルなどの検索エンジンにコンテンツを確実に取得させるには1. テストJavaScriptの問題を解決するために最もよく使われる解決策は、何もしないことだ（コーヒーでも飲みながら、グーグルがその優れたアルゴリズムの力を発揮するのを眺めていよう）。グーグルは、検索を行うユーザーと同じ体験をしたいと考えている。 グーグルが「ウェブ（すなわちJavaScript）をより正確に理解」できるようになったと初めて発表したのは、2014年5月のことだった。 ただし、業界のエキスパートは、この発表の前からグーグルがJavaScriptをクロールする能力を持っていることを示唆していた。iPullRankのチームは2011
Modern Syntax
フェナキストスコープってのは、Wikipediaによりますと、 一般的なフェナキストスコープは、軸に垂直に取り付けられた回転する円板である。円板にはアニメーションのコマに相当する絵が順に描かれており、コマとコマの間にスリットがある。この円板を回転させ、絵を鏡に映し、動くスリットから透かして見る。仮現運動を利用し、スリットを通すことでブレがなくなり、絵が動いているように見えるのである。 というものなのですが、これはまあ以下のビデオを見れば一発で理解できるかと思います。 使用しているマーカーは、パイロットコーポレーションの「ボードマスター極太」だそうです。 右に回転させると棒人間が階段を昇り、左に回すと降りているように見えます。 こういうのって自分でもできそうな気はするんだけど、結局うまくできないんだよなあ。
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
JavaScriptのDOM Core基礎 - 三等兵
Coreの簡易リファレンス。Coreは要素を参照したり、相対位置から周りのノードを参照したり、要素を生成するといった部分。主に利用するであろうプロパティやメソッドはカバーしているつもりですけど、これも入れとけってのあったら教えてください。 このあたりは地味で使いづらくその上理解しにくいという残念な部分。ふと忘れたときに使う個人的なものですが、慢性jQuery拒絶症候群な人よかったらどうぞ。それにしても暑い。ガリガリ君おいしいね。 DOMとは。 Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。端的に言えば、Web ページをスクリプトやプログラミング言語とつなぐような機構です。 https://developer.mozilla.org/ja/
インターン講義4日目「JavaScript で学ぶ イベントドリブン」 - Hatena Developer Blog
今日行なわれたインターン4日目の講義「JavaScript で学ぶ イベントドリブン」by id:cho45の資料と録画を公開します。今回は、JavaScriptの概要からDOM、イベントドリブンまでを2時間で網羅した密度の高い講義となっています。今回の放送は安定していましたので、音質・画質とも良好にできました。 明日もAM10:30より、JavaScript界の貴公子id:nanto_viによる「ユーザーインターフェース, HTML5」を放送しますので、是非ご覧ください。 自己紹介 id:cho45 - vimmer うごメモチームのエンジニア (7月後半〜) 少し前までブックマークチーム Perl, JS (Scala, Ruby, etc...) サーバサイド・クライアントサイドUI・スマートフォンなど Java や AS も場合によっては書いています 特技 1行コードを書くごとにハ
JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０:phpspot開発日誌
30 best practices to boost your web application performance - Web User Interface Architect JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０。 自分へのインプット＆メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない（使った事ないですが） for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+='AAA';aaa+='BBB'; の方が aaa+='AAA'+'BBB';より速い 複数の文字列連結には、Array で文字列
jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ
jQuery、プラグイン、jQuery UI、Web経由のCDNとは CSSの書き方も分かるjQueryプラグイン実践活用法（1） 基本／おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説 デザインハック ＜ リッチクライアント 2009/12/8 今回は「jQuery UI」のより進んだ活用例 ■ jQueryのプラグイン「jQuery UI」とは？ 今回紹介するjQuery UIは、JavaScript（Ajax）フレームワークjQueryのプロジェクトがjQuery用に開発している、以下の機能を提供するプラグインです。 ドラッグ＆ドロップなどのマウス操作の機能拡張 ユーザーインターフェイスを改善するウィジェット（アコーディオン、日付入力、ダイアログ、スライダー、タブなど） 今回は、jQuery UIのドラッグ＆ドロップ機能
第5回 jQuery UIによるユーザインターフェースの改良 | gihyo.jp
今回使用する「Dialog」「Draggables」「Droppables」「Sortables」に必要なファイルは以下の通りです。 themes/ jquery-1.2.3.min.js jquery.dimensions.js ui.mouse.js ui.resizable.js ui.dialog.js ui.draggable.js ui.draggable.ext.js ui.droppable.js ui.droppable.ext.js ui.sortable.ext.js ui.sortable.js jQuery UI 1.5bを使うために、今回は同梱されているjQuery 1.2.3を使うことにします。バージョンが上がりますが、これまでのサンプルの動作に影響はありません。 ライブラリの設定 ライブラリの各ファイルを、head要素の子要素に以下のように指定します（
選択肢によってドロップダウンのメニュー項目を変えるには
[JavaScript] サンプルはこちらです [JavaScript部分] <script type = "text/javascript"> <!-- function functionName() { var select1 = document.forms.formName.selectName1; //変数select1を宣言 var select2 = document.forms.formName.selectName2; //変数select2を宣言 select2.options.length = 0; // 選択肢の数がそれぞれに異なる場合、これが重要 if (select1.options[select1.selectedIndex].value == "果物") { select2.options[0] = new Option("りんご"); select2.op
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Shadow DOMとCSSの現状
JavaScriptとDOMによる動的なWebページの作成
