Bloggerアーカイブの日付表示を日本語形式に変更

以前にフォロワーの方のツイートを拝見していたときにBloggerアーカイブの日付表示に関する疑問を目にしました。「11月 2020」といった表示形式なのですが、これを逆の「2020 11月」といった感じにしたいと。

---

すみません。この記事で書かれていることは無視してください。アーカイブガジェットの日付表示変更に興味がある方は以下の記事へ。

---

僕は違和感を感じたことはなかったのですが、それくらいはできるんじゃないかな？と思ってコードをチェック。ガジェットの日付表示パターンの設定で「MMMM yyyy」といったものがあったので「yyyy MMMM」に変えれば解決じゃないか？と思い確認するとエラー…まぁ予想はしていました。そんなに簡単なら自分ですぐに解決しているひとですから。色々と試行錯誤してみましたがこの部位を変更しても希望した結果は得られませんでした。Javascriptなら文字列の入れ替えくらいできそうだなぁ…とは思いましたが、処理が重くなるイメージがあるのでBloggerの独自タグでなんとかならないか模索するも良い方法が見つからず。そうこうしているうちに自分のアーカイブページの表示が変なことに気づいて修正。それに満足して日付のことはもういいか、と記憶の片隅へ追いやっていました。一カ月くらい前のことだったかな…。

ただ最近は記事のストックに余裕もできてきたこともあり、気が向いたので再度チェック。やはりJavascript以外の方法が見つからない。ので、とりあえずJavascriptで挑戦してみることに。置換とかで使えそうなメソッド(関数)ないかなぁ？と検索すると良さそうなページを見つけたので目を通す。

replace()メソッドを使用すれば解決できそうな感じです。↑の記事内の「特殊文字を使った置換パターンの使い方」を参考にするのが一番良さそうな感じなのでさっそく試してみる。ガジェットの表記の違いでflat・interval・menuの三種類がありますが、まずは僕の使用しているflatでコードを変更。

<b:includable id='flat' var='data'>
 <ul class='flat'>
  <b:loop values='data:data' var='i'>
   <li class='archivedate'>
    <a expr:href='data:i.url'>
     <script type='text/javascript'>
      var jsdate1 = &quot;<data:i.name/>&quot;
      var jsdate1 = jsdate1.replace( /(w+)s(w+)/, &#39;$2 $1&#39; );
      document.write(jsdate1)
     </script>
    </a> (<data:i.post-count/>)
   </li>
  </b:loop>
 </ul>
</b:includable>

↑の黄色下線部が変更・追加したコードになります。jsdate1は適当な変数です。しかし思ったような表示にならない。なんでだ？と悩むも上手くいかないので別の方法を試してみました。

<b:includable id='flat' var='data'>
 <ul class='flat'>
  <b:loop values='data:data' var='i'>
   <li class='archivedate'>
    <a expr:href='data:i.url'>
     <script type='text/javascript'>
      var jsdate1 = &quot;<data:i.name/>&quot;
      var jsdate1 = jsdate1.split( &#39; &#39; );
　    var jsdate1 = jsdate1[1]+"年"+jsdate1[0];
      document.write(jsdate1)
     </script>
    </a> (<data:i.post-count/>)
   </li>
  </b:loop>
 </ul>
</b:includable>

↑は置換をreplace()メソッドを使わずにsplit()メソッドで行ったものです。「11月 2020」と年月表記の間に半角スペースがありましたので、そこで分割して配列に分けたうえで順序を入れ替えて結合。ついでに「年」も足しておきました。この方法で望んだ結果は得られたのですが少しモヤモヤとした気持ちが残る。ということで最初の方法へ戻って再度考える。どうも正規表現の表記に問題がある感じなので、正規表現について知る必要があるか…ということで検索して見つかったページが以下のリンク。

↑のページで正規表現における特殊文字について解説されていますが、そこに目を通しながら試行錯誤しているとようやく原因が判明。修正した結果が以下のコード。

<b:includable id='flat' var='data'>
 <ul class='flat'>
  <b:loop values='data:data' var='i'>
   <li class='archivedate'>
    <a expr:href='data:i.url'>
     <script type='text/javascript'>
      var jsdate1 = &quot;<data:i.name/>&quot;
      var jsdate1 = jsdate1.replace( /(\w+\D)\s(\w+)/, &#39;$2年$1&#39; );
      document.write(jsdate1)
     </script>
    </a> (<data:i.post-count/>)
   </li>
  </b:loop>
 </ul>
</b:includable>

バックスラッシュ(↑の\表記部)が必要だったみたいです。あと「月」は英数字じゃないですからね。それに対応した表記にする必要がありました。僕は「\D」と追加入力。正規表現の方法は何通りかありますので他の表記でも問題はありません。ついでに「$2年$1」とすることで置換後に「年」も追加。やり方は同じなので必要ないとは思いますが一応intervalとmenu用のコードを↓に。

<b:includable id='interval' var='intervalData'>
 <b:loop values='data:intervalData' var='interval'>
  <ul class='hierarchy'>
   <li expr:class='&quot;archivedate &quot; + data:interval.expclass'>
    <b:include cond='data:interval.toggleId' data='interval' name='toggle'/>
    <a class='post-count-link' expr:href='data:interval.url'>
     <script type='text/javascript'>
      var jsdate1 = &quot;<data:interval.name/>&quot;
      var jsdate1 = jsdate1.replace( /(\w+\D)\s(\w+)/, &#39;$2年$1&#39; );
      document.write(jsdate1)
     </script>
    </a>
    <span class='post-count' dir='ltr'>(<data:interval.post-count/>)</span>
    b:include cond='data:interval.data' data='interval.data' name='interval'/>
    b:include cond='data:interval.posts' data='interval.posts' name='posts'/>
   </li>
  </ul>
 </b:loop>
</b:includable>

↑はinterval形式。↓はmenu形式のコード。

<b:includable id='menu' var='data'>
 <select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
  <!--<option value=''><data:title/></option>-->
   <b:loop values='data:data' var='i'>
    <option expr:value='data:i.url'>
     <script type='text/javascript'>
      var jsdate1 = &quot;<data:i.name/>&quot;
      var jsdate1 = jsdate1.replace( /(\w+\D)\s(\w+)/, &#39;$2年$1&#39; );
      document.write(jsdate1)
     </script> (<data:i.post-count/>)
    </option>
   </b:loop>
 </select>
</b:includable>

変更は黄色い下線を引いてあるコードです。アーカイブを設置していないひともいますし僕のように日付に違和感を感じないひともいると思いますので需要は少なそうな変更ですね。大体のページに表示される部位なので確実に表示速度も遅くなるでしょうし。しかし…何度も見ていたせいか「11月 2020」の表記に若干の違和感を覚え始めました。ということでせっかくなので「2020年11月」表記に変更しておこう。僕のコードは無駄が多いので多少余計な処理が増えても今更といった感じですし。コードを整理しないとなぁ…と思いつつ後回しにしています。僕は知識がないので見つけられませんでしたが、もしかしたらもっと簡単に処理できる方法があるのかもしれません。というか…yyyyやらMMMMでのパターン変更でなんとかできれば一番だったのですが。この記事には書いていませんがパンくずリストの表示も気になる方は同じやり方で変更できます。

---

パンくずリストについては以下の記事に記載しておきました。あとこの記事内のsplit()メソッドを使用したコードに記述ミスがあったのでコッソリと修正。