1 フォロワー

クライアントスクリプトの操作 ¶

スクリプトの登録
CSS の登録
アセットバンドルの登録
動的な JavaScript の生成
yii.js スクリプト

最新の Web アプリケーションでは、レンダリングされてブラウザに送信される静的な HTML ページに加えて、既存の要素を操作したり、AJAX 経由で新しいコンテンツをロードしたりすることによって、ブラウザでページを変更するために使用される JavaScript が含まれています。このセクションでは、JavaScript と CSS を Web サイトに追加し、これらを動的に調整するために Yii によって提供されるメソッドについて説明します。

スクリプトの登録 ¶

yii\web\View オブジェクトを操作するときは、フロントエンドスクリプトを動的に登録できます。これには、2 つの専用メソッドがあります。

registerJs() インラインスクリプト用
registerJsFile() 外部スクリプト用

インラインスクリプトの登録 ¶

インラインスクリプトは、構成、動的に生成されたコード、およびウィジェットに含まれる再利用可能なフロントエンドコードによって作成された小さなスニペットに役立ちます。これらを追加するための registerJs() メソッドは、次のように使用できます。

$this->registerJs(
    "$('#myButton').on('click', function() { alert('Button clicked!'); });",
    View::POS_READY,
    'my-button-handler'
);

最初の引数は、ページに挿入する実際の JS コードです。これは、<script> タグでラップされます。2 番目の引数は、スクリプトをページに挿入する位置を決定します。可能な値は次のとおりです。

View::POS_HEAD head セクション用。
View::POS_BEGIN <body> を開いた直後。
View::POS_END </body> を閉じる直前。
View::POS_READY document ready イベントでコードを実行する場合。これにより、自動的に jQuery が登録され、コードが適切な jQuery コードでラップされます。これがデフォルトの位置です。
View::POS_LOAD document load イベントでコードを実行する場合。上記と同様に、これも jQuery を自動的に登録します。

最後の引数は、スクリプトコードブロックを識別し、同じ ID を持つ既存のブロックを新しいブロックの追加ではなく置き換えるために使用される一意のスクリプト ID です。指定しない場合、JS コード自体が ID として使用されます。これは、同じコードが複数回登録されるのを防ぐために使用されます。

スクリプトファイルの登録 ¶

registerJsFile() の引数は、registerCssFile() の引数に似ています。次の例では、yii\web\JqueryAsset に依存して main.js ファイルを登録します。これは、main.js ファイルが jquery.js の後に追加されることを意味します。このような依存関係の指定がない場合、main.js と jquery.js の相対的な順序は未定義となり、コードは機能しません。

外部スクリプトは、次のように追加できます。

$this->registerJsFile(
    '@web/js/main.js',
    ['depends' => [\yii\web\JqueryAsset::class]]
);

これにより、アプリケーションのベース URL の下にある /js/main.js スクリプトのタグが追加されます。

外部JSファイルを登録するには、アセットバンドルを使用することを強くお勧めします。registerJsFile()よりも、柔軟性が高く、より粒度の高い依存関係の設定が可能になるためです。また、アセットバンドルを使用すると、複数のJSファイルを結合および圧縮できるため、トラフィックの多いWebサイトでは望ましいです。

CSSの登録 ¶

JavaScriptと同様に、registerCss()またはregisterCssFile()を使用してCSSを登録できます。前者はCSSコードのブロックを登録し、後者は外部CSSファイルを登録します。

インラインCSSの登録 ¶

$this->registerCss("body { background: #f00; }");

上記のコードは、ページの<head>セクションに以下を追加します。

<style>
body { background: #f00; }
</style>

styleタグの追加プロパティを指定する場合は、名前と値の配列を第2引数に渡します。最後の引数は、スタイルブロックを識別し、同じスタイルがコード内の異なる場所から登録された場合に、一度だけ追加されるようにするためのユニークなIDです。

CSSファイルの登録 ¶

CSSファイルは、以下を使用して登録できます。

$this->registerCssFile("@web/css/themes/black-and-white.css", [
    'depends' => [\yii\bootstrap\BootstrapAsset::class],
    'media' => 'print',
], 'css-print-theme');

上記のコードは、ページの<head>セクションに/css/themes/black-and-white.css CSSファイルへのリンクを追加します。

最初の引数は、登録するCSSファイルを指定します。この例の@webは、アプリケーションのベースURLのエイリアスです。
2番目の引数は、結果の<link>タグのHTML属性を指定します。オプションdependsは特別に処理されます。これは、このCSSファイルが依存するアセットバンドルを指定します。この場合、依存するアセットバンドルはyii\bootstrap\BootstrapAssetです。これは、yii\bootstrap\BootstrapAssetのCSSファイルの後にCSSファイルが追加されることを意味します。
最後の引数は、このCSSファイルを識別するIDを指定します。指定されていない場合は、CSSファイルのURLが代わりに使用されます。

registerCssFile()の代わりに、外部CSSファイルを登録するためにアセットバンドルを使用することを強くお勧めします。アセットバンドルを使用すると、複数のCSSファイルを結合および圧縮できるため、トラフィックの多いWebサイトでは望ましいです。また、アプリケーションのすべてのアセット依存関係が1か所で構成されるため、より柔軟性も向上します。

アセットバンドルの登録 ¶

前述のように、CSSおよびJavaScriptファイルを直接登録するのではなく、アセットバンドルを使用することをお勧めします。アセットバンドルの定義方法の詳細については、「アセット」セクションを参照してください。すでに定義されているアセットバンドルを使用する場合は、非常に簡単です。

\frontend\assets\AppAsset::register($this);

上記のコードでは、ビューファイルのコンテキストで、AppAssetバンドルが現在のビュー（$thisで表される）に登録されます。ウィジェット内からアセットバンドルを登録する場合は、代わりにウィジェットの$viewを渡します（$this->view）。

動的なJavaScriptの生成 ¶

ビューファイルでは、HTMLコードが直接書き出されるのではなく、ビューの変数に依存する一部のPHPコードによって生成されることがよくあります。生成されたHTMLをJavascriptで操作するには、JSコードにも動的な部分、たとえばjQueryセレクターのIDを含める必要があります。

PHP変数をJSコードに挿入するには、それらの値を適切にエスケープする必要があります。特にJSコードが専用のJSファイルに存在せず、HTMLに挿入されている場合はなおさらです。Yiiは、この目的のために、JsonヘルパーのhtmlEncode()メソッドを提供します。その使用法を以下の例で示します。

グローバルなJavaScript構成の登録 ¶

この例では、配列を使用して、アプリケーションのPHP部分からJSフロントエンドコードにグローバルな構成パラメーターを渡します。

$options = [
    'appName' => Yii::$app->name,
    'baseUrl' => Yii::$app->request->baseUrl,
    'language' => Yii::$app->language,
    // ...
];
$this->registerJs(
    "var yiiOptions = ".\yii\helpers\Json::htmlEncode($options).";",
    View::POS_HEAD,
    'yiiOptions'
);

上記のコードは、JavaScript変数定義を含む<script>タグを登録します。例：

var yiiOptions = {"appName":"My Yii Application","baseUrl":"/basic/web","language":"en"};

JavaScriptコードでは、これらをyiiOptions.baseUrlやyiiOptions.languageのようにアクセスできるようになりました。

翻訳されたメッセージの受け渡し ¶

JavaScriptが何らかのイベントに対応してメッセージを出力する必要がある場合があります。複数の言語を扱うアプリケーションでは、この文字列は現在のアプリケーション言語に翻訳する必要があります。これを実現する1つの方法は、Yiiが提供するメッセージ翻訳機能を使用し、その結果をJavaScriptコードに渡すことです。

$message = \yii\helpers\Json::htmlEncode(
    \Yii::t('app', 'Button clicked!')
);
$this->registerJs(<<<JS
    $('#myButton').on('click', function() { alert( $message ); });
JS
);

上記のサンプルコードでは、読みやすくするためにPHPのHeredoc構文を使用しています。これにより、ほとんどのIDEでより優れた構文強調表示が可能になるため、特に1行より長いコードのインラインJavaScriptを記述する場合に推奨される方法です。変数$messageはPHPで作成され、Json::htmlEncodeのおかげで、有効なJS構文の文字列が含まれており、JavaScriptコードに挿入してalert()への関数呼び出しに動的な文字列を配置できます。

注：Heredocを使用する場合は、$で始まる変数はその内容で置き換えられるPHP変数として解釈される可能性があるため、JSコードでの変数名に注意してください。$(または$.の形式のjQuery関数は、PHP変数として解釈されないため、安全に使用できます。

`yii.js`スクリプト ¶

注：このセクションはまだ記述されていません。yii.jsによって提供される機能の説明を含める必要があります。

Yii JavaScriptモジュール

CSRFパラメーターの処理

data-confirmハンドラー

data-methodハンドラー

スクリプトのフィルタリング

リダイレクトの処理