@spearly/jquery-plugin

Spearly CMSでは、jQuery向けのプラグイン、@spearly/jquery-pluginを展開しております。
このjQueryプラグインを使用すると、jQueryで簡単にSpearly CMSのAPI呼び出しができるようになります。

インストール・セットアップ方法

このjQueryプラグインを使用する方法は2つあります。
npm / Yarnでインストールする方法と、CDNを使用する方法の2つです。それぞれ解説します。

npm / Yarnでインストールする

npm / Yarnでインストールする場合は、以下のいずれかのコマンドでプラグインをインストールします。

$ npm i -S @spearly/jquery-plugin jquery
$ yarn add -S @spearly/jquery-plugin jquery

webpackを使用している場合は、webpack.config.jsに以下の記述を追記してください。

...
plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
    }),
],
...

最後に、JSファイルをimportします。

import '@spearly/jquery-plugin'

CDNを使用する

CDNを使用する場合は、HTMLファイルのhead要素内に以下の記述をしてください。

<script src="/jquery.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@spearly/jquery-plugin/dist/spearly-plugin.js" defer></script>

初期化

npm / Yarnインストールの場合も、CDNを使用している場合も、必ず最初に初期化を行う必要があります。初期化を行わないと、メソッドが登録されず使うことができません。

$(function() {
    $.spearly.init({ apiKey: 'YOUR_API_KEY' }) // YOUR_API_KEYは、Spearly CMSのAPIキーを指定してください。
})

コンテンツ一覧の取得（$.spearly.getList）

$.spearly.getListメソッドで、コンテンツ一覧を取得できます。

async function() {
    // 基本的な使用方法
    const contents = await $.spearly.getList('CONTENT_TYPE_ID')
    // オプションを含めた使用方法
    const filteredContents = await $.spearly.getList('CONTENT_TYPE_ID', { limit: 10, offset: 20 })
}

コンテンツ一覧の取得には、第2引数にオプションを指定できます。
指定できるオプションは以下の通りです。

指定できるオプション

key	type （）はデフォルト値	説明
limit	number（10）	取得件数を制限します。
offset	number（0）	取得開始位置を指定します。
order	'desc'、'asc'（'desc'）	ソートの指定です。published_atに対して行われます。order-byとの併用はできません。
order_by	'latest'、'popular'、string	latestは公開日時、popularは閲覧数の降順でソートします。
filter_by	string	特定のフィールドと指定する値でフィルタリングします。filter-byはフィルタリングしたいフィールドのIDを指定します。 filter_valueと合わせて使用します。
filter_value	string	フィルタリングしたいフィールドの値を指定します。部分一致で検索されます。 filter_byと合わせて使用します。
filter_ref	string	参照コンテンツに対するフィルタリングです。filter-refには参照コンテンツのフィールドIDを指定し、filter-by、filter-valueで参照先のコンテンツのフィールドID、値を指定します。
range_to	string	指定した日付より以前に公開されたコンテンツを取得します。
range_from	string	指定した日付より後に公開されたコンテンツを取得します。

コンテンツの取得（$.spearly.getContent）

$.spearly.getContentメソッドで、コンテンツを取得できます。

async function() {
    const content = await $.spearly.getContent('CONTENT_ID') // COTENT_IDにはSpearly CMSのエイリアスなどに表示されているコンテンツのIDを指定してください。
    const preview = await $.spearly.getContent('CONTENT_ID', 'PREVIEW_TOKEN') // 第2引数にSpearly CMSで発行されるプレビュートークンを指定すると、プレビューを取得できます。
}

フォームの取得（$.spearly.getFormLatest）

$.spearly.getFormメソッドで、最新のフォームを取得できます。

async function() {
    const form = await $.spearly.getFormLatest('FORM_ID') // FORM_IDには、pearly CMSの埋め込み用フォームIDを指定してください。
}

フォームの送信（$.spearly.postFormAnswer）

$.spearly.postFormAnswerメソッドで、フォームの送信を行うことができます。

async function() {
    const submit = await $.spearly.postFormAnswer(
        FORM_VERSION_ID, 
        {
            ...YOUR_FORM_FIELD_ANSWERS,
            _spearly_gotcha: '',
        }
    )
}

FORM_VERSION_IDは $.spearly.getFormLatest メソッドのレスポンスにあるidを指定してください。
YOUR_FORM_FIELD_ANSWERSには、フォームに設定したフィールドのIDと入力値のペアのオブジェクトを指定してください。
例えば、name、email、contentというフォームフィールドを指定していて、入力値がそれぞれ '山田太郎'、'email@example.com'、'こんにちは'だった場合、以下のようになります。

$.spearly.postFormAnswer(
    FORM_VERSION_ID,
    {
        name: '山田太郎',
        email: 'email@example.com',
        content: 'こんにちは',
        _spearly_gotcha: '',
    }
)

最終更新日: 2022.04.25