JavaScript

目次

組み込み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が実行したイベントの後に処理を実行できるようにするため、いくつかのイベントハンドラを用意しています。

a-blog cms が用意しているイベントは ACMS.addListener を利用することでイベントに対してリスナーを登録することができます。

ACMS.addListener('eventName', function (event) {
  console.log(event);
});

また、event オブジェクト の detail プロパティにアクセスすることでイベント独自のカスタムデータを参照することができます。

ACMS.addListener('eventName', function (event) {
  console.log(event.detail); // or console.log(event.obj)
});

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("acmsAdminReady", 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ボタンを押した時に組み込みJSによるバリデーションに失敗したタイミングで発生するイベントです。

ACMS.addListener("acmsValidateFailed", function(event) {
  console.log(event.detail); // バリデーション結果を取得できます。
});

acmsFormInvalid

「組み込みJSによるバリデーション」に失敗したタイミングで発生するイベントです。

ACMS.addListener("acmsFormInvalid", function(event) {
  console.log(event.detail); // バリデーション結果を取得できます。
});

acmsFormValid

「組み込みJSによるバリデーション」に成功したタイミングで発生するイベントです。

ACMS.addListener("acmsFormInvalid", function(event) {
  console.log(event.detail); // バリデーション結果を取得できます。
});

acmsFormValidated

「組み込みJSによるバリデーション」によるバリデーションが行われたタイミングで発生するイベントです。

ACMS.addListener("acmsFormValidated", function(event) {
  console.log(event.detail); // バリデーション結果を取得できます。
});

acmsAdminDelayedContents

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

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

});

acmsLazyLoaded

組み込みJSの 「遅延読み込み」により要素の遅延読み込みが完了したタイミングで発火するイベントです。

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

});

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

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

//イベントの発行
ACMS.dispatchEvent("イベントハンドラ名");
ACMS.dispatchEvent("イベントハンドラ名", dom, detail, options);
  • 第１引数（必須）: イベントハンドラ名
  • 第２引数（オプション）: リスナーでイベントが発行されたdomを取得できます。
  • 第３引数（オプション）: 任意のオブジェクトをリスナーで取得できます。
//ハンドラの実行
ACMS.addListener("イベントハンドラ名", function(event) {
    // dispatchEventで渡した dom が取得できます。指定していない場合は、window.document が入っています。
    console.log(event.target); 
    
    // dispatchEventで渡した detail が取得できます。
    console.log(event.detail); // or console.log(event.obj);
});

組み込みの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の情報は、動作条件のjQuery バージョン対応表を参照してください。
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()を呼ぶことによりロードが開始されます。

イントロダクション

入門

コア概念

フロントエンド開発

機能ガイド

リファレンス

アップデート

拡張・カスタマイズ

ツール