ユニットグループ機能を使ってレイアウトする

ページ内でユニットを配置するには、基本的にはテキストユニットや画像ユニットなどで用意されている「配置」の設定を変更しておこないますが、ここでは、複数のユニットをまとめてカラム(段)にする「ユニットグループ」を使った入力について説明します。

ユニットグループとは?

ユニットグループ機能を利用することで、複数のユニットをdiv要素で囲むことができます。そのグループにはラベル(選択時の名前)とクラス(HTMLの要素に適用するclass属性)を自由に追加できます。


例)上段に2カラム、下段に1カラムでレイアウトされている

ユニットグループを使った段組の例

地図ユニットの Google maps を表示環境とは関係なく英語化するには

本日、地図ユニットのカスタマイズの相談があった点について紹介しておきます。



英語サイトを作っているが地図ユニットの Google Maps の中は日本語で表示されてしまう。これを英語にするにはどうしたらいいでしょうか? 上記は日本語の地図になります。

Unit_List の使用ケースその1:ギャラリー

Unit_Listとは、ビルトインモジュールの1つで、現段階では Entry_Body 以外で唯一ユニットを表示できるモジュールです。Entry_Body と違うところは、Entry_Body はエントリーのユニットを表示するのに対し、 Unit_List はエントリーをまたぎ、ユニットのみを表示して一覧にすることができます。

Unit_List は特殊なモジュールのため、どう応用していいのか想像がつきづらいかと思いますが、その1例として、ギャラリーページに使われます。


(スクリーンショット:写真が並んだギャラリーページ)

ユニットリストをギャラリーとして利用した例


実装方法

まずは、ギャラリーを表示したい場所に、ユニットリストを実装したファイルをインクルード機能を使って読み込みます。

インクルードファイルが /include/unit_list.html の場合、ソースコードは以下のようになります(※ファイルのパス、ファイル名が違う場合は30行目を修正してください)。

ソースコード(/include/unit_list.html)

<script>
  ACMS.Ready(function(){
    ACMS.Config.ppMark = 'a[data-rel^="prettyPhoto"]';
  });
</script>
<!-- BEGIN_MODULE Unit_List id="gallery" -->
<div class="acms-container">
  <!--#include file="/admin/module/setting.html"-->
  <div class="acms-grid">
    <!-- BEGIN unit:loop -->
    <div class="acms-col-md-4 acms-col-sm-6 text-center" style="position: relative;"> 
      <a href="<!-- BEGIN_IF [{large}/nem/] -->%{ARCHIVES_DIR}{large}<!-- ELSE -->%{ARCHIVES_DIR}{normal}<!-- END_IF -->" data-rel="prettyPhoto[gallery{entry_id}]" title="{entry_title}" >
          <p class="acms-text-center"><!-- #BEGIN image:veil -->
            <img src="%{ARCHIVES_DIR}{normal}[resizeImg(200,200)]" alt="{alt}"  class="acms-img-rounded"><!-- #END image:veil -->
          </p>
      </a>
      <!-- BEGIN_MODULE Touch_SessionWithAdministration -->
      <!-- 編集ボタン -->
      <form action="" method="post" style="position: absolute; bottom: 20px; right: 15px;">
        <input type="hidden" name="eid" value="{entry_id}" />
        <input type="hidden" name="admin" value="entry-edit" />
        <input type="submit" name="ACMS_POST_2GET" value="変更する" class ="acms-admin-btn" />
      </form>
      <!-- END_MODULE Touch_SessionWithAdministration -->
    </div>
    <!-- END unit:loop -->
  </div>
 
  <!-- 続きを読むボタン -->
  <!-- BEGIN pager:veil --><!-- BEGIN forwardLink -->
  <form action="" method="post" class="js-post_include">
    <input type="hidden" name="bid" value="%{BID}" />
    <input type="hidden" name="cid" value="%{CID}" />
    <input type="hidden" name="tpl" value="/include/unit_list.html" />
    <input type="submit" name="ACMS_POST_2GET" value="もっと見る" class="acms-btn acms-btn-block acms-btn-large" />
    <input type="hidden" name="page" value="{forwardPage}" />
  </form>
  <!-- END forwardLink --><!-- END pager:veil -->
</div>
<!-- END_MODULE Unit_List -->

注意点

  • モジュールID名を修正するときは6行目を変更してください(現在のモジュールID名は「gallery」になっています)
  • 1~5行目では、prettyPhotoはHTML5対応するため、12行目のrel属性をdata-rel属性に変更しています
  • ファイルのパス、ファイル名が違う場合は34行目を修正してください

モジュールの設定



ユニットタイプの「画像」がチェックされていることを確認してください。

他の設定については、必要に応じて有効にしてください。


Unit_List を使うことで変わるギャラリーページの運用方法


Unit_Listをギャラリーページで使うことになると、基本的にはエントリーのページでは文字を挿入することがなくなります。運用時に運営者が迷わないように、管理画面>コンフィグ>編集設定の順にページを移動し、「画像」以外のユニット追加ボタンを削除しましょう。


編集設定のページにある、ユニット追加ボタンを「画像」以外削除しておく


エントリー編集画面のユニット追加ボタン


このように画像投稿専用のUIが運営者に提供できます。

Unit_List の使用ケースその2:Google MapのAPI 「MarkerClusterer」

エントリー内のユニットを表示するUnit_Listの使用ケース紹介その2では、Google MapのAPI 「MarkerClusterer」を使ったUnit_Listの活用方法をご紹介します。

たとえば、1つの地図に各エントリーに1つずつ挿入されている地図ユニットをピンでまとめたいときに有効です。

MarkerClustererを使うことにより、同じ位置にエントリーが集中していたとしてもピンが多くなりすぎず、すっきりとした見た目になります。


遠くのエントリーは1件表示だけですが、近くの2件はまとめて表示される

3件のエントリーに1つずつ地図が入力されている場合の MarkerClusterer の例


実装方法

/js/makerclusterer.jsと/images/フォルダをGitHubよりダウンロードしてください。

ソースコード:headタグ

headタグ内に以下を記述してください。

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=%{GOOGLE_API_KEY}&sensor=false"></script> 
<script type="text/javascript" src="/js/markerclusterer.js"></script>

テーマフォルダに/images/フォルダを設置するときは、/js/makerclusterer.jsの以下の記述のパスを変更する必要があります(例: '/theme/site/images/m'; など)。

MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = '../images/m';

ソースコード:MarkerClustererを設置したい場所への記述

HTMLファイル内のMarkerClustererを設置したい場所に以下を記述します。

<div id="map" style="height: 400px;"></div>

ソースコード:地図の基準にしたい緯度経度の情報を登録するカスタムフィールド

ブログのトップに表示させたい場合はブログのカスタムフィールドに、カテゴリーの一覧に表示させたい場合はカテゴリーのカスタムフィールドに記述してください。

※Site2016内の/admin/category/field_realestate.htmlと同じ内容です

<h3 class="acms-admin-admin-title2">一覧ページで表示させる地図の中心の緯度経度設定</h3>
<table class="adminTable acms-admin-table-admin-edit">
<tr>
  <th>地図</th>
  <td class="js-map-editable">
    <div class="acms-admin-form-group">
      <label for="input-text-map-search_text" class="acms-admin-hide-visually">住所で検索する</label>
      <input type="text" name="" value="" id="input-text-map-search_text" class="js-editable_map-search_text" disabled="disabled" size="40" />
      <input type="button" name="" value="検索" class="js-editable_map-search_button acms-admin-btn-admin" disabled="disabled" />
    </div>
    <div class="acms-admin-form-group">
      <img class="js-map_editable-container" src="http://maps.google.com/maps/api/staticmap?center={index_map_lat},{index_map_lng}&zoom={index_map_zoom}&size=640x400&maptype=roadmap&markers={index_map_lat},{index_map_lng}&key=%{GOOGLE_API_KEY}" width="640" height="400" style="display:block;" />
    </div>
  <!-- BEGIN index_map_lat:veil -->
  <label for="input-text-index_map_lat">緯度</label> <input type="text" name="index_map_lat" value="{index_map_lat}" size="9" id="input-text-index_map_lat" class="js-map_editable-lat" />
  <label for="input-text-index_map_lng">経度</label> <input type="text" name="index_map_lng" value="{index_map_lng}" size="10" id="input-text-index_map_lng" class="js-map_editable-lng" />
  <label for="input-text-index_map_zoom">ズーム</label> <input type="text" name="index_map_zoom" value="{index_map_zoom}" size="10" id="input-text-index_map_zoom" class="js-map_editable-zoom" />
  <!-- END index_map_lat:veil -->
  <!-- BEGIN index_map_lat:empty -->
  <label for="input-text-index_map_lat">緯度</label> <input type="text" name="index_map_lat" value="35.172775" size="9" id="input-text-index_map_lat" class="js-map_editable-lat" />
  <label for="input-text-index_map_lng">経度</label> <input type="text" name="index_map_lng" value="136.887466" size="10" id="input-text-index_map_lng" class="js-map_editable-lng" />
  <label for="input-text-index_map_zoom">ズーム</label> <input type="text" name="index_map_zoom" value="7" size="10" id="input-text-index_map_zoom" class="js-map_editable-zoom" />
  <!-- END index_map_lat:empty -->
  <input type="hidden" name="field[]" value="index_map_lat" />
  <input type="hidden" name="field[]" value="index_map_lng" />
  <input type="hidden" name="field[]" value="index_map_zoom" />
  </td>
</tr>
</table>

ソースコード:MarkerClustererを動かすためのJavaScript(ここではHTMLファイルとして使用します。例:map.html)

<script type="text/javascript">
  var map = null;
  var markerclusterer = null;
  var infowindow = new google.maps.InfoWindow();
  var gmarkers = []; 
  // マーカーの作成と、吹き出しの作成
  function createMarker(latlng, info) {
    var marker = new google.maps.Marker({
      position: latlng,
      map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(info); 
      infowindow.open(map,marker);
    });
    // 情報を保存
    gmarkers.push(marker);
  }
  // クリックイベントを作成する
  function myclick(i) {
    google.maps.event.trigger(gmarkers[i], "click");
  }
  function initialize() {
    // 全体の地図を作成
    <!-- BEGIN_MODULE Category_Field -->
    var myOptions = \{
      zoom: {index_map_zoom},
      center: new google.maps.LatLng({index_map_lat},{index_map_lng}),
      mapTypeControl: true,
      navigationControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    \}<!-- END_MODULE Category_Field -->
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    google.maps.event.addListener(map, 'click', function() {
      infowindow.close();
    });
    // 場所・吹き出しの情報を定義
    var markers = [
    <!-- BEGIN_MODULE Unit_List id="map" --><!-- BEGIN unit:loop -->
      ["{entry_title}", {unit_field_2},{unit_field_3},"{entry_url}"],<!-- END unit:loop -->[]<!-- END_MODULE Unit_List -->
    ];
    // 吹き出しに入れる要素
    for (var i = 0; i < markers.length; i++) {
      var point = new google.maps.LatLng( markers[i][1],  markers[i][2]);
      var marker = createMarker( point, "<div class='scrollFix'><p class='mapEntryTitle'>" + markers[i][0] + "</p> " + "<p class='mapDetailInfo'>緯度: " + markers[i][1] + "<br> 経度: "  +  markers[i][2] + "</p><p class='mapLinkText'><a href='"+ markers[i][3] +"'>詳しく見る</a></p>" + " </div>") ;
    }
    markers.pop();
    // 地図を表示
    markerCluster = new MarkerClusterer(map, gmarkers);
  }
  window.addEventListener('load', initialize);
</script>

注意点

  • 「MarkerClustererを動かすためのJavaScript」のソースコードは、全てJavaScriptで書かれていますが a-blog cms のモジュールを使っているためHTMLファイル内に記述します
  • 25行目ではCategory_Fieldを使用していますが、もし「地図の基準にしたい緯度経度の情報を登録するためのカスタムフィールド」をカテゴリー以外のカスタムフィールドとして設置した場合、対応するフィールドモジュールに置き換えます

モジュールIDの設定

モジュールID名「map」というUnit_Listのモジュールを作ります。


ユニットタイプの「地図」がチェックされていることを確認してください。

そのほかの設定については、必要に応じて有効にしてください。

エントリーを投稿する

目標


サイト内に「スタッフ紹介」という新しいコンテンツを用意し、「スタッフ1」というエントリーを投稿しましょう。


解説使用テーマbeginner

Before

After

使用素材について

チュートリアルの課題で使用する画像は、下のzipファイルよりダウンロードしてご利用ください。


ファイルを開く

チュートリアル課題用画像

目次

  1. 新規作成するエントリーのURLについて
  2. ユニットを組み立てて本文を入力する
  3. ダイレクト編集を活用しよう
  4. ユニット設定でユニットを使いやすくしよう
  5. 編集設定から YouTube ユニットを追加しよう

新規作成するエントリーのURLについて


a-blog cmsでは、各ページにおいて以下のようにURLを定めています。


トップページhttps://example.com/
一覧ページhttps://example.com/ブログコード/カテゴリーコード/
詳細ページhttps://example.com/ブログコード/カテゴリーコード/エントリーファイル名

URL内のブログコードやカテゴリーコード、エントリーファイル名(エントリーコード)には、それぞれ任意の英数字を設定できます。今回のハンズオンでは、「スタッフ紹介」カテゴリーを作成し、作成したカテゴリー内に「スタッフ1」エントリーを作成します。その際、「スタッフ紹介」のカテゴリーコードを staff 、「スタッフ1」エントリーのエントリーファイル名を staff1.html とします。したがって、新規作成するエントリーのURLは https://example.com/staff/staff1.html となります。


新規作成するエントリーの基本設定をする


エントリーの新規作成は管理ボックス内にある [エントリー作成] ボタンから行います。



エントリー作成画面が開いたら、はじめに基本設定を行います。まずはエントリーのステータスとタイトルを設定しましょう。


ステータス公開
タイトルスタッフ1


次にカテゴリーを指定します。今回作成するのは「スタッフ紹介」という新しいコンテンツなので、[追加] をクリックしてカテゴリー名とカテゴリーのコードネームを設定します。


カテゴリー名スタッフ紹介
コードネームstaff

カテゴリー名とコードネーム

最後にタグを指定します。今回は「営業」「男性」という2つの単語をタグ付けしてみましょう。タグの新規追加は直接入力欄に書き加えます。半角のコンマで区切ることで2つ以上の単語を指定することもできます。



これで基本設定は完了です。次は日付以下のタブを開いて、詳細設定・関連エントリー設定・SEO設定の項目について見ていきます。


詳細設定



詳細設定欄からは、エントリー毎にURLに表示するエントリーファイル名(エントリーコード)「任意の英数字.html」を指定することができます。今回のハンズオンでは staff1.html と設定します。


ファイル名staff1.html

以上の作業をもってエントリーのURLを https://example.com/staff/staff1.html に設定することができました。


今回のチュートリアルでの設定は以上になりますが、その他にも詳細設定画面からは、公開日時・掲載期限・概要・インデキシング・リンク先URLの設定ができます。


公開日時あらかじめ設定した時間になると記事が自動的に公開されます
掲載期限あらかじめ設定した時間になると記事が自動的に非公開になります
概要一覧ページで表示する本文の範囲を決めることができます
インデキシングチェックを外すと一覧ページにエントリーがリストされない設定になります
リンク先URL別のページのリンク先を設定することで、エントリーにアクセスがあった際に対象のページへ誘導することができます

関連エントリー設定


関連エントリー設定

その記事に関連するエントリーを検索し、関連するエントリーとして指定することができます。ブログやお知らせの記事など、主に更新頻度が比較的高いコンテンツで活用できる機能です。


SEO設定



a-blog cmsでは、SEO設定欄を入力しなくてもエントリーの作成と同時にタイトルや概要文などのSEO項目が自動的に設定されます。このSEO設定欄は、自動入力される文章と異なるものを設定したい時やサイトマップへの出力を制御する時などに使用するものです。


ユニットを組み立てて本文を入力する


基本設定が完了したら本文を入力していきましょう。a-blog cmsでは「ユニット」を組み立てることによって、コンテンツを充実させていきます。


ユニット
エントリー内には、テキストや画像など様々なコンテンツが含まれています。a-blog cmsでは、こういったコンテンツの要素を「テキストユニット」「画像・ファイルユニット」など、「ユニット」というブロックで管理しています。テーマ「beginner2020」の初期設定では、テキスト、画像・ファイル、テーブル、地図の計4つのユニット追加ボタンが並んでいます。

ユニット

下の図は、「画像・ファイルユニット」「テーブルユニット」「テキストユニット」を使ってコンテンツを組み立てた例です。例のようにユニットを挿入してみましょう。



ユニットを追加するには?


ユニットは下の画像の 3 にある灰色のボックス(以下ユニット追加ボックスと呼びます)内に並ぶボタンをクリックして追加します。ユニットはユニット追加ボックスの直前に追加されます。ユニット追加ボックスは、デフォルトでは編集ページの一番下に配置されていますが下記3通りの方法で移動させることができます。


  1. ユニット右上にある [+] ボタンをクリックすると、そのユニットの直後に移動
  2. ユニットのヘッダーをダブルクリックすると、そのユニットの直後に移動
  3. ユニット追加ボックス左上の三本線をマウスオーバーしてボックスを掴み、入れ替えたい位置までドラックし移動


ユニットを並び替えるには?


ユニットを並び替えるには、ユニット左上の三本線をマウスオーバーしてボックスを掴み、入れ替えたい位置までドラックします。または、三本線横の番号を変更することでユニットの並び順を変更します。



ユニットを組み合わせて記事を完成させたら、保存ボタンを押して公開します。



以上でチュートリアルの目標が達成できました。


ここからは補足として、エントリー編集時に役立つ「ダイレクト編集」と「ユニット設定」、そして新しいユニットを追加する「編集設定」の機能をご紹介します。


ダイレクト編集を活用しよう


ダイレクト編集
公開画面側から直感的にユニットを編集する機能です。エントリーページを表示した状態で管理ボックスの [ダイレクト編集をONにする] ボタンをクリックすると有効になります。また [ダイレクト編集をOFFにする] の状態でクリックするとダイレクト編集は無効になります。



ダイレクト編集を有効にしている時にユニットをマウスオーバーすると、編集・追加・複製・移動・削除の5つのボタンが表示されます。ここからの変更は表示画面に即座に反映されるため、エントリー編集画面を開く必要はありません。


ユニット設定でユニットを使いやすくしよう


ユニット設定画面では、表示するユニットの初期状態を変更することができます。まず以下の手順で設定画面へ移動しましょう。


  1. 管理ボックスの [管理ページ] をクリック
  2. サイドメニュー内 [コンフィグ] > セット名"デフォルト"の[コンフィグ] をクリック
  3. エントリー内 [ユニット設定] をクリック


例えば画像ユニットのデフォルトの配置は「おまかせ」となっていますが、これを「左」に変更したい場合は、このユニット設定画面から任意の項目を選択することで仕様を切り替えることができます。

特に画像の大きさは、サイトのパフォーマンスにも関わる大事な項目です。デフォルトでは「そのまま」となっていますが、ユニット設定であらかじめ大きさを指定しておきましょう。


編集設定から YouTube ユニットを追加しよう


a-blog cms では、デフォルトで以下のユニットを用意しています。

  • テキストユニット
  • 画像ユニット
  • テーブルユニット
  • ファイルユニット
  • 標準マップユニット
  • Googleマップユニット
  • Yahoo!地図ユニット
  • ビデオユニット
  • 画像URLユニット
  • 引用ユニット
  • メディアユニット
  • リッチエディター
  • 改ページユニット
  • モジュールユニット
  • カスタムユニット

しかし現時点では、以下のユニットしか使えません。



このボックスに表示されていないデフォルトのユニットについては、編集設定画面より追加することができます。例として、「YouTube」と名付けたビデオユニットを設置してみましょう。

まずは以下の手順で編集設定画面へ移動します。

  1. 管理ボックスの [管理ページ] をクリック
  2. サイドメニュー内 [コンフィグ] > セット名"デフォルト"の[コンフィグ] をクリック
  3. エントリー内 [編集設定] をクリック


編集設定画面の「ユニット追加ボタン」内 [追加] ボタンをクリックし、モードを「ビデオ」ラベルを「YouTube」として保存します。



画面上部の「保存」ボタンを押して保存してください。 これで設定は完了です。試しにエントリー作成画面を表示すると、「製品スペック」の右側に「YouTube」のボタンが追加されていることがわかります。またこのボタンをクリックすると、a-blog cms が用意しているビデオユニットが表示されます。



動画を挿入するには、このユニットの「Video ID」で動画のIDを、「サイズ」で表示サイズを指定します。

以上でエントリー内にYouTubeの動画が表示できました。今回は YouTube を挿入する想定でラベルを設定しましたが、ビデオユニットでは Video ID が作成できる動画コンテンツであれば動画が指定できるようになっています。他にもデフォルトで様々なユニットを用意していますので、必要に応じてカスタマイズしてみてくださいね。