今回やりたいこと
お知らせ情報で、タブによって記事が切り替わるお知らせの表示をしたいと思います。（CSSで整えてないので分かりにくいですが
）
今からやろうとしている実装は、一般的にタブパネルと呼ばれるそうです。
タブパネルの実装には、一般的には、以下の方法が用いられることが多いみたいですね
- HTML、CSSのみで実装
- HTML、CSS、JavaScriptで実装
それぞれのやり方を簡単に調べてみました。
上記のやり方での実装はしてませんが所感は以下の通りです。
HTML、CSSのみで実装する方法 所感
以下を参考にしました。
HTMLとCSSのみの場合、input要素、label要素の理解が必須になりそうなので、お問い合わせフォームなどを作れるくらいの知識がある場合、挑戦してみてもいいかもしれないなと思いました。
しかし、ラジオボタンとタブパネルを同階層に配置する必要があり、HTMLの構造が不自然になることや、選択されているタブ以外のコンテンツはdisplay: noneで非表示にする影響で、検索エンジンがコンテンツの構造を理解しにくくなるなどのデメリットがありそうです。
HTML、CSS、JavaScriptで実装する方法 所感
以下を参考にしました。
切り替わりの動作のみ、JavaScriptで制御するみたいです。
JavaScriptの基本的な知識が必要と思います。JavaScriptを用いたときでは、HTMLの構造が不自然になるデメリットは、解消されます。しかし、選択されているタブ以外のコンテンツはdisplay: noneで非表示にする影響で、検索エンジンがコンテンツの構造を理解しにくくなるなどのデメリットは変わらなさそうです。
どちらがいいかと言われれば
結論として、上記のどちらを採用したいかと言われれば、JavaScriptが無難かなと判断しました。参考サイトでも、JavaScriptで実装する方法を推奨していました。
しかし、今回はa-blog cmsのモジュール機能を使った方法で実装しようと思います。
a-blog cmsのモジュール機能で実装する方法 所感
実際、仕事上でタブパネルを実装する場面があり、復習の意味でも記録しておこうと思います。
モジュールを使っていて便利なのは、上記で述べたデメリットが解消されること、かな？と思います。
JavaScriptも触らなくていいし、コンテンツの構造も気にしなくていい（多分）ので安心してコーディングできます。そして、広汎的なので、表示させたいカテゴリーを変えたいな〜と思ったら、引数の指定で変更が効くのも良いところかと思います。
そして実際にやることは、スニペットを貼り付けて、引数を指定するという作業で完結するので、作業の意味を完全に理解するのは難しいけど、作業として覚えてしまえば簡単だなと感じました
。
難しかったなと思ったこと
「引数」と「階層」の指定の理解が難しかったです。
いまだに引数は謎が多いです。
ではやってみよう!
具体的に何をするかを述べます。
a-blog cmsのビルトインモジュールの、以下2つを用いて、実装します。
カテゴリーリスト
エントリーサマリー
を用いて、各カテゴリーで出力させるエントリーを変更できるようにする。
まず準備
カテゴリーの用意
子カテゴリーの用意
カテゴリーに合わせたエントリーの用意。
各カテゴリーで2記事ずつを用意する。
手順
テンプレートを用意
newsのディレクトリを作成する。utsuwaテーマのデフォルトのindex.htmlをこの中に複製。
index.htmlで、必要なところだけ残す。
index.htmlの中身。デフォルトを追加変更したのが、赤い枠の箇所です。
そして、タブパネル用のカテゴリーリストのスニペットが書かれたファイルを用意して読み込ませ、記事一覧のエントリーサマリーは、いったんデフォルトのものを使い、モジュールIDは指定します。（cssで装飾する場合が多いと思うので、ファイルは別に用意することの方がいいと思いますが、今回は省略します。）
カテゴリーを切り替える用のモジュールを作成
カテゴリーリストを出力。引数と階層は、以下のように設定します。
そうすると、以下のようなカテゴリーリストが出ます。
Entry_Summaryを使って、カテゴリーに沿ったエントリーを出力させる
そして、記事を出力するモジュールIDを設定します。
引数と階層は以下のように設定します。
そうすることで、カテゴリーごとに、該当のカテゴリーに属したエントリーを出力させることが出来ます。
こんな感じで遷移します。
あとは、見た目を整えれば、即席タブパネルの完成です
まとめ
引数への苦手意識がけっこうあるな〜と思いました。
でも、モジュールはすごく便利！
使ったことが無いモジュールにも手を出してみたいです。
一般的なタブパネルの作り方も、参考リンクを読んでいて勉強になりました。role="tab"とかrole="tablist"が理解不足なので、またの機会に勉強します。