JavaScript

Google Translate APIを使って翻訳ボタンを作る

Google Translate API を利用した翻訳機能は Ver. 3.1.12 で廃止されました。

a-blog cms Ver.2.8.0に組み込みJSに翻訳機能がつきました。この機能を使うことで日本語を例えば英語に変換して別のテキストエリアに翻訳結果を自動入力するカスタマイズが可能になります。

まずは Google Translate API を使用するために以下の2つのステップが必要になります。

API key の取得
API key を CMS のプロパティ設定で登録する。

1. API key の取得

まずは、Google API Console にアクセスしてログインしてください。ログイン後、任意の名前でプロジェクトを作成します。上の画像のように 1, 2 の手順でプロジェクトを新規作成できます。

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

次は、サブカラムより「ライブラリ」という項目をクリックし、API ライブラリのページに移動します。そのページにて、Google Cloud Translation APIという項目を検索して有効化してください。

最後に「認証情報」をクリックして認証情報の設定画面に移動します。そこで新たに API key を作成します。今回はキーの制限は「なし」でも大丈夫です。ただしセキュリティ上、「IP アドレス」を指定し、アクセスできるIPアドレスを制限しておくことをオススメします。

この時発行される API key を覚えておきましょう。

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

プロパティ設定

あとは以下のように、js-translateというクラスをボタンに付与します。そうすると、data-sourceで指定された要素からdata-targetに指定された要素に翻訳されたテキスト内容が自動で入力されます。

<button type="button" data-lang="en" data-source="翻訳元のセレクター" data-target="翻訳先のセレクター" class="js-translate">翻訳</button>

例えば、/themes/beginner/admin/entry/field.html に以下のコードを追記してください。翻訳ボタンをクリックするとカスタムフィールドにエントリーのタイトルが英語に翻訳されたものが自動入力されます。

<table class="acms-admin-table-admin-edit">
    <tr>
        <th>英語版タイトル<i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="英語版のタイトルを入力してください。"></i></th>
        <td>
            <div class="acms-admin-form-action">
                <input type="text" name="title_en" value="{title_en}" class="acms-admin-form-width-full" id="entry-title-en" />
                <span class="acms-admin-form-side-btn">
                    <button type="button" data-lang="en" data-source="#entry-title" data-target="#entry-title-en" class="acms-admin-btn js-translate">翻訳</button>
                </span>
            </div>
            <input type="hidden" name="field[]" value="title_en" />
        </td>
        
    </tr>
</table>

翻訳結果

組み込みJSについて

a-blog cmsには、標準でJavaScriptが組み込まれています（組み込みJSと呼んでいます）
設定変更の方法について紹介します。各機能の詳細についてはリファレンスを参照してください。

各種ライブラリの使用と設定について

各種機能には、ライブラリを使用しているものが多数あります。基本的な設定は/js/config.js　に記載しています。
CKEditorなどライブラリによっては、それぞれのconfigファイルがあるものもあります。

設定を変更する場合は、config.jsの内容を変更する必要がありますが、直接/js/config.jsファイルを変更するのではなく、/themes/お使いのテーマ/js/xxxx.js　を作成し、必要な値を上書きするようにします。
直接config.jsを変更しないのは、CMSのバージョンアップ時に誤ってconfig.jsを上書きするリスクを回避するためです。

設定を編集する

使用したいJavaScriptファイルを用意する

適用しているテーマフォルダ内にJavaScriptファイルを入れます。

例）「sample.js」というJavaScriptファイルを使用したい場合
/themes/適用しているテーマ/js/sample.js

テンプレートから参照する

JavaScriptを適用したいテンプレートのhead内に、使用したいJavaScriptファイルを参照するソースコードを記述します。a-blog cms用のJavaScriptファイルの参照コード（「BEGIN_MODULE Js」〜「END_MODULE Js」の部分）より後に記述してください

例）「sample.js」というJSファイルを使用したい場合のhead内の記述

<!-- BEGIN_MODULE Js --><script type="text/javascript" src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
<script type="text/javascript" src="/js/sample.js" charset="UTF-8"></script>

JavaScriptを編集する

手順1項で作成したJavaScriptファイルに、設定を記述します。/js/config.jsの設定を上書きすることになります。頭に「ACMS.Config.」を付けて記述してください。
また、Ver. 2.5.0よりacms.jsが非同期的にjavascriptを読み込み実行しますので、config.jsが読まれた事が保証される
ACMS.Ready(function() { });
の中に書きます。

例）検索キーワードのハイライトを適用するセレクタ要素を追加する場合

ACMS.Ready(function() {
    ACMS.Config.searchKeywordHighlightMark  = '.entryTitle, .search .summary, .selectKeyword';
});

配列で設定を複数記述する記述方法

同じページで同じJavaScriptの動作を複数の場所で動作させたい場合、ブログ内で違う設定で動作させたい場合などに、配列で記述します。括弧（[], {}）の位置に注意してください。

例）絵文字の設定を配列で複数設定する場合

ACMS.Ready(function() {
ACMS.Config.emoArray    = [
    {
        'mark'      : 'textarea.js-emoditorEmoji',
        'toolbar'   : [['Emoji']],
        'config'    : {
            enterMode       : 1,
            language        : 'ja'
        }
    },
    {
        'mark'      : 'textarea.js-emoditorColor',
        'toolbar'   : [['TextColor','BGColor']],
        'config'    : {
             enterMode       : 1,
             language        : 'ja'
        }
    }
];
});

ACMS.Ready(function() {
ACMS.Config.bxsliderConf = 
{
    mode            : 'fade', // horizontal | vertical | fade
    speed           : 800,
    captions        : true,
    auto            : true,
    pause           : 6000,
    adaptiveHeight  :true
};
});

組み込みJSのイベントハンドラ

イベントハンドラを設定する事で、ある特定のJavaScriptのイベント（クリックイベントなど）が発生した時に処理を挟み込めます。a-blog cmsでは組み込みJSが実行したイベントの後に処理を実行できるようにするため、いくつかのイベントハンドラを用意しています。

acmsReady

組み込みJSの実行が出来る段階で発火するイベント。js/config.js などをカスタマイズする時は、このイベントが発火してから設定を行う。またよく使うイベントなのでエイリアスが用意されている ACMS.Ready(function() {});

ACMS.Ready(function() {
  ACMS.Config.postIncludeEffect = 'fade';
});

// 以下でも同じです。
ACMS.addListener('acmsReady', function() {
  ACMS.Config.postIncludeEffect = 'fade';
});

acmsAdminReady

管理画面用の組み込みJSが実行出来る段階で発火するイベント。

ACMS.addListener("acmsAdminDispatch", function() {
});

acmsDispatch

組み込みJSのディスパッチ処理が終わった時のイベントハンドラ。正確には、ACMS.Dispatch()の処理が終わった後に実行される処理を記述できます。以下の例では、組み込みJSの処理が終わった段階で、bxsliderのCSSを読み込んでいるlinkタグを削除しています。

ACMS.addListener("acmsDispatch", function() {
    $("[href*=bxslider]").remove();
});

acmsAddUnit

エントリーの編集画面にてユニットが追加された時のイベントハンドラ。カスタムユニットでJavaScriptを利用したい場合などに利用します。

ACMS.addListener("acmsAddUnit", function(e) {
   console.log(e.target); // ユニットの dom が入っています。
});

acmsAfterPostInclude

PostIncludeで動的にHTMLが読み込まれた後に実行されるイベントハンドラ。webフォントや、配置を揃えるJSなどの利用が考えられます。

ACMS.addListener("acmsAfterPostInclude",function(){
   //ここに処理が入ります。
});

acmsAddCustomFieldGroup

カスタムフィールドグループで項目が追加された時のイベントハンドラ。以下の例では、カスタムフィールドグループで項目が追加された時、その項目に対して、DatepickerのJSが動くようにしています。

ACMS.addListener("acmsAddCustomFieldGroup",function(e)　{
    console.log(e.target); // カスタムフィールドグループの dom が入っています。
});

acmsDialogOpened

モジュールID編集用ダイアログや、ブログ編集用ダイアログなどのダイアログウィンドウが表示されるタイミングで発火するイベントです。

ACMS.addListener("acmsDialogOpened", function() {

});

acmsAdminSelectTab

管理画面で使われているタブパネルが切り替わったタイミングで発火するイベントです。

ACMS.addListener("acmsAdminSelectTab", function() {

});

acmsValidateFailed

フォームのsubmitボタンを押した時にばりデートに失敗した時に発生するイベントです。

ACMS.addListener("acmsValidateFailed", function() {

});

acmsAdminDelayedContents

ダイアログや、タブなど後から表示されるコンテンツが表示されるタイミングで発火するイベントです。

ACMS.addListener("acmsAdminDelayedContents", function() {

});

オリジナルのイベントハンドラを用意する

また、独自にイベントハンドラを用意することも可能です。以下のように、ACMS.dispatchEventでイベントを発行します。

//イベントの発行
ACMS.dispatchEvent("イベントハンドラ名");
ACMS.dispatchEvent("イベントハンドラ名", dom, object);

第１引数（必須）: イベントハンドラ名
第２引数（オプション）: リスナーでイベントが発行されたdomを取得できます。
第３引数（オプション）: 任意のオブジェクトをリスナーで取得できます。

//ハンドラの実行
ACMS.addListener("イベントハンドラ名", function(event) {
    // dispatchEventで渡した dom が取得できます。指定していない場合は、window.document が入っています。
    console.log(event.target); 
    
    // dispatchEventで渡した object が取得できます。
    console.log(event.obj);
});

組み込みJSのi18n（国際化）対応

以下の対応を行うことで、a-blog cmsで使われるJavaScriptで使われるメッセージなどをi18n（国際化）対応する事ができます。

変数化

翻訳する箇所を変数化します。以下のソースはアラートメッセージを変数化しています。変数はなんでも大丈夫ですが、グローバルを汚してしまう事になるので、ここではACMS.i18nのプロパティとして利用しています。

ACMS.Ready(function(){
  alert(ACMS.i18n.alertMess);
});

下準備

先ほど作成した変数に翻訳した文字列が入ってくるようにします。

/js/i18n.jsを開き以下のように追記してください。ここで、t() の引数に指定する文字列はドットつなぎで適応なものを設定ください。

i18next.use(i18nextXHRBackend).init({
  lng: navigator.languages ? navigator.languages[0] : (navigator.language || navigator.userLanguage),
  debug: false,
  load: 'languageOnly',
  fallbackLng: 'ja',
  backend: {
    loadPath: ACMS.Config.jsRoot+'locales/{{lng}}/{{ns}}.json'
  }
}, function(err, t) {
  ACMS.i18n = {};

  ACMS.i18n.alertMess = t('hoge.message1');  // この行を追記
});

翻訳ファイル（json）の用意

最後に翻訳ファイルを用意します。翻訳ファイルはJSONファイルになっており、直感的に編集できるようになっております。

翻訳ファイルのパス

以下のルールのパスで翻訳ファイルを設置してください。

/js/locales/言語/translation.json
(e.g) /js/locales/en/translation.json

/js/locales/en/translation.json

{
  "hoge": {
    "message1": "Hello World."
  }
}

/ /js/locales/ja/translation.json /

{
  "hoge": {
    "message1": "こんにちは世界。"
  }
}

先ほど t() の引数に設定したドットで区切った記述により、jsonファイルのオブジェクトとして指定していきます。

これでブラウザの設定によって自動的に言語が選択されるようになりました。

組み込みのJavaScript以外の任意のJavaScriptを使用する

a-blog cmsに標準で組み込まれているJavaScript以外のJavaScriptを使用する方法を説明します。

使用したいJavaScriptファイルを用意する

適用しているテーマフォルダ内にJavaScriptファイルを入れます。

例）「sample.js」というJavaScriptファイルを使用したい場合
/themes/適用しているテーマ/js/sample.js

テンプレートから参照する

JavaScriptを適用したいテンプレートのhead内に、使用したいJavaScriptファイルを参照するソースコードを記述します。a-blog cms用のJavaScriptファイルの参照コード（「BEGIN_MODULE Js」〜「END_MODULE Js」の部分）より後に記述してください。

例）「sample.js」というJSファイルを使用したい場合のhead内の記述

<!-- BEGIN_MODULE Js --><script type="text/javascript" src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
<script type="text/javascript" src="/js/sample.js" charset="UTF-8"></script>

jQueryについて

jQueryはa-blog cmsに標準で組み込まれています。jQueryのバージョンはa-blog cmsのバージョンによって異なります。jQuery関連ファイルが格納されている場所は、/js/library/jquery/内です。
a-blog cmsが標準で使用しているjQueryの情報は、/private/config.system.yamlのjquery_versionの項目を参照してください。
a-blog cmsで使用しているjQueryのファイルと異なるバージョンのjQueryを参照すると、a-blog cmsの動作に影響が出ることがあります。

jQueryプラグインを追加する

jQueryプラグインを使用する場合もjavaScriptの場合と同様に、適用しているテーマ内にjQueryプラグインのファイルを置き、head内から参照してください。

jQueryの読み込みについて

Ver. 2.5.0よりjavascriptの読み込みが非同期になった為、jQueryについても非同期で読み込まれまれるようになりました。その為、jQueryを使うプラグインなどをacms.jsより後で読み込んだとしても、その時点でjQueryが読み込まれておらずエラーが発生します。

対策1

jQueryをacms.jsから読み込む事をやめ、テンプレートから直接jQueryをロードします。以前のバージョンでは組み込みJSのjQueryとバッティングしてエラーを出していましたが、Ver. 2.5.0からテンプレートから読み込んでいるjQueryを優先して読み込むようになりました。こうする事により、同期的にjQueryが読み込まれますので、エラーを回避する事が出来ます。

<script src="%{JS_LIB_JQUERY_DIR}jquery-1.11.1.min.js" charset="UTF-8"></script>
<!-- BEGIN_MODULE Js -->
<script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->

対策2

Ver2.5.0より追加された特殊な組み込みJSを利用します。組み込みJSが読み込まれた時に実行したい処理を以下のメソッドに指定します。

ACMS.Ready(function() {
// 組み込みJSが読み込まれた後に実行したい処理
});

また、jQueryプライグインなどを読み込みたい場合はACMS.SyncLoaderという組み込みJSを利用して同期的にロードしてきます。

ACMS.Ready(function() {
new ACMS.SyncLoader()
.next(‘%{SYSTEM_THEMES_DIR}js/読み込みたいプラグイン1.js’) .next(‘%{SYSTEM_THEMES_DIR}js/読み込みたいプラグイン2.js') .load();
});

このjavascriptを利用すると、nextで指定した順番にロードが完了しだい次のjavascriptが読み込まれるようになります。最後のload()を呼ぶことによりロードが開始されます。

JavaScript

目次

1. API key の取得

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

各種ライブラリの使用と設定について

設定を編集する

使用したいJavaScriptファイルを用意する

テンプレートから参照する

JavaScriptを編集する

配列で設定を複数記述する記述方法

acmsReady

acmsAdminReady

acmsDispatch

acmsAddUnit

acmsAfterPostInclude

acmsAddCustomFieldGroup

acmsDialogOpened

acmsAdminSelectTab

acmsValidateFailed

acmsAdminDelayedContents

オリジナルのイベントハンドラを用意する

変数化

下準備

翻訳ファイル（json）の用意

翻訳ファイルのパス

/js/locales/en/translation.json

/ /js/locales/ja/translation.json /

使用したいJavaScriptファイルを用意する

テンプレートから参照する

jQueryについて

jQueryプラグインを追加する

jQueryの読み込みについて

対策1

対策2

イントロダクション

はじめてみよう

リファレンス

ツール

コア機能

機能別

開発