サイドバーの表示／非表示制御

業務外

1月上旬に退院して、ほぼ自宅ベットで療養中です。調子の良い日は散歩がてら畑の整備に向かってますが、寒くて風邪をひくのが嫌で中々出歩くことができません。
そこでシコシコと井戸掘りブログのカストマイズを続けていましたが、ほぼやり切った感じです。

残りはリンクチェック時に諦めたサイドバーの表示／非表示制御です。これはリンクチェックでガジェットを隠すだけでなく、井戸掘りブログのホームページを作りたいと考えたからです。
現在の井戸掘りブログのホームページ（https://nsfarmer.blogspot.com/）は記事一覧のインデックスページページです。初めて井戸掘りブログを訪問した人向けに、ここはトッページにしたい。

ホームページをインデックスページから
トップページに切り替えたい

たぶん、ブログの投稿ガジェットで記事を表示しているmain部でホームページのURLならトップページを表示するように手直しすれば良いはず。トップページは井戸掘りブログのタッチダウンページの役割なのでシンプルな構成にしたい。トップページ自体に井戸掘りブログの全てのコンテンツが包含されるので、サイドバーは不要です。つまり、サイドバーは消したい。

トップページにサイドバーは不要です

そもそもはこちらの参考記事のアイデアです。

Create Real Homepage for Blogger Blog
Bloggerのブログのための本当のホームページを作成
https://bloggerbook.blakbin.com/2018/10/create-real-homepage-for-blogger-blog.html

しかし、どうしてもサイドーを消すことができず、断念していました。

2020年1月15日水曜日
W3Cリンクチェッカー運用改善


半月放置していましたが、こんな記事を見つけました。

Blogger レイアウトにセーフハウス（隠れ家）を追加する for Blogspot Blogs
https://btf-jp.blogspot.com/2017/10/blog-post.html

ガジェットを一時的に非表示にしたいときに、ガジェットを退避させる機能です。セーフハウスセクションという特別な場所を作ることでここに移動したガジェットが非表示になります。私がリンクチェックをやっていた時に欲しかった機能に近い。

レイアウトの末尾、id='footer-3'のセクションの下に配置しました。id='HTML5'のガジェットは版権表示です。

セーフハウスセクションのソースコードです。2行目でソース折り畳みを表現していますが、見た目だけなのでご注意。

      <b:section class='foot' id='footer-3' name='Footer' showaddelement='no'>
        <b:widget id='HTML5' locked='false' mobile='yes' title='' type='HTML' version='1'>…</b:widget>
      </b:section>
      <b:section class='safehouse' cond='data:view.isLayoutMode' id='safehouse' name='Safehouse' showaddelement='no'/>

<data:view.isLayoutMode/>つまり、レイアウト画面だけ表示（有効化）され、実行時には意味を成さないセクションの意味のようです。

SafeHouseのセクションが表示されました

確かにSafeHouseのセクションに移動したガジェットは表示されません。
でも、何かするたびにSafeHouseのセクションにガジェットを移動するのは面倒臭い。しかも終わったら戻さなければならない。これは使えないね。

---

使えないSafeHouseのセクションの調査は無駄でしたが、新しいアイデアが出ました。

サイドバーは<b:section-contents> Bloggerタグが使われています。<b:section> Bloggerタグなら条件式を付与して表示・非表示を制御できるのですが、<b:section-contents> Bloggerタグはこれが効きません。

ならば、<b:section-contents> Bloggerタグを止めて、新たに<b:section-contents> Bloggerタグでサイドバーセクションを作って、表示・非表示を制御すれば良いやん。

井戸掘りブログのレイアウトです。
メインセクションの一部（誘導用ヘッダー、注目の投稿、人気の投稿）を非表示にしたい。更にサイドバー（sidebar-right-1）全体を非表示にしたい。
先ずはメインセクションを分解してみます。

メインセクションの一部、
サイドバー1全体を非表示にしたい 

メインセクションを id='main-ex-0' 、id='main-ex-1' 、id='main-ex-2'のセクションに 分割します。id='main-ex-0'とid='main-ex-1'には条件式を付与して、モバイルバージョンで言語が日本語以外のときは表示しないようにします。

3行目が元のmainセクションです。ソース折り畳みを表現していますが、見た目だけなのでご注意。

      <b:section class='main' cond='!data:blog.isMobileRequest or data:blog.locale == &quot;ja&quot;' id='main-ex-0' name='main-ex-0' showaddelement='no'>
      </b:section>
      <b:section class='main' id='main' name='Main' showaddelement='no'>…</b:section>
      <b:section class='main' cond='!data:blog.isMobileRequest or data:blog.locale == &quot;ja&quot;' id='main-ex-1' name='main-ex-1'
      </b:section>
      <b:section class='main' id='main-ex-2' name='main-ex-2' showaddelement='no'>
      </b:section>

レイアウト画面で表示制御したいガジェットを分割した各セクションに割り振ります。

メインセクションを分解できました

管理ツールで言語を切り替えて動作確認です。言語が日本語だと新たに追加した人気の投稿ガジェットが表示されます。言語を切り替えると人気の投稿ガジェットが消えました。成功です。

ガジェットのソースを一つずつカストマイズしてリンクチェック用に表示／非表示制御を組み込みましたが、セクション単位なら簡単に制御できました。これだよ、最初からやりたかったのは！！

モバイルバージョンに
人気の投稿を追加しました

言語を切り替えると
人気の投稿が消えました

次はサイドバー（id='sidebar-right-1'）全体を非表示にします。このため代替のサイドバー（id='sidebar-ex-1'）を組み込みます。
組み込む場所が判らず、先ずは<b:section-contents id='sidebar-right-1'>～</b:section-contents>付近を指定しましたが、フッターの下に組み込まれてしまいました。<b:section-contents>Bloggerタグはどうやらセクションの中身を定義しているらしい。実体は別の所にあるようです。デベロッパーツールで画面レイアウトとソースコードの照合を行い、どうやらmainセクションに続くマクロによる定義群らしいと当たりを付けました。ここにサイドバーの構造を記述していると思われる個所があります。代替サイドバーを組み込んでみましょう。代替サイドバーにも条件式を付与して、モバイルバージョンで言語が日本語以外のときは表示しないようにします。

5行目が代替サイドバーのセクションです。divタグでwidthを指定しないとモバイルバージョンで横幅を確保できません。サイズはレイアウト画面を見ながら調整しました。

        <div class='column-right-outer'>
        <div class='column-right-inner'>
          <aside>
          <div style='width: 310px;'>
            <b:section class='sidebar' cond='!data:blog.isMobileRequest or data:blog.locale == &quot;ja&quot;' id='sidebar-ex-1' name='sidebar-ex-1' showaddelement='no'/>
          </div>
          <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>

レイアウト画面で確認すると成功です。代替サイドバーが組み込まれました。
右サイドバーから代替サイドバーにガジェットを移し替えます。右サイドバーは空になっています。

サイドバーに新たなセクションを追加しました

管理ツールで言語を切り替えて動作確認です。ですが、各ガジェットに表示／非表示制御を組み込んでいるのでこのままだとサイドバーの制御のテストになりません。そこでサイドバーに暫定で連絡フォームのガジェットを組み込みます。

言語が日本語だと各ガジェットと暫定の連絡フォームが表示されます。言語を切り替えると各ガジェットと暫定の連絡フォームが消えました。成功です。

暫定で組み込んだ連絡フォームが
表示されました 

重要以外の全てのガジェットが
消えました

これで、サイドバーの表示／非表示を自由に制御できるようになりました。
じゃあトップページをホームページに組み込むカストマイズを入れようとしましたが、ちょっと待て！！

それってUX的に正しいの？

ホームページを組み込むと、井戸掘りブログを従来から読んでる人にとっては、最新の記事に到達するのにワンクリック手間が増えます。しかも未読の記事があるのか否かはクリックしないと判りません。
新規訪問者向けのホームページですが、新規訪問者もブログを読み続けるとなったらホームページは余計です。

うーん、ホームページっていらなくね？

ということで、調査含めて3日程掛けた記事ですがボツです。サイドバーの表示／非表示制御はリンクチェック用に組み込み直しましょう。

感想と構想

使わなくなったサイドバーのセクションをレイアウト画面で見ると鬱陶しい。
テーマから<b:section-contents>Bloggerタグを削除しましたが、XMLファイルを読み込むと復元されています。消せないですね。

各ガジェットに苦労して組み込んだ表示／非表示制御ですが、元に戻すことにします。ソースが汚れるのは防ぎたい。