座ログ

Bloggerのバージョンをアップデートする方法

Blogger

普段使いでは気づかないですがBloggerにはバージョンが存在します。このバージョンは自動でアップデートされません。

参考記事：

Bloggerの構成

Bloggerは下の図のような構成です。

Blogger テーマ テンプレート レイアウト ウィジェット（ガジェット） スキン

このうち、Blogger内の「テーマ」「テンプレート」「レイアウト」「ウィジェット」「スキン」には個別にバージョンがあります。

  • テーマ - ブログ全体の視覚的・機能的デザインを生み出すデータファイルの集合体。ファイルはテンプレートファイルで構成される。2010年以降登場したレイアウトテーマに分類されるテーマはバージョン2、それ以前のクラシックテーマはバージョン1。最新Verはb:version='2'。
  • テンプレート - テンプレートファイルの略。テーマを構成する。パズルのピースのように組み合わせて繰り返し利用するためテンプレート（ひな形）とよばれる。メインのテンプレートは「HTMLの編集」からアクセスするtheme-xxx.xml。バージョンはメインのテンプレートの公式による更新状況を表す。新公式テーマの最新Verはb:templateVersion='1.3.0'。
  • レイアウト - レイアウトテーマテンプレートファイル用独自タグ（レイアウトタグ）の略。管理画面の「レイアウト」タブは純粋に「配置」を意味するだけなので注意。バージョンはレイアウトタグの仕様を表す。最新Verはb:layoutsVersion='3'。
  • ウィジェット - ブログパーツのこと。ブログパーツをコードで扱う場合はウィジェット、コード抜きで扱う場合はガジェットとよぶ。よびわけはBlogger特有。Bloggerではメインの投稿エリアもウィジェットとして扱う。バージョンはウィジェットの仕様を表す。最新Verはversion='2'。
  • スキン - headタグ内のCSSの公式による更新状況を表す。新公式テーマの最新Verはversion='1.3.0'。

このなかで重要なのは「レイアウト」と「ウィジェット」のバージョンです。コードの書き方とバージョンを誤るとデータの取得が空だったりエラーでブログ全体が表示できなかったりします。残りの「テーマ」「テンプレート」「スキン」のバージョンはその心配はなく重要度が低いです。

テーマとテンプレートの違い

「テーマ」と「テンプレート」は厳密には違いますが一般的には区別されず混同されています。

ワードプレス テーマとテンプレートの違いは？ - テックエイド

『WordPressのテーマはファイルの集合体で、ブログの生成する内容とともにグラフィカルインターフェイスを生み出します。これらのファイルはテンプレートファイルと呼ばれています』

つまり、WordPress標準テーマのTwenty Fifteenの事をテーマと呼んでTwenty Fifteenの中身のheader.phpやfunctions.phpなどの事をテンプレートファイルと呼んでいます、ということらしいです。

テーマとはテンプレート群のこと。複数のテンプレートファイルが集合してひとつのWebサイトを構築する、そのときのテンプレート群がテーマです。

テーマとテンプレートの違いを説明しづらいのは

  • 一般的に混同されていて実務上問題ない
  • 違いを説明するうえで重要な「データファイルの概念」をBloggerは隠している

からです。

Bloggerではテーマタブの「Contempo」「シンプル」などが「テーマ」に相当します。Contempoのなかで5種類の色別がありますがあくまでテーマのカラーバリエーションでありこのひとつひとつがテンプレートではないです。

テーマタブの「HTMLを編集」ボタンを押した先のデータがメインのXMLファイルでありこれがメインの「テンプレート」ファイルです。テンプレートとはテンプレートファイルの略です。

Contempoテーマを構成するテンプレートファイルはメインのXMLファイル以外にもあります。たとえばメインXML内の<b:include name='all-head-content'/>で呼び出されるデータはメインのXMLファイルとは別で管理されています。つまり別のテンプレートファイルです。このファイルはサーバー側に格納されていて読み取り専用で編集できません。

<b:includable id='all-head-content'>
  <meta expr:content='"text/html; charset=" + data:blog.encoding' http-equiv='Content-Type'/>
  <b:if cond='data:widgets'>
    <b:comment>Chrome, Firefox OS and Opera
    <meta expr:content='data:skin.vars.body_background_color' name='theme-color'/>
    <b:comment>Windows Phone
    <meta expr:content='data:skin.vars.body_background_color' name='msapplication-navbutton-color'/>
  </b:if>
  <data:blog.latencyHeadScript/>
  <data:blog.mobileHeadScript/>
  <meta content='blogger' name='generator'/>
  <link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
  <b:if cond='data:blog.adultContent'>
    <meta content='adult' name='rating'/>
  </b:if>
  <link expr:href='data:view.url.canonical' rel='canonical'/>
  <data:blog.feedLinks/>
  <ata:blog.openIdOpTag/>
  <data:blog.meTag/>
  <b:tag name='link' cond='data:blog.googleProfileUrl' rel='publisher' expr:href='data:blog.googleProfileUrl'/>
  <b:tag name='link' cond='data:view.featuredImage' expr:href='data:view.featuredImage' rel='image_src'/>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
  </b:if>
  <b:include name='openGraphMetaData'/>
  <data:blog.ieCssRetrofitLinks/>
  <!--[if IE]><script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script>
<![endif]-->
</b:includable>

Bloggerは内部的に「theme-xxx.xml」「all-head-content.xml」「google-analytics.xml」などいくつかテンプレートファイルが存在して、主要ファイルの「theme-xxx.xml」だけ「HTMLの編集」ページを用意して編集可能にしているわけです。

バージョンをアップデートする方法

すべて最新バージョンにする最も簡単な方法は2016年に登場した新公式テーマの適用です。

それ以前の公式テーマやそれを元にカスタマイズしたオリジナルテーマは旧バージョンのままであり、自動でアップデートされません。

関連の記事Blogger