2005 09 17_osc2005_xoops

Malaika System

XOOPS Smarty を活用したカスタマイズ

Malaika System 早川知道 (Tom_G3X)

2005.9.17

Malaika System

XOOPS における Smarty について

• Xoops2 より Smarty を導入• テーマ・テンプレートに採用

– プログラム部分とビュー部分の独立– デザインの柔軟性が増す

• PHP コードの変更をしなくても、デザイン変更可能に

• Xoops1 では– XOOPS コアやモジュールの PHP 言語から直接 HTML を出力– デザイン変更は、 PHP コードの変更を伴った

• Xoops2 より– XOOPS コアやモジュールの PHP 言語より、– Smarty というテンプレートエンジンを介して HTML を出力– テンプレートの編集で容易にデザイン変更可能に

　　　　　　 ↓↓

Malaika System

XOOPS 新機能

• Xoops-JP2.0.10 より追加された Smarty 変数– <{$xoops_dirname}>

– 表示中のモジュールのディレクトリ名を返す

– <{$xoops_modulename}>– 表示中のモジュール名を返す

– <{$block.weight}>– ブロックの並び順を返す

• これらの追加で、カスタマイズの可能性が拡大

Malaika System

$xoops_dirname $xoops_modulename

• <{$xoops_dirname}>– 表示中のモジュールのディレクトリ名を返す

• <{$xoops_modulename}>– 表示中のモジュール名を返す

（モジュール管理画面で指定したモジュール名）

Malaika System

旧バージョンとの比較

• 旧バージョンでは、こんな記述が必要だった

• 特別な記述は必要無くなった

<{php}> // -- 記述例 -- （ PHP を記述して、アサインする）global $xoopsModule;if ( is_object($xoopsModule) ) { $this->assign(‘ex_module_name’, $xoopsModule->getVar(‘name’));　　 $this->assign(‘ex_module_dir’, $xoopsModule->getVar(‘dirname’));}<{/php}>

<{ex_module_name}> モジュール名<{ex_module_dir}> モジュール Dir 名

<{xoops_modulename}> モジュール名<{xoops_dirname}> モジュール Dir 名

↓↓

Malaika System

例：モジュール毎に画像を変更

• モジュール毎にロゴ画像を変更する

• 例：桜丘病院

<{strip}> <td id=“headerlogo”><a href=“<{$xoops_url}>/”> <{if $xoops_dirname }> <{* 　モジュール内を表示してる時 *}> 　　 <img src=“<{$xoops_imageurl}>title_<{$xoops_dirname}>.gif“ 　　 alt=“<{$xoops_modulename}>” /> <{else}> <{* index.php 等の xoops ルートファイルを表示してる時 *}> <img src="<{$xoops_imageurl}>logo.gif" alt="<{$xoops_slogan}>" /> <{/if}> </a></td> <{/strip}>

Malaika System

• テーマ記述例 (HEAD 内 ) 例：XOOPSCubeTOKAI

• CSS 記述例 (news.css)

例：モジュール毎にＣＳＳを変更

@import url(style.css); /* style.css を継承する */ /* 以下、相違個所のみ記述 */td#headerbanner {　 background-color:#0e3c23; vertical-align:middle; text-align:center;}

<{if $xoops_dirname }> <{* 　モジュール内を表示してる時 *}> <link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_imageurl}><{$xoops_dirname}>.css" /> <{else}> <{* index.php 等の xoops ルートファイルを表示してる時 *}> <link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_themecss}>" /> <{/if}>　

Malaika System

例：メインメニューに画像を使う

<table cellspacing=“0”> <tr><td id=“mainmenu”> <a class=“menuTop” href=“<{$xoops_url}>/”> <img src=“<{$xoops_imageurl}>menu_home.gif” alt=“<{$block.lang_home}>” /></a>

 <{foreach item=module from=$block.modules}> <{* メインメニューを表示 *}> 　　 <a class="menuMain" href="<{$xoops_url}>/modules/<{$module.directory}>/"> <img src="<{$xoops_imageurl}>menu_<{$module.directory}>.gif“ alt=“<{$module.name}>” /></a> <{foreach item=sublink from=$module.sublinks}> <{* サブメニューを表示 *}> 　　　 <a class="menuSub" href="<{$sublink.url}>"><{$sublink.name}></a> <{/foreach}> <{/foreach}> 

</td></tr> </table>

• メインメニューに画像を使う

Malaika System

例：メインメニューに画像を使う２

• 表示中のモジュールに合わせてメニューをハイライトする <{foreach item=module from=$block.modules}> <a class=“menuMain” href=“<{$xoops_url}>/modules/<{$module.directory}>/”> <{if $module.directory == $xoops_dirname }> 　 <{* 現在表示中のモジュールだけ、画像を変更する *}>　　　 <img src="<{$xoops_imageurl}>menu_<{$module.directory}>_active .gif“ 　 alt="<{$module.name}>" /></a> <{else}> <img src="<{$xoops_imageurl}>menu_<{$module.directory}>.gif“ 　 alt="<{$module.name}>" /></a> <{/if}> <{foreach item=sublink from=$module.sublinks}> <a class="menuSub" href="<{$sublink.url}>"><{$sublink.name}></a> <{/foreach}> <{/foreach}> 

Malaika System

例： CSS で応用する場合

• 画像ではなく CSS の class を変更する例：XOOPSCubeTOKAI

<{foreach item=module from=$block.modules}> <{if $module.directory == $xoops_dirname }> <{* 現在表示中のモジュールだけ、 class を変更する *}> <a class="menuMainActive" href="<{$xoops_url}>/modules/<{$module.directory}>/"><{$module.name}></a> <{else}> <a class="menuMain" href="<{$xoops_url}>/modules/<{$module.directory}>/"><{$module.name}></a> <{/if}> <{foreach item=sublink from=$module.sublinks}> <a class="menuSub" href="<{$sublink.url}>"><{$sublink.name}></a> <{/foreach}> <{/foreach}> 

Malaika System

$block.weight

• <{$block.weight}>– ブロックの並び順を返す

Malaika System

例：ブロック表示位置を増やす

• $block.weight を使って、こんなレイアウトも可能に

左右

中央 - 中

中央 - 左中央 - 右

（追加）中央 -中

（追加）中央 -左

（追加）中央 -右

コンテンツ

テーマの作り方次第では、中央下段にブロックエリアを追加する事も可能になる。

どうやってするのか？？

Malaika System

例：ブロック表示位置を増やす ( コード )

• 記述例　（ theme.html ）

<{foreach item=block from=$xoops_ccblocks}> <{if $block.weight < 100 }> <div class=“BlockTitle”><{$block.title}></div> <div class=“BlockContent”><{$block.content}></div> <{/if}><{/foreach}> ：中略　　　：<{foreach item=block from=$xoops_ccblocks}> <{if $block.weight >= 100 }> <div class=“BlockTitle"><{$block.title}></div> <div class=“BlockContent"><{$block.content}></div> <{/if}><{/foreach}>

Malaika System

例：ブロック表示位置を増やす ( 表示 )

• 並び順の特定の数値を境に表示位置を変える

左右

中央 - 中（ 100未満）

中央 - 左（ 100未満）

中央 - 右（ 100未満）

（追加）中央 -中

（ 100以上）

（追加）中央 -左

（ 100以上）

（追加）中央 -右

（ 100以上）

コンテンツこの $block.weight を応用すれば、テーマの作り方次第で、無数にブロック表示位置を増やす事が出来る。

Malaika System

お勧めのテンプレートカスタマイズ

• アカウント情報ページ– メールアドレスのエンコード（ spam メール対策）– ゲストに必要以上の個所を表示しない

• フォーラム記事ページ– 投稿者のＩＰを管理者だけ表示する

• ニュースアーカイブのページ– レイアウトの変更（年度毎に表示させる）

Malaika System

例：メールアドレスのエンコード

• メールアドレスのエンコード　 system_userinfo.html

<tr valign="top"> <td class="head"><{$lang_email}></td> <td class="odd"><{mailto address="$user_email" encode="javascript"}> </td></tr> </tr> <!– ソースを見るとこんな感じにエンコードされている --> <tr valign="top"> <td class="head"> メールアドレス </td> <td class="odd"><script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%74%6f%6d%40%6b%61%73%75%67%61%69%2d%6b%6f%6d%61%6b%69%2e%6a%70%22%20%3e%74%6f%6d%40%6b%61%73%75%67%61%69%2d%6b%6f%6d%61%6b%69%2e%6a%70%3c%2f%61%3e%27%29%3b'))</script></td></tr>

Malaika System

例：ゲストに表示させない

• ゲストに必要以上表示させないsystem_userinfo.html<{if $xoops_isuser}><tr valign="top"> <td class=“head”><{$lang_location}></td> <{* 居住地 *}> <td class="odd"><{$user_location}></td></tr><tr valign="top"> <td class=“head”><{$lang_occupation}></td> <{* 職業 *}> <td class="even"><{$user_occupation}></td></tr><tr valign="top"> <td class=“head”><{$lang_interest}></td> <{* 趣味 *}> <td class="odd"><{$user_interest}></td></tr><{/if}>

Malaika System

例：管理者だけ表示する

• 投稿者のＩＰを管理者だけ表示　 newbb_thread.html

　　中略<{if $topic_post.poster_uid != 0}>　 <td class=“odd”><div class=“comUserRank”> ～　中略～　 <div class="comUserStatus"><{$topic_post.poster_status}></div> <{if $xoops_isadmin }> <div style="color:#ff0000;" >IP : <{$topic_post.post_poster_ip}></div> <{/if}> </td><{else}>　 <td class="odd"></td> <{/if}>　　中略

Malaika System

例：アーカイブページのレイアウト変更

• 年度毎表示に変更する　 news_archive.html

• 以下、青字部分を消して、赤字部分を追加する

– カスタマイズ使用例• 使用前 XOOPSCubeJP• 使用後うえこみ春日井小牧

<{foreach item=year from=$years}> <tr class="even"><td><b><{$year.number}> 年 </b></td></tr> <tr class=“odd”><td><{foreach item=month from=$year.months}> <tr class="even"><td> <a href="./archive.php?year=<{$year.number}>&month=<{$month.number}>"> <{$month.string}> <{$year.number}></a> </td></tr><{/foreach}></td></tr><{/foreach}>

Malaika System

Smarty プラグイン活用のすすめ

• Smarty プラグインを活用すれば、複雑な機能も汎用的に活用できるようになる。

• Xoops の仕様上の制約を解決出来る。

• Xoops 専用 Smarty プラグインも多く開発されている

• Xoops_block プラグイン• TinyD プラグイン• ……..etc

Malaika System

xoops_block プラグイン（紹介）

• Xoops_block プラグイン　「どこでもブロック」プラグイン ? (^^ゞ

– テーマ・テンプレートなどの Smarty レベル上であれば、どこでもブロック関数を呼び出して表示できる。

• テーマの通常のブロック表示エリア以外（ヘッダー・フッターなど）にもブロックを呼び出し表示できる。

• ブロックのテンプレートに使えば、ニコイチブロックが出来る。• コンテンツの中に、ブロックを表示する事も可能になる。

– ブロック関数を呼出し、 Smarty 変数にアサインしてるだけ• 自由にレイアウト可能

– 上級者向けではあるが、使いこなせれば超強力　　　　　　　　　　　　　　　　　　　　　　　・・・・・・かも (^^ゞ

Malaika System

xoops_block プラグイン（使い方 1 ）

• 記述方法１– モジュールディレクトリを指定する方法

<{xoops_block mod=“ モジュールディレクトリ名”　 func=“ ブロック関数名”　 opt=“ 関数の引数 (必要に応じて )" assign=" テンプレートアサイン名 "}>

<{xoops_block mod="news" func="b_news_top_show" opt=“published,10,50” assign=“newsblock”}>

<{* テンプレートからコピーして、アサイン名だけ変更すれば OK！ *}><ul> <{foreach item=news from=$newsblock.stories}>　 <li><a href="<{$xoops_url}>/modules/news/article.php?storyid=<{$news.id}>"><{$news.title}></a> (<{$news.date}>)</li> <{/foreach}> </ul>

Malaika System

xoops_block プラグイン（使い方２）

• 記述方法２– ブロック関数が記述されたファイルを直接指定する方法

<{xoops_block file=“ ブロック関数が記述されたファイル”　 func=“ ブロック関数名”　　　　　　　 opt=“ 関数の引数 (必要に応じて )" assign=" テンプレートアサイン名 "}>

<{xoops_block file=“modules/news/block/news_top.php" func="b_news_top_show" opt=“published,10,50” assign=“newsblock”}>

<{* テンプレートからコピーして、アサイン名だけ変更すれば OK！ *}><ul> <{foreach item=news from=$newsblock.stories}>　 <li><a href="<{$xoops_url}>/modules/news/article.php?storyid=<{$news.id}>"><{$news.title}></a> (<{$news.date}>)</li> <{/foreach}> </ul> [裏技 ] ブロック関数の記述ルールに合っていれば、独自関数も使用できる。

<{xoops_block file=“myfunction.php" func=“my_xxxx_show" assign=“myblock”}>

Malaika System

xoops_block プラグイン（使用例１）

• テーマのヘッダーに使用する　例：XOOPSCubeTOKAI

– メインメニューを表示　 + 　ログインフォームを表示

<{xoops_block mod=“system” func=“b_system_user_show” assign=“loginblock”}>　　中略User:<input type="text" name="uname" size="10" value="<{$loginblock.unamevalue}>" />Pass:<input type="password" name="pass" size="10" />　　中略

<{xoops_block mod=“system” func=“b_system_main_show” assign=“ex_mainmenu”}><{foreach item=module from=$ex_mainmenu.modules }> <a href=“<{$xoops_url}>/modules/<{$module.directory}>/”><{$module.name}></a> | <{/foreach}>

Malaika System

xoops_block プラグイン（使用例２）

• ブロックの中に別のブロックを表示　例：

うえこみ春日井小牧

– piCalミニカレンダーを表示する

<{xoops_block mod="piCal" func="pical_mini_calendar_show" assign="piCal_miniCal"}><{$piCal_miniCal.content}>

Malaika System

Xoops_block プラグイン（使用例３）

• 独自の関数を使う– ニュースの新着記事をトップページに表示

• Spotlight ブロックもどきの関数を自作する ( 例： my_newsitem)

• その独自ファイルを指定して呼び出す ( 例： myfunction.php)

<{xoops_block file=“myfunction.php" func="my_newsitem“ opt="128" assign="mynew"}><div class="item"><div class="itemHead"><span class="itemTitle"><a href="<{$xoops_url}>/modules/news/article.php?storyid=<{$mynews.storyid}>"><{$mynews.title}></a> </span></div>　　　　以下略

Malaika System

テーマ・テンプイレートにおける問題点

• あくまで原則だが・・・。– コア・モジュールは、 HTML を書かない– HTML は、 Smarty側 ( テーマ・テンプレート ) で受け持つべき

• そうであれば・・・– 柔軟なカスタマイズが容易に可能になる– 利用者にとってもメリットは大きい筈

• その為のひとつの方法として・・・（あくまで理想として）– プログラムとテンプレート ( デザイン ) の分業も良いかも

• プログラム作者 + テンプレート作者• 実際には、モジュール等は一人で開発するケースがほどんどで、難しい事も多いのが現実

Malaika System

アカウント情報ページのカスタマイズ

• 「ホームページ」項目でリンクを画像で表示したい– Default テンプレート

– カスタマイズ <td class="head"><{$lang_website}></td> <td class="even"> <{if $user_websiteurl|strip_tags:false != ""}> <a href="<{$user_websiteurl|strip_tags:false}>" target="_blank"> <img src="<{$xoops_url}>/images/icons/www.gif" border="0" /></a> <{/if}> </td>

　 <td class="head"><{$lang_website}></td> 　 <td class="even"> <{$user_websiteurl}></td>

Malaika System

アカウント情報ページの問題点

• 現状のアサイン方法– HTML タグ込みでアサインされている

• 理想的なアサイン方法– URL のみでアサインするべきカスタマイズが容易になる

<{$user_websiteurl}> <a href=“http://www.xxx.com/” target=“_blank”> http://www.xxx.com/</a>

<td class="even"> <{$user_websiteurl}></td>

<{$user_websiteurl}> http://www.xxx.com/

<td class="even"> <a href=“<{$user_websiteurl}>” target=“_blank”> <{$user_websiteurl}></a></td>

<{if $user_websiteurl }> <{* 画像を表示する場合のカスタマイズ例 *}>　　 <a href=“<{$user_websiteurl}>” target=“_blank” > <img src="<{$xoops_url}>/images/icons/www.gif" border="0" /></a><{/if}>

Malaika System

　おしまい

ご参考にしていただければ幸いです御清聴ありがとうございました

Technology

2005 09 17_osc2005_xoops