組み込みの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()を呼ぶことによりロードが開始されます。