((7回目の出直し🌼))

好きなことを自分のペースで、のんびり更新

【前編】はてなブログの記事に、Javascriptを使って共通パーツHTMLをインクルードする

はてなブログには、記事中にパーツをインクルードする仕組みがありません。これは意外と困りますよね。
記事にベタ書きをしないで、複数の記事に同じコンテンツを動的に埋め込む方法を試してみます。

困っていること

はてなブログには、いわゆるインクルードの機能がありません。インクルードとは、小さなHTML(完成系というより部分的なHTML)を複数のコンテンツに差し込むような機能です。
インクルード元のHTMLを直すと全部のページに埋め込み直しがされて、1ファイルだけメンテナンスすれば済むようなものが理想です。

やるとしたらいくつかの方法がありますが、ベストマッチとは程遠い感じではありました。

ヘッダー、フッターを使う

近しい機能は、デザインメニューの記事ヘッダーとフッターですね。
f:id:kanaxx43:20200607002745p:plain
デザイン>記事で変更可能なやつ

これを使うと、全部の記事にもれなく指定のコンテンツが差し込まれます。全体的に差し込むのであれば、これでもいいと思います。 ただ、以下の部分をあきらめる必要があります。

  • HTMLを差し込む場所のコントロールはできない
  • HTMLを差し込む記事と差し込まない記事を選べない
  • 差し込むHTMLの内容を記事ごとに変えられない

これはこれで使い道はあるのですけど、やりたいこととは程遠いです。

定型文機能を使う

定型文を登録しておいて記事に貼り付ける機能はあります。もちろん使っています。
f:id:kanaxx43:20200607000036p:plain
記事作成画面の右にあるやつ

ただ、これの最大の弱点は「定型文は貼り付けたあとはただの文字列」だということですね。記事を書き終わったあとに使った定型文を直しても何も起きません。書き換えたい場合は、全ての記事を1つ1つ手直しすることになります。面倒だ。

確かに楽に間違いなく入力はできるけど、これじゃないんですね。

無いなら作ろう

幸い、はてなブログの記事内でもJavascriptで書いたプログラムが動きます。それなら、作ってしまおうじゃないか。
ということで、Javascriptでコンテンツをインクルードする方法を作って試してみます。

一つだけ疑問があるのが、初期段階でHTMLに書き出しされておらず、あとから動的に埋め込んだコンテンツがGoogleにどのようにキャッシュされるのか?という点です。それもこの記事で検証してみることにします。

キャッシュの具合によって、完全に補助的なコンテンツだけにするか、結構な重要コンテンツを埋め込むのか決める予定です。 (修正のめんどくささから解放されるので、Googleのインデックスはあきらめてもいいかも。零細個人ブログだし)

作ったもの

この先は、実際に作ったものがあります。作り方、使い方は次回以降の記事に書く予定です。

仕組みは、 - 記事本文中にテンプレートとなるHTMLを用意しておき - 記事表示時にスクリプトを使って外部からデータを持ってきて - テンプレートを埋めて完成させる という流れです。

記事が表示されたときに外部からデータを持ってくるので、外部のデータをメンテナンスしておけば、はてなブログで記事編集をせずに差し込みコンテンツが反映されるということです。

テンプレート

今回はこんな感じです。
テンプレートのHTMLは内容がほとんどないので、そのまま見ても面白みはありません。

この線の下から、スクリプトで作ったコンテンツです。  
<hr>
<p>今日の日付:<span id="js-dynamic-today"></p>

黒の点線の中は、外部コンテンツをfetchしてます。<br>
<div style="border : dotted 3px #333; margin:5px; padding:5px">
<div id="js-dynamic-contents">
  <div id='js-dynamic-contents-category'></div>
  <div id='js-dynamic-contents-html'></div>
  <p>最終更新日:<span id="js-dynamic-contents-updatedAt"></span></p>
</div>
</div>
<br>

テンプレートが表示された画面
上のHTMLが画面に表示されると、茶色で囲ったような状態になります。普通ですね。
f:id:kanaxx43:20200606225340p:plain

スクリプトが動いたあとの画面
スクリプトを動かし動的に描き替えると、青枠で囲ったような状態になります。それっぽくなりました。
f:id:kanaxx43:20200606225752p:plain

差し込みコンテンツ用のデータは、microCMSというサービスに置いてあります。
f:id:kanaxx43:20200607004258p:plain microCMSに入力した値

このサービスの何がいいかって、リッチテキストエディタがあるので埋め込むコンテンツをHTMLのまま保存できるのですよね。はてなブログとHTMLのタグ解釈が異なる部分はありますけど、HTMLを手書きするより全然楽です。

では、実際に動かしてみます。

この先、ダイナミックコンテンツ

この線の下から、スクリプトで作ったコンテンツです。


今日の日付:

黒の点線の中は、外部コンテンツをfetchしてます。

最終更新日:



ここまで。

上手くいきましたね。この上にある黒の点線の枠にmicroCMSのデータがそのまま放り込まれてるはずです。

さて、Googleのキャッシュはどうなる?

この記事の2つ目の目的です。
強引なクライアントサイドインクルードをすると、Googleはどのようにこのコンテンツをキャッシュするのだろうか?

数日経ってからをインデックスの状況を調べる予定です。
まぁ、そんなに気にすることはないと思いますけど。調べてみることは大事ですから。

1日後

Googleのキャッシュデータを見てみました。
f:id:kanaxx43:20200607122229p:plain

なんとクライアントサイドでレンダリングした文字列の情報がインデックスされているではないか!? 赤で囲った文字列は、この記事のHTMLには書いてないものです。microCMSから持ってきてHTMLとして表示しているものです。

Google Search ConsoleでキャッシュされているHTMLを確認してみましたが、スクリプトでインクルードした文字列がちゃんと入っていました。 f:id:kanaxx43:20200608190207p:plain

2020年のGoogleクローラーでは、ちゃんとインデックス化されているようです。

まとめ

無いなら作る第2弾。コンテンツインクルードの仕組みを作りました。記事のカテゴリによって出しわける目次のページとか、広告の差し込みとかで使えます。

埋め込んだ100ページを全部直すとか、とっても目まいがする作業なので、これはやっておいたほうがいいですね。ちょっと様子見て、過去記事に埋め込んでみます。


後編につづきます kanaxx.hatenablog.jp

参考に

JavaScriptで書かれたコンテンツはGoogleから評価される?されない?の謎に迫る
https://promonista.com/evaluation-of-javascript/