SmartBlock でブロックを増やそう

SmartBlockとは

SmartBlock とは Ver.2.11より、a-blog cmsに新しく追加される予定のブロックベースのエディターです。


SmartBlockの特徴は以下になります。

余分なタグが入らない

あらかじめ設定したタグ以外の情報が一切入りません。そのため、一般的なエディターでよくあるような、意図しないタグが知らない間に挿入されているといったことが起こりません。また他のページの内容をコピー、ペーストした際もあらかじめ設定したタグ以上の情報は入りません。

ブロックベースの考え方

また、ブロックベースの考え方でできているため、見出しと本文を入れ替えたり画像と本文を入れ替えたり、順番の制御が容易に行えます。

カスタマイズ性

SmartBlockはカスタマイズ性にもすぐれ、JavaScriptにそれほど精通していない人でも独自のブロックを作成することができます。

SmartBlockを使ってみよう

では早速SmartBlockを使ってみましょう。

ユニットで SmartBlock を利用する

Ver.2.11にはユニットでは「リッチエディター」という名前でPaperEditorが導入されます。デフォルトでは追加ユニットのボタン群にリッチエディターボタンが追加されていないので、追加してみましょう。

管理画面 > コンフィグ > 編集設定 の順にページを移動し、 ユニット追加ボタンより以下のようにリッチエディターを追加してください!


その後、エントリー編集画面に行くと以下のようにボタンが追加されているのが確認できます。


ボタンをクリック後、下図のような見た目でユニットが表示されたら成功です。


組み込みJS の SmartBlock を利用する

SmartBlockは組み込みJSとしても使用できます。カスタムフィールドメーカーを使ってSmartBlockを設置してみましょう。

Ver.2.11よりカスタムフィールドメーカーが強化され、あらたにLiteEditor、SmartBlock、テーブルの組み込みJS用のソースコードが出力できるようになりました。管理画面 > コンフィグ > カスタムフィールドメーカーの順にページを移動して、以下のようにセレクトメニューからリッチエディターを選択し、ソースコードを生成しましょう。


生成されたコードを各種カスタムフィールドの設置したい箇所に貼り付け、使用してください。

SmartBlockのカスタマイズ(ハンズオン)

さて、ここからいよいよハンズオンです。

SmartBlockではユニットのようにブロックを簡単に作ることが可能です。このハンズオンでは、編集画面を SmartBlock 用のテーマに変更し、実際に新しいブロックを追加する方法を紹介します。

今回は blog2019 を継承した paper-editor@blog2019 を用意しました。

以下のフォルダをダウンロードしてthemesディレクトリに設置してください。


ファイルを開く

paper-editor@blog2019

設置したら、管理画面 > コンフィグ > テーマ設定の順にページを移動します。
先ほど設置した paper-editor@blog2019 をテーマディレクトリ名に選択し、テンプレート設定のチェックを外してください。


そして、以下のようにテンプレートファイルを設定します。


あとは、管理画面>コンフィグ>編集設定の順にページを移動し、エントリーの編集画面の設定を表側で統一すれば準備完了です!


エントリー編集画面で以下のように記事を書けば


SmartBlockの編集画面


エントリー保存後、書いた内容がそのまま表示されているのが確認できます!


エントリー保存後の画面


オリジナルのブロックを追加してみよう

次にオリジナルブロックを追加してみましょう。
/themes/paper-editor@blog2019/include/head/js.html に以下のように記述します。

<script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js"></script>
<!-- BEGIN_MODULE Js -->
<script src="%{ROOT_DIR}acms.js{arguments}" id="acms-js"></script><!-- END_MODULE Js -->
<!-- BEGIN_MODULE Touch_Unlogin --><!-- BEGIN_MODULE Blog_Field -->{google_analytics}[raw]<!-- END_MODULE Blog_Field --><!-- END_MODULE Touch_Unlogin -->
<script>
ACMS.Ready(function() {
  // ここに処理を書いていく
});
</script>

使用できるプロパティ



プロパティ名 説明 記述例
tagName HTML要素を指定 例)p
className クラス名を指定 例)acms-text-error
customName ユニークな名前を記述 例)error-text
icon アイコンを挿入するときはHTMLタグを記述 例)<img src="画像のファイルパス"> または <svg>...</svg>

アラートボックスを表示するブロックを追加

ACMS.Config.SmartBlockAdds = function(Extensions) {
  return [
  new Extensions.CustomBlock({
     tagName: 'div',
     className: 'acms-alert',
     customName: 'alert',
     icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1792 1792"><title>アラート</title><path d="M1777.67,1567.49,960.05,49.07c-35.23-65.43-92.87-65.43-128.1,0L14.33,1567.49c-35.22,65.43-3.25,119,71.06,119H1706.61C1780.92,1686.45,1812.89,1632.92,1777.67,1567.49ZM1024,1536H768V1280h256Zm0-384H768L704,576h384Z"/></svg>'
  })
  ]
};

追加されるアラート

small要素を挿入するマーカーを追加

さらにSmartBlockではブロックだけでなく、インライン用の装飾(マーカー)を追加することが可能です。

ACMS.Config.SmartBlockAdds = function(Extensions) {
  return [
  new Extensions.CustomBlock({
     tagName: 'div',
     className: 'acms-alert',
     customName: 'alert',
     icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1792 1792"><title>アラート</title><path d="M1777.67,1567.49,960.05,49.07c-35.23-65.43-92.87-65.43-128.1,0L14.33,1567.49c-35.22,65.43-3.25,119,71.06,119H1706.61C1780.92,1686.45,1812.89,1632.92,1777.67,1567.49ZM1024,1536H768V1280h256Zm0-384H768L704,576h384Z"/></svg>'
  }),
  //さらに追加
  new Extensions.CustomMark({
     tagName: 'small',
     customName: 'small',
     icon: 's' // 本来であればSVGまたはimg要素を指定できるのですが、現在のベータ版では対応されていないので代わりにテキストを記述してください
  })
  ]
};

追加されるsmall要素

Form2Entryでお問い合わせ管理システムを作ろう

弊社では 最近 a-blog cms で使えるさまざまな拡張アプリを開発しています。その一つとしてフォームから送信された内容をエントリーにする拡張アプリ、Form2Entryがあります。Form2Entryは使い方次第でとても強力なツールとなるのでぜひ使い方をマスターしましょう。

Form2Entryはビジネスパートナー契約の特典として解放されているa-blog cmsパートナーストアでご購入いただける拡張アプリです。期間限定ではありますが、ハンズオンできるプログラムを本記事で配布しております。


Form2Entryとは

フォームからエントリーに登録したい内容を送信できる機能です。フォームモジュールを使用したフォームから、エントリーに投稿したい内容を送信できます。この機能を活用することで掲示板のようなログイン無しで投稿できる、投稿型サイトが簡単に実装できます。

自動で投稿されたエントリーは、カテゴリーの指定や、エントリーのステータス、どのユーザーとして登録するかなど詳細な指定がフォームの管理画面から可能になっています。

Form2Entryではフォームから送信されたフィールドがエントリーの以下のテーブルの情報に変換されて登録されます。以下のテーブルに記載がない項目についてはエントリーのカスタムフィールドとして保存されます



フィールド名 フォーマット 説明 指定なしの場合
entry_id 数値 エントリーIDを指定 123 新規eid
entry_code 文字列 コード(ファイル名)を指定 entry-123.html 通常エントリ作成時と同様
entry_status open | close | draft | trash ステータスを指定(open: 公開、close: 非公開、draft: 下書き、trash: ゴミ箱)のいずれかを指定 open open
entry_title 文字列 タイトルを指定 テストエントリー CSV_IMPORT-[eid]
entry_link 文字列 リンク先URLを指定 https://www.a-blogcms.jp/
entry_datetime yyyy-MM-dd H:mm:ss 日付を指定 2018-12-06 15:08:01 インポート時の日時
entry_start_datetime yyyy-MM-dd H:mm:ss 公開日時を指定 2018-12-06 15:08:01 1000-01-01 00:00:00
entry_end_datetime yyyy-MM-dd H:mm:ss 掲載期限を指定 2018-12-06 15:08:01 9999-12-31 23:59:59
entry_posted_datetime yyyy-MM-dd H:mm:ss 作成日を指定 2018-12-06 15:08:01 インポート時の日時
entry_updated_datetime yyyy-MM-dd H:mm:ss 更新日を指定 2018-12-06 15:08:01 インポート時の日時
entry_summary_range 数値 ユニットの「続きを読む」の位置を指定(例: 3 -> 上から3番目のユニットを一覧で出力) 3
entry_indexing on | off インデキシング(一覧に出力するかどうか)を設定(on: 出力する、off: 出力しない) on on
entry_primary_image 数値 メイン画像のユニットIDを指定 123
entry_category_id 数値 カテゴリーIDを指定 1
entry_user_id 数値 エントリー所有者のユーザーIDを指定 1 インポート実行者のUID
カスタムフィールド変数 カスタムフィールド としてインポートされます。インポート先のフィールド仕様にあった値を設定ください

さらにフォームから投稿された画像やカスタムフィールドグループなどの情報もエントリーにそのまま保存されます。その際には、カスタムフィールドメーカーで生成すると便利です。

ユニットとしてデータを登録する方法

カスタムフィールドだけではなく、エントリーのユニットにもフォームから送信したデータを登録することができます。その場合は以下のように記述します。

<input type="hidden" name="unit@p[]" value="テキスト1">
<input type="hidden" name="unit@p[]" value="テキスト2">
<input type="hidden" name="field[]" value="@unit">
<input type="hidden" name="field[]" value="unit@p">
<input type="hidden" name="@unit[]" value="unit@p">

unit@p以外にも、unit@h2, unit@h3, unit@ul, unit@markdownが利用でき、それぞれ、見出し2、見出し3、リスト、マークダウンの形式でテキストユニットに保存されます。

Form2Entryの使い方

拡張アプリを有効化する

Form2Entryは拡張アプリとなるため、使うためにはルートディレクトリ直下にあるconfig.server.php より HOOK_ENABLE1 にします。

Form2Entryダウンロード

Form2Entryをダウンロードしましょう。以下のパッケージは暗号化されていて、年内まで利用することができます。

サーバー環境のPHPのバージョンに合わせて、パッケージをダウンロードしてください。PHPのバージョンは、管理画面>チェックリストのページにて確認することができます。(※2019/11/22時点のablogcms.ioのPHPのバージョンは5.6.17です)


ファイルを開く

PHP 5.3 ~ 5.5対応


ファイルを開く

PHP 5.6 ~ 7.0対応


ファイルを開く

PHP 7.1 ~ 7.3対応


Form2Entryのインストール

Form2Entryをa-blog cmsに設置しましょう。zipファイルを解凍したら、/extension/plugins/ディレクトリの中に、Form2Entryという名前でフォルダを設置します。


設置したら、管理画面 > 拡張アプリよりForm2Entryをインストールします。


Form2Entryを有効化する方法

管理画面>フォームの順にページを移動し、Form2Entryを使いたいフォームIDの設定ページに移動します。

contactFormのフォーム設定画面に移動すると下の画像のようにForm2Entry用の設定が増えています。エントリー設定を「有効にする」にチェックを入れることでForm2Entryが利用可能になります。


Form2Entryで設定できる項目について

Form2EntryのフォームIDの設定には以下の設定項目があります。ハンズオンに移る前に、それぞれ順を追って説明します。

  1. 項目変換設定
  2. タイトル指定
  3. カテゴリー指定
  4. ユーザー指定
  5. ステータス指定

1. 項目変換設定

項目変換設定はフォームで送信されたフィールドの内容をどのようにエントリーのフィールドに保存するかの設定です。デフォルトの設定である「項目変換をせずに全部登録する」ではフォームのフィールド名がそのままエントリーのカスタムフィールドとなって保存されます。

項目変換をしたいもの以外はそのままのフィールド名で登録する(entry側を空にしておくと情報を捨て登録しない)

こちらの設定では、あらかじめフォームのフィールド名に対応するエントリーのカスタムフィールド名を記述しておくことによって、フォームから送信された内容が一部、別名でエントリーのカスタムフィールドに登録されます。ここに設定されていない項目についてはそのままのフィールド名でエントリーのカスタムフィールドに登録されます。なお、下の画像のようにエントリー側の項目が空の場合は、対応するフォームのフィールドがエントリーのカスタムフィールドに保存されなくなります。


項目変換したいものだけを登録する

この設定では、あらかじめフォームの設定で登録された内容以外の送信内容が全て破棄されてエントリーのカスタムフィールドに登録されます。


2. タイトル指定

フォーム内で利用された変数を活用して、フォームから生成されるエントリーのタイトルを設定できます。

3. ブログ指定

エントリーがフォームから作成された際にここで指定されたブログがエントリーに設定されます。

4. カテゴリー指定

エントリーがフォームから作成された際にここで指定されたカテゴリーがエントリーに設定されます。

5. ユーザー指定

エントリーがフォームから作成された際にここで指定されたユーザーがそのエントリーの作成者として登録されます。

6. ステータス指定

エントリーがフォームから作成された際のエントリーの公開状態を指定することができます。

Form2Entryでお問い合わせ管理システムを作ろう(ハンズオン)

このハンズオンでは、From2Entryの機能を使って、お問い合わせ管理の仕組みを作ります。以下の手順で進めていきます。

  1. フォーム投稿されたエントリーが所属するブログを作る
  2. 使用するフォームIDでForm2Entryを有効化する
  3. お問い合わせのデータを編集するカスタムフィールド を作る
  4. 閲覧ページでお問い合わせの内容を確認できるテンプレートを作る
  5. トップページにお問い合わせの一覧を表示する

ここでは、site2019テーマの初期インストール状態を例に解説していきます。環境が異なる場合はご自身の環境に合わせて読み替えてください。

Form2Entryで投稿されたエントリーが所属するブログを作る

以下のように子ブログを作ります。管理者のみ閲覧できるように今回はシークレットブログで作成します。


使用するフォームIDでForm2Entryを有効化する

フォームの投稿データをエントリーへ変換したいフォームIDの変更画面に移動します。今回はcontactFormを使用します。


contactFormの変更画面に移動すると、以下のようにForm2Entryの設定項目が増えています。「エントリー設定」を有効にしてください。

下図のように設定し、ルートブログに投稿されたフォームの内容を、子ブログのエントリーとして作成されるようにしましょう。


これで、お問い合わせフォームから送信すると子ブログにエントリーが作成される仕組みができました。一度、フォームを送信して子ブログにエントリーが作成させるか試してみてください。

それでは、お問い合わせを管理するための編集ページを作成していきます。

お問い合わせデータを編集できるカスタムフィールド を作る

下図のようなお問い合わせ管理用の管理画面を、エントリーに作成していきます。この画面を作ることにより、Form2Entryにより投稿されたエントリーのデータを編集できるようになります。



子ブログ側のエントリーにお問い合わせ内容を確認するためのカスタムフィールドを作ります。

子ブログ用のカスタムフィールドが登録できるように、以下のように @include("/admin/entry/field/%{BCD}.html") を以下のテンプレートに書き加えます。

/themes/site2019/admin/entry/field.html

<!-- 共通の設定 -->
@include("/admin/entry/field/common.html")

<!-- SEOの設定 -->
@include("/admin/entry/field/seo.html")

<!-- ピックアップの設定 -->
@include("/admin/entry/field/pickup.html")

<!-- コード別フィールドの表示 -->
@include("/admin/entry/field/%{CCD}.html")
@include("/admin/entry/field/%{ECD}")
<!-- 以下を追加 -->
@include("/admin/entry/field/%{BCD}.html") 

次にお問い合わせ内容のカスタムフィールドを実際に作っていきます。 /themes/site2019/admin/entry/field/contact-admin.html を作成してください。

お問い合わせフォームで使用しているHTMLの一部分をそのまま利用するため、既存のファイルをインクルードします。お問い合わせに対しての対応状況の項目だけ、新たに追加しておきましょう。

/themes/site2019/admin/entry/field/contact-admin.html

<style>
.contact-form .acms-form-width-full {
   width: 100% !important;
}
</style>
<table class="acms-admin-table-admin-edit">
<tr>
  <th>対応状況</th>
  <td>
  <div class="acms-admin-form-checkbox">
    <input type="checkbox" name="responseStatus[]" value="done" {responseStatus:checked#done} id="input-checkbox-responseStatus-done" />
    <label for="input-checkbox-responseStatus-done">
      <i class="acms-admin-ico-checkbox"></i>対応済み</label>
  </div>
  <input type="hidden" name="field[]" value="responseStatus" />
  </td>
</tr>
</table>
@include("/contact/form/input.html")

またお問い合わせフォームで使われているCSSが適用するために、管理画面 > コンフィグ > 編集設定の順にページを移動し、以下のように編集画面を表側に統一しておいてください。


閲覧ページでお問い合わせ内容を確認できるテンプレートを作る

お問い合わせ管理のブログのを調整して実際にお問い合わせ内容が表示されるようにカスタマイズしていきます。

新たに、themesディレクトリにcontact-admin@site2019フォルダを作成し、子ブログの管理画面 > コンフィグ > テーマ設定にてcontact-admin@site2019テーマを選択します。

このとき、テンプレートの設定は「テンプレート選択ファイル(template.yaml)の値を優先する」のチェックを外して、以下のようにしておきましょう。


以下の必要なファイルを新規作成またはすでに存在するファイルには一部コードを追加します。

一部追加:/themes/site2019/include/entry/body.html

ファイルの34行目付近に移動し、以下のように @include("/contact/form/confirm.html")を追加します。

<!-- エントリーのタイトル 開始▼▼ -->
<!-- BEGIN title:veil -->
<header class="acms-page-header page-header">
	<p class="entry-info">
	<!-- BEGIN date:veil --><time datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年{date#m}月{date#d}日({date#l}[weekEN2JP])</time><!-- END date:veil -->
	<!-- BEGIN category:veil --><!-- BEGIN category:loop -->
	<a href="{url}" class="acms-label entry-category js-viewing-indelible">{name}</a><!-- BEGIN glue --> &lt;<!-- END glue -->
	<!-- END category:loop -->
	<!-- END category:veil --><!-- BEGIN new --><span class="acms-label acms-label-danger entry-new">NEW</span><!-- END new --></p>
	<!-- BEGIN_MODULE Touch_Entry --><h1 class="entry-title"><a href="{titleUrl}">{title}</a></h1><!-- END_MODULE Touch_Entry -->
	<!-- BEGIN_MODULE Touch_NotEntry -->
	<h2 class="entry-title"><a href="{titleUrl}">{title}</a></h2><!-- END_MODULE Touch_NotEntry -->
</header>
<!-- END title:veil -->
<!-- 以下を追記 -->
<!-- BEGIN_MODULE Touch_NotAdmin -->
@include("/contact/form/confirm.html")
<!-- END_MODULE Touch_NotAdmin -->

一部追加:/themes/contact-admin@site2019/_entry.html

@extends("/_layouts/one-column.html")

@section("main")
<div class="acms-container">
<!-- エントリーボディ(日付無し) -->
@include("/include/entry/body.html", {"module_id": "body_no_date"})
</div>
@endsection

トップページにお問い合わせの一覧を表示する

新規作成:/themes/contact-admin@site2019/index.html

@extends("/_layouts/one-column.html")

@section("main")
<div class="acms-container">
  @include("/include/parts/contact-search.html")
  <!-- BEGIN_MODULE Entry_Summary id="summary_index" -->
  <section class="module-section">
    @include("/admin/module/setting.html")
    <div class="module-header clearfix">
      <!-- BEGIN moduleField -->
      <!-- BEGIN module_heading:veil -->
      <h2 id="top_headline-{{module_id}}" class="module-heading">
        <!-- BEGIN module_heading_icon:veil --><span class="{module_heading_icon}" aria-hidden="true"></span>
        <!-- END module_heading_icon:veil -->{module_heading}</h2><!-- END module_heading:veil -->
      <!-- END moduleField -->
      <a href="{indexUrl}" class="module-index-link"><span class="acms-icon acms-icon-arrow-right"
          aria-hidden="true"></span><!-- BEGIN moduleField --><span class="acms-hide-visually">{module_heading}の</span>
        <!-- END moduleField -->一覧</a>
    </div>
    <ul class="headline acms-list-group clearfix" aria-labelledby="top_headline-{{module_id}}">
      <!-- BEGIN entry:loop -->
      <li class="headline-item {entry:loop.class}">
        <!-- BEGIN url#front --><a href="{url}" class="acms-list-group-item headline-link">
          <!-- END url#front -->
          <time class="headline-dat" datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年{date#m}月{date#d}日( {date#week}
            )</time>
          <!-- BEGIN category:veil --><span class="acms-label">{categoryName}</span><!-- END category:veil -->
          <span class="headline-title">{title}</span>
          <!-- BEGIN_IF [{responseStatus}/eq/done] --><span class="acms-label acms-label-info">対応済み</span>
          <!-- ELSE --><span class="acms-label acms-label-danger">未対応</span>
          <!-- END_IF -->
          <!-- BEGIN url#rear --></a><!-- END url#rear -->
      </li><!-- END entry:loop -->
    </ul>
  </section>
  <!-- END_MODULE Entry_Summary -->
</div>
@endsection

新規作成:/themes/site2019/include/parts/contact-search.html

このHTMLはお問い合わせ検索用のテンプレートになります。

<!-- BEGIN_MODULE Field_Search -->
<div class="entry-column">
<form action="/" method="post" class="acms-form" role="search" aria-label="検索フォーム">
  <table class="realestate-search">
    <tr class="acms-hide-sp">
      <th class="acms-admin-table-nowrap">対応状況</th>
      <th class="acms-admin-table-nowrap">キーワード</th>
      <th class="acms-admin-table-nowrap">検索</th>
    </tr>
    <tr>
      <td class="acms-admin-table-nowrap">
        <div class="acms-admin-form-checkbox">
          <input type="checkbox" name="responseStatus[]" value="done" {responseStatus:checked#done} id="input-checkbox-responseStatus-done" />
          <label for="input-checkbox-responseStatus-done">
            <i class="acms-admin-ico-checkbox"></i>対応済み</label>
        </div>
        <input type="hidden" name="field[]" value="responseStatus" />
      </td>
      <td class="acms-form-width-full">
        <label for="keyword" class="acms-hide-visually-lg acms-hide-visually-xl">キーワード</label>
        <input type="search" name="keyword" value="%{KEYWORD}" id="keyword" class="acms-form-width-full" />
      </td>
      <td class="acms-admin-table-nowrap">
        <input type="hidden" name="bid" value="%{BID}" />
        <input type="submit" name="ACMS_POST_2GET" value="検索" class="btn btn-search-block" />
      </td>
    </tr>
  </table>
</form>
</div>
<!-- END_MODULE Field_Search -->

これでカスタマイズは完了です。

カスタマイズがうまく完了していれば、お問い合わせから送信があった場合は以下のように子ブログでエントリー一覧が表示されます。


対応済みラベルの表示について

以下のようにエントリーのカスタムフィールド を「対応済み」にチェックを入れると、一覧ページのラベルに「対応済み」と表示されます。



ハンズオンは以上になります。

今回はForm2Entryでお問い合わせ管理機能を作りましたが、アイデア次第でForm2Entryで予約管理システムなどいろいろなサイトが作れるはずです。みなさんもぜひ挑戦してみてください!

組み込みJS Yahoo! Map Cluster を使ってピンが集まった場所をまとめよう

Yahoo! Map Cluster の実装イメージ

Yahoo! Map Cluster のJSライブラリの紹介はすでに過去開催のTraining Camp(Yahoo! 地図とYahoo! Map Clusterをためしてみよう | 2019春合宿 | ハンズオン)で行なっておりますが、Ver.2.11より組み込みJSとして仲間入りしました。

以前は JS を書かなければいけませんでしたが、組み込みJSとして Yahoo! Map Cluster を使えば、HTMLに追記するだけで実装することができます。

ここでは、beginner2019テーマの初期インストール状態を例に解説していきます。環境が異なる場合はご自身の環境に合わせて読み替えてください。

Yahoo!地図を利用するメリット

Webサイトへの地図の埋め込みに Google Maps を利用する機会も多いと思います。昨年、Google Maps がクレジットカード情報の登録が必須になり、無料での利用が 28,000pv/月までと仕様が変更になりました。

それに対してYahoo!地図は現在のところ、クレジットカードの登録は必要がなくAPIの利用上限もGoogle Mapsと比べると50倍以上となっています。日本国内の地図であれば、Yahoo!地図 を利用することも検討に加えていいサービスではないでしょうか。

今回のハンズオンはa-blog cmsでGoogle Mapsの代替としてYahoo!地図を使いこなすためのものとなっています。

組み込みJSの解説

組み込みJSは、a-blog cms 本体に同梱されているJavaScriptのライブラリです。a-blog cms をインストールしてある環境であれば特別なファイルを読み込まなくても、HTMLにclass属性を追加するだけでお手軽に利用できます。

組み込み方法

<div class="js-yahoo-map"
   data-cluster="true"
   data-lat="35.172775"
   data-lng="136.887466"
   data-zoom="15"
   data-markers='35.172762,136.887447|35.176559,136.885409|35.170394,136.887383'
   data-messages='<table>... 省略 ....</table>'
   style="width: 820px; height: 400px;"
></div>

※横幅と高さを指定することにより、地図のサイズを指定できます

データ属性解説



データ属性名 詳細 記述方法
data-lat ピンを表示する地図の緯度 数字
data-lng ピンを表示する地図の経度 数字
data-zoom ピンを表示する地図のズームの値 数字
data-markers 地図内に表示したいピン。経度と緯度を「,」つなぎで記述する 数字
data-messages 吹き出し内に表示するコンテンツ HTML
data-cluster クラスターを使用するかどうか true|false

Yahoo!地図の設定方法

a-blog cmsでYahoo!地図を利用するには、以下の手順が必要になります。

  1. Yahoo! デベロッパーネットワークにてAPIの利用申請
  2. a-blog cmsの管理画面よりアプリケーションIDを登録

Yahoo! デベロッパーネットワークにてAPIの利用申請

まず、Yahoo! JAPAN IDでログイン(Yahoo! JAPAN IDをお持ちでない方は新しく取得)し、アプリケーションの登録を行います。

アプリケーションの種類が2種類ありますが、「クライアントサイド」をお選びください。


以下を参考にしてアプリケーションの基本情報の必須事項を記入し、ガイドラインを確認し、ご登録ください。



アプリケーション名 JS Yahoo! Map Cluster

a-blog cmsの管理画面よりアプリケーションIDを登録

登録が完了すると、Client ID が発行されます。この Client ID をa-blog cmsの管理画面にて登録をします。


管理画面に入り、 コンフィグ > プロパティ設定にて、APIキーを登録します。


これにより、Yahoo!地図が現在のブログで有効になりました。

Yahoo!地図を実装する

すでに経度や緯度の情報を持っている、物件情報のページで実装してみましょう。

/themes/beginner2019/realestate/index.html を開き、28行目に以下の記述を行なってください。

<div class="main-inner is-space-right">

<!-- ▼▼▼以下を記述▼▼▼ -->
<div class="module-header acms-margin-bottom-small clearfix">
  <h2 class="module-heading">%{CATEGORY_NAME}の検索</h2>
</div>
<div class="map-wrapper acms-margin-bottom-large">
  <div class="realestate-map">
  <!-- BEGIN_MODULE Entry_Summary id="summary_custom" -->
  <!-- BEGIN_SetRendered id="map-markers" -->
  <!-- BEGIN unit:loop --><!-- BEGIN entry:loop -->{map_lat},{map_lng}<!-- BEGIN glue -->|<!-- END glue --><!-- END entry:loop --><!-- END unit:loop -->
  <!-- END_SetRendered -->

  <!-- BEGIN_SetRendered id="map-messages" -->
  <!-- BEGIN unit:loop --><!-- BEGIN entry:loop --><table><tr><td><a href="{url}"><!-- BEGIN_IF [{main_photo@path}/nem/] --><img src="%{MEDIA_ARCHIVES_DIR}{main_photo@path}" width="200" alt="" /><br/><!-- END_IF -->{title}</a></td></tr></table><!-- BEGIN glue -->[[:split:]]<!-- END glue --><!-- END entry:loop --><!-- END unit:loop -->
  <!-- END_SetRendered -->
  <!-- END_MODULE Entry_Summary -->

  <div class="js-yahoo-map"
    data-cluster="true"
    data-lat="35.172775"
    data-lng="136.887466"
    data-zoom="15"
    data-markers='<!-- GET_Rendered id="map-markers" trim="1" -->'
    data-messages='<!-- GET_Rendered id="map-messages" trim="1" -->'
    style="width: 820px; height: 400px;"
  ></div>
  </div>
</div>
<!-- ▲▲▲ここまで▲▲▲ -->

<!-- エントリーサマリー(カスタムフィールド画像表示) -->
@include("/include/entry/summary-custom.html")

SetRenderedとGET_Rendered

ピンの位置指定と吹き出し部分にGET_Renderedを使うことにより、Entry_Summary モジュールの実行が通常は2回かかるところを1回にしています。動作するモジュールを節約することにより、ページの表示速度を早くすることが可能です。

SetRenderedとGET_Renderedについては、以下のページをご覧ください。

エントリーデータを増やす

今のままではピンの数が少ないので、エントリーを増やしましょう。 下記で配布しているCSVファイルをダウンロードして、管理画面のサイドカラムにある「インポート」ページから、エントリーをインポートしてください。 カテゴリーは「物件情報」を選択します。


物件情報のエントリーデータ(CSV)


管理画面からモジュールID「summary_custom」の表示を30件にするとピンがたくさん表示されます。


Ver. 2.11 で追加された機能を使ってパフォーマンス改善してみよう

Ver. 2.11 では、パフォーマンス改善に関する機能が多く追加されました。デフォルトで有効な機能も多いですが、どうやって動いているのか、カスタマイズ方法を覚えて、使いこなせるようになりましょう。

ここでは、beginner2019テーマの初期インストール状態を例に解説していきます。環境が異なる場合はご自身の環境に合わせて読み替えてください。