貴方のBloggerの閲覧性を爆上げする！テンプレート式でデスクトップ版(m=0)を判定するには？
Bloggerのテンプレートでレイアウトバージョン2を使い続ける理由
Google のブログサービス“Blogger”はユーザーの手でブログテンプレートに様々なカスタマイズを施すことが出来る点が大きな魅力の一つです。本記事のテーマに係るカスタマイズ項目では、デスクトップ用のテンプレートに条件分岐を追加してモバイル用に最適化したページを用意することができます。
訪問者に表示させるのはデスクトップ版か、モバイル版か？この判断は通常、 Blogger 側で行います。そして URL パラメータ(?m=1)を付与することで、訪問者側からデスクトップ版またはモバイル版を強制することができます。
しかし、この機能は最新のレイアウトバージョン3(b:layoutsVersion='3')では削除されています。より高度な機能が利用できるバージョン3ですが、これが理由でバージョン2を使い続けています。
| 種類 | urlの例 | テンプレート式 |
|---|---|---|
| Blogger が判断 | outcloud.blogspot.com | |
| モバイル版を表示 | outcloud.blogspot.com?m=1 | data:blog.isMobile
|
| デスクトップ版を表示 | outcloud.blogspot.com?m=0 | 以下で紹介 |
デスクトップ版の判定が必要になるケース
訪問者が所望の版で閲覧し続ける為には、ページ内の各リンクに対し適宜にmパラメータが付与されている必要があります。
mパラメータは基本的に、各ウィジェットのアイテムの url にあらかじめ付与されています。このためテンプレート開発者はほとんどの場面で、Blogger が判断か？モバイル版か？デスクトップ版か？意識することはありません。
しかし次のケースでは、テンプレート内でデスクトップ版の要求を判定してmパラメータを付与する必要がありました。
- ウィジェットに依らずに独自のリンクを設定している
- 検索ウィジェットはパラメータを付与しないので追加してあげる
デスクトップ版を調べるテンプレート式
次がデスクトップ版を判定するテンプレート式になります。レイアウトバージョン2、デフォルトウィジェットバージョン2(b:defaultwidgetversion='2')で動作確認しています。
<data:mobileLinkUrl/> が真ならデスクトップ版でした。data:blog.homepageUrl.http と data:blog.homepageUrl.canonical.http の文字数の差を調べる、という手法です。各所に混乱を招いていた国別ドメインへのリダイレクトがいつの間にか終わっていたので、4文字差の判定だけをすればOKでした。
m以外の一文字パラメータが実は存在していたり、今後追加された場合には動作が保証されないという歯がゆい手管です。
<b:with var='isDesktop' value='!data:blog.isMobile and ((data:blog.homepageUrl.http.length - data:blog.homepageUrl.canonical.http.length) == 4)'>
<b:if cond='data:isDesktop'>
Desktop version requested.
</b:if>
</b:with>
BlogSearchウィジェットがm=0を付与する改造
直前で data:blog.isMobile の条件分岐をしているため、上記コードから !data:blog.isMobile を省いています。併せて 【Blogger改造】完璧な検索窓設置のためのポイント2つ もご参考に。
<b:widget id='BlogSearch1' locked='true' type='BlogSearch' visible='true' mobile='yes'>
<b:includable id='main'>
<form expr:action='data:blog.searchUrl' method='get'>
<b:if cond='data:blog.isMobile'>
<input name='m' type='hidden' value='1'/>
<input name='max-results' type='hidden' value='10'/>
<b:elseif cond='(data:blog.homepageUrl.http.length - data:blog.homepageUrl.canonical.http.length) == 4'/>
<input name='m' type='hidden' value='0'/>
<input name='max-results' type='hidden' value='20'/>
<b:else/>
<input name='max-results' type='hidden' value='20'/>
</b:if>
<input type='text' name='q' autocomplete='off' autocapitalize="off" expr:placeholder='data:title' expr:title='data:title' expr:value='data:blog.searchQuery'/>
<input expr:value='data:messages.search' type='submit'/>
</form>
</b:includable>
</b:widget>
動かなかったコード片
以下、動かなかったコードです。url を文字列として扱っても、何故か上手くいきません。
<b:eval expr='( data:blog.url.jsEscaped contains "?m\x3d0" )' />
<b:eval expr='( data:blog.url.jsonEscaped contains "?m\u003d0" )' />
<b:eval expr='( data:blog.url.cssEscaped contains "?m=0" )' />
<b:eval expr='( data:blog.url == appendParams( data:blog.url, { m : "0" } ) )' />
<b:eval expr='( ( "" + data:blog.homepageUrl.jsEscaped ) contains "?m\x3d0" ) or ( ( "" + data:blog.homepageUrl.jsEscaped ) contains "\x26m\x3d0" )'>