イントロダクション
記事「Blogger:ラベルを構造的に表示する！ラベルを構造化すると新たな発見があるかも？」では、クラウド形式のラベルウィジットを JavaScript で動的に構造化する方法について説明しました。今回は、そのコードを改良し、あるラベルの配下のラベル一覧の開く・閉じる機能を実装してみました。
なお、本コードはクラウド形式でラベルを表示している Blogger のブログに対して有効です。リスト形式でラベルを表示しているものに対しては使えません。
コード
スタイルシート
以下のスタイルシートを Blogger のテンプレートのカスタマイズより、上級者向け→CSSを追加より、追加します。/* 構造化ラベル用の css */
.label-structure-item-level0
{
font-size:24px;
padding-left:0em;
border-left-color:#d0d0ff;
border-left-style:dotted;
border-left-width:1px;
}
.label-structure-item-level1
{
font-size:24px;
padding-left:1em;
border-left-color:#d8d8ff;
border-left-style:dotted;
border-left-width:1px;
}
.label-structure-item-level2
{
font-size:18px;
padding-left:1em;
border-left-color:#e0e0ff;
border-left-style:dotted;
border-left-width:1px;
}
.label-structure-item-level3
{
font-size:12px;
padding-left:1em;
border-left-color:#e8e8ff;
border-left-style:dotted;
border-left-width:1px;
}
.label-structure-item-level4
{
font-size:12px;
padding-left:1em;
border-left-color:#f0f0ff;
border-left-style:dotted;
border-left-width:1px;
}
/* open close ナビゲータの設置領域 */
.label-structure-item-open-close-frame
{
display:inline-block;
margin:auto 2px auto 0px;
padding:0px;
width:16px;
}
/* open close ナビゲータの実体 */
.label-structure-item-open-close
{
display:table-cell;
vertical-align:middle;
text-align:center;
width:12px;
height:12px;
font-size:10px;
line-height:10px;
border-style:solid;
border-width:1px;
border-color:#999999;
cursor:pointer;
padding:0px;
margin:0px;
}
.label-structure-item-open-close:hover
{
background-color:#ffff00;
}
このスタイルシートはラベルの構造の階層ごとに定義しています。
例えば、label-structure-item-level0 であればトップレベルの階層を示しており、label-structure-item-level1はその下の階層を示しています。
現在この階層は 5 階層目 ( label-structure-item-level5 )まで定義していますが、次の JavaScript コードで定義する構造によっては、label-structure-item-level6 以降を更に追加する必要があります。
今回追加したのは、label-structure-item-open-close-frame と label-structure-item-open-close です。
label-structure-item-open-close-frame は開く・閉じるナビゲーションの領域を定義しています。開く・閉じるナビゲーションがある項目とない項目の左端をそろえる役割も担っています。
label-structure-item-open-close は開く・閉じるナビゲーションの実体を定義しています。
JavaScript コード
以下のコードを Blogger のテンプレートの HTML の編集より、</body> タグの上に設置します。なお、
// ラベルの構造化データ
var labelStructure = new treeNode("All Labels", [
...
]);
の部分は、各 Blogger のブログのラベルの構造化データを作成してあげる必要があります。
labelStructure はツリー構造になっており、ツリー構造を構成する要素である treeNode は 値と子ノードの配列を持ちます。
値の部分にラベル名を指定します。
値のラベル名がブログ内に存在するラベル名だった場合には、そのラベルの一覧ページ(/search/label/ラベル名)へのリンクを設定します。
値のラベル名が存在しなかった場合、値のラベル名をテキストとして出力します。
値のラベル名は基本的にツリー構造内で重複できません。
子ノードの配列では treeNode の配列を持ちます。
子ノードが無い場合には、new treeNode(" ... ") というように、第２引数を省略します。
このラベルの構造化データで定義されていないラベル名については、未分類として最後に出力されます。
この treeNode については記事「JavaScript:ツリー構造を作成するための構造：とてもシンプル」にて詳しく説明しています。
以上のようにして、ラベルの構造を作成しておきます。
このラベルの構造データは作るのが多少面倒かつ、作成に失敗する可能性があるので、ラベルウィジットの HTML と下記 JavaScript をローカルパソコンに作成した HTML ファイル内に張り付けてテストを行ってから、Blogger の HTML に張り付けた方が良いでしょう。
なお、structureLabel("Label1", labelStructure); として、第１引数に処理対象のラベルウィジットの id を与えています。ブログの環境によっては id が異なる場合もあるので、異なっていたらその id に変更してください。
<!-- 構造化ラベル作成 START -->
<script type='text/javascript'>
//<![CDATA[
<!--
// ラベルウィジットを構造化する
// Ver:1.0.1
(function () {
// --- Util ---
/*
タグ名から子要素のみを選択して取得する
*/
function getChildElementsByTagName(obj, tagName) {
var items = new Array();
for (var i = 0; i < obj.childNodes.length; i++) {
if (obj.childNodes[i].tagName !== void 0) // undefined でなければ処理
{
if (obj.childNodes[i].tagName.toLowerCase() == tagName.toLowerCase()) {
items.push(obj.childNodes[i]);
}
}
}
return items;
}
/*
イベントを追加
参考：http://d.hatena.ne.jp/dayflower/20080516/1210917670
*/
function append_event(e, type, handler) {
if (e.addEventListener) {
e.addEventListener(type, handler, false);
} else {
e.attachEvent('on' + type, handler);
}
}
// --- Lib ---
// ラベルのラベル名とカウントのペアー
function CLabelItem(name, count) {
this.name = name;
this.count = count;
}
/*
ラベルウィジェットから、ラベル名とカウントのペアーを取得する
id_label_widget : ラベルウィジェットの id
*/
function getLabelItems(id_label_widget) {
var items = new Array();
var obj_label_widget = document.getElementById(id_label_widget);
// label ウィジェット内の、ラベル名と投稿数のペアーが収められている<span>要素の上位要素を取得
var obj_label_widget_labels_tops = getChildElementsByTagName(obj_label_widget, "div");
if (obj_label_widget_labels_tops.length == 1) {
// ラベル名と投稿数のペアーが収められている<span>要素取得
var obj_label_widget_labels_spans = getChildElementsByTagName(obj_label_widget_labels_tops[0], "span");
for (var i = 0; i < obj_label_widget_labels_spans.length; i++) {
if (obj_label_widget_labels_spans[i].className.match(/^label-size label-size/)) {
var labelName; // ラベル名
var count; // カウント
// ラベル名の a タグが入っていることを確認
// カウント数の span タグがなかったら、count は空白とする
var obj_a_Tags = getChildElementsByTagName(obj_label_widget_labels_spans[i], "a");
if (obj_a_Tags.length != 1) {
continue;
}
labelName = obj_a_Tags[0].innerHTML;
labelName = labelName.replace(/^\s*([^\s].*)$/gm, "$1"); // 前方の空白を削除
labelName = labelName.replace(/^(.*[^\s])\s*$/gm, "$1"); // 後方の空白を削除
var obj_span_Tags = getChildElementsByTagName(obj_label_widget_labels_spans[i], "span");
if (obj_span_Tags.length != 1) {
count = "";
} else {
count = obj_span_Tags[0].innerHTML.replace(/[()]|\s/g, "");
}
items.push(new CLabelItem(labelName, count));
}
}
}
// ラベル名からカウント数を取得するメソッドを追加
items.getCount = function (name) {
for (var i = 0; i < items.length; i++) {
if (items[i].name == name) {
return items[i].count;
}
}
return "";
};
return items;
}
// --- Main ---
// ツリー構造用データ
function treeNode(value, childNodes) {
this.value = value;
this.childNodes = childNodes;
}
// ラベルの構造化データ
var labelStructure = new treeNode("All Labels", [
new treeNode("Windows", [
new treeNode("Chrome"),
new treeNode("compact"),
new treeNode("Debugging Tools for Windows"),
new treeNode("Excel"),
new treeNode("Firefox"),
new treeNode("Flash"),
new treeNode("fsuitl"),
new treeNode("HDD"),
new treeNode("HydraVision"),
new treeNode("IE", [
new treeNode("IE9")
]),
new treeNode("IIS"),
new treeNode("IME"),
new treeNode("Microsoft Excel 2010"),
new treeNode("PowerPoint", [
new treeNode("Microsoft PowerPoint 2010")
]),
new treeNode("Word", [
new treeNode("Microsoft Word 2010")
]),
new treeNode("Photoshop", [
new treeNode("Adobe Photoshop Elements 2.0")
]),
new treeNode("Screen Capture (by Google)"),
new treeNode("Skype"),
new treeNode("Visual Studio", [
new treeNode("Visual Studio 2010")
]),
new treeNode("Windows Live Messenger"),
new treeNode("Windows Live Writer"),
new treeNode("Windows Live ムービーメーカー"),
new treeNode("Windows Vista"),
new treeNode("Windows8"),
new treeNode("Windows8.1"),
new treeNode("Yahoo!スマホマネージャー"),
new treeNode("インストール失敗"),
new treeNode("クリップボード"),
new treeNode("コピー"),
new treeNode("コマンドプロンプト"),
new treeNode("コンボボックス"),
new treeNode("シンボリックリンク"),
new treeNode("スクリーンキャプチャ"),
new treeNode("スタートメニュー"),
new treeNode("テキストエディタ"),
new treeNode("デスクトップ仮想化"),
new treeNode("ドライバ"),
new treeNode("ハングアップ"),
new treeNode("バッチファイル"),
new treeNode("ブルースクリーン"),
new treeNode("プロセス"),
new treeNode("ホットキー"),
new treeNode("リモートデスクトップ"),
new treeNode("仮想デスクトップ"),
new treeNode("壁紙"),
new treeNode("起動時間"),
new treeNode("電卓")
]),
new treeNode("Blogger", [
new treeNode("アーカイブ"),
new treeNode("パーマリンク"),
new treeNode("ラベル"),
new treeNode("人気の投稿"),
new treeNode("投稿"),
new treeNode("投稿数カウンタ"),
new treeNode("新着情報"),
new treeNode("目次"),
new treeNode("見出し")
]),
new treeNode("Programming", [
new treeNode("C#"),
new treeNode("CGI"),
new treeNode("HTML", [
new treeNode("canvas"),
new treeNode("noscript"),
new treeNode("pre"),
new treeNode("SVG"),
new treeNode("textarea"),
new treeNode("属性")
]),
new treeNode("CSS", [
new treeNode("text-align"),
new treeNode("スタイルシート")
]),
new treeNode("JavaScript", [
new treeNode("Closure Compiler"),
new treeNode("JavaScriptで陥る罠"),
new treeNode("イベント")
]),
new treeNode("Perl"),
new treeNode("Python"),
new treeNode("カンマ演算子"),
new treeNode("コンセプトコード"),
new treeNode("ソースコード"),
new treeNode("テスト"),
new treeNode("デザイン"),
new treeNode("デベロッパーツール"),
new treeNode("ドキュメント"),
new treeNode("ハッカソン"),
new treeNode("リリース"),
new treeNode("変数宣言"),
new treeNode("技術デモ"),
new treeNode("文字の配置"),
new treeNode("文字化け"),
new treeNode("文字認識"),
new treeNode("正規表現"),
new treeNode("遅延ロード"),
new treeNode("開発")
]),
new treeNode("Computer", [
new treeNode("Apple"),
new treeNode("BIOS"),
new treeNode("buffalo"),
new treeNode("Google"),
new treeNode("iOS"),
new treeNode("iPad", [
new treeNode("iPad Air")
]),
new treeNode("IT"),
new treeNode("LinkStation"),
new treeNode("Linux", [
new treeNode("Ubuntu")
]),
new treeNode("Mac book Pro"),
new treeNode("MDV-ASG8300B"),
new treeNode("MEDIAS N-04C"),
new treeNode("MEDIAS X N-04E"),
new treeNode("microSD"),
new treeNode("NVIDIA GeForce GTX 550 Ti"),
new treeNode("PIO病"),
new treeNode("QRコード"),
new treeNode("ScanSnap"),
new treeNode("SSD"),
new treeNode("USB", [
new treeNode("USBマウス"),
new treeNode("USB切替機")
]),
new treeNode("VAIO"),
new treeNode("Wooo L32-V09"),
new treeNode("おくだけ充電"),
new treeNode("エラー"),
new treeNode("グラフ"),
new treeNode("コンピュータ化"),
new treeNode("スマートフォン", [
new treeNode("テザリング"),
new treeNode("ドコモメール", [
new treeNode("ドコモメール（ブラウザ版）")
]),
new treeNode("電話"),
new treeNode("電話帳")
]),
new treeNode("ディスプレイ", [
new treeNode("ディスプレイドライバー")
]),
new treeNode("ノートパソコン"),
new treeNode("バグ"),
new treeNode("バグフィックス"),
new treeNode("バックアップ"),
new treeNode("バッテリー"),
new treeNode("パソコン周辺機器"),
new treeNode("ヘッドホン"),
new treeNode("ポータブルHDD"),
new treeNode("マウスコンピュータ"),
new treeNode("マルチディスプレイ"),
new treeNode("マルチブラウザ"),
new treeNode("メモリ不足"),
new treeNode("メール"),
new treeNode("モバイル"),
new treeNode("レポート"),
new treeNode("不具合"),
new treeNode("作業自動化"),
new treeNode("動画編集"),
new treeNode("断線"),
new treeNode("日本語入力"),
new treeNode("機械化"),
new treeNode("自炊"),
new treeNode("表"),
new treeNode("負荷"),
new treeNode("障害対策"),
new treeNode("音飛び"),
new treeNode("騒音")
]),
new treeNode("セキュリティ", [
new treeNode("ウィルス対策", [
new treeNode("ウィルスバスター")
]),
new treeNode("パスワード"),
new treeNode("フィッシング"),
new treeNode("脆弱性")
]),
new treeNode("ネットワーク", [
new treeNode("Amazon"),
new treeNode("Blog"),
new treeNode("DLNA"),
new treeNode("DNS"),
new treeNode("Feed"),
new treeNode("ftp"),
new treeNode("Google Chart"),
new treeNode("Google Map"),
new treeNode("GTmetrix"),
new treeNode("LAN"),
new treeNode("Linkwithin"),
new treeNode("Marvell"),
new treeNode("NAVERまとめ"),
new treeNode("ping"),
new treeNode("RSS"),
new treeNode("slideshare"),
new treeNode("SyntaxHighlighter"),
new treeNode("Wake On Lan"),
new treeNode("Web"),
new treeNode("Webサーバ"),
new treeNode("Webサービス", [
new treeNode("参照用リンク作成")
]),
new treeNode("Web制作"),
new treeNode("WiMAX"),
new treeNode("YouTube"),
new treeNode("zenback"),
new treeNode("えきねっと"),
new treeNode("インデクサ"),
new treeNode("クロール"),
new treeNode("ツイッター"),
new treeNode("ニコニコ動画"),
new treeNode("ネットワークアダプタ"),
new treeNode("ビデオ通話"),
new treeNode("ブラウザ"),
new treeNode("ブログ", [
new treeNode("ブログパーツ"),
new treeNode("ブログ制作")
]),
new treeNode("検索"),
new treeNode("無料楽曲"),
new treeNode("無線LAN", [
new treeNode("親機")
]),
new treeNode("通信速度")
]),
new treeNode("Android", [
new treeNode("Nexus7")
]),
new treeNode("ゲーム", [
new treeNode("PS4"),
new treeNode("SimCity"),
new treeNode("ニンテンドー3DS")
]),
new treeNode("ニュース", [
new treeNode("時事")
]),
new treeNode("特集", [
new treeNode("「Blogger の各要素の周りに太い枠線を設置することで、パネルが並んでいるようなデザインにする」シリーズ"),
new treeNode("「Bloggerの記事に目次をJavaScriptで自動的に付与する」シリーズ"),
new treeNode("「ナビゲーションをでっかくして目立たせて使ってもらおう！」シリーズ")
]),
new treeNode("その他", [
new treeNode("ToDo"),
new treeNode("おもしろい"),
new treeNode("もっと読む"),
new treeNode("アニメーション"),
new treeNode("エイプリルフール"),
new treeNode("カスタマイズ"),
new treeNode("シンプル化"),
new treeNode("トラブル"),
new treeNode("ビジネス"),
new treeNode("作業"),
new treeNode("作業環境"),
new treeNode("失敗"),
new treeNode("契約"),
new treeNode("対策検討中"),
new treeNode("待ち合わせ"),
new treeNode("復旧"),
new treeNode("思いつき"),
new treeNode("思想"),
new treeNode("思考の罠"),
new treeNode("提案"),
new treeNode("改善案"),
new treeNode("救い"),
new treeNode("数学"),
new treeNode("文章"),
new treeNode("明るさ"),
new treeNode("本"),
new treeNode("発表資料"),
new treeNode("罠"),
new treeNode("翻訳"),
new treeNode("通知")
])
]);
/*
ラベルを構造化した エレメント を取得する
labelItems : ラベル名とカウントのペアーの配列 : 使用した要素は削除されます
labelStructure : ラベルの構造
nest : 現在の構造のネスト
*/
function getStructuredLabelElementCore(labelItems, labelStructure, nest) {
var element = document.createElement("div");
element.className = "label-structure-item label-structure-item-level" + nest;
// Open/Close のナビゲータ 生成
var element_open_close = document.createElement("span");
element_open_close.className = "label-structure-item-open-close-frame";
// 子要素があれば 子要素を生成し、Open/Close のナビゲータを付ける
var element_child;
if (labelStructure.childNodes) {
// 子要素を生成
element_child = document.createElement("div");
element_child.className = "label-structure-item-child";
for (var i = 0; i < labelStructure.childNodes.length; i++) {
element_child.appendChild(getStructuredLabelElementCore(labelItems, labelStructure.childNodes[i], nest + 1));
}
// Open/Close のナビゲータ生成
var element_open_close_inner = document.createElement("span");
element_open_close_inner.className = "label-structure-item-open-close";
element_open_close_inner.innerHTML = "-";
element_open_close.appendChild(element_open_close_inner);
// クリック時のイベントの追加
append_event(element_open_close_inner, "click",
function () { labelStructure_changeDisplay(element_open_close_inner, element_child) });
function labelStructure_changeDisplay(obj_open_close, obj_child) {
if (obj_open_close.innerHTML == "-") {
// 非表示
obj_open_close.innerHTML = "+";
obj_child.style.display = "none";
} else {
// 表示
obj_open_close.innerHTML = "-";
obj_child.style.display = "block";
}
}
}
element.appendChild(element_open_close);
// ラベル構造に一致するラベル一覧が存在したら、ラベルへのリンク付きで項目名を出力する
for (var i = 0; i < labelItems.length; i++) {
if (labelStructure.value == labelItems[i].name) {
var labelLink = location.protocol + "//" + location.host + "/search/label/" + encodeURIComponent(labelItems[i].name);
var element_labelLink = document.createElement("a");
element_labelLink.href = labelLink;
element_labelLink.innerHTML = labelItems[i].name;
if (labelItems[i].count != "") {
element_labelLink.innerHTML += "<span> ( " + labelItems[i].count + " ) </span>";
}
element.appendChild(element_labelLink);
break;
}
}
if (i == labelItems.length) {
var textNode = document.createTextNode(labelStructure.value);
element.appendChild(textNode);
} else {
// 使用した要素を削除
labelItems.splice(i, 1);
}
// 子構造があれば、子構造をエレメントに追加
if (element_child) {
element.appendChild(element_child);
}
return element;
}
/*
ラベルを構造化した エレメント を取得する
labelItems : ラベル名とカウントのペアーの配列 : 使用した要素は削除されます
labelStructure : ラベルの構造
*/
function getStructuredLabelElement(labelItems, labelStructure) {
var element = getStructuredLabelElementCore(labelItems, labelStructure, 0);
// 未分類のデータを出力
if (labelItems.length > 0) {
var labelStrcutureOtherChild = [];
for (var i = 0; i < labelItems.length; i++) {
labelStrcutureOtherChild.push(new treeNode(labelItems[i].name));
}
var labelStrcutureOther = new treeNode("未分類", labelStrcutureOtherChild);
// 全てが未分類の場合、子要素を追加する
if (element.getElementsByTagName("div").length <= 0) {
// 子要素を生成
var element_child = document.createElement("div");
element_child.className = "label-structure-item-child";
element.appendChild(element_child);
}
element.lastChild.appendChild(getStructuredLabelElementCore(labelItems, labelStrcutureOther, 1));
}
return element;
}
/*
ラベルを構造化する
id_label_widget : ラベルウィジェットの id
labelStructure : ラベルの構造
*/
function structureLabel(id_label_widget, labelStructure) {
var label_childElementsCache = []; // ラベルの 子エレメント のキャッシュ
// ラベル名とカウント数のペアの配列データ
var labelItems = getLabelItems(id_label_widget);
var obj_label_widget = document.getElementById(id_label_widget);
// label ウィジェット内の、ラベル名と投稿数のペアーが収められている<span>要素の上位要素を取得
var obj_label_widget_labels_tops = getChildElementsByTagName(obj_label_widget, "div");
if (obj_label_widget_labels_tops.length == 1) {
// ラベルを構造化した 子エレメント を取得
var element = getStructuredLabelElement(labelItems, labelStructure);
// 子エレメントをキャッシュする
label_childElementsCache["default"] = [];
for (var i = 0; i < obj_label_widget.childNodes.length; i++) {
label_childElementsCache["default"].push(obj_label_widget.childNodes[i]);
}
label_childElementsCache["structure"] = [element];
// ラベルの 子エレメント の変更
changeLabelChildElements("structure");
}
/*
ラベルの 子エレメント の変更
*/
function changeLabelChildElements(mode) {
/*
子エレメントを削除
IE9でテストした時に、子エレメントを削除 を削除せずに obj_label_widget.innerHTML を書き換えると、
label_childElementsCache に保存したノードが消滅してしまうため、removeChild にて削除する
*/
for (; ; ) {
if (obj_label_widget.childNodes.length <= 0) {
break;
}
obj_label_widget.removeChild(obj_label_widget.childNodes[0]);
}
if (mode == "default") {
obj_label_widget.innerHTML = "<div><a href=\"javascript:void(0);\" id=\"label-change-mode\">構造化ラベル</a> クラウドラベル</div>";
// クリック時のイベントの追加
append_event(document.getElementById("label-change-mode"), "click", function () { changeLabelChildElements("structure") });
} else {
obj_label_widget.innerHTML = "<div>構造化ラベル <a href=\"javascript:void(0);\" id=\"label-change-mode\">クラウドラベル</a></div>";
// クリック時のイベントの追加
append_event(document.getElementById("label-change-mode"), "click", function () { changeLabelChildElements("default") });
}
// 子エレメントの追加
for (var i = 0; i < label_childElementsCache[mode].length; i++) {
obj_label_widget.appendChild(label_childElementsCache[mode][i]);
}
}
}
structureLabel("Label1", labelStructure);
})();
//-->
//]]>
</script>
<!-- 構造化ラベル作成 END -->
結果
以下のように、ラベル配下のラベル一覧の開く・閉じる機能を付与した、構造化したラベルウィジットを作成することが出来ました。 |
| ラベルの隣の - を押すと |
↓
 |
| ラベルの配下のラベル一覧が閉じます |
このようにラベル配下のラベル一覧の開く・閉じる機能を付与したことで、ブログ訪問者が目的のラベルを見つけやすくなるかもしれません。
コメントを投稿
コメント投稿機能について