JavaScript をビューに、フレキシブルに組み込むやり方についてまとめてみた。ドキュメントや検索でそれらしい記事が見つからなかったので、個人的な推測を交えての備忘録となります。

JavaScript のコードは 、HTML の head 部、body 部どちらに挿入してもいいのだが、body 部はコンテンツ中心としたいので、専ら head 部に組み込むようにしたい。ただし、レイアウトのフレームに固定で組み込むのは、JavaScript プログラムを利用しないページ表示でロード時間やトラフィックを考えると好ましくない。

コントローラの各アクションで用意するビュー内で、必要に応じて組み込んだり、組み込まなかったりを、

• Yii が予め用意するプログラムファイル
• 自分が用意したプログラムファイル
• ファイルにするほどではないスニペット
• GoogleのAjaxライブラリ

について、head 部に組み込んで利用する方法を見る。

Yii が予め用意するプログラムファイル

jQuery やその周りのプログラムが、ライブラリをインストールすると一緒に保存される。スキャホールドでプログラムしたり、widget を利用すると自動的に組み込んで使えるようにしてくれる。

そのような使い方でなく、自分で JavaScript のプログラムを書く際、jQuery を組み込んで利用したい訳で、そのやり方である。「CClientScript」クラスを利用する。以下にビューにおいて jQuery の組み込みを示す。

<?php
$cs = Yii::app()->clientScript;
$cs->registerCoreScript('jquery');

予めライブラリに用意された JavaScript プログラムは、core scripts として「framework/web/js/packages.php」に登録されている。

自分が用意したプログラムファイル

例えば公開ディレクトリに「js」ディレクトリを用意し、そこにまとめてプログラムを保管しリンクするのが一般的だと思う。Yii では、非公開ディレクトリにあるファイルを公開ディレクトリにコピーし、それをリンクして使う方法がある。

あるアクションに限定して使うようなファイルを、ビューディレクトリに保存して利用できれば、Widget などを外部パッケージで提供する際便利だと思う。

以下の例は、Site コントローラの login アクションで、md5 ハッシュ値を求めるための md5.js プログラムファイルをビューディレクトリ配下で「js/md5.js」と用意して、非公開領域から公開領域にコピーしてリンクする方法である。

<?php
$cs = Yii::app()->clientScript;
$cs-$gt;registerScriptFile(CHtml::asset('js/md5.js'), CClientScript::POS_HEAD);

ファイルにするほどでないスニペット

jQuery を利用すると、短いプログラムで記述することができる。それをいちいちファイルにせず、ソースを HTML に組み込んでしまう方法である。例は、入力されたパスワードの値を md5 ハッシュ値に変換するものである。

<?php
$cs = Yii::app()->clientScript;
$script = <<< JS
jQuery(document).ready(function($) {
	$("form").submit(function() {
		$("#login_password").val(md5($("#password").val()));
		return true;
	});
});
JS;
$cs->registerScript('1', $script, CClientScript::POS_HEAD);

Google の Ajax ライブラリ

CGoogleApi というヘルパークラスがあるのでこれを利用する。このクラスの register() メソッドを利用すると、head 部に組み込んでくれる。ただし、追加したいコードは POS_HEAD 以外、例えば POS_BEGIN などにしないと jQuery のイベント処理が動作しないので注意する。

<?php
CGoogleApi::register('jquery', '1.4.2');
$cs = Yii::app()-$gt;clientScript;
$cs->registerScript('1', $script, CClientScript::POS_BEGIN);