Next.js のページ遷移を全力で止める

2024/09/18 23 users Next.js 全力

LX Frontend Night: Unleash Next.js https://github.com/LayerXcom/next-navigation-guard 続きを読む

React Suspenseを使って遷移体験を向上させる

2023/09/27 8 users React Suspense 最後 方針 ページキャッシュ

ページ遷移をJSで制御する場合のページバック時のユーザー体験の問題について解説します。続いてそれを解決するページキャッシュの方針について説明します。最後に、React Suspenseの仕組みを応用してページバック時の問題を解決する方法について説明します。 続きを読む

View Transitions APIによるスムーズなページ遷移をNext.jsで簡単に試す

2023/04/16 20 users API View Transitions Next.js

はじめに こんにちは、ziと申します。 今回は、発表からしばらく経ってしまいましたが、View Transitions APIを使ったNext.jsでのスムーズなページ・UI遷移を目指して、実装してみます。 ※もし間違いやより良い実装方法など見つけましたら、ご指摘ください！ 🙇‍♂️ 今回実装した最終成果はこちらです。 また、コードはこち... 続きを読む

世の中に溢れる「うざい広告」をプロが徹底解説！マーケターは必見です | ページ 2 / 2 | 株式会社LIG

2021/05/25 6 users マーケター 株式会社LIG 滝井 必見 うざい広告

まこりーぬ なんか、すごいページを経由してきたんですけど…… 滝井 見たことありませんか？ こういうページ遷移の途中で表示される広告。 まこりーぬ たしかに良く見かけますね……次のページを読みたいくらいにモチベーションが高いユーザーだから、ここで離脱はしないんでしょうけど、正直ストレスですよね…… 滝井 2ペー... 続きを読む

SPAにおける状態管理: 関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷 - エンジニアHub｜若手Webエンジニアのキャリアを考える！

2019/05/23 528 users SPA エンジニアHub 変遷 Electron アプローチ

こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登... 続きを読む

barba.js - スムーズなページ遷移を実現 MOONGIFT

2019/05/14 10 users MOONGIFT Pwa AMP ライブラリ ニーズ

Webページを素早く表示したいというニーズは強くあります。AMPのような技術しかり、PWAのCache APIもそうです。遅くて良いことなどありません。とにかくWebページは高速に表示すべきです。そしてそのためのライブラリも多数あります。 今回紹介するbarba.jsは高速、かつスムーズなページ遷移を可能にするライブラリです... 続きを読む

Vue.jsとNuxt.jsを使用して、Webページのページ遷移に気持ちいいアニメーションを与えるチュートリアル | コリス

2018/05/22 319 users アニメーション ライセンス コリス スマホアプリ web

Vue.jsとNuxt.jsを使用して、スマホアプリで見かけるようなアニメーションを伴った滑らかなページ遷移をWebページに実装するチュートリアルを紹介します。 Native-Like Animations for Page Transitions on the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近見かけたページ... 続きを読む

サービスの目視チェックをヘッドレスブラウザで効率化した話｜raahii｜note

2018/04/03 130 users ユニットテスト ヘッドレスブラウザ Note 一連 パク

■ モチベーション サービスを継続的に改善していく上で、バグを避けることはできません。そこで、バグが混入した時にそれにいち早く気付ける仕組みが必要になります。 Webサービス開発ではふつう、ユニットテストを書きます。一連のページ遷移（動線）をチェックするE2Eテストを書くこともあります。これらを用いることで、バグに簡単に気づくことが出来ます。 しかし、フロントエンドのエラーには微妙なページデザイン... 続きを読む

データの可視化に使えるD3.jsでユーザーのページ遷移を表現してみた | PLAID engineer blog

2017/03/08 83 users PLAID engineer blog ユーザー 可視化

D3.jsを使ってユーザーがサイト内の各ページを遷移している様子をアクセスログから可視化してみました。こんにちは、プレイドの@wikrshです。 弊社の KARTE では属性データやサイト上での行動情報など様々なデータを元に来訪したユーザーの状況をリアルタイムに可視化しており、どのような情報の見せ方をすればよりユーザーへの理解を深められるのか、社内では日々議論・改良を重ねています。 今回は現在KA... 続きを読む

引っ張って更新を簡単実装できる「Pull to Refresh.js」:phpspot開発日誌

2017/01/12 30 users phpspot開発日誌 ヘッダー 関連エントリ テーブル 固定

Pull to Refresh.js 引っ張って更新を簡単実装できる「Pull to Refresh.js」 アプリではもう一般的になった引っ張って更新をWEBでも実現します。依存性なしなので手軽に使えそう 関連エントリ ページ遷移をアプリっぽくすることができる「jQuery.smoothState.js」 テーブルのヘッダーを固定表示することが出来る「jQuery.floatThead」 枠のサ... 続きを読む

モバイルでのページ遷移を支援しよう（ハンバーガーメニューがあったとしても） – U-Site

2015/10/26 27 users U-Site ハンバーガーメニュー モバイル 原文 著者

ハンバーガーメニュー（3本線メニュー）を利用しているモバイルサイトでは、移動を助けるサポートがサイト全体にわたって必要である。ユーザーがサイトのメインナビゲーションを見つけられなかったり、利用しないことがあるかもしれないからだ。 公開：2015年10月26日付（日本語版）、2015年8月16日付（原文）　著者：Amy Schade 原文（英語）：Supporting Mobile Navigati... 続きを読む

ページ遷移を意識させないアニメーションによるページ切り替え効果実装:phpspot開発日誌

2015/07/27 79 users phpspot開発日誌 アニメーション Ajax URL 特徴

ページ遷移を意識させないアニメーションによるページ切り替え効果実装 2015年07月27日- Animated Page Transition 2 in Ajax | CodyHouse ページ遷移を意識させないアニメーションによるページ切り替え効果実装 Ajaxを使ってはいるものの全くページ遷移を意識させませんが、URLはきっちり切り替わっている所が特徴。 当然きりかわったURLにアクセスしても... 続きを読む

ブラウザ全面を使用したページでスクロール位置を自動的に一定の場所にスナップさせる【jQuery連載14】 | HTML5でサイトをつくろう

2015/07/06 34 users スクロール位置 ブラウザ全面 一定 HTML5 場所

最近のウェブサイト構造の1つに、従来は「会社概要」「お知らせ」といった系統のことなるコンテンツを別ページとして用意しておいた構造から、それらをすべて同じページに配置してみせるシングル（単一）ページという構造もよく見られるようになりました。 シングルページは、ページ遷移の面倒さや待ち時間にストレスからくるユーザーのサイト離脱を防ぐ事ができ、また最近のスマートフォンでのサイト閲覧においても、片手でスム... 続きを読む

WordPress - Inside "dotby.jp 2015" - Qiita

2015/01/21 76 users コーポレートサイト Qiita CMS エフェクト 前提

弊社 dot by dot inc. のコーポレートサイトをリニューアルしたときのいろいろをメモ。見た目シンプルなわりにいろいろあったのでね どんな仕組みでつくる？ 日々増えるニュースを簡単に更新できるようなブログ形式、前バージョンの背景エフェクトもってくる（かつページ遷移においてリロードしない＝エフェクトを途切れさせない）という前提で検討した結果、WordPress を CMS に使いつつ WP... 続きを読む

ページ内に仕掛けられた全てのEventListenersの設定元の一覧をダンプし、必要な対策を施す方法 - latest log

2014/09/04 61 users latest log 検出 2014-09-05 対策 全て

2014-09-05 ページ内に仕掛けられた全てのEventListenersの設定元の一覧をダンプし、必要な対策を施す方法 uupaa 2014-09-05 00:44 iframe 内のページ遷移を親 window で検出… » 続きを読む

気に入ったホテルが割引価格で数十秒で予約可能！「Roomlia 」 | Techable(テッカブル)

2014/08/27 18 users Techable テッカブル 筆頭 苦痛 最小限

今の時代、ホテルを予約する際にはWebサービスやアプリを使って予約する人も多いと思うが、その際に不便に感じる事はなんだろうか？ その筆頭とも言えるのが、ホテルの検索から、予約完了までの手続きの多さではないだろうか？予約完了までに記入する事項がたくさんあったり、複数のページ遷移があるようなサイトでは、苦痛に感じてしまう。 今回はその苦痛を最小限に押さえてくれるホテルの予約アプリ、「Roomlia」を... 続きを読む

Ajaxと組み合わせて便利なHistory APIを使おう - BREAK TIMES

2014/07/08 111 users Ajax BREAK TIMES エンジニア 山田 ブラウザ

2014-07-08 Ajaxと組み合わせて便利なHistory APIを使おう Javascript HTML5 こんにちは。PR TIMESフロント・エンジニアの山田です。 弊社ではAjaxを使ったサイトやサービスも多く運営しています。 さて、そのAjaxですがページ遷移なしにコンテンツを切り替える場合、当然ながらそのままではブラウザのURLも変わりません。これではユーザーが直接読み込み先にア... 続きを読む

ASCII.jp：SVG線画が美しいリッチアニメーションの作り方 (1/2)｜先端サイトに学ぶCSS3/jQueryアニメーションデザイン

2014/06/09 330 users jQueryアニメーションデザイン ASCII.jp 拠点

今回の注目サイト： Béatrice Créations http://carlphilippebrenner.com/portfolio/beatricecreations フランスを拠点に活動するデザイナーであるカール・フィリップ・ブレナー氏のポートフォリオサイト。 ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creat... 続きを読む

Android端末のロック解除時にフルスクリーン広告　cciとDOMが共同開発 - ITmedia ニュース

2013/09/10 389 users CCI スリープモード DOM Android端末 共同

サイバー・コミュニケーションズ（cci）とディー・オー・エム（DOM）は9月10日、Android端末のセキュリティロック解除後にフルスクリーンで広告を表示するシステムを共同開発したと発表した。 スリープモードから復帰する際のセキュリティロック解除後に、フルスクリーンの広告が2～3秒表示される仕組み。Webでページ遷移の間に挟み込むインタースティシャル型広告をロック解除に適用したもので、「ユーザー... 続きを読む

他とは違う？ ”動き”や”レイアウト”にこだわる素敵サイトたち。 / Maka-Veli .com

2013/05/15 75 users Maka-Veli .com レイアウト パララックス 動作

ページ遷移やマウスオン、スクロール、パララックス、ちょっとした動作にこだわりを持たせると、サイトとしてのクオリティを高めてくれます。また、どんどんCSS等も表現の幅も拡がって斬新なレイアウトが目立ちます。そんな動きやレイアウトにこだわったサイトをいくつかご紹介。もちろんノンフラッシュ。 Find & Form | The Digital World Craves Old School Craft ... 続きを読む

Rails 4のturbolinksについて最低でも知っておきたい事 | KRAY Inc

2013/03/11 379 users Rails turbolinks Ajax gem パース

Rails 4のturbolinksについて最低でも知っておきたい事 turbolinksとは、ページ遷移をAjaxに置き換え、JavaScriptやCSSのパースを省略することで高速化するgemで、Rails 4からはデフォルトで使用されるようになります。 高速化は大歓迎なのですが、JavaScriptのイベントの起き方が変わるため、Rails 3までの書き方をしているとまず間違いなく問題が起き... 続きを読む

タブやページネーションを簡単に実装できる！超軽量のJqueryプラグイン「vanity」 | 株式会社LIG

2012/12/14 87 users vanity イージング スライダー jQueryプラグイン

お疲れ様です、ももこです。 今回はタブやツールチップ等、ちょっとした動きをつけるのに便利で超軽量なJqueryプラグイン「vanity」をご紹介します。 jSlider – スライダー デモページ ナビとページ遷移のついた基本的なスライダー、速度やイージングも調整がききます。 jTabs – タブ デモページ コンテンツの切り替えによく使われるタブ。簡単にアニメーションがつけられるのが個人的に気に... 続きを読む

ページ遷移不要の、シンプルなWebサイトを作るための軽量jQueryプラグイン・Pagify - かちびと.net

2012/07/10 398 users net グイン Webサイト ラリ jQueryプラ

よく見かける、ページ推移のない Webサイトを作る為のjQueryプラ グイン。ですが、高機能な物では なく、極めてシンプルで、ライブ ラリも軽量です。サクッと作りた い時のテンプレにもいいかも。 僕の語彙の無い説明よりサンプル見た方が早そうですね。 Pagify ページ推移不要で、内容を書き換えた際もフラグメントURLにしてくれます。以下サンプル。 Sample コード <script type... 続きを読む

そろそろjQuery Mobileでajaxを無効にしてるやつに一言いっておくか - へっぽこプログラマーの日記

2012/04/05 519 users Ajax aja mobile jQuery Mobile

jQuery Mobile | 22:06jQuery Mobileでは、ページ遷移の際に自動的にajaxが利用されています。特に何もしなくても遷移先のページをajaxで取得してアニメーションをつけて遷移するというのがjQuery Mobileの大きな特徴のひとつになっています。しかしながら、巷では、何か問題があるとすぐにこのajaxを無効にするという対処方法が蔓延しているようです。ちなみにaja... 続きを読む

大きなディスプレイでPDFなどの文書を読むときは横スクロールが最強だと思うので実装してみた - Dマイナー志向

2012/03/25 360 users 文書 ディスプレイ Dマイナー志向 横スクロール PDF

以前から、縦幅基準に1ページまるごと収めても十分読めるほどディスプレイが大きいのであれば、PDFビューアのページ遷移は水平方向にスクロールすべきだと思ってたんですね。画面が広いとこういうの無駄だよね。じゃあこうすればいいんじゃね？しかし…しかし既存のPDFビューアで水平方向にスクロールできるものは見当たらず、またPDFビューアを1から作るほどのスキルはないのでどうしたものか。で、そういえばJava... 続きを読む