2005 09 17_osc2005_xoops

398 views

Published on

2005年9月17日
OSC(オープンソースカンファレンス)2005 Tokyo/Fall
日本電子専門学校
"XOOPS Smartyを活用したカスタマイズ
"

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
398
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • ・ if 文でモジュール内を表示してる時と、そうでない時 (index.php など XOOPS ルートファイルを表示してる時 ) を分岐する。 モジュール内を表示してる時は、 title_(module_dir_name).gif を表示させる。 ・あらかじめ、使用するモジュールの画像を作成しておく。 => title_(module_dir_name).gif (この場合は、 default テーマのディレクトリの中に置いておく) ・場合によっては、画像の前後の改行やスペースがレイアウト崩れの原因になる事がある。  これを、 <{strip}> を使用して解決できます。
  • 本日は、どうもありがとうございました。
  • 2005 09 17_osc2005_xoops

    1. 1. XOOPS Smarty を活用したカスタマイズ Malaika System 早川知道 (Tom_G3X ) 2005.9.17
    2. 2. XOOPS における Smarty について <ul><li>Xoops2 より Smarty を導入 </li></ul><ul><ul><ul><li>テーマ・テンプレートに採用 </li></ul></ul></ul><ul><ul><li>プログラム部分とビュー部分の独立 </li></ul></ul><ul><ul><li>デザインの柔軟性が増す </li></ul></ul><ul><ul><ul><li>PHP コードの変更をしなくても、デザイン変更可能に </li></ul></ul></ul><ul><li>Xoops1 では </li></ul><ul><ul><li>XOOPS コアやモジュールの PHP 言語から直接 HTML を出力 </li></ul></ul><ul><ul><li>デザイン変更は、 PHP コードの変更を伴った </li></ul></ul><ul><li>Xoops2 より </li></ul><ul><ul><li>XOOPS コアやモジュールの PHP 言語より、 </li></ul></ul><ul><ul><li>Smarty というテンプレートエンジンを介して HTML を出力 </li></ul></ul><ul><ul><li>テンプレートの編集で容易にデザイン変更可能に </li></ul></ul>          ↓↓
    3. 3. XOOPS 新機能 <ul><li>Xoops-JP2.0.10 より追加された Smarty 変数 </li></ul><ul><ul><li><{$xoops_dirname}> </li></ul></ul><ul><ul><ul><ul><li>表示中のモジュールのディレクトリ名を返す </li></ul></ul></ul></ul><ul><ul><li><{$xoops_modulename}> </li></ul></ul><ul><ul><ul><ul><li>表示中のモジュール名を返す </li></ul></ul></ul></ul><ul><ul><li><{$block.weight}> </li></ul></ul><ul><ul><ul><ul><li>ブロックの並び順を返す </li></ul></ul></ul></ul><ul><li>これらの追加で、カスタマイズの可能性が拡大 </li></ul>
    4. 4. $xoops_dirname $xoops_modulename <ul><li><{$xoops_dirname}> </li></ul><ul><ul><ul><ul><li>表示中のモジュールのディレクトリ名を返す </li></ul></ul></ul></ul><ul><li><{$xoops_modulename}> </li></ul><ul><ul><ul><ul><li>表示中のモジュール名を返す (モジュール管理画面で指定したモジュール名) </li></ul></ul></ul></ul>
    5. 5. 旧バージョンとの比較 <ul><li>旧バージョンでは、こんな記述が必要だった </li></ul><ul><li>特別な記述は必要無くなった </li></ul><{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 名    ↓↓
    6. 6. 例:モジュール毎に画像を変更 <ul><li>モジュール毎にロゴ画像を変更する </li></ul><ul><ul><ul><li>例:桜丘病院 </li></ul></ul></ul><{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=&quot;<{$xoops_imageurl}>logo.gif&quot; alt=&quot;<{$xoops_slogan}>&quot; /> <{/if}> </a></td> <{/strip}>
    7. 7. <ul><li>テーマ記述例 (HEAD 内 ) 例: XOOPSCubeTOKAI </li></ul><ul><li>CSS 記述例 (news.css) </li></ul>例:モジュール毎にCSSを変更 @import url(style.css); /* style.css を継承する */ /* 以下、相違個所のみ記述 */ td#headerbanner {   background-color:#0e3c23; vertical-align:middle; text-align:center; } <{if $xoops_dirname }>     <{*  モジュール内を表示してる時 *}>    <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;        href=&quot;<{$xoops_imageurl}> <{$xoops_dirname}>.css &quot; /> <{else}>     <{*   index.php 等の xoops ルートファイルを表示してる時 *}>    <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;        href=&quot;<{$xoops_themecss}>&quot; /> <{/if}>
    8. 8. 例:メインメニューに画像を使う <ul><li>メインメニューに画像を使う </li></ul><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>   <!-- start module menu loop -->   <{foreach item=module from=$block.modules}>   <{* メインメニューを表示 *}>    <a class=&quot;menuMain&quot; href=&quot;<{$xoops_url}>/modules/<{$module.directory}>/&quot;>    <img src=&quot;<{$xoops_imageurl}> menu_<{$module.directory}>.gif “             alt=“<{$module.name}>” /></a>     <{foreach item=sublink from=$module.sublinks}>   <{* サブメニューを表示 *}>     <a class=&quot;menuSub&quot; href=&quot;<{$sublink.url}>&quot;><{$sublink.name}></a>     <{/foreach}>   <{/foreach}>   <!-- end module menu loop --> </td></tr> </table>
    9. 9. 例:メインメニューに画像を使う2 <ul><li>表示中のモジュールに合わせてメニューをハイライトする </li></ul><!-- start module menu loop --> <{foreach item=module from=$block.modules}>   <a class=“menuMain” href=“<{$xoops_url}>/modules/<{$module.directory}>/”>   <{if $module.directory == $xoops_dirname }>     <{* 現在表示中のモジュールだけ、画像を変更する *}>     <img src=&quot;<{$xoops_imageurl}> menu_<{$module.directory}> _a ctive .gif “          alt=&quot;<{$module.name}>&quot; /></a>   <{else}>     <img src=&quot;<{$xoops_imageurl}> menu_<{$module.directory}>.gif “          alt=&quot;<{$module.name}>&quot; /></a>   <{/if}>   <{foreach item=sublink from=$module.sublinks}>     <a class=&quot;menuSub&quot; href=&quot;<{$sublink.url}>&quot;><{$sublink.name}></a>   <{/foreach}> <{/foreach}> <!-- end module menu loop -->
    10. 10. 例: CSS で応用する場合 <ul><li>画像ではなく CSS の class を変更する 例: XOOPSCubeTOKAI </li></ul><!-- start module menu loop --> <{foreach item=module from=$block.modules}>   <{if $module.directory == $xoops_dirname }>     <{* 現在表示中のモジュールだけ、 class を変更する *}>     <a class=&quot;menuMainActive&quot;     href=&quot;<{$xoops_url}>/modules/<{$module.directory}>/&quot;><{$module.name}></a>   <{else}>     <a class=&quot;menuMain&quot;     href=&quot;<{$xoops_url}>/modules/<{$module.directory}>/&quot;><{$module.name}></a>   <{/if}>   <{foreach item=sublink from=$module.sublinks}>     <a class=&quot;menuSub&quot; href=&quot;<{$sublink.url}>&quot;><{$sublink.name}></a>   <{/foreach}> <{/foreach}> <!-- end module menu loop -->
    11. 11. $block.weight <ul><li><{$block.weight}> </li></ul><ul><ul><ul><ul><li>ブロックの並び順を返す </li></ul></ul></ul></ul>
    12. 12. 例:ブロック表示位置を増やす <ul><li>$block.weight を使って、こんなレイアウトも可能に </li></ul>テーマの作り方次第では、 中央下段にブロックエリアを追加する事も可能になる。 どうやってするのか?? 左 右 中央 - 中 中央 - 左 中央 - 右 (追加) 中央 - 中 (追加) 中央 - 左 (追加) 中央 - 右 コンテンツ
    13. 13. 例:ブロック表示位置を増やす ( コード ) <ul><li>記述例  ( theme.html ) </li></ul><{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&quot;><{$block.title}></div> <div class=“BlockContent&quot;><{$block.content}></div> <{/if}> <{/foreach}>
    14. 14. 例:ブロック表示位置を増やす ( 表示 ) <ul><li>並び順の 特定の数値 を境に表示位置を変える </li></ul>この $block.weight を 応用すれば、 テーマの作り方次第で、 無数にブロック表示位置を 増やす事が出来る。 左 右 中央 - 中 ( 100 未満) 中央 - 左 ( 100 未満) 中央 - 右 ( 100 未満) (追加) 中央 - 中 ( 100 以上) (追加) 中央 - 左 ( 100 以上) (追加) 中央 - 右 ( 100 以上) コンテンツ
    15. 15. お勧めのテンプレートカスタマイズ <ul><li>アカウント情報ページ </li></ul><ul><ul><li>メールアドレスのエンコード( spam メール対策) </li></ul></ul><ul><ul><li>ゲストに必要以上の個所を表示しない </li></ul></ul><ul><li>フォーラム記事ページ </li></ul><ul><ul><li>投稿者のIPを管理者だけ表示する </li></ul></ul><ul><li>ニュースアーカイブのページ </li></ul><ul><ul><li>レイアウトの変更(年度毎に表示させる) </li></ul></ul>
    16. 16. 例:メールアドレスのエンコード <ul><li>メールアドレスのエンコード  system_userinfo.html </li></ul><tr valign=&quot;top&quot;>   <td class=&quot;head&quot;><{$lang_email}></td>   <td class=&quot;odd&quot;> <{mailto address=&quot;$user_email&quot; encode=&quot;javascript&quot;}> </td> </tr> </tr>   <!– ソースを見るとこんな感じにエンコードされている -->   <tr valign=&quot;top&quot;>    <td class=&quot;head&quot;> メールアドレス </td>    <td class=&quot;odd&quot;> <script type=&quot;text/javascript&quot;>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>
    17. 17. 例:ゲストに表示させない <ul><li>ゲストに必要以上表示させない system_userinfo.html </li></ul><{if $xoops_isuser}> <tr valign=&quot;top&quot;>    <td class=“head”><{$lang_location}></td>   <{* 居住地 *}>    <td class=&quot;odd&quot;><{$user_location}></td> </tr> <tr valign=&quot;top&quot;>    <td class=“head”><{$lang_occupation}></td>   <{* 職業 *}>    <td class=&quot;even&quot;><{$user_occupation}></td> </tr> <tr valign=&quot;top&quot;>    <td class=“head”><{$lang_interest}></td>   <{* 趣味 *}>    <td class=&quot;odd&quot;><{$user_interest}></td> </tr> <{/if}>
    18. 18. 例:管理者だけ表示する <ul><li>投稿者のIPを管理者だけ表示  newbb_thread.html </li></ul>  中略 <{if $topic_post.poster_uid != 0}>   <td class=“odd”><div class=“comUserRank”> ~中略~   <div class=&quot;comUserStatus&quot;><{$topic_post.poster_status}></div>    <{if $xoops_isadmin }>     <div style=&quot;color:#ff0000;&quot; >IP : <{$topic_post.post_poster_ip}></div>    <{/if}>   </td> <{else}>   <td class=&quot;odd&quot;></td> <{/if}>   中略
    19. 19. 例:アーカイブページのレイアウト変更 <ul><li>年度毎表示に変更する  news_archive.html </li></ul><ul><ul><ul><li>以下、 青字部分を消して、赤字部分を追加する </li></ul></ul></ul><ul><ul><li>カスタマイズ使用例 </li></ul></ul><ul><ul><ul><li>使用前 XOOPSCubeJP </li></ul></ul></ul><ul><ul><ul><li>使用後 うえこみ春日井小牧 </li></ul></ul></ul><{foreach item=year from=$years}>   <tr class=&quot;even&quot;><td><b><{$year.number}> 年 </b></td></tr>   <tr class=“odd”><td> <{foreach item=month from=$year.months}>   <tr class=&quot;even&quot;><td>    <a href=&quot;./archive.php?year=<{$year.number}>&amp;month=<{$month.number}>&quot;>    <{$month.string}> <{$year.number}> </a> &nbsp;&nbsp; </td></tr> <{/foreach}> </td></tr> <{/foreach}>
    20. 20. Smarty プラグイン活用のすすめ <ul><li>Smarty プラグインを活用すれば、 複雑な機能も汎用的に活用できるようになる。 </li></ul><ul><li>Xoops の仕様上の制約を解決出来る。 </li></ul><ul><li>Xoops 専用 Smarty プラグインも多く開発されている </li></ul><ul><ul><ul><li>Xoops_block プラグイン </li></ul></ul></ul><ul><ul><ul><li>TinyD プラグイン </li></ul></ul></ul><ul><ul><ul><li>…… ..etc </li></ul></ul></ul>
    21. 21. xoops_block プラグイン(紹介) <ul><li>Xoops_block プラグイン   「どこでもブロック」プラグイン ? (^^ ゞ </li></ul><ul><ul><li>テーマ・テンプレートなどの Smarty レベル上であれば、 どこでもブロック関数を呼び出して表示できる。 </li></ul></ul><ul><ul><ul><li>テーマの通常のブロック表示エリア以外(ヘッダー・フッターなど)にも ブロックを呼び出し表示できる。 </li></ul></ul></ul><ul><ul><ul><li>ブロックのテンプレートに使えば、ニコイチブロックが出来る。 </li></ul></ul></ul><ul><ul><ul><li>コンテンツの中に、ブロックを表示する事も可能になる。 </li></ul></ul></ul><ul><ul><li>ブロック関数を呼出し、 Smarty 変数にアサインしてるだけ </li></ul></ul><ul><ul><ul><li>自由にレイアウト可能 </li></ul></ul></ul><ul><ul><li>上級者向けではあるが、使いこなせれば超強力                        ・・・・・・かも (^^ ゞ </li></ul></ul>
    22. 22. xoops_block プラグイン(使い方 1 ) <ul><li>記述方法1 </li></ul><ul><ul><li>モジュールディレクトリを指定する方法 </li></ul></ul><{ xoops_block mod=“ モジュールディレクトリ名 ” func=“ ブロック関数名 ”        opt=“ 関数の引数 ( 必要に応じて ) &quot; assign=&quot; テンプレートアサイン名 &quot;}> <{ xoops_block mod=&quot; news &quot; func=&quot; b_news_top_show &quot;        opt=“ published,10,50 ” assign=“ newsblock ”}> <{* テンプレートからコピーして、アサイン名だけ変更すれば OK ! *}> <ul> <{foreach item=news from= $newsblock .stories}>   <li><a href=&quot;<{$xoops_url}>/modules/news/article.php?storyid=<{$news.id}>&quot;> <{$news.title}></a> (<{$news.date}>)</li> <{/foreach}> </ul>
    23. 23. xoops_block プラグイン(使い方2) <ul><li>記述方法2 </li></ul><ul><ul><li>ブロック関数が記述されたファイルを直接指定する方法 </li></ul></ul><{ xoops_block file=“ ブロック関数が記述されたファイル ” func=“ ブロック関数名 ”        opt=“ 関数の引数 ( 必要に応じて ) &quot; assign=&quot; テンプレートアサイン名 &quot;}> <{ xoops_block file =“ modules/news/block/news_top.php &quot; func=&quot; b_news_top_show &quot;        opt=“ published,10,50 ” assign=“ newsblock ”}> <{* テンプレートからコピーして、アサイン名だけ変更すれば OK ! *}> <ul> <{foreach item=news from= $newsblock .stories}>   <li><a href=&quot;<{$xoops_url}>/modules/news/article.php?storyid=<{$news.id}>&quot;> <{$news.title}></a> (<{$news.date}>)</li> <{/foreach}> </ul> [ 裏技 ] ブロック関数の記述ルールに合っていれば、独自関数も使用できる。 <{ xoops_block file =“ myfunction .php &quot; func=“ my_xxxx_show &quot; assign=“ myblock ”}>
    24. 24. xoops_block プラグイン(使用例1) <ul><li>テーマのヘッダーに使用する  例: XOOPSCubeTOKAI </li></ul><ul><ul><li>メインメニューを表示  +  ログインフォームを表示 </li></ul></ul><{ xoops_block mod=“ system ” func=“ b_system_user_show ” assign=“ loginblock ”}>    中略 User:<input type=&quot;text&quot; name=&quot;uname&quot; size=&quot;10&quot; value=&quot;<{ $loginblock.unamevalue }>&quot; /> Pass:<input type=&quot;password&quot; name=&quot;pass&quot; size=&quot;10&quot; />    中略 <{ 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}>
    25. 25. xoops_block プラグイン(使用例2) <ul><li>ブロックの中に別のブロックを表示  例: うえこみ春日井小牧 </li></ul><ul><ul><li>piCal ミニカレンダーを表示する </li></ul></ul><{ xoops_block mod=&quot; piCal &quot; func=&quot; pical_mini_calendar_show &quot; assign=&quot; piCal_miniCal &quot;}> <{ $piCal_miniCal.content }>
    26. 26. Xoops_block プラグイン(使用例3) <ul><li>独自の関数を使う </li></ul><ul><ul><li>ニュースの新着記事をトップページに表示 </li></ul></ul><ul><ul><ul><li>Spotlight ブロックもどきの関数を自作する ( 例: my_newsitem) </li></ul></ul></ul><ul><ul><ul><li>その独自ファイルを指定して呼び出す ( 例: myfunction.php) </li></ul></ul></ul><{ xoops_block file=“ myfunction.php &quot; func=&quot; my_newsitem “ opt=&quot; 128 &quot; assign=&quot; mynew &quot;}> <div class=&quot;item&quot;><div class=&quot;itemHead&quot;><span class=&quot;itemTitle&quot;> <a href=&quot;<{$xoops_url}>/modules/news/article.php?storyid=<{$mynews.storyid}>&quot;> <{$mynews.title}></a> </span></div>     以下略
    27. 27. テーマ・テンプイレートにおける問題点 <ul><li>あくまで原則だが・・・。 </li></ul><ul><ul><li>コア・モジュールは、 HTML を書かない </li></ul></ul><ul><ul><li>HTML は、 Smarty 側 ( テーマ・テンプレート ) で受け持つべき </li></ul></ul><ul><li>そうであれば・・・ </li></ul><ul><ul><li>柔軟なカスタマイズが容易に可能になる </li></ul></ul><ul><ul><li>利用者にとってもメリットは大きい筈 </li></ul></ul><ul><li>その為のひとつの方法として・・・ (あくまで理想として) </li></ul><ul><ul><li>プログラムとテンプレート ( デザイン ) の分業も良いかも </li></ul></ul><ul><ul><ul><li>プログラム作者 + テンプレート作者 </li></ul></ul></ul><ul><ul><ul><li>実際には、モジュール等は一人で開発するケースがほどんどで、 難しい事も多いのが現実 </li></ul></ul></ul>
    28. 28. アカウント情報ページのカスタマイズ <ul><li>「ホームページ」項目でリンクを画像で表示したい </li></ul><ul><ul><li>Default テンプレート </li></ul></ul><ul><ul><li>カスタマイズ </li></ul></ul><td class=&quot;head&quot;><{$lang_website}></td> <td class=&quot;even&quot;> <{if $user_websiteurl|strip_tags:false != &quot;&quot;}>    <a href=&quot;<{$user_websiteurl|strip_tags:false}>&quot; target=&quot;_blank&quot;>    <img src=&quot;<{$xoops_url}>/images/icons/www.gif&quot; border=&quot;0&quot; /></a> <{/if}> </td>   <td class=&quot;head&quot;><{$lang_website}></td>   <td class=&quot;even&quot;> <{$user_websiteurl}> </td>
    29. 29. アカウント情報ページの問題点 <ul><li>現状のアサイン方法 </li></ul><ul><ul><li>HTML タグ込みでアサインされている </li></ul></ul><ul><li>理想的なアサイン方法 </li></ul><ul><ul><li>URL のみでアサインするべき  カスタマイズが容易になる </li></ul></ul><{$user_websiteurl}>  <a href=“http : //www.xxx.com/” target=“_blank”> http://www.xxx.com/</a> <td class=&quot;even&quot;> <{$user_websiteurl}> </td> <{$user_websiteurl}>  http://www.xxx.com/ <td class=&quot;even&quot;> <a href=“ <{$user_websiteurl}>” target=“_blank”> <{$user_websiteurl}></a> </td> <{if $user_websiteurl }> <{* 画像を表示する場合のカスタマイズ例 *}>    <a href=“ <{$user_websiteurl}> ” target=“_blank” >      <img src=&quot;<{$xoops_url}>/images/icons/www.gif&quot; border=&quot;0&quot; /> </a> <{/if}>
    30. 30.  おしまい ご参考にしていただければ幸いです 御清聴ありがとうございました

    ×