前の関連記事：Blogger:モバイルサイト(7)表示させるウィジェットはPCサイトと別にする
PC用のサイトも「ウェブバージョンを表示」でモバイル端末で見ることができますが、ちゃんと動かないウィジェットがあります。これらをモバイル端末でみたときだけ非表示にしようと思いましたがうまくいきませんでした。
統計ウィジェットはモバイル端末のウェブバージョンでは表示されない
待てど暮らせどタイトルしか表示されません。
モバイル端末で見たときはタイトルごと非表示にします。
管理画面→テンプレート→HTMLの編集、ウィジェットへ移動→Stats１。
id='Stats1'のウィジェットをみつけて<b:includable id='main'>の中身を全て <b:if cond='data:mobile == "false"'>と</b:if>で挟み込んでしまいます。
これでモバイル端末でないときにのみ表示されるはずです。
<b:widget id='Stats1' locked='false' title='過去1週間の訪問数' type='Stats'>
<b:includable id='main'>
<b:if cond='data:mobile == "false"'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<!-- Content is going to be visible when data will be fetched from server. -->
<div expr:id='data:widget.instanceId + "_content"' style='display: none;'>
<!-- Counter and image will be injected later via AJAX call. -->
<b:if cond='data:showSparkline'>
<img alt='Sparkline' expr:id='data:widget.instanceId + "_sparkline"' height='30' width='75'/>
</b:if>
<b:if cond='data:showGraphicalCounter'>
<span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>
<b:else/>
<span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>
</b:if>
<b:include name='quickedit'/>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
ハイライト行が追加分です。ところがモバイル端末から見たウェブバージョンだけでなく、PCからみたページでも表示されなくなりました。
３行目を<b:if cond='data:blog.isMobile'>にしても同じ結果でした。
<b:if cond='data:mobile == "false"'>と</b:if>や <b:if cond='data:blog.isMobile'>と</b:if>で囲んだ部分がモバイル端末からみても、PCからみても無視されてしまいます。
ブログアーカイブの階層表示はloading...のまま動かず
ブログーカイブのスタイルを「階層」にしていると、三角ボタンをクリックしてもloading...のまま動きません。
Blogger:モバイルサイト(7)表示させるウィジェットはPCサイトと別にするでやったようにもう一つ同じガジェットを入れたウィジェットを作ろうとしたら、、、
「追加済み」になっててもう追加できません。
そこで、管理画面→テンプレート→HTMLの編集、ウィジェットへ移動→BlogArchive1、でブログアーカイブのHTMLをみます。
その中の<b:includable id='main'>の中をみてみると、スタイルの場合分け部分があります。
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
上から「階層」「フラットリスト」「プルダウンメニュー」に相当しそれぞれinterval、flat、menuというインクルードを呼び出しています。
PCサイトでは「階層」のままにしておきたいので<b:if cond='data:style == "HIERARCHY"'>のなかから無理やりflatインクルードを呼び出すようにしてみました。
<b:if cond='data:style == "HIERARCHY"'>
<b:if cond='data:mobile == "false"'>
<b:include data='data' name='interval'/>
<b:else/>
<b:include data='data' name='flat'/>
</b:if>
</b:if>
これもダメですね。うまくいきません。
PCからみるとflatのものが表示されます。
モバイル端末からみてもflatです。
これはどういうことでしょう？
<b:if cond='data:mobile == "false"'>と</b:if>で囲まれた部分が全て無視されているのではなさそうです。
flatとintervalを入れ換えてみてもflatです。
うーん、挙動がいまいちわからないので、もう <b:if cond='data:style == "HIERARCHY"'>と</b:if>の間を削除してみました。
これはウィジェットタイトルしか表示されません。
ちゃんと<b:if cond='data:style == "HIERARCHY"'>の中身が実行されているようです。
<b:include data='data' name='interval'/>だけを入れるとちゃんとintervaｌのものが表示されます。
PCからみるとflatのものが表示されます。
モバイル端末からみてもflatです。
これはどういうことでしょう？
<b:if cond='data:mobile == "false"'>と</b:if>で囲まれた部分が全て無視されているのではなさそうです。
flatとintervalを入れ換えてみてもflatです。
うーん、挙動がいまいちわからないので、もう <b:if cond='data:style == "HIERARCHY"'>と</b:if>の間を削除してみました。
これはウィジェットタイトルしか表示されません。
ちゃんと<b:if cond='data:style == "HIERARCHY"'>の中身が実行されているようです。
<b:include data='data' name='interval'/>だけを入れるとちゃんとintervaｌのものが表示されます。
data:blog.isMobileやdata:mobileはモバイルサイトかPCサイトかの判別にしか使えない
<b:if cond='data:blog.isMobile'>や<b:if cond='data:mobile'>をテンプレートのHTMLのあちこちに置いて動作を確認しましたが、いずれもモバイルサイトとPCサイトの判別はできました。
2013.10.27追記。Blogger:英語版(4)各投稿の更新日時の表示を英語化でやってみたところ<head></head>の中では<b:if cond='data:blog.isMobile'>は動作しますが、<b:if cond='data:mobile'>は動作せずモバイルサイトとPCサイトの判定にも使えませんでした。
しかしPCサイトをモバイル端末からみているという判別はできませんでした。
<b:if cond='data:mobile'><!--または <b:if cond='data:blog.isMobile'> -->
<script>alert("モバイル端末で表示されるはず")</script>
<b:else/>
<script>alert("パソコンで表示されるはず")</script>
</b:if>
このコードで確認しましたが、モバイル端末でPCサイトをみるといずれもパソコンと判断されます。ということでモバイル端末から見るPCサイト（ウェブバージョン）の個別のカスタマイズは難しそうです。
ページナビ部分の改造
ウェブバージョンをモバイル端末でみたときのアイテムページのページナビはこのようになっています。
ただし、これはBlogger:ページ番号付ページナビ(1)何ページ目を見ているのか一目でわかる方法と
Blogger:ページナビの横に「上に戻る」ボタンを作るを導入したあとのものです。
テンプレートのHTMLではBlog1ウィジェットのnextprevインクルードの部分になります。
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a href='#toko_taitoru'>記事タイトルに戻る</a>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
</div>
<div class='clear'/>
</b:includable>
9行目から13行目までがモバイル端末でみたときだけ「モバイルバージョンを表示」を表示させている部分です。これをolder-linkの後にもって来ました。
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:blog.pageType == "item"'>
<a href='#toko_taitoru'>記事タイトルに戻る</a>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>
ウィジェット(widget)とガジェット(gadget)の定義は？
記事を書きながら、ウィジェット(widget)とガジェット(gadget)、どっちを使うべきなのか迷いながら書いていました。
そこでちゃんとした定義を調べようと思ってBloggerヘルプを検索してみましたがよくわかりませんでした。
Blogger：テンプレート編集(5)ウィジェットはインクルードの入れ物でみたようにテンプレートのHTMLでは、セクション⊃ウィジェット⊃インクルード、という包括関係になっています。
ガジェットという単語はレイアウト画面でセクションに追加する部分ででてきます。
レイアウトでガジェットを追加すると、テンプレートのHTMLでウィジェットが追加されてその中にガジェットが入ります。
ガジェットはインクルードで構成されています。
ウィジェットはガジェットの入れ物とも言えると思いました。
テンプレートのHTMLにいれてしまうと、ウィジェットはidがついています。
ガジェットはtypeとしてでてきます。
ということで、テンプレートの構成要素としていうときはウィジェット、ウィジェットの中身として動く機能をいうときはガジェット、というような感じで使うことにしました。
参考にしたサイト
Page Elements Tags for Layouts - Blogger Help
本家ヘルプのウィジェットの解説
0 件のコメント:
コメントを投稿