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

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

FC2ブログ公式「爆速テンプレート」が編集できない理由を徹底解析

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

FC2ブログの爆速テンプレートで実装するInstantClickは通常のFC2ブログで使えるのか?爆速が編集やカスタマイズできない理由も徹底解析


こんにちは。「ゆうらり Happy Smile」を運営するFC2ブロガーのMです(^^)FC2ブログ公式テンプレートとしてリリースした、阿部寛のホームページ並みに凄い!と話題の「爆速テンプレート」。


今回は、爆速テンプレートが採用したInstantClickについて書こうと思います。


さまざまなサイトで書かれた評判を拝見してみると、爆速の主要因は、どうやらこの InstantClickの導入が一役買っているのだそうです。


▼爆速公式テンプレートのページスピードが体感できるサンプルはこちら


>>爆速テンプレート サンプルブログ


FC2の運営サイドが、広告を排除してまでページの読み込み速度をとことん追求した爆速ぶりには、少なからず驚かされた次第です。


そして、この爆速テンプレートに実装された、さまざまな工夫を素人なりに徹底解析。爆速につながるWeb技術というものを、何とか当ブログで真似できないものかしら?と試行錯誤を繰り返しながら四苦八苦を続けてます(^_^;)


結論を先に申しますと、冒頭に書いたInstantClickは当FC2ブログに使うことが難しいことが分かったので、いったん断念しました。


しかし同時に、FC2の運営サイドが爆速テンプレートを一切カスタマイズ出来ない仕様に作った理由も分かった気がしました。


前回の第2弾に続き、第3弾は失敗談となってしまいましたが、努力は決して無駄にはなりませんでした。


その悪戦苦闘ぶりについて今回はつづっていくことにします。


▼前回の記事

FC2ブログ公式「爆速テンプレート」に搭載のDNSプリフェッチとは?

こんにちは。FC2ブログをはじめて5年9ヶ月目のブロガーMです。FC2が公式テンプレートとしてリリースした爆速テンプレートが、阿部寛のホームページ並みに凄い!と話題になってますね(゚o゚;;ちなみに、この爆速テンプレートは編集やカスタマイズが一切出来ない仕様になっているので、ボクがこのテンプレにお世話になることはあり得ないわけなんですが。しかし、FC2の運営サイドが、広告まで排除するという英断の末に作った作品なだけ...


InstantClickとは?


爆速テンプレートが採用してる「InstantClick」は、『ページの先読み』と『pjax』を簡単に実現してくれるJSライブラリのひとつ。


要するに、クリックする前のリンク先を、マウスオーバーした時点から裏で先に読み込んでおき、bodyの中身を差し替えるというものです。


ちなみに、リンクをマウスオーバーしてから実際にクリックされるまで200~300ms程度の時間がかかるとされてます。InstantClickはこれを利用してページを先読みするJSなんですね。


先ほど貼り付けた爆速テンプレートのサンプルでもおわかりの通り、InstantClickが実装されると、想像以上に体感速度が速く感じられるようになります。



爆速が採用した「InstantClickは自分のFC2ブログで使えるのか?」という問題について


もしも、InstantClickというJSが自分が利用するFC2ブログのテンプレートに実装できれば、ページ読み込み速度の改善になることは間違いないはず。


そこで、ボクはさっそくInstantClick使い方導入方法を徹底的に調べまくったのです。


いつも思う「技術系サイトは記事内容がひどい」


調べるといっても、手当たり次第ネットで検索するだけですが(^_^;)


しかし、毎回のように感じることがあります。このような事でWeb技術系のサイトに書かれた記事はあまりにもひどい(汗)


たった数行の感想文だけのもあれば、他のサイトのコピペばっかり。詳しく解説されてるサイトに行き着いても、「初心者にも分かりやすく」とか「入門編」など謳ってるわりには、読む人が到底理解できないと思われる専門用語のオンパレード(汗)


おまけに、肝心の知りたい箇所については完全スルー。まったく、誰向けに書いた記事なのかがサッパリわからん
(*`へ´*)


そもそも、専門用語だらけでも内容が理解できる人はそのようなサイトは参考にする必要がないですよねぇ…。



InstantClickを導入した場合、ボクが恐れたリスク面


結局、InstantClickを実装した場合のリスク面など肝心な情報を収集することが出来ないままでした。


ちなみに、リスク面としてボクが恐れたのは、GoogleアナリティクスFC2ブログのアクセス解析アドセンスを始めとする外部から読み込むJSに何か不具合が出やしないか?ということ。


これらについて、明確に記載があったのはアナリティクスがカウントされなくなるという記述だけでした(汗)


それでも、モノは試しということで…。さまざまなサイトの記事を見比べたうえ、下記の手順で自分のブログに実装してみたのです。



FC2ブログに実装したInstantClick導入手順


InstantClickをダウンロードして、解凍した中身をFTPにアップロードする。


②そして、</body>の直前に下記のようなJSコードを書きました。唯一のリスク面について記載のあったアナリティクス対策も施してあります。


<script data-no-instant="true" src="https://file.blog.fc2.com/yularihappysmile/instantclick.min.js" ></script>
<script data-no-instant="true">
//<![CDATA[
/* Google Analytics Code */
(function(i,s,o,g,r,a,m){
i['GoogleAnalyticsObject']=r;
i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments);},i[r].l=1*new Date();
a=s.createElement(o),m=s.getElementsByTagName(o)[0],a.async=1,a.src=g;
m.parentNode.insertBefore(a,m);
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-○○○○○', 'auto');

InstantClick.on('change', function () {
ga('send', 'pageview', location.pathname + location.search);
});

InstantClick.init();
//]]>
</script>

導入手順だけなら、たったこれだけで、とても簡単な気がしたんですけどね(^_^;)


あとは何か不具合が出るのかどうか…。それがとても気がかりでした。



自分のFC2ブログにInstantClickを実装したら不具合が発生!!


InstantClickを実装後、何となくリンク先移動が速くなったような気がしました。


対策済みのアナリティクスのほうは、無事にカウントされている。それに比べ、FC2ブログのアクセス解析は何だかよく分からないけど、チョビチョビとカウントはされてるみたい(汗)これって、どうなんだろう(゚o゚;;見た目だけで確認してても不具合があるのかが見当つきませんでした。


しかし、致命的な不具合が出てきました。ページ移動すると、移動後にブログ表示が真っ白に!!どうやら、CSSが切れてしまってるようです(汗)再読み込みをすれば元どおりになるのですが…。


どうすれば良いのか。まったく分からなくなりましたよ(^_^;)やっぱり、InstantClickを諦めるべきなのか?!



InstantClickを導入後に生じた不具合についてFC2ブログのテンプレート製作者Akiraさんに原因を質問してみた


さんざん四苦八苦して導入したInstantClickです。やめるのなら、なぜうまくいかないのか?をどうしても知りたくなりました。


そこで、ボクがこのFC2ブログを運用するにあたり大変お世話になっている、このテンプレートの作者Akiraさん質問してみました。テンプレートの話しとは無関係なので怒られるのでは?と思いましたが(汗)


Akiraさんの「神対応」に感謝!!


ボクの質問に対し、何と、Akiraさんはもの凄く丁寧かつ詳しい解説を添えてご回答くださったのです。とても親切な方なんです!!


おまけに、ご説明いただいた内容は、ボクのような素人でも分かりやすいうえ、ボクが当初から恐れ心配していたリスク面についても先読みして明快な回答をして頂いたのです
(゚o゚;;


まるで「」と呼びたくなるようなスゴい方です。そして、ボクの心配事を先読みできるなんて、まるでInstantClickの人間版みたいな方だなぁと思いました(^_^;)



「FC2ブログのInstantClick導入について」テンプレート製作者Akiraさんによる解説


InstantClickを導入した結果、ボクのFC2ブログに生じた不具合について、Akiraさんの解説は次の通りでした。ボクの能力ではうまく書き表せないため、引用させてもらいますm(__)m


> 簡単に導入するのは難しいものなのでしょうか?~

静的サイトなら容易です。動的サイトでは難しいです。FC2ブログは後者で、Mさんの場合はアフィリエイトをされていますのでバリバリの動的です。

instantClick(以下 ic とします)が速い仕組みは
・preload (プリロード)
・pjax (゚ピージャックス)
大きくこの2つの応用です。爆速ではこれに足すことのService Workerというのも使ってますがこちらの説明は今回は割愛します。

Mさんのページで障害が出たのはpreloadではなくpjaxの性質の方です。pjaxというのは、ページを遷移させずにbody内の一部を「差し替える」ことで遷移したように見せる技術です。
マウスがリンク(a要素)の上を通過するとpreloadが始まります(これはicの仕組みです)
preloadというのは将来的に必要となるリソースを先読みする技術で、ブラウザ実装です。
で、リンクを実際にクリックすると、preloadで先読みされたデータのbody部位の差し替え(pjax)が起こります。

preloadとpjax、どちらがより「速さ」に関係しているかというとpjaxの方です。何故かの説明をこれからします。

pjaxは原則として domcontentloaded(ドムコンテントローデッド)系のJSを再実行しません。これは「DOM(htmlのこと)がローディングされたら実行」というタイプのJSで、どれが該当するかというとまぁテンプレート内にあるJSほとんどがそれです。
要するにJSを実行してくれません。

analyticsのコードをMさんご自身がここに記載されていますよね。
これはic用の特別な書き方(data-no-instance)で(カスタムデータ)でicに紐付いています。
pjaxはページ遷移を行わないのですから、当然analyticsも取得できないですよね。そのために「クリック」が行われたら強制的に再実行を行うわけです。これ(data-no-instance及びonChangeによる実行)をやらないとクリックしてもカウントされません。

結局は他のJSにも当てはまります。
例えばトップページの「リスト系ページ送り」こちらもJSで行いますが、ページをローディングする都度実行させないとページの取得ができません。そのため
onChange というic用JSでカプセル化して強制再実行を行う必要があります。


引用:公式「爆速」テンプレートが登場しました - FC2ブログのあれこれ

そうだったのか!!ボクのテンプレートに存在する、あらゆるJSが実行されなくなったんですね(汗)


Akiraさんの解説は続きます。


結局のところテンプレート内にあるJSはほぼ全て(広告も含め)、クリック後の実行が必要です。
pjaxが何故速いかというと、DOMを読む(これもpreloadで先読みされています)以外のことを一切行わないからなんですね。でもJSを実行させる必要があれば当然スピードは落ちます。
リンククリック後にJSを動作させることはせっかくのpjaxの性質を削ってしまうことになります。
爆速テンプレートでは広告が表示されませんよね。これはpjaxでの広告JS実行が困難なのと、仮に実行できるとしてもスピードに影響が出るためです。

icを入れたいならばテンプレート内のJSを全て削除する、ぐらいの思い切りは必要でしょうね。
icに限らずpjaxというのはJSのライフサイクルも考えなければいけません。
例えばFC2ブログでは全ページで全く同じJS内容、というわけにいきません。例えば個別記事ではクッキー用のJS(コメント欄で名前やURLの再記載を不要にするため)が要りますが、トップページにコメント欄はありませんのでこのJSは不要ですよね。
ページ種毎に異なるJSが含まれると調整がかなり大変です。なにせページを実際に遷移させているわけではないのでFC2独自変数によるエリア分けも機能しません。
またページ送りも同じです。個別記事とトップページではJSの仕組みが違いますのでページ種ごとに内容を切り替えなければいけません。切り替えが上手くいかなかった場合にはJSエラーとなり、icの場合は恐らくどこかの時点でページの取得不可(ホワイトアウト)が起こることになります。

あとはbodyしか差し替えませんのでhead内容がそのままです(タイトル要素だけは切り替わります)
なのでブログカードが使えませんね。どのページを表示させても「初回に開いたページ」のhead内容のままです。

広告も事前にJS内容を把握してic用実行コードで記さなければ成果報酬が発生しなくなったり取得エラーなどが起こります。

いずれにしろicを導入するのであれば「JSは一切使わない」ぐらいの心構えが必要かと思います。
ページ速度を優先するあまり必要なものが表示できないとなれば本末転倒です。そのあたりは個人のバランス感覚なのでなんとも言えません。
爆速が「広告なし」「プラグインを制限している」のはつまりは「JSの排除」です。

Mさんのブログのデザインやレイアウトを保った上でicを導入するのが不可能か、と問われればNOではありますが、JS内容の大規模な変更及び切り捨てが必要です。広告を実行させるのであれば爆速ほどの体感速度は得られません。今の感じだと「割と速い」ぐらいで終わってしまうと思います。労力・犠牲と得られるものが見合わないように思います。


引用:公式「爆速」テンプレートが登場しました - FC2ブログのあれこれ

▼関連記事

公式「爆速」テンプレートが登場しました

あんたが宣伝してどーすんの、って感じですが。
公式テンプレート に 爆速 の名を冠するテンプレートが追加されたそうです。...



おわりに/爆速テンプレートの編集やカスタマイズが一切できない仕様になってる理由


Akiraさんの神のように詳しい解説で、ボクの FC2ブログにInstantClickを導入することは、Googleアドセンスをはじめとして、さまざまなリスクや不具合を生じさせる結果となることがよく理解できました。


今回、Akiraさんの解説を記事に引用させて頂きましたが、このような疑問はおそらく大勢のFC2ブロガーさんが抱いてるのではないでしょうか?!これに関して、ネットでいくら検索しても適切な説明を得ることは出来ません。Akiraさんの解説は、今後のFC2ブログを運営していくにあたり、大変貴重なご意見だと思ったので、本記事に取り上げさせてもらった次第です。


そもそも、ボクのように広告JSを貼りまくってるブログに導入したところで、苦労したのに見合うような効果は得られないのですね(^_^;)


よって、ボクのFC2ブログにInstantClickを導入するのは断念しました。とても残念ではありましたが、今回の試行錯誤を通して、ひとつ分かったことがあります。


それは、なぜFC2の運営サイドが爆速公式テンプレートの編集やカスタマイズを一切出来ないようにしているかの理由です。


カスタマイズを自由に認めてしまえば、JSなどが増えることで爆速テンプレートの特徴や機能が失われてしまうし、そもそも不具合が続々と発生してしまうんですよね(汗)


そんな事にでもなれば、サポートも対応しきれなくなるし…。広告を排除した意味もなくなってしまい、運営側にとってみれば、爆速テンプレートを作ったメリットが何も存在しなくなってしまうでしょう(^_^;)


ともかく気をつけたいのは、爆速テンプレートを利用するつもりなら、アドセンスやAmazonなどを始めとするアフィリエイトは一切やめたほうが良いということ。


爆速はカスタマイズが一切出来ないのに何を言ってるの?と思われそうですが、個別記事を書く際に一応、手を加えることは出来ますから…。


爆速テンプレートを利用する時は、アフィリエイトで物を売るのではなく、将来のインフルエンサーを目標に、自分の名前を売る心算で臨むくらいのほうが良さそうです。


いまの仕事にうんざりしているなら、この本を読め!そして自分を売りだせ!>NYタイムズ、実用書部門で初登場第1位!
Twitter、YouTube、Facebook、Instagram…「次世代のザッカーバーグ」と称されるゲイリー・ヴェイナチャック。ソーシャルメディアの世界で最も稼ぐ伝説の起業家が、ビジネスにおけるSNS活用の全テクニックを伝授する。





関連記事

コメント 0件

コメントはまだありません
未分類 (0)
シン・胃がん闘病記 (0)
胃がん(ブログ、闘病記録、胃癌ニュース、私の症状など胃ガン情報全般) (5919)
┣  胃がんブログ (262)
┣  よりぬき 胃がんブログ (16)
┣  胃がん闘病記・日記 (5581)
┣  酒場放浪記 (9)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (35)
┗  がん治療のクラウドファンディング (10)
胃がん History (84)
┣  ステージ3B 多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (26)
がん のこと(ガン情報全般) (478)
┣  がんブログ (269)
┗  がんニュース (209)
胃がん 障害年金ブログ (71)
┣  障害年金 - 準備編 (23)
┣  障害年金 - 審査から年金受給まで (12)
┣  障害年金 - 審査請求・不服申立 (26)
┗  障害年金 - 再審査請求 (10)
Amazon (ニュース、お得なセール情報など) (137)
┣  Amazonセール (2)
┗  📱kindleセール (134)
おもしろグッズ (10)
今日のエッセイ (102)
ニュース・芸能・話題 (743)
┗  転職・キャリアアップ (18)
恋愛・人間関係 (29)
終活ブログ (10)
グルメ (69)
┣  低糖質レシピ (9)
┗  お酒の飲み方 (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)