組み込みJSについて
a-blog cmsには、標準でJavaScriptが組み込まれています（組み込みJSと呼んでいます）
設定変更の方法について紹介します。各機能の詳細についてはリファレンスを参照してください。
サイトの表示側の組み込み JS ではなく、管理画面の拡張や JavaScript 全体の選び方を知りたい場合は、JavaScript でカスタマイズする、または管理画面の JavaScript 拡張の一覧を参照してください。
各種ライブラリの使用と設定について
各種機能には、ライブラリを使用しているものが多数あります。基本的な設定は/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
};
});初期化の完了を待つ
ACMS.Ready() は従来どおり使えます。Ver. 3.2.29 からは、初期化が完了しているかどうかを直接確認することもできます（実験的機能。Ver. 3.2 の間は実験的機能として提供し、Ver. 3.3 で正式に提供する予定です）。
if (ACMS.readyStates.ready === 'complete') {
console.log('すでに初期化が完了しています');
} else {
ACMS.events.on('acms.state.ready', () => {
console.log('初期化が完了しました');
});
}管理画面のカスタマイズについて
管理画面の動作を変えたい場合は、組み込み JS ではなく 管理画面の JavaScript 拡張（実験的機能）を使います。