【Blogger】ラベルを階層化する

階層構造に、改装！w　こんにちは、あすらとです。

Bloggerでは記事に対してラベルを付与できますが、このラベルの機能はあまりリッチではありません。そこで、当BlogではBloggerのブログアーカイブのHTML構造を参考にし、比較的自然なラベルの階層化機能を自前実装しました。本日はこのラベル階層化の手順について解説します。

先に完成後のスクリーンショットを以下に載せます（まあPCなら横に表示されているとは思いますが念の為）。

ご自身のブログに同様の機能を実装したいと感じた方は是非最後までご覧ください。

---

まずBloggerはラベルの階層化機能を提供しておりませんので、HTMLを自分で編集する必要があります。「テーマ」→「カスタマイズの横の下三角」→「HTMLを編集」とクリックしHTMLの編集画面を開きます。

続いて、編集画面で「id='Label1'」で検索し、ラベルの機能を探します。（検索にない場合は元の画面に戻り、「レイアウト」からラベルガジェットを追加してください。）おそらく以下のように表示されていると思います。

最後に<b:widget...から次の</b:widget>まで以下のコードに差し替えて終了です。

  <b:widget id='Label1' locked='false' title='カテゴリ別' type='Label' version='1'>
    <b:widget-settings>
      <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
      <b:widget-setting name='display'>LIST</b:widget-setting>
      <b:widget-setting name='selectedLabelsList'/>
      <b:widget-setting name='showType'>ALL</b:widget-setting>
      <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <ul class='hierarchy' id='rootNode'>
      <b:loop values='data:labels' var='label'>
        <li class='labelNode archivedate collapsed' expr:name='data:label.name'>
          <b:include name='myToggle'/>
          <a class='post-count-link' expr:href='data:label.url'>
            <data:label.name/>
          </a>
          <span class='post-count' dir='ltr'>(<data:label.count/>)</span>
          <ul class='hierarchy' style='padding: 10px 0 0 10px'/>
        </li>
      </b:loop>
    </ul>
    <ul class='hierarchy' id='templateElement' style='display:none;'>
      <li class='labelNode archivedate collapsed'>
        <b:include name='myToggle'/>
        <a class='post-count-link' href='javascript:void(0)'>LABEL_NAME</a>
        <ul class='hierarchy'/>
      </li>
    </ul>
    <b:include name='quickedit'/>
  </div>
  <style type='text/css'>
li.collapsed &gt; ul.hierarchy {
  display: none;
}
  </style>
  <script type='text/javascript'>
// 深さ優先探索でHTMLタグを形成する関数
function dfs(ul, obj) {
  for (const label of Object.keys(obj)) {
    let {node, children} = obj[label]
 
    if (!node) {
      const template = document.querySelector(&#39;#templateElement&#39;).innerHTML.replace(&#39;LABEL_NAME&#39;, label)
      node = new DOMParser().parseFromString(template, &#39;text/xml&#39;)
    }
    node.firstElementChild.addEventListener(&#39;click&#39;, () =&gt; onToggled(node.firstElementChild))
    console.log(ul)
    console.log(node)
    ul.appendChild(node)
 
    if (Object.keys(children).length &gt; 0) {
      dfs(node.lastElementChild, children)
      continue
    }
 
    node.removeChild(node.lastElementChild)
    node.removeChild(node.firstElementChild)
  }
}
// トグルがクリックされた時の関数
function onToggled(element) {
  element.parentElement.classList.toggle(&#39;collapsed&#39;)
  element.parentElement.classList.toggle(&#39;expanded&#39;)
  element.firstElementChild.classList.toggle(&#39;toggle-open&#39;)
  if (element.parentElement.classList.contains(&#39;expanded&#39;)) {
    element.firstElementChild.innerHTML = &#39;&#9660;&#160;&#39;
  } else { // 縮小する
    element.firstElementChild.innerHTML = &#39;&#9658;&#160;&#39;
  }
}
function main() {
  const treeObj = {} // 木構造を有するデータ
  document.querySelectorAll(&#39;li.labelNode[name]&#39;).forEach(node =&gt; {
    node.parentElement.removeChild(node) // 一旦DOMから消えてもらう
 
    // ラベルの名前をツリー状になるように登録する
    let obj = treeObj
    node.getAttribute(&#39;name&#39;).split(&#39;_&#39;).forEach((label, i, a) =&gt; {
      if (label in obj === false) {
        obj[label] = {&#39;children&#39;: {}, &#39;node&#39;: null}
      }
      if (i === a.length - 1) {
        obj[label][&#39;node&#39;] = node
      } else {
        obj = obj[label][&#39;children&#39;]
      }
    })
  })
  dfs(document.querySelector(&#39;#rootNode&#39;), treeObj)
}
main()
  </script>
</b:includable>
    <b:includable id='myToggle' var='interval'>
  <a class='myToggle' href='javascript:void(0)'>
    <span class='zippy'>
      &#9658;&#160;
    </span>
  </a>
</b:includable>
  </b:widget>

保存は忘れずに！お疲れ様でした！

レイアウトを変えました

今まで本文の幅が狭かったせいで画像を特大表示することができなかったんですが、

「それなら幅を広げればいいじゃない」

ということに今更気づいて変更しました。
なんでもっと早く気付けなかったんだろ...



おまけ

即　日　対　応

おまけが本編感

【Blogger入門】ここのレイアウトの作り方

3日ぶりの更新。もっとできると思ったんだけどなあ。

今日は私が教える立場にないのは重々承知していますが、Bloggerの使い方を教えていきたいと思います。
ここのブログを作る時にウェブ上の記事を見ながらレイアウトを作成していったのですが、みなさん基本的な使い方を満遍なく載せている人がほとんどでした。
逆にこの記事のように完成形を出しながらその部分だけ説明する方は見ませんでした(需要を考えればそれはそう)。
ですが「どこから手を出せばいいのかわからない」といった方にとってはこういう記事もあっていいのかなぁと思いまして、この記事を書かせていただきました。

とりあえず今日の時点でのここのレイアウトは以下のようになります。

こんな感じ。ざっくりと説明すると、右側に自己紹介やブログアーカイブなどを入れ、一番下には、また作者HPやカテゴリ別の記事を載せています。

1. テーマ

まず他サイト様を頼りにして頑張ってBloggerを開設しましょう(投げやり)。

googleアカウントを持って入ればすんなりと開設できたはずです。

自分の作りたいブログのタイトルやURLを入れてください。
テーマを選択してと言われたら適当なので構いません()

進むといかにもな編集画面が出てくるはず。

まず行って欲しいのはテーマの変更です。

「カスタマイズ」というオレンジ色の部分を押すと新しく編集画面が出てくるはずです。

そこで自分好みのテーマを選択します。私はAwesome Inc.の中から選びました。

テーマを選択したら背景や幅を調整したい方はその設定をしてください。(私はデフォルト)

2. レイアウト

次にBloggerに戻らずその画面のままレイアウトをいじりましょう。

ヘッダー(header)というのは「アスラトのブログ」と上の方に大きめに書かれている部分にあたります。

フッター(footer)は逆に下に書かれているところです。

自分にあったレイアウトを選びましょう。

後からガジェットというのを追加していくことで機能を充実させます。

終わったら「Bloggerに戻る」を押し、レイアウトに移りましょう。

右のサイドバーによくわからないのが並んでいると思います。

そのガジェットが不要だったり変更点があるなら「編集」を押し適切な処理を、追加は「ガジェットを追加」を押しましょう。

ここでアスラトヒント。

カテゴリ別の記事を出すとき　は　「ラベル」ガジェットを、

人気の投稿(アクセス数の多い投稿)　は　「人気の投稿」ガジェットを、

最新の投稿、または自分のおすすめしたい投稿　は　「注目の投稿」ガジェットを、

月別に記事を整理させるとき　は　「ブログアーカイブ」ガジェット

を入れることで解決します。

また、自己紹介の欄に自分の好きなことを書きたいのにうまくいかった私は、「テキスト」ガジェットを入れてリンクを強引に追加することで代替させています。

3. 設定

左欄の設定を押して基本というところをご覧ください。

説明という部分は私のブログでは「ゲームしたり、作ったり」の部分に該当します。

説明欄を埋めるブロガーさんも多いので入れといたほうが無難そう。

以上でだいたい私の状態と同じになったと思います。
どうすればいいのかわからなかった方でも、記事を書くことで新たにブロガーの仲間入りです。目安ぐらいにはなったかと思います。
これだけだと説明不足な部分があるので適宜他サイト様を参考にしてください。

これなら１時間もかけずにブログを開設できそうですね。時代の進歩ってすごい。

Wixが使いづらかった話

みなさんこんにちは。アスラトです。

このブログと自分のサイト(googlesiteで作った)を立ち上げてから１日が経ちました。
ここで準備を始めてからは2日です。
実はその前にWixでサイトを立ち上げようとしていたのですが、Wixがまーーーーーーーーー使いづらい。
そういう理由でgooglesiteでホームページを作ることになりました。
今日は私がWixを避けた理由をお話ししていこうと思います。
ざっくりいうと下になります。

1. Wix独特の作法がわからない
2. サイト独特の用語がわからない
3. 容量制限
4. 重い

1. Wix独特の作法がわからない

　Wixのホームページエディタを見てみると分かりますが、Wixはすごく選択肢が多いことが特徴です。

おそらくやりたいことはほぼ全て表現できるでしょうし、そこを否定するつもりは全くありません。

ただ選択肢が多いことで「どう作れば自分の表現したいものになるのか」「何を使えばいいか」という問題にぶち当たります。

自分の作りたいサイトがちょうどテンプレートに入っていれば良いのですが、そうでないなら苦労すると思います。(私も苦労した)(そして諦めた)

　Wixが直感的という人がいますが、必ずしも「分かりやすい」という意味で用いてはいません。

彼らのいう直感的とは「コードを使わない」というのとほぼ同義です。

htmlをゲシゲシ書いていくことに対して抵抗はない私にとっては、分かりやすさで言えばhtmlの方が勝る部分も出てくるわけです。

Wixは誰にとっても分かりやすく使いやすいという認識は正しくないと感じました。

　またWixに関する情報が少ないこともデメリットの１つです。

htmlの記事はどこのサイト制作者でも載せることはできますが、Wixの情報はWixで制作している人のみです。

自分の得たい情報が少ないということも覚悟しなければなりません。

2. サイト独特の用語がわからない

　Wixのサイト等を見てみると恐ろしい数のカタカナが並びます。

「ストリップってなんや！」「ライトボックスってどんなボックスなんや！」という感じに私はなりました。

他にも英語ができないせいで「ここでつまづくのか...」ってところでGoogle検索に頼ることに。

Wixは海外発であるため日本語に直しづらい部分も出てくるのは承知しています。

そうなんですが、googlesiteはカタカナは多くても理解しやすいんですよね。(私だけ？)

上にも書きましたが、この問題と情報の少なさが相乗して、結果作業量がかなり増えてしまいます。

3. 容量制限

　自分のサイトにゲームを載せようと思っているので埋め込むことがおそらく厳しくなってしまうんですよね。

googleドライブへのリンクを載せれば容量を使わずに済みますが、あんまり好きな方法ではないです。

ならなぜ最初にWixを選んだんですかね...

4.  重い

　説明不要！

Wixも悪くはありませんがWixである必要がないのもまた事実です。

Wixは無料なのでとりあえず試してみるのも手です。
強調したいのは私のスタイルには合わなかっただけでコードは書きたくないけどサイトを作りたいという人にはおすすめです。

ぜひ自分にあったサービスを見つけてください。