Drupal 7 Ajax 入門 - 非 Form API 編

本日は「 Drupal 7 Ajax 入門」と題して、 Drupal （ドルーパル）で Ajax 処理を行う方法をご紹介できればと思います。

今回はこちらの記事の第 2 弾に相当します。

• Drupal 7 入門 - Form API 編

こちらの記事でご紹介したとおり、 Web サイト上でページの一部だけ更新するいわゆる Ajax 処理を Drupal で実現するには次の 2 通りの方法があります。

1. Drupal の Form API を使う方法
2. Drupal の Form API を使わない方法

このうちの 1 については前回の記事でご紹介しています。 非常に強力な Drupal の Form API の一部を端的にご紹介しています。 ご興味のある方はぜひそちらもご覧になってみてください。

一方今回は Form API を使った方法ではなく jQuery をそのまま使う方法をご紹介いたします。 Ajax 処理は行いたいけど Form API がそのままでは使いづらい、そんなときのご参考にしていただければと思います。

以下、まずは前提となる部分から見ていきましょう。

前提

本記事の前提は次のとおりです。

• Drupal のバージョン: Drupal のバージョンは Drupal 7 です。
• 想定読者: 想定読者はプログラマもしくは JavaScript / jQuery のわかるデザイナーの方です。 Ajax についても基本的な仕組みは押さえられているものとします。

Drupal で Ajax - Form API を使わない方法

では具体的に Drupal で Ajax を実現する方法をご紹介していきます。 今回は次のような動きをするページを作ってみたいと思います。

必要なもの

Ajax を実現する際に最低限必要なものとして次の 3 つがあります。

1. Ajax が動くベースとなる HTML
2. Ajax のリクエスト処理を行う JS コード
3. Ajax のレスポンス処理を行うサーバサイドのコールバック

これらを順に作っていく形で進めます。

これらを実装するために先に Drupal モジュールを作成しておく必要があります。 今回はサンプルとして umiajax という名前のモジュールを作成してみましょう。

以下では Drupal のモジュールの作り方や基本的な構成、各種ファイルの位置づけについてはすでにご存知 だという前提で進めていきます。 Drupal モジュールの基本をまだ知らないという方は以下の記事などを参考にしてみてください。

• Drupal 7 カスタムモジュール作成入門
• Drupal のモジュールのインストール方法
• Drupal モジュールの .info ファイルの書き方 日本語訳

ちなみに、 Drupal 7 にはデフォルトで jQuery 1.4.4 が組み込まれているため jQuery を別途ダウンロードする必要などは特にありません。

1. Ajax が動くベースとなる HTML

まずは Ajax が動くベースとなる HTML を作成します。 こちらは Drupal ではいくつかの方法があるのですが、今回はコードを記述する形で独立したページを作ってみましょう。

umiajax.module 内に以下の 2 つの関数を作成します。

umiajax.module:

/**
* Implements hook_menu().
*/
function umiajax_menu() {
  $items = array();

  $items['umi/sample-ajax'] = array(
    'title' => 'Ajax sample',
    'page callback' => 'umiajax_sample_ajax_page',
    // 'page arguments' => array('umiajax_sample_ajax_form'),
    // 'access arguments' => array('access content'),
    'access callback' => TRUE,
  );

  return $items;
}

umiajax.module:

/**
* Ajax サンプルのページを生成する。
*/
function umiajax_sample_ajax_page() {
  $page = array(
    '#prefix' =&gt; '<div id="umiajax-box-1">',
    '#suffix' =&gt; '</div>',
  );

  $page['title'] = array(
    '#type' =&gt; 'markup',
    '#markup' =&gt; '使う人の立場で考えたこだわりの設計',
    '#prefix' =&gt; '<h3 id="umiajax-box-1-title">',
    '#suffix' =&gt; '</h3>',
  );

  $page['body'] = array(
    '#type' =&gt; 'markup',
    '#markup' =&gt; '',
    '#prefix' =&gt; '<div id="umiajax-box-1-body">',
    '#suffix' =&gt; '</div>',
  );

  $page['#attached']['js'] = array(
    drupal_get_path('module', 'umiajax') . '/js/umiajax.js',
  );

  return $page;
}

これでベースの HTML が生成できました。 この時点で umiajax モジュールを有効化した上でキャッシュクリアを行うとパス /umi/sample-ajax にアクセスすると次のようなパーツがページが表示されるはずです。

上記のとおり #attached というキーを持った要素をレンダーアレイ（ Drupal でページの元となる配列）に渡すと CSS や JS のファイルを読み込むことができますが、この時点では JS ファイルが存在しないため特に追加の JS ファイルは読み込まれません。

ついでにモジュールディレクトリ以下のパス css/umiajax.css に CSS ファイルも作っておきましょう。

css/umiajax.css:

#umiajax-box-1-body {
  display: none;
}

2. Ajax のリクエスト処理を行う JS コード

続いて Ajax リクエスト処理を行う JS コードを作成します。 モジュールディレクトリ以下のパス js/umiajax.js に以下の内容のファイルを作成しましょう。

js/umiajax.js:

(function($) {

Drupal.behaviors.umiajaxSampleAjax = {};
Drupal.behaviors.umiajaxSampleAjax.attach = function(context, settings) {
  // 処理に必要な DOM 要素を取得
  var title = $('#umiajax-box-1-title');
  var body = $('#umiajax-box-1-body');

  // タイトルがクリックされたときに Ajax リクエストでボディを取得する
  title.click(function() {
    $.ajax({
      url: 'sample-ajax-response',
      type: 'POST',
      dataType: 'json',
      success: function (data) {
        console.log('success');
        body.text(data).show();
      }
    });
  });
};

})(jQuery);

ここまで来れば、上で作成したページにアクセスすると、クリックイベントを拾って Ajax リクエストを行うという一連の流れが実現しているはずです。 ただし、サーバ側のコールバックを作成していないためこの状態ではまだ 404 エラーが返ってくるはずです。

3. Ajax のレスポンス処理を行うサーバサイドのコールバック

最後にサーバ側のコールバックを作りましょう。 行うべきことが 2 つあります。

ひとつは上で作成した umiajax_menu() 関数に要素を追加することです。 umiajax_menu() 内の return 文の上に次の内容を追加しましょう。

  $items['umi/sample-ajax-response'] = array(
    'title' => 'Ajax sample callback',
    'page callback' => 'umiajax_sample_ajax_page_callback',
    'access callback' => TRUE,
  );

もうひとつはコールバック処理を行う umiajax_sample_ajax_page_callback 関数の作成です。 同じく umiajax.module ファイルの中に以下の関数を追加しましょう。

/**
 * ボディテキストを JSON で返す
 */
function umiajax_sample_ajax_page_callback() {
  $body_text = '薄型ベゼルを採用し、つや消しメタルの側面とすっきりしたライン、ユニークなカラーが揃った Nexus 9 は、スタイリッシュながら作りも確かなタブレットです。';

  // JSON 形式でレスポンスを返す
  drupal_json_output($body_text);
}

ここまで完了すれば、 Drupal のキャッシュをクリアして上のページ（パスは umi/sample-ajax ）にアクセスして動作を確かめてみましょう。 「使う人の立場で...」の部分をクリックすれば Ajax リクエストが行われ、テキストが表示されるはずです。

クリック前:

クリック後:

（ちなみに上の画像で使っているサンプルではわかりやすくするために CSS でスタイルを少し追加しています）

終わりに

以上です。 いかがだったでしょうか？

今回は Drupal で Form API を使わずに Ajax 処理を行う方法をご紹介しました。 Drupal で Ajax 処理を行うときにはまず第一に前回ご紹介した Form API を使った方法を検討すべきですが、場合によっては Form API を使わない方がよい場合もありますので、両方のやり方を押さえた上でケースバイケースで適切な方法を選ぶ、ということをしたいものですね。