【Blogger】b:includable タグの中身一括削除ツール

Blogger テンプレートのカスタマイズを行っていると頻繁に遭遇する b:includable タグ。

ウィジェットの部品を格納する非常に重要なタグですが、特にバージョン2 のウィジェットの場合あまりに数が多く、コードがかさばりがちです。

とりあえず使わない b:includable の中身を削除しておこうにも、タグの数が多すぎて手動では非常に骨が折れます。

そこで、JavaScript で b:includable タグの中身を一括で削除するツールを作りました。

b:includable タグの中身一括削除ツール

上のテキストエリアに b:includable タグを含むコードを貼り付け、「b:includable を空にする」ボタンを押すと、下のテキストエリアに全ての b:includable タグの中身が削除されたコードが表示されます。

「コピー」ボタンで変換後のコードがコピーできます。コピー機能に Clipboard API を利用しているため、Internet Explorer には非対応です。IE をお使いの方はコードを全選択してコピーしてください。

「クリア」ボタンを押すと、上下両方のテキストエリアが空になります。間違えて押さないようにお気を付けください。

初めてツールを使用する方は、必ず次項の「仕様と注意事項」もあわせてお読みください。

仕様と注意事項

b:widget タグおよび b:defaultmarkup タグの中に存在する b:includable タグが変換の対象です。

例えば以下のような b:includable タグの場合、

<b:includable id='sampleTag' var='sample'>
  <!-- この includable タグは デフォルトでは存在しません -->
</b:includable>

このように b:includable タグの中身と var 属性を削除した形に変換されます。

<b:includable id='sampleTag'/>

Blogger に標準搭載されている b:includable タグに限り、そのタグ自体を削除することで再び中のコードと var 属性（存在する場合のみ）が復活します。

ただし、このとき復活する中身は Blogger 標準のものであり、中身を削除する前にカスタマイズしたコードが復活するわけではありません。

このツールで変換したコードを採用する前に、テンプレートのバックアップを取ることを強くおすすめします。

また、バージョン2 のウィジェットではどうやら仕様なのかバグなのか、b:includable の数が変わってしまうことがあるようです。

実際、ブログの投稿ウィジェットを追加してテンプレートを保存したのち一旦管理画面に戻り、再びコードを見てみると行数が明らかに減っていることがありました。

Diffchecker というコードの差異をチェックできるツールで 2つのコードを調べてみたところ、なんと 235行分の b:includable がなくなっていることがわかりました。

• Blogger's blog widget - Diff Checker

このときテンプレートのどこかしらを編集して保存すると、消えたはずの b:includable が復活します。

以上のような謎の仕様のため、このツールを使った時点では全ての b:includable を空にできていても、テンプレートにそのコードを貼り付けて保存した瞬間中身が消えていない b:includable が発生することがあります。

その場合はもう一度このツールを使えば、追加された b:includable も空にできますのでご安心ください。

ソースコード

HTML, JavaScript, CSS をひとつのコードにまとめているので、テストブログの記事ページにコピペすれば、上部に設置しているツールと同じものが使えます。需要があるかどうかはさておき！

<form class="form">
  <textarea class="textarea" id="input" placeholder="空にしたい b:includable タグを入力してください"></textarea>
  <button class="button" id="replacetxt" type="button">b:includable を空にする</button>
  <button class="button" type="reset">クリア</button>
  <textarea class="textarea" id="output" placeholder="変換されたコードがここに出力されます"></textarea>
  <button class="button" id="copytxt" type="button">コピー</button>
</form>

<script>
// includable の中身を削除
document.querySelector('#replacetxt').addEventListener('click', function(){
  let intxt = document.querySelector('#input').value;
  intxt = intxt.replace(/<b:includable id='(.+?)' var='.+?'>/g, "<b:includable id='$1'>").replace(/<b:includable id='(.+?)'>[\s\S]*?<\/b:includable>/g, "<b:includable id='$1'/>");
  document.querySelector('#output').value = intxt
})
// コピーボタン
document.querySelector('#copytxt').addEventListener('click', function(){
  const outtxt = document.querySelector('#output').value;
  navigator.clipboard.writeText(outtxt).then(function(){
    alert('コピーしました')
  }).catch(function(){
    alert('コピーに失敗しました')
  })
})
</script>

<style>
.form{
  display: block;
  margin: 2em auto;
  width: 100%;
  max-width: 480px;
}
.textarea, .button{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
}
.textarea{
  display: block;
  margin: 1em auto;
  padding: .5em;
  width: 100%;
  height: 16em;
  background: #fff;
  color: #333;
  outline: 2px solid #666;
}
.textarea:hover, .textarea:focus{
  background: aliceblue;
  outline-color: steelblue;
}
.button{
  display: inline-block;
  margin-right: 1em;
  padding: 1em;
  line-height: 1;
  background: #666;
  color: #fff;
}
.button:hover, .button:focus{
  background: steelblue;
}
</style>

replace() でタグの中身を消すというアイデアはすぐ思いついたのですが、そこから正規表現を見つけるのに非常に苦労しました。

上のコードからその部分を抜き出したのが以下です。

intxt = intxt.replace(/<b:includable id='(.+?)' var='.+?'>/g, "<b:includable id='$1'>").replace(/<b:includable id='(.+?)'>[\s\S]*?<\/b:includable>/g, "<b:includable id='$1'/>");

コードを見るとわかるように replace() を2箇所で使っているんですが、特に 2つ目の正規表現の書き方でかなり詰まりました。正規表現ほんとに苦手。

それでもなんとかこちらの記事を参考にして、期待どおりに動く JavaScript を書くことができました。

• JavaScript正規表現での最短マッチと、改行が含まれた文字列のマッチ - ゆず日記

また、先程も書きましたが、こちらのコピー機能は Clipboard API で実装しています。

この API の仕様上スクリプトが iframe 内に設置されている場合はコピー機能が働かず、このツールの場合エラーメッセージを返します。

そのため Blogger のプレビュー画面ではコピー機能が働きません。コピー機能を含めた動作は公開記事でお試しください。

あとがき

JavaScript で b:includable タグの中身を一括で削除するツールを作ったので、せっかくだから記事にしてみました。

テンプレート作りのためにバージョン2 のウィジェットをいじっていたら、あまりにもあまりにも b:includable タグが多すぎて、とりあえず全部手動で閉じたらものすごく時間がかかりました。

この先カスタマイズ続ける上で、いちいち手作業でタグを閉じていくのはだいぶしんどい気がしたので、こういうツールを作りました。

正直自分以外に需要があるのかわかりませんが、よろしければ使ってみてください。

不具合等ございましたら、お問い合わせフォームで教えていただけると助かります。