Help us understand the problem. What is going on with this article?

デザイナが知っておくべき 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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away