Home

位置情報を使って記事を絞り込む

注意: このハンズオンではGoogle Maps APIを利用します。先に Google Maps API を使って地図を表示するカスタマイズを行ってください。

エントリーの記事を一覧で表示する場合、現状だとid順や日付順などで表示する事はできていました。しかし昨今スマフォの利用率が増えてきており、GPSなどの位置情報を使って近くの情報を表示するような需要は増えてきていると思います。

そこで、Ver. 2.7.0より位置情報による記事の絞り込み、並び替えができるようになりました。ここでは、記事に位置情報を付加して記事詳細ページで近くの記事を出す事と、ブラウザから位置情報取得して、現在位置から近くの記事を表示する事を行います。

最近のブラウザは、位置情報（Geolocation API）を利用するために、SSL/TLS（https://）が必須になってきています。 ChromeやSafariでは確認できませんので PCのFireFox で確認するようにお願いします。

まずは、位置情報を付加したエントリーを作成しましょう。ここでは分かりやすいように位置情報（map）というカテゴリーを作成して作っています。4, 5件作成してみてください。

IFブロック

詳細な条件による表示/非表示の制御 IFブロック

条件による表示/非表示の制御については、:veil ブロックによるモジュール内での部分的な表示の制御について解説しましたが、ここでは、より詳細な条件による制御を行う IFブロックについて解説します。

IFブロックの記述例

<!-- BEGIN_IF [%{PAGE}/gte/5] -->
5ページ以上です
<!-- ELSE_IF [%{PAGE}/eq/4] -->
4ページです
<!-- ELSE -->
3ページ以下です
<!-- END_IF -->

上記の記述は、グローバル変数%{PAGE} が5以上の場合は「5ページ以上です」を表示、4の場合は「４ページです」、それら以外の場合は「3ページ以下です」を表示するという意味を持っています。

BEGIN_IF部分には、条件式の指定として[]の中にa-blog cmsのURLコンテキストのように 値/オプション/値 と指定します。またネスト（入れ子）にすることもできます。

<!-- BEGIN_IF [a-blogcms/lk/cms] -->
cms
<!-- ELSE -->
not cms
<!-- END_IF -->

基準となる値を左側に、対象を右側にしてください。例えば上記の「含まれる」では、「a-blogcms」の中に「cms」があるかを判断しています。「cms」の中に「a-blogcms」があるか、ではない点に注意してください。書く順番が重要になります。

注意事項

また、演算する値に改行が含まれるとIFブロックが機能しなくなるため、改行を含む変数 {hoge} などを使うときは、 [delnl] の校正オプションと併用します。

// {hoge}に改行が入る場合

<!-- BEGIN_IF [{hoge}[delnl]/eq/true] -->
IFブロックは機能します
<!-- END_IF -->

<!-- BEGIN_IF [{hoge}/eq/true] -->
IFブロックは機能しません
<!-- END_IF -->

オプション

演算子	条件	意味
eq	=	等しい
neq	!=	等しくない
gt	>	より大きい
gte	>=	以上
lt	<	より小さい
lte	<=	以下
lk	LIKE	含まれる
nlk	NOT LIKE	含まれない
re	REGEXP	指定した正規表現に合致する
nre	NOT REGEXP	指定した正規表現に合致しない
em	EMPTY	値が空（"0"は空と判定されます）
nem	NOT EMPTY	値が空（"0"は空と判定されます）ではない
isset	ISSET	値が空でない（"0"も値があると判定されます）
nisset	NOT ISSET	値が空である（"0"も値があると判定されます）

テンプレート内での実行順序

テンプレートエンジンの実行順序は以下のようになります。

インクルードを解決
インクルード処理と同時にグローバル変数を解決
タッチモジュールを解決（デフォルトON）
モジュール類を内側から解決（同じ階層の場合は下から）
IFブロックを解決

IFブロックの解決は一番最後に解決される為、条件式でグローバル変数やモジュールの変数も使用できます。 またモジュールのループ内でも動作します。

AND演算子とOR演算子

IFブロックではバージョン2.1.1からANDとOR演算子が使えるようになりました。AND演算子を使えば、両方の条件を満たした際、満たさなかった際の処理が出来ます。OR演算子を使えば、どちらか一方の条件を満たした際、満たさなかった際について処理できます。

AND演算子の記述例

<!-- BEGIN_IF [3/gt/2/_and_/2/lt/4] -->
	<p>条件を満たします</p>
<!-- ELSE -->
	<p>条件を満たしません</p>
<!-- END_IF -->

このソースのように判定したい条件同士を、_and_でつないであげることによって判定を行うことができます。上のソースの場合、3 > 2、2 < 4は両者とも条件を満たしますので、条件を満たしますが出力されます。

OR演算子の記述例

<!-- BEGIN_IF [4/lt/2/_or_/2/eq/2] -->
	<p>条件を満たします</p>
<!-- ELSE -->
	<p>条件を満たしません</p>
<!-- END_IF -->

このソースのように判定したい条件同士を、_or_でつないであげることによって判定を行うことが出来ます。上のソースの場合、4 < 2は条件を満たしませんが、2 = 2は条件を満たしますので、条件を満たしますが出力されます。

必須チェックの可変対応方法

お問い合わせフォームなどの入力項目で、チェックボックスの「その他」にチェックをした場合は、その他の内容を必須項目にして、その他にチェックを入れた場合は内容も入れてください。とするケースがあります。そのやり方を2例紹介します。

テーマの基本

エントリーのデータを表示する元となるテンプレートのHTMLファイルやイメージファイル、CSSファイル、JavaScriptのファイル等を1つのフォルダにまとめたものをテーマと呼びます。a-blog cmsで独自のサイトを作るためにはこのテーマをカスタマイズをする必要があります。

a-blog cmsのデータは、設定（コンフィグ＞テーマ設定）で指定されたテーマファイルを通して表示されます。
a-blog cmsには標準のテーマとしてsite, blog など複数のテーマを同梱しています。これら同梱のテーマを使用してもよいですし、同梱のテーマを元にカスタマイズしたり、独自に制作することもできます。

カスタムユニットとユニットの拡張機能を使用したカスタマイズ

カスタムユニットとは、ユニットをカスタマイズし独自のユニットを作成できるユニットのことです。

同じような機能として独自の入力欄を作れるカスタムフィールドが挙げられます。あえてカスタムユニットを使うメリットとしては、従来のカスタムフィールドとは違い、ユニットの間に任意の要素を挿入できることが特徴の1つです。

詳しいカスタムユニットの機能については、以下の記事をご覧ください。

カスタムユニット | ユニット | ドキュメント | a-blog cms developer

今回のハンズオンでは、上記で説明した「カスタムユニット」に加え、カスタムユニットの機能を拡張する「ユニットの拡張機能」の使い方をご紹介します。

カスタムユニットを作成してみよう

編集画面の設定

管理画面 > コンフィグ > 編集設定からカスタムユニット用のボタンを追加します。モードは「カスタム」、ラベルは任意の名前をつけてください。

これだけでは、記事登録ページでユニットボタンを押しても空のユニットが表示されるだけですので、別途入力フォームと出力内容のテンプレートの計2つのテンプレートを作成する必要があります。

入力フォーム用のテンプレートの作成

使用テーマ/admin/entry/unit/custom.html

上記の場所にファイルを新規作成してください。

管理画面 > コンフィグ > カスタムフィールドメーカーまたは、デベロッパーサイトにあるカスタムフィールドメーカーの「カスタムユニット」からHTMLを生成できます。

出力内容用のテンプレートの作成

使用テーマ/include/unit/custom.html

上記の場所にテンプレートを作成してください。

先ほど作成した入力フォームのテンプレートと同じように、管理画面 > コンフィグ > カスタムフィールドメーカーまたは、デベロッパーサイトにあるカスタムフィールドメーカーの「カスタムユニット」からHTMLを生成できます。

ユニットの拡張機能で複数のカスタムユニットを作成してみよう

カスタムユニットを複数作る場合にはユニットの拡張機能を使用します。

ユニットの拡張機能はカスタムユニット以外のユニット（テキストユニット、画像ユニット、ビデオユニット...etc）も拡張できます。例えば、テキストユニットにCSSを適用し装飾したユニットを作ることができます。

そのほかの詳しいユニットの拡張機能については、以下の記事をご覧ください。

ユニットの拡張機能 | ユニット | ドキュメント | a-blog cms developer

編集画面の設定

管理画面 > コンフィグ > 編集設定の順にページを移動し、以下の画像のようにカスタムユニット用のボタンを追加します。モードは「拡張」+「custom_任意の文字列」、ラベルは任意の名前をつけてください。

次にコンフィグ > ユニット設定の順にページを移動し、ページの一番下部までスクロールすると先ほど作成したラベルの項目があるので、そのボタンを押してください。（※この作業をしないと、テンプレートを作成してもエントリー編集ページからユニットを追加した際に空のユニットが挿入されてしまうので注意してください。）

入力フォーム用のテンプレート

同じようにカスタムフィールドメーカーを使用するなどしてカスタムユニットを作成します。（※ ユニットの拡張機能を作る際には、カスタムフィールドメーカーで出力されたデフォルトのソースコードのままではなく、一部異なる点があります。詳しい方法については、順次ご紹介していきます）

作成したカスタムユニットは下記の画像のファイルの場所に設置します。

使用テーマ/admin/entry/unit/extend.html

下記の様にカスタムフィールドメーカーなどで生成したソースコードををBEGIN ~ ENDのブロック内に記述します。

<!-- BEGIN custom_test -->
ここの中にソースコードを記述
<!-- END custom_test -->

出力内容用のテンプレート

使用テーマ/include/unit/extend.html

「unit#」を付けたBEGIN ~ ENDのブロック内に記述します。

<!-- BEGIN unit#custom_test -->
ここに表示内容のソースコードを記述
<!-- END unit#custom_test -->

課題

カスタムユニットと拡張ユニットを使用してインタビューコンテンツを作成してみましょう。

会話型コンテンツの表示例

下準備

吹き出し横の画像と名前を登録するカスタムフィールドを用意してあります。 admin/entry/field.htmlに下記ファイルのソースを追加してください。出力は以下のソースで出力できます。

field.html

<!-- BEGIN_MODULE Entry_Field -->
画像
<img src="%{ARCHIVES_DIR}{conversation1_img@path}[resizeImg(80,80)]">
<img src="%{ARCHIVES_DIR}{conversation2_img@path}[resizeImg(80,80)]">

名前
<p class="name">{conversation1_name}</p>
<p class="name">{conversation2_name}</p>
<!-- END_MODULE Entry_Field -->

吹き出し用のCSSも用意しています。使用しても使用しなくてもどちらでも構いません。使用する方は下記の画像を参考にしてください。

css

参考HTML

上記のCSSを使用する方は下記のHTMLを参考にしてください。

<!-- 右向きの吹き出し(ピンク) -->
<div class="conversation1_photo">
	<img src="">
	<p class="name"></p>
</div>
<div class="conversation1"></div>

-----------------------------------

<!-- 右向きの吹き出し(ブルー) -->
<div class="conversation2_photo">
	<img src="">
	<p class="name"></p>
</div>
<div class="conversation2"></div>