Journal ジャーナル

WEB制作で通常であれば「パチッ」と遷移する画面を
スタイリッシュなWEBサイトなどで
スムーズに切り替えて連続した体験を提供したいと考えたときに、
まず思い浮かぶのがajaxを利用した遷移の方法です。
ただ、ajaxを利用した画面遷移は同時にしなくてはいけない処理も多く、
導入のハードルが高いのが難点。
ここでは、全３回（予定）でajaxを使わずに、
「ajaxっぽいスムーズな画面遷移」をする方法をご紹介したいと思います。

ajaxをつかった画面遷移は結構大変

うまく使いこなせば素敵なインタラクションのサイトを
作ることができるajaxですが、
通常の画面遷移をajaxで置き換える場合には、
新しく読み込んだコンテンツに対してloadイベントで行われる処理が当たらなかったり、
履歴やheadの中身を更新したりと対策しなければいけないことも多く、
その分工数も増えてしまいます。

ajaxっぽい画面遷移は簡単

ただし、少し工夫することによって、
ajaxで画面遷移を実現するよりも簡単に、
ajaxっぽくスムーズな動きで画面遷移をする
ということができるのでご紹介したいと思います。
例：セナホーム企画様
ここでご紹介するをつかうメリットはなんといっても
ajaxで画面遷移をした後に行わなくてはならない処理
例）タイトルの書き換え、履歴の追加、追加コンテンツにloadイベントで行われる処理を再度実行する、アナリティクス用の処理など
が不要になるということです。
特にスムーズな画面遷移をさせたいというような場合、
見た目にも機能的にもリッチなWEBということが多いでしょうから、
jsのライブラリなどを使用されていることも多いかと多いかと思います。
その場合、loadのタイミングで一度処理を行なうことを前提に作られた
jsのライブラリであれば、ドキュメントを調べて
任意のタイミング初期化の処理をおこなう方法を調べたり
場合によっては少し中身を改変するということも必要になってきますので、
この方法で遷移させるメリットは大きいと思います。
デメリットというか、コンテンツの一部を引き継ぎたかったり
画面上に表示させたまま次のコンテンツを追加したい、
などの場合はこの方法は使えませんのでおとなしくajaxを使いましょう。

ajaxっぽい遷移の原理

ここで紹介する「ajaxっぽい画面遷移」の方法は
説明するのが恥ずかしいくらい簡単な話なのですが、
遷移前と遷移後に全く同じローディング画面を表示させて、
画面遷移がなかったように見せるというのが種です。
【遷移前】
リンクをクリック → 通常のリンクの挙動をストップ → ローディング画面を表示する → location.href でページ遷移する
【遷移後】
ローディング画面を表示する → 画像の読み込み終了後にローディング画面を非表示にする
詳しい実装方法は第２回以降にご説明しますね！
→ ajaxっぽいスムーズな画面遷移の方法実践編（前半）

Written by

Shinji Yamamoto

Relative Post 関連記事

Latest Journal 最新記事

#Tips

ajaxっぽいスムーズな画面遷移の方法（3/3）

Shinji Yamamoto

2017.12.28

#Tips

ajaxっぽいスムーズな画面遷移の方法（2/3）

Shinji Yamamoto

2017.11.24

#Tips