あなたの興味を広げる話題を。

新潟県 中子の桜©Koichi_Hayakawa(Licensed under CC BY 4.0

【コピペで簡単】 スマホ用Webサイト、ブログのクリック遅延の解消法

2019年03月15日
FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など 0

こんにちは。FC2ブログを運営するブロガーMです。最近は、スマホを使ってWebサイトブログを閲覧するのが主流になりました。


今回は、スマホでWebを見る時にイライラする原因のひとつ「Clickイベントの遅延」について、その対策をご紹介します。とっても簡単だったので、さっそくボクのFC2ブログにも実装してみましたよ(^^)


【コピペで簡単】 スマホ用Webサイト、ブログのクリック遅延の解消法


ちなみに、ボクだけに限らず、ブロガーさん達は皆さんがスマホ主流の流れに沿って自分のサイトをレスポンシブデザインに変更してみたり、ページの読み込み速度を改善してみたり。「いかにしてスマホで快適にブログを見てもらうか」を主眼に、さまざまな工夫をなさっていることと思います。


今回ご紹介する方法は、たった数行のコピペだけで出来る簡単なClickイベントの遅延対策です。ぜひともご参考になさって頂ければ幸いです(^^)


実装手順


では、さっそく見ていきましょう。今回は、スマホの場合に起きるClickイベントの遅延対策としてFastClickというJSを使います。


①FastClick.jsを読み込む


まず、下のコード
<head>
の中に記述します(タグの<>は半角に直して下さい)。

<script type='application/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js'></script>

②FastClick.jsの初期化


続いて、もうひとつ。次のコードを、先ほどのコードの後に差し込みます(タグの<>は半角に直して下さい)。

<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
</script>

以上です。たったこれだけ?(゚o゚;;そうです。これだけです。簡単でしたね!!


たったこれだけで、スマホから「aタグ」などをクリックした時に、一瞬で読み込みが始まります。



FastClick.jsは、すべてのブラウザに対応する遅延解消法としておすすめ!


スマホのClickイベントの遅延対策としては、他にもいろいろ考えられます。しかし、すべてのブラウザに対応させる遅延対策としては、現状ではFastClick.jsが一番最適な方法のようです。


使用上の注意点


FastClick.jsを使うことによる注意点がひとつ。これを実装すると、ダブルタップによるズームインズームアウトが効かなくなってしまいます。


でもまあ、スマホでブログを閲覧してて、表示を拡大させるのにわざわざダブルタップをしなくても…ということも言えますから(^_^;)


内容(「BOOK」データベースより)
Web担当者、マーケターの必携書!第一線のアナリストが教える「データの見方」と「改善ポイント」。この1冊で、長く使える基礎力と実践スキルを身につける!





関連記事
M
この記事を書いた人: M
ブロガー/FC2公式おすすめブログ認定/企業家/投資家/Fashion研究家/不動産コンサルタント/会社経営/将棋六段/おうちごはん男子部/料理を悪戦苦闘修行中/ヘッドスパとスイーツをこよなく愛する46歳/人生なんて気持ち次第‼︎きっと何くるないさ〜(´ー`)
FC2ブログオフィシャルおすすめブログ認定バナー日本ブログ村 プロフィール

この記事が気に入ったら
シェア!

 シェア
data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="8,2" data-matched-content-columns-num="1,4"
現在の人気記事はコチラ!

コメント 0件

コメントはまだありません
未分類 (0)
シン・胃がん闘病記 (0)
胃がん(ブログ、闘病記録、胃癌ニュース、私の症状など胃ガン情報全般) (5925)
┣  胃がんブログ (264)
┣  よりぬき 胃がんブログ (16)
┣  胃がん闘病記・日記 (5585)
┣  酒場放浪記 (9)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (35)
┗  がん治療のクラウドファンディング (10)
胃がん History (84)
┣  ステージ3B 多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (26)
がん のこと(ガン情報全般) (481)
┣  がんブログ (272)
┗  がんニュース (209)
胃がん 障害年金ブログ (71)
┣  障害年金 - 準備編 (23)
┣  障害年金 - 審査から年金受給まで (12)
┣  障害年金 - 審査請求・不服申立 (26)
┗  障害年金 - 再審査請求 (10)
Amazon (ニュース、お得なセール情報など) (137)
┣  Amazonセール (2)
┗  📱kindleセール (134)
おもしろグッズ (10)
今日のエッセイ (102)
ニュース・芸能・話題 (745)
┗  転職・キャリアアップ (19)
恋愛・人間関係 (30)
終活ブログ (10)
グルメ (71)
┣  低糖質レシピ (10)
┗  お酒の飲み方 (1)
胃切除後の食事・レシピ (669)
┣  ご飯・おかゆ・和食 (174)
┣  おかず (139)
┣  味噌汁・スープ (73)
┣  カレー関係 (66)
┣  パン・洋食 (63)
┣  麺類 (112)
┗  その他、簡単レシピなど (39)
ブログ (215)
┣  FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など (176)
┣  Google Adsense (アドセンス) (8)
┣  趣味や将棋のこと (27)
┗  ファッション (4)
iPhone の使い方・アプリなど (31)
司法書士 (26)
┣  仕事・実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (27)
┣  家電 (11)
┣  ホーム&キッチン (4)
┣  ビューティー&ケア (5)
┣  QOLの改善&ヘルスケア (2)
┗  お酒 (5)