Blogger:ページ番号付ページナビ(11)Paginavi2_Bloggerモジュールの修正

モバイルサイトのアイテムページでもページナビが表示されること、iOS Safariでウェブバージョンのラベルインデックスページをみるとページナビが表示されないこと、を修正します。

前の関連記事：Blogger:ページ番号付ページナビ(10)ボタンの折り返し表示をやめる

圧縮したJavaScriptを圧縮した前のコードに入れ替える

Blogger:ページ番号付ページナビ(10)ボタンの折り返し表示をやめるでJavaScriptをClosure Compilerで圧縮してHTML/JavaScriptガジェットに入れました。

Chromeのデバッガで整形してもこの圧縮コードは整形できなかったので、まず圧縮コードを圧縮していまいものに入れ替えました。

あまり長いコードだとガジェットの中に入りきらないのですが、今回は入りきり、動作もしました。

モバイルサイトのアイテムページでもページナビが表示されることへの対策

まず単に表示されるdiv要素の初期化をしていないところを修正しました。

PageNavi2_Blogger/PageNavi2_Blogger.js at 35b9229907f7f7a12c3ea9697190c16462fea45a · p--q/PageNavi2_Blogger

        vars.elements.forEach(function(elem){
            elem.textContent = null;  // 要素を初期化。
            dupNode = divNode.cloneNode(true);  // ボタンノードを子ノードとするdivノードを複製する。デフォルトのプロパティしかコピーされない。イベントもコピーされない。
            dupNode.onclick = onclickEvent;  // 複製したノードにイベントのプロパティを追加する。
            elem.appendChild(dupNode);   // 既存のノードに追加して表示させる。
}); 

141行目を追加しましたが解決しませんでした。

アイテムページではページナビが表示されないようにしないといけません。

idがblog-pagerというdivをテンプレートにもともとあったものを置換しているのでアイテムページではページナビに置換されているのです。

しかし、ウェブバージョンでは置換されていないのはどうしてだかわかりません。

これは根本的解決としてページナビを使わないページでは、ページナビモジュールをいれたガジェットを表示させないようにします。

レイアウト画面でガジェットのidを確認するとHTML8でした。

  <b:widget id='HTML8' locked='false' mobile='yes' title='' type='HTML' visible='true'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

これをインデックスページのみに表示させるようにします。

  <b:widget id='HTML8' locked='false' mobile='yes' title='' type='HTML' visible='true'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<b:if cond='data:blog.pageType == &quot;index&quot;'> <!-- インデックスページのみに表示させる -->
    <data:content/>
</b:if>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

これで解決しました。

iOS Safariでウェブバージョンのラベルインデックスページをみるとページナビが表示されないことへの対策

これはURLからラベルが取得できていないのが原因でした。

モバイルデバイスからウェブバージョンのラベルインデックスページを見たときのURLはこのようになっていました。

https://p--q.blogspot.jp/search/label/Blogger%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA?m=0?max-results=7

?が二つあるので正規表現でうまくラベルが取得できていません。

        if (/\/search\/label\//i.test(thisUrl)) {  // ラベルインデックスページの場合URLからラベル名を取得。
            vars.postLabel = /\/search\/label\/(.+)(?=\?)/i.exec(thisUrl)[1];  // 後読みは未実装の可能性あるので使わない。
        } 

最初の?にだけ一致してほしいのですが、最短マッチを使っても思った通りの文字列は得られませんでした。

        if (/\/search\/label\//i.test(thisUrl)) {  // ラベルインデックスページの場合URLからラベル名を取得。
            thisUrl = thisUrl.replace("m=0?","");  // モバイルデバイスからウェブバージョンを見た時の文字列を削除。
            vars.postLabel = /\/search\/label\/(.+)(?=\?)/i.exec(thisUrl)[1];  // 後読みは未実装の可能性あるので使わない。
        } 

もう予めm=0?を削除して解決しました。

これで問題が解決しました。

PageNavi2_Blogger/PageNavi2_Blogger.js at 5bcf0855e0bbe4afe71e7ceaaa5e50d9fdb77581 · p--q/PageNavi2_Blogger

再度圧縮したコードに入れ替えて修正完了です。

(2016.12.20追記。ボタンのページ番号はname属性にもたせていましたが、title属性に変更しました。
PageNavi2_Blogger/PageNavi2_Blogger.js at 90090ca3d750637787c5e6e2cfbcd6b3d9fd0c7b · p--q/PageNavi2_Blogger）

次の関連記事:Blogger:ページ番号付ページナビ(12)1ページ目の1MB制限に対応する(失敗編)