Home

Google Mapsのカスタムフィールドの作成

Google Mapsのインターフェースのカスタムフィールドを使って、緯度・経度・ズームの値を入力することができます。

Google MapsのインターフェースのカスタムフィールドのサンプルHTMLになります。

<table class="entryFormTable acms-table-entry">
  <tr class="js-map-editable">
    <th>地図</th>
    <td>
      <div class="acms-form-group">
        <input type="text" name="" value="" class="js-editable_map-search_text" disabled="disabled" size="40" />
        <input type="button" name="" value="検索" class="js-editable_map-search_button acms-btn-admin" disabled="disabled" />
      </div>
      <div class="acms-form-group">
        <img class="js-map_editable-container" src="http://maps.google.com/maps/api/staticmap?center=35.185574,136.899066&zoom=10&size=400x300&maptype=roadmap&markers=35.185574,136.899066&sensor=false" width="400" height="300" style="display:block;" />
      </div>
      <div class="acms-form-group">
        <!-- BEGIN_IF [{mapLat}/em] -->
        緯度 <input type="text" name="mapLat" value="35.185574" size="9" class="js-map_editable-lat" />
        経度 <input type="text" name="mapLng" value="136.899066" size="10" class="js-map_editable-lng" />
        ズーム <input type="text" name="mapZoom" value="10" size="10" class="js-map_editable-zoom" />
        <!-- ELSE -->
        緯度 <input type="text" name="mapLat" value="{mapLat}" size="9" class="js-map_editable-lat" />
        経度 <input type="text" name="mapLng" value="{mapLng}" size="10" class="js-map_editable-lng" />
        ズーム <input type="text" name="mapZoom" value="{mapZoom}" size="10" class="js-map_editable-zoom" />
        <!-- END_IF -->
      </div>
      <input type="hidden" name="field[]" value="mapLat" />
      <input type="hidden" name="field[]" value="mapLng" />
      <input type="hidden" name="field[]" value="mapZoom" />
    </td>
  </tr>
</table>

記述の説明

Google Mapsをカスタムフィールドで利用するための記述。各記述全体を囲む要素に記述してください。

<tr class="js-map-editable">

住所やスポット名で検索するための入力エリア

<input type="text" name="" value="" class="js-editable_map-search_text" disabled="disabled" size="40" />
<input type="button" name="" value="検索" class="js-editable_map-search_button acms-btn-admin" disabled="disabled" />

マップのプレビュー

<img class="js-map_editable-container" src="https://maps.googleapis.com/maps/api/staticmap?center=35.185574,136.899066&zoom=10&size=400x300&maptype=roadmap&markers=35.185574,136.899066&sensor=false&key=%{GOOGLE_API_KEY}" width="400" height="300" style="display:block;" />

緯度・経度・ズームの値を入力箇所

<!-- BEGIN_IF [{mapLat}/em] -->
緯度 <input type="text" name="mapLat" value="35.185574" size="9" class="js-map_editable-lat" />
経度 <input type="text" name="mapLng" value="136.899066" size="10" class="js-map_editable-lng" />
ズーム <input type="text" name="mapZoom" value="10" size="10" class="js-map_editable-zoom" />
<!-- ELSE -->
緯度 <input type="text" name="mapLat" value="{mapLat}" size="9" class="js-map_editable-lat" />
経度 <input type="text" name="mapLng" value="{mapLng}" size="10" class="js-map_editable-lng" />
ズーム <input type="text" name="mapZoom" value="{mapZoom}" size="10" class="js-map_editable-zoom" />
<!-- END_IF -->

テンプレートに表示する

単一で表示する

緯度が {mapLat}、経度が {mapLng}、ズームが {mapZoom} という変数の場合は以下のように記述します（ここでは説明しやすいように具体的な変数名を使用しますが、実際の変数名は任意です）。エントリーのカスタムフィールドで作成した場合はEntry系モジュールのentry:loop内に記述してください。

<img class="js-s2d-ready" src="https://maps.googleapis.com/maps/api/staticmap?center={mapLat},{mapLng}&zoom={mapZoom}&size=400x300&maptype=roadmap&markers={mapLat},{mapLng}&sensor=false" width="400" height="300" style="display:block;" />

一覧ページで複数のピンを表示する

エントリーのカスタムフィールドで緯度を{map_lat}、経度が{map_lng}、カテゴリーのカスタムフィールドで緯度を{index_map_lat}、経度を{index_map_lng}、ズームを{index_map_zoom}を指定している例です。

下記の例では、それぞれmarkersとalt属性にEntry_Summaryを使うことで複数ピンの表示と、ピンをクリックした後の吹き出しを表示しています。

<!-- BEGIN_MODULE Category_Field -->
<div>
<!-- BEGIN_MODULE Entry_Summary id="summary_map" -->
  <!-- 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 -->&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;a href=&quot;{url}&quot;&gt;&lt;!-- BEGIN image:veil --&gt;&lt;img src=&quot;%{MEDIA_ARCHIVES_DIR}{main_photo@path}&quot; width=&quot;200&quot; alt=&quot;&quot; /&gt;&lt;br/&gt;&lt;!-- END image:veil --&gt;{title}&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<!-- BEGIN glue -->[[:split:]]<!-- END glue --><!-- END entry:loop --><!-- END unit:loop -->
  <!-- END_SetRendered -->
<!-- END_MODULE Entry_Summary -->

<img class="js-s2d-ready" src="http://maps.google.com/maps/api/staticmap?center={index_map_lat},{index_map_lng}&zoom={index_map_zoom}&size=820x400&maptype=roadmap&markers=<!-- GET_Rendered id="map-markers" trim="1" -->&sensor=false" alt="<!-- GET_Rendered id="map-messages" trim="1" -->" width="820" height="400" style="display:block;" />
</div>
<!-- BEGIN_MODULE Touch_SessionWithCompilation --> <p class="edit-link">[<a href="%{BLOG_URL}bid/%{BID}/cid/%{CID}/admin/category_edit/">編集</a>]</p><!-- END_MODULE Touch_SessionWithCompilation -->
<!-- END_MODULE Category_Field -->

ストリートビューを利用する

a-blog cms Ver.2.11よりGoogle Mapユニットでストリートビューが利用できるようになりました。それに伴いカスタムフィールドでもストリートビューの表示位置を調整して表示することができるようになりました。以下はストリートビューを使ったカスタムフィールドのイメージです。

以下はストリートビュー対応したGoogle MapsのカスタムフィールドのサンプルHTMLになります。

<table class="entryFormTable acms-table-entry">
  <tr class="js-map-editable">
    <th>地図</th>
    <td>
      <div class="acms-form-group">
        <input type="text" name="" value="" class="js-editable_map-search_text" disabled="disabled" size="40" />
        <input type="button" name="" value="検索" class="js-editable_map-search_button acms-btn-admin"
          disabled="disabled" />
      </div>
      <div class="acms-form-group">
        <!-- BEGIN_IF [{mapLat}/em]-->
        <img class="js-map_editable-container"
          src="//maps.google.com/maps/api/staticmap?center=35.185574,136.899066&zoom=10&size=400x400&maptype=roadmap&markers=35.185574,136.899066&key=%{GOOGLE_API_KEY}"
          width="400" height="300" style="display:block;" />
        <!-- ELSE -->
        <img class="js-map_editable-container"
          src="//maps.google.com/maps/api/staticmap?center={mapLat},{mapLng}&zoom={zoom}&size=400x400&maptype=roadmap&markers={mapLat},{mapLng}&key=%{GOOGLE_API_KEY}"
          width="400" height="300" style="display:block;" />
        <!-- END_IF -->
        <div class="js-map_editable-panorama" style="width: 100%; height: 600px; display: none;"></div>
      </div>
      <div class="acms-form-group" style="margin-bottom: 10px; margin-top: 10px;">
        <!-- BEGIN_IF [{mapLat}/em] -->
        緯度 <input type="text" name="mapLat" value="35.185574" size="9" class="js-map_editable-lat" />
        経度 <input type="text" name="mapLng" value="136.899066" size="10" class="js-map_editable-lng" />
        ズーム <input type="text" name="mapZoom" value="10" size="10" class="js-map_editable-zoom" />
        <!-- ELSE -->
        緯度 <input type="text" name="mapLat" value="{mapLat}" size="9" class="js-map_editable-lat" />
        経度 <input type="text" name="mapLng" value="{mapLng}" size="10" class="js-map_editable-lng" />
        <!-- ズーム <input type="text" name="mapZoom" value="{mapZoom}" size="10" class="js-map_editable-zoom" /> -->
        <!-- END_IF -->

      </div>
      <input type="hidden" name="field[]" value="mapLat" />
      <input type="hidden" name="field[]" value="mapLng" />
      <input type="hidden" name="field[]" value="mapZoom" />
      <input type="hidden" name="field[]" value="viewZoom" />
      <input type="hidden" name="field[]" value="viewHeading" />
      <input type="hidden" name="field[]" value="viewPitch" />
      <div class="acms-admin-form-checkbox">
        <input type="checkbox" id="viewActivate" name="viewActivate" value="true" class='js-map_editable-activate' />
        <label for="viewActivate">
          <i class="acms-admin-ico-checkbox"></i>ストリートビューを利用する
        </label>
      </div>
      <div>
        ズーム <input type="text" name="viewZoom" value="{viewZoom}" size="9" class="js-map_editable-zoom-view" />
        方向 <input type="text" name="viewHeading" value="{viewHeading}" size="10" class="js-map_editable-heading" />
        ピッチ <input type="text" name="viewPitch" value="{viewPitch}" size="10" class="js-map_editable-pitch" />
      </div>
    </td>
  </tr>
</table>

ストリートビューの表示

また登録したストリートビューは以下のように表示できます。

<div class="js-street-view column-street-view-inner" data-lazy="true" data-lat="{mapLat}" data-lng="{mapLng}" data-pitch="{viewPitch}" data-zoom="{viewZoom}" data-heading="{viewHeading}"></div>

Ver. 2.7.16 をダウンロード

Ver. 2.7.17 をダウンロード

2.5.1 / 2.5.1.1 をご利用の方へアップロード画像がPNG形式に

今回、2.5.1 で実装された新しい機能で、ブラウザ上で画像をリサイズする機能というものがあります。この機能ですが、現状の仕様だとアップロードした画像のほとんどのファイルが形式が png になってしまいます。

もし、現状のバージョンで、png になってしまう事を止めたいという事であれば、 /js/config.js の 510行目のあたりにある resizeImage の設定を off にしてください。

//--------------
// resize image
resizeImage : 'off',

標準が off になっていて、全部 png になってもいいから、大きなファイルでもアップできた方がいい人が on にする仕様にするべきでした。申し訳ありませんでした。

今回の機能としては、canvas を活用してアップロードする前にリサイズ機能をブラウザ側で実装しています。その際に、canvas では png 形式を必須としており一部のブラウザでは、jpeg をサポートしていない事から、このような仕様となっていました。

参考：

今後の改良として、大きな画像というところでは、jpeg である事が多いですので、対応していないブラウザの時のみ png にし、対応しているブラウザであった場合には jpeg になるように、次のバージョン 2.5.1.2 で改良したいと思っています。

近日中にリリース予定ですので、よろしくお願いいたします。

組み込みJSについて

a-blog cmsには、標準でJavaScriptが組み込まれています（組み込みJSと呼んでいます）
設定変更の方法について紹介します。各機能の詳細についてはリファレンスを参照してください。

各種ライブラリの使用と設定について

各種機能には、ライブラリを使用しているものが多数あります。基本的な設定は/js/config.js　に記載しています。
CKEditorなどライブラリによっては、それぞれのconfigファイルがあるものもあります。

設定を変更する場合は、config.jsの内容を変更する必要がありますが、直接/js/config.jsファイルを変更するのではなく、/themes/お使いのテーマ/js/xxxx.js　を作成し、必要な値を上書きするようにします。
直接config.jsを変更しないのは、CMSのバージョンアップ時に誤ってconfig.jsを上書きするリスクを回避するためです。

設定を編集する

使用したいJavaScriptファイルを用意する

適用しているテーマフォルダ内にJavaScriptファイルを入れます。

例）「sample.js」というJavaScriptファイルを使用したい場合
/themes/適用しているテーマ/js/sample.js

テンプレートから参照する

JavaScriptを適用したいテンプレートのhead内に、使用したいJavaScriptファイルを参照するソースコードを記述します。a-blog cms用のJavaScriptファイルの参照コード（「BEGIN_MODULE Js」〜「END_MODULE Js」の部分）より後に記述してください

例）「sample.js」というJSファイルを使用したい場合のhead内の記述

<!-- BEGIN_MODULE Js --><script type="text/javascript" src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
<script type="text/javascript" src="/js/sample.js" charset="UTF-8"></script>

JavaScriptを編集する

手順1項で作成したJavaScriptファイルに、設定を記述します。/js/config.jsの設定を上書きすることになります。頭に「ACMS.Config.」を付けて記述してください。
また、Ver. 2.5.0よりacms.jsが非同期的にjavascriptを読み込み実行しますので、config.jsが読まれた事が保証される
ACMS.Ready(function() { });
の中に書きます。

例）検索キーワードのハイライトを適用するセレクタ要素を追加する場合

ACMS.Ready(function() {
    ACMS.Config.searchKeywordHighlightMark  = '.entryTitle, .search .summary, .selectKeyword';
});

配列で設定を複数記述する記述方法

同じページで同じJavaScriptの動作を複数の場所で動作させたい場合、ブログ内で違う設定で動作させたい場合などに、配列で記述します。括弧（[], {}）の位置に注意してください。

例）絵文字の設定を配列で複数設定する場合

ACMS.Ready(function() {
ACMS.Config.emoArray    = [
    {
        'mark'      : 'textarea.js-emoditorEmoji',
        'toolbar'   : [['Emoji']],
        'config'    : {
            enterMode       : 1,
            language        : 'ja'
        }
    },
    {
        'mark'      : 'textarea.js-emoditorColor',
        'toolbar'   : [['TextColor','BGColor']],
        'config'    : {
             enterMode       : 1,
             language        : 'ja'
        }
    }
];
});

ACMS.Ready(function() {
ACMS.Config.bxsliderConf = 
{
    mode            : 'fade', // horizontal | vertical | fade
    speed           : 800,
    captions        : true,
    auto            : true,
    pause           : 6000,
    adaptiveHeight  :true
};
});

組み込みJSの注意点

必要に応じて、各種機能ごとにJavaScriptファイルをあとから読み込みを行っています。そのため開発ツールなどによっては機能ごとのJavaScriptファイルが検出されない可能性があります。