Blog

concrete5でブロックタイプからJavascript / CSSファイルを呼び出す (~5.6.x)

Posted by admin at 7:33 日時 2014/05/24

Designer Contentアドオンを使うなどして、ブロックタイプを新しく作成する際、そのブロックがページ内に存在するときだけ呼び出されてほしいJavascriptやCSSファイルがあった場合の読み込ませ方です。

基本的には、ブロックタイプのディレクトリ内に view.js または view.css というファイル名でJavascriptファイル、またはCSSファイルを置くと、自動的に読み込まれます。例えば、ブロックタイプハンドルが example だった場合、 blocks/example/view.js と blocks/example/view.css は、ページ内にそのブロックタイプのブロックがひとつでもあると自動的に読み込まれます。

複数のJavascriptファイルやCSSファイルを読み込ませたい場合は、js または css というディレクトリを作成するだけで、その中のJavascriptファイルやCSSファイルが全て自動的に読み込まれます。例えば、ブロックタイプハンドルが example だった場合、 blocks/example/js ディレクトリ内のjsファイルは全て勝手に読み込まれ、 blocks/example/css ディレクトリ内のcssファイルも同様です。

ただし、この方法では呼び出す順番が指定できないと言う欠点があります。また、複数のブロックタイプで共通のJavascriptを呼び出したい場合、それぞれのブロックタイプにjsフォルダを作って入れてしまうと、重複して呼び出されてしまうことになります。このような時に、ブロックタイプのコントローラーから明示的に呼び出すこともできます。

例えば、example というブロックタイプハンドルのブロックから、example_library.js と example_library.css を読み込み、これらのファイルは複数のブロックで共通で使用するとします。その場合、example_library.js はルートの js ディレクトリに、example_library.css は css ディレクトリに配置します。

/blocks/example/controller.php
/blocke/example/view.php
/js/example_library.js
/css/example_library.css

そして、ブロックタイプのコントローラーからは on_page_view() メソッドに下記のように記述します。

<?php  defined('C5_EXECUTE') or die("Access Denied.");    class ExampleBlockController extends BlockController {  ...  public function on_page_view() {  	$html = Loader::helper('html');  	$this->addHeaderItem($html->javascript('example_library.js'));  	$this->addHeaderItem($html->css('example_library.css'));  }  ...

この方式では登録した順にjsやcssが呼び出されます。ただし、他のライブラリとの依存関係までは記述できません。バージョン5.7からは依存関係も指定できるようになる予定です。


Share this entry