現在いるエントリーと同じカスタムフィールドの値を持つエントリーを表示する

この記事では、現在いるエントリーと同じカスタムフィールドの値を持つエントリーを表示する方法をご紹介します。

たとえば、{select_item}という変数があったとします。{select_item}では「りんご」「もも」「ぶどう」の中から値が選べるようになっています。記事Aというエントリーが、「りんご」という値を持っていたとき、記事Aの詳細ページに、{select_item}という変数で「りんご」を選択しているエントリーをリストにして一覧することができます。


同じように「りんご」が選ばれたエントリーがサブカラムで一覧になっている

select_itemが「りんご」だったときの詳細ページの図


今回はモジュールで出力されるカスタムフィールドの値を使用したいので、モジュールが出力された後にモジュールを実行しなければいけません。実行順序を少し遅らせるためには、ポストインクルードを使います。ポストインクルードについて詳しくはドキュメントをご覧ください。

以下は、{select_item} という変数をキーにしたいときの記述です。

<!-- BEGIN_MODULE Entry_Field id="current_eid" -->
  <form action="" method="post" class="js-post_include-ready">
    <input type="hidden" value="{select_item}" name="select_item">
    <input type="hidden" value="select_item" name="field[]">
    <input type="hidden" name="tpl" value="include/sub/entryList.html">
    <input type="submit" name="ACMS_POST_2GET" style="display:none;">
   </form>
<!-- END_MODULE Entry_Field -->

1行目と8行目の記述

今回はエントリーの情報を表示したかったため、Entry_Fieldのモジュールを使用しました。

あらかじめ、Entry_Fieldモジュールで、モジュールID名で作成しておきます。ここではモジュールID名を「current_eid」としました。新しく作成したモジュールIDでは、現在いるエントリーの情報を表示できるように、「エントリーID(eid)」のURLコンテキストにチェックをつけておきました。


エントリーID(eid)にチェックをつける

ポストインクルードで使用するためのモジュールIDの設定


5行目の記述

5行目で指定している、include/sub/entryList.html には、とくに特殊な設定は必要なく、通常のモジュールを置いてください。

<input type="hidden" name="tpl" value="include/main/curriculum/this_course_summary.html">

include/sub/entryList.html(通常のモジュール)の例:

<!-- BEGIN_MODULE Entry_List id="select_item_list" -->
<div class="acms-margin-bottom-medium">
<!--#include file="/admin/module/setting.html"-->
  <ul class="acms-list-group">
    <!-- BEGIN entry:loop -->
    <li><a href="{url}" class="acms-list-group-item">{title}</a></li>
    <!-- END entry:loop -->
  </ul>
</div>
<!-- END_MODULE Entry_List -->

モジュールの設定

entryList.htmlの中に記述したモジュールにはモジュールIDの設定をしておく必要があります。ポストインクルードでフィールドの情報を渡しているため、フィールドのURLコンテキストが有効になった状態になったので、モジュールでもフィールドの情報が表示できるようになりました。Entry_List でフィールドの情報を表示するため、モジュールの設定も「フィールド(field)」のURLコンテキストを有効にしましょう。


フィールド(field)にチェックをつける

表示用のモジュールIDの設定


動作の確認

ポストインクルードの記述で値を渡したカスタムフィールドの変数(この記事では「select_item」)と同じカスタムフィールド(この記事ではエントリーのカスタムフィールド)を作成し、値を入力してください。

ポストインクルードを設置したページに戻り、「include/sub/entryList.html」のテンプレートの中身が表示されれば完成です。もし表示されなかった方は手順をもう一度ご確認ください。

エイリアス機能を使って多言語サイトを用意する

a-blog cms で多言語のサイトを作るには、本記事で紹介している方法か、新しくブログを作り直して別のサイトのような多言語サイトをつくる方法の2つがあります。本記事の場合は、元言語のサイトと同じレイアウト・同じコンテンツを表示させたい場合ににお勧めの方法です。

エイリアスを作成する

元言語のブログにて、管理画面>エイリアスの順に移動し、エイリアスを作成します。

「名前」、「ドメイン」、「コードネーム」を入力して、保存します。


(スクリーンショット)エイリアス作成の画面

名前、ドメイン、コードネームを入力する


保存したら、あとで使うため、一覧ページに戻り、エイリアスIDの値を覚えておきます。


(スクリーンショット)エイリアスの一覧画面

ここでは、エイリアスIDが「3」でした

今の段階では、http://ドメイン/en/を表示すると、URLが http://ドメイン/ だったときと全く同じ内容が表示されます。

表示の分けかた

エイリアスを作成したので、言語別に表示を分ける方法について説明していきます。

  • IFブロックを使って表示を分ける
  • モジュールIDの設定を変更する
  • グローバル変数とインクルードを使って表示を分ける方法
  • テーマの継承とルール機能を使ってインクルードを分ける方法

IFブロックを使って表示を分ける

IFブロックを使って表示を分ける方法は、細かな変更にも対応でき、手軽に実装することができます。

さきほど作成したエイリアスを使用します。

作成したエイリアスIDと現在いるURLのエイリアスIDが同じだった場合の記述例:

<!-- BEGIN_IF [%{ALIAS_ID}/eq/3] --><p>Hello!</p><!-- ELSE --><p>こんにちは!</p><!-- END_IF -->

※ /eq/の後の数値はご使用のエイリアスIDによって変更してください

モジュールIDの設定を変更する

モジュールID名にエイリアスコードのグローバル変数を使用すると、エイリアスIDごとに表示を分けることもできます。

<!-- BEGIN_MODULE Entry_Summary id="summary_AID%{ALIAS_ID}" -->

設定したら、管理画面には、「summary_AID1」、「summary_AID2」、「summary_AID3」というように、モジュールID名をつけて設定してください。元言語のサイトの場合は、「summary_AID」というモジュールID名で作成するとよいでしょう。

グローバル変数とインクルードを使って表示を分ける方法

インクルード文を以下のように記述して、表示方法を分けます。

<!-- #include file="/include/summary_aid%{ALIAS_ID}.html" -->

上記のコードの場合、includeフォルダの中に、「summary_aid1.html」、「summary_aid2.html」、「summary_aid3.html」を作成してください。元言語のサイトの場合は、「summary_aid.html」というファイル名で作成するとよいでしょう。

テーマの継承とルール機能を使ってインクルードを分ける方法

この方法は、今回ご紹介した中で一番複雑な方法になりますが、たとえばユニットの多言語対応したいときに使うことになります。

元言語のテーマを継承する他の言語用のテーマを用意する

まずは、元言語のテーマを継承する他の言語用のテーマを用意しておきます。

たとえば、元言語のテーマ名が「site」だった場合、「◯◯@site」というテーマを作成してください。◯◯には多言語用のテーマだとわかる名前をつけてください。作成したディレクトリの中身は空っぽのままで大丈夫です。

ルールを作成する

管理画面>ルールの順に移動し、ルールを作成します。ルール名と、エイリアスIDのセレクトメニューを「=」、入力欄には先ほど覚えておいたエイリアスIDを記入したら保存します。


(スクリーンショット)ルール作成の画面

ルールの一覧ページに戻り、先ほど作成したルール名の「コンフィグ」ボタンをクリックします。テーマ設定をクリックして、冒頭で多言語サイト用に作成したテーマを適用します。


(スクリーンショット)作成したルールのテーマ設定の画面

ここでは「en@site」というテーマを設定しました

これで、下準備が整いました。

実際に表示を分けてみる

継承したテーマにテンプレートを置いて、実際に表示を分けてみましょう。

継承元のテーマにtest.htmlという名前のファイルを作成し、その中にはわかりやすいように「こんにちは」と記入してみましょう。

トップページに(たとえば「site」)、インクルード機能を使って、test.htmlを好きな場所に読み込んでください。そして、トップページをブラウザで開いて、「こんにちは」が読み込まれているか確認してください。


(スクリーンショット)カスタマイズ後のトップページ

http://ドメイン にアクセスすると、「こんにちは」と書かれたファイルが読み込まれいる

次に、継承テーマ(たとえば、「en@site」)のディレクトリの中にtest.htmlを作成してください。このtest.htmlには「Hello」と記入してみましょう。作業ができたら、http://ドメイン/◯◯(作成したエイリアスコード)/にアクセスしてください。そうすると、http://ドメイン/では「こんにちは」とあった文章が「Hello」という文章に変更されています。


(スクリーンショット)カスタマイズ後のhttp://ドメイン/◯◯/

http://ドメイン/◯◯/ にアクセスすると、「Hello」と書かれたファイルが読み込まれいる

関連エントリー機能

関連エントリー機能について

その記事に関連する記事を表示するためのモジュールとして、登録されているタグの一致数に応じて関連記事を表示するタグリレーショナル(Entry_TagRelational)というモジュールがありました。a-blog cms Ver.2.6.0からは(Admin_Entry_Autocomplete)モジュールを使うことで、下の図のようにその記事に関連するエントリーを検索し、エントリーに紐付けることができるようになりました。これにより、より柔軟な関連記事登録が可能になります。


登録されたエントリーは下記のピンクの線で囲まれたハンドルを掴んでドラッグアンドドロップすることで表示順を変更することも可能です。また、右の確認ボタンを押すことで、実際にそのエントリーのページに移動して内容を確認することもできます。


紐づけられたエントリーはテンプレートをカスタマイズすることで下の図のように表示することが可能です。


関連エントリー機能の使い方

この機能を使用するためにはテンプレート側のカスタマイズおよび管理画面の設定が必要になってきます。

関連エントリー機能を有効にする

関連エントリー機能を使用可能にするために、 管理画面 > コンフィグ > 編集設定 より下の図のように 関連エントリー のチェックボックスにチェックを入れます。


オートコンプリートのモジュールIDを作成

オートコンプリート(Admin_Entry_Autocomplete)モジュールは下の図のようにキーワードを入力し、そのキーワードを含むエントリーを絞り込み登録するためのモジュールです。


オートコンプリート(Admin_Entry_Autocomplete)モジュールはデフォルトでブログに登録された記事全体を検索できるようになっています。検索する記事をカテゴリーやカスタムフィールドなどで絞り込みたい場合はモジュールIDの作成が必要になってきます。

注意事項

モジュールID化した場合は、URLコンテキストのキーワードにチェックをつけてください。チェックがない場合は絞り込まれません。デフォルトではキーワードにチェックがつかないため、/js/config.js を以下のように設定が必要です。

// 684行目付近
'Admin_Entry_Autocomplete' : ['bid', 'uid', 'cid', 'keyword', 'tag', 'field_', 'start', 'end'],

しかしながら、/js/config.js を直接編集するとアップデート時に設定を消してしまうおそれがあるため、お使いのテーマファイルの /themes/お使いのテーマ/admin/module/field.html にファイルを設置して以下のように記述します。組み込みJSについて詳しくは、 読み込みが必要なJavascriptファイル をご覧ください。

<script type="text/javascript">
ACMS.Ready(function(){
	ACMS.Config.Admin.argGuidance.Admin_Entry_Autocomplete = ['bid', 'uid', 'cid', 'keyword', 'tag', 'field_', 'start', 'end'];
})
</script>


モジュールIDを作成する場合にはモジュールから下の図のようにオートコンプリート(Admin_Entry_Autocomplete)を選択します。また引数を指定することでエントリーを絞り込む範囲を制限することができます。例えばカテゴリーの引数に1を指定するとカテゴリーが1のエントリーの中から記事を検索し登録することができます。


テンプレートの記述

/system/ajax/edit/autocomplete.jsonを使用中のテーマの同一の階層にコピーします。その後、下のソースのように作成したモジュールIDをテンプレートに新たに追記してください。

<!-- BEGIN_MODULE Admin_Entry_Autocomplete id="設定したモジュールID" -->[<!-- BEGIN entry:loop -->
\{
	"label": "<!-- BEGIN categoryField -->({fieldCategoryName})<!-- END categoryField -->{title}",
	"value": "<!-- BEGIN categoryField -->({fieldCategoryName})<!-- END categoryField -->{title}",
	"title": "{title}",
	"id": {eid},
	"url": "{url}",
	"datetime": "{date#Y}/{date#m}/{date#d} {date#H}:{date#i}",
	"categoryName": "<!-- BEGIN categoryField -->{fieldCategoryName}<!-- END categoryField -->"
\}<!-- BEGIN glue -->, <!-- END glue --><!-- END entry:loop -->
]<!-- END_MODULE Admin_Entry_Autocomplete -->

エントリーサマリーのモジュールIDを作成

次に関連記事を表示するためのエントリーサマリーのモジュールIDを作成します。その際、関連エントリー一覧を表示できるように下の図のようにチェックを入れてください。


チェックを入れることで従来通りのテンプレートで登録された記事一覧を表示することができます。また、モジュールIDの引数の設定をしなくても登録したエントリー一覧はエントリーサマリーのモジュールIDにて表示されます。ただし登録したエントリー一覧はエントリーの詳細ページのみでしか表示されませんので、注意が必要です。

エントリーを公開し、Twitter へツイートするフォームを設置する

このマニュアルは、a-blog cms Ver.2.1.1.4をもとに説明しています。ご利用のバージョンによって、画面表示や内容が若干異なる場合があります。また、この解説は2015年3月に書かれており、今後のTwitter側の仕様変更によって使用できなくなる可能性があります。ご了承ください。
ここでは、a-blog cms の非公開エントリーを公開に変更する時にTwitter へツイート(投稿)するフォームの設置について説明します。

この機能を動作させるには、事前にa-blog cms とTwitter の連携のための準備ができている必要があります。詳しくは「Twitter と連携する際の事前設定」をご確認ください。

フォームの実装

a-blog cms の非公開エントリーを公開に変更する時にTwitter へツイート(投稿)するフォームは、以下のソースコードで実現できます。

<form action="" method="post" class="acms-inline-btn">
<input type="submit" name="ACMS_POST_Api_Twitter_Entry_Open" value="ツイートして公開" />&nbsp;<input type="text" name="tweet" value="更新しました: {status.title} ( {status.url} )" data-shorten="{status.url}" style="width:300px;" maxlength="140">
<input type="hidden" name="bid" value="{bid}" />
<input type="hidden" name="cid" value="{cid}" />
<input type="hidden" name="eid" value="{eid}" />
</form>

このフォームから公開することで、関連づけてあるTwitter アカウントにエントリーの公開情報が投稿されます。このフォーム自体は各エントリーの公開・非公開のボタンを表示する部分に設置することになります。

具体的には、 /themes/system/admin/entry/action.html を使用するテーマ内にコピーし、このファイル中の<!-- BEGIN open -->と<!-- END open -->の間に「公開」についての記述に上記のコードを追加することで、ログイン時の各種管理ボタンに「ツイートして公開」用フォームが追加されます。

利用方法

このフォーム自体は動作の性質上エントリーが非公開の場合にしか表示されません。「ツイートして公開」ボタンからエントリーの公開とTwitter への投稿が同時に行われます。 上記のコードを使用した場合は「更新しました(エントリーのタイトル)(エントリーのURL)」と投稿されます。
投稿先は、事前に設定したアカウントになります。

Twitter へのツイートフォームを設置する

このマニュアルは、a-blog cms Ver.2.1.1.4をもとに説明しています。ご利用のバージョンによって、画面表示や内容が若干異なる場合があります。また、この解説は2015年3月に書かれており、今後のTwitter側の仕様変更によって使用できなくなる可能性があります。ご了承ください。

ここでは、a-blog cms からTwitter へツイート(投稿)するフォームの設置について説明します。

この機能を動作させるには、事前にa-blog cms とTwitter の連携のための準備ができている必要があります。詳しくは「Twitter と連携する際の事前設定」をご確認ください。

フォームの実装

a-blog cms からTwitter へツイート(投稿)するフォームは、以下のソースコードで実現できます。

<form action="" method="post">
    <input type="text" name="tweet" value="" />
    <input type="hidden" name="twitter[]" value="tweet" />
    <input type="submit" name="ACMS_POST_Api_Twitter_Statuses_Update" value="ツイート" />
</form>

このフォームに入力・送信することで、関連づけてあるアカウントで投稿されますので、このフォーム自体はログイン後の画面に設置することになります。

具体的には、 /themes/system/admin/action.html を、使用するテーマ内にコピーし、この中に上記のコードを追加することで、ログイン時の各種管理ボタンにツイート用フォームが追加されます。


ツイートフォームを追加した状態

ツイートフォームを追加した状態