【JavaScript】とても簡単なプレローダー実装について

投稿日:

プログラミング初心者の勉強ブログ #116

なんだかんだやってなかったプレローダー実装。画像や動画の読み込み処理が完了するまでの間、読み込みが中途半端な状態を画面に表示されることがなくなる。今回は全体でやったが、画像のみ読み込み完了後に表示などもできる。こういうのやりだすと処理速度をいかに早くさせるか、みたいなところも気になりだすが、とりあえずそんな技術はないので単純なプレローダー実装のみを行っていく。

 

目次

 

プレローダ

ローダーgif

プレローダーとは画像のようなローディング時のグルグル回るやつのこと。今処理してますよ、もうちょい待って、を伝えるUI。あんまりにも長いと離脱が起きるので注意が必要。

 

実装の流れ

簡単に実装できるプレローダについて、順を追ってまとめる。と言っても2ステップ。

 

1、gifの用意

表示するローダーはgifを使うのが簡単。SVGとCSSとJSでイケてるローダーを作ることも可能な気がするが、そんな技術はないので便利なgifを使っていく。

Preloaders.net - Loading GIF, SVG & APNG (AJAX loaders) generator

上のリンクのサイトからダウンロードすれば、ある程度バリエーション豊富なローダーgifを入手することができるのでおすすめ。

 

2、JavaScriptのイベントパンドラ「load」を使う

JSはユーザのアクションを読み取り、そのアクションをきっかけに処理を開始することができる。clickやscroll、keypressなど色々あるが、その中の1つにloadイベントがある。

loadイベントは、window.load()とすることで、ユーザーが開いているウィンドウの読み込みの完了をきっかけに、カッコ内の処理を実行する。つまり、最初の段階でローダーを表示させ、このwindow.load()のカッコ内にローダーを消す処理を入れれば良い。JSさえちゃんと読み込まれていれば、これだけで完成する。

 

作成したもの

preloader_demo

https://gslab0707.bob-pop.com/cheese_academy/

 

JSの読み込みタイミングはややこしい。通信状態とかデバイスによって、うまいこといかないときがある。

 

実際のコード

全てプレローダ部分のみ抜粋して記載。JSのみで書いているので、window.load()は、window.addEventListener('load', () => {})となる。

 

index.html

 

main.js

 

style.css

 

感想いろいろ

色々試して思ったことを書いていく。

 

とりあえずローダーgifはbodyの一番上に書いておく

大した話ではないが、ローダーのgifをできるだけ早めに読み込ませときたいと思った。もしローダーgif画像が読み込まれなかった場合、真っ白な画面が表示されることになり、それはちょっといやだ。

とりあえずできる範囲で考えたとき、先ほどのhtmlの

この部分をbodyのどこに置くかでpreloader.gifの読み込み順が変わる。後ろに書くより早めに書いといたほうが多少は読み込みが早くなる。そもそもgifのバイト数を小さくする方が大事だが、できるだけ画質も保ちたい。gifの表示サイズを小さくすると線がまだ綺麗に見えるので、そんな感じでごまかした。

 

networkスクショ

body一番上に書いた場合、ディベロッパーツールのNetwork上で7番目に読み込まれている。bodyの最後に置いたらこれがもっと下になる。

Resource Timing について | Tools for Web Developers | Google Developers

上のリンクには、このNetwork欄の用語の解説がある。ネットワーク結構おもしろい。まだあんまよくわかってないが勉強にはなった。

 

更新したjsファイルやcssファイルが本番環境で反映されないパターン

FTPで更新したjsファイルをサーバーにあげても、全然反映されないことが多発した。ブラウザのキャッシュを消しても、chromeでスーパーリロードしても反映されない。色々原因を調べると、どうやらNginxのキャッシュが強いのが問題らしい。キャッシュが残るのは手元のPCのブラウザだけでなく、Appサーバも同様であり、プロキシサーバー経由の場合はこれを含めた3つのキャッシュがあることを意識しないといけないとのこと。

解決策としては、Nginxに残るキャッシュを削除するか、または

のようにファイル参照用linkタグhrefの値の最後に「?201905011046」みたいな形でパラメータをテキトーにつけることで、リクエスト時に新しいファイルを参照してますよ、とサーバーが解釈する(らしい、実際これで解決した)。この「201905011046」は一応日付にしてあるが、aaaとかでも反映された。

 

まとめ

最近インパルスにハマっている。あのお笑い芸人のインパルスだ。なんで今?と言われてもよくわからんけど、きっかけは多分カジサックチャンネルで堤下復帰の回を見たからだと思う。堤下もおもしろいが、やっぱり板倉がおもしろい。インパルスにハマっているというより、板倉にハマっている。ちょっと前はハライチの岩尾にハマっていた。どちらも系統は似ている気がする。

板倉の発想がかなりツボだ。

ここから先は、まず上の動画を見てから読んでほしい。

例えばこの「究極の脱出ゲーム」は、ライアーゲーム的な世界観で、もし挑戦者がめっちゃバカ1人だけだったらどうなるか、みたいな想像が膨らんでできたコントだ。ライアーゲーム的な状況は、挑戦者が賢かったり、死にたくないという心理があるからこそ、主催者側(今回の場合、板倉扮するピエロ)の用意した現実離れしたステージによって感情が掻き乱されたり、必勝法がどうのこうのとかが始まりゲームが盛り上がる。

この当たり前に対しメスを入れているのが板倉の発想力だ。板倉はライアーゲーム的な世界観を忠実に再現しつつ、その世界観を逆手にとりユーモアに変えている。板倉が発する言葉から、ゲーム内容や挑戦者の心理描写が本来の世界観を細かく再現しているからこそ、そこから突き放されたときモーレツな面白さを感じる。

板倉がこのコントを考えるにあたって、どのようなきっかけがあったのかを妄想する。とりあえず、板倉はライアーゲームを見たんだと思う。ライアーゲームを見たとき、板倉はふと主催者側の気持ちに立った。「自分の作ったゲームや世界観で、多くの人の感情をコントロールするのがきっと楽しいんだろうな。でもこれは挑戦者ありきのゲーム性だよな。もし挑戦者がバカすぎてゲームの内容すら理解できないやばい奴だったら、主催者は困るだろうな。」

僕もライアーゲームを見たが、どちらかというとゲームの攻略に頭が行くので、挑戦者側の心理で見ていた。普通挑戦者側でみると思う。板倉はここで 主催者側の心理を考えたところに、このコントを作るきっかけがあったと考える。

僕が板倉をすごいと思うのは、この視点の転換と発想力もそうだが、それよりも、そのコントのシチュエーションの世界観が繊細なところだ。そして、ライアーゲーム的な世界観を繊細に再現しておきながら、あくまで細部の設定は板倉オリジナルであるところだ。

「喜ぶべきじゃないか、なにせ君は、1329万4039人の中から選ばれた、幸運の持ち主なんだからね。」

「恐怖に駆られた人間が奏でる音色はどんな名曲もかなわない。さあ、いい音色を奏でてくれよ。」

コント内に散りばめられた言葉から情景や世界観が伝わる。そして、こんだけ中二チックな言葉であっても、板倉が言うとおもしろい。板倉の意図が明確に伝わるからだ。もしこのコントを狩野英孝がやったとしたら、印象が変わってくると思う。

デザインを勉強したとき、「要素は全て意図したところに置かなければならない。全ての配置に意味を持たせるべき。」と学んだが、今回の話もそうだと思う。板倉はこれらのフレーズを全て意図して意味を持たせて放っていることが伝わる。そこに洗練されたものを感じるから、僕は最近板倉にハマったのである。

以上ありがとうございました。

-プログラミング学習
-,

Copyright© s u p ? , 2019 All Rights Reserved.