前の関連記事：Blogger:ページ番号付ページナビ(15)1MB制限に対応するナビの作成:その3
検索結果のフィードではフィードの総数が変化する
出来上がったと思って、テストブログで動作確認していると、検索結果のページナビのページ番号が動的に増えていくことに気が付きました。
常に現在表示しているページの次のページまでに変化するのです。
どこまで変化するかと表示するページ番号を増やしていくと、限界がちゃんとありました。
検索語によって限界が変わるので、ちゃんと検索結果を反映しているようです。
うーん、どうやって解決するか。
取得する投稿数を制限せずに検索結果を取得することも考えらえますが、フィードの取得数の制限により150個が限界です。
でもやはりそうするしかなさそうです。
PageNaviIndex_Blogger/PageNaviIndex_Blogger.js at 04823f7dbce9d5685d568b98705ce39115a6ef6a · p--q/PageNaviIndex_Blogger
他のところもちょこちょこ修正して、テストブログでは動くものができました。
このブログへPageNaviIndex_Bloggerモジュールを導入する準備
テンプレートはいじくり倒しているので入れ替えはやっかいです。
Blogger:表示速度向上のためCSSとJavaScriptの置き場を考える:その3
これの(イ)(へ)(ト)(チ)(リ)について要不要を考えます。
(イ)はページナビそのものなので不要です(Blogger:ページ番号付ページナビ(8)Paginavi_Bloggerモジュールの導入参照)。
Blogger:表示速度向上のためCSSとJavaScriptの置き場を考える:その4
これを読むと(へ)(ト)(チ)(リ)はpostインクルードの話なので関係ありませんね。
ということで、削除するのは(イ)のページナビだけです。
レイアウト画面で確認すると(イ)のcssを入れたのはHTML3、JavaScriptはHTML8です。
うーん、とりあえずHTML8の中身を消してみます。
消すといっても、他にコピペしておきます。
1 2 3 4 5 6 7 8 |
<script type="text/javascript">var PageNavi2_Blogger=PageNavi2_Blogger||function(){function l(){var a=location.href;/\/search\/label\//i.test(a)&&(a=a.replace("m=0?",""),c.postLabel=/\/search\/label\/(.+)(?=\?)/i.exec(a)[1]);/\?q=|\.html$|updated-min=/i.test(a)||(c.currentPageNo=/#PageNo=/i.test(a)?/#PageNo=(\d+)/i.exec(a)[1]:1,k(c.postLabel?"/feeds/posts/summary/-/"+c.postLabel+"?alt=json-in-script&callback=PageNavi2_Blogger.callback.getTotalPostCount&max-results=1":"/feeds/posts/summary?max-results=1&alt=json-in-script&callback=PageNavi2_Blogger.callback.getTotalPostCount"))}function g(a,b){var c=document.createElement("div");c.className="displaypageNum";c.appendChild(document.createElement("a"));c.firstChild.textContent=b;c.firstChild.href="#";c.firstChild.title=a;return c}function m(a){var b=document.createElement("div");b.className="pagecurrent";b.textContent=a;return b}function k(a){var b=document.createElement("script");b.type="text/javascript";b.src=a;document.getElementsByTagName("head")[0].appendChild(b)}function n(a){a=a||event;if((a=a.target||a.srcElement)&&"displaypageNum"==a.parentNode.className)return a=a.title,c.pageNo=a,1==a?location.href=c.postLabel?"/search/label/"+c.postLabel+"?max-results="+c.perPage:"/":(a=(c.pageNo-1)*c.perPage,k(c.postLabel?"/feeds/posts/summary/-/"+c.postLabel+"?start-index="+a+"&max-results=1&alt=json-in-script&callback=PageNavi2_Blogger.callback.getURL":"/feeds/posts/summary?start-index="+a+"&max-results=1&alt=json-in-script&callback=PageNavi2_Blogger.callback.getURL")),!1}function p(a){var b=document.createElement("div");a.forEach(function(a){b.appendChild(a)});b.style.padding="0px 5px";b.style.display="flex";b.style.justifyContent="center";b.style.alignItems="center";b.style.transform="scaleX(0.9)";var d;c.elements.forEach(function(a){a.textContent=null;d=b.cloneNode(!0);d.onclick=n;a.appendChild(d)})}var f={defaults:{perPage:7,numPages:5},callback:{getURL:function(a){a=/(\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d)\.\d\d\d(.\d\d:\d\d)/i.exec(a.feed.entry[0].published.$t);var b=encodeURIComponent(a[1]+a[2]);a="/search/label/"+c.postLabel+"?updated-max="+b+"&max-results="+c.perPage+"#PageNo="+c.pageNo;b="/search?updated-max="+b+"&max-results="+c.perPage+"#PageNo="+c.pageNo;location.href=c.postLabel?a:b},getTotalPostCount:function(a){var b=parseInt(a.feed.openSearch$totalResults.$t,10);a=[];var d=c.numPages,h=Math.floor(d/2),e=c.currentPageNo-h;1>e&&(e=1);b=Math.ceil(b/c.perPage);d=e+d-1;d>b&&(d=b);1<e&&a.push(g(1,1));3==e&&a.push(g(2,2));if(3<e){var f=e-c.jumpPages+h;1>f&&(f=1);a.push(g(f,"\u00ab"))}for(;e<=d;e++)a.push(e==c.currentPageNo?m(e):g(e,e));d==b-2&&a.push(g(b-1,b-1));d<b-2&&(h=d+1+h,h>b&&(h=b),a.push(g(h,"\u00bb")));d<b&&a.push(g(b,b));p(a)}},all:function(a){a.forEach(function(a){(a=document.getElementById(a))&&c.elements.push(a)});0<c.elements.length&&l()}},c={perPage:f.defaults.perPage,numPages:f.defaults.numPages,jumpPages:f.defaults.numPages,postLabel:null,pageNo:null,currentPageNo:null,elements:[]};return f}();PageNavi2_Blogger.all(["blog-pager","blog-pager2"]);</script> |
ページナビが消えるだけですね。
今度はHTML3の中身を消してみます。
1 2 3 |
<style type="text/css">#blog-pager,#blog-pager2{clear:both}.blog-pager{background:none}.displaypageNum a,.showpage a{padding:5px 10px;margin:6px 2px;color:#fff;background-color:#2973fc;-webkit-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);-moz-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);box-shadow:0 5px 3px -1px rgba(50,50,50,0.53)}.pagecurrent{padding:5px 10px;margin:6px 2px;-webkit-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);-moz-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);box-shadow:0 5px 3px -1px rgba(50,50,50,0.53)}.displaypageNum a:hover,.showpage a:hover{background:#000;text-decoration:none;color:#fff}.pagecurrent{background:#000;text-decoration:none}#blog-pager .showpage,#blog-pager,.pagecurrent{font-weight:bold;color:#fff}#blog-pager .pages{border:#2973fc;-webkit-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);-moz-box-shadow:0 5px 3px -1px rgba(50,50,50,0.53);box-shadow:0 5px 3px -1px rgba(50,50,50,0.53)}#blog-pager a{margin:0 5px 0 0;padding:2px 10px 3px;text-decoration:none;color:#fff;background:#2973fc;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;-o-transition:all .3s ease-in;transition:all .3s ease-in}#blog-pager a:hover{color:#fff;text-decoration:none;background:#000}#blog-pager-older-link,#blog-pager-newer-link{float:none}</style> |
Blogger:ページナビの横に「上に戻る」ボタンを作るで作ったボタンも使っていないので削除することにします。
Blog1ウィジェットのnextprevインクルードから次のコードを削除しました。
1 2 3 |
<b:if cond='data:blog.pageType == "item"'> <a href='#toko_taitoru'>記事タイトルに戻る</a></b:if> |
このブログへPageNaviIndex_Bloggerモジュールを導入する
上記のPageNaviIndex_Blogger.jsをlinuxBean14.04(126)Closure CompilerでJavaScriptを圧縮するで圧縮します。
java -jar ~/closure-compiler/compiler.jar --js PageNaviIndex_Blogger.js --js_output_file PageNaviIndex_Blogger.min.js |
Closure Compilerで圧縮することで文字列も適切なコードに変換してくれます。
デバッグのためにClosure Compilerで圧縮しないものを導入すると"「"とか"」"はコードそのものが表示されてしまいました。
大きな中身を入れると表示させなくても空間が開くので一番下のfooter-2-2にあるHTML8ガジェットに<script>と</script>で挟んでいれました。
(2017.3.9追記。 表示がワンテンポ遅れるため、Blog1ガジェットのすぐ下にモジュールを移動させました。そうすると著明に表示速度が改善しました。)
あまり容量が大きいと削られるので、保存したらもう一度開いて最後まで保存されているか確認します。
今回は大丈夫でした。
HTMLの編集でHTML8ウィジェットがmobile='yes'になっていることを確認しておきます。
あとはBlogger:ページ番号付ページナビ(15)1MB制限に対応するナビの作成:その3と同様にテンプレートを編集します、、、と思ったら <!-- これがないとカラムがずれる -->というif文があるとサイドバーがなぜか外にはみ出てしまいます。
<!-- これがないとカラムがずれる -->というif文を削ると問題は解決しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<b:if cond='!data:mobile'> <!-- モバイルサイトでないとき --> <div class='blog-posts hfeed'> <b:include data='top' name='status-message'/> <b:if cond='(data:blog.pageType == "index") or (data:blog.searchLabel;) or (data:blog.pageType == "archive")'> <!-- インデックスページのとき、ラベルインデックスページのとき、月のアーカイブページのとき --> <div class='blog-pager' id='pagenaviindex'/><!-- ページナビとインデックスページ --> <b:else/> <!-- 上記以外のページのとき --> <b:loop values='data:posts' var='post'> <div class='post-outer'> <b:include data='post' name='post'/> </div> <b:include name='nextprev'/> <b:include name='feedLinks'/> </b:loop> </b:if> </div> <b:else/> <!-- モバイルサイトのとき --> <b:include name='mobile-main'/></b:if> |
(2017.3.11追記。 アイテムページでコメント表示が抜けていたので以下に変更しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<b:if cond='!data:mobile'> <!-- モバイルサイトでないとき --> <div class='blog-posts hfeed'> <b:include data='top' name='status-message'/> <b:if cond='(data:blog.pageType == "index") or (data:blog.searchLabel;) or (data:blog.pageType == "archive")'> <!-- インデックスページのとき、ラベルインデックスページのとき、月のアーカイブページのとき --> <div class='blog-pager' id='pagenaviindex'/><!-- ページナビとインデックスページ --> <b:else/> <!-- 上記以外のページのとき --> <b:loop values='data:posts' var='post'> <div class='post-outer'> <b:include data='post' name='post'/> <b:include data='post' name='comment_picker'/> <!-- コメント --> </div> <b:include name='nextprev'/> </b:loop> </b:if> </div><b:else/> <!-- モバイルサイトのとき --> <b:include name='mobile-main'/></b:if> |
(2017.3.12追記。Google アナリティクスで追跡されていないことに気が付きました。この置換をしてからではないようです。Googleアナリティックスにログインして管理→プロパティ→ユーザー管理→トラッキング情報→トラッキングコード、のコードをHTML/JavaScriptガジェットに追加してトラッキングが復活しました。mobile='yes'も設定しました。もともとのトラッキングコードがどこに埋め込まれていたのかはわかりませんでした。)
PageNaviIndex_Blogger/PageNaviIndex_Blogger.js at 0bc3e4eaf03385183c7b9b0576a644a57cdd2a21 · p--q/PageNaviIndex_Blogger
ちょこちょこ修正して、これになりましたが、まだバグがあります。
まずラベルリストのラベル名をクリックしてもラベルインデックスページが表示されない問題の解決法です。
ラベル名取得に邪魔になるのでBlogger:モバイルサイト(3)ページ番号付ページナビの導入で入れたdata:label.url のあとにいれた"&max-results=7"を削除して'data:label.url'だけにします。
これで解決しました。
月別アーカイブのインデックスページが表示さない問題はHTML8ウィジェットをインデックスページにしか表示させないように設定してあったためこれをテンプレートから消去して解決しました。
JavaScriptで指定位置までスクロールさせる方法
これを参考に、ページナビボタンをクリックすると上のページナビボタンの位置にスクロールするようにしました。
PageNaviIndex_Blogger/PageNaviIndex_Blogger.js at 0e20814663e3d11ec10b273e4c4c8427496298a2 · p--q/PageNaviIndex_Blogger
これで完成です。
改善したい点はiPod touchの縦画面でみたときに、3桁のページ番号のときに画面からはみ出る問題です。
いまのところいい解決法はないので横画面にするしかないです。
(2017.3.8追記。
PageNaviIndex_Blogger/PageNaviIndex_Blogger.js at 36f099e26093f5a471a846d3a0874f47b6e46040 · p--q/PageNaviIndex_Blogger
デフォルト値の設定をすべてモジュール外にだしました。
モジュール外のコードからのデフォルト値の取得方法が間違っていたのでそれも修正しました。
Git Flowのブランチがぐちゃぐちゃになってきて、なにも変更していないはずなのにコンフリクトして、わけがわからなくなっています。)
(2017.3.9追記。
Node.removeChildではなく、display:none;を使ったほうがコードが見やすくなるので書き換えました。またインデックスページに置換するdiv要素をが見つかってからすべての計算を始めるようにしました。
PageNaviIndex_Blogger/PageNaviIndex_Blogger.js at a0bd7848fcf758f8300cb36e8abf64460d5db169 · p--q/PageNaviIndex_Blogger
このバージョンはこのブログ用にカスタマイズしてあり、342行目でscrollToの値をこのブログにしかないidのuppermostにしてあります。
342 |
PageNaviIndex_Blogger.defaults["scrollTo"] = "uppermost"; // ページナビボタンで移動後のスクロール先。設定なければPageNaviIndex_Blogger.all()の引数のidの要素に飛ぶ。 |
(2017.3.11追記。
PageNaviIndex_Blogger/PageNaviIndex_Blogger.js at c10ee3a8228eeddf4bee778e4314c16cf925cb5e · p--q/PageNaviIndex_Blogger · GitHub
Blogger:カレンダー(12)Calendar5_Bloggerモジュールの導入と同様にボタン連打時の対応を導入しました。変更したのは135行目だけです。)
参考にしたサイト
JavaScriptで指定位置までスクロールさせる方法
スクロールさせたい位置にある要素の座標を取得して、スクロール先に指定します。
0 件のコメント:
コメントを投稿