タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
こんにちは、VRoid部所属のエンジニアのyueです。 VRoid Hubでページ遷移時にcanvasの状態を維持する改善をリリースしました。本記事ではこの取り込みについて解説していきます。 前提 VRoid Hubではモデル詳細画面と投稿者のみに表示するモデル編集画面が存在しています。この二つのページは別々のレイアウトを使っていたため、モデル表示用のcanvasを操作するインスタンスがお互い共通せず、ページ遷移するたびにモデルを再度読み込むことが必要でした。 今回はDOM APIを利用してコード変更を最小限に押えつつ、再度読みを無くすような改善を行いました。 問題の再現 通常Reactの再レンダリングを防ぐには様々な手段があります。例えば React.memo 、React コンポーネントの key 、classコンポーネントのshouldComponentUpdate などが存在します
公式チュートリアルでNext.jsに入門してみた (1) 〜アプリ新規作成、ページ遷移、スタイリング編〜 | DevelopersIO
公式チュートリアルでNext.jsに入門してみた (1) 〜アプリ新規作成、ページ遷移、スタイリング編〜 こんにちは、CX事業本部 IoT事業部の若槻です。 今回は、現在注目されているフロントエンドフレームワークNext.jsへの入門のために、次の公式チュートリアルを数回のシリーズに分けてこなしていき、基本的な機能に触れていこうと思います。 Create a Next.js App | Learn Next.js Next.jsとは Next.jsは、オープンソースで提供されるReactベースのフロントエンドフレームワークです。 Next.js by Vercel - The React Framework こちらによるとNext.jsの特徴は次のようなものがあり、プロダクション環境で必要とされるあらゆる機能と、最高の開発者エクスペリエンスを提供できるように設計されています。 An int
はじめに こんにちは、ziと申します。 今回は、発表からしばらく経ってしまいましたが、View Transitions APIを使ったNext.jsでのスムーズなページ・UI遷移を目指して、実装してみます。 ※もし間違いやより良い実装方法など見つけましたら、ご指摘ください！ 🙇♂️ 今回実装した最終成果はこちらです。 また、コードはこちらにあります。 View Transitions APIとは？ View Transitions APIとは、2023年4月11日現在Chrome 111とOpera 97(pre-release)以降で実装されている遷移のアニメーションを行うブラウザーAPIです。下記は、MDNからの引用です。 View transitions are a popular design choice for reducing users' cognitive load,
UI/UXと画面遷移について、 そのボタンに割り当てるべきアクションは、「ページ遷移」なのか、「ヒストリーバック」なのか、という話です。 ヒストリーバックを用いた理想的な遷移 あなたは一覧画面と詳細画面を持つサイト/Webアプリを開発しています。 詳細画面では、ヘッダーの左に戻るボタンが表示され、ヒストリーバックが割り当てられています。 ① ユーザーは、Googleの検索結果から一覧画面にランディングし、さらに詳細画面に遷移しました。 ② ユーザーは詳細を見終わったので、左上に表示された戻るボタンを押下し、一覧画面に戻りました。 ③ ユーザーは他に見たいものがなかったので、次はブラウザのヒストリーバックを使ってGoogleの検索結果に戻りました。 ユーザーはヒストリーバックを用いて期待通りのブラウジングができました。 ヒストリーバックとページ遷移の混在した悪い例 このサイトを改修し、ヘッダ
View Transitions API と Navigation API でページ遷移アニメーションを実装してみる
Chrome 102 以降で Navigation API が、Chrome 111 以降で View Transitions API がサポートされました。 本記事ではこの二つの API を用いてページ遷移アニメーションを実装してみようと思います。 デモサイト&コード 本記事では以下のデモサイトとコードをもとに説明を行うことがあります。全体的な挙動やコードを確認したい際には以下をご参照ください。 View Transitions API View Transitions API は異なる DOM 状態間におけるアニメーション付きの画面遷移と DOM の更新を、従来よりもシンプルな方法で提供する API です。 View Transitions API の詳細な説明については View Transitions API - Web APIs | MDN をご参照ください。 デモページ&コード
TL;DR Next.js アプリ内のページ遷移では、原則として元 page の component は unmount される 「遷移前後の page component が同じである」場合、および「App に記述されたコンポーネント（Layout）」は unmount されない page component に getLayout 関数を定義するパターン[1]を適用することで、page ごとの Layout を細かく設定・管理できる モチベーション たとえばタブを使ったページ遷移などで、一部のコンポーネントを引き継ぎたい場合。 zenn.dev でいうとトップページのグローバルナビゲーション直下のタブ。 このタブを切り替えるときに、グローバルナビゲーションやタブは画面に残っていてほしい[2]。 普通にやるとタブが unmount されるので、ユーザから見ると画面が一瞬チラつく場合がある
「ページ遷移のアニメーションの種類ってどんな種類があるの？」 「ページ遷移のアニメーションのデザインってどうすればいいの？」 最近、アニメーションなどでなにかしらの動きをつけているWebサイトをよく見かけるようになってきました。 しかし、与えたい印象やアニメーションそのものの目的で最適なアニメーションは変わってきます。 ページ遷移のアニメーションの設計は、ユーザーを惹きつけるホームページをつくるためにとても重要。 ページの切替やスクロール時にアニメーションを設定すれば、動きで視線を誘導して見せたいものに注目させることができます。 そこで本記事では、下記を中心に解説していきます。 アニメーションのメリット・デメリット アニメーションの参考デザイン アニメーションの作り方 ホームページにアニメーションを実装するか検討中の方は、ぜひ参考にしてみてください。 【無料】ページ遷移のアニメーションの作
Next.jsのページ遷移・ページロードの仕組みをコードリーディングで追いかけた - $shibayu36->blog;
Next.jsのLinkとRouterの挙動がよく分からなかったので、Next.jsのコードリーディングをした。ページ遷移やページロードの仕組みが結構つかめたのでメモ。 LinkではクリックするとsingletonRouterのpushを呼んでいる pushはchangeメソッドを呼んでいる next/next-server/lib/router/router.ts change pathnameやqueryは、url、つまりLinkのhrefから抽出している routeはただpathnameから最後の/を消しただけ dynamic routeの場合(/posts/[id]みたいになっているやつ)なら、hrefとasを比べてパラメータを抜き出して、queryに突っ込んでいる このへんでgetRouteInfoを使って、routeとかpathnameからコンポーネントを特定しようとしてそう
Web技術の発展に伴い、近年のWeb制作はより複雑で面白いものになってきました。 そこで、今回はSPA（シングルページアプリケーション）で作るページ遷移のデモを制作しましたので、ご紹介しようと思います。 Contents Nuxt.jsについて導入方法シンプルでシームレスなページ遷移SPAを使用するメリットとデメリットサイト紹介まとめNuxt.jsについてSPAを構築するにあたり、今回はJavaScriptライブラリ（以下jsライブラリ）のフレームワークを採用することにしました。jsライブラリは有名なものだと「React」や「Vue」などが該当しますが、今回は「Vue」のフレームワークである「Nuxt.js」を使用します。 Nuxt.jsはVueアプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中か
はじめに Google Formで作成したフォームをカスタマイズ（アレンジ）する方法です． HTML，JavaScriptの知識がある程度ある人を対象にしています． （※2020年9月現在のGoogle Formの仕様に合わせて書いています．） デモページ 完成品はこちらから確認できます．（何かテキトーに送ってみてくださいw） Google Formでフォームを作る Google Formへアクセスし，フォームを作成してください． 作成したGoogle Formのソースコード確認する 作成したフォームのページへアクセスし，ソースコードを見ます. （WindowsだとCtrl + U, Macだとcommand + option + Uでそのサイトのソースコードを確認することができます．） ソースコードはこんな感じになっています． ここで大切なのは，ビビらないこと です． ソースコードの中か
以下を子テーマのfunctions.phpに追加すると、cocoonには関数が用意されているので、body要素にクラスが追加されます。 add_filter( 'body_class_additional', function( $classes ) { $classes[] = '追加したいclass名'; return $classes; });後は、cocoonの子テーマのtmp-user/body-top-insert.php に、以下追加するだけ。 <div class="fade_group"> <div></div> <div></div> <div></div> <div></div> </div> <div class="fade_group2"> <div></div> <div></div> </div>CSS.fade_group div , .fade_group
今回はサイトを最初に訪れた時のみ、ローディングを表示する方法をjQueryで作成する方法を共有しようと思います。 動きが確認できるデモサイトは下記になります。 ローディング デモページ ローディングを初回のみ表示 (ページ遷移や2回目以降は表示しない) jQueryを追加（全ページ共通の場所） <div class="loading"></div>用のHTML/CSSがあります。 下記は、クラス「.loading」にクラス「.active」を追加すると、loadingが非表示になるということを前提として作成しています。 $(function () { var webStorage = function () { if (sessionStorage.getItem('access')) { /* 2回目以降アクセス時の処理 */ $(".loading").addClass('is-act
SPAってページ遷移するの？ - Qiita
概要 SPAにおけるルーティングについて簡単に紹介します SPAを作ったことがない人が対象読者です 知ってる人からすると、そんな当たり前なことを・・と思うかもしれません SPAとは？ Single Page Applicationの略です 対義語はMultiple Page Applicationです つまり単一ページで構成されるのがSPAで、複数ページで構成されるのがMPAです SPAは最初に画面(HTML)を取得した後は、JavaScriptによって画面の書き換えを行うことで単一ページでありながらアプリケーションを構築することができます これは言い換えるとSPAはページ遷移しないということ？本当にそうでしょうか？ SPAはページ遷移しない？ 2つのデモページを用意しました https://spa--mdc-2019.netlify.com/ https://mpa--mdc-2019.
フォームの入力値を編集したときなどに表示される「このサイトを離れますか？」というポップアップを非表示にする方法です。 色々と調べましたが、Object.definePropertyの setter で検知して値を上書きすると確実でした。 Object.defineProperty(window, 'onbeforeunload', { set(newValue) { if (typeof newValue === 'function') window.onbeforeunload = null; } }); ちなみに if (typeof newValue === 'function') 等のチェックがないと変更を検知し続けて無限ループになり、スタックが大変なことになるで気をつけましょう。 また、もし他に良い方法をご存知の方がいたらコメントで教えてください🙏 参考 Object.defi
まえがき React のアニメーションライブラリである Framer Motion を利用してページ遷移アニメーションを実装した際に、いくつか引っかかった点があったので、備忘録として残しておこうと思います。 バージョン Next.js v12.1.1 Framer Motion v7.6.1 今回実装するもの ↑ こんな感じのふんわりしたフェードイン / フェードアウトを実装します。 手順 1. アンマウント時のアニメーションを有効にする import { AnimatePresence } from 'framer-motion' import type { AppProps } from 'next/app' import 'styles/globals.css' const MyApp = ({ Component, pageProps, router }: AppProps) =>
async function autosave_state(url, id, password){ const r = new FormData() r.append('r', JSON.stringify({id, password})) const http = await fetch(url, {method:'POST', mode:'cors', credentials:'include', body:r}) const state = await http.json() window.addEventListener('beforeunload', function(){ const w = new FormData() w.append('w', JSON.stringify({id, password, state})) navigator.sendBeacon(url,
「Puppeteer入門 スクレイピング+Web操作自動処理プログラミング」 を読むまで、PuppeteerのwaitForNavigationの動きを誤って理解していました。 ここでは、Puppeteerを利用して「ページ遷移を待つ」というよくある処理における誤った実装と正しい実装を紹介します。 誤った実装 やりがちなNGパターンPuppeteerで非同期処理を同期的に記述するawaitを用いて、click後にページ遷移を待つという処理を思い浮かべた場合、次のような書き方をしがちです。 await page.click('.some .a'); await page.waitForNavigation({ waitUntil: 'load'}); waitForNavigationとは、「waitForNavigationを呼び出してから次の遷移を待つ」という意味の処理です。 上記の書き
この画面遷移のUX（ユーザーエクスペリエンス）を改善して、離脱率を下げることはできないでしょうか？ ユーザーが1ページで入力する情報量を減らして、8画面の遷移をたどるようにしました。 従来型の「5画面」のタイプとA/Bテストで比較したところ、離脱率が5〜6%改善したのです。 具体的には、お客様情報の入力画面を4つに分割しました。 1画面目では、名前と郵便番号のみ。 入力してもらいやすい項目を最初に並べ、次のページに進んでもらうたびに「Yes」を取り続けていくことを意図しました。 ・2画面目：住所（郵便番号自動入力で表示されなかった残りの番地や建物名など） ・3画面目：電話番号、性別、誕生年 ・4画面目：メールアドレス、パスワード この「8画面遷移」タイプ。 従来の「5画面遷移」タイプとA/Bテストで比較しましたが、数社ともいずれも離脱率に改善効果が見られました。 チャットボットの効果的な活
初めに 先月のアップデートでリリースされたCAPTCHA統合(CAPTCHA integration)を利用することでページ遷移を挟まずにAWS WAFのCAPTCHA認証を利用可能となったようです。 自分の方でSPA + AWS WAFのCAPTCHA認証の構築をする機会がなかった関係で従来の動作についてはドキュメント等からの推察となってしまいますが、 AWS WAFのCAPTCHAを利用する場合はページ遷移を行うことは必須であったため、React等でSPAを構築しせっかく再読み込みなしで動作可能なサイトを作成してもAWS WAFのCAPTCHAを利用する際は一度遷移を挟む必要があったようです。 今回のリリースされた処理方式をとることでページ遷移の必要がなくなり、実行元の特定のエレメントに対して認証要素を埋め込むことが可能となりました。 試す時間が取れずリリースから少し時間が空いてしまい
概要 Swiperのswiper-buttonを横に出すのに少しハマったのでメモ。 環境 : Swiper 3.4.0 ノーマルなやつ <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> .swiper-container{ width: 700px; height: 220px; margin: 100px 100px 0; padding: 1
Navigator 2.0と以前のバージョンとの大きな違い これまでの画面遷移（以下、Navigator 1と示す）は、画面上のアクションに応じて、画面変更を命令するという流れでした。それに対して、Navigator 2.0（以下、Navigator2）では、画面スタックの状態を管理するというようになっています。文章で説明しても、少々イメージがわきにくいというところもあるので図1のように違いを示しました。 図1:Navigator1とNavigator2の大きな違い 例えばNavigator1では、PUSH／POPという概念を使って、画面スタックを変更します。PUSHであればスタック上の一番上に追加し、POPであれば一番上から画面を取り除くというようにです。これらの説明は前回したので、詳しくはそちらを参照してください。 Navigator2では、画面スタックを直接コントールすることで画面の
はじめに 仕事で Next.js のページ上でページ遷移時の確認モーダルを出すコードを作成したのでその上で知ったことに関して備忘録代わりにこちらで記載しておきます。 useEffect の理解 今回の目的の達成のために、Next.js の useEffect を用いようと思います。 useEffect は引数に指定した関数の実行をコンポーネントのレンダリング後に行うことができるメソッドです。 基本的なつくりは useEffect(関数, データ配列) となっており、第二引数の配列内のデータが更新されるたびに、第一引数の関数が実行されます。 今回の目標は「ページ遷移時の確認モーダル表示」なので、コンポーネントがアンマウントされたタイミングでの処理についても気を付ける必要があります。 その為、アンマウントされたタイミングでの処理も含めての基本的な構文は以下の様になります。 useEffect(
【Next.js】ページ遷移時に入力内容破棄の確認モーダルを表示する便利なカスタムフック作ってみた。 - Qiita
はじめに 実務を経験する上で、 「入力フォームなどがあるページで入力途中の内容がある場合に、 ユーザーがページ遷移をしようとした時に入力内容の破棄をアラートする。」 といった対応が必要なケースがあると思います。 そういったケースで、 簡単に使えるカスタムフックスを作成しました。 使用技術に関して 主にこのフックス内で使用しているパッケージとそのバージョンは以下です。 Next.js: ^12.1.7-canary.41 react: 18.2.0 @mantine/core: 4.2.9 @mantine/hooks: 4.2.9 tailwindcss: ^3.1.3 目次 1.コードはこんな感じ 2.それでは解説 3.終わりに 1. コードはこんな感じ import { Modal } from "@mantine/core"; import { useDisclosure } fro
概要 大まかな実装の仕組みを紹介します。 framer-motionを用いてDOMの透明度を変更したページ遷移を実装する recoilを用いて遷移時と遷移先のURLを記録する recoilを用いて遷移先のDOMがマウントされた時のURLを記録する 記録したURLによってPlaneの遷移前の頂点と遷移後の頂点を補間して動かす 解説 実装の仕組みを4段階に分けて解説します。 1. DOMの透明度を変更したページ遷移 まず、WebGLを使用する前にDOMの透明度変更によるフェードイン/アウトのページ遷移を実装します。実装には framer-motion を用います。framer-motionを使うと任意の値（今回はURL）の変動によってマウント時とアンマウント前にアニメーションをさせることができます。フェードイン/アウトするコンテンツをラップするコンポーネントを作成すると便利ですので、下記に例を
はじめまして。エンジニアのotaniです。 弊社ブログでも以前ご紹介した、シームレスなページ遷移を導入できるJSライブラリのBarba.jsですが バージョンがv2になって記述の仕方が変わっていたので導入方法の紹介と簡単なデモを作成してみました。 Barba.js v2とは WebサイトにSPAのような高速でシームレスなページ遷移を導入できるJSライブラリです。しかも非常に軽量で、7KBしかありません。 もともとBarba.jsがありましたがv2にアップデートされ公式サイトも別ドメインになりました。 注意点 最新のモダンブラウザ（Chrome、Firefox、Edge、Safari、Opera）では問題なく動きますがIE対応するにはポリフィルが必要なようです。詳しくは公式ドキュメントをご覧ください。 DEMO こちらが今回作成したDEMOです。 遷移時のアニメーションにはGSAPを利用しま
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページ遷移時にReactコンポーネントの状態を維持する - pixiv inside
View Transitions APIによるスムーズなページ遷移をNext.jsで簡単に試す
戻るボタンで「ページ遷移」させてはいけない - Qiita
Next.js でページ遷移前後で共通するコンポーネントを残す
ページ遷移のアニメーションの作り方と参考事例9選【2024年5月最新版】 | Web幹事
【Nuxt.js】SPA（シングルページアプリケーション）で作るお洒落なページ遷移 | 東京のホームページ制作 / WEB制作会社 BRISK
Google Formで作成したフォームをアレンジする（submit後のページ遷移も！）
ページ遷移時にアニメーションを入れる方法【ライブラリなし】
【jQuery】ローディングを初回のみ表示 (ページ遷移や2回目以降は表示しない)｜WEB CREATES
ページ遷移時の「このサイトを離れますか？」を意地でも表示しない方法 - Qiita
Next.js + Framer Motion でページ遷移アニメーションを実装する - Qiita
ページ遷移時にオブジェクトを自動送信する - Qiita
PuppeteerのwaitForNavigationで正しくページ遷移を待つ - SIS Lab
ページ遷移数は少ないほうがいい？ユーザー調査からわかったCVRの改善事例
AWS WAFのCAPTCHA認証をページ遷移なしで利用できるようになりました | DevelopersIO
Swiperのページ遷移ボタンをスライダーの横に出す&デザイン変更とか - Qiita
Flutter2の新しい画面遷移「Navigator 2.0」を使ったページ遷移を理解しよう
Next.js でページ遷移時の確認モーダルを出す方法の備忘録 - Qiita
【Threejs×Nextjs】DOM座標同期したWebGLをページ遷移でシームレスに動かす
Barba.js v2とGSAPでページ遷移アニメーション
qiita.com/pyon_kiti_jp
www.recruit-ms.co.jp
nankanoproblem.hatenablog.com
pukupuku25.hatenablog.jp
web.archive.org
gashuu.hateblo.jp