BLOGGERの便利な独自タグを少し紹介

久しぶりにBlogger関連の記事を。JavaScript(以下JS)の基礎知識が少し身についたおかげかBlogger独自タグの便利さが少し理解できました。ということで今回はこれは便利だ！と僕が感じた独自タグの使い方について紹介を。

JSでDOMを操作をするときに目印的な役割でclassやidの設定をすることが多いと思います。ただ最初から設定しておけるならまだしも動的に変更・追加・削除をしたい、となると少し面倒な操作が必要になる場合も。そういった点を解消できるかもしれない独自タグがBloggerには備わっています。まずは親要素にクラスを追加する方法を。

<div>
 <b:class cond='条件' name='クラス名'/><!--condは省略可-->
</div>

↑のような感じで<b:class>を用いて親要素にクラス属性を設定することができます。条件については必要なければ省略も可能。横に冗長なコードになるのが嫌なら条件だけ<b:if>で別にするのもありかと。ポイントは属性値(クラス名)の書き換えではなくて追加というところです。なので最初からクラス名が設定されてあれば、そこに新しくクラス名を追加する形になります。JSを使用せずに特定条件でクラスを付与できるというのは便利ですよね。まぁ設定できる条件は限られてきますが。ちなみに同じ操作をJSでやろうとした一例が↓のようなもの。

<div>
 <script>
  {let currentElem = document.currentScript;//現在のscript要素を取得
   let parentElem = currentElem.parentNode; // 親要素を取得
   parentElem.classList.add('追加するクラス名')};//親要素にクラス属性を追加
 </script>
</div>

若干面倒です。なによりcurrentScriptはIEに対応していないという。まぁ最初からidかclass設定して目印にすれば他の書き方も可能ですが。それにJSは子孫要素だろうが祖先要素だろうがコードの書き方しだいで追加・変更できるという点でも優れています。<b:class>は親要素の操作しかできませんから。追加のみで削除はできませんし。削除をしたい場合など、もう少し汎用性のあるものとして↓のような独自タグが。

<div>
 <b:attr cond='条件' name='属性(classやidなど)' value='属性値(クラス名など)'/><!--condは省略可-->
</div>

↑の<b:attr>は<b:class>との違いは属性値の追加ではなく上書きを行うこと。なにも属性が設定されていなければ追加を行う操作になりますが、何か属性が設定されていた場合は上書きされてしまいます。それを利用して↓のような書き方をすれば属性値を削除できます。

<div>
 <b:attr cond='条件' name='属性(classやidなど)' value=''/><!--condは省略可-->
</div>

属性値(value)を設定しなければ空文字で上書きできます。さらに<b:attr>の便利な機能としてクラス以外の属性も追加・変更・削除できるという点が。スタイル属性も設定できるのでJSを使用せずに色々できて便利そうだなぁ…と感動しました。親要素しか操作できないので少し不便ではありますが。ちなみに<b:attr>でクラス名の追加を行いたい場合などは↓のような感じで書けば可能です。

<div class='exam1'>
 <b:attr cond='条件' name='class' value='exam1 exam2'/><!--condは省略可-->
</div>

上書きされちゃうなら元の属性値も一緒に設定すればいいじゃないか！という感じですね。便利ですよね。でも親要素以外にも操作可能であればどれほど良かったか…。Blogger独自タグは便利なのだけれど、あと一歩進んだ機能があれば…と思うこともしばしば。あと僕がやってしまった間違いとして以下のようなものが。

<div class='exam1'>
 <noscript>
  <b:attr name='class' value='exam1 exam2'/>
 </noscript>
</div>

↑は動きません。正確には期待通りの動作をしません。JSがブラウザで無効になっている場合に<div>のクラス属性を操作したかったわけですが、↑の書き方では<b:attr>の親要素が<noscript>になっちゃっていますからね…。何か上手い回避方法はないだろうか？とずっと考えていましたが、いまのところは見つかっていません。親要素を削除するような独自タグでもあれば回避できそうでしたが、調べた感じではなさそうです。まぁなんにせよ<b:attr>が便利なタグであるのは間違いないかと。今回の情報は↓のサイトを参考にさせて頂いています。他にもBloggerのコードに関する情報が色々記載されているので興味のある方は訪問をお勧めします。