a-blog cms では OpenStreetMap と Google Map が標準で実装されています。それぞれのサービスの特徴について調べましたのでサイト制作時のお役に立てればと思います。（2020/02時点）

最近話題に上がっている MapBox も合わせて比較してみました。

※ Google Map の料金計算は月間10万ロード以下の場合で Maps JavaScript API を使用していると仮定した値段です。使用するAPIや条件で料金は変わってきます。
Maps JavaScript API Usage and Billing | Google Developers

※ MapBox の料金計算は Maps Loads for Web を使用していると仮定した値段です。使用する機能や条件で料金は変わってきます。
Mapbox 料金

3つの地図を並べてみました。Google Map と MapBox は特殊なオプションをつけていないものになります。

メリット

• 無料

デメリット

• 認知度が低い
• お店情報が少ない

a-blog cms では標準が OpenStreetMap であるため見たことがある人も多いと思います。
OpenStreetMap は、オープンソースで作られている地図サービスになります。誰でも自由に参加して、誰でも自由に地図を編集して、誰でも自由に地図を利用することが出来ます。そのためメンテナンスが盛んな場所もあれば古いままの場所も出てきてしまいます。名古屋周辺で確認したところ古い情報のままのお店などを確認することができました。

メリット

• 認知度が高い
• お店情報が豊富
• ストリートビューを見れる

デメリット

• クレジットカード登録が必須
• 値段がやや高い

Google Map は認知度が高く、日本でも広く使われています。また、お店情報も豊富です。
他の地図には無い機能として「ストリートビュー」も強みだと思います。 a-blog cms では Google Map ユニットに標準でストリートビュー切り替え機能を搭載していますので簡単に導入することが可能です。 しかし、クレジットカード登録をしないと使用できないため、サイト制作時に試しに Google Map を載せたいという時も一手間かかります。 MapBox と比べると値段がやや高いため、Webサイトにあまりコストをかけたく無い場合は他の地図を検討する必要があります。

メリット

• 公式ページのMap導入方法解説ページが優しい
• 地図スタイルのカスタマイズが細かくできる

デメリット

• a-blog cms標準機能でない
• 認知度が（まだ）低い
• お店情報が（まだ）少ない

a-blog cms ではまだ標準機能としての搭載には至っておりません。静的なテンプレートに地図を貼り付けるだけであれば数十行のカスタマイズで可能ですが、カスタムフィールドやユニットに組み込むにはさらにひと手間かかります。 また、MapBox が日本向けにサービス提供したのが2019年のためまだ認知度が低く、 Google Map ほどお店情報も豊富ではありません。しかし、 Mapbox の地図データはユーザの携帯電話から送信されるGPS情報を元に作成されるようなので今後使用ユーザーが増えるほど地図の精度もあがってくのではないでしょうか。

「Mapboxの地図データはユーザの携帯電話から送信されるGPS情報を元に作成されています。ユーザがMapboxの地図を起動すると、緯度、経度、時刻などの情報がプライバシーに配慮したプロセスを経て、自動でMapboxに送信されます。
こうして集まったデータによりMapboxの地図データはリアルタイムでアップデートされているのです。ユーザデータを利用することで、顧客企業に精密な地図データを低コストで導入いただけるようになりました」（デイブ・コール氏）

引用：https://www.softbank.jp/biz/future_stride/entry/technology/20200131/

a-blog cms の標準機能ではないですが、ただ地図を載せるだけであれば簡単に導入できます。上記 MapBox 地図のソースコードは20行もありません。

<div class="column-map-centter js_notStyle acms-col-sm-12">
  <div id='map' style='width: 775px; height: 516px;'></div>
</div>
<script>
  mapboxgl.accessToken = 'アクセストークンキー';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [136.88741, 35.17291],
    zoom: 16
  });
  var marker = new mapboxgl.Marker()
  .setLngLat([136.88741, 35.17291])
  .addTo(map);
</script>

導入方法については公式サイトで優しく案内してくれるので気になる方は MapBox のアカウントを作成してみてください。

MapBox Japan
https://www.mapbox.jp/

マップスタイルのカスタマイズはブラウザ上で行えます。画面上で確認をしながらフォントの設定やマップの配色などの細かい調整が可能です。

a-blog cms ではビルドインモジュール（Entry_BodyやCategory_List...）と呼ばれる最初から入っているモジュールを使って動的にコンテンツを出力していきます。一般的なサイトを作るうえでは、ビルドインモジュールがあればそこまで困らないのですが、a-blog cmsで管理していないデータを出力したり、特殊な絞り込みをしたい場合は、PHPを書いて専用モジュールを開発する必要がありました。

そこで、Ver. 2.7.0 から導入された新しいビルドインモジュール Json_2Tpl を使う事でPHPが得意でない人もJSONさえ用意できれば、PHPを1行も書かずに思い通りのモジュールを作る事ができるようになります。ここでは、JSONがa-blog cmsのテンプレートエンジンとどのような関係があるか見てきます。

JSON

詳しく見ていく前にJSONファイルについて少し学んでおきましょう。

JSONは 名前/値のペア の集まりで構成されています。: の前にあるのが名前です。また、{ } で囲まれている部分をオブジェクトと呼びます。様々なデータを持っているセットと考えていただければ大丈夫です。次に [ ] で囲まれている部分が配列になります。データを複数持つことができます。これらは互いに入れ子にする事ができるようになっています。

説明で利用するJSONサンプル

{
  "items": [{
      "id": "001",
      "name": "商品A",
      "color": "red",
      "size": ["S", "M", "L"],
      "price": {
        "tax_included": 108,
        "without_tax": 100
      }
  },
  ...
}

配列 -> ループ

配列の場合は、ループブロックで表現されます。ループブロックとは <!-- BEGIN 名前:loop ---> という形のブロックになります。

ループブロックの中では、 glueブロック <!-- 名前:glue ---> も利用できるようになります。glueブロックは ループ回数 - 1回 出力されるブロックになります。カンマで区切りたい場合などに利用すると便利です。

特殊な変数として {名前.i} という変数も利用できます。これは現在の配列番号を出力できます。

また配列の中身が、値の場合は（ここでゆうsize）配列の名前（ラベル）がそのまま変数名としても使えます。

<!-- BEGIN items:loop -->
{items.i}
<!-- BEGIN items:glue -->, <!-- END items:glue -->
...
<!-- END items:loop -->

<!-- BEGIN items:loop -->
<!-- BEGIN size:loop -->
<!-- BEGIN size:glue -->, <!-- END size:loop -->
{size.i} : {size}
<!-- END size:loop -->
<!-- END items:loop -->

オブジェクト -> ブロック

名前（ラベル）がついたオブジェクト（例: "price": { ... }）の場合は、ブロックで表現できます。ブロックとは <!-- BEGIN 名前 --> の形のブロックです。

<!-- BEGIN price -->
...
<!-- END price -->

値 -> 変数

名前（ラベル）のあとが値の場合、変数として出力できます。変数は {名前} で表現されます。 もちろんこの変数には校正オプションも利用できます。

<!-- BEGIN items:loop -->
  {id}, {name}, {color}
 <!-- BEGIN price -->
  {tax_included}[number_format]
  <!-- END price -->
<!-- END items:loop -->
など

まとめ

• 配列 -> ループブロック（例 <!-- BEGIN items:loop -->）
• 名前（ラベル）がついたオブジェクト -> ブロック（例: <!-- BEGIN price -->）
• 名前（ラベル）のあとが配列でもオブジェクトでもない値 -> 変数（例: {color}）

この記事では、2021年2月5日にリリースした Ver.2.11.28 の改善・修正内容について紹介いたします。

現在お困りの問題に該当する項目がありましたら、お早めにバージョンアップのご検討をお願いいたします。

Ver.2.11.28 のリリースノート

主なリリースノートの詳細な内容

CMS-5528 スケジュールモジュールの参照先スケジュールに空の項目を用意

スケジュールモジュールのコンフィグやモジュールIDの表示設定で、デフォルトが最初に作成したスケジュールセットが選択されているように見えて混乱を招く状態となっていたため、なにも選択していない時のステータスが用意されました。

CMS-5531 シークレットログインページで、「不正なアクセスです」というエラーが多発する問題を修正

Ver.2.11.27のみで発生する、シークレットブログのログインページでログイン1回目に「不正なアクセスです」と表示される現象を確認しました。Ver.2.11.28ではこの問題を修正しており、アップデートするだけで問題が修正されます。

CMS-5532 Entry_TagRelational モジュールIDでフィールドを利用できるように修正

Entry_TagRelational のモジュールで、フィールドの引数が利用できるようになりました。

CMS-5535 CMS更新時の config.server.php の更新除外項目オプションを用意（system_update_ignore_config）

config.server.phpをカスタマイズしていて項目を削除しているとき、CMSのアップデートの時に削除された項目が復活します。意図して削除したい項目をCMSのアップデート時にも復活しないように、config.system.yamlに system_update_ignore_configのオプションを新しく用意しました。

system_update_ignore_config : [] # ここで指定した項目は、CMS更新で再設定されなくなります。（config.server.php の項目で除外したい対象を追加。例: [SESSION_NAME]）

最後に

この度はご迷惑をおかけしてしまい申し訳ございませんでした。該当する問題がありましたら、お早めにバージョンアップのご検討をお願いいたします。
また、迅速にご報告いただいたユーザーの皆さま、誠にありがとうございました。

今後もご報告いただいた内容に対して真摯に受け止め修正と改善を行ってまいりますので、引き続き気づいた点がありましたらフィードバックいただけると幸いです。

• a-blog cms お問い合わせフォーム