はてなブログに過去の記事の一部を表示できるか?

コピペは負の遺産を生む。

前回の続きです。
過去の記事の一部分を新しい記事でも繰り返し使い回したい。
つまり定型文のテンプレートを用意して引用することで面倒事を回避したいということでした。
Google 先生に問い合わせたところ、 Script タグで過去の記事の DIVブロックを読み込むということでした。
それで前回の記事にテンプレートを用意したのでした。
今回はそのテンプレートをここで表示して動作確認してみます。

果たしてこの下に挿入できているでしょうか?

動かねえじゃねえか。
一体どういう仕組みで読み込んでるんだ?

ちなみに空行のあたりにはこういうコードが記述されています。

<script type="text/javascript">
$(function(){
$("#insert-div").load("http://yasushiito.hatenablog.com/entry/2019/05/13/073000 #test-template");
});
</script>
<div id="insert-div"></div>

諦めるな。

心がくじけて諦めそうになりますが、もう少し粘ってみます。
$(を見かけたら jQuery。
私の経験はそう告げます。
jQuery で読み込みが完了したら該当ページの DIV タグを読み込んでいることは想像つきますけど、 jQuery の load イベントに URL を直接指定して読み込むことができたっけ?

そして Script タグって自動で JavaScript コードだと判別してくれたっけ?

このページにも同様のやり方が書いてあるので、確かにロードイベントで URL と ID を渡して他のページを参照することは可能なようです。

もしかしてはてなブログでは jQuery 使えないのかな?
ロードのタイミングをミスっているか、どちらかが原因でしょう。
ということではてなブログ jQuery で検索してみました。
それっぽい内容はこちら。
なるほどやはりロードのタイミングが問題のようですね。
うちのサイトも同様にウインドウ全体がロードされるのを待ってから挿入してみましょう。
修正されたコードはこちら。

<script type="text/javascript">
window.onload = function(){
$("#insert-div-win").load("http://yasushiito.hatenablog.com/entry/2019/05/13/073000 #test-template");
};
</script>
<div id="insert-div-win"></div>

この下に表示されれば成功です。

無事読み込まれました。

まとめ。

このスプリクトが動く限りはテンプレートを一元管理できます。
これで負の遺産を残さずに住むようになったかもしれません。
テンプレート挿入スクリプトはページ全体が読み込み終わってから起動するので表示されるまで少々時間がかかるようです。
スクリプトが発動するタイミングはページがロードされた時なので、既にロードされているとテンプレートは挿入されません。
そんなことあるんかいな?
例えば記事を更新し終わったあたりのタイミングなどです。
ページ遷移しないで記事が表示されてしまうとウィンドウのロードイベントが起動されないままページの描画が終了してしまいます。
読者がこの状況に出くわすことはあまりないと思いますが、ブログオーナーは割と頻繁に出会うと思います。
コンテンツの一部が損なわれていると少しドキッとしますので留意しておいてください。

振り返り。

参考にしたページの両者に共通してもやっとした点がありまして。
URL の後ろの#記号の直前にスペースが空いているのですよ。

entry/2019/05/13/073000 #test-template

これはアンカータグに見られるラベルかと思いましたが、何やら別の意味があるらしくてスペースを入れないと期待通りに動かないようです。
jQuery が ID を判別するためのスペースなのでしょうか?
全く未熟なものですね。

このページによると jQuery 1.2では URL の後ろに jQuery セレクタ記述できるようです。

追記:。

テンプレート側に見出しを使うと何も表示できなくなるようです。
原因は不明です。
使用できない表現が他にもあるかもしれません。

ぺんちゃん日記

食と歴史と IT と。 Web の旅人ぺんじろうが好奇心赴くままに彷徨います。