年末は何かと忙しいですね、さすが師走です。さて、前回からだいぶ間が空きましたが、今回はウィジェット名コマンドというものを実装していこうと思います。
（前回：『javascript 改修作業 ～Blogger テンプレートを作るよ！ (36)～』）
ウィジェット名コマンドとは！
以前、メニューのウィジェット名に @ を付けると階層構造の子リストにするという特殊な機能を実装しました。（『メニューを階層構造にする ～Blogger テンプレートを作るよ！ (20)～』）今回の機能はその延長線で、今までの機能と新実装の機能を合わせてウィジェット名コマンドと呼ぶことにします。まず、今までの機能についておさらいします。
階層化コマンド（『@』）
端的に言えば、ウィジェット名に『@親項目名』とすることで目的の項目を探し出し、そこにウィジェットを差し込むという機能です。概念的な説明ではわかりにくいと思うので、具体的な例を用いて説明します。以下のようなページ構造のブログがあると想像してください。
| ページ構成 |
|---|
|
全てのページをメニューに一列に並べては読みにくいので、「グランドメニュー」と「お得なランチセット」、「ディナーコース」はできれば「お品書き」として一つにまとめたいと思うこともあります。
しかし、Blogger の基本ガジェットであるページリストは項目の深さを変えることができません。深さが違うものをメニューに並べたければ、２つ以上のガジェットに分けて工夫しなくてはいけません。例えば、以下のようにします。
| メニュー |
|---|
|
| お品書き細目 |
|---|
|
そこで、ここからがまどうぐ工房で考えた階層化コマンドのお話です。この『お品書き細目』のウィジェット名を『@お品書き』 という名前に変更してみると……
| メニュー |
|---|
|
一つにまとまりました！
これぞ、ウィジェット名に『@親項目名』とすることで目的の項目を探し出し、そこにリストを差し込むという機能……階層化コマンドです！
データコマンド（『#』）
さて、今までは階層化コマンドだけでしたが、使い勝手が良いと思ったので少し機能を拡張しておくことにしました。それがデータコマンドです。HTML の要素には、 『data-〇〇』 属性という形で独自の属性を追加しても良いということになっています。
そこで、『#データ名』という名前のウィジェットがあれば『data-データ名』という属性を追加し、『#データ名=値』というウィジェット名があれば『data-データ名=値』という属性を追加し、ウィジェット名からコマンドを削除します。
具体例を挙げましょう。画像ウィジェットに title=mini というデータを追加してみましょう。
| 設定するウィジェット名 | トップ画像#title=mini |
|---|---|
| 標準のウィジェットタグ | <div class="widget Image"> |
↓ブラウザで表示すると↓
| ウィジェット名 | トップ画像 |
|---|---|
| ウィジェットタグ | <div class="widget Image" data-title="mini"> |
ウィジェット名からコマンドがなくなり、ウィジェットタグに data-title 属性が追加されましたね。これがデータコマンドの機能です。
例えば CSS の属性セレクタを使って『.widget[data-title="mini"] h2 { text-size: 50%; }』 と予め設定してあったとしたら、このウィジェットのウィジェット名は文字が小さく表示されます。
これにより特定のウィジェットにだけ css を適用する場合の手順を減らすことができます。同様に、そのデータタグがある場合にだけ Javascript でウィジェットを加工するというオプション機能も制作することができるようになります。
まさにブログタイトル通り『まどうぐ（魔法の道具）』のような機能！ イエイ！
コマンド抽出の処理のみ標準実装
ウィジェット名からコマンドを抽出する処理だけは最低限の機能として実装します。理由：コマンドが表示されると困んど！
フルサポート版から標準版にテンプレートを変更した時、コマンドの抽出がサポート機能の場合は今まで使っていたコマンドの抽出が行われません。そうすると、ウィジェット名にコマンドが付いたままブログが表示されてしまい、コマンドの削除が完了するまで閲覧者は困惑します。念のため、テンプレートの一部を変更することで機能を無効化できるようにしておきます。
特殊コマンドはサポート版かオプション実装
「特定の data-〇〇 属性がついた要素に対して何らかの操作を行う」という機能は標準版テンプレートには含めません。カスタマイズが得意な人にとってはカスタマイズの邪魔になる可能性があるためです。ですので、基本的にはフルサポート版テンプレートか、オプション機能として実装します。以上！
0 件のコメント :
コメントを投稿