kilica - Qiita

2
1
0

XOOPS のテーマ雛形を生成する

XOOPS Themes and Templates Advent Calendar 2012

XOOPS のテーマを作ってみたいけど、どっから手を付けていいのか、あるいは何かベースになるようなシンプルなテーマはないか、最近流行の Twitter Bootstrap を組み込んだテーマを作りたい、そんな方に使ってみていただきたいのが、本日ご紹介する XOOPS Cube Legacy テーマ生成サービス Themaker です。

ユーザ登録さえしていただければ、どなたでも無料で利用いただけます。
http://jp.xoopsdev.com/modules/themaker/

生成オプション設定画面

作成画面

Themaker では、レイアウト、カラム数、配色などのパラメタを選んでいくことで、それに沿ったテーマの雛形を生成します。生成したテーマはダウンロードしてテーマフォルダに置くことでそのままテーマとして使うこともできます。あれこれ迷わなければ、１分もあればテーマができてしまいます。

ダウンロード画面

生成したテーマは一般のテーマと同様、html, css, javascript, 画像ファイルよりなりますので、これらを編集することで、独自テーマに仕立てていくこともできます（というか、そういう使い方がメインになると思います）。

どんなテーマを生成できるの？

レイアウト

大きく分けて、960pxの固定幅のテーマ（xhtml）と、Twitter Bootstrap をベースにしたテーマ（html5）を作ることができます。

カラム数

それぞれ、カラム数を１カラム、２カラム、３カラムから選ぶことができ、カラム数はトップページとサブページで分けることができます。

カラースキーム

Color Scheme Designer を利用して色を選び、XML 形式で「export」したものをフォームに貼り付けて設定できるようになっています。

カラースキーム

配色

カラースキームを設定すると、それにしたがって自動的に各要素に色が割り当てられます。
例えば、テーブルの見出し行の背景にどのカラーを割り当てるか、リンク色、リンクのホバー色、メニューの背景色など、たくさんの割り当て対象があります。
細かく制御したい方は、これも変更することが可能です。
以下に、Google Docs のスプレッドシートを作ることで、独自の配色パターンを作ることができます（シートlightをコピーして作ってください）

作ったテーマのサンプル

作成サンプル
bootstrapベースのテーマの例です。

Themaker 自体をカスタマイズしたい

Github にソースコードがありますので、Fork するなりしてご利用ください。
ご要望などありましたら、Issue に内容を書いてお送りください。
Github/Themaker

Themaker についてもっと知りたい

XOOPS Cube Developper's Site も御覧ください

1
0
0

All designers using XOOPS Cube Legacy 2.2 knows this !

Creative Commons License
This work is licensed under a Creative Commons Attribution 2.1 Japan License.

Note that the code is licensed under GPL 2, according to the XOOPS Cube Legacy's License.

This post is originally for XOOPS Themes and Templates Advent Calendar 2012 in Japanese.

We added and expanded several functions for theme designers and site owners in XOOPS Cube Legacy 2.2.
I'll introduce them from now.

jQuery and jQuery UI

Recently, many web sites use jQuery and jQuery UI. So XCL 2.2 do, too.
XCL 2.2 loads jQuery and jQuery UI libraries from the latest Google Hosted Libraries(Google Ajax Feed API).

Version of jQuery

As a default, the latest version of jQuery/jQuery UI is loaded.

Load the specific version of jQuery/jQuery UI

At Admin menu - legacyRender System - General Setting

You set the version number you want. As a default, '1' is set. This means the largest version number of 1.x is loaded.

jQuery Core Library
jQuery UI Library

Load the local jQuery/jQuery UI file

At Admin menu - legacyRender System - General Setting
Set the library file's URL

jQuery Core Library
jQuery UI Library

To add JavaScript and CSS file/script

Module developers, skilled site owners and designers can add javascript libraries, javascript script and stylesheets into <{$xoops_module_header}> by using Legacy_HeaderScript object.
If you are a site owner, you can use preload files to add them.
Especially, addScript() method will add your codes in jQuery's $(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's xoops_user modifier has new option "user_name".

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

This special option call 'Legacy_User.GetUserName' and show its result.
Do you know why we need such option ? In XOOPS, it has 'uname' field and 'name' field for user's name related fields.
For human, 'name' is recognizable but only few users fill this field. On the other hand, 'uname' is unrecognizable but all of users fill this field.
To use the following preload file, site owner can show 'name' field value if the user fills this filed and sho 'uname' field value if the user don't fill 'name' field.

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');
     }
}
?>

Set meta value in html head.

Add some of meta values in <head> by using headerScript.
Use the following preload file.

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');
    }
}
?>

Add language definitions

This tips can be applied to XCL 2.1 and 2.2.
If you want to add language definition in theme file, you can set new language definitions.

html/preload/ThemeLang.class.php

<?php
define('THEME_LANG_SAMPLE_1', 'This is sample');
define('THEME_LANG_NEWS', 'Site News');
define('THEME_LANG_USERNAME', 'Your Name');
?>

Then, you can write smarty constant in theme/template.

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

5
2
0

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

クリエイティブ・コモンズ・ライセンス
この作品はクリエイティブ・コモンズ表示 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

2
0
0

markdown で [[ ]] を表示する

github の markdown で [[aaa]] と書くと、https://github.com/username/repositoryname/wiki/aaa への internal link が貼られてしまう。

そのまま [[aaa]] と表示するには、

[\[aaa]]

と書く。

4
0
0

postfix でメール受信時にプログラムを起動する

postfix で @example.com ドメイン宛メール受信時にPHPプログラムを起動する

postfix の設定

/etc/postfix/main.cf

mydomain = example.com
myorigin = $myhostname
inet_interfaces = all
mydestination = $myhostname, localhost.$mydomain, localhost, $mydomain
virtual_alias_maps = regexp:/etc/postfix/virtual.myrequest

起動条件（正規表現）

/etc/postfix/virtual.myrequest

/^(.*)@example\.com/ kilica-request

起動するPHPの指定

kilica-request: "| /usr/bin/php /path/to/file/myprocess.php"