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のモジュールを作ります。


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

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

Mautic と a-blog cms の連携についての実装

2015年くらいから a-blog cms のサイト上で Mixpanel を利用していることもあり、勉強会で何度か紹介をしてきましたが、この秋くらいからオープンソースの Mautic の注目度が上がってきています。

そこで、今回は a-blog cms site2016 のテーマに実装する方法を紹介します。お問い合わせフォームを使いますので、SMTP等の設定が必要です。したがって、このハンズオンは自分のブログや自社サイト等でお試しいただくことをお勧めします。

1. Mautic のユーザー登録をする

Mautic Cloud Free であれば無料で利用が可能です。

Mautic Cloud Free を申し込む

2. 全てのページに以下のタグを追加する

テスト環境か、ご自身のサイトに以下のようなタグを </ body> の前に追加します。

<script>
(function(w,d,t,u,n,a,m){w['MauticTrackingObject']=n;
    w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},a=d.createElement(t),
    m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://@@server@@.mautic.net/mtc.js','mt');
mt('send', 'pageview');
</script>

3. contact のページのみ タグを改良する

thanks.html の記述のみ以下のようにカスタマイズします。

<script>
(function(w,d,t,u,n,a,m){w['MauticTrackingObject']=n;
    w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},a=d.createElement(t),
    m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://@@server@@.mautic.net/mtc.js','mt');
mt('send', 'pageview'<!-- BEGIN_MODULE Form --><!-- BEGIN step#result -->, {
    'email': '{email}',
    'firstname': '{name}[split(" ",1)]',
    'lastname': '{name}[split(" ",0)]',
    'zipcode': '{postal-code}',
    'state': '{address-level1}[ken]',
    'city': '',
    'address1': '{address}[split("\n",0)|delnl]',
    'address2': '{address}[split("\n",1)|delnl]',
    'phone': '{tel}',
    'company': '{organization}',
    'contactdate': '%{NOW_DATE}',
    'contacttitle': '{description}',
    'contactinquiry': '{inquiry}[delnl]'
    }
<!-- END step#result --><!-- END_MODULE Form -->);
</script>

4. 校正オプションを追加します

都道府県が a-blog cms site2016 では、日本語で保存されていますが、Mautic ではアルファベットになっています。この部分を変換する校正オプションを作ってみましょう。

/php/ACMS/User/Corrector.php に以下を追加します。

    public static function ken($txt)
    {
        $ken['北海道'] = "Hokkaido";
        $ken['青森県'] = "Aomori";
        $ken['岩手県'] = "Iwate";
        $ken['宮城県'] = "Miyagi";
        $ken['秋田県'] = "Akita";
        $ken['山形県'] = "Yamagata";
        $ken['福島県'] = "Fukushima";
        $ken['茨城県'] = "Ibaraki";
        $ken['栃木県'] = "Tochigi";
        $ken['群馬県'] = "Gunma";
        $ken['埼玉県'] = "Saitama";
        $ken['千葉県'] = "Chiba";
        $ken['東京都'] = "Tokyo";
        $ken['神奈川県'] = "Kanagawa";
        $ken['新潟県'] = "Niigata";
        $ken['富山県'] = "Toyama";
        $ken['福井県'] = "Fukui";
        $ken['山梨県'] = "Yamanashi";
        $ken['長野県'] = "Nagano";
        $ken['岐阜県'] = "Gifu";
        $ken['静岡県'] = "Shizuoka";
        $ken['愛知県'] = "Aichi";
        $ken['三重県'] = "Mie";
        $ken['滋賀県'] = "Shiga";
        $ken['京都府'] = "Kyoto";
        $ken['大阪府'] = "Osaka";
        $ken['兵庫県'] = "Hyogo";
        $ken['奈良県'] = "Nara";
        $ken['和歌山県'] = "Wakayama";
        $ken['鳥取県'] = "Tottori";
        $ken['島根県'] = "Simane";
        $ken['岡山県'] = "Okayama";
        $ken['広島県'] = "Hiroshima";
        $ken['山口県'] = "Yamaguchi";
        $ken['徳島県'] = "Tokushima";
        $ken['香川県'] = "Kagawa";
        $ken['愛媛県'] = "Ehime";
        $ken['高知県'] = "Kochi";
        $ken['福岡県'] = "Fukuoka";
        $ken['佐賀県'] = "Saga";
        $ken['長崎県'] = "Nagasaki";
        $ken['熊本県'] = "Kumamoto";
        $ken['大分県'] = "Oita";
        $ken['宮崎県'] = "Miyazaki";
        $ken['鹿児島県'] = "Kagoshima";
        $ken['沖縄県'] = "Okinawa";

        return $ken[$txt];
    }

5. 日本語化しましょう


ログインすると初期段階では画面は英語で表示されます。


画面の右上の歯車アイコンをクリックすると「Congifguration」という項目があります。クリックして設定を変更しましょう。


以下の2つを変更してください。そして、一度ログアウトしてから、再度ログインしてみてください。これで画面が日本語化されます。

6. Mautic のカスタムフィールドの設定を変更する

画面の右上の歯車アイコンをクリックすると「カスタムフィールド」という項目があります。ここから上記のサイトからの情報で上書きしていい項目について「パブリックに変更可能」を(はい)に設定してください。

3. の thanks.html で追加した項目が対象です。 この作業をしないとデータが書き込まれませんので、注意してください。


7. あとは Mautic で何ができるのかを勉強しましょう

連携部分は、これで作業完了になります。 あとの活用については、皆さん次第です。

a-blog cms Ver. 2.8.0 の 新機能 & 変更点

Ver. 2.8.0 管理画面

Ver. 2.8.0 管理画面


いつもお世話になっております。開発の伊藤です。

今回は Ver. 2.8.0 リリースまでもう少し!という事で、Ver. 2.8.0 の新機能 & 変更点についてまとめてみたいと思います。 最後に変更点一覧を乗せてあります。

対応PHPを変更

Ver. 2.8 より下記のパッケージになり、php7.2まで対応できるようになります。

  • php5.3.3 - php5.5.x
  • php5.6 - php7.0.x
  • php7.1 - php7.2.x

CMS-1877 管理画面からのシステムアップデート機能を追加

Ver. 2.7 で導入したセマンティックバージョニングや様々な自動化により、不具合修正などのパッチバージョンをスムーズにリリース出来るようになりました。ただそれに伴いバージョンアップが大変になりました。そこで管理画面からのアップデートを使うことにより、楽にシステム更新が出来るようになります。

オプション

管理画面 > コンフィグ > 機能設定 の 「オンラインアップデート」にオプションがあります。

  • パッチバージョンのみ(デフォルト)
  • マイナーバージョンも含める
  • 更新メニューを非表示

「デフォルトのパッチバージョンのみ」は不具合修正のバージョンのみアップデートを行います。仕様変更などは含まれませんので、安心してアップデートできます。「マイナーバージョンも含める」は、2.8 から 2.9 へのアップデートのようにマイナーバージョンアップの更新も出来るようになります。「更新メニューを非表示」は管理メニューに更新メニューを出さないようにします。お客様に引き渡す時に、あまり触ってほしくない場合などに便利です。

CMS-3916 クイックサーチ機能を追加(Ctrl+k, ⌘K)

ログインしていると以下のようなポップアップが現れ、キーワード検索で色々な情報にアクセス出来るようになりました。


クリックサーチ

クリックサーチ


アクセス出来る情報

  • ブログ
  • エントリー
  • カテゴリー
  • モジュールID
  • 管理画面メニュー
  • ショットーカット(登録されているもの)
  • モジュール変数表
  • モジュールスニペット

ショートカットキー

  • Windows: Ctrl + k
  • MacOS: ⌘K

モード

フリーキーワードで検索はそのまま、キーワードを入力すればいいですが、そのほかに2つのモードが用意されています。

  • 変数表検索モード: キーワードの最初に :(コロン) を入力することにより、変数表を検索できるようになります。
  • スニペット検索モード キーワードの最初に ;(セミコロン) を入力することにより、スニペットを検索できるようになります。

CMS-3795 Lite Editorを導入

テキストユニットの標準に導入されるエディターが「Lite Editor」になりました。下のように以前は「リンク挿入」などをクリックすると直接HTMLが挿入されていましたが、新しいエディターでは実際にどのように表示されるか視覚的にわかりやすくなりました。


以前のテキストユニット


新しいテキストユニット


CMS-3875 引数対応の@include 構文を追加

インクルード文を新しい書き方で書くことができるようになりました。

以前の書き方

<!-- include file="/path/to/file" -->

新しい書き方

@include("/path/to/file")

もちろん Ver. 2.8 でも以前の書き方のインクルードは動くようになっていますので、バージョンアップしても大丈夫です。

新しいインクルード文の機能

以前のインクルードはただファイルを読み込んでくるだけでしたが、新しいインクルード文には、変数を読み込み先テンプレートに渡せる機能が追加されています。

読み込み元

@include("/path/to/file", {"key": "value", "key2": "value2"})

読み込み先

<p>{{key}}</p>
<p>{{key2}}</p>

変数の渡し方は、@include()の第2引数に、JSON形式で渡します。変数の使い方は、通常の変数と違い2重の中括弧で囲むことで表示できるようになります。

CMS-3806 テンプレートの継承機能を追加

テンプレートを継承できる機能が追加されました。今までは、テンプレートをインクルードする事でテンプレートファイルを分割していましたが、この継承機能と組み合わせる事で、テーマをわかりやすく、シンプルに管理しやすくできます。

使用例

@section(header)  
  <header>...省略</header>
@endsection  

@section(main)  
   <h2>継承元のコンテンツ</h2>  
@endsection

@section 要素

ポイントは @section(セクション名)@endsection で 囲んだブロックが継承できる範囲になります。 継承しそうなところを @section で囲みます。

@extend要素

@extend要素を使うことで、テンプレートを継承することが出来ます。
上記のテンプレートを継承してみます。

@extend(/layout/base.html)

@section(main)
<h2>継承したメインのコンテンツ</h2>
@endsection

表示されるHTML

<header>...省略</header>

<h2>継承したメインのコンテンツ</h2>

どうでしょうか? 継承したテンプレートでは、メインのコンテンツしか記述していないのに、最終的に表示されるHTMLには継承元の情報も出力され、書き換えたいところだけ書き換えることが出来ました。

継承は、何回でも検証できますので、継承したテンプレートをさらに別テンプレートで継承するといった使い方もできます。

親テンプレートの利用

@section を使う事で、親テンプレートの要素を書き換える事ができるようになりましたが、全て置き換えてしまうので不便な場合があります。例えばJavaScriptの読み込みなどです。

全体で利用するJavaScriptは親テンプレートで読み込んでおきますが、継承したテンプレートのみでしか使わないJavaScriptを読み込みたい場合などがあります。

親テンプレート

@section(head-js)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js" charset="UTF-8"></script>
@endsection

子テンプレート

@section(head-js)
@parent <!-- ここに親の@section(head-js)内が挿入される -->
<script src="/js/example.js" charset="UTF-8"></script>
@endsection

@parent 要素

上記のように @parent要素を @section内で使うことにより、親テンプレートを参照できるようになります。更に親のテンプレートを参照する場合は、@@parent のように @の数を増やすことで可能です。

テンプレートの継承機能を使ってテーマを作ると、テンプレートを複数のレイヤーに分けることができ、変更箇所のみテンプレートに書けばいいので、シンプルで分かりやすく、共通箇所も共有できるので、保守しやすテンプレートになると思います。

CMS-3775 モジュールのエスケープ機能 & モジュールに外部コンテキスト挿入機能を追加

モジュールの外部コンテキスト挿入機能

モジュールの呼び出しに新しい機能が追加されました。今までは、モジュールで表示する情報を制御するには、モジュールIDを作り管理画面で絞り込む情報を入力していたのですが、テンプレート側でも指定可能になりました。

<!-- BEGIN_MODULE Entry_List ctx="bid/1/cid/2" -->
...省略
<!-- END_MODULE Entry_List -->

上記のように とすることで、モジュールのURLコンテキストを指定できます。 指定の仕方はURLコンテキストと同じで、 bid/1/cid/2/eid/3 のように指定できます。

有効なコンテキスト

  • bid
  • cid
  • eid
  • uid
  • page
  • keyword
  • tag
  • field
  • order
  • start
  • end

モジュールID設定との優先度

もちろん id="" をつけてモジュールID化したものに設定することも可能です。ただモジュールIDでもURLコンテキストの設定が可能なのでバッティングしてしまいます。なので設定の優先度が存在しますのでご注意ください。

基本的にはモジュールIDの設定が優先されると考えていただければ大丈夫です。

コンテキストの優先度

  1. URLコンテキストのチェックが入っており、該当のコンテキストが存在するページである場合のURLコンテキスト
  2. モジュールIDの引数に設定した固定値
  3. テンプレートで設定したctx

以上より、モジュールIDが設定されている場合は、チェックが入っていない & 固定値がないコンテキストと、チェックが入っていても、そのページのURLコンテキストがない場合に、テンプレートのコンテキストが使用されます。

モジュールのエスケープ機能

以前までは、モジュール内のブロック(など)や 変数({url}など)はバックスラッシュをつけることにより、エスケープが可能でした。

<!-- BEGIN\ entry:loop -->
\{url\}
<!-- END\ entry:loop -->

これに加え、Ver. 2.8 より モジュール自体のエスケープも可能になりました。モジュールが入れ子の場合は通常内側から実行されますのが、モジュールのエスケープを使うことにより、外側のモジュールから実行させることができるようになります。

このモジュールのエスケープと先ほどのテンプレートからのコンテキスト指定を組み合わせることで、今まで出来なかったことができるようになります。例えば、Blog_ChildList と Entry_List を組み合わせて、 ブログ毎にエントリー一覧を出力するようなことが出来ます。サイトマップなども作れると思います。

<!-- BEGIN_MODULE Blog_ChildList -->
<ul class="acms-list-group">
	<!-- BEGIN blog:loop -->
	<li>
		<a href="{url}" class="acms-list-group-item">ブログ: {name}</a>
		<!-- BEGIN_MODULE\ Entry_List ctx="bid/{id}" -->
		<div class="acms-margin-bottom-medium">
			<ul class="acms-list-group">
				<!-- BEGIN\ entry:loop -->
				<li><a href="\{url\}" class="acms-list-group-item">\{title\}</a></li>
				<!-- END\ entry:loop -->
			</ul>
		</div>
		<!-- END_MODULE\ Entry_List -->
	</li>
	<!-- END blog:loop -->
</ul>
<!-- END_MODULE Blog_ChildList -->

CMS-3801 画像のロスレス圧縮対応

画像のロスレス圧縮に対応できるようになりました。画像サイズが小さくなり、Google の PageSpeed Insights などの点数も上がりパフォーマンスがよくなります。

必要なソフト

ただ、サーバーに下記の画像圧縮ライブラリが必要になります。入っているソフトによって対応できるフォーマットが増減します。

  • pngquant
  • optipng
  • pngcrush
  • pngout
  • advpng,
  • pegtran
  • jpegoptim
  • gifsicle

確認方法

CMSでロスレス圧縮が可能かどうかは、管理画面 > チェックリスト の 「ロスレス圧縮対応フォーマット 」で確認することができます。

CMS-3858 デフォルトのコンフィグのみのエクスポート機能を追加

Ver. 2.7 ではコンフィグのエクスポートはルール、モジュール、コンフィグの全てをブログ単位で一括エクスポート・インポートでしたが、ブログ作成時のデフォルト値を作るのに、これでは作成できませんでした。

そこで、デフォルトのコンフィグのみをエクスポート・インポート出来るようにしました。ここで書き出したyamlを private/config.system.yaml に記述すると、新規ブログ作成時に、エクスポートした設定が新しいブログの初期状態として反映されるようになります。

CMS-3943 コンフィグの部分インポート機能を追加

部分的なコンフィグのエクスポート・インポートが可能になりました。例えば、コンフィグの編集設定は設定項目も多く、インポートで対応したいが、他のテーマなどの設定も変わってしまいます。そこで、この部分インポートを使うと、他のコンフィグに影響なく、部分的にインポート出来るので便利です。

エクスポート方法

エクスポートしたい、各コンフィグのページに移動します。例えば、編集設定ページなど。移動すると右上にエクスポートボタンがあるので、ここをクリックするとyamlデータとしてエクスポートされます。


コンフィグの部分エクスポート

コンフィグの部分エクスポート


また、ルール適応状態のコンフィグもエクスポート・インポートできます。

インポート方法

コンフィグの部分インポートは、エクスポートと同じく、コンフィグの各ページの右上の「インポート」ボタンから移動するか、管理ページ > コンフィグ > 「コンフィグの部分インポート」から移動できます。

ここでインポートすることにより、yamlにはない情報は削除せずに、yamlにある情報だけ上書きして部分的に書き換えます。


コンフィグの部分インポート

コンフィグの部分インポート


CMS-3872 OGPモジュールの新規追加

今までは、既存モジュールを使い、複雑なテンプレート(大量のIF分岐)で OGPのタイトルや画像の出力に対応していましたが、使いづらく、また多くのモジュールを組み合わせて出力していましたので、パフォーマンスが悪かったです。

そこで、Ver. 2.8 でOGPモジュールを追加し、一つのモジュールでシンプルなテンプレートでOGPの情報を出力できるようにしました。モジュール設定で、適応するフィールド名が設定できたり、タイトルの順番やフォーマットが指定できるようになっています。


Ogpモジュール設定

Ogpモジュール設定


CMS-3842 パスワードポリシーを導入 & 記号を使えるように改修

CMSのパスワードに記号が使えなかったのを使えるようにしました。また、機能設定にパスワードポリシー設定を設け、パスワードポリシー条件に満たないパスワードは設定できないようにしました。

設定できる条件

  • 最小文字数
  • 最大文字数
  • 大文字を1つ以上含める
  • 小文字を1つ以上含める
  • 数値を1つ以上含める
  • 記号を1つ以上含める
  • 大文字、小文字、数値、記号のうち、3種類を含む
  • 禁止ワード

パスワードポリシー設定

パスワードポリシー設定


CMS-3907 ユーザーパスワードの強度確認機能を追加

ユーザーのパスワード設定画面で、パスワード強度を視覚的に分かりやすくする機能を追加しました。パスワードが短かったり、使われている文字の種類が少なかったり、推測されやすいパスワード(P@ssW0rdなど)を危険と判断して教えてくれます。


危険なパスワード

危険なパスワード


不安なパスワード

不安なパスワード


注意が必要なパスワード

注意が必要なパスワード


妥当なパスワード

妥当なパスワード


安全なパスワード

安全なパスワード


CMS-3446 [プロ版機能] 静的書き出し機能を追加

以前まではテンプレートを指定した部分的な静的(HTML)書き出しはあったのですが、 サイト全体を書き出すことは出来ませんでした。

しかしセキュリティやパフォーマンスを気にされる方や、静的HTMLでしか運用されないお客様などから 度々要望に上がっており、今回のVer. 2.8からプロフェッショナル版以上になりますが対応ができるようになりました。


静的書き出し

静的書き出し


基本仕様

  • ブログ単位による書き出し
  • バッググラウンドでの書き出し(並列処理)
  • パスの書き換え(テンプレート、CSSにあるパスとドメインを設定に沿って書き換えます)

書き出し範囲

  • ブログトップ
  • カテゴリートップ
  • カテゴリー一覧
  • エントリー詳細
  • カテゴリー一覧の2ページ以降
  • カテゴリーのアーカイブ(年月)一覧

変更されるURL

ページのURLが変更されます。

  • CMSで表示 -> /page/2/
  • 静的表示 -> /page2.html

ブログ単位で書き出せるので、あまり変更の無いブログは静的書き出しを行うのもいいと思います。


機能追加一覧

  • CMS-1877 管理画面からのシステムアップデート機能を追加
  • CMS-3693 管理画面からデータベースのアップデートができる仕組みを導入
  • CMS-3875 引数対応の@include 構文を追加
  • CMS-3806 テンプレートの継承機能を追加
  • CMS-3775 モジュールのエスケープ機能 & モジュールに外部コンテキスト挿入機能を追加
  • CMS-3916 クイックサーチ機能を追加(Ctrl+k, ⌘K)
  • CMS-3801 画像のロスレス圧縮対応(pngquant, optipng, pngcrush, pngout, advpng, jpegtran, jpegoptim, gifsicle)
  • CMS-3807 SmartPhotoを導入
  • CMS-3795 Lite Editorを導入
  • CMS-3858 デフォルトのコンフィグのみのエクスポート機能を追加
  • CMS-3872 OGPモジュールの新規追加
  • CMS-3842 パスワードポリシーを導入 & 記号を使えるように改修
  • CMS-3943 コンフィグの部分インポート機能を追加
  • CMS-3609 Google reCAPTCHA 拡張アプリを追加
  • CMS-3907 ユーザーパスワードの強度確認機能を追加

変更点一覧

  • php5.3.3 〜 php7.2.x 対応
  • 管理画面の刷新
  • 各テーマを2018仕様に変更
  • CMS-3668 組み込みJSのバンドル整備
  • CMS-3715 DBのException発行でエラーが出ていた問題を修正
  • CMS-3803 ナビゲーションモジュールのUIを刷新
  • CMS-3815 SMTP設定のオプションを増強
  • CMS-3821 管理画面のiPhone X 対応
  • CMS-3853 JSファイル読み込み時のイベントを追加
  • CMS-3850 ファイルアップロード時に同名ファイルがあった場合の対応を追加
  • CMS-3856 バージョンアップ時にconfig.system.yamlのキャッシュクリアを実行
  • CMS-3846 エントリーのソート順に作成日、更新日を追加
  • CMS-3860 バックアップファイルがない場合、リストアボタンを押せないように修正
  • CMS-3836 POSTデータが全て送信されたかチェックするように改良
  • CMS-3840 メディアで許可拡張子に画像拡張子がある時に画像がファイルとして扱われる問題を修正
  • CMS-3847 OpenGraphをcomposerから読むように変更
  • CMS-3841 メールのバックグラウンド送信するオプションを用意(send_email_asynchronous)
  • CMS-3866 画像ユニットでaタグ内にcaptionがある場合リンクがおかしくなる問題を修正
  • CMS-3787 非公開などの記事をログイン中でも見せないオプションを用意(subscriber_view_mode)
  • CMS-3867 Entry_Bodyの続きをよむ場所を強制するオプションを追加(Entry_Body内コンフィグ)
  • CMS-3869 ドロップエリア以外をドロップできないように修正
  • CMS-3870 htaccessのCMS管理以外のディレクトリ設定記述を調整
  • CMS-3776 読者ユーザーの場合は、同時ログインを有効に変更
  • CMS-3370 ゴミ箱で削除した順でソートできるように改良
  • CMS-3873 Entry_BodyのadminEntryTitleが表示されない問題を修正
  • CMS-3879 DEBUG_MODEのスタック表示をフルで表示するように修正
  • CMS-3864 Bootstrap2018テーマのBootstrapのバージョンをアップ
  • CMS-3878 Safariでポップアップが重い問題を解決
  • CMS-3882 バナーモジュールの初期ステータスを公開に変更
  • CMS-3887 カスタムフィールドメーカーを新しいものに刷新
  • CMS-3890 LiteEditorをカスタムフィールドで使えるように改良
  • CMS-3900 基本情報 -> 基本設定にカスタム情報をカスタム設定に変更
  • CMS-3902 themesとprivateのhtaccessで403から404を返すように修正
  • CMS-3817 カスタムフィールドソートの対象をモジュールで指定できるように改良(サマリー系モジュール)
  • CMS-3893 セレクトボックスのUI改善
  • CMS-3892 zIndex function を使った 全体的なz-indexの見直し
  • CMS-3906 カスタムフィールドメーカーでカスタムユニットに対してチェックボックスのソースを生成できるようにする
  • CMS-3901 エントリ一覧でカテゴリーの親子関係で絞り込みを制御できるように変更
  • CMS-3921 テキストユニット追加時のfocus処理及びVoice Over読み上げ
  • CMS-3922 画像ユニットのファイル選択ボタンのfocus時にスタイルを付与
  • CMS-3910 違うBIDへのブログインポートでカスタムユニットの画像がリンク切れになる問題を修正
  • CMS-3931 Unit_Listでフィールドで絞り込めるように修正
  • CMS-3930 モジュールユニットで選択なしの場合にメッセージを追加
  • CMS-3929 ツールチップのリファクタリング
  • CMS-3926 保存時のsplashが余分な場所で表示されてしまう問題を修正
  • CMS-3941 WordPressインポートで不正文字があるとエラーが出る問題を修正
  • CMS-3945 カスタムユニットで複数のフィールドグループが使えるように修正

ランディングページテーマ(lp@site2018)の使い方


Ver.2.8.0より、あたらしくランディングページテーマ(lp@site2018)を追加しました。

ランディングページテーマの大きな特徴としては、以下の3つです。

  • ランディングページでよく使いそうな拡張ユニットを数多く用意していること
  • 背景色別ユニットグループの実装
  • カスタムユニットのフィールドグループのサンプルを同梱

ランディングページや1カラムのテンプレートを作成する際に、カスタマイズのベースとしてご活用ください。

それでは、実際の使い方について解説します。


インストールデータをインポートする

ランディングページテーマは、CMSをインストールした際に選択できないようになっています。ですが、機能を把握するためにもデータがないと困るかと思いますので、外部URLでインストールデータを用意しております。以下、インストールデータをインポートする手順になります。

  1. このテーマのインストールデータですが、インストーラーには用意していません。こちらのリンクより、インストールデータをダウンロードしてください。
  2. このテーマはsite2018の子ブログとして作られることを前提にデータを作っています。 site2018をインストールしたブログに子ブログを作り、1でダウンロードしたファイルを/private/import/フォルダにzipファイルのまま設置してください。
  3. 管理画面>ブログの順に移動し、エクスポート・インポートタブをクリックします
  4. /private/import/フォルダに設置したファイルをセレクトメニューから選択してインポートしてください。
  5. 管理画面左のバーに設置されている「サイトを表示」ボタンからサイトを表示して、データが入っているを確認してください。

テーマについて

このテーマは、site2018テーマを継承したテーマです。lp@site2018を使用する際は、themesフォルダからsite2018を削除しないでください。

テーマの継承については詳しくは以下のドキュメントをご覧ください。

テーマフォルダ直下のテンプレート

entry.html

詳細ページのテンプレートです。

template.yaml

lp@site2018テーマを選択したときに、テンプレートをまとめて設定できるファイルです。使用するかどうかは管理画面>コンフィグ>テーマ設定 にて変更できます。

thanks.html

ユニットで挿入できるフォームの終了画面です。

フォルダ構成

admin

lp@site2018テーマオリジナルの管理画面のテンプレートが入ったフォルダ。 lp@site2018テーマでは主に以下のテンプレートが入っています。

  • カスタムフィールド(エントリー)
  • 拡張ユニット

css

lp@site2018テーマで使っているCSSが入ったフォルダです。

form

カスタムユニット「フォーム」で使用するフォルダです。

images

lp@site2018テーマで使っている画像が入ったフォルダです

include

lp@site2018テーマ内のインクルードしているテンプレートをまとめたフォルダです。

js

lp@site2018テーマで使っているJavaScriptが入ったフォルダです。

scss

lp@site2018テーマで使っているSCSSファイルが入っているフォルダです。 このscssフォルダに入っているSCSSファイルをコンパイルしてCSSを出力しています。

a-blog cmsの基本機能

カスタムフィールド

ブログ

  • サイトの設定(site2018からの継承)
  • SEOの設定(site2018からの継承)
  • OGPの設定(site2018からの継承)
  • 会社情報(site2018からの継承)
  • SNSアカウントの情報(site2018からの継承)
  • scriptタグ(site2018からの継承)
  • アクセス解析(site2018からの継承)
  • Search Console(site2018からの継承)

カテゴリー

  • SEOの設定(site2018からの継承)
  • ページタイトルの設定(site2018からの継承)

エントリー

  • 表示設定
  • 色の設定

モジュール

  • 見出しの設定(site2018からの継承)

カスタマイズについて

カスタムユニットの拡張

  • 背景画像
  • メディアレイアウト
  • ご注文フォーム
  • スプリットレイアウト
  • アコーディオン
  • お客様の声
  • 特徴
  • よくある質問
  • SNSシェアボタン

[キャプチャ]背景画像

背景画像

[キャプチャ]メディアレイアウト

メディアレイアウト

[キャプチャ]ご注文フォーム

ご注文フォーム


[キャプチャ]スプリットレイアウト

スプリットレイアウト

[キャプチャ]アコーディオン

アコーディオン

[キャプチャ]お客様の声

お客様の声


[キャプチャ]特徴

特徴

[キャプチャ]よくある質問

よくある質問

[キャプチャ]SNSシェアボタン

SNSシェアボタン

編集画面

ユニットグループの背景色や、見出しやリード文、本文の文字色を指定するために、カラーピッカーを使用しています。エントリーのカスタムフィールドとして用意しています。

カラーピッカーのプラグイン

  • jQuery MiniColorsというjQueryプラグインを使用しています。使用方法に着いてはjQuery MiniColorsの公式サイトをご覧ください。
  • jQuery MiniColors

編集画面専用のJS・CSSの読み込み

  • 編集画面専用のJS・CSSの読み込みは、/include/head/edit.htmlで行なっています。

カラーピッカーはエントリーのカスタムフィールドで使用できます

カラーピッカーの使用場所


パーツの表示設定

以下のパーツがエントリーごとに表示・非表示を設定できるようになっています。

  • ヘッダー
  • ページタイトル
  • トピックパス
  • お問い合わせ情報
  • フッター

チェックをつければ各パーツが表示されます。



ランディングページテーマの解説は以上となります。それでは、みなさまのカスタマイズのご参考に役立てればと思います。

拡張アプリ Zoho を公開しました


今年、2018年3月26日に公開された a-blog cms Ver.2.8ではより外部サービスと連携しやすい仕組みを用意しています。そこで今後いくつかの連携機能をa-blog cmsの本体とは別に拡張アプリという形で配布することにしました。 その第5弾として今回は 拡張アプリ「Zoho」を用意しました。拡張アプリ「Zoho」を使うとお問い合わせフォームなどから送信された入力内容を Zoho CRM 上に蓄積することができます。

ダウンロード

Zoho for a-blog cms

以下の3つのステップでa-blog cmsとzohoを連携します。

  1. Zoho CRMの登録
  2. 認証トークンの取得
  3. a-blog cmsの拡張アプリ zoho に認証トークンを登録

1. Zoho CRMの登録

まずはZoho CRM に登録します。機能は制限されますが、無料版がありますのでアカウントがない人はまずは無料版を使ってみましょう。

2. 認証トークンの取得と登録

下記のURLより、クライアントIDを追加します。 https://accounts.zoho.com/developerconsole



設定後は、先ほど追加したクライアントに対して、セルフクライアントの設定をします。



スコープにはZohoCRM.modules.allと入力してください。期限は何分でも構いませんが、その期限内にoAuth認証を済ませる必要があります。入力をすませると、oAuth認証に必要なgrantトークンが表示されるはずです。このトークンを覚えておきましょう。



configファイルの設定

configuration.propertiesoauth_configuration.propertiesに設定を追記します。 場所は、extension/plugins/Zoho/vendor/zohocrm/php-sdk/src/resources にあります。

configuration.properties

apiBaseUrl=www.zohoapis.com
apiVersion=v2
sandbox=false
applicationLogFilePath=./
currentUserEmail={Zohoに登録したメールアドレス}

oauth_configuration.properties

client_id={取得したClientID}
client_secret={取得したClient Secret}
redirect_uri={リダイレクトURL}
accounts_url=https://accounts.zoho.com
token_persistence_path=./
access_type=offline
persistence_handler_class=ZohoOAuthPersistenceHandler

3. a-blog cmsの拡張アプリ zoho に認証トークンを登録

管理ページ > 拡張アプリ より「拡張アプリ管理」のページに移動します。そのページより下の図のようにZohoをインストールします。



インストール完了後は、先ほどのgrantトークンを「a-blog cmsの管理画面 > 拡張メニュー > Zoho」より入力します。zohoの登録で使用しているメールアドレスもここで入力しておく必要があります。 入力後は設定を保存し、「認証」ボタンをクリックします。無事に認証ができると、下の図のように「認証済み」というラベルが表示されるはずです。

注意

config.server.phpでHOOKを有効にしておく必要があります

define('HOOK_ENABLE', 1);

Zoho 拡張アプリの設定

先ほどのgrantトークンをa-blog cmsの管理画面 > 拡張メニュー > Zoho より入力します。zohoの登録で使用しているメールアドレスもここで入力しておく必要があります。



拡張アプリZohoの使い方

「管理画面 > フォーム管理 > 設定したいフォームID」よりフォームに対するZohoの設定を行うことができます。 a-blog cmsのForm内のキーに対してZoho側のキーを紐づけることで、a-blog cms側のフォームの送信結果を処理してzohoに送信することができます。Zoho側のキーは下の図のようにラベル名に対応しています。

以下3つの作業が必要になります。

  1. Formの権限設定
  2. Zohoのカスタムフィールドの設定
  3. lookupIdの関連付け

1. Formの権限設定

フォームIDごとに、Zohoのどのモジュールに対してInsert(データの挿入)及びUpdate(データの更新)ができるかを設定できます。例えば、下の画像の場合、CustomModule1のモジュールに対してInsert権限があり、Contactsのモジュールに対してはUpdate権限があります。またInsertやUpdate時に「会員番号」がユニークキーとして処理が実行されます。



2. Zohoのカスタムフィールドの設定

次は、カスタムフィールドの設定です。ここではa-blog cmsのフォーム側の変数とZoho側のカスタムフィールドの紐付けを行います。例えば、一番最初の列では、a-blog cms側のカスタムフィールドemailの項目はZoho側のLeadsモジュールとCustomModule1モジュールのEmailに対応しています。



この際に、新規レコードに追加したい変数は、「Insert」にチェックし、既存レコードの更新を行いたい変数については「Update」にチェックを入れてください。

3. lookupIdの関連付け

またZoho側に登録したデータどうしをlookupIDを通して紐づけることができます。 例えば、商品に対してその商品を誰が買ったのかをルックアップIDを使って以下のように紐づけます。 ルックアップIDにはそのルックアップIDに使用されているzoho側のラベル名を登録します。


Module Related Module
Campaigns Leads 
Contacts
Products Leads Accounts 
Contacts 
Potentials 
Price Books


Zoho と a-blog cms 連携カスタマイズについてのレクチャーを行うことも可能です。

ご希望の方は下記のURLよりお問い合わせください。

https://www.a-blogcms.jp/contact/