すたすた式
Blogger QooQ
QooQのガジェット・ウィジェットをversion1からversion2に変更したときの個人的メモです。
（以下、ガジェット・ウィジェットはwidget。version1、version2はそれぞれv1、v2とします。）
元テンプレートはQooQ ver.1.31を使用
widgetの構成は以下としました。
作業量が多いので、このページは準備編として概要を記載。各widgetの具体的な変更は別記事にします。
Blog widget編
その他widget編
資料編
自分の環境、運用ではv2にしても特段メリットがなさそうですが、興味が上回ったのでやってみました。
ただ、以下の理由から個人的にv1→v2は、v2ネイティブのテンプレートの利用を十分に検討したあとでもいいかなと考えます。
調べるまでは楽しかったのですが、コピペが苦痛でした。
あくまで実験的なものです。本番環境での使用は想定していません。
当面の理解のうえで試してみたらこうなったという水準です。正確性はないので留意してください。
Bloggerは1つのアカウントで複数のブログが作成できます。もし試す場合は、ぜひ開発用ブログを作成して試してください。
必要なもの
includable
ここで言うblankテンプレートとは最小構成のテンプレートのことです。
あると便利なもの
includableタグ（<b:includable>~</b:includable>）を数多くコピペします。
<b:includable>~</b:includable>
タグが折りたためるとコピペに便利です。
自分はVisual Studio Codeを使っていますが、サクラエディター、Notepad++とかでも出きるっぽいです。
自分の環境では拡張子.xmlだと上手く折りたためなかったので、.htmlにして作業しました。
.xml
.html
手順は一例です。もっと効率のいい方法があるはず。
2~7は順不同
v2適用後にwidgetを追加すると、v2ネイティブのwidgetが追加されます。
widgetの構造にもよりますが、元テンプレートのCSSを利用できなくなる場合があります。
今回は元テンプレートのCSSを最大限利用したいので、できるだけ現行のwidgetを利用、データタグの変更によって運用したいと考えています。
CSSを新しく書くことをいとわなければ、v2ネイティブのwidgetの利用をオススメします。
htmlタグのb:version='2'をb:defaultwidgetversion='2'``b:layoutsVersion='3' b:responsive='true'に置き換え。
b:version='2'
b:defaultwidgetversion='2'``b:layoutsVersion='3'
b:responsive='true'
変更前
<html ...b:version='2'...>
変更後
<html ...b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true'...>
b:responsive='true'はなくても動くようですが念のため付けました。
Attributs de réglages du fichier XML - Blogger Code PE
各widgetのwidgetタグのversion='1'を削除。またはversion='2'に変更して「保存」をクリック
widget
version='1'
version='2'
<b:widget id='PageList1' locked='true' title='ページ' type='PageList' version='1'>
<b:widget id='PageList1' locked='true' title='ページ' type='PageList'>
または
<b:widget id='PageList1' locked='true' title='ページ' type='PageList' version='2'>
後述しますが、Attribution widget（帰属widget）だけid='main'のincludableタグが上書きされました。
元テンプレートのCSSを使いたい場合は、Attribution widgetに明示的にversion='1'を追加。
<b:widget id='Attribution1' locked='false' title='' type='Attribution' version='1'>
Blog widgetでv2では不要な（不要だと思われる）includableタグがあるので削除しました。
主にモバイル関係を削除。
削除せず残しておいても問題ないと思うので、この項目は省略可能です。
データタグの置き換えですべて対応するならばこの項目は省略可能です。
しかしBlog widgetはとくにデータタグが多く、かなり煩雑になりそうなので、主にコメント関係はv2のincludableタグに置き換えました。
Blog widgetについてはincludableタグ置き換えを前提に説明します。
data:ではじまるdata:post.dateHeaderのようなものがデータタグです。
data:
data:post.dateHeader
置き換えなかったincludableタグ内にあるデータタグのうち、v2に対応していないものをv2用に置き換えます。
参考サイト：Les équivalents des données des gadgets version 1 dans la version 2 - Blogger Code PE
面倒であればこの項目は省略可能と考えています。
widgetをv1からv2にすると、v2で使えるincludableタグが自動で新しく追加されます。
その際、すでにテンプレートにあるid名と重複するid名のincludableタグは追加されません。
このままでも問題はなさそうですが、コードの可読性や軽量化等、少し邪魔に感じます。
そこで、同じid名のincludableタグは追加されないという性質をつかって、処理してみました。
【Blogger】b:includableタグの中身一括削除ツール | 水の中にはサメがいる！さんのツールをつかってv2の各widgetのincludableタグの中身を削除して閉じる。（<b:includable'id='aboutPostAuthor'/>のような形に変換）
<b:includable'id='aboutPostAuthor'/>
中身を削除して閉じたincludableタグを（v2適用の前の）元テンプレートの各widgetの</b:widget>直上にコピペしました。
</b:widget>
【Blogger】b:includableタグの中身一括削除ツール | 水の中にはサメがいる！さんのツールをつかってHeader（ページヘッダー）v2のincludableタグの中身を削除して閉じる。
中身を削除して閉じたもの
<b:includable id='main'/> <b:includable id='behindImageStyle'/> <b:includable id='description'/> <b:includable id='image'/> <b:includable id='title'/>
Header widgetの</b:widget>直上にコピペ。
「保存」を押すと重複しているidがある旨のエラーが出ます。（id='main'が重複）
重複しているid名をもつ「中身を削除して閉じたincludableタグ」（ここでは<b:includable id='main'/>）を削除して「保存」
<b:includable id='main'/>
これを繰り返します。
結果、下記の残った「中身を削除して閉じたincludableタグ」が保存されます。
<b:includable id='behindImageStyle'/> <b:includable id='image'/>
ここまでの作業で元テンプレートのv2化は終了です。
id='main'はどのwidgetにも存在するので、あらかじめ取り除いてから作業できます。
自動で追加されたincludableタグは削除するだけだと「保存」すると復活します。
自分の環境では、Attribution widget（帰属widget）だけid='main'のincludableタグが上書きされました。
一度v2のblankテンプレートを適用しないとv1→v2とならない場合がありました。
v2のblankテンプレートを「HTMLの編集」にコピペして「保存」。
v2のblankテンプレート例
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:css='false' b:js='false' b:defaultwidgetversion='2' b:layoutsVersion='3'> <head> <b:comment> <b:skin/> </b:comment> </head> <body> <b:comment> <b:section id='main'/> </b:comment> </body> </html>
最後にv2を適用した元テンプレートを「HTMLの編集」にコピペして「保存」。
ブログを表示、目視で機能していない部分を確認。
またはソースコードを表示、ページ内検索でCan't find substitution for tagを検索すると、機能していない場所が分かります。
Can't find substitution for tag
（<!--Can't find substitution for tag [blog.ieCssRetrofitLinks]-->は今回関係ありません）
<!--Can't find substitution for tag [blog.ieCssRetrofitLinks]-->
デザインがおかしくなっているところはCSSで修正
元に戻すため（v2→v1）のv1のblankテンプレートです。
v1のblankテンプレート例
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:css='false' b:js='false' b:version='2' class='v2'> <head> <b:comment> <b:skin/> </b:comment> </head> <body> <b:comment> <b:section id='main'/> </b:comment> </body> </html>
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿