Edited at

デザイナが知っておくべき XOOPS Cube Legacy 2.2 の新機能

More than 5 years have passed since last update.

クリエイティブ・コモンズ・ライセンス

この 作品 は クリエイティブ・コモンズ 表示 2.1 日本 ライセンス の下に提供されています。

ただし、掲載されているコードは XOOPS Cube Legacy に準じて GPL 2 となります。


この投稿はXOOPS Themes and Templates Advent Calendar 2012の7日目の記事です。

⇒ アドベントカレンダーの参加者リスト

⇒ 6日目の投稿 テーマでアバターとログインIDを表示する by nouphet

⇒ 8日目の投稿 内容未定〜 by argon

XOOPS Cube Legacy 2.2 ではデザイナ・サイト管理者向けの機能が幾つか追加されています。

ここではそれら新機能をご紹介いたします。


jQuery と jQuery UI の読み込み

最近はたくさんのウェブサイトが jQuery ライブラリを使っていますが、XCL でも 2.2 以降、jQuery および jQuery UI を読み込むようになりました。

デフォルトでは、Google Hosted Libraries(Google Ajax Feed API) を使って、jQuery と jQuery UI の最新版を読み込みます。


読み込まれるバージョン

インストールしたままの状態では、Google Hosted Libraries の最新バージョンを読み込みます。


特定のバージョンを読み込みたい場合

管理画面>互換レンダーシステム>一般設定


  • jQueryコアライブラリ

  • jQuery UIライブラリ

にバージョン番号を指定します。デフォルトでは "1" が指定されており、1.x の最新版が読み込まれます。もし "1.3" を指定すると、1.3.x の最新版が読み込まれます。


ローカルなどの自分で用意したファイルを読み込みたい場合

管理画面>互換レンダーシステム>一般設定


  • jQueryコアライブラリ

  • jQuery UIライブラリ

に jQuery, jQuery UI ライブラリファイルの URL を指定します。

インターネット(Google)につながらないサーバ(デモ用のパソコンなど)の場合は、Google Hosted Libraries が利用できませんので、必ず指定します。


JavaScript と CSS の追加

また、モジュール開発者は、Legacy_HeaderScript を使って JavaScript ライブラリ, スクリプト, CSS を <{$xoops_module_header}> に書き出すことができます。

サイト管理者の場合は、プリロードファイルを使って同様のことが可能です。

特に addScript() で追加したスクリプトは、サイト読み込み後に実行されます(jQuery の $(document).ready()内に書くのと同等)。


html/preload/sample.class.php

<?php

if (!defined('XOOPS_ROOT_PATH')) exit();

class Sample extends XCube_ActionFilter
{
public function preBlockFilter()
{
$this->mRoot->mDelegateManager->add('Site.JQuery.AddFunction',array(&$this, 'addScript'));
}

public function addScript(&$jQuery)
{
$script = XCube_Root::getSingleton->mContext->getAttribute('headerScript');
$script->addLibrary('/library/myscript.js');
$script->addLibrary('http://mysite.example.com/myscript.js', true);
$script->addStylesheet('/library/mystyle.css');
$script->addStylesheet('http://mysite.example.com/mystyle.css', true);
$script->addScript('$(".datepicker").each(function(){$(this).datepicker({dateFormat: "'._JSDATEPICKSTRING.'"});});';');
}
}
?>



<{xoops_user}> modifier

Smarty の xoops_user に、"user_name" というオプション指定が加わりました。

<{$uid|xoops_user:"user_name"}>

この特殊な指定を行うと、デリゲートの 'Legacy_User.GetUserName' の結果が呼ばれます。

XOOPS のユーザ名には、uname(ログインの時に一般に使われるユーザ名), name(本名など)があります。ユーザが目にする場合は、name の方が分かりやすいのですが、この項目は通常必須ではなく、入力している人としていない人が居ます。

プリロードファイルとともにこのオプションを指定すると、name が入力されているときは name の値が表示され、name が入っていない場合は uname を表示するなどの処理が可能です。

デリゲートに何も指定していない状態(=インストールしてそのままの状態)では、単純に uname の値が表示されます(<{$uid|xoops_user:"uname}><{$uid|xoops_user:"user_name"}>は同じになります)。

サンプルが以下にあります。


extras/extra_preload/UserName.class.php

<?php

if (!defined('XOOPS_ROOT_PATH')) exit();
class UserName extends XCube_ActionFilter
{
public function preBlockFilter()
{
$this->mRoot->mDelegateManager->add('Legacy_User.GetUserName',array(&$this, 'get'));
}

public function get(/*** string ***/ &$userName, /*** int ***/ $uid)
{
$handler = xoops_gethandler('member');
$user = $handler->getUser($uid);
$name = $user->getShow('name');
$userName = $name ? $name : $user->getShow('uname');
}
}
?>



meta 設定を追加する

<head> のメタ情報の幾つかを、headerScript を通じて設定することができます。

以下のようなプリロードファイルを作成します。


html/preload/mymeta.class.php

<?php

if (!defined('XOOPS_ROOT_PATH')) exit();

class Mymeta extends XCube_ActionFilter
{
public function preBlockFilter()
{
$this->mRoot->mDelegateManager->add('Site.JQuery.AddFunction',array(&$this, 'addMeta'));
}

public function addMeta(&$jQuery)
{
$context = XCube_Root::getSingleton()->mContext;
if($context->mModule != null) { // The process of module
$dirname = $context->xoopsModule->getVar('dirname');
}

$script = $context->getAttribute('headerScript');
if($dirname=="news") {
$script->addMeta('keyword', 'news, info');
$script->addMeta('description', 'This module is for news and announcement');
}
if($dirname=="schedule"){
$script->addMeta('robots', 'noindex,nofollow');
}
if($dirname=="adult") {
$script->addMeta('rating', 'adult');
}
$script->addMeta('author', 'me');
$script->addMeta('copyright', 'me');
}
}
?>



おまけ:言語定義の追加

XCL2.1 でも利用できますが、テーマ内で日本語などを使いたい場合、以下のようなファイル("ThemeLang" の部分は任意)を作成し、言語定義を追加します。


html/preload/ThemeLang.class.php

<?php

define('THEME_LANG_SAMPLE_1', 'これはサンプルです。');
define('THEME_LANG_NEWS', 'サイトニュース');
define('THEME_LANG_USERNAME', 'お名前');
?>

テーマファイル内に以下のようなタグを書くと、これらの定義を表示できます。

<div><{$smarty.const.THEME_LANG_SAMPLE_1}></div>

<div><{$smarty.const.THEME_LANG_NEWS}></div>
<div><{$smarty.const.THEME_LANG_USERNAME}></div>

以上です。ぜひ使ってみてください。

XOOPS Themes and Templates Advent Calendar 2012