2005 09 17_osc2005_xoops
Upcoming SlideShare
Loading in...5
×
 

2005 09 17_osc2005_xoops

on

  • 409 views

2005年9月17日

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

Statistics

Views

Total Views
409
Views on SlideShare
409
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • ・ if 文でモジュール内を表示してる時と、そうでない時 (index.php など XOOPS ルートファイルを表示してる時 ) を分岐する。 モジュール内を表示してる時は、 title_(module_dir_name).gif を表示させる。 ・あらかじめ、使用するモジュールの画像を作成しておく。 => title_(module_dir_name).gif (この場合は、 default テーマのディレクトリの中に置いておく) ・場合によっては、画像の前後の改行やスペースがレイアウト崩れの原因になる事がある。  これを、 を使用して解決できます。
  • 本日は、どうもありがとうございました。

2005 09 17_osc2005_xoops 2005 09 17_osc2005_xoops Presentation Transcript

  • XOOPS Smarty を活用したカスタマイズ Malaika System 早川知道 (Tom_G3X ) 2005.9.17
  • XOOPS における Smarty について
    • Xoops2 より Smarty を導入
        • テーマ・テンプレートに採用
      • プログラム部分とビュー部分の独立
      • デザインの柔軟性が増す
        • PHP コードの変更をしなくても、デザイン変更可能に
    • Xoops1 では
      • XOOPS コアやモジュールの PHP 言語から直接 HTML を出力
      • デザイン変更は、 PHP コードの変更を伴った
    • Xoops2 より
      • XOOPS コアやモジュールの PHP 言語より、
      • Smarty というテンプレートエンジンを介して HTML を出力
      • テンプレートの編集で容易にデザイン変更可能に
              ↓↓
  • XOOPS 新機能
    • Xoops-JP2.0.10 より追加された Smarty 変数
      • <{$xoops_dirname}>
          • 表示中のモジュールのディレクトリ名を返す
      • <{$xoops_modulename}>
          • 表示中のモジュール名を返す
      • <{$block.weight}>
          • ブロックの並び順を返す
    • これらの追加で、カスタマイズの可能性が拡大
  • $xoops_dirname $xoops_modulename
    • <{$xoops_dirname}>
          • 表示中のモジュールのディレクトリ名を返す
    • <{$xoops_modulename}>
          • 表示中のモジュール名を返す (モジュール管理画面で指定したモジュール名)
  • 旧バージョンとの比較
    • 旧バージョンでは、こんな記述が必要だった
    • 特別な記述は必要無くなった
    <{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 名    ↓↓
  • 例:モジュール毎に画像を変更
    • モジュール毎にロゴ画像を変更する
        • 例:桜丘病院
    <{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}>
    • テーマ記述例 (HEAD 内 ) 例: XOOPSCubeTOKAI
    • CSS 記述例 (news.css)
    例:モジュール毎に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}>
  • 例:メインメニューに画像を使う
    • メインメニューに画像を使う
    <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>
  • 例:メインメニューに画像を使う2
    • 表示中のモジュールに合わせてメニューをハイライトする
    <!-- 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 -->
  • 例: CSS で応用する場合
    • 画像ではなく CSS の class を変更する 例: XOOPSCubeTOKAI
    <!-- 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 -->
  • $block.weight
    • <{$block.weight}>
          • ブロックの並び順を返す
  • 例:ブロック表示位置を増やす
    • $block.weight を使って、こんなレイアウトも可能に
    テーマの作り方次第では、 中央下段にブロックエリアを追加する事も可能になる。 どうやってするのか?? 左 右 中央 - 中 中央 - 左 中央 - 右 (追加) 中央 - 中 (追加) 中央 - 左 (追加) 中央 - 右 コンテンツ
  • 例:ブロック表示位置を増やす ( コード )
    • 記述例  ( 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&quot;><{$block.title}></div> <div class=“BlockContent&quot;><{$block.content}></div> <{/if}> <{/foreach}>
  • 例:ブロック表示位置を増やす ( 表示 )
    • 並び順の 特定の数値 を境に表示位置を変える
    この $block.weight を 応用すれば、 テーマの作り方次第で、 無数にブロック表示位置を 増やす事が出来る。 左 右 中央 - 中 ( 100 未満) 中央 - 左 ( 100 未満) 中央 - 右 ( 100 未満) (追加) 中央 - 中 ( 100 以上) (追加) 中央 - 左 ( 100 以上) (追加) 中央 - 右 ( 100 以上) コンテンツ
  • お勧めのテンプレートカスタマイズ
    • アカウント情報ページ
      • メールアドレスのエンコード( spam メール対策)
      • ゲストに必要以上の個所を表示しない
    • フォーラム記事ページ
      • 投稿者のIPを管理者だけ表示する
    • ニュースアーカイブのページ
      • レイアウトの変更(年度毎に表示させる)
  • 例:メールアドレスのエンコード
    • メールアドレスのエンコード  system_userinfo.html
    <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>
  • 例:ゲストに表示させない
    • ゲストに必要以上表示させない system_userinfo.html
    <{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}>
  • 例:管理者だけ表示する
    • 投稿者のIPを管理者だけ表示  newbb_thread.html
      中略 <{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}>   中略
  • 例:アーカイブページのレイアウト変更
    • 年度毎表示に変更する  news_archive.html
        • 以下、 青字部分を消して、赤字部分を追加する
      • カスタマイズ使用例
        • 使用前 XOOPSCubeJP
        • 使用後 うえこみ春日井小牧
    <{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}>
  • Smarty プラグイン活用のすすめ
    • Smarty プラグインを活用すれば、 複雑な機能も汎用的に活用できるようになる。
    • Xoops の仕様上の制約を解決出来る。
    • Xoops 専用 Smarty プラグインも多く開発されている
        • Xoops_block プラグイン
        • TinyD プラグイン
        • …… ..etc
  • xoops_block プラグイン(紹介)
    • Xoops_block プラグイン   「どこでもブロック」プラグイン ? (^^ ゞ
      • テーマ・テンプレートなどの Smarty レベル上であれば、 どこでもブロック関数を呼び出して表示できる。
        • テーマの通常のブロック表示エリア以外(ヘッダー・フッターなど)にも ブロックを呼び出し表示できる。
        • ブロックのテンプレートに使えば、ニコイチブロックが出来る。
        • コンテンツの中に、ブロックを表示する事も可能になる。
      • ブロック関数を呼出し、 Smarty 変数にアサインしてるだけ
        • 自由にレイアウト可能
      • 上級者向けではあるが、使いこなせれば超強力                        ・・・・・・かも (^^ ゞ
  • xoops_block プラグイン(使い方 1 )
    • 記述方法1
      • モジュールディレクトリを指定する方法
    <{ 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>
  • xoops_block プラグイン(使い方2)
    • 記述方法2
      • ブロック関数が記述されたファイルを直接指定する方法
    <{ 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 ”}>
  • xoops_block プラグイン(使用例1)
    • テーマのヘッダーに使用する  例: XOOPSCubeTOKAI
      • メインメニューを表示  +  ログインフォームを表示
    <{ 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}>
  • xoops_block プラグイン(使用例2)
    • ブロックの中に別のブロックを表示  例: うえこみ春日井小牧
      • piCal ミニカレンダーを表示する
    <{ xoops_block mod=&quot; piCal &quot; func=&quot; pical_mini_calendar_show &quot; assign=&quot; piCal_miniCal &quot;}> <{ $piCal_miniCal.content }>
  • Xoops_block プラグイン(使用例3)
    • 独自の関数を使う
      • ニュースの新着記事をトップページに表示
        • Spotlight ブロックもどきの関数を自作する ( 例: my_newsitem)
        • その独自ファイルを指定して呼び出す ( 例: myfunction.php)
    <{ 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>     以下略
  • テーマ・テンプイレートにおける問題点
    • あくまで原則だが・・・。
      • コア・モジュールは、 HTML を書かない
      • HTML は、 Smarty 側 ( テーマ・テンプレート ) で受け持つべき
    • そうであれば・・・
      • 柔軟なカスタマイズが容易に可能になる
      • 利用者にとってもメリットは大きい筈
    • その為のひとつの方法として・・・ (あくまで理想として)
      • プログラムとテンプレート ( デザイン ) の分業も良いかも
        • プログラム作者 + テンプレート作者
        • 実際には、モジュール等は一人で開発するケースがほどんどで、 難しい事も多いのが現実
  • アカウント情報ページのカスタマイズ
    • 「ホームページ」項目でリンクを画像で表示したい
      • Default テンプレート
      • カスタマイズ
    <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>
  • アカウント情報ページの問題点
    • 現状のアサイン方法
      • HTML タグ込みでアサインされている
    • 理想的なアサイン方法
      • URL のみでアサインするべき  カスタマイズが容易になる
    <{$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}>
  •  おしまい ご参考にしていただければ幸いです 御清聴ありがとうございました