投稿

  • 2016年3月31日
  • Blogger

Bloggerテンプレート作成におけるポイントを整理しておく。

空のテンプレート

改造ではなくゼロから作成する場合、まずは土台となる空のテンプレートが必要となる。
「Blogger Blank Template」等で検索するといくつかヒットするので参考にするとよい。

以下のコードは当ブログで使用しているテンプレートをベースにした空のテンプレートだ。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' expr:dir='data:blog.languageDirection' lang='ja' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta charset='UTF-8'/>
<title><data:blog.title/></title>
<meta name='description' expr:content='data:blog.metaDescription'/>
&lt;style&gt;&lt;!--/*<b:skin><![CDATA[*/]]></b:skin>
<style>
</style>
&lt;!&#45;&#45;</head>&#45;&#45;&gt;
&lt;/head&gt;
<body>
<h1><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></h1>
<b:section id='blog'>
  <b:widget type='Blog' id='Blog1' mobile='yes'>
    <b:includable id='main'>
      <h2>新着記事</h2>
      <b:loop var='post' values='data:posts'>
        <h3><a expr:href='data:post.url'><data:post.title/></a></h3>
        <div>
          <data:post.body/>
        </div>
      </b:loop>
    </b:includable>
  </b:widget>
</b:section>
&lt;!&#45;&#45;</body>&#45;&#45;&gt;
&lt;/body&gt;
</html>

上記コードは余分なものを極力取り除いた必要最小限の状態になっている。

消せない要素

Bloggerの仕様上完全に消すことが出来ない要素がいくつかあるが、そういったものはパーサーの解釈を逆手に取ってコメント化してしまうのがセオリーのようだ。
自作の際に邪魔になる要素の除去方法をいくつか記載しておく。

デフォルトスタイルシートの除去
&lt;style&gt;&lt;!--/*<b:skin><![CDATA[*/]]></b:skin>
2017年7月29日
Bloggerテンプレートからcss_bundle_v2.cssを除去
head要素のスクリプトの除去
&lt;!&#45;&#45;</head>&#45;&#45;&gt;
&lt;/head&gt;
body要素のスクリプトの除去
&lt;!&#45;&#45;</body>&#45;&#45;&gt;
&lt;/body&gt;

データタグ

Bloggerのテンプレートを作る際に苦労するのがデータタグの調査だ。

  • レイアウト データ タグ
    公式ドキュメントだが極一部のタグしか載っていないのであまり有用とは言えない。

  • blogger2ools
    一番情報量が多い。

  • imaokidatatag
    自分が使いやすいように作ったデータタグ参照用のブログ。

調査方法そのものが分かれば一番よいのだが、今回そこまでのことは分からなかった。

気をつけるべきこと

データタグの中には特定の条件下でしか値を出力しないものがある。
例えばコメント関連の値は記事の個別ページでないと出力されないし、Subscribeウィジェットはブログが一般公開設定になっていないと何も出力されない。

特定のウィジェットの値が取得できない場合は、公開範囲や現在のページタイプ等が適切かどうかを確認すること。

ページタイプ

data:blog.pageTypeの値はarchive, index, item, static_pageの4種類あるが、indexは更に細かく分けることが可能。

<b:if cond='data:blog.pageType == "archive"'>
  <!-- Archive -->
<b:elseif cond='data:blog.pageType == "index"'/>
  <b:if cond='!data:blog.searchLabel and !data:blog.searchQuery'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <!-- Home -->
    <b:else/>
      <!-- Index -->
    </b:if>
  <b:else/>
    <b:if cond='data:blog.searchLabel'>
      <!-- Label -->
    <b:elseif cond='data:blog.searchQuery'/>
      <!-- Search -->
    </b:if>
  </b:if>
<b:elseif cond='data:blog.pageType == "item"'/>
  <!-- Item -->
<b:elseif cond='data:blog.pageType == "static_page"'/>
  <!-- Static -->
<b:else/>
  <!-- Home -->
</b:if>

コメント欄

コメントの独自マークアップ

Bloggerの個々のコメントデータは一次元の配列に格納されている。
これをb:loopを使ってそのまま出力しても当然ながらネストされない。

ではBloggerが提供しているSimpleテンプレートではどうやってネスト表示させているかというと、commentHtmlという予めスレッド形式になるようにマークアップされた値（HTML）をそのまま使用している。
実際の値はこちらのページで「commentHtml」を検索すると確認できる。

この方法はお手軽ではあるが、外観はCSSで編集可能な範囲でしか変えられないし、要素の追加や削除もJavaScriptを使わないと出来ないため柔軟性に欠けている。
せっかくフルスクラッチで作るのだからそこもこだわりたい。

調べたところ以下のサイトで方法が紹介されていた。

Membuat Fitur Komentar Berbalas (Threaded Comments) pada Blogger dengan Fungsional yang Asli

肝となるデータタグはinReplyTo。
この値には返信対象となるコメントのIDが格納されている。
関連付けの方法さえ分かれば後は簡単だ。

仕組み上はおそらく無限にネストさせることも可能だと思うが、このブログでは現状は1段階のみにした。

コメントのネスト表示

コメントフォーム

こちらもSimpleテンプレートではゴチャゴチャとスクリプトが書かれていたので、もっとシンプルに実装できないか調べた。

BloggerでGoogle製jsの読み込みを辞めて超軽量化、但しコメントフォームは動かす

上記の記事の方法をベースに、スレッド毎の返信に対応したJavaScriptを実装した。

function generateIFrameSrc(parentId) {
  /*
  var param = {
    'backgroundColor': 'rgb(0, 255, 0)',
    'color': 'rgb(255, 0, 0)',
    'fontFamily': 'monospace, monospace',
    'unvisitedLinkColor': 'rgb(0, 0, 255)'
  }
  */
  if (blogger.blog && blogger.post) {
    return (
      blogger.blog.bloggerUrl + '/comment-iframe.g?blogID=' + blogger.blog.blogId + '&postID=' + blogger.post.id +
      (parentId ? '&parentID=' + parentId : '')/* +
      '#' + (encodeURIComponent(JSON.stringify(param)))*/
    );
  }
  else {
    return false;
  }
}

function replyTo(id) {
  var titleElement = document.getElementById('comment-form-title');
  titleElement.innerHTML = id ? '返信' : '新規コメント';

  var formElement = document.getElementById('comment-form');
  if (id) {
    var referenceElement = document.querySelector('#c' + id + ' > .footer > ul');
    var parentElement = referenceElement.parentNode;
    parentElement.insertBefore(formElement, referenceElement);
  }
  else {
    var parentElement = document.getElementById('comments');
    parentElement.insertBefore(formElement, null);
  }

  var frameElement = document.getElementById('comment-frame');
  var iframeSrc = blogger.generateIFrameSrc(id);
  frameElement.src = iframeSrc;
}
コメント欄のスタイル

上記の記事でも触れられているが、JSONによる文字色や背景色の指定は現在は効果が適用されないようだ。
別ドメインのiframeのスタイルには干渉できないため、コメント欄は白いままになっている。

検索機能

CustomSearchウィジェットというGoogle検索を利用した検索機能が提供されているが、お世辞にも使い勝手がよいとは言えないので、普通にBloggerの検索機能を使用した方がよい。

使い方は簡単で、以下のようなコードを任意の場所に書くだけだ。
（class='icon-search'はフォントアイコンの指定。）

<form method='get' action='/search'>
  <input type='search' name='q' id='q' size='1' expr:value='data:blog.searchQuery'/>
  <button type='submit' class='icon-search'/>
  <input type='hidden' name='max-results' value='20'/>
</form>

この検索方式ではCustomSearchウィジェットのような専用の出力ではなく、Blogウィジェットのpostsの値として出力されるため、テンプレート側で自由に出力形式を定義することができる。

Google+ボタン

各種シェアボタンの実装は以下の記事を参考にした。

SNSのシェアボタンの設置方法まとめ (サンプルコード付き)

Google+ボタンはGoogle側が対象URLの内容を調べてコンテンツを生成するが、画像と概要文を正しく認識させる方法が分からず最後まで悩まされた。
悩んだというか、検索の仕方が悪かったというか・・・。

Google＋のリンク投稿でサムネイル画像と概要文を出す条件まとめ

上記の記事を見ると結構複雑な条件になっている。

Bloggerでは記事の画像URLを取得する手段が限られるため、テンプレートだけで対応するのは難しいという結論に至り、運用とセットで対応することにした。

まず記事本文部分のテンプレートを以下のようにする。

<article itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
  <header></header>
  <div class='body' itemprop='articleBody'>
    <data:post.body/>
  </div>
  <div class='hidden'>
    <img src='https://imaoki.github.io/image/eyecatch.png' alt=''/>
  </div>
  <footer></footer>
</article>

記事毎に専用のアイキャッチ画像を使いたい場合は記事の冒頭に以下のようなタグを記述する。

<div class="hidden"><img src="画像URL" alt=""></div>

画像は幅400px以上であることを前提とした。
嵌りやすいポイントとして、幅が同じ場合は高さで判断されるという点。
任意の画像をアイキャッチにしたい場合、幅に加えて高さもテンプレート側のアイキャッチ画像や、記事内のいずれの画像よりも大きく（高く）しておかなければならない。

最後に

下記ページで当ブログのテンプレートコードが確認できる。

https://github.com/imaoki/imaoki.github.io/blob/master/src/blogger/template/imaokilog.xml