ユニットの多言語対応


この機能は Ver. 3.2.0 で非推奨になりました。廃止予定はありませんので、現在ご利用中の方はそのままお使いいただけますが、新規での利用は推奨いたしません。

ユニットの多言語対応



上のように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@カスタムテーマ」が表示されるようになりました。

a-blog cmsのモジュール


a-blog cmsのモジュール

a-blog cmsは GETモジュールPOSTモジュール という独自単位のPHPプログラムによって動作します。

GETモジュール

テンプレートを通して情報を表示するためのプログラムです。テンプレート内で表示制御のテンプレートタグとして動作します。

  • データベースの情報を表示する

  • XML生成用に加工して表示する

  • 外部データを取得して表示する

<html>
<body>
<!-- BEGIN_MODULE Hoge -->
(プログラムの出力結果)
<!-- END_MODULE Hoge -->
</body>
</html>

詳細はGETモジュールの開発を参照してください。

POSTモジュール

入力・操作に対してアクションを起こすためのプログラムです。送信されるフォームデータのキー(name属性)に ACMS_POST_{POSTモジュール名} を含めれば動作します。これにより、submitボタンだけでなくJavaScriptからフォームを送信する場合にも利用できます。

  • フォームの情報をデータベースに記録する

  • ボタンを押した後に指定したページに遷移する

  • ファイルをアップロードする

<form action="" method="post">
<input type="submit" name="ACMS_POST_Fuga" value="Fugaモジュールを実行" />
</form>
const csrfToken = window.csrfToken ?? document.querySelector('meta[name="csrf-token"]')?.content;
const formData = new FormData();
formData.append('ACMS_POST_Fuga', 'Fugaモジュールを実行');
formData.append('formToken', window.csrfToken);
// 必要に応じて他のフィールドを追加
// formData.append('field1', '値');

const response = await fetch(document.location.href, {
  method: 'POST',
  body: formData,
  headers: {
     'X-CSRF-Token': csrfToken,
     'X-Requested-With': 'XMLHttpRequest',
  },
});

詳細はPOSTモジュールの開発を参照してください。

V2 GET モジュール

Twigテンプレート と連携する新しい形式のGETモジュールです。従来のGETモジュールと異なり、連想配列を返す ことでTwig側で柔軟に表示を制御できます。

項目

従来のGETモジュール

V2 GETモジュール

基底クラス

ACMS_GET

Acms\Modules\Get\V2\Base

戻り値

文字列(HTML等)

配列(構造化データ)

呼び出し

<!-- BEGIN_MODULE -->

Twig の module() 関数

{% set result = module('V2_Sample') %}
<p>{{ result.moduleTest }}</p>

詳細は V2 GETモジュールの開発 を参照してください。


ディレクトリ構造

パス

用途

/php/ACMS/GET/

GETモジュール

/php/ACMS/POST/

POSTモジュール

/extension/acms/

独自モジュール(GET/POST/V2)

GETモジュールはGETディレクトリ内に、POSTモジュールはPOSTディレクトリ内に配置します。独自V2モジュールは extension/acms/Modules/Get/V2/ に配置します。

extension/acms/
├── Modules/Get/V2/    # 独自 V2 GETモジュール
├── GET/               # 独自 GETモジュール
├── POST/              # 独自 POSTモジュール
├── Hook.php
├── Corrector.php
└── Validator.php

GETモジュールの開発

GETモジュールの雛形

<?php

namespace Acms\Custom\GET;

use ACMS_GET;
use Template;

/**
 * extension/acms/GET/Sample.php
 *
 * テンプレート上では、標準のGETモジュールと同様に、
 * '<!-- BEGIN_MODULE Sample --><!--END_MODULE Sample -->' で呼び出されます。
 */
class Sample extends ACMS_GET
{
    function get()
    {
        return 'sample sample';
    }
}

GETモジュールの規約

クラス

GETモジュールとして動作させるために、ACMS_GETを継承してください。
ファイルのパスと命名規則はPSR4に従います。(ただし下位互換性を保つため一部したがっていない場合があります)

**extension/acms の名前空間は Acms\Custom になります。**

この命名規則によりクラスがオートロード(autoload)されますので、requireなどは必要ありません。

extension/acms/GET/Sample.php の場合

namespace Acms\Custom\GET;
use ACMS_GET;

class Sample extends ACMS_GET {
}

extension/acms/GET/Own/Sample.php の場合

namespace Acms\Custom\GET\Own;
use ACMS_GET;

class Sample extends ACMS_GET {
}

出力

GETモジュールは呼び出されるとgetメソッドを実行します。最終的にgetメソッド内で、returnした文字列がモジュール内で出力されます。Smartyなど他のテンプレートエンジンと組み合わせたり、外部から情報を取得したりして情報を出力できます。

returnする文字列にはHTMLタグなどが含まれていても構いません。テンプレートとプログラムを分離させる必要が無い場合は、直接HTMLコンテンツを出力することもできます。

実行例

冒頭の雛形を実行する際のテンプレートと、その実行結果を例示します。GETモジュールは、BEGIN_MODULEから始まり、ENDMODULEで終わる、一連のテンプレートタグによって呼び出されます。テンプレート上のモジュール名は Acms\Custom 以降のクラス名を **(アンダーバー)** 繋ぎにしたものになります。

例: Acms\Custom\GET\Own\Sample -> Own_Sample

テンプレート

<html>
<body>
    <p><!-- BEGIN_MODULE Own_Sample --><!-- END_MODULE Oen_Sample --></p>
</body>
</html>

実行結果

<html>
<body>
    <p>sample sample</p>
</body>
</html>

ページ情報を取得する

URLコンテキスト(参照)で表されるページ情報のうち各種IDをGETモジュール内で取得する方法を説明します。

GETモジュール内でページ情報のうち、例えばエントリーID(以下EID)を取得することができれば、そのモジュールがどのエントリーから呼び出されたかによって参照する情報を変えることができます。基本的には、Entry_BodyやEntry_Headlineなどのモジュールもそのようにページ情報を取得することで、表示すべき情報を決定しデータベースを参照しています。

スコープの設定

下記のようにプロパティを設定することで、$this->bid, $this->cid, $this->eidとして、表示中のページが持つID情報を取得できます。

public $_scope = array(
    'bid' => 'global',
    'cid' => 'global',
    'eid' => 'global',
);

表示中ページの各種IDを参照するサンプル

<?php

namespace Acms\Custom\GET;

use ACMS_GET;

class Hoge extends ACMS_GET
{
    public $_scope = array(
        'bid' => 'global',
        'cid' => 'global',
        'eid' => 'global',
    );

    function get()
    {
        $string[] = 'Global Vars';
        $string[] .= "BID = $this->bid";
        $string[] .= "CID = $this->cid";
        $string[] .= "EID = $this->eid";

        return nl2br(implode("\r\n", $string));
    }
}

出力結果

<!-- bid = 1, cid = 2, eid = 5 の場合 -->
Global Vars<br />
BID = 1<br />
CID = 2<br />
EID = 5

取得できる情報

GETモジュールで現在表示中のページより取得できる情報には以下のものがあります。

プロパティ

説明

bid

ブログID

http://sample.com/blog/

uid

ユーザーID

http://sample.com/uid/1/profile.html

cid

カテゴリーID

http://sample.com/news/

eid

エントリーID

http://sample.com/news/123.html

keyword

キーワード

http://sample.com/keyword/検索文字/
http://sample.com/?keyword=検索文字

tag

タグ

http://sample.com/tags/aaa/

field

フィールド

http://sample.com/field/station/あの駅/

start

検索の始まり日時

http://sample.com/2017-01-01/-/2017-03-03/

end

検索の終わり日時

http://sample.com/2017-01-01/-/2017-03-03/

page

ページ番号

http://sample.com/page/2/

order

並び順

http://sample.com/order/datetime-desc/