Nature's Farmer
業務外
W3Cリンクチェッカーを使った一括リンクチェック用の手順書兼備忘録を残しましたが、このままのやり方では失敗します。
 |
2019年9月7日土曜日 |
| W3Cリンクチェッカー備忘録 |
昨年9月に、事前準備として環境変更をしましたが、リンクチェック自体に手を付けられず、かと言って環境戻しも面倒くさい。結局、モバイルバージョンの表示が中途半端なまま、半年近く放置していました。
本来、あるべき姿は？
各ガジェットのモバイルバージョンの抑止はそれぞれ指定するのではなく、変数化してオン・オフは1回の操作で処理すべきです。その操作もテンプレートを直接編集するのではなく、外部のガジェット経由が望ましい。
モバイルのナビゲーションボタン（ホームボタンや、ウェブバージョンへのリンクのオン・オフ）もこの変数で操作できるようにする。
そのためには、グローバル変数の新規追加か、利用者が使えるグローバル変数が必要です。
以下が右サイドバーの定義です。6個のガジェットのパラメータをグローバル変数経由で「mobile='yes'」から「mobile='no'」に変えたい。
以下が右サイドバーの定義です。6個のガジェットのパラメータをグローバル変数経由で「mobile='yes'」から「mobile='no'」に変えたい。
- id='AdSense1' , type='AdSense'
- id='HTML3' , title='自己紹介'
- id='BlogSearch1' , title='このブログを検索'
- id='PageList1' , title='コンテンツ'
- iid='Label2' , title='ラベル'
- id='BlogArchive1' , title='ブログアーアカイブ'
 |
| 右サイドバーの定義です |
実装検討
Blogger ヘルプを見付けました。
https://support.google.com/blogger/?visit_id=637147039830953446-3084404808&hl=ja&rd=1#topic=6321969
https://support.google.com/blogger/?visit_id=637147039830953446-3084404808&hl=ja&rd=1#topic=6321969
Blogger スタート ガイド
レイアウト用のデータタグ
https://support.google.com/blogger/answer/47270?hl=ja
レイアウト用ページ要素タグについて
https://support.google.com/blogger/answer/46888?hl=ja
レイアウト用のウィジェット タグ
https://support.google.com/blogger/answer/46995
グローバル変数は限られ、追加方法は無いようです。うーむ。いきなり構想倒れです。笑
ヘルプの内容も薄い。情報が足らないね。ブログテンプレートのソースコードと突き合わせる時に気になります。
頭の中のアイデアの整理です。
案１
グローバル変数を定義してガジェットから操作する。以下がイメージ。
- 新規にリンクチェックガジェットを定義
- この中で内でグローバル変数（例）GlobalMobile=yes/noを操作
- 各ガジェットのMobileパラメータはGlobalMobileを設定
- リンクガジェット内での操作が各ガジェットのMobileパラメータに伝播する。
案２ 管理ツールのパラメータでガジェットを制御
管理ツールから何らかのパラメータを操作してガジェットの表示／非表示を制御する。以下がイメージ。
- 管理ツールである条件を変更
- この条件を元各ガジェットのMobileパラメータにyes/noを設定
- 参照系の変更のみで更新系に影響がないこと（データが汚れない）
- 参照系でも当たり障りがないこと（大きく見た目やレイアウトが変わらない）
- パラメータがソースからアクセスできること。
各ガジェットのMobileパラメータへ引き渡す方法は確立していません。しかし、ガジェットと関係のない、モバイルのナビゲーションボタンの抑止も必要なので試してみましょう。
モバイルのナビゲーションボタンは画面中央のセクションで記事本文の下側に配置されています。id='Blog1'、title='ブログの投稿'が記事本体です。
 |
| 画面中央のセクション構成です、title='ブログの投稿'が記事本体 |
記事本体を展開すると次の構造になっていました。ここでid='nextprev'がモバイルのナビゲーションボタンです。
 |
| 記事本体の構成を展開しました |
さらにid='nextprev'を展開しました。ここに各ナビゲーションボタンが定義されています。これに言語を指定して<b:if> Bloggerタグで制御します。
- id='blog-pager-newer-link'（次の投稿）
- id='blog-pager-older-link'（前の投稿）
- id='blog-pager-home-link'（ホーム）
- class='mobile-desktop-link'（ウェブバージョンを表示）
 |
| 記事本体のmobile-nextprevにナビゲーションボタンが定義されています |
さー、勝負勝負！！
管理ツールで言語を変更すると。ナビゲーションボタンが消えました。成功です。
『コメントを投稿』が『張貼留言 』に変わっています。実運用では言語を切り替えるのは、リンクチェックする数時間だけです。管理ツールで言語を戻すだけなので一瞬です。気にしない。気にしない。
これがブログテンプレートを元に戻すとなったら、また大変ですけどね。
 |
| 言語＝日本語指定、 ナビゲーションボタンが表示されています |
 |
| 言語＝中国語（繁体字）指定、 ナビゲーションボタンが消えました |
ソースコードです。
1 2 3 4 5 6 7 |
<!-- 2020/01/15 言語jaで実行制御 --><b:if cond='data:blog.locale == "ja"'> ナビゲーションボタンの元のソースコード</b:if><!-- 2020/01/15 ここまで --> |
ここまでは上手くいきましたが、言語の指定結果を各ガジェットのMobileパラメータへ引き渡す方法が判りません。ローカル変数とかを定義できないと値の引き渡しができません。ダメなんじゃない、このアプローチ。
試しに、言語の指定でガジェット全体を削除すると、これは『ガジェットがない』とエラーになってしまいました。
ここで数日停滞です。ネットで見つけたBloggerの参考書の紹介サイト（英語）とか読み込みましたが解決しません。ただし、2本の使えそうな記事を見つけました。
1本はBlogerに専用のホームページ（トップページ）を作る方法です。この中でホームページから不要なサイドバーを非表示にする2本目の記事が紹介されていました。
Bloggerのホームページは最新投稿が一覧で表示されるだけで、専用の画面というものはありません。デフォルトでは最大7件が表示されます。井戸掘りブログでは『https://nsfarmer.blogspot.com』にアクセスすると、最新の投稿を最大7日分を表示するように拡張しています。
専用のホームページがないので、無理やりトップページリンクで誘導していますが、本来はこの記事と同じことがやりたかった。近々、実装してみましょう。
CCreate Real Homepage for Blogger Blog
Bloggerのブログのための本当のホームページを作成
https://bloggerbook.blakbin.com/2018/10/create-real-homepage-for-blogger-blog.html
How to Hide Sidebar on Certain Pages in Blogger
ブロガーで特定のページにサイドバーを非表示にする方法
https://bloggerbook.blakbin.com/2018/10/how-to-hide-sidebar-on-certain-pages-in-blogger-blog.html
案３ 管理ツールのパラメータでサイドバーを制御
管理ツールからパラメータを操作してサイドバー自体の表示／非表示を制御する。パラメータは先ほどと同じ、言語の指定で良いでしょう。
非表示にしたいガジェットは右サイドバー１（id='sidebar-right-1'）に集約してあります。非表示にしたくないガジェットは右サイドバー３（id='sidebar-right-3'）に移動してあります。
記事を読むと、こう書けと言ってるらしい。右サイドバーを定義する際に条件式を指定できると。今回は『モバイルバージョン』で『言語≠日本語』のand条件時にサイドバーを非表示にする。表示するのは逆の状態のor条件で良いはず。
1 |
<b:section cond='!data:blog.isMobileRequest or data:blog.locale == "ja"' class='sidebar' id='sidebar-right-1' name='Sidebar' showaddelement='yes'> |
ですが、テンプレートのソースをみると、<b:section> Bloggerタグではなく、<b:section-contents> Bloggerタグが使われています。
1 |
<b:section-contents id='sidebar-right-1'> |
勝負勝負！！
テンプレートのソースを記事どおりに<b:section> Bloggerタグで条件式指定で保存するとエラー。逆に<b:section-contents> Bloggerタグに条件式を付加して保存しても無視されます。ダメだ。
ネットを検索して、サイドバーを非表示する方法を探しましたが上記記事と同じ、<b:section> Bloggerタグを使うものでした。情報が古いか？
試しに、言語の指定でサイドバー全体が非表示になるようにソースを修正しても、この修正が無効になるようにテンプレートが自動改変されました。
Bloggerブログでモバイルのガジェットの表示を切り替えるソースコード
https://www.nagahitoyuki.com/2017/09/sourcecode-to-switch-display-of-mobile-gadget-in-blogger-blog.html
→このやり方でもサイドバー消せない
ソースを見ると、<b:section> Bloggerタグと<b:section-contents> Bloggerタグが混在しています。消したいのは右サイドバー1（id='sidebar-right-1'）です。
<b:section> Bloggerタグ<b:section class='navbar' id='navbar' maxwidgets='1' name='Navbar' showaddelement='no'><b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'><b:section class='tabs' id='crosscol' maxwidgets='1' name='Cross-Column' showaddelement='yes'/> 未使用<b:section class='tabs' id='crosscol-overflow' name='Cross-Column 2' showaddelement='no'/> 未使用<b:section class='main' id='main' name='Main' showaddelement='no'><b:section class='foot' id='footer-3' name='Footer' showaddelement='no'>
<b:section-contents id='sidebar-right-1'/><b:section-contents id='sidebar-right-2-1'/> 未使用<b:section-contents id='sidebar-right-2-2'/> 未使用<b:section-contents id='sidebar-right-3'/><b:section-contents id='footer-1'/> 未使用<b:section-contents id='footer-2-1'/> 未使用<b:section-contents id='footer-2-2'/> 未使用メインセクションの下にある見慣れぬ<macro:include>文が怪しい。
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class='column-right-outer'><div class='column-right-inner'> <aside> <macro:include id='main-column-right-sections' name='sections'> <macro:param default='2' name='num'/> <macro:param default='sidebar-right' name='idPrefix'/> <macro:param default='sidebar' name='class'/> <macro:param default='true' name='includeBottom'/> </macro:include> </aside></div></div> |
サイドバーの表示制御の調査は先が見えず、いったんここで中断。
案４ ガジェットに表示・非表示の条件を付与
言語指定でガジェット全体を非表示にすると案2ではエラーになりました。ガジェット自体を非表示にするのにはお作法がありました。
Bloggerのガジェットを特定ページで表示・非表示に設定する方法本当は一括でサイドバーを非表示にしたいところですがしかたない。10件も20件もあるわけではないので、がんばりましょう。
https://kazulog-life.com/2018/01/show-and-hide-blogger-gadgets.html#toc9
https://web.archive.org/web/20180828140006/https://kazulog-life.com/2018/01/show-and-hide-blogger-gadgets.html#toc9 ←キャッシュです。
ブログアーカイブ id='BlogArchive1の'ソースコードです。追加したのは3行です。『モバイルリクエスト』で『言語が日本語（ja）でない』ときは表示しない。でなければ表示するです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<b:widget id='BlogArchive1' locked='false' mobile='yes' title='ブログ アーカイブ' type='BlogArchive' version='1'> <b:widget-settings> <b:widget-setting name='showStyle'>HIERARCHY</b:widget-setting> <b:widget-setting name='yearPattern'>yyyy</b:widget-setting> <b:widget-setting name='showWeekEnd'>true</b:widget-setting> <b:widget-setting name='monthPattern'>MMMM</b:widget-setting> <b:widget-setting name='dayPattern'>MMM dd</b:widget-setting> <b:widget-setting name='weekPattern'>MM/dd</b:widget-setting> <b:widget-setting name='chronological'>true</b:widget-setting> <b:widget-setting name='showPosts'>true</b:widget-setting> <b:widget-setting name='frequency'>WEEKLY</b:widget-setting> </b:widget-settings> <b:includable id='main'><!--2020/1/18ガジェット抑止--><b:if cond='data:blog.isMobileRequest and data:blog.locale != "ja"'><b:else/> <b:if cond='data:title != ""'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='ArchiveList'> <div expr:id='data:widget.instanceId + "_ArchiveList"'> <b:include cond='data:style == "HIERARCHY"' data='data' name='interval'/> <b:include cond='data:style == "FLAT"' data='data' name='flat'/> <b:include cond='data:style == "MENU"' data='data' name='menu'/> </div> </div> <b:include name='quickedit'/> </div></b:if><!--2020/1/18ガジェット抑止ここまで--></b:includable> |
勝負勝負！！
成功です。本文の下には、消してはならない『重要』のみしかありません。いいね。
 |
| ガジェットを非表示にできました |
おまけですが、画面の最末端はデバックエリアにしました。ブログテンプレートが動かしながらでないと解析できず、printf（古いね）も使えないので目立たない画面最末端でごにょごにょすることにしました。
 |
| おまけ、中央のセクション末尾にデバック領域を設けました |
案５ 新しいテンプレートを使う
最後の最後にこんな記事を見つけました。新しいテンプレートなら簡単にガジェットの表示／非表示が制御できるようです。まー、いいや。ここまで苦労したんだから、今のテンプレートを使い続けましょう。
Blogger プレミアムテンプレート MagOne の特徴
https://blogger101.blogging-life.com/2019/05/magone-features-introduction.html
てか、プレミアムと言うだけあって、これ有償ですな。井戸掘りブログのポリシーに反します。それに設定が難しいから有償サポートするってことらしい。
却下！！
案6 サイドバーを自作する
以前はテーマの設定画面でサイドバーの追加や配置を自由に行えたはず。昔のブログテンプレートなら可能なのかな？
利用者が追加したサイドバーなら、表示・非表示の制御も行えるはず。
ひとしきり調べましたが、判りません。ブログテンプレートを『クラッシック』に戻したら、そもそもテーマ設定画面でナビゲーションバー（NavBar）ぐらいしか変更できない。後はHTMLの編集のみ。レイアウト設定画面も出なくなる。ダメだ。
昔はどうやってやったんだっけ。iGoogleみたいなGUIだったけど…。もしかしたら、廃止されたiGoogleそのものだったのかもね。
却下！！
案6 サイドバーを自作する
以前はテーマの設定画面でサイドバーの追加や配置を自由に行えたはず。昔のブログテンプレートなら可能なのかな？
利用者が追加したサイドバーなら、表示・非表示の制御も行えるはず。
ひとしきり調べましたが、判りません。ブログテンプレートを『クラッシック』に戻したら、そもそもテーマ設定画面でナビゲーションバー（NavBar）ぐらいしか変更できない。後はHTMLの編集のみ。レイアウト設定画面も出なくなる。ダメだ。
昔はどうやってやったんだっけ。iGoogleみたいなGUIだったけど…。もしかしたら、廃止されたiGoogleそのものだったのかもね。
一応、当初想定していたリンクチェックに必要なリンクの抑止は完成です。ですが、モバイルテンプレートが少し読めるようになったので、もう少し頑張りましょう。
追加でこれも削除したい。記事の投稿（id='Blog1'）の下部にある3件のリンクです。
- タイムスタンプ
- SNSへの共有リンク
- コメントの投稿リンク
chromeブラウザのデベロッパーツールで画面上のソースを調べて、各アイテムの当たりを付けてテンプレートのソースを解析しました。
3件のリンクはいずれも、記事の投稿（id='Blog1'）を構成する部品（id='mobile-post'）に定義されていました。
- タイムスタンプはtitle='permanent link'のリンクでした。
- SNSの共有リンクはid='mobile-share-button'のリンクでした。
- コメント投稿はname='comment_picker'で組み込まれる別部品でした。
同じ要領で<b:if> Bloggerタグを組み込みます。
 |
| 記事の投稿下のタイムスタンプ、 SNS共有リンク、 コメント投稿リンクを削除しました |
お上手、パチパチ。
感想と構想
2020年1月15日水曜日
儂にはちょっとハードル高いです。数日掛かりそうですね。
2020年1月19日日曜日
リンクチェックのための、お手軽な環境変更の仕組みが完成しました。
ここまでできたら、記事本文下のタイムスタンムと、SNSの共有リンク、コメントの投稿リンクも何とかしたいですね。リンクチェックの対象記事が700件を超えています。この3件のリンクだけで2,100回の目検が必要になります。
どの記事を参考にしたのか判らなくなりました。笑
読み直して整理します。
テンプレートの仕組みと機能 ～Blogger テンプレートを作るよ！ (3)～
https://madoug-kobo.blogspot.com/2016/09/blogger-template-3.html
BloggerをCSSカスタマイズする方法
http://tounderlinedk.blogspot.com/2010/05/bloggercss.html
【第３回】これでわかった！Bloggerの制御タグ・データタグまとめ
https://bgt-48.blogspot.com/2018/01/3blogger.html
0 件のコメント:
コメントを投稿