通常、エントリーデータの変更時にはカスタムフィールドの値は全更新が行われます。そのエントリー ※1 に登録されているカスタムフィールドの値を全て削除したのちに、入力されている値を登録します。
例えば、新規エントリー登録時には、カスタムフィールドとしてTEL、FAXの項目があったとします。編集時に入力項目としてTELしかなかった場合 ※2 編集データの登録が行われると画面になかったFAXの値は削除されます。
※1 カテゴリーのカスタムフィールド、ブログのカスタムフィールドも同様です。
※2 hiddenではなくHTMLのソース上に存在しないの意味
全て削除してから登録するのではなく、画面に存在している値のみ上書きするには、下記の2行を field.html の中にご記入ください。
<input type="hidden" name="updateField" value="on" /> <input type="hidden" name="field[]" value="updateField" />
SmartBlock とは Ver.2.11より、a-blog cmsに新しく追加される予定のブロックベースのエディターです。
SmartBlockの特徴は以下になります。
あらかじめ設定したタグ以外の情報が一切入りません。そのため、一般的なエディターでよくあるような、意図しないタグが知らない間に挿入されているといったことが起こりません。また他のページの内容をコピー、ペーストした際もあらかじめ設定したタグ以上の情報は入りません。
また、ブロックベースの考え方でできているため、見出しと本文を入れ替えたり画像と本文を入れ替えたり、順番の制御が容易に行えます。
SmartBlockはカスタマイズ性にもすぐれ、JavaScriptにそれほど精通していない人でも独自のブロックを作成することができます。
では早速SmartBlockを使ってみましょう。
Ver.2.11にはユニットでは「リッチエディター」という名前でPaperEditorが導入されます。デフォルトでは追加ユニットのボタン群にリッチエディターボタンが追加されていないので、追加してみましょう。
管理画面 > コンフィグ > 編集設定 の順にページを移動し、 ユニット追加ボタンより以下のようにリッチエディターを追加してください！
その後、エントリー編集画面に行くと以下のようにボタンが追加されているのが確認できます。
ボタンをクリック後、下図のような見た目でユニットが表示されたら成功です。
SmartBlockは組み込みJSとしても使用できます。カスタムフィールドメーカーを使ってSmartBlockを設置してみましょう。
Ver.2.11よりカスタムフィールドメーカーが強化され、あらたにLiteEditor、SmartBlock、テーブルの組み込みJS用のソースコードが出力できるようになりました。管理画面 > コンフィグ > カスタムフィールドメーカーの順にページを移動して、以下のようにセレクトメニューからリッチエディターを選択し、ソースコードを生成しましょう。
生成されたコードを各種カスタムフィールドの設置したい箇所に貼り付け、使用してください。
さて、ここからいよいよハンズオンです。
SmartBlockではユニットのようにブロックを簡単に作ることが可能です。このハンズオンでは、編集画面を SmartBlock 用のテーマに変更し、実際に新しいブロックを追加する方法を紹介します。
今回は blog2019 を継承した paper-editor@blog2019 を用意しました。
以下のフォルダをダウンロードしてthemesディレクトリに設置してください。
paper-editor@blog2019
設置したら、管理画面 > コンフィグ > テーマ設定の順にページを移動します。
先ほど設置した paper-editor@blog2019 をテーマディレクトリ名に選択し、テンプレート設定のチェックを外してください。
そして、以下のようにテンプレートファイルを設定します。
あとは、管理画面＞コンフィグ＞編集設定の順にページを移動し、エントリーの編集画面の設定を表側で統一すれば準備完了です！
エントリー編集画面で以下のように記事を書けば
SmartBlockの編集画面
エントリー保存後、書いた内容がそのまま表示されているのが確認できます！
エントリー保存後の画面
次にオリジナルブロックを追加してみましょう。
/themes/paper-editor@blog2019/include/head/js.html に以下のように記述します。
<script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js"></script>
<!-- BEGIN_MODULE Js -->
<script src="%{ROOT_DIR}acms.js{arguments}" id="acms-js"></script><!-- END_MODULE Js -->
<!-- BEGIN_MODULE Touch_Unlogin --><!-- BEGIN_MODULE Blog_Field -->{google_analytics}[raw]<!-- END_MODULE Blog_Field --><!-- END_MODULE Touch_Unlogin -->
<script>
ACMS.Ready(function() {
// ここに処理を書いていく
});
</script>| プロパティ名 | 説明 | 記述例 |
|---|---|---|
| tagName | HTML要素を指定 | 例）p |
| className | クラス名を指定 | 例）acms-text-error |
| customName | ユニークな名前を記述 | 例）error-text |
| icon | アイコンを挿入するときはHTMLタグを記述 | 例）<img src="画像のファイルパス"> または <svg>...</svg> |
ACMS.Config.SmartBlockAdds = function(Extensions) {
return [
new Extensions.CustomBlock({
tagName: 'div',
className: 'acms-alert',
customName: 'alert',
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1792 1792"><title>アラート</title><path d="M1777.67,1567.49,960.05,49.07c-35.23-65.43-92.87-65.43-128.1,0L14.33,1567.49c-35.22,65.43-3.25,119,71.06,119H1706.61C1780.92,1686.45,1812.89,1632.92,1777.67,1567.49ZM1024,1536H768V1280h256Zm0-384H768L704,576h384Z"/></svg>'
})
]
};追加されるアラート
さらにSmartBlockではブロックだけでなく、インライン用の装飾（マーカー）を追加することが可能です。
ACMS.Config.SmartBlockAdds = function(Extensions) {
return [
new Extensions.CustomBlock({
tagName: 'div',
className: 'acms-alert',
customName: 'alert',
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1792 1792"><title>アラート</title><path d="M1777.67,1567.49,960.05,49.07c-35.23-65.43-92.87-65.43-128.1,0L14.33,1567.49c-35.22,65.43-3.25,119,71.06,119H1706.61C1780.92,1686.45,1812.89,1632.92,1777.67,1567.49ZM1024,1536H768V1280h256Zm0-384H768L704,576h384Z"/></svg>'
}),
//さらに追加
new Extensions.CustomMark({
tagName: 'small',
customName: 'small',
icon: 's' // 本来であればSVGまたはimg要素を指定できるのですが、現在のベータ版では対応されていないので代わりにテキストを記述してください
})
]
};追加されるsmall要素
8/22（金）にa-blog cms DAYが開催されました。山形・富士・名古屋・神戸・広島の5カ所のサテライト会場で行われました。
a-blog cms DAYとは、全国各地でa-blog cmsの勉強をする日です。ビデオチャットを通して全国各地のa-blog cmsユーザーと繋がることができ、リアルタイムでわからないところを質問することができます。5カ所の都市で開催されていますが、ビデオチャットで各地とつながっているため、お近くに会場がない場合は開催していただくこともできますし、ご自宅からでもご参加できます。
名古屋会場の勉強会風景
#ablogcms STREAMも放送しました
今回の新しい試みとして、今まで使っていたチャットワークではなく、リアルタイムで会話ができるYouTube Liveを活用して開催地5カ所とつながりました。画面越しではありますが、実際に相手の顔や声も聞ける状態でサポートすることができました。
弊社では 最近 a-blog cms で使えるさまざまな拡張アプリを開発しています。その一つとしてフォームから送信された内容をエントリーにする拡張アプリ、Form2Entryがあります。Form2Entryは使い方次第でとても強力なツールとなるのでぜひ使い方をマスターしましょう。
Form2Entryはビジネスパートナー契約の特典として解放されているa-blog cmsパートナーストアでご購入いただける拡張アプリです。期間限定ではありますが、ハンズオンできるプログラムを本記事で配布しております。
フォームからエントリーに登録したい内容を送信できる機能です。フォームモジュールを使用したフォームから、エントリーに投稿したい内容を送信できます。この機能を活用することで掲示板のようなログイン無しで投稿できる、投稿型サイトが簡単に実装できます。
自動で投稿されたエントリーは、カテゴリーの指定や、エントリーのステータス、どのユーザーとして登録するかなど詳細な指定がフォームの管理画面から可能になっています。
Form2Entryではフォームから送信されたフィールドがエントリーの以下のテーブルの情報に変換されて登録されます。以下のテーブルに記載がない項目についてはエントリーのカスタムフィールドとして保存されます
| フィールド名 | フォーマット | 説明 | 例 | 指定なしの場合 |
|---|---|---|---|---|
| entry_id | 数値 | エントリーIDを指定 | 123 | 新規eid |
| entry_code | 文字列 | コード（ファイル名）を指定 | entry-123.html | 通常エントリ作成時と同様 |
| entry_status | open | close | draft | trash | ステータスを指定（open: 公開、close: 非公開、draft: 下書き、trash: ゴミ箱）のいずれかを指定 | open | open |
| entry_title | 文字列 | タイトルを指定 | テストエントリー | CSV_IMPORT-[eid] |
| entry_link | 文字列 | リンク先URLを指定 | https://www.a-blogcms.jp/ | |
| entry_datetime | yyyy-MM-dd H:mm:ss | 日付を指定 | 2018-12-06 15:08:01 | インポート時の日時 |
| entry_start_datetime | yyyy-MM-dd H:mm:ss | 公開日時を指定 | 2018-12-06 15:08:01 | 1000-01-01 00:00:00 |
| entry_end_datetime | yyyy-MM-dd H:mm:ss | 掲載期限を指定 | 2018-12-06 15:08:01 | 9999-12-31 23:59:59 |
| entry_posted_datetime | yyyy-MM-dd H:mm:ss | 作成日を指定 | 2018-12-06 15:08:01 | インポート時の日時 |
| entry_updated_datetime | yyyy-MM-dd H:mm:ss | 更新日を指定 | 2018-12-06 15:08:01 | インポート時の日時 |
| entry_summary_range | 数値 | ユニットの「続きを読む」の位置を指定（例: 3 -> 上から３番目のユニットを一覧で出力） | 3 | |
| entry_indexing | on | off | インデキシング（一覧に出力するかどうか）を設定（on: 出力する、off: 出力しない） | on | on |
| entry_primary_image | 数値 | メイン画像のユニットIDを指定 | 123 | |
| entry_category_id | 数値 | カテゴリーIDを指定 | 1 | |
| entry_user_id | 数値 | エントリー所有者のユーザーIDを指定 | 1 | インポート実行者のUID |
| カスタムフィールド変数 | カスタムフィールド としてインポートされます。インポート先のフィールド仕様にあった値を設定ください |
さらにフォームから投稿された画像やカスタムフィールドグループなどの情報もエントリーにそのまま保存されます。その際には、カスタムフィールドメーカーで生成すると便利です。
カスタムフィールドだけではなく、エントリーのユニットにもフォームから送信したデータを登録することができます。その場合は以下のように記述します。
<input type="hidden" name="unit@p[]" value="テキスト1"> <input type="hidden" name="unit@p[]" value="テキスト2"> <input type="hidden" name="field[]" value="@unit"> <input type="hidden" name="field[]" value="unit@p"> <input type="hidden" name="@unit[]" value="unit@p">
unit@p以外にも、unit@h2, unit@h3, unit@ul, unit@markdownが利用でき、それぞれ、見出し2、見出し3、リスト、マークダウンの形式でテキストユニットに保存されます。
Form2Entryは拡張アプリとなるため、使うためにはルートディレクトリ直下にあるconfig.server.php より HOOK_ENABLE を 1 にします。
Form2Entryをダウンロードしましょう。以下のパッケージは暗号化されていて、年内まで利用することができます。
サーバー環境のPHPのバージョンに合わせて、パッケージをダウンロードしてください。PHPのバージョンは、管理画面＞チェックリストのページにて確認することができます。（※2019/11/22時点のablogcms.ioのPHPのバージョンは5.6.17です）
PHP 5.3 ~ 5.5対応
PHP 5.6 ~ 7.0対応
PHP 7.1 ~ 7.3対応
Form2Entryをa-blog cmsに設置しましょう。zipファイルを解凍したら、/extension/plugins/ディレクトリの中に、Form2Entryという名前でフォルダを設置します。
設置したら、管理画面 > 拡張アプリよりForm2Entryをインストールします。
管理画面＞フォームの順にページを移動し、Form2Entryを使いたいフォームIDの設定ページに移動します。
contactFormのフォーム設定画面に移動すると下の画像のようにForm2Entry用の設定が増えています。エントリー設定を「有効にする」にチェックを入れることでForm2Entryが利用可能になります。
Form2EntryのフォームIDの設定には以下の設定項目があります。ハンズオンに移る前に、それぞれ順を追って説明します。
項目変換設定はフォームで送信されたフィールドの内容をどのようにエントリーのフィールドに保存するかの設定です。デフォルトの設定である「項目変換をせずに全部登録する」ではフォームのフィールド名がそのままエントリーのカスタムフィールドとなって保存されます。
こちらの設定では、あらかじめフォームのフィールド名に対応するエントリーのカスタムフィールド名を記述しておくことによって、フォームから送信された内容が一部、別名でエントリーのカスタムフィールドに登録されます。ここに設定されていない項目についてはそのままのフィールド名でエントリーのカスタムフィールドに登録されます。なお、下の画像のようにエントリー側の項目が空の場合は、対応するフォームのフィールドがエントリーのカスタムフィールドに保存されなくなります。
この設定では、あらかじめフォームの設定で登録された内容以外の送信内容が全て破棄されてエントリーのカスタムフィールドに登録されます。
フォーム内で利用された変数を活用して、フォームから生成されるエントリーのタイトルを設定できます。
エントリーがフォームから作成された際にここで指定されたブログがエントリーに設定されます。
エントリーがフォームから作成された際にここで指定されたカテゴリーがエントリーに設定されます。
エントリーがフォームから作成された際にここで指定されたユーザーがそのエントリーの作成者として登録されます。
エントリーがフォームから作成された際のエントリーの公開状態を指定することができます。
このハンズオンでは、From2Entryの機能を使って、お問い合わせ管理の仕組みを作ります。以下の手順で進めていきます。
ここでは、site2019テーマの初期インストール状態を例に解説していきます。環境が異なる場合はご自身の環境に合わせて読み替えてください。
以下のように子ブログを作ります。管理者のみ閲覧できるように今回はシークレットブログで作成します。
フォームの投稿データをエントリーへ変換したいフォームIDの変更画面に移動します。今回はcontactFormを使用します。
contactFormの変更画面に移動すると、以下のようにForm2Entryの設定項目が増えています。「エントリー設定」を有効にしてください。
下図のように設定し、ルートブログに投稿されたフォームの内容を、子ブログのエントリーとして作成されるようにしましょう。
これで、お問い合わせフォームから送信すると子ブログにエントリーが作成される仕組みができました。一度、フォームを送信して子ブログにエントリーが作成させるか試してみてください。
それでは、お問い合わせを管理するための編集ページを作成していきます。
下図のようなお問い合わせ管理用の管理画面を、エントリーに作成していきます。この画面を作ることにより、Form2Entryにより投稿されたエントリーのデータを編集できるようになります。
子ブログ側のエントリーにお問い合わせ内容を確認するためのカスタムフィールドを作ります。
子ブログ用のカスタムフィールドが登録できるように、以下のように @include("/admin/entry/field/%{BCD}.html") を以下のテンプレートに書き加えます。
<!-- 共通の設定 -->
@include("/admin/entry/field/common.html")
<!-- SEOの設定 -->
@include("/admin/entry/field/seo.html")
<!-- ピックアップの設定 -->
@include("/admin/entry/field/pickup.html")
<!-- コード別フィールドの表示 -->
@include("/admin/entry/field/%{CCD}.html")
@include("/admin/entry/field/%{ECD}")
<!-- 以下を追加 -->
@include("/admin/entry/field/%{BCD}.html") 次にお問い合わせ内容のカスタムフィールドを実際に作っていきます。 /themes/site2019/admin/entry/field/contact-admin.html を作成してください。
お問い合わせフォームで使用しているHTMLの一部分をそのまま利用するため、既存のファイルをインクルードします。お問い合わせに対しての対応状況の項目だけ、新たに追加しておきましょう。
<style>
.contact-form .acms-form-width-full {
width: 100% !important;
}
</style>
<table class="acms-admin-table-admin-edit">
<tr>
<th>対応状況</th>
<td>
<div class="acms-admin-form-checkbox">
<input type="checkbox" name="responseStatus[]" value="done" {responseStatus:checked#done} id="input-checkbox-responseStatus-done" />
<label for="input-checkbox-responseStatus-done">
<i class="acms-admin-ico-checkbox"></i>対応済み</label>
</div>
<input type="hidden" name="field[]" value="responseStatus" />
</td>
</tr>
</table>
@include("/contact/form/input.html")またお問い合わせフォームで使われているCSSが適用するために、管理画面 > コンフィグ > 編集設定の順にページを移動し、以下のように編集画面を表側に統一しておいてください。
お問い合わせ管理のブログのを調整して実際にお問い合わせ内容が表示されるようにカスタマイズしていきます。
新たに、themesディレクトリにcontact-admin@site2019フォルダを作成し、子ブログの管理画面 > コンフィグ > テーマ設定にてcontact-admin@site2019テーマを選択します。
このとき、テンプレートの設定は「テンプレート選択ファイル（template.yaml）の値を優先する」のチェックを外して、以下のようにしておきましょう。
以下の必要なファイルを新規作成またはすでに存在するファイルには一部コードを追加します。
ファイルの34行目付近に移動し、以下のように @include("/contact/form/confirm.html")を追加します。
<!-- エントリーのタイトル 開始▼▼ -->
<!-- BEGIN title:veil -->
<header class="acms-page-header page-header">
<p class="entry-info">
<!-- BEGIN date:veil --><time datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年{date#m}月{date#d}日（{date#l}[weekEN2JP]）</time><!-- END date:veil -->
<!-- BEGIN category:veil --><!-- BEGIN category:loop -->
<a href="{url}" class="acms-label entry-category js-viewing-indelible">{name}</a><!-- BEGIN glue --> <<!-- END glue -->
<!-- END category:loop -->
<!-- END category:veil --><!-- BEGIN new --><span class="acms-label acms-label-danger entry-new">NEW</span><!-- END new --></p>
<!-- BEGIN_MODULE Touch_Entry --><h1 class="entry-title"><a href="{titleUrl}">{title}</a></h1><!-- END_MODULE Touch_Entry -->
<!-- BEGIN_MODULE Touch_NotEntry -->
<h2 class="entry-title"><a href="{titleUrl}">{title}</a></h2><!-- END_MODULE Touch_NotEntry -->
</header>
<!-- END title:veil -->
<!-- 以下を追記 -->
<!-- BEGIN_MODULE Touch_NotAdmin -->
@include("/contact/form/confirm.html")
<!-- END_MODULE Touch_NotAdmin -->@extends("/_layouts/one-column.html")
@section("main")
<div class="acms-container">
<!-- エントリーボディ（日付無し） -->
@include("/include/entry/body.html", {"module_id": "body_no_date"})
</div>
@endsection@extends("/_layouts/one-column.html")
@section("main")
<div class="acms-container">
@include("/include/parts/contact-search.html")
<!-- BEGIN_MODULE Entry_Summary id="summary_index" -->
<section class="module-section">
@include("/admin/module/setting.html")
<div class="module-header clearfix">
<!-- BEGIN moduleField -->
<!-- BEGIN module_heading:veil -->
<h2 id="top_headline-{{module_id}}" class="module-heading">
<!-- BEGIN module_heading_icon:veil --><span class="{module_heading_icon}" aria-hidden="true"></span>
<!-- END module_heading_icon:veil -->{module_heading}</h2><!-- END module_heading:veil -->
<!-- END moduleField -->
<a href="{indexUrl}" class="module-index-link"><span class="acms-icon acms-icon-arrow-right"
aria-hidden="true"></span><!-- BEGIN moduleField --><span class="acms-hide-visually">{module_heading}の</span>
<!-- END moduleField -->一覧</a>
</div>
<ul class="headline acms-list-group clearfix" aria-labelledby="top_headline-{{module_id}}">
<!-- BEGIN entry:loop -->
<li class="headline-item {entry:loop.class}">
<!-- BEGIN url#front --><a href="{url}" class="acms-list-group-item headline-link">
<!-- END url#front -->
<time class="headline-dat" datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年{date#m}月{date#d}日( {date#week}
)</time>
<!-- BEGIN category:veil --><span class="acms-label">{categoryName}</span><!-- END category:veil -->
<span class="headline-title">{title}</span>
<!-- BEGIN_IF [{responseStatus}/eq/done] --><span class="acms-label acms-label-info">対応済み</span>
<!-- ELSE --><span class="acms-label acms-label-danger">未対応</span>
<!-- END_IF -->
<!-- BEGIN url#rear --></a><!-- END url#rear -->
</li><!-- END entry:loop -->
</ul>
</section>
<!-- END_MODULE Entry_Summary -->
</div>
@endsectionこのHTMLはお問い合わせ検索用のテンプレートになります。
<!-- BEGIN_MODULE Field_Search -->
<div class="entry-column">
<form action="/" method="post" class="acms-form" role="search" aria-label="検索フォーム">
<table class="realestate-search">
<tr class="acms-hide-sp">
<th class="acms-admin-table-nowrap">対応状況</th>
<th class="acms-admin-table-nowrap">キーワード</th>
<th class="acms-admin-table-nowrap">検索</th>
</tr>
<tr>
<td class="acms-admin-table-nowrap">
<div class="acms-admin-form-checkbox">
<input type="checkbox" name="responseStatus[]" value="done" {responseStatus:checked#done} id="input-checkbox-responseStatus-done" />
<label for="input-checkbox-responseStatus-done">
<i class="acms-admin-ico-checkbox"></i>対応済み</label>
</div>
<input type="hidden" name="field[]" value="responseStatus" />
</td>
<td class="acms-form-width-full">
<label for="keyword" class="acms-hide-visually-lg acms-hide-visually-xl">キーワード</label>
<input type="search" name="keyword" value="%{KEYWORD}" id="keyword" class="acms-form-width-full" />
</td>
<td class="acms-admin-table-nowrap">
<input type="hidden" name="bid" value="%{BID}" />
<input type="submit" name="ACMS_POST_2GET" value="検索" class="btn btn-search-block" />
</td>
</tr>
</table>
</form>
</div>
<!-- END_MODULE Field_Search -->これでカスタマイズは完了です。
カスタマイズがうまく完了していれば、お問い合わせから送信があった場合は以下のように子ブログでエントリー一覧が表示されます。
以下のようにエントリーのカスタムフィールド を「対応済み」にチェックを入れると、一覧ページのラベルに「対応済み」と表示されます。
ハンズオンは以上になります。
今回はForm2Entryでお問い合わせ管理機能を作りましたが、アイデア次第でForm2Entryで予約管理システムなどいろいろなサイトが作れるはずです。みなさんもぜひ挑戦してみてください！
a-blog cmsに標準で組み込まれている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は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プラグインを使用する場合もjavaScriptの場合と同様に、適用しているテーマ内にjQueryプラグインのファイルを置き、head内から参照してください。
Ver. 2.5.0よりjavascriptの読み込みが非同期になった為、jQueryについても非同期で読み込まれまれるようになりました。その為、jQueryを使うプラグインなどをacms.jsより後で読み込んだとしても、その時点でjQueryが読み込まれておらずエラーが発生します。
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 -->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()を呼ぶことによりロードが開始されます。