ユニット

目次

ユニットとは

a-blog cmsの編集画面は、コンテンツを「ユニット」と呼ばれるブロックに分けて登録・更新します。ユニットは主にHTMLのブロック要素単位で入力欄を用意して、テキストを登録したり画像を登録するためのものです。

ユニットには、基本的なエントリーを作るのに必要なテキストのユニット、画像のユニットをはじめ、地図やファイル、YouTube、画像URLを指定するユニットがあります。これらを駆使することで、正しい文書構造を保ったまま、HTMLに不慣れな方でも複雑なレイアウトのエントリーも作成できます。また、これらの情報がユニット単位で管理されていることで、順番の入れ替えなども簡単に行えます。

テキストユニット

テキストユニットは、最も使われると思われる通常のテキスト「本文」をはじめ、様々な形式のテキストを登録するユニットです。

テキストユニットでは、プルダウンメニューから様々な種類のテキストを選択できます。管理ページから種類を追加もできますが、ここでは基本的な内容について説明します。


site2016の本文ユニットのプルダウンメニューを展開したところ

site2016の本文ユニットのプルダウンメニューを展開したところ


本文

p要素でマークアップされる本文テキストです。ユニット内で改行がされた場合は、br要素で改行されます。段落を追加する(次のp要素をマークアップする)場合は、もう一つテキストユニットを作成し「本文」を選択してください。

見出し

h要素でマークアップされる見出しテキストです。a-blog cmsに同梱されているテーマではエントリのタイトルをh1要素としているため、見出し大はh2としてマークアップされます。中、小は同じくh3、h4要素となります。

リスト

ul,li要素でマークアップされる標準的なリストです。ユニット内の1行ごとにli要素としてマークアップされます。

番号付きリスト

ol,li要素でマークアップされる番号付きのリストです。ユニット内の1行ごとにli要素としてマークアップされます。

記述リスト

dl,dt,dd要素でマークアップされる記述リストです。ユニット内の1行ごとにdtまたはdd要素としてマークアップされます。 dt要素としてマークアップする場合には、行の先頭に#を追加します。

テーブル

table,tr,th,td要素でマークアップされる記述リストです。ユニット内の1行ごとにtr要素としてマークアップされます。 1行中のテキストは「,」で区切ることでtf要素としてマークアップされます。 1行中の「,」で区切られたテキストをth要素としてマークアップする場合には、そのテキストの先頭に#を追加します。 テーブル記述の詳細につきましては、a-blog cmsのマニュアルをご確認ください。

ソース

pre要素でマークアップされる整形済みテキストです。ラベルにもあるように、HTMLなどのソースコードをエントリ内に表示する場合に使用します。

引用

blockquote要素でマークアップされる引用テキストです。 ユニット内のテキスト全体がblockquote要素としてマークアップされます。cite要素には対応していません。

自由入力

HTMLなどのソースコードがそのまま記述できるユニットです。ユニット内には自由に記述ができますが、ソースコードの記述に誤りがあった場合にはエントリの表示に影響を及ぼす場合がありますのでご注意ください。

マークダウン

マークダウン形式で情報の入力ができるユニットです。マークダウン記法の詳細につきましては、a-blog cmsのマニュアルをご確認ください。

WYSIWYG

WYSIWYG(ウィジウィグ)は、編集画面での見た目と表示画面での見た目が同じとなる技術で、a-blog cmsではCKEditorというエディタを使用しています。Microsoft Wordなどの入力に近い感覚で、文字の装飾や画像の追加が行えます。



配置

テキストユニットの配置には「おまかせ」「全体」があります。

おまかせ

該当するテキストの前で画像ユニットなどに「右」「左」といった配置指定が行われていた場合、該当するテキストを回り込み表示させます。

全体

該当するテキストを表示する前に、CSSによるfloatを解除します。その結果、回り込み表示することなく全幅でテキストが表示されます。


配置の「おまかせ」「全体」の表示例

配置の「おまかせ」「全体」の表示例


Ver.2.8からのテキストユニットについて

a-blog cms Ver.2.8.0 より新しくテキストエリアが生まれ変わりました。今までは「リンク」や「強調」を挿入した際にHTMLタグが直接見えてしまう形になっていましたが、Ver.2.8.0より「リンク」や「強調」などが視覚的にわかりやすくなっています。



a-blog cmsではデフォルトで、「リンク」「強調」「重要」のボタンが用意されていますが、カスタマイズすれば、新たにボタンを追加することができます。下記のように、ACMS.Ready内で、ACMS.Config.LiteEditorConf.btnOptionsに挿入したいボタンの設定をpushするだけです。

ACMS.Ready(function(){
    ACMS.Config.LiteEditorConf.btnOptions.push({
        label: 'アンダーライン',
        tag: 'u',
        className: '',
        sampleText: ''
    });
});

また、デフォルトで用意されている「リンク」「強調」「重要」のボタングループを削除した上で、一からボタングループを設置する場合には以下のように、ACMS.Config.LiteEditorConf.btnOptions に直接、値を配列として代入してください。

ACMS.Ready(function(){
    ACMS.Config.LiteEditorConf.btnOptions = [{
        label: '赤',
        tag: 'span',
        className: 'red',
        sampleText: '赤色のテキスト'
    },
    {
        label: '大',
        tag: 'span',
        className: 'big',
        sampleText: '大きいテキスト'
    }];
});

label ボタンのラベルを設定できます。
tag ボタンが押された際に挿入されるタグを設定できます。
className 挿入されたタグに対して付与できるクラスを設定できます。
sampleText 何もテキストが選択されていない場合に挿入されるデフォルトのテキストを設定できます。

今まで通りのテキストユニットを使う方法

ただ、長く運営しているサイトでは互換性の都合上、以前のテキストユニットをそのまま利用したいというケースもあるかもしれません。その場合は下記のようにJavaScriptより、新しいテキストユニットの機能をOffにすることができます。

ACMS.Ready(function(){
  ACMS.Config.LiteEditorFeature = false;
});

画像ユニット

画像ユニットでは、画像ファイルの埋め込み表示とレイアウト、かんたんな編集ができます。


画像ユニットでできること


  • 画像のアップロード
  • 画像のレイアウト(右寄せ・左寄せ・中央寄せ)
  • 画像サイズの指定
  • 拡大と回転の指定
  • (詳細設定として)キャプション、リンク、代替テキストの指定


画像のアップロード


操作中のPC内に保存されている画像ファイルをアップロードします。この際、複数のファイルを選択し、一括でアップロードもできます。また、画像ファイルを画像ユニットの編集画面にドラッグ&ドロップすることでもアップロードできます。(一括アップロード、ドラッグ&ドロップでのアップロードは、旧バージョンのIEでは動作しません) 一括アップロードを行った場合、レイアウト、サイズなどの指定は複数のファイルで同じ内容が指定されますのでご注意ください。



a-blog cmsでは、大きな画像ファイルをアップロードする際、ブラウザ側で縮小処理を行った後にアップロードをします。この際の縮小サイズは、管理ページ > コンフィグ > 編集設定 にあるイメージサイズの「拡大表示時の最大サイズ」の数値となります。



画像のレイアウト(右寄せ・左寄せ・中央寄せ)


画像を表示する際、右・左・中央のいずれかに配置したい場合、レイアウトを指定できます。右または左を選んだ場合は、次に続くユニットが回り込んで表示されます。


画像サイズの指定


エントリー内で表示する際の表示サイズを指定できます。 管理ページ > コンフィグ > 編集設定 にある「サイズセレクトのイメージサイズ選択肢」で指定した内容が選択肢として表示されます。



拡大と回転の指定


画像の簡単な編集として、画像の拡大禁止と回転を指定できます。 人物が写っている画像など、拡大して詳細を見せたくないという場合には「拡大表示させない」を選択すると、画像を表示する際に拡大リンクが無い状態となります。また、管理ページ > コンフィグ > 編集設定 にあるイメージサイズの「拡大表示時の最大サイズ」で指定したサイズの画像も作成されません。

回転には「時計回りで90度回転」「反時計回りで90度回転」「180度回転」があり、それぞれ画像を回転した状態で保存・表示します。

そのほか、項目として「削除」があり、選択して保存すると該当する画像ユニットが削除されます。ユニット右上の「×」ボタンと同じ動作となります。



(詳細設定として)キャプション、リンク、代替テキストの指定


画像ユニット内の「- 詳細」リンクから、キャプション、リンク、代替テキストの指定ができます。

キャプションはsite2016、blog2016といった同梱テーマであれば画像の下に表示されます。

リンクは、リンク先を入力することで、エントリ内で表示される画像にリンクが指定されます。

代替テキストはブラウザ上での表示には影響しませんが、画像の代替テキストとなるalt属性として使用されます。



画像ユニットに関する注意点


アップロードできるファイル形式

画像ユニットでは、jpg、gif、png、bmp、xbmの各画像形式に対応しています。 なお、gifアニメーションには対応していません。

一定数以上、画像のアップロードができない

1つのエントリーで、画像ユニットや画像のカスタムフィールドを使って、写真・画像ファイルを添付すると20枚以上はアップロードできないことがあります。 サーバー側(PHP)の設定で、関連する項目に制限が設けられている場合にこのような問題が発生します。 詳しくは開発ブログ「画像が一定数枚までしかアップロードできない場合の対処法」をご確認ください。

地図(Google Map)ユニット

地図ユニットは、下の図のように緯度と経度または住所を入力すると該当の箇所の地図をGoogle Mapを用いて表示するユニットです。


経度と緯度の指定、住所の検索、ピンの移動で位置を指定できる

入力例


編集設定

地図ユニットを利用するには管理画面のコンフィグ > 編集設定画面から設定をしてください(新規インストール時には、すでに地図ユニットの設定はあるはずです)。図の下に位置している追加ボタンをクリックし、モードから「地図」を選択し、それに対するラベルの名前を決めてください。保存をすれば設定したラベル名のついたボタンがエントリーの編集画面で使えるようになります。



エントリーの編集画面



API Key の設定

2016年6月22日より、Google Map を使うためには API Key が必須となりました。これにより、API Key をCMS側に設定する必要があります。


API Key が設定されていないと、公開されているエントリーページでもアラートが表示される

API Keyが登録されていない状態のユニット


※以下、手順を紹介しておりますが、Ver.2.6.1.2以降の対応方法となります。それ以前のバージョンに対応するには、開発ブログ「Google Mapsの仕様変更により、地図が表示されない場合がある問題が確認されました」をご覧ください。

設定の手順

  1. API Key の取得
  2. API Key をCMSのプロパティ設定で登録する

1. API Key の取得



まずは、Google API Console にアクセスしてログインしてください。ログイン後、任意の名前でプロジェクトを作成します。


右上のセレクトメニューから、先ほど作成したプロジェクトを選択します。



Google Maps JavaScript API と Google Static Maps API と Google Maps Geocoding APIを有効かしてください。必ず3つも行ってください。



認証情報に移動し、APIキーを作成します。複数のキーがありますが、「APIキー」を選択してください。


ブラウザキーを選択します。



名前を適当に入力し、受け入れリファラーの設定をしてください。



作成したAPI キーをコピーします。


2. API Key をCMSのプロパティ設定で登録する



管理ページに移動したらコンフィグ>プロパティ設定の順に移動し、「Google Maps API Key 」の入力欄に作成したAPIキーを貼り付けてください。


正常に表示しなかった場合


もし、以下のような不具合があった場合、APIキーの設定に不備があるかもしれません。以下の問題と該当するものがあった場合、対応方法をご確認ください。

  • 地図の画像が表示されない方:Google Static Maps API が有効になっていない可能性があります。再度ご確認ください。
  • 動的な地図が表示されない方:Google Maps JavaScript API が有効になっていない可能性があります。再度ご確認ください。
  • エントリー作成画面の地図ユニットの検索フォームが使用できない方:Google Maps Geocoding API が有効になっていない可能性があります。再度ご確認ください。
  • API Keyの設定が有効にならない その1:API Key が有効になるには少し時間がかかるようです。すこし待ってから有効になるかご確認ください。
  • API Key の設定が有効にならない その2:指定したリファラーURLが異なっている場合があります。

Yahoo!地図を利用する

地図を設置する場合に、GoogleマップだけではなくYahoo!地図にも対応しています。 Yahoo!地図なら、ページのデザインに合わせたモノトーン、カーナビの夜間表示のような暗めの色合いが選べるデザインや、地下街、路線図といったGoogleマップには無い地図も備えています。



設定方法


Yahoo!デベロッパーネットワークへの登録

Yahoo!デベロッパーネットワーク のサイトにて登録を行いAPIキーを取得する必要があります。
まず、Yahoo!にログインした後にアプリケーションの登録を行います。



登録が完了しますと、アプリケーションIDとシークレットキーが発行されます。このアプリケーションIDをa-blog cmsの管理画面にて登録をします。



a-blog cmsへのアプリケーションID登録

管理メニューの コンフィグ > プロパティ設定にて、APIキーを登録します。



ユニット追加ボタンへのYahoo地図追加

管理メニューの コンフィグ > 編集設定にて、ユニット追加ボタンにYahoo!地図の追加を行います。モードは"Yahoo!地図"、ラベルは任意の名前を設定します。



Yahoo地図を利用する



設定が問題なく完了していますと、ユニット追加ボタンにYahoo!地図のボタンが表示され、ボタンを押すとYahoo!地図の設定ユニットが表示されます。

ビデオユニット

ビデオユニットではYouTubeやVimeoといった動画を埋め込むのためのユニットです。テンプレートをカスタマイズすることで、下の図のようにVideo IDを入力するとそれに対応する動画を表示することができます。


入力例


出力例

Video IDとは

動画サービスには基本的に個別の動画に対してIDが付けられています。IDは下の例のようにURL欄で確認できます。

動画サービスURLVideo ID
YouTubehttps://www.youtube.com/watch?v=kJt3v7tQ6kckJt3v7tQ6kc
Vimeohttp://vimeo.com/4264797042647970

編集設定

引用ユニットを利用するには管理画面のコンフィグ > 編集設定画面から設定をする必要があります。下の図のように追加ボタンを押し、モードからビデオを選択し、それに対するラベルの名前を決めてください。ラベルの名前は任意です。保存をすれば設定したラベル名のついたボタンがエントリーの編集画面で使えるようになっています。



また、エントリーの編集画面でビデオユニットのサイズの指定が出来ます。



表示サイズ

ビデオユニットを表示するサイズをパーセント指定、またはclass属性(例:acms-col-sm-6)を指定します。

サイズ

表示されるビデオの実際の大きさを幅×高さピクセル指定します。YouTubeの場合は16:9の割合でプレーヤーが表示されるため、横幅から計算した縦幅を入力します(例:横幅を480pxで表示したい場合は、480×(9÷16)=270のため、縦幅を270と指定します)。

ラベル

下の図のように、セレクトメニューに対してそれぞれのサイズにラベル付けを行うことができます。


出力用のビデオユニットの編集

標準で、ビデオユニットはYouTubeの動画を出力するように出来ています。
今回はソースコードを編集しVimeoという動画共有サイトの動画をエントリーに表示させてみましょう。/themes/system/include/unit.htmlを使用しているテーマディレクトリの、includeディレクトリのなかにコピーして編集すると良いでしょう

ビデオユニットでは、Video IDを出力する{videoId}、横幅を出力する{x}、縦幅を出力する{y}などの変数が使えます。

編集前

<!-- Video -->
<div class="column-video-{align}{display_size_class}"{display_size}[raw]>
	<div class="column-iframe">
		<iframe width="{x}" height="{y}" src="http://www.youtube.com/embed/{videoId}?wmode=transparent" frameborder="0" allowfullscreen></iframe>
	</div>
</div>
<!-- END unit#video -->

編集後

<!-- Video -->
<div class="column-video-{align}{display_size_class}"{display_size}[raw]>
	<div class="column-iframe">
		<iframe width="{x}" height="{y}" src="http://player.vimeo.com/video/{videoId}" frameborder="0" allowfullscreen></iframe>
	</div>
</div>
<!-- END unit#video -->

編集画面用のビデオユニットの設定

編集画面では下の図のようにYouTube動画を表示してしまうので、こちらもVimeo動画を表示するようにしましょう。


編集画面のためのunit.htmlは/themes/system/admin/entry/unit.htmlにあります。こちらも、編集する場合には使用しているテーマディレクトリの/admin/entry/unit.htmlをコピーして編集するとよいでしょう。

編集前

<!-- BEGIN_IF [{videoId}/nem/] -->
<td class="entryFormFileentryFormImages">
	<iframe width="240" height="150" src="http://www.youtube.com/embed/{videoId}?wmode=transparent" frameborder="0" allowfullscreen></iframe>
</td>
<!-- END_IF -->

編集後

<!-- BEGIN_IF [{videoId}/nem/] -->
<td class="entryFormFileentryFormImages">
        <iframe width="240" height="150" src="http://player.vimeo.com/video/{videoId}" frameborder="0" allowfullscreen></iframe>
</td>
<!-- END_IF -->

これで、下の図のように管理画面にもVimeo動画が表示されるようになりました。


引用ユニット

引用ユニットとは、下の図のようにURLを入力するとリンク先のページの概要と画像をセットにして表示するユニットです。メタタグのOGP情報やディスクリプションからページの概要を取得し、メタタグのOGP画像から画像を取得します。


入力例


出力例

編集設定


引用ユニットを利用するには管理画面のコンフィグ > 編集設定画面から設定をする必要があります。下の図のように追加ボタンを押し、モードから引用を選択し、それに対するラベルの名前を決めてください。ラベルの名前は任意です。保存をすれば設定したラベル名のついたボタンがエントリーの編集画面で使えるようになります。

エントリーの編集画面

エントリーの編集画面より下の図のように登録したラベルのボタンより、引用URLを入力してお使いください。



Twitter でつぶやいたツイートを引用する

引用ユニットではTwitter でつぶやいたツイートを引用することもできます。

設定方法

管理画面から コンフィグ > プロパティ設定 に移動し、「Twitter アプリケーション」の項目を設定します。設定後、コンフィグ > 外部認証設定 で認証を行います。詳しくは、カスタマイズTipsの Twitter と連携する際の事前設定 の記事を参考ください。


Twitter アプリケーション項目のConsumer Key とConsumer Secretに記入する

設定完了後、引用ユニットをエントリーに追加し、引用したいツイートのURLを記入します。


スクリーンショット:引用ユニットにツイートのURLを記入する

保存をしたら、記入したURLのツイートがエントリーに反映されています。


スクリーンショット:エントリー内に引用されたツイート

メディアユニット

メディアユニット

メディアユニットとはメディア管理ページでアップロードした画像やPDFを挿入するためのユニットです。メディア管理ページについては後ほど説明します。エントリー編集画面のユニット追加ボタンからメディアを選択すれば画像やPDFを挿入できます。


スクリーンショット:メディアユニットボタン

たくさんの画像やPDFをアップロードしている場合、挿入したい目的のファイルを見つけ出すことが難しくなるのでメディア管理ページで、ファイルにラベルを付けておくと便利です。ラベルを付けておくことで、挿入したいファイルを絞り込むことができます。また、日付順、ID、ファイル名でファイルをソートすることもできます。挿入したいファイルをみつけたら、そのファイルを選択し、挿入ボタンを押してください。


スクリーンショット:メディア管理画面

挿入ボタンを押すことで、メディア管理ページでアップロードした画像やPDFを記事に挿入できます。

メディア管理機能

a-blog cmsでは、画像やPDFを一括管理するためにメディア管理機能が用意されています。この機能を利用すれば何度も同じファイルをアップロードする手間が省けます。メディアユニットでキャプションや代替テキスト、リンク先URLごと繰り返し使うことも可能です。

機能設定

管理画面の左のメニューにメディアの項目が無い場合はカスタマイズ管理からコンフィグを選択してください。コンフィグの機能設定ページに移動し、メディア管理の項目で、メディア管理を利用可能にするにチェックを入れてください。


スクリーンショット:コンフィグ管理画面

「メディア管理を利用可能にする」にチェックを入れると左のサイドバーにメディアという項目が追加されているはずです。


スクリーンショット:サイドバー

メディア管理ページ


メディアという項目を選択し、メディア管理ページに移動しましょう。メディア管理ページでは画像やPDFをアップロードすることができます。


スクリーンショット:メディア編集画面

投稿ページからのメディア管理


上記では管理ページでのメディア管理を説明していますが、投稿ページからもメディアの追加ができます。


メディアを追加する際、ユニットから「メディアを挿入」リンクで選択画面を表示しますが、このメディア選択画面のタブに「アップロード」がありますので、こちらから追加します。



追加されたメディアは、一覧画面から挿入可能になります。



ただし、投稿画面からのメディア管理は「追加」のみとなります。メディアのアップロード以外の「編集」は、管理ページから行ってください。


また、図のように、各PDFや画像に対して以下のような設定を行うことができます。


  • 画像の再アップロード
  • 画像の大きさの設定
  • 管理用ラベルの編集
  • パーマリンクの設定
  • キャプションの設定
  • リンク先の設定
  • 代替テキストの設定
  • テキストの設定

モジュールユニット

モジュールユニットとは

モジュールユニットとはエントリーのユニットとしてエントリーサマリーなどのモジュールを挿入することができるユニットです。テーマフォルダの決められた階層にHTMLのファイルを設置することで、選択したモジュールに対して好きなレイアウトやデザインを適応することも可能です。

管理画面の設定

編集設定



管理画面 > コンフィグ > 編集設定 のユニット追加ボタンにて、下の図のようにモジュールユニットを選択できるようにモードよりモジュールを選択し、そのユニットに対するラベルを記述します。
そうすることで下記の図のようにエントリーの編集画面にてモジュールユニットを選択できるようになります。



各モジュールIDの設定

モジュールIDをモジュールユニットで使用可能にするにはモジュールIDの編集画面にて下の図のように「レイアウトモジュール、モジュールユニットで使用」という項目にチェックを入れる必要があります。



テンプレートの設定

モジュールユニットで選択したモジュールIDをどのように表示するかをテンプレート側で記述することができます。これはレイアウト機能用モジュールのテンプレート作成方法と同じになりますので、テンプレートの作成方法は、レイアウト機能のページよりご確認ください。

モジュールユニットの使い方

エントリーの編集画面にてモジュールを選択します。すると下の図のようにモジュールと書かれたボタンが表示されますので、それをクリックします。



ボタンをクリックすることで下の図のようなモーダルウィンドウが出現します。 左のモジュール一覧から任意のモジュールをクリックすることで、モーダルの右側のプレビューより選択したモジュールがどのように表示されるか確認することができます。 プレビューより表示したい内容が確認できたら、選択するボタンを押すことで、モジュールの選択は完了です。



選択したモジュールは下の図のようにエントリーの編集画面においても確認可能です。


カスタムユニット

カスタムユニットを使えば、独自の内容に合わせたオリジナルのユニットを作成できます。カスタムフィールドでは、ユニットとユニットの間に挿入できませんが、カスタムユニットだと挿入できるので、管理画面の表現の幅が広がります。


1つのユニット内に、画像、3つのテキスト入力欄(値段、サイズ、重量が登録できるもの)が用意されている

カスタムユニットの例


Ver.2.7.27より、カスタムユニットでもフィールドグループが使用可能になりました。


1つのユニット内に、画像、3つのテキスト入力欄(値段、サイズ、重量が登録できるもの)が用意されている。カスタムユニットとは違い、項目を追加できる「追加ボタン」が増えている。

カスタムユニットのフィールドグループの例


カスタムユニットを使う方法

編集設定画面にボタンを追加する

カスタムユニットを利用するには、管理画面内のコンフィグの編集設定のページから、モードをカスタムに設定しているボタンを追加する必要があります

図のようにモードのセレクトボックスから「カスタム」を選択し、それに対するラベル名を決めてください(※ラベル名は、エントリー編集の際のユニット追加ボタンのラベルとして使用されます)。

保存ボタンをクリックして、設定を保存します。



現段階のカスタムユニットの状態

この段階でエントリー編集画面に移動し、エントリーの編集画面からユニットの追加ボタンを押しても、まだカスタマイズをしていないので空っぽのユニットが表示されるだけとなります。



入力フォームのカスタマイズ

次に、このユニットの部分に表示するカスタムユニットの入力フォームのカスタマイズ方法についてご説明します。

まずはカスタムフィールドを設置するためのファイルを作成します。カスタムユニットの入力フォームをカスタマイズするときには、/themes/自分のテーマ/admin/entryの中に、unitディレクトリを作り、custom.html(Ver.2.1.1.4以前をお使いの方は/admin/entryの中にcustom-unit.html)というファイルを作成してください。

作成したファイルに、カスタムユニットの入力フォームのソースコードを記述していきます(カスタムフィールドメーカー等を使って作成した入力用フォームを使うことが記述ミスが少なくなり、おすすめです)。

ご自身でカスタムフィールドまたはカスタムフィールドグループのソースコードから作成される際には以下の3つの点をご注意ください。

  • 変数指定の箇所の後に{id}を付加する
  • @グループ名の後ろに{id}を付加する(フィールドグループの場合)
  • field[]をunit{id}[]にする

例:カスタムユニットl(custom.html、またはVer.2.1.1.4以前はcustom-unit.html)



<!-- BEGIN product_image:veil -->
<div class="column-image- acms-admin-col-4">
	<!-- BEGIN_IF [{product_image@path}/nem] -->
		<img src="%{ARCHIVES_DIR}{product_image@path}" alt="" width="200" class="productImage">
		<input type="hidden" name="product_image{id}@old" value="{product_image@path}"><br>
		<div class="acms-admin-form-checkbox">
			<input type="checkbox" name="product_image{id}@edit" value="delete" id="input-checkbox-product_image{id}">
			<label for="input-checkbox-product_image{id}">
				<i class="acms-admin-ico-checkbox"></i>削除
			</label>
		</div>
		<!-- END_IF -->
		<input type="file" name="product_image{id}" size="20">
		<input type="hidden" name="unit{id}{id}[]" value="product_image{id}">
		<input type="hidden" name="product_image{id}:extension" value="image">
		<input type="hidden" name="product_image{id}@size" value="300">
		<input type="hidden" name="product_image{id}@filename" value="">
</div><!-- END product_image:veil -->
<!-- BEGIN custom_table:veil -->
<div class="acms-admin-col-8">
	<table class="customTable entryFormColumnTable">
		<!-- BEGIN product_price:veil -->
		<tr>
			<th>商品価格</th>
			<td><input type="text" name="product_price{id}" value="{product_price}" class="acms-admin-form-width-3quarters" placeholder="1,000"> 円
				<input type="hidden" name="unit{id}{id}[]" value="product_price{id}"></td>
		</tr><!-- END product_price:veil -->
		<!-- BEGIN product_price:veil -->
		<tr>
			<th>サイズ</th>
			<td><input type="text" name="product_size{id}" value="{product_size}" class="acms-admin-form-width-3quarters" placeholder="10cm x 10cm">
				<input type="hidden" name="unit{id}{id}[]" value="product_size{id}"></td>
		</tr><!-- END product_price:veil -->
		<!-- BEGIN product_price:veil -->
		<tr>
			<th>重量</th>
			<td><input type="text" name="product_amount{id}" value="{product_amount}" class="acms-admin-form-width-3quarters" placeholder="100g">
				<input type="hidden" name="unit{id}{id}[]" value="product_amount{id}"></td>
		</tr><!-- END product_price:veil -->
	</table>
</div><!-- END custom_table:veil -->

例:カスタムユニットのフィールドグループ(Ver. 2.7.27 以上で使用可能です)



<h2 class="acms-admin-admin-title2">製品スペック</h2>
<table class="js-fieldgroup-sortable adminTable acms-admin-table-admin-edit">
	<thead class="acms-admin-hide-sp">
	<tr>
		<th class="acms-admin-table-left acms-admin-admin-config-table-item-handle">&nbsp;</th>
		<th class="acms-admin-table-left">製品イメージ</th>
		<th class="acms-admin-table-left">詳細情報</th>
		<th class="acms-admin-table-left acms-admin-admin-config-table-action">削除</th>
	</tr>
	</thead>
	<tbody>
	<!-- BEGIN group_product:loop -->
	<tr class="sortable-item">
		<td class="item-handle"><i class="acms-admin-icon-sort"></i></td>
		<td class="js-img_resize_cf">
			<!-- BEGIN_IF [{product_image@path}/nem] -->
			<div>
				<img src="%{ARCHIVES_DIR}{product_image@path}" class="js-img_resize_preview" style="width:300px;">
			</div>
			<input type="hidden" name="product_image{id}@old[]" value="{product_image@path}" />
			<!-- ELSE -->
			<div>
				<img src="" class="js-img_resize_preview" style="width:300px;display:none;">
			</div>
			<!-- END_IF -->
			<input type="file" name="product_image{id}[]" class="js-img_resize_input" /><br />
			<input type="hidden" name="product_image{id}@size[]" value="300" />
		</td>
		<td>
			<div class="acms-admin-margin-bottom-small">
				<label for="product_price">商品価格</label>
				<input type="text" name="product_price{id}[]" value="{product_price}" id="product_price" class="acms-admin-form-width-full"/>
			</div>
			<div class="acms-admin-margin-bottom-small">
				<label for="product_size">サイズ</label>
				<input type="text" name="product_size{id}[]" value="{product_size}" id="product_size" class="acms-admin-form-width-full"/>
			</div>
			<div class="acms-admin-margin-bottom-small">
				<label for="product_amount">重量</label>
				<input type="text" name="product_amount{id}[]" value="{product_amount}" id="product_amount" class="acms-admin-form-width-full"/>
			</div>
		</td>
		<td><input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" /></td>
	</tr>
	<!-- END group_product:loop -->
	<tr class="sortable-item item-template">
		<td class="item-handle"><i class="acms-admin-icon-sort"></i></td>
		<td class="js-img_resize_cf">
			<img src="" style="display:none;width:300px;" class="js-img_resize_preview"/>
			<input type="file" name="product_image{id}[]" class="js-img_resize_input" /><br />
			<input type="hidden" name="product_image{id}@size[]" value="300" />
		</td>
		<td>
			<div class="acms-admin-margin-bottom-small">
				<label for="product_price">商品価格</label>
				<input type="text" name="product_price{id}[]" value="" id="product_price" class="acms-admin-form-width-full"/>
			</div>
			<div class="acms-admin-margin-bottom-small">
				<label for="product_size">サイズ</label>
				<input type="text" name="product_size{id}[]" value="" id="product_size" class="acms-admin-form-width-full"/>
			</div>
			<div class="acms-admin-margin-bottom-small">
				<label for="product_amount">重量</label>
				<input type="text" name="product_amount{id}[]" value="" id="product_amount" class="acms-admin-form-width-full"/>
			</div>
		</td>
		<td><input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" /></td>
	</tr>
	</tbody>
	<tfoot>
	<tr><td colspan="6"><input type="button" class="item-insert acms-admin-btn-admin" value="追加" /></td>
	</tr>
	</tfoot>
</table>
<input type="hidden" name="@group_product{id}[]" value="product_image{id}@alt" />
<input type="hidden" name="@group_product{id}[]" value="product_image{id}@path" />
<input type="hidden" name="@group_product{id}[]" value="product_image{id}@x" />
<input type="hidden" name="@group_product{id}[]" value="product_image{id}@y" />
<input type="hidden" name="@group_product{id}[]" value="product_image{id}@edit" />
<input type="hidden" name="@group_product{id}[]" value="product_image{id}@old" />
<input type="hidden" name="product_image{id}:extension" value="image" />
<input type="hidden" name="@group_product{id}[]" value="product_image{id}" />
<input type="hidden" name="unit{id}[]" value="product_image{id}" />
<input type="hidden" name="@group_product{id}[]" value="product_price{id}" />
<input type="hidden" name="unit{id}[]" value="product_price{id}" />
<input type="hidden" name="@group_product{id}[]" value="product_size{id}" />
<input type="hidden" name="unit{id}[]" value="product_size{id}" />
<input type="hidden" name="@group_product{id}[]" value="product_amount{id}" />
<input type="hidden" name="unit{id}[]" value="product_amount{id}" />
<input type="hidden" name="unit{id}[]" value="@group_product{id}" />

※2018年1月16日現在、デベロッパーサイト内・CMS内のフィールドグループはカスタムフィールドメーカーにて対応しておりません。まだ正式版ではありませんが、開発段階のカスタムフィールドメーカーをご使用ください。もし不具合等見つけましたら、GitHubのIsuueよりご連絡ください。

開発段階のカスタムフィールドメーカーを使うのではなく、ご自身で作成する場合

現段階ではカスタムフィールドグループで各項目を生成し、以下の3つの項目を修正してください。

  • 変数指定の箇所の後に{id}を付加する(例:product_size{id}[]、product_image{id}@old[]など)
  • @グループ名の後ろに{id}を付加する(例:@group_product{id}[]など)
  • field[]をunit{id}[]にする

出力内容のカスタマイズ

例:カスタムユニット(custom.html、またはVer.2.1.1.4以前はcustom-unit.html)

カスタムユニットの出力内容を実装していきます。カスタムユニットの出力内容をカスタマイズするときには、/themes/自分のテーマ/includeの中に、unitディレクトリを作りcustom.htmlというファイルを作成してください。
Ver. 2.1.1.4以前をお使いの方は/themes/自分のテーマ/include/の中にcustom-unit.htmlというファイルを作成してください。


出力内容の例


<h3 id="custom_unit-{utid}">%{ENTRY_TITLE}のスペック</h3>
<!-- BEGIN product_image:veil -->
<div class="column-image-left js_notStyle acms-col-md-4">
	<img src="%{ARCHIVES_DIR}{product_image@path}" alt="" />
</div><!-- END product_image:veil -->
<!-- BEGIN custom_table:veil -->
<div class="acms-col-md-8">
	<div class="entry-container">
		<table class="customTable">
			<!-- BEGIN product_price:veil -->
			<tr>
				<th>商品価格</th>
				<td>{product_price}円</td>
			</tr><!-- END product_price:veil -->
			<!-- BEGIN product_price:veil -->
			<tr>
				<th>サイズ</th>
				<td>{product_size}</td>
			</tr><!-- END product_price:veil -->
			<!-- BEGIN product_price:veil -->
			<tr>
				<th>重量</th>
				<td>{product_amount}</td>
			</tr><!-- END product_price:veil -->
		</table>
	</div>
</div><!-- END custom_table:veil -->

例:フィールドグループ



<h3 id="custom_unit-{utid}">%{ENTRY_TITLE}のスペック</h3>
<!-- BEGIN group_product:loop -->
<!-- BEGIN product_image:veil -->
<div class="column-image-left js_notStyle acms-col-md-4">
	<img src="%{ARCHIVES_DIR}{product_image@path}" alt="" />
</div><!-- END product_image:veil -->
<!-- BEGIN custom_table:veil -->
<div class="acms-col-md-8">
	<div class="entry-container">
		<table class="customTable">
			<!-- BEGIN product_price:veil -->
			<tr>
				<th>商品価格</th>
				<td>{product_price}円</td>
			</tr><!-- END product_price:veil -->
			<!-- BEGIN product_price:veil -->
			<tr>
				<th>サイズ</th>
				<td>{product_size}</td>
			</tr><!-- END product_price:veil -->
			<!-- BEGIN product_price:veil -->
			<tr>
				<th>重量</th>
				<td>{product_amount}</td>
			</tr><!-- END product_price:veil -->
		</table>
	</div>
</div><!-- END custom_table:veil -->
<!-- END group_product:loop -->

出力内容のテンプレートはカスタムフィールドのテンプレートと同じように変数を挿入するだけで出力されます。

フィールドグループの場合は、<!-- BEGIN xx:loop --><!-- END xx:loop -->の記述をループ処理をしたい箇所の前後に追加してください。

デベロッパーサイトのカスタムユニットメーカーを使用する


管理画面用のカスタムユニットのHTMLを手作業で記述することは、項目数が増えると手間がかかります。そこで、カスタムユニットのHTMLの生成を簡単にするカスタムユニットメーカーを本デベロッパーサイトに用意しました。

カスタムユニットメーカーを使えばカスタムユニットの編集用に使用するラジオボタンや、画像等をアップロードできるHTMLをボタン操作のみで生成することができます。

※2018年1月16日現在、デベロッパーサイト内・CMS内のフィールドグループはカスタムフィールドメーカーにて対応しておりません。まだ正式版ではありませんが、開発段階のカスタムフィールドメーカーをご使用ください。もし不具合等見つけましたら、GitHubのIsuueよりご連絡ください。

カスタムユニットメーカーで設置できる項目

カスタムユニットメーカーでは下記の項目のHTMLを出力できます。

  • テキスト
  • テキストエリア
  • セレクトボックス
  • ラジオボタン
  • ファイル
  • 画像

カスタムユニットメーカーの場所

カスタムユニットメーカーはVer.2.5よりa-blog cmsの管理画面、および本デベロッパーサイト内に設置されています。本デベロッパーサイト内のドキュメントのリファレンスよりカスタムフィールドメーカーを選択すると移動できます。是非サイト制作にお役立てください。


カスタムフィールドメーカーの使い方

1.まず、ラジオボタンを選択します。カスタムユニットをご使用の場合は「カスタムユニット」を選択します。



2.つぎに、入力欄の種類を選びます。

3.テキストを選択するとタイトルとフィールドという入力フォームが現れますので値を入力してください。[生成]ボタンをクリックすると、カスタムユニットのHTMLが生成されます。


生成されたHTMLコードを、/themes/自分のテーマ/admin/entry/unit/の中のcustom.htmlにペーストしてご使用ください。
(Ver. 2.1.1.4以前をお使いの方は/themes/自分のテーマ/admin/entry/の中にcustom-unit.htmlというファイルを作成して、コードを貼付けてご使用ください)

マイクロページ機能を使ってエントリーをページ分割表示する

この内容は、a-blog cms Ver.2.6.0をもとに説明しています。ご利用のバージョンによって、画面表示や内容が若干異なる場合があります。ご了承ください。
ここでは、マイクロページ機能を使った、エントリーの分割表示について説明します。

マイクロページとは?

マイクロページ機能を利用することで、1つのエントリーを複数のページに分けて表示できるようになります。ページの移動には、いくつかの表示方法を選択することもできます。長文エントリーを複数ページに分けて、読みやすくしたい場合などにご利用ください。

マイクロページ機能を使用するための設定

改ページのユニットを追加する

マイクロページ機能では「改ページ」というユニットを追加する必要があります。 まず、 管理ページ > コンフィグ > 編集設定 からユニット追加ボタンに項目を追加してください。
このとき、モードの選択肢に「改ページ」がある場合は改ページを選択し、無い場合はモードで「拡張」を選択して入力欄には「break」を入力してください。いずれの場合もラベルに「改ページ」を記入し、保存します。
管理ページ > コンフィグ > ユニット設定 を見ると、一番下に改ページのユニットが追加しているのを確認できます。ここで「改ページ」ボタンをクリックして、改ページリンクのラベルを設定しましょう。例では「続きを読む」としました。ラベルが設定できたら保存します。


ユニット追加ボタンにこのように記述してください


ユニット設定で追加したことを確認できます


マイクロページ機能を有効にする


マイクロページ機能を使用するためには、まず 管理ページ > コンフィグ > エントリー本文 ( Entry_Body ) からマイクロページ機能を有効にする必要があります。
また、これらの設定は、モジュールIDとして使用する場合も同様の手順となります。


マイクロページ機能にチェックをします


マイクロページに関連する設定は、以下の3つです。

  • マイクロページ機能ON/OFF
  • 前後に表示するページ数
  • 現在のページの要素の属性

必要に応じて変更してください。

テンプレート側の準備

マイクロページのページ送りのためのソースコードをテンプレートに記述する必要があります。エントリーの表示に使用しているテンプレートファイル内で Entry_Body モジュール内の <!-- END_MODULE Entry_Body --> の上に記述します。

マイクロページでのページ送りの記述

<!-- BEGIN micropage:veil --><!-- BEGIN micropageLink -->
<p><a href="{url}">{label}</a></p><!-- END micropageLink --><!-- END micropage:veil -->

<!-- BEGIN micropager -->
<p>
    全 {itemsAmount} 件中 {itemsFrom} 〜 {itemsTo} 件目を表示
    <!-- BEGIN page:loop --><!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear --><!-- BEGIN glue -->, <!-- END glue --><!-- END page:loop -->
    <!-- BEGIN lastPage:veil --> ...<a href="{lastPageUrl}">{lastPage}</a><!-- END lastPage:veil -->
</p>
<p>
    <!-- BEGIN backLink --><a href="{url}">« 前の{backNum}件</a><!-- END backLink -->
    <!-- BEGIN forwardLink --><a href="{url}">次の{forwardNum}件 »</a><!-- END forwardLink -->
</p><!-- END micropager -->

マイクロページの分割部分を作成する

エントリーの登録

マイクロページ機能を使用する設定ができたら、実際にページ分割したエントリーを作成してみましょう。
エントリーの分割には「改ページ」ユニットを使用します。


「改ページ」の追加ボタン


テキストや画像のように、改ページをするユニットを、ページ分割したい部分に追加します。下記の例では3ページ構成とし、文章と画像の下に改ページを追加しています。


3つ目のユニットとして「改ページ」


このように「改ページ」ユニットを追加すると、エントリーの詳細表示時に以下のようにページが分割された状態で表示されます。今回の例では、3ページに分割しています。


1ページ目

2ページ目


3ページ目


ラベルの変更


今回は管理ページのユニット設定で「続きを読む」というラベルを設定したため、エントリー登録時に改ページユニットを追加した時には「続きを読む」というテキストでリンクされていますが、エントリー登録時にこの部分を編集することで、次ページへのリンクのテキストを変更できます。
例えば、内容に合わせて「具体的な解決方法は次のページで!」といったように、テキストを変更することで、より効果的にマイクロページを使うことができます。

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

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

ユニットグループとは?

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


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

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


ユニットグループ機能を使用するための設定

ユニットグループ機能を有効にする

ユニットグループ機能を使用するためには、まず管理ページ > コンフィグ > 編集設定からユニットグループ機能を有効にする必要があります。

ユニットグループを作成する

ユニットグループは複数のユニットを囲むdiv要素を付与する機能です。このため、ユニットグループとして囲むdiv要素に適用されるclass属性と、選択肢として使用するラベルを設定する必要があります。

スタイルを作成する

ユニットグループに設定したclass属性に相当するスタイルは、/themes/system/css/acms.css 内に記述されているため、変更の必要はありませんが、システムのアップデートによる変更に備えて、ご利用の際はオリジナルのテーマフォルダにCSSファイルを複製してご利用ください。 幅に必要なグリッドの数に合わせて「acms-col-sm-※」の※部分の数字を変更してご利用ください。 また、1カラムに指定されている「acms-column-clear」については、デベロッパーサイトのドキュメントのコンフィグに「ユニットグループ」として記載していますので合わせてご確認ください。

以下、標準のテーマ「site2016」に設定されている内容を元に説明していきます。


それぞれ「acms-column-clear:1カラム」、「acms-col-sm-6:2カラム」、「acms-col-sm-4:3カラム」に設定している

site2016での設定


ユニットグループの適用方法

複数のユニットをユニットグループでまとめる

複数のユニットをまとめるためには、どのユニットからどのユニットまでをまとめるのかを決める必要があります。そのために、ユニットのヘッダー部分にある[グループ]を使用します。


グループいうラベルと紐づけられたセレクトメニューに「---、1カラム、2カラム、3カラム」と表示されている

[グループ]から選択





仮に「2カラム」のグループでまとめる場合、まとめたい最初のユニットのグループを「2カラム」にします。



「2カラム」でまとめたい最後のユニットまでは、ユニットのグループを「---」に設定します。これで複数のユニットが「2カラム(acms-col-sm-6)」というグループ(div要素)でまとめられました。



再度ユニットグループの設定をする場合には、ユニットにグループの設定を行います。例として再度「2カラム」のユニットグループを開始します。このユニットグループは、1エントリ内に何回でも作成できます。


ユニットグループ機能を使用した具体的な例

上記のように、複数のユニットをグループ化することでどのようなレイアウトが実現できるか見てみましょう。


1回目と2回目の2カラムでは、画像ユニットに「2カラム」、テキストユニットには「---」と設定されているが、3回目の1カラムでは、画像ユニットに「1カラム」、テキストユニットには「---」と設定されている

エントリー入力画面


上記の図は、エントリー入力画面です。

この例では「2カラム」のユニットグループと「1カラム」のユニットグループをしています。「2カラム」として囲むdiv要素にはCSS(.acms-col-sm-6)で2段組みの設定がされています。「1カラム」として囲むdiv要素ではacms-column-clearというclass属性をa-blog cmsがユニットの終わりだと解釈し、1段組み(全幅を使う)の設定がされています。

1つ目のユニットで「2カラム」を開始、2つ目のユニットには指定がないため「2カラム」が継続されます。(赤色で着色した部分です)

3つ目のユニットでは2回目の「2カラム」が指定され、2つ目のグループが始まります。4つ目のユニットには指定がないため「2カラム」が継続されます。(青色で着色した部分です)

5つ目のユニットで「1カラム」を開始しています。3つ目のグループが始まります。6つ目と7つ目のユニットには指定がないため「1カラム」が継続されます。(黄色で着色した部分です)

このように、複数のユニットをまとめる(ユニットグループ化する)ことで、段組みなどのレイアウトや、複数のユニットにまたがる枠線の表示が実現できます。


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

実際の表示



ユニットグループを解除するときの注意点

管理ページ > コンフィグ > 編集設定 でのユニットグループに記述されている「acms-column-clear」は、「acms-col-sm-*」などとはことなり、ユニットグループの解除(1カラム)の設定であり、システム側で使用しているものになります。class属性名を変更せず運用してください。

エントリーのユニット設定

[ユニット設定]画面では、エントリー作成画面で入力するユニットの設定ができます。この設定により、新規にエントリーを作成する時のユニットの設定をあらかじめ決めておいたり、ユニットを追加する時のユニットの設定を決めておくことができます。入力する内容の形式が決まっている場合にユニット設定をしておけば、毎回ユニットの種類を自分で設定しなくてもよくなります。


[ユニット設定]は、管理者のみ設定可能です。編集者/投稿者/購読者には[コンフィグ管理]画面は表示されません。

[ユニット設定]画面を表示するには、管理ページ > コンフィグ > ユニット設定 へ進みます。


管理ページ > コンフィグ > ユニット設定


[ユニット設定]画面


ユニットを追加・削除する

ユニット編集画面では、エントリー作成時に使用する「テキスト」「画像」などの各ユニットボタンをクリックした時に表示される情報の入力枠を編集できます。これらは 管理ページ > コンフィグ > 編集設定 の「ユニット追加ボタン」で追加したものが表示され、編集できます。以下、各ユニットに共通の追加・削除について説明します。

(1)ユニットを追加するには、[テキスト][画像]などのボタンをクリックします。削除するには、各ユニット右側の[削除]ボタンをクリックします。

(2)[保存]ボタンをクリックします。



エントリー新規作成時のユニットの初期設定をする

エントリーを新規に作成する時の、入力画面のユニットの設定をおこないます。

(1)[ユニット設定]画面の[新規記事作成]項目にユニットを追加・削除し、初期設定として表示させたいユニットを設定します。それぞれのユニットの詳細設定も可能です。ここでは、例として以下の図のように設定しました。



(2)[保存]ボタンをクリックします。

(3)[エントリー作成]ボタンをクリックします。

(4)エントリー作成画面で、先ほど[ユニット設定]画面で設定したユニットが初期状態として表示されるようになります。


エントリー作成画面の初期状態

エントリー作成画面の初期状態


ユニット新規追加時の初期設定をする

エントリー作成画面で、新しくユニットを追加する時の初期設定も可能です。

(1)[ユニット設定]画面の各ユニット(テキスト、画像など)で入力枠の追加・削除などの設定をおこない、[保存]ボタンをクリックします。

(2)エントリー作成画面の[追加]で各ボタンをクリックすると、手順(1)で設定したユニットが初期状態として表示されるようになります。


ユニットの拡張機能

ユニットの拡張機能

ユニットの拡張機能をつかえば、デフォルトで出力されるエントリーのテキストユニットや画像ユニットに足りないHTMLやCSSを補うことが出来ます。この機能を使うことで、HTMLやCSSを知らない一般の方々でも簡単に装飾したユニットを扱っていただくことができます。
例としましては、下の図のようにテーブルを左右にスライドするテーブルや画像を画像見出しを作成することがカスタマイズで可能になります。

テーブルをスライドするテーブルに

入力例


出力例

<div class="entry-container slideTable">
    <table>
        <tbody>
            <tr>
                <th>会社名</th>
                <th>郵便番号</th>
                <th>住所</th>
                <th>電話番号</th>
            </tr>
            <tr>
                <td>有限会社アップルップル</td>
                <td>〒450-0002</td>
                <td>愛知県名古屋市中村区 3丁目18−5 モンマートビル5F</td>
                <td>052-485-8577</td>
            </tr>
        </tbody>
    </table>
</div>

画像を画像見出しに

入力例


出力例

<h2><img class="columnImage" src="/ablogcms/archives/001/201201/4ef13df83cca3.png" alt="ablog cms ロゴ" width="386" height="104"></h2>

標準ユニット一覧

拡張できるユニットはテキストユニットだけではなく、全てのユニットを拡張することができます。

textテキストユニット
image画像ユニット
fileファイルユニット
mapマップユニット
youtubeYouTubeユニット
eximage画像URLユニット
break改ページのユニット
yolpYahoo地図ユニット
videoビデオユニット
mediaメディアユニット
quote引用ユニット
moduleモジュールユニット
customカスタムユニット

カスタマイズするテンプレート

ご利用のテーマ内の/include/の中にunitディレクトリを作り、テキストユニットを拡張したい場合はtag-select.html、その他のユニットを拡張したい場合はextend.htmlを作成します。tag-select.htmlまたはextend.htmlに記述することで拡張することができます。

Ver.2.1.1.4以降より、unit.htmlに<!--#include file="/include/unit/tag-select.html"-->と<!--#include file="/include/unit/extend.html"-->のインクルード文が追加されました。

Ver.2.1.1.3以前のバージョンをお使いの方へ

Ver.2.1.1.3以前では、/themes/system/include/の中にあるunit.htmlをお使いのテーマのincludeディレクトリにコピーし、編集することで拡張したいユニットをカスタマイズすることができます。

実際にスライドするテーブルを作成する

今回はテキストユニットを拡張して、スライドするテーブルを設置してみましょう。先の例にありました画像見出しのカスタマイズについては画像の見出しを設定できるようにする | ユニットのカスタマイズ の記事で詳しく説明しておりますので、ご参考にしてください。

編集設定

管理画面のコンフィグにある編集設定より、下の図のように新たにユニットを追加します。このときモード拡張にしましょう。モードのとなりのテキストフィールドにはtext_slidetableのように拡張したいユニット名+アンダーバー+任意の文字列を入力します。


ユニット設定

設定したボタンに対して使用するユニットを設定します。今回はスライドテーブルを選択し、タグには「テーブル」を選択しましょう。


テンプレートの編集

次にテンプレートの編集をしていきます。今回はテキストユニットの拡張のため、Ver2.1.1.4以降をお使いの方はtag-select.htmlまたはVer.2.1.1.3以前ではunit.htmlの編集です。

tag-select.htmlの編集

unit#+拡張したいユニット名+アンダーバー+任意の文字列のブロックを記述します。このブロック内に出力内容を記述します。ここでいう任意の文字列とは、管理画面のコンフィグの編集設定で、拡張ユニットに対して付けた名前になります。

<!-- BEGIN unit#text_slidetable -->
	<!-- BEGIN table -->
		<div class="entry-container slideTable"><table{class}>{text}[table]</table></div>
	<!-- END table -->
<!-- END unit#text_slidetable -->

unit.htmlの編集

unit.htmlはsystemテーマのincludeディレクトリの中にあります。このファイルを現在お使いのテーマにコピーしましょう。 unit.htmlの<!-- BEGIN unit:loop --><!-- END unit:loop -->内に、tag-select.html と同じように追記してください。

CSSの編集

見せ方に応じてCSSを編集しましょう。下は編集例になります。

.slideTable{
	overflow-x:scroll;
}
.slideTable table,
.slideTable tbody,
.slideTable tr,
.slideTable td,
.slideTable th{
	white-space: nowrap;
}

エントリーの編集画面

エントリーの編集画面から下の図のように、スライドテーブルを追加してご利用ください



インライン要素の挿入リンクをカスタマイズする

これはVer.2.7以前のテキストユニットをカスタマイズする方法です。Ver.2.8以降でテキストユニットをカスタマイズしたい場合はこちらの記事をご覧ください。

ユニットの右下には、「リンク挿入(aタグ)」、「強調1(em)」、「強調2(strong)」の3つリンクがデフォルトで用意されています。それぞれクリックするとインライン用のタグが挿入される仕組みになっているのですが、これらの項目はカスタマイズ次第で増やすことができます。

たとえば、smallタグを増やすことができます。



実装方法


systemフォルダの中にある、/ajax/emoji-edit.html をカスタマイズします。カスタマイズする際は、オリジナルのテーマの中にテンプレートをコピーしてください。

a-blog cms のバージョンをアップデートしたときに、systemフォルダ上書きしないために、管理画面のテンプレートをカスタマイズする際はオリジナルテーマにテンプレートを持ってきましょう

テンプレートの中身は以下のようになっています。

<span class="js-tag_insertion">
<!--<p> -->
  <a href="#" class="emoji-trigger-tag" rel="a" title="リンク先のURLを入力してください">リンク挿入</a>
  <!--<a href="#" class="emoji-trigger-tag" rel="strong">強調</a>-->
  <a href="#" class="emoji-trigger-tag" rel="em">強調1</a>
  <a href="#" class="emoji-trigger-tag" rel="strong">強調2</a>
  <!--<a href="#" class="emoji-trigger-tag" rel="u">下線</a>-->
<!--
  文字色
  <a href="#" class="emoji-trigger-text" rel="color-red"><span class="color-red">赤</span></a>
  <a href="#" class="emoji-trigger-text" rel="color-blue"><span class="color-blue">青</span></a>
  <a href="#" class="emoji-trigger-text" rel="color-yellow"><span class="color-yellow">黄</span></a>
  <br />
-->
<!--</p> -->
</span>

8行目に以下の記述追記します。

追加する記述

<a href="#" class="emoji-trigger-tag" rel="small">細則</a>
  1. rel="" には挿入したいHTMLの要素を指定してください。ここでは「small」としました。
  2. aタグの中には運営者がわかりやすいように日本語でラベルを記入してください。ここでは「細則」としました。

追記後

<span class="js-tag_insertion">
<!--<p> -->
  <a href="#" class="emoji-trigger-tag" rel="a" title="リンク先のURLを入力してください">リンク挿入</a>
  <!--<a href="#" class="emoji-trigger-tag" rel="strong">強調</a>-->
  <a href="#" class="emoji-trigger-tag" rel="em">強調1</a>
  <a href="#" class="emoji-trigger-tag" rel="strong">強調2</a>
  <!--<a href="#" class="emoji-trigger-tag" rel="u">下線</a>-->
  <a href="#" class="emoji-trigger-tag" rel="small">細則</a>
<!--
  文字色
  <a href="#" class="emoji-trigger-text" rel="color-red"><span class="color-red">赤</span></a>
  <a href="#" class="emoji-trigger-text" rel="color-blue"><span class="color-blue">青</span></a>
  <a href="#" class="emoji-trigger-text" rel="color-yellow"><span class="color-yellow">黄</span></a>
  <br />
-->
<!--</p> -->
</span>

マークダウンに対応するには

emoji-edit.htmlをカスタマイズすると、htmlでの挿入ができるようになるのですが、マークダウンでは対応しておりません。対応するには、/js/dispatch/edit/_emojiedit.js をカスマイズします。(※バージョンアップの際は上書きしないようにご注意ください)

圧縮されていますので、解凍します。Ver.2.5.1.2 では19行目から31行目に記述があります(他のバージョンでは行数が変わっている可能性がありますので、付近を探してください)ので、参考にして記述してください。

たとえば、以下のように追記します。

case "small":
  $(acms_textarea).selection("<small>" + txt + "</small>");
  break;

2行目の<small>と</small>と書かれている場所はマークダウンのときにテキストエリア内に表示される要素になります。たとえば、強調1の場合だと以下のようになっています。

case "em":
  $(acms_textarea).selection("*" + txt + "*");
  break;

テキストユニットに独自のclass属性を設定したい

テキストユニットに独自のclass属性を設定したい


テキストユニットは「本文」「見出し2」などの要素をセレクトメニューから選択して使用します。独自の装飾・スタイルを適用したいときにclass属性を設定したい場合があります。
このような場合は、編集設定からclass属性を設定したテキストユニットを作成します。


設定方法


設定は、ログイン後に管理メニュー > コンフィグ > 編集設定 にて登録します。

編集設定のテキストタグセレクトがエントリー作成時のテキストユニットの元になっています。この「タグ」部分に . を追加してclass属性を設定できます。
#を追加してid属性を設定することも可能です。ただしユニットは自由に何度でも追加できますのでページ内でidが重複しないように注意が必要になります。



使用方法



エントリーの作成・編集画面のテキストユニットで、追加した内容が選択できるようになります。
この例の場合では「ボタン(灰色)」というテキストユニットを使用した場合、p要素にclass="entry-btn" が追加されたものがエントリーに反映されます。

テキストユニットの設定に拡張フィールドを追加する

カスタマイズすることで、テキストユニットの設定に拡張欄を追加できます。「テキストユニットに独自のclass属性を設定したい」とは違い、それぞれのテキストユニット固有の設定を付与することができます。

たとえば、以下の画像ではid属性を追加できるように設定しました。



設定方法

設定をするには管理画面とテンプレート側の設定が必要になります。

管理画面側の設定

管理画面>コンフィグ>編集設定の順にページを移動し、テキストタグセレクトの項目に「拡張」という入力欄があります。この入力欄には、エントリー編集時の入力欄に適応したいラベルを設定してください。

「拡張」の入力欄に値が入っていると、エントリー編集ページで新しく入力欄が表示されます。




テンプレート側の設定

/themes/オリジナルのテーマ/include/unit.html を修正します(※オリジナルのテーマに/include/unit.htmlがない場合は、systemテーマからコピーしてください)。

{extend_tag}という変数を適応したいテキストタグセレクトに追加してください。たとえば、h2要素にid属性を付与したい場合は以下のように記述してください。

<!-- BEGIN h2 -->
<h2{class} <!-- BEGIN_IF [{extend_tag}/nem] -->id="{extend_tag}"<!-- END_IF -->>{text}[nl2br]</h2><!-- END h2 -->

※最新バージョンではh2,h3,h4,h5要素にはデフォルトで/include/unit.htmlにid属性を適用するための記述が行われています。

「テキストユニットの設定に拡張フィールドを追加する」方法は以上となります。確認すると、エントリー編集時に入力した値が反映されているはずです。

ユニットを拡張して画像見出しユニットを作成する

標準の設定では、画像は画像ユニットを利用し、見出しはテキストユニットを利用します。ここでは、画像を見出しとして設定する「画像見出し」ユニットを用意する方法を説明します。

1. ユニット追加ボタンを設定

ユニットを追加する際に「画像見出し」を追加できるようにする必要がありますので、管理ページ > コンフィグ > 編集設定 > ユニット追加ボタン から以下のような設定を追加します。


モードimage_h2
ラベル画像見出し


2. ユニット設定の追加


管理ページ > コンフィグ > ユニット設定 にアクセスし、「画像見出しを追加」というボタンが増えているのを確認できます。また、一番下に「画像見出し」というユニットが追加されていますので、そこに「画像見出し」ボタンをクリックして1つ画像見出しユニットを追加してください。


3. テンプレートを調整

ユニットのカスタマイズには /themes/system/include/unit.html をカスタマイズすると、テキストユニットや画像ユニットをカスタマイズできます。(※ CMSのバージョンアップデート時に上書きしてしまう可能性があるため、このファイル自身を修正するのではなく、現在制作しているテーマの include/unit.html にコピーして修正ください)

そこで、今回は画像ユニットを改良して、画像見出しユニットを作ります。アイデア次第では、同じような考え方でオリジナルのテキストユニットを作ることが可能です。

画像ユニット

<!-- BEGIN unit#image -->

<!-- 画像 -->
<div class="column-image-{align}{display_size_class}"{display_size}[raw]><!-- BEGIN link#front -->
	<a href="{url}"{viewer}[raw]><!-- END link#front -->
		<img class="columnImage" src="%{HTTP_ROOT}{path}" alt="{alt}" width="{x}" height="{y}"><!-- BEGIN link#rear -->
	</a><!-- END link#rear --><!-- BEGIN_IF [{caption}/nem] -->
	<p class="caption">{caption}</p><!-- END_IF -->
</div><!-- END unit#image -->

画像見出しユニット

<!-- BEGIN unit#image_h2 -->
<!-- 画像見出し -->
<h2><img src="%{HTTP_ROOT}{path}" alt="{alt}" width="{x}" height="{y}"></h2>
<!-- END unit#image_h2 -->

今回のカスタマイズのポイントは、ユニット追加ボタンのモードの設定で、標準のモード+アンダーバー+任意の文字 でモードを記述し、標準のモードを継承したユニットを作ることです。

下記に、デフォルトのモードを一覧にした表を用意いたしました。参考にしてください。

標準のモードリスト

textテキストユニット
tableテーブルユニット
image画像ユニット
fileファイルユニット
mapマップユニット
videoビデオユニット
eximage画像URLユニット
yolpYahoo地図ユニット
videoビデオユニット
mediaメディアユニット
quote引用ユニット
moduleモジュールユニット
break改ページユニット
customカスタムユニット

ユニットの多言語対応

ユニットの多言語対応



上のようにa-blog cmsでは、2.1からユニットに対して複数の項目を登録することができるようになりました。この機能を使えば多言語対応のサイトを作ることも可能です。 例えば、http://example.com/には日本語を、http://example.com/en/には英語をユニットに表示することが可能です。


実装方法

編集ページのカスタマイズ

/themes/system/admin/entry/unit.htmlを自分のテーマにコピーしてきます。 多言語したいユニットのブロックを以下のように編集します。(ソースはテキストユニットを多言語化する場合になります)

<!-- BEGIN text -->
<div class="acms-admin-tabs-inverse">
	<ul class="js-acms_admin_tabs">
		<li><a href="#tab{id}_ja">日本語</a></li>
		<li><a href="#tab{id}_en">English</a></li>
	</ul>
	<div id="tab{id}_ja" class="acms-admin-tabs-panel">
		<textarea type="text" name="text_text_{id}[]" rows="10" style="width:100%;" class="entryFormTextarea {diff}" placeholder="日本語">{text}[escape|escvars]</textarea>
	</div>
	<div id="tab{id}_en" class="acms-admin-tabs-panel">
		<textarea type="text" name="text_text_{id}[]" rows="10" style="width:100%;" class="entryFormTextarea {diff}" placeholder="English">{text2}[escape|escvars]</textarea>
	</div>
</div>
<br />
<div class="js-extendTagSelect">
	<select name="text_tag_{id}"><!-- BEGIN textTag:loop -->
		<option value="{value}" {selected} data-tag_extend="{extend}">{label}</option><!-- END textTag:loop -->
	</select>
	<span class="acms-admin-extend-field"></span>
	<input type="text" name="text_extend_tag_{id}" value="{extend_tag}" />
</div>
<div class="editTextInsert">
	<span class="emoji-edit acms-admin-hide-sp"></span><!-- BEGIN_IF [%{MEDIA_LIBRARY}/eq/on] -->
	<a href="#" class="js-media_insert">メディアを挿入</a><!-- END_IF -->
</div><!-- END text -->

カスタマイズのポイントは、input要素のname属性に[]をつけることで、配列化させます。また入力値を表示する変数は2つめ以降の変数に数値をつけて入力値を表示します。例:{text2} {text3}...と多言語数に応じて増えていく。

/themes/site2015/admin/entry/unit_language.html が多言語ユニット編集画面のサンプルになりますのでご参考ください。

表示側のカスタマイズ

表示側はテンプレートを分けることにより実装します。ここではテーマから分けて実装していきます。 まずカスタマイズされたテーマを継承して「en@カスタマイズテーマ」というディレクトリを/themes/に作成します。

次に、/themes/system/include/unit.htmlen@カスタマイズテーマにコピーします。 編集画面のカスタマイズではテキストユニットを多言語化したので、表示側もテキストユニットを多言語化させます。このテーマは英語のテーマになるので、テキストユニットの英語の入力が表示されるようにします。

<!-- テキスト -->
<!-- BEGIN p -->
<p{class}>{text2}[nl2br]</p><!-- END p --><!-- BEGIN h2 -->
<h2{class} id="{extend_tag}">{text2}[nl2br]</h2><!-- END h2 --><!-- BEGIN h3 -->
<h3{class} id="{extend_tag}">{text2}[nl2br]</h3><!-- END h3 --><!-- BEGIN h4 -->
<h4{class} id="{extend_tag}">{text2}[nl2br]</h4><!-- END h4 --><!-- BEGIN h5 -->
<h5{class} id="{extend_tag}">{text2}[nl2br]</h5><!-- END h5 --><!-- BEGIN ul -->
<ul{class}>{text2}[list]</ul><!-- END ul --><!-- BEGIN ol -->
<ol{class}>{text2}[list]</ol><!-- END ol --><!-- BEGIN dl -->
<dl{class}>{text2}[definition_list]</dl><!-- END dl --><!-- BEGIN blockquote -->
<div class="entry-container"><blockquote{class}>{text2}[nl2br]</blockquote></div><!-- END blockquote --><!-- BEGIN table -->
<div class="entry-container"><table{class}>{text2}[table]</table></div><!-- END table --><!-- BEGIN pre -->
<div class="entry-container"><pre{class}>{text2}</pre></div><!-- END pre --><!-- BEGIN none -->
{text2}[raw]<!-- END none --><!-- BEGIN markdown -->
{text2}[markdown]<!-- END markdown --><!-- BEGIN wysiwyg -->
{text2}[raw]<!-- END wysiwyg -->

<!--#include file="/include/unit/tag-select.html"-->

<!-- END unit#text -->

元のテキストユニットと違うところは、出力されるテキストの変数{text}が{text2}に変更されているのみになります。

/themes/site2015/include/unit_language.html が多言語ユニットの表示側サンプルになりますのでご参考ください。

エイリアスでテーマの切り替え

エイリアス機能を使ってURLで表示言語を切り替えられるように実装します。


  1. 管理ページ > エイリアス管理 に移動
  2. ドメインはそのまま、コードネームに"en"を入力して保存
  3. 保存後エイリアス管理一覧に移動し作成したエリアスのIDをメモ
  4. ルール管理画面に移動してルールを作成
  5. 詳細情報のエイリアスIDに先ほどメモした値を入力して"="に設定
  6. ルール一覧に戻り作成したルールのコンフィグに移動
  7. テーマ設定に移動しテーマディレクトリ名に「en@カスタマイズテーマ」を指定

1. 管理ページ > エイリアス管理 に移動


右上の「エイリアス作成」をクリック

多言語対応では、a-blog cmsの「エイリアス」機能を使います。エイリアス機能は、該当ブログを設定したドメイン以外のもので表示をすることができます。今回はひとつのエントリーを日本語用URLと英語用URLで表示するために使用します。


ドメインはそのまま、コードネームに"en"を入力して保存


エイリアス管理画面

http://sample.com/en/ で英語表示ができるように設定します。
「ドメイン」は現在のブログで使っているドメインを、「コードネーム」はhttp://sample.com/◯◯/に入れたい文字列を入力してください。「名前」はわかりやすいものを自由につけてください。


3. 保存後、エイリアス管理一覧に移動し、作成したエリアスのIDをメモ


エイリアス一覧

この後の工程で「エイリアスID」が必要になります。今回の場合(画像参照)は、「英語対応」エイリアスのIDは「1」です。


4. ルール管理画面に移動してルールを作成


管理画面の「ルール」で先ほど作った「英語対応」エイリアスに対応する「英語対応」ルールを新規作成します。ルール機能では、各種IDやユーザーエージェントなどの条件ごとにコンフィグを変更することができます。


5. 詳細情報のエイリアスIDに先ほどメモした値を入力して"="に設定


ルール作成画面

作成したルールの「詳細情報」内「エイリアスID」の項目にさきほどメモしたエイリアスID(本エントリーの場合は1)を入力し、演算子「=」を選択します。


6. ルール一覧に戻り作成したルールのコンフィグに移動


ルール一覧

ルール一覧から先ほど作成した「英語対応」ルールのコンフィグに移動します。「コンフィグ」ボタンはルール名の右側にあります。


7. テーマ設定に移動し、テーマディレクトリ名に「en@カスタムテーマ」を指定


コンフィグの「テーマ」からこのルールで表示するテーマとして、「en@カスタムテーマ」を指定します。これで、http://sample.com/en/ のときにはテーマ「en@カスタムテーマ」が表示されるようになりました。

画像URLユニット

画像URLユニットは、外部に保存されている画像ファイルをエントリ内に表示させるためのユニットです。

画像ファイルの表示について

通常、a-blog cmsでは画像ユニットを使用してサーバ上に画像ファイルをアップロードし、その画像ファイルを表示しています。
画像URLユニットは、外部のサーバにある画像のURLを直接指定して表示するものです。


画像URLユニット 出力結果

画像URLユニット 出力結果


標準画像と拡大画像

通常の画像ユニットの場合、アップロードした画像を元に標準画像と拡大画像が作られますが、画像URLユニットでは外部のサーバの画像を表示するため自動的には作られません。
このため、標準画像と拡大画像それぞれで使用する画像のURLを指定する必要があります。

画像の大きさ

管理ページ > コンフィグ > ユニット設定 にあるサイズセレクトで「画像URLサイズ選択肢」で設定したサイズが選択できます。通常の画像ユニットとは別の設定となりますのでご注意ください。

詳細設定

通常の画像ユニットと同様に編集画面内の「詳細」からキャプション、リンク、代替テキストの指定ができます。


画像URLユニット 編集画面

画像URLユニット 編集画面


画像ユニットに関する注意点

通常の画像ユニットにある拡大表示の制限、画像の回転は、画像URLユニットでは使用できません。

テーブルユニット

テーブルユニットを使うと、ExcelやGoogleスプレッドシートのように表組の中にデータを入力することができます。Ver. 2.7.0以降で使用できます。

編集設定

引用ユニットを利用するには管理画面のコンフィグ > 編集設定画面から設定をする必要があります。下の図のように追加ボタンを押し、モードからテーブルを選択し、それに対するラベルの名前を決めてください。ラベルの名前は任意です。保存をすれば設定したラベル名のついたボタンがエントリーの編集画面で使えるようになっています。



テーブルユニットの利用方法



まず、ユニットの追加でテーブルユニットを選択します。 選択した時点で、入力部分がテーブルユニット専用のツール等を備えた画面に切り替わります。 セル内にデータを入力し、ツールアイコンを利用することで、様々な装飾ができます。




1 ソースとシートの切り替え 入力画面の表示内容をHTMLに切り替えます
2 セルの結合 縦方向・横方向にセルを結合します。複数のセルを選択して使用します。
3 セルの分割 結合済みのセルを分割します。
4 元に戻す 入力画面上で行った動作を取り消し、1つ前の状態に戻します。
5 td化 選択したセルをtd(TableData)に指定します。
6 th化 選択したセルをth(TableHeader)に指定します。
7 左寄せ セル内のデータを左寄せにします。
8 中央寄せ セル内のデータを中央寄せにします。
9 右寄せ セル内のデータを右寄せにします。
10 セル内データの表示修正 プルダウンメニューで「折り返し無し」「太字」「上寄せ」「縦方向中央寄せ」「下寄せ」を選択してセル内データの表示を修正します。1つのセルに対しては選択肢の1つしか反映されません。
11 テーブル内データの表示修正 デフォルトではプルダウンメニューで「スクロールするテーブル」が選択できるようになっています。1つのテーブルに対しては選択肢の1つしか反映されません。

行および列の追加・削除

各行および列の左端・上端には三角マークがあり、これをクリックすることで行および列の追加と削除ができます。

セルの装飾項目を増やす方法

下の画像のようにセルの装飾項目はデフォルトで「折り返し無し」「太字」「上寄せ」「中央寄せ」「下寄せ」ですがこの装飾項目はJavaScriptを使うことで自分で増やすことが可能です。



ACMS.Ready(function(){
  ACMS.Config.aTableSelector.push({
    label: "グレーの背景",
    value: "bg_grey"
  });
});

上記のJavaScriptの場合、「背景ブルー」という項目がオプションとして追加され、その項目が選ばれたセルに対しては「bg_blue」というクラスが付与されます。

テーブルの装飾項目を増やす方法

またVer.2.8より、テーブル要素自体に対してもクラスを付与することができるようになりました。デフォルトでは「スクロールするテーブル」という項目が一つだけ選択でき、その際にはそのテーブルに対して、「.acms-table-scrollable」というクラスが付与されます。



ACMS.Ready(function(){  
 ACMS.Config.aTableOption.push({
    label: '角丸のテーブル', 
    value: 'rounded-table'
  });
});

地図(Open Street Map)ユニット

Ver. 2.9より、地図(Open Street Map)ユニットが使用できるようになりました。 地図(Open Street Map)ユニットは、下の図のように緯度と経度または住所を入力すると該当の箇所の地図をOpen Street Mapを用いて表示するユニットです。 Ver. 2.8 までは地図を表示する場合、Google Maps か Yahoo!地図に限られていたのですが、両方とも API Key が必要になります。また Google Mapsについては制限が厳しくなり クレジットカード を登録しないと表示できない場合も出てきました。こういったAPI的な制限を回避したい場合は地図(Open Street Map)ユニットを使うことをおすすめします。 下の図のように、地図(Google Map)ユニットや、Yahoo!地図ユニットと同じようなインターフェースとなっています。



表側のページでの表示は、以下のようになります。地図(Google Map)ユニットとは違い、静止画ではないため、表示にはJavaScriptが動作することが前提となります。



ユニットを使うには

編集設定

地図ユニットを利用するには管理画面のコンフィグ > 編集設定画面から設定をしてください(新規インストール時には、すでに地図ユニットの設定はあるはずです)。図の下に位置している追加ボタンをクリックし、モードから「標準マップ」を選択し、それに対するラベルの名前を決めてください。保存をすれば設定したラベル名のついたボタンがエントリーの編集画面で使えるようになります。



編集設定後はエントリー編集画面より、追加されたユニットのボタンをクリックすることで使用できます。



地図(Google Map)ユニットから地図(Open Street Map)ユニットに一括置換する

Ver.2.9では、APIの使用回数の制限から、地図(Google Map)ユニットがこれ以上使えなくなった場合の対策として、すでに登録済みのユニットを地図(Open Street Map)ユニットに一括で変換する機能を用意しています。 変換したい場合は、下の図のように編集画面より、データ修正 > マップユニットのタイプ修正 と進んでください。



その後、ターゲットに「GoogleMaps」変更値に「標準マップ(Open Street Map)」を選択して修正ボタンを押すことで既存の地図(Google Map)ユニットが全て地図(Open Street Map)ユニットに変換されます。