a-blog cms で見出しモジュールを作ってみる

記事中の見出しから目次を自動的に作成する「目次記法」を追加しました - はてなブログ開発ブログ で紹介されていた目次を自動で作る機能がいいなって事が a-blog cms のパートナーの Facebook グループで出てた事から、簡単にテンプレートのカスタマイズでできる範囲で作ってみようという事になった。



unit_id 21568
unit_sort 1
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 [記事中の見出しから目次を自動的に作成する「目次記法」を追加しました - はてなブログ開発ブログ](http://staff.hatenablog.com/entry/2015/09/09/152158) で紹介されていた目次を自動で作る機能がいいなって事が a-blog cms のパートナーの Facebook グループで出てた事から、簡単にテンプレートのカスタマイズでできる範囲で作ってみようという事になった。
unit_field_2 markdown
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21572
unit_sort 4
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 モジュールユニットとは
unit_field_2 h2
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21573
unit_sort 5
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 簡単にモジュールユニットについて説明しておきます。 モジュールユニットとは、通常テキストや画像などを入れるユニットに、Entry_List や Entry_Summary のようなモジュールを追加する事ができるようなユニットになります。追加する際にモジュールを作るのではなく、あらかじめモジュールIDとして準備されているものを選択するカタチになります。 標準で提供している site2015 にもありますので、よく分からない人は「[デモサイト](http://demo.a-blogcms.jp/login/)」でお試しください。
unit_field_2 markdown
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21574
unit_sort 6
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 Unit_List を利用します
unit_field_2 h2
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21575
unit_sort 7
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 最初は、Entry_Body を利用して殆どのタグを削除し、unit:loop だけを利用し h2 のタグでリストを表示できるものを作ってみました。モジュールとして目的の表示や動きは作る事ができるように作れたのですが、モジュールユニットとして Entry_Body の unit:loop の中で Entry_Body を読み込むと無限ループになってしまい正常に動作しなくなる事が作ってから分かりました。 という事から、Unit_List を利用します。 Unit_List は名前のようにエントリーよりさらに細かい単位になるユニットを一覧表示させるモジュールになります。よく利用するのは、画像のみを取り出してギャラリーを作ったり、緯度経度とかだけで複数ピンをたてたマップを作ったりする際に利用します。 今回はテキストユニットのみを取り出します。(テキストユニットの際にはタグが選択できるといいなって気がしましたが、テキストユニットの拡張は今後の課題とします)
unit_field_2 markdown
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21576
unit_sort 8
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 <!-- BEGIN_MODULE Unit_List id="mokuji" --> <div> <h3>目次</h3> <ul> <!-- BEGIN unit:loop --> <!-- BEGIN_IF [{unit_field_2}/eq/h2] --> <li> <!-- BEGIN_IF [{unit_field_3}/nem] --> <a href="#{unit_field_3}" class="scrollTo"> <!-- ELSE --> <a href="#h{unit_id}" class="scrollTo"> <!-- END_IF -->{unit_field_1}</a></li> <!-- END_IF --> <!-- END unit:loop --> </ul> </div> <!-- END_MODULE Unit_List -->
unit_field_2 pre
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21580
unit_sort 9
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 Unit_List id="mokuji" 条件設定
unit_field_2 h3
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21582
unit_sort 10
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 エントリーIDで絞り込んで表示させたいので、エントリーID にチェックをつけます。
unit_field_2 markdown
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21651
unit_sort 12
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 EID を指定して情報を取得する際に、一覧のときに条件が設定されない事になります。 そうなると、全件から見出しを表示する事になってしまいます。その事から、EID が指定されていない時のダミーの EID を指定しておきます。そうする事で一覧のときには表示されません。
unit_field_2 markdown
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21579
unit_sort 13
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 Unit_List id="mokuji" 表示設定
unit_field_2 h3
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21578
unit_sort 15
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 ページャーやフィールドのチェックボックスは全て外して無効にします。
unit_field_2 markdown
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21583
unit_sort 16
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 見出し側のカスタマイズ
unit_field_2 h2
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21584
unit_sort 17
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 見出し側も少しカスタマイズする必要があります。 まず、見出しに個別に id を設定できるようにする必要があります。ユニット側は以下のような入力欄が追加されます。 また、この欄が空だった時の対応も行っていきましょう。
unit_field_2 markdown
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21586
unit_sort 19
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 コンフィグ > ユニット > 編集設定 > テキストタグセレクト
unit_field_2 h3
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21588
unit_sort 20
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 普段は空の拡張という欄の?を見てみると「エントリーのテキストユニットにおける、拡張フィールドラベルを設定します。<変数 : {extend_tag}>」と書かれています。 ここに ID と書くとユニット側のラベルとして利用される事になります。 例えば、他のタグでいえば BLOCKQUOTE のタグとかで CITE属性 を登録できるようにしてもいいですし、場合によっては STYLE として個別スタイルを無理矢理追記するために使ったりするようにしてもいいかもしれません。
unit_field_2 markdown
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21589
unit_sort 22
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 include/unit.html を修正
unit_field_2 h3
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21590
unit_sort 23
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 /themes/system/include/unit.html をコピーして、自分のテーマの同様の場所に unit.html を用意します。その中で以下の場所を探してください。
unit_field_2 markdown
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21591
unit_sort 24
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 <!-- BEGIN h2 --> <h2{class} <!-- BEGIN_IF [{extend_tag}/nem] -->id="{extend_tag}"<!-- END_IF -->>{text}[nl2br]</h4><!-- END h2 -->
unit_field_2 pre
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21592
unit_sort 25
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 現状、既に extend_tag があったら id を追加するように書かれていますが、無かった時の処理がありません。そこを以下のように、空の場合にはユニットIDを編集するように変更してください。
unit_field_2 markdown
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21593
unit_sort 26
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 <!-- BEGIN h2 --> <h2{class} <!-- BEGIN_IF [{extend_tag}/nem] -->id="{extend_tag}"<!-- ELSE -->id="h{utid}"<!-- END_IF -->>{text}[nl2br]</h2><!-- END h2 -->
unit_field_2 pre
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21594
unit_sort 27
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 モジュールユニットで利用できるようにテンプレートを用意する
unit_field_2 h2
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21595
unit_sort 28
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1 最初の方で Unit_List id="mokuji" のコードは紹介しましたが、このコードは entry.html の Entry_Body の上の方に書いてもいいですが、必要な時だけモジュールユニットで追加できるようにしてみたいと思います。 **/themes/(利用テーマ)/include/module/template/Unit_List/mokuji.html** に用意してください。こうする事で、モジュールユニットで利用するテンプレートファイルとなります。モジュールID.html というファイル名にしておくとモジュールの選択時に固定されますのでオススメです。
unit_field_2 markdown
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/
unit_id 21596
unit_sort 29
unit_align auto
unit_type text
unit_attr
unit_size
unit_field_1  これで、無事動作するようになったんじゃないかと思います。 最後に書いておきますが、誰か階層化されたオリジナルの「目次モジュール」作ってみませんか?
unit_field_2 markdown
unit_field_3
unit_field_4
unit_field_5
unit_entry_id 5934
unit_blog_id 1
entry_title a-blog cms で見出しモジュールを作ってみる
entry_url http://kazumich.com/midashi_unit.html
entry_datetime 2016-04-15 11:03:47
blog_name kazumich.log
blog_url http://kazumich.com/

モジュールユニットとは

簡単にモジュールユニットについて説明しておきます。

モジュールユニットとは、通常テキストや画像などを入れるユニットに、Entry_List や Entry_Summary のようなモジュールを追加する事ができるようなユニットになります。追加する際にモジュールを作るのではなく、あらかじめモジュールIDとして準備されているものを選択するカタチになります。

標準で提供している site2015 にもありますので、よく分からない人は「デモサイト」でお試しください。

Unit_List を利用します

最初は、Entry_Body を利用して殆どのタグを削除し、unit:loop だけを利用し h2 のタグでリストを表示できるものを作ってみました。モジュールとして目的の表示や動きは作る事ができるように作れたのですが、モジュールユニットとして Entry_Body の unit:loop の中で Entry_Body を読み込むと無限ループになってしまい正常に動作しなくなる事が作ってから分かりました。

という事から、Unit_List を利用します。

Unit_List は名前のようにエントリーよりさらに細かい単位になるユニットを一覧表示させるモジュールになります。よく利用するのは、画像のみを取り出してギャラリーを作ったり、緯度経度とかだけで複数ピンをたてたマップを作ったりする際に利用します。

今回はテキストユニットのみを取り出します。(テキストユニットの際にはタグが選択できるといいなって気がしましたが、テキストユニットの拡張は今後の課題とします)

<!-- BEGIN_MODULE Unit_List id="mokuji" -->
<div>
<h3>目次</h3>
<ul>
<!-- BEGIN unit:loop -->
<!-- BEGIN_IF [{unit_field_2}/eq/h2] -->
<li>
<!-- BEGIN_IF [{unit_field_3}/nem] -->
<a href="#{unit_field_3}" class="scrollTo">
<!-- ELSE -->
<a href="#h{unit_id}" class="scrollTo">
<!-- END_IF -->{unit_field_1}</a></li>
<!-- END_IF -->
<!-- END unit:loop -->
</ul>
</div>
<!-- END_MODULE Unit_List -->

Unit_List id="mokuji" 条件設定

エントリーIDで絞り込んで表示させたいので、エントリーID にチェックをつけます。



EID を指定して情報を取得する際に、一覧のときに条件が設定されない事になります。 そうなると、全件から見出しを表示する事になってしまいます。その事から、EID が指定されていない時のダミーの EID を指定しておきます。そうする事で一覧のときには表示されません。

Unit_List id="mokuji" 表示設定



ページャーやフィールドのチェックボックスは全て外して無効にします。

見出し側のカスタマイズ

見出し側も少しカスタマイズする必要があります。 まず、見出しに個別に id を設定できるようにする必要があります。ユニット側は以下のような入力欄が追加されます。 また、この欄が空だった時の対応も行っていきましょう。



コンフィグ > ユニット > 編集設定 > テキストタグセレクト

普段は空の拡張という欄の?を見てみると「エントリーのテキストユニットにおける、拡張フィールドラベルを設定します。<変数 : {extend_tag}>」と書かれています。 ここに ID と書くとユニット側のラベルとして利用される事になります。

例えば、他のタグでいえば BLOCKQUOTE のタグとかで CITE属性 を登録できるようにしてもいいですし、場合によっては STYLE として個別スタイルを無理矢理追記するために使ったりするようにしてもいいかもしれません。



include/unit.html を修正

/themes/system/include/unit.html をコピーして、自分のテーマの同様の場所に unit.html を用意します。その中で以下の場所を探してください。

<!-- BEGIN h2 -->
<h2{class} <!-- BEGIN_IF [{extend_tag}/nem] -->id="{extend_tag}"<!-- END_IF -->>{text}[nl2br]</h4><!-- END h2 -->

現状、既に extend_tag があったら id を追加するように書かれていますが、無かった時の処理がありません。そこを以下のように、空の場合にはユニットIDを編集するように変更してください。

<!-- BEGIN h2 -->
<h2{class} <!-- BEGIN_IF [{extend_tag}/nem] -->id="{extend_tag}"<!-- ELSE -->id="h{utid}"<!-- END_IF -->>{text}[nl2br]</h2><!-- END h2 -->

モジュールユニットで利用できるようにテンプレートを用意する

最初の方で Unit_List id="mokuji" のコードは紹介しましたが、このコードは entry.html の Entry_Body の上の方に書いてもいいですが、必要な時だけモジュールユニットで追加できるようにしてみたいと思います。

/themes/(利用テーマ)/include/module/template/Unit_List/mokuji.html

に用意してください。こうする事で、モジュールユニットで利用するテンプレートファイルとなります。モジュールID.html というファイル名にしておくとモジュールの選択時に固定されますのでオススメです。

 

 

これで、無事動作するようになったんじゃないかと思います。 最後に書いておきますが、誰か階層化されたオリジナルの「目次モジュール」作ってみませんか?


コメント

山本一道

山本 一道

有限会社アップルップル

名古屋のホームページ制作会社「有限会社アップルップル」の代表をしています。弊社で開発しているCMS「a-blog cms」や、名古屋の「WCAN」という名古屋のWeb制作者のためのセミナーの主催や、コワーキングスペース「ベースキャンプ名古屋」も始めました。

test

エントリーリスト

カテゴリーリスト

タグクラウド

  • ベースキャンプ名古屋に新しく27インチ 2560x1440 のディスプレイが追加されました。 でも、最大解像度で表示できるケーブルが入荷していないので 1920x1080 の表示になっています。

    kazumich

    Type: image / Filter: Normal / Link / Feb 18th, 2017

    Comments: 0 / Likes: 4

  • マカベン始まりました! #758markup

    kazumich

    Type: image / Filter: Normal / Link / Feb 18th, 2017

    Comments: 0 / Likes: 3

  • 今日のベースキャンプ名古屋では「YouTube勉強会」が開催されています。Super Chat というサービスが開始されたみたいです。

    kazumich

    Type: image / Filter: Normal / Link / Feb 11th, 2017

    Comments: 0 / Likes: 7

  • 席を確保しランチ!

    kazumich

    Type: image / Filter: Normal / Link / Feb 09th, 2017

    Comments: 0 / Likes: 8

  • 順調に進化している森田さんが JS の勉強会で jQuery のプラグインを作った事について発表している。

    kazumich

    Type: image / Filter: Normal / Link / Jan 21th, 2017

    Comments: 0 / Likes: 6

  • 今日はアップルップルの非公開な社内勉強会で「ブランディング勉強会」を、社外から先生(ワクグミ田川さん)を招いて全員で受講しています。

    kazumich

    Type: image / Filter: Gingham / Link / Jan 18th, 2017

    Comments: 0 / Likes: 9

  • 今日は千代さんと2017年版のサイトについて打ち合わせでした。 http://chiyo-katsumasa.com

    kazumich

    Type: image / Filter: Normal / Link / Jan 18th, 2017

    Comments: 0 / Likes: 5

  • 週に1回はココに。

    kazumich

    Type: image / Filter: Normal / Link / Jan 11th, 2017

    Comments: 0 / Likes: 12

  • 恒例の年末のイベントが終わって、1年が終わりです。皆、1年ありがとう!

    kazumich

    Type: image / Filter: Normal / Link / Dec 29th, 2016

    Comments: 0 / Likes: 12

  • 今年も忘年会終わった!

    kazumich

    Type: image / Filter: Normal / Link / Dec 29th, 2016

    Comments: 0 / Likes: 4

実践! コンテンツファーストのWebサイト運用  a-blog cmsではじめるCMSプロトタイピング

2016年6月30日に株式会社ボーンデジタル様より「実践! コンテンツファーストのWebサイト運用 a-blog cmsではじめるCMSプロトタイピング」が発売されました。