Google Maps を表示する組み込みJSです。

この組み込みJSを活用することで、 Google Maps Static API を活用して静的に表示している Google Maps を Google Maps JavaScript API を活用した動的な Google Maps に置き換えて表示することができます。

使い方

Google Maps Static API を利用した Google マップ画像を表示している img 要素の class 属性に対して js-s2d-ready を設定します。

例では、Google Maps Static API の URL パラメーターで、緯度35.172775,136、軽度136.887466 の地点を表示しています。また、markers パラメーターにて、マーカーの位置情報を | 区切りで3つ指定しています。

また、key パラメーターには コンフィグ > プロパティ設定 で設定した Google Maps API Key をグローバル変数で指定しています。

Google Maps Static API の URLに指定できる URL パラメーターに関して、詳しくは以下のページをご確認ください。

さらに、alt 属性を使えば、マーカーそれぞれにメッセージを表示することも可能です。メッセージを区切りたい場合は、[[:split:]]このような記号を使って分割します。

<img
  data-lazy="true"
  src="https://maps.googleapis.com/maps/api/staticmap?center=35.172775,136.887466&zoom=15&size=400x300&maptype=roadmap&markers=35.170394,136.887383%7C35.176559,136.885409%7C35.172762,136.887447&key=%{GOOGLE_API_KEY}"
  alt='<table><tr><td><a href="/realestate/entry-17.html">物件情報3</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-16.html">物件情報2</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-15.html">物件情報1</a></td></tr></table>'
  width="400"
  height="300"
  class="js-s2d-ready"
>

マーカーアイコンをカスタマイズする

デフォルトでは、Google Maps API 標準のマーカーアイコンが利用されますが、独自のカスタムアイコン画像をマーカーアイコンとして利用することも可能です。

独自のカスタムアイコン画像をマーカーアイコンとして利用するためには、 markers パラメーターの icon 記述子を利用して、任意のカスタムアイコン画像のURLを指定する必要があります。

以下は、https://developers.google.com/static/maps/documentation/javascript/images/custom-marker.png というURLで表示される以下の画像をマーカーアイコンとして利用するためのサンプルコードになります。

独自のカスタムアイコンとして利用する駐車場アイコン

<img
  data-lazy="true"
  src="https://maps.googleapis.com/maps/api/staticmap?center=35.172775,136.887466&zoom=15&size=400x300&maptype=roadmap&markers=%7Cicon:https://developers.google.com/static/maps/documentation/javascript/images/custom-marker.png%7C35.170394,136.887383%7C35.176559,136.885409%7C35.172762,136.887447&key=%{GOOGLE_API_KEY}"
  alt='<table><tr><td><a href="/realestate/entry-17.html">物件情報3</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-16.html">物件情報2</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-15.html">物件情報1</a></td></tr></table>'
  width="400"
  height="300"
  class="js-s2d-ready"
>

表示領域（viewport）に入るまで、組み込みJSの実行を遅延させる

Google Maps の地図が画面の下部に存在する場合、組み込みJSの実行を、表示領域（viewport）に入るまで遅延させることで、パフォーマンスを向上させることが可能です。

data-lazy 属性の値に true を指定することで、組み込みJSの実行を遅延させることができます。

<img
  data-lazy="true"
  src="https://maps.googleapis.com/maps/api/staticmap?center=35.172775,136.887466&zoom=15&size=400x300&maptype=roadmap&markers=35.170394,13ｂｂ6.887383%7C35.176559,136.885409%7C35.172762,136.887447&key=%{GOOGLE_API_KEY}"
  alt='<table><tr><td><a href="/realestate/entry-17.html">物件情報3</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-16.html">物件情報2</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-15.html">物件情報1</a></td></tr></table>'
  width="400"
  height="300"
  class="js-s2d-ready"
>

設定

この機能の設定は、/js/config.js で設定されています。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

焦点座標によって画像をトリミングして表示する組み込みJSです。

一覧ページなどで、エントリーを一覧表示する場合、画像の表示領域や適用しているCSSによっては、画像の中心を見せたい場合でも、外側からトリミングされて表示されてしまう場合があります。

上記のような場合に、この機能を利用することで、焦点座標によって画像をトリミングして表示することができるため、画像の見せたい領域を中心にトリミングして表示することが可能です。

例えば、以下の2つの画像は、一つは焦点座標を指定せず表示した画像、もう一つは焦点座標を指定して表示した画像です。焦点座標が設定された画像は綺麗に人物が中央に表示されているのがわかります。

焦点座標によって画像をトリミングして表示する組み込みJSの利用例です。

使い方

焦点座標によって画像をトリミングして表示したい img 要素に js-focused-image クラスを適用します。そして、焦点の x 座標を data-focus-x 属性に、y 座標を data-focus-y 属性に指定します。

<div style="width: {x}px; height: {y}px;">
  <img 
    class="js-focused-image"
    data-focus-x="{focalX}"
    data-focus-y="{focalY}"
    src="%{ROOT_DIR}{path}"
    alt="{alt}"
  >
</div>

上記はメディアの焦点座標指定機能で設定した焦点のデータを利用して、画像をトリミングして表示しています。メディアの焦点座標指定機能については以下のドキュメントを参照してください。

ページ内の外部リンクに対して自動的に target="_blank" を付与する組み込みJSです。

基本的に、外部サイトのリンクは別タブで開かせたい事が多いかと思いますが、この機能により、Web制作者や更新者が別タブで開く設定を忘れた場合でも、ページ内に存在する外部リンクを自動的に別タブで開くようにすることができます。

設定

この機能の設定は、/js/config.js で設定されています。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

テーマセット機能とは

Ver. 3.1.0 でテーマ部分の設定がコンフィグセットから切り離された機能になります。 これにより、ブログ、カテゴリー毎にテーマを変更したい場合に、全体のコンフィグセットを書き換えずに済むようになりました。

テーマセット一覧画面

この機能を使うことで、全体のコンフィグセットを変更せず、コンテンツ毎にテーマの設定を変更することが出来るようになります。

テーマセット機能を利用する

1. テーマセットを作成

管理画面 > テーマ よりテーマセットを新規作成します。

テーマセットは必要なだけ作成することができます。

テーマセット作成画面

1. 作成したテーマセットを編集

先ほど作成した、テーマセットの「テーマ設定」を選択します。

テーマセット一覧画面

テーマ設定画面に移動します。こちらでテーマの設定を行います。

詳しい設定は テーマ設定のドキュメント をご覧ください。

テーマ設定画面

3. テーマセットを適用

テーマセットは、コンフィグセット同様に「ブログ」または「カテゴリー」に設定可能です。

「子ブログ（カテゴリー）にも継承する」にチェックをつけることにより、下階層のブログ（カテゴリー）にも同一のテーマセットを適応させることが可能です。

ブログの編集画面

以上で設定は完了です。

ユーザーがフォームの入力中に別ページに遷移しようとしたときに離脱防止のアラートを表示する組み込みJSです。

この機能を利用することで、フォームの入力中に別ページに遷移してしまい、入力途中のデータが失われてしまうといった事故を防ぐことができます。

使い方

離脱を防止させたい form 要素の class 属性に js-unload_alert を指定します。

<form action="" method="post" class="js-unload_alert" enctype="multipart/form-data">
...
</form>

フォームの項目を一度入力したあと（JavaScript で input イベントを監視しています。）、別のページに遷移しようとすると、アラートが表示されます。

設定

この機能の設定は、/js/config.js で設定されています。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。