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

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

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

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... 続きを読む

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

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

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

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 で検出… » 続きを読む

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... 続きを読む

jQueryベースのWebフォームライブラリ「jFormer」 | DesignDevelop

2011/04/16 323 users DesignDevelop jFormer Ajax 多く

WEBサイトには欠かせないフォーム。様々な情報のやりとりに利用されていて、多くのWEBサイトで利用されていますが、今回紹介するのは一般的なコンタクトフォームから、ログインフォーム、EC用のフォームまで、様々なフォームに対応したjQueryベースのWebフォームライブラリ「jFormer」です。 「jFormer」はバリデーション機能も備えたフォームのフレームワークで、AJAXを使ったページ遷移や、... 続きを読む

モダンなＵＩを活用したショッピングサイト運営用phpオープンソース「LiteCommerce」:phpspot開発日誌

2010/12/28 114 users solution phpspot開発日誌 デモ画面 バック

Free Ecommerce CMS solution: software for your online store | LiteCommerce モダンなＵＩを活用したショッピングサイト運営用phpオープンソース「LiteCommerce」 最近公開されただけあって、アイテムをドラッグ＆ドロップでバッグに入れたり、ページ遷移に一部ajaxが使われていたりします。 以下がデモ画面。アイテムや文字... 続きを読む

[JS]ページ遷移にフェードやスクロールのアニメーションを加えるスクリプト -Pageswitch | コリス

2010/11/23 257 users コリス フェード example スクロール スクリプト

デモページ Pageswitchの実装 実装は簡単です。 HTML 既存のHTMLに、特に手を加える必要はありません。 idに使用している「example」は適当なものに変更できます。 <div id="example"> <a href="http://coliss.com/">Example #1</a><br /> <a href="http://www.example.com">Examp... 続きを読む

Ajaxで同一ページ内でページ送りを実現する「Ajax scrolling pages」:phpspot開発日誌

2006/10/18 138 users スクロール Next Page Ajax デモページ ページ

Ajax dynamic pages pages Ajaxで同一ページ内でページ送りを実現する「Ajax scrolling pages」。 デモページの「Next Page」を押すと、ずずずっと次のページがスクロールでアニメーションされ表示されます。 更に「Next Page」で、どんどんページ内でページ送りが出来ます。 いちいちページ遷移が行われることなく、スムーズに次のページに移動できる上、... 続きを読む

[N] ウェブページに付箋機能をつける「noteit」

2006/07/03 61 users Ajax CGI 付箋 ウェブページ ウェブサイト

ウェブページに付箋機能をつける「noteit」 2006年07月03日 12:23 --> ウェブサイトに付箋機能をつける「noteit」というCGIがありました。 ・今あなたが管理しているウェブページに付箋が貼れるようになる。 ・Ajaxな通信を用いたページ遷移のない付箋編集。 ・幅広い対応ブラウザ。 ・編集内容のRSSによる配信。 ・ひとつのCGIでウェブページをいくつでも付箋化。 ・軽い。(... 続きを読む