Blogger：「ページ」機能がモバイル版で動作しなかった件の対応ログ

　たまにはBloggerのテーマ編集の話など。
　今回は「ページ」機能がモバイル環境で動作しなかった件について。
　　※解決済みだよ！
　おそらく現行仕様ではそもそも発生しない現象ですが、Bloggerカスタマイズに興味のある方もどうぞ。

　当ブログは、グーグル運営のブログサービス「Blogger」（ブロガー）を利用しています。
　Bloggerには「ページ」という機能があるのですが、これがどうもモバイル環境では正しく表示されていなかったらしいと分かりました。
　自分は「ページ」機能で試験的にスト5関連記事まとめ（→◆これ）を作っており、これがうまく動くようならまた別の「記事まとめ」ページを作ろうとも考えていました。
　「ページ」機能自体は「必須ではない」んだけどできれば使いたい……ということで、まずは挙動を詳しく確認してみました。

*「ページ」機能とは：
　そもそも「ページ」というのは、「サイト案内」「自己紹介」のようなめったに更新されない内容に使うもののようで、「静的ページ」（Static Page）とも呼ばれます。
~~（機能名が分かりにくすぎるんだよなあ……）~~
　なんでわざわざコレを使うかと言うと、「人気の投稿」ガジェットにて無視されるという特性のため。
　この「人気の投稿」は直近でアクセスの多かった記事を並べるというサイト内ランキング機能で、このブログでは現在PC版では右カラム内、モバイル版では◆トップページの下のほうに配置しています。

　ある程度人気のあるカテゴリを包括するような内容なら利便性も需要もありそうなのですが、将来的にアクセスランキングが「～の関連記事」「～の過去記事」で埋め尽くされる可能性を考えるとやや寒いなと思ったため、通常の記事とは扱いが異なる「ページ」を利用してみよう、というわけです。
　まあ本来の使いかたではないとか、そういうのは知らねえよってことで。

*モバイル版での表示不具合：
　実際の表示がこちら。

　なぜかラベルページのような一覧っぽい表示になっており、本文が表示されていません。
　Bloggerではユーザーの環境に応じてPC版（ウェブページ）とモバイル版が自動的に切り替わるようになっていますが、この表示になってしまうのはモバイル版のみでした。
　具体的には、URL末尾に?m=1が付いているのがモバイル版で、これを?m=0（強制PC表示）にすればスマホ等からでも閲覧可能でした……が、そんなもん見にきた人が知るわけないし、表示自体もPC仕様のためスマホからだと見づらい状態でした。

◇モバイル版URL：
http://gachi4.blogspot.com/p/blog-page.html?m=1

◇強制PC版URL：
http://gachi4.blogspot.com/p/blog-page.html?m=0

※指定が無い場合は自動判別される：
http://gachi4.blogspot.com/p/blog-page.html

　単純に「ページ」を使わず普通の記事としてまとめページを作ればすぐに解決するんですが、ここはBlogger編集の勉強もかねてもう少しねばってみることにしました。
（ランキングの件や、過去記事のリンク修正もイヤだったし）

◇テーマ編集と修正
　結論から言うと、mobile-main内で以下のように書き換えることで解決しました。

<b:if cond='data:blog.pageType != "item"'>
　↓
<b:if cond='data:blog.pageType == "index"'>

　どうやら本文表示／一覧表示を振り分ける判断文が少しおかしかったのが原因だったようです。
　ココに至った経緯についてもう少し詳しく書いておきます。
　なお前提として、自分が使用しているのは「旅行」という基本テーマをカスタマイズしたものです。

＊

　ざっとテーマ編集を読んでいくと、includableのmobile-postがモバイル本文で、それを呼び出しているのがmobile-mainだな、というのが分かりました。
~~（何度も編集してるんだけど毎回すぐ忘れる）~~

　その中に!=item（記事ページ以外という指定）の条件文があり、ここがどうもあやしいと見ていろいろ書き換えてみることにしました。
（非常に危険なので、よく分からない人は真似をしないでください）

<!-- posts -->
<div class='blog-posts hfeed'>

  <b:include data='top' name='status-message'/>

   <b:if cond='data:blog.pageType != "item"'>　←あやしい
      <b:loop values='data:posts' var='post'>
        <b:include data='post' name='mobile-index-post'/>
      </b:loop>
  <b:else/>
    <b:loop values='data:posts' var='post'>
      <b:include data='post' name='mobile-post'/>
    </b:loop>
  </b:if>
</div>

　見る限り、「個別記事画面（item）ではない」場合は全部mobile-index-post（一覧表示）にブン投げるような流れになっています。
　そして、itemの場合はmobile-postに行くので、これが本文を表示する部分だな、ということが分かります。

　であれば静的ページだった場合を指定すればいいか？と思い、以下のような文をあやしいと思った下あたりに差し込んでみましたが空の一覧ページになるだけでした。
　ここのstatic_pageというのが静的ページを指定するものです。

<b:if cond='data:blog.pageType == "static_page"'>
 <b:include data='post' name='mobile-post'/>
</b:if>

　改めて見返すと、どうやらmobile-postというのはb:loopとセットで使うもの（？）っぽいので、これも上記のb:elseのようにloopで囲めば普通に動くはず。（たぶん）
　が、この時は必死すぎてそこまで頭が回りませんでした。

　一応、ちゃんと表示されるPC版と比較する方向も考えましたが、mobile-postとはまったく違う記述でイマイチよく分かりませんでした。

＊

　結局、そもそも動かないものなのか？ と不安になり、試しに別アカウントを用意し、適当な新規テーマで確認してみることにしました。
　すると、たとえ「旅行」であってもモバイル版の静的ページが何の問題も無く動作していました。
　ここまで核心的なところに手を入れた記憶は無いのですが、ひょっとしたら気づかないうちにいじっていたのかも。
　もしくは最新版のテーマでは対応済みの現象だったという可能性もあります。

　いずれにせよ、すぐにちゃんと動くモデルが見つかったのは大きかったです。
　複雑な問題が出てきた場合は、とりあえずテスト用の別アカウントを用意してまっさらな状態で検証するのが効果的かなと。

　で、正しく動くテーマと自分のテーマでは何が違うんだ？？ と細部まで確認していくと、やはりあやしいと踏んでいた条件文に差異が見つかりました。
　結局以下の部分のみ書き換えたところ、あっさりとモバイル版の静的ページが問題なく機能するようになりました。（やったぜ）

<b:if cond='data:blog.pageType != "item"'>
　↓
<b:if cond='data:blog.pageType == "index"'>

　意味としては、「個別記事ページではない場合（!=item）」だったところを「一覧ページの場合（==index）」にした、ということになります。
　indexというのはやや特殊な指定で、トップページ、ラベルページ、検索ページ、さらに「アーカイブ」ページ等を広く指定するもののようです。
　それらが検知された場合はmobile-index-post（一覧画面）に渡され、そうではないitemやstatic_pageはmobile-post（本文表示）に行く、ということですね。

　こうして分かってみれば簡単に気づきそうなものですが、悩んでいる間は詰んだかなとも思っていたので解決できて安心しました。

*その他の更新箇所：
　上にも書いたようにこのブログがベースにしているのは基本テーマ「旅行」ですが、このテーマも自分が使い始めた時とは細かい差異がありました。
　たとえば以下のpageType in { ～ }という指定。

<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>

　この一文が、自分のテーマだと以下のようになっています。

<b:if cond='data:blog.pageType == "static_page"'>
  <b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
  <b:include data='post' name='comment_picker'/>
</b:if>

　いずれも「ページ種別がstatic_pageかitemだったらcomment_pickerを呼び出す」というものですが、比較するまでもなく現行版のほうが明らかに簡潔で美しいですね。
　　※「同じ」だけど「違う」んだよ！（熱弁）
　このpageType inという記述は2015年ごろに実装された構文らしく、もちろんブログ開設当初には「無かった」ものです。
　さらに、関数呼び出しに相当するinclude自体に条件文が組み込まれている点にも独自タグ体系の進化が見られます。
＊
　上記の件と合わせてまとめると、本文がある画面はpageType in ～ item,static_pageで、それ以外をpageType == indexと指定すれば簡潔かつ安定的に記述できそう。
（そもそも「ページ」使う人がどれだけ居るかしらんけど）

　条件文については、他にもandやorといったなじみ深いものもb:if等に普通に使えるようになっています。
　以前はelseや入れ子で一つずつ指定するしかなかったので、いつの間にかとても柔軟になったようですね。
　　→◆参考

　……といったあたりも、大多数のユーザーには見えない水面下で既存のテンプレートに適用されているという点は好印象。
　最初はとっつきにくくぶっきらぼうな印象もあるBloggerですが、いろいろ分かってる人には最終的には一番扱いやすいサービスかなと思います。
~~（まー他のブログとか忍者くらいしか使ったことないけど）~~

*モバイル版を考慮したテーマ選択：
　そう言えば、自分がBloggerを使い始めた頃はまだまだモバイル対応が未熟で、一覧ページを開いただけでURLが破綻するとか、そもそもモバイルページだと背景が真っ白になるなんてことも多々ありました。
（フィードバック送信しまくってたらいつの間にか直ってた……）
　そういったことも現行のテーマであれば対応済みなので、長年使ってはいるがテーマ編集がよく分からない……という方は思いきってテーマを変更する／同じテーマを読み込みなおすことで見えない部分までアップデートされるかもしれません。

　ここで備考として、基本テーマを選ぶ時はモバイル対応しているものを選ぶことも重要です。
　↓こちらはテーマ選択画面ですが、素直に一番上の「Contempo」「Soho」あたりを選ぶと非対応なので注意。

　見分けるポイントは「モバイル」プレビュー表示の下の歯車マークの有無で、これがある場合は「モバイルテーマの選択」メニューが利用できます。
　確認したところ、下のほうにある「シンプル」以降ならだいたい対応版で、「旅行」はもちろん「ウォーターマーク」「エスィリアル」あたりもOKでした。

　ちなみに非対応テーマから対応テーマに変更しようとすると、

＞「現在非表示のガジェットが表示されるようになる可能性があります」

　というメッセージが出て、逆に非対応テーマに変更しようとすると以下の警告が出るようです。

＞「このテーマを適用すると、これまでにカスタマイズしたテーマの設定がすべて失われます。」

　なお、対応テーマ→対応テーマへの変更は特に何の注意も無く変更されるようです。

　このあたり、自分の時はそんなことはまったく考えず適当に選んだのですが、「なんとなく機能的」程度の印象で「旅行」に決めたのも今思うと幸運でした。
（他のを選んでいたらモバイル対応が数年は遅れてたかも……）

　とりあえずこれからテーマをイジろうという方の参考までに。

　以上です。
＊
　メモしているネタはかなり大量にありますが、また気が向いたら■「Blogger」ラベルあたりに追加しておきます。
（※今のところ数年に１回も更新してません）