concrete5 でアドオンを作るときに、ajax 処理を行いました。そのときに、ルーティングを追加する処理を書いたので、その方法のまとめ。アドオンは、「Rescuework's Proofreading using Yahoo Japan API(ヤフーのAPIを利用して、誤字脱字チェックなどテキスト校正を支援するツール。CMS 上で原稿を書いてチェックする場合に便利になる。)」。コードはhttps://github.com/ounziw/ounziw_proofreading/blob/master/controller.php。

※ajax自体の解説や、ajaxのコードの詳細は省いています。

リクエストを受けるURLを決める

ajaxでサーバーと通信するときに、どのURLでリクエストを受けるかを決めます。concrete5では、Route::registerを使用して、リクエストを受けるURLを決めます。そのURLにアクセスしたときに実際に実行する処理との対応付けも行います。

    // (1) Route::registerの例
    Route::register(
        '/ounziw_proofreading/tools/proofreading_token',
        '\Concrete\Package\OunziwProofreading\Controller\Tools\Proofreading::return_token'
    );

第一引数は、URL、第二引数は、そのURLにアクセスすると実行されるクラスとメソッドです。上の例だと、ウェブサイトのURL/index.php/ounziw_proofreading/tools/proofreading_tokenにアクセスすると、\Concrete\Package\OunziwProofreading\Controller\Tools\Proofreadingクラスのreturn_tokenメソッドを実行します。

Route::registerを実行する

(1)のコードを実行するには、パッケージ(concrete5では、本体に機能追加するプログラムをパッケージに纏めて管理しています)のcontroller.phpのon_startメソッドで実行します。

// (2)
class Controller extends \Concrete\Core\Package\Package {
...
    public function on_start() {
        Route::register(
            '/ounziw_proofreading/tools/proofreading_token',
            '\Concrete\Package\OunziwProofreading\Controller\Tools\Proofreading::return_token'
        );
    }
...
}

こうすることで、ajaxリクエストを受けるURLと、そのURLで実行するメソッドの指定ができました。
必要ならば、Route::registerメソッドを複数使用しても構いません。実際のアドオンのコードでは、Route::registerメソッドを3回使用しています。

// (3)
    // トークンだけを返すメソッド。このパッケージをベースに、投稿フォームを自作したい場合に使う
    Route::register(
        '/ounziw_proofreading/tools/proofreading_token',
        '\Concrete\Package\OunziwProofreading\Controller\Tools\Proofreading::return_token'
    );
    // 投稿フォームを表示する
    Route::register(
        '/ounziw_proofreading/tools/proofreading',
        '\Concrete\Package\OunziwProofreading\Controller\Tools\Proofreading::render'
    );
    // ヤフーのAPIに接続して、テキスト校正結果を表示する
    Route::register(
        '/ounziw_proofreading/tools/proofpost',
        '\Concrete\Package\OunziwProofreading\Controller\Tools\Proofreading::yahooapi'
    );

ajax処理するjavascript

javascript(jQuery)を使って、Route::registerで登録したURLにアクセスします。

// (4) ajaxリクエストするjavascript
$(document).on("submit", "#proofreading", function() {
    $.ajax({
        url: CCM_APPLICATION_URL + "/index.php/ounziw_proofreading/tools/proofpost",
        type: "post",
        data: $(this).serialize(),
        timeout: 10000,
})
    .done(function(result, textStatus, xhr) {
        ...
    })
    .fail(function(xhr, textStatus, error) {
        ...
    });
});

CCM_APPLICATION_URLは、concrete5で用意されている変数で、ウェブサイトのURLが格納されています。concrete5上のjavascriptでURLを取得したいときは、この変数を使えばOKです。

おわりに

はじめてajaxを使うときに知りたかったことの「連続クリックを防止する」「連続通信を防止する」は実装したいと思います。作ったアドオンは「ログインしたユーザーがajax処理を行う」ものなので、いたずらのリスクは低いと思われますが、プログラムで対応できるようなので、次のバージョンでは対応したいと思います。