【後編】はてなブログの記事にJavascriptを使って共通パーツHTMLをインクルードする（設定方法）

無いなら作ろうシリーズ　第2弾
はてなブログで共通パーツにインクルードができないことので、Javascriptでインクルードする仕組みを作った話の後編です。

前編：この仕組みを作った背景と作ったものの記事
後編：仕組み自体の解説が中心です。（難しい話も出てきます）

前編はこちらから kanaxx.hatenablog.jp

どんな仕組みで動くのか？

記事内にコンテンツを差し込む仕組みを簡単に紹介します。

使っている技術

Javascript
HeadlessCMS（microCMS）

microCMSは取り込むコンテンツデータの置き場として使っています。
インターネット上にデータを置いてHTTPSでアクセスできれば他のものでも問題ありません。

処理の流れ

簡単に処理の流れを説明します。

ブラウザで記事が表示する
記事に埋め込んだJavascriptが起動する
APIをコールし、microCMSからコンテンツデータを取り出す
microCMSのデータをテンプレートHTMLに埋め込む

ユーザに記事が表示されると、記事に埋め込んだ空っぽのHTMLがいったん表示されます。
そのあとに、記事内に埋め込んだスクリプトが起動します。どの記事を引き込むのかは、スクリプトに指定したmicroCMSのコンテンツIDでコントロールします。
microCMSから持ってきたデータを処理します。スクリプト起動時に指定したHTMLのIDを親として、その子要素に埋め込んでいきます。
microCMSのデータのkeyに一致するHTML要素がある場合のみ、埋め込みします。

動かすのに必要なこと

はてなブログで記事を書くときに、2つやっておくことがあります。

記事の中に埋め込み用のテンプレートHTMLを作っておくこと
記事内でスクリプトを記述すること

設定方法

前回のリダイレクトのときと同じく、結構な面倒くささがあるので気を引き締めて先に進んでください。
毎度のことになりますが、設定を変更したりすることで起きる不都合は自己責任ですので、よろしくお願いします。

必要なコードは一式、Githubに置いてあります。
https://github.com/kanaxx/hatenablog-include

最初に全体像を書いておくと

はてなブログ記事に共通的にHTMLを取り込みたい場合に、対象の記事の取り込みたい位置にこのようなコードを書きます（サンプルです）。
このコードセットを「定型文貼り付け」に入れておくのがよいですね。

<!--
microCMSのコンテンツIDが dynamic-test で
記事内に作ったテンプレートのIDが js-dynamic-contents の場合
-->

<!-- jsの取り込み。外部から取り込めない場合は共通パーツに書く -->
<script src="hatenablog-include.js"></script>

<!-- スクリプト実行部 -->
<script>
  //1:microCMSのコンテンツIDと、HTMLに指定してテンプレートのIDを教える
  inc = new HatenaDynamicInclude(
  'dynamic-test',
  'js-dynamic-contents' );

  //実行
  inc.include();
</script>

<!-- テンプレート部 -->
<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>

1. microCMSの設定

※microCMSのアカウントは、前回記事を参照して作ってください。説明は省きます。フリーのアカウントでよいと思います。

スキーマ作成

スキーマ（データを入れる箱）を用意します。別にこの通りじゃなくても大丈夫です。ご自身の要件に合うようにカスタマイズしてください。
GITに置いてあるmicrocms-schema.jsonをインポートしてもよいです。

リスト形式を選んで

フィールドIDは英語で分かりやすく付けておく

最後に「完了」ボタンを押して終わりです。

後から気が付いた。リッチテキスト形式にすると、自分で組んだHTMLを入力できないじゃないか。しまった！？テキストエリアにすべきだったかも。

データ作成

入れ物を作ったら、データを入れておきましょう。

追加ボタンを押し

入力画面が出るので、作ったフィールドの数だけ入力します。公開ボタンを押して保存します。

contentIdが適当に振られるので、分かりやすいものに修正します。

複数回繰り返して必要な分だけ作りましょう

2. スクリプトの編集

hatenablog-include.jsがメインのスクリプトファイルです。Githubに置いてあるので、ここから拾ってください。
https://github.com/kanaxx/hatenablog-include/blob/master/hatenablog-include.js

編集するところ
endpointとapiKeyを自分の環境に変更します。先頭4行目と5行目です。

class HatenaDynamicInclude{
    //set your environment
    microCms = {
        endpoint:'https://-yourdomain-.microcms.io/api/v1/-yoursetting-/',
        apiKey : 'your key',
    };

3. スクリプトを置く

2で編集したスクリプト（.jsファイル）をどこかのサーバーに置きたいのですけど、普通の人は置く場所は無いかな。。いったん、どこかに置く前提で話を進めます。
インターネット上に置いてもらえれば、<script src="URL">の1行で済みます。

僕の場合は、Cloudinaryっていうクラウドサービス上に置きました。

cloudinary.com

置くところがない場合は、ソースをはてなブログのどこかに置くコピペする必要があります。ただ、JavascriptのClassは実行コードより上に存在しないといけないので、フッターではだめかもしれない。どこがいいんだろうか。。実験して補足します。

4. HTMLのテンプレートを記事に書く

記事中に、空っぽのHTMLを書いておきます。こんな感じのものを表示したい場所に置きます。IDを変えれば2つ以上置いても大丈夫です。

<div id="template-id">
  <div id="template-id-xxx"></div>
  <span id="template-id-yyy"></span>
</div>

テンプレートのルール

親になる要素のid要素に、お好きなIDを振る
親要素内に子どもの要素を作る
子要素のid要素は、親のID　ハイフン　microCMSのフィールドIDにする

上のサンプルをちゃんと書くと、template-id-createdAtとか、template-id-htmlとか、ですね。

データ側にあるキーの埋め込み先が無い場合は無視されるので、欲しいものだけをHTMLに書いておけばいいです。テンプレートのデザインは記事ごとの変えるのは自由なので、同じデータでも埋め込むページによって表現を変えることはできます。
CSSをあらかじめ当てておいてもいいし、<b>タグなどでデザインしておくのも自由です。

5. 実行するコードを書く

記事内にスクリプトを書きます。

microCMSのデータのキーと、記事内に埋めたテンプレートのIDを指定するだけです。これが実行されたタイミングで、APIへアクセスをしてテンプレートにデータを埋め込んで、穴あきのHTMLが完成します。

<script>
let inc = new HatenaDynamicInclude('データのキー', 'テンプレートの親ID');
inc.include();
</script>

まとめ

仕上がりました。長かった。
Googleにインデックスされるのが分かったので、記事の末尾に回遊用にコピペで作ったコンテンツを作り替えないと。

『７回目の出直し🌻』

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