Blogger独自タグを使用して色々と足掻いてみた

今回の記事はアーカイブガジェットの日付表示をJavaScriptを使用せずにBlogger独自タグでなんとかしてみようと足掻いてみた結果の記録です。まず最初に宣言しておきますと、この記事内に記載されているコードはほぼ無意味です。動作はしますがブログ環境によって不具合が出ます。僕のブログに合わせて無理矢理実装してみた形になりますので。まぁちゃんと不具合なく動くコードもありますが、処理が多くなるため使用する意味はないかと。Blogger独自タグについて詳しく掲載されているサイトは以下になります。

↑のサイトはブログを開始した当初に訪問したことがあったのですが、すっかり忘れていました。あの頃は独自タグってHTMLと違うの？というレベルで目を通しても全く理解できませんでした。わずかながら知識がついたいまなら多少は理解できます。多少は。Bloggerのテンプレートを作ったりするひと向けのサイトなのかな。とにもかくにも独自タグについて調べながらアーカイブガジェットの「MM月yyyy」表記を「yyyy年MM月」表記に変更するために最初に考えてみたコードがこちら。

<b:loop values='1 to 12' var='test1'>
 <b:if cond = 'data:i.url contains ("/0" + data:test1 + "/") or data:i.url contains ("/" + data:test1 + "/")'>
  <b:eval expr='data:i.name + "年" + data:test1 + "月"'/>
 </b:if>
</b:loop>

ガジェットの日付表示形式を「yyyy」と年だけ表示する設定にして月を↑のコードで付与すれば…と思ったのですが「yyyy」表記とかできませんでした…。↑のコードはただのゴミです。しかし「MMMM」など設定で月表示のみにすることは可能なので年でループさせる形でコードを書き換えたものがこちら。

<a expr:href='data:i.url'>
 <b:loop values='2020 to 2030' var='test1'>
  <b:if cond = 'data:i.url contains (data:test1) and data:i.name.length==3'>
   <b:eval expr='data:test1 + "年" + data:i.name'/>
  <b:elseif cond = 'data:i.url contains (data:test1) and data:i.name.length==2'/>
   <b:eval expr='data:test1 + "年0" + data:i.name'/>
  </b:if>
 </b:loop>
</a> (<data:i.post-count/>)

まぁ…これはちゃんと動きはするのですけどね。僕の場合は2020年からの記事しかないので「2020~2030」と10年程先までのループにしています。つまりこのままでは2031年には正常に表示されなくなるわけです。2100とかにしていれば僕が死ぬまでは表示されますが処理が多くなるだけですからね。このコードの問題点は正確な年データを上手く取得できないために使用者の環境によって数値を変更する必要があること。そしてどうしても無駄なループ処理が出てしまうこと。この二点です。せめて途中でループを抜ける手段さえあれば…。

この方法を考えた時点でやる意味がないことには気づいていました。JavaScriptを使用すると処理が重くなるといわれているようですが、さすがに無駄なループがある方が処理は重くなりそうですから。実際どちらが速いのかはわかりませんが。ちなみにJavaScriptでも↑の独自タグのみの処理でもブログの表示スピードに大差はありませんでした。この程度の処理なら誤差なのでしょうね。いままでと同じくHIERARCHY形式だと少しコードをいじる必要がありますが、さすがに誰も必要としないでしょうから記載は控えておきます。

次に紹介するのは本当に無理矢理に独自タグで日付表記変更を実装したものになります。

<div><b:class name='test2'/>
 <a expr:href='data:i.url'>
  <b:if cond = 'data:i.name.length == 8'>
   <data:i.name/>年<data:i.name/>
  <b:else/>
   a<data:i.name/>年0<data:i.name/>
  </b:if>
 </a>
</div> (<data:i.post-count/>)

わかりますかね。この無理矢理具合が…。「MM月yyyy」と表記されるのだから二つ同じ表示を並べて間に「年」を追加すれば「MM月yyyy年MM月yyyy」となります。後は両端をなんとかして消してしまえば「yyyy年MM月」だけ残るじゃないか！という考え方です。独自タグでの良い調整方法が見つからなかったのでクラスを付与してCSSでの無理矢理な調整となりました。一応CSSのコードは以下のような感じです。

.test2{
width: 88px;
text-indent: -2.3em;
overflow:hidden;
white-space:nowrap;
display:inline-block;
vertical-align: top;
}

字上げして前半を消して…文字幅を調整して後半を消して…と悲しいくらいに無理矢理な処理です。その無駄な努力の結果得られた表示がこちら。

完璧です。無駄なループ処理もありません。まぁそれでもJavaScript使用時と処理速度の違いがあるのかはわかりませんが。ちなみに完璧といいましたがこのコードは一つ目のコードよりも欠陥品です。問題点はこちらも二つ。僕のブログに合わせてCSSを調整しているので他のひとだと不具合が起こる可能性が高いこと。そしてなによりMENU表記ではこのコードは上手く機能しないこと。HIERARCHYでは少しコードを変更するだけで機能しましたがMENUだとCSSで上手く両端を消す方法がわかりませんでした。調べたら方法があるのかもしれませんが…もう調べる気力がない。というより調整が無理矢理過ぎてこんな不安になるコード使いたくないし…。

処理速度が変わらないなら簡単確実なJavaScriptで良いじゃないか！と途中で思いながらも自分がスッキリするまでなかなかやめられなかった…。クイズみたいで楽しめました。が、コードを見ていたら他にもいじりたくなって記事が書けなくなるのでまた不具合が出るまでは放置かな。独自タグについて調べていると独自テンプレート作成という危険な扉に手をかけそうになりました。そんなことしたら絶対に記事が書けなくなる。ちなみにCSS・JavaScript・HTML・独自タグとどの知識もゼロに等しい状態で試行錯誤した結果なので、他に良い方法がある可能性は大です。当分コードを記載したりしないでしょうから今回気づいたことをもう一つ記載しておきます。

  <b:includable id='post' var='post'>
  <article class='list-item'>
    <!--<b:if cond='data:post.dateHeader'>
      <script type='text/javascript'>var jsdate = "<data:post.dateHeader/>"</script>
    </b:if>--><!--不要な処理-->
    <b:if cond='data:post.thumbnailUrl'>
    <a expr:href='data:post.url'>
        <img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 144)' loading='lazy'/>
      </a>
    </b:if>
    <div class='list-item-inner'>
      <!--<p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p>--><!--不要な処理-->
      <p class='list-item-date'><data:post.dateHeader/></p><!--こちらに変更-->

↑はQOOQテンプレートで投稿記事一覧を表示するコードの一部ですが、コメントアウトしておいた箇所は必要ない処理だと思います。他の部位でjsdateという変数を使用しているのかな？と検索してみましたがそのような様子もありませんでしたので。最後のpタグのところはスクリプトを使用せずに普通に<data:post.dateHeader>で良いと思います。たぶん何かの名残なのかな。書き換えることで思わぬ不具合が出る可能性もゼロではないので書き換える場合は自己責任でお願いいたします。まぁ僕のコードは無駄だらけなのでこれ一つ変更したからどうなんだ？という話なのですが…。

BLOGGER独自タグで日付変更する方法がわかりましたので興味がある方は以下のリンクへ。

長期ひきこもりの雑ブログ

BLOGGERアーカイブガジェット日付表示変更の完成版

アーカイブガジェットの日付表示を変更する方法について自分の中では確定したので再び記事にしたいと思います。

hikikomorisos.blogspot.com