強化ガジェットの使い方と注意点

SPIRERS ナレッジ向上チームで作成して公開している強化ガジェットについて、使い方と注意点をご説明いたします。

強化ガジェットとは

強化ガジェットは、SPIRAL ver.2のサイト機能を強化するためのプログラムです。
プログラムが分からない方でも、コピーペーストして設定値を変更するだけで利用することができます。
こんな強化ガジェットが欲しいというご要望があれば、ぜひリクエストボードよりご連絡ください。
強化ガジェット一覧（特集ページ）

利用する際の注意点

JavaScriptを使用した強化ガジェットについて

JavaScriptを使用した強化ガジェットは、ブラウザの設定でJavaScriptを無効にしている方がアクセスした場合に正しく動作しません。
対策として、ブラウザのJavaScript が無効時に画面操作させない強化ガジェットを公開していますので。ご活用ください。

動作保証について

強化ガジェットは動作確認をしてから公開していますが、環境によって正しく動作しない可能性や、新たに不具合が見つかる可能性がございます。
利用される際は、テストを十分に行っていただきますようお願いします。
不具合を見つけた場合は、リクエストボードよりご指摘ください。

強化ガジェットの利用にあたって、動作の保証はいたしかねます。
また、強化ガジェットの利用によって生じた損害について一切責任を負わないものとします。

使い方

強化ガジェットの設定方法は、各強化ガジェットによって異なります。
各記事で説明されている設定方法に従って強化ガジェットを設置してください。

この記事では、APIエージェントの作成方法と、ソースを設置できる箇所だけをご説明します。

APIエージェントの作成方法

強化ガジェットによっては、APIエージェントの作成が必要となるものがあります。
APIエージェントの作成方法は、SPIRAL ver.2 サポートサイト APIエージェント管理を参考にしてください。

ソースの設置箇所

ソースを設置できる箇所はページ、ブロック、共通ソースの3箇所です。
記事にて設置箇所が指定されている場合は、その箇所にソースを設置してください。
設置箇所が指定されていない場合は、下記の説明を参考にソースの設置個所を決めてください。

・ページ

body（ソース設定のみ）, head, CSS, JavaScript, PHP を記述することが出来ます。
ページに強化ガジェットを設置した場合、そのページだけに適用されます。

・ブロック

HTML（ソース設定のみ）, CSS, JavaScript を記述することが出来ます。
ブロックに強化ガジェットを設置した場合、そのブロック自体に強化ガジェットが適用されます。
複数ページにブロックを設置している場合、それぞれのページで強化ガジェットが有効になります。
一つのページに複数ブロックを設置している場合、正しく動作しない可能性があります。あらかじめご了承ください。

・共通ソース

head, CSS, JavaScript を記述することが出来ます。
共通ソースに強化ガジェットを設置した場合、サイト内の全ページに強化ガジェットが適用されます。
ページの内容に関わらず、全ページで強化ガジェットが読み込まれてしまうため、共通ソースへの設置は指定されている場合を除いて非推奨となります。

複数強化ガジェットを利用する場合

一つのページやブロックに複数の強化ガジェットを設置する場合、JavaScriptのソースをまとめる必要がございます。

強化ガジェットAのJavaScript

// 設定値
const a_gadget_id1 = ""; // 強化ガジェットAで使用するフィールドのID1
const a_gadget_id2 = ""; // 強化ガジェットAで使用するフィールドのID2


// 原則変更不可
// 複数強化パーツがある場合、変更あり
window.onload = function () {
    a_onload();
};


// 変更不可
// 複数強化パーツがある場合、下記を変更不可箇所に追加
function a_onload() {
    ︙
}
function a_func_1(〇〇, 〇〇) {
    ︙
}
function a_func_2(〇〇, 〇〇) {
    ︙
}

強化ガジェットBのJavaScript

// 設定値
const b_gadget_msg = ""; // 強化ガジェットBで使用する表示メッセージ


// 原則変更不可
// 複数強化パーツがある場合、変更あり
window.onload = function () {
    b_onload();
};


// 変更不可
// 複数強化パーツがある場合、下記を変更不可箇所に追加
function b_onload() {
    ︙
}
function b_func(〇〇) {
    ︙
}

強化ガジェットAとBをまとめた例

// 設定値
const a_gadget_id1 = ""; // 強化ガジェットAで使用するフィールドのID1
const a_gadget_id2 = ""; // 強化ガジェットAで使用するフィールドのID2

const b_gadget_msg = ""; // 強化ガジェットBで使用する表示メッセージ


// 原則変更不可
// 複数強化パーツがある場合、変更あり
window.onload = function () {
    a_onload();
    b_onload();
};


// 変更不可
// 複数強化パーツがある場合、下記を変更不可箇所に追加
function a_onload() {
    ︙
}
function a_func_1(〇〇, 〇〇) {
    ︙
}
function a_func_2(〇〇, 〇〇) {
    ︙
}

function b_onload() {
    ︙
}
function b_func(〇〇) {
    ︙
}

・設定値を上部にまとめる

JavaScriptのソース冒頭に記載されている設定値は、上部にまとめて書くことを推奨します。
これにより、設定値を変更する際にソースの中から変更箇所を探し出す必要が無くなります。

・「window.onload = function ()」の中身をまとめる

「window.onload = function ()」内の記述はまとめる必要があります。
まとめずにwindow.onloadを複数記述した場合、強化ガジェットが正しく動作しません。

開発情報・ナレッジ