2006 03 18_osc2006_x_cube_template

584 views

Published on

2006年3月18日
OSC(オープンソースカンファレンス)2006 Tokyo/Spring
日本電子専門学校
XOOPS Cube2.1のテーマ・テンプレートの概要と新機能について

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
584
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • よいこのみなさんであれば、御理解いただけると思いますが・・・・。
  • XOOPS Cube 2.1alpha1 の時点における、テーマ・テンプレート関連の仕様などについて説明いたします。
  • Smarty バージョンは、 XOOPS2.0.9 ( 2004.12.26 )で、 2.6.5-dev に更新されて以来、 XOOPS 2.0.13a-JP まで更新されていませんでした。 それで、 XOOPS Cube 2.1 alpha1 では、 2.6.12 にバージョンアップされています。 Smarty の主な変更点は、バグフィックスなどで、目立った追加機能や拡張などは無いようです。
  • Smarty 変数への定数のアサインは、 XOOPS 2.0.3 ( Smarty 2.5.0 )あたりから可能になっていたようだが、 XOOPS 2.0.3 以前のバージョンとの互換性などの問題から、最近まであまり使われてませんでした。 今回、 Legacy 関連モジュールでは、これらを多用しています。 メリットとして、プログラム内での記述を簡略化出来るので、 実行ファイルのコーディングの省力化とか、効率良くメンテナンス出来る事などが期待出来ます。
  • 従来の XOOPS2.0 系では、テンプレートを DB に登録する際にエラーチェックの為に毎回コンパイルしおり、 オブジェクトを変数アサインしてると、必ずエラーになった。 それで XC2.1 は、インストール時に DB にテンプレートを保存するが、コンパイルはしなくした。 (その為、テンプレートのプレビュー機能も働きません) XC2.1 では実際にテンプレートが使われるまで、コンパイルを行わないので、オブジェクトをアサインしても使えるようになった。
  • 今までプログラム上でサニタイズしていたものを、 テンプレートでサニタイズを行なうように統一した。 プログラム上では、特に必要なければ変数をサニタイズする必要も無く、 生の値を変数として与え、テンプレートでサニタイズする。 従来、多くのモジュールは、プログラム側で行っていたが、それをテンプレートで行うようにした。 (処理分担の正常化。) 以前の XOOPS テンプレートと比較すると、テンプレートが複雑化してるようにも思えるが、 本来の処理分担のあり方と考えてます。また、色々な意味で拡張性が高まったとも思います。
  • Xcube 2.1 alpha1 では、これらの独自プラグインを追加している。
  • <{assign name=id value=$obj->get(id’)}> <input name=“hoge[<{$id}>]”>
  • 時々、タイムアウトする時があるので注意。
  • このへんで、ちょっと休憩でもするべぇ~か? ファイルベースのテンプレートシステム ・管理画面という特殊性 ・変更頻度は少ないと思われる
  • 実際には、こんな画像の呼び出しはしてません。
  • 通常、CSSでは、 Smarty 変数は使えません。 ところが、上記の style モデファイの様に、CSSにおいても、オーバーライド機能を使った場合に、画像などの相対パスを変わりなく実行する必要があります。 それを実現する為に、管理画面の style.css は、一旦、テンプレートとして扱い、 /modules/base/admin/css.php の位置から表示させています。 ですので、表面上は、CSSファイルでありながら、実質はテンプレートとして扱われてますので、 Smarty 変数を使用する事が可能です。
  • ● 管理画面テンプレート  HTML&CSS のコーディング指針 モジュール開発者が、管理画面のテンプレートを作成するに当たって、 それぞれ好き勝手に記述しては、管理画面全体としての統一性や操作性が失われてしまいます。 その為、ある程度、標準となる記述方法を提示する事で解決できないかと考えます。 ● HTML タグ・ CSS の記述ルール XOOPS のテーマ・テンプレート・システムの性格上、各テーマ・テンプレートファイルは別々の開発者が作成する事が、ほとんどです。 ですので、ある程度の記述指針が無いと、予期せぬ表示の乱れや、トラブルが発生する可能性がありえます。 また、重複が好ましくないタグなどの使用指針も必要になります。 その為に、テーマ・テンプレート作成時の簡単なコーディング指針を示しておきます。 CSSにおいては、基本的に class だけを使用します。 id は、その表示ページ内において、ユニークな存在でなければなりませんので、 XOOPS のテーマ・テンプレート・システムのように別々の開発者が作成する場合は、特に注意が必要です。 ですので、基本的に id に関する指針は、示しません。 もし、テーマ・テンプレート・システム内で、 id を使われたい場合は、テーマ内で使用される事を推奨します。
  • 見出しタグについては、 XOOPS のテーマ・テンプレートの性格上、 テーマとテンプレートで住み分けするのが良いと考えています。
  • 本日は、どうもありがとうございました。
  • 2006 03 18_osc2006_x_cube_template

    1. 1. XOOPS Cube テンプレート仕様 Malaika System 早川知道 (Tom_G3X ) 2006.3.18
    2. 2. 注意事項 <ul><li>今後、正式版に向け大幅な仕様変更も充分あり! </li></ul><ul><ul><li>これらは、あくまで Xcube 2.1Alpha1 の時点での仕様解説 という位置付けです。 </li></ul></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><li>万が一間違っても、出版物・セミナー等での、利用・参照・引用等は行わないでください。 </li></ul></ul><ul><li>資料中のイラストについて </li></ul><ul><ul><li>資料中のイラストは、 OCEAN-NET の matchan 氏が書かれた画像を承諾をえて使用させていただいております。快く承諾いただいた matchan 氏に心より感謝しております。ありがとうございました。 </li></ul></ul><ul><li>XOOP Cube 2.1 の最終的な仕様が固まったら、 正式なドキュメントを公開する予定です。 </li></ul>
    3. 3. Xcube のテーマ・テンプレート仕様概要 <ul><li>テーマ・テンプレート全般 </li></ul><ul><ul><li>Smarty のバージョンアップ </li></ul></ul><ul><ul><li>定数の変数アサイン </li></ul></ul><ul><ul><li>オブジェクトの変数アサイン </li></ul></ul><ul><ul><li>テーマ・テンプレートでサニタイズする </li></ul></ul><ul><ul><li>XOOPS Cube 独自 Smarty プラグインの追加 </li></ul></ul><ul><li>通常表示画面 </li></ul><ul><ul><li>従来の system テンプレートを再構築 </li></ul></ul><ul><ul><ul><li>従来のデザインを継承し、互換性の維持 </li></ul></ul></ul><ul><li>管理画面 </li></ul><ul><ul><li>テーマ・テンプレート方式に変更 </li></ul></ul><ul><ul><li>ホールバック・オーバーライド機能の実装 </li></ul></ul><ul><ul><li>CSSクラスの指針 </li></ul></ul><ul><ul><li>ヘルプ機能の実装 </li></ul></ul>
    4. 4. Smarty 最新バージョンに <ul><li>Smarty 2.6.12 にバージョンアップ </li></ul><ul><ul><li>特に機能追加等はない </li></ul></ul><ul><ul><li>主に、バグフィックス等 </li></ul></ul>XOOPSv2 rc1  ~  XOOPS 2.0.2  Smarty 2.3.0 XOOPS 2.0.3  ~  XOOPS 2.0.7.3  Smarty 2.5.0 XOOPS 2.0.9  ~  XOOPS 2.0.13a-JP  Smarty 2.6.5-dev XOOPS Cube 2.1 alpha1  Smarty 2.6.12 最新版に更新
    5. 5. 定数の変数アサイン <ul><li>言語定数等の変数アサインを多用 $smarty.const </li></ul><ul><ul><li>実は、 XOOPS2.0.3 (Smarty2.0.5) から使えた。 </li></ul></ul><ul><ul><li>XOOPS の互換性維持の為、従来あまり使われてなかった(知られてなかった) </li></ul></ul><ul><ul><li>従来の変数 ($xoops_url 等 ) も使えるので、互換性は維持している。 </li></ul></ul>例 : <{$smarty.const.XOOPS_URL}> は <{$xoops_url}> と同じ (共に使用可能) 言語定数のアサインを簡略化 言語ファイル (言語定数の定義) define(‘_MD_USER_LANG_AVATAR’, “ アバター” ); 実行ファイル (テンプレート変数のアサイン) $xoopsTpl->assign(“lang_avatar”, _MD_USER_LANG_AVATAR); テンプレート (変数の記述) <{$lang_avatar}> ~今まで一般的だった記述方法~ 言語ファイル (言語定数の定義) define(‘_MD_USER_LANG_AVATAR’, “ アバター” ); テンプレート (変数の記述) <{$smarty.const. _MD_USER_LANG_AVATAR}> ~ XOOPS Cube で多用される記述方法~
    6. 6. オブジェクトの変数アサイン <ul><li>オブジェクトの変数アサイン </li></ul><ul><ul><li>XOOPS2.0 系では、オブジェクトを変数アサイン出来なかった。 </li></ul></ul><ul><ul><li>XCube2.1 では、テンプレートが使われるまでコンパイルを行なわないようにし、 オブジェクトを変数アサイン出来るようにした。 </li></ul></ul>テンプレート記述例 : <{$thisUser->getVar(‘uid’)}> Object をそのままアサイン可能 // XOOPS Object でデータ取得 $handler =& xoops_gethandler('user'); // Objeact から配列に置換え   (面倒な処理) (^^ ゞ // 配列をテンプレート変数にアサイン $xoopsTpl->assign(“thisUser”, $thisUser); // XOOPS Object でデータ取得 $handler =& xoops_gethandler('user'); $this->mObject =& $handler->get($uid); // Object を直接 テンプレート変数にアサイン $render->setAttribute(&quot;thisUser&quot;, $this->mObject); ~ XOOPS Cube 2.1 で可能になった~
    7. 7. テーマ・テンプレートでサニタイズ <ul><li>テーマ・テンプレートでサニタイズする </li></ul><ul><ul><li>セキュリティ対策の為(対 XSS など)、サニタイズする必要がある。 </li></ul></ul><ul><ul><li>サニタイズするタイミングは、 HTML 出力直前。  つまり、テーマ・テンプレート </li></ul></ul><ul><li>escape モディファイを使用 </li></ul><ul><ul><li>PHP 関数 htmlspecialchars  と同等 </li></ul></ul><ul><ul><li>文字列に HTML エンティティが含まれる場合、 それを無害化。 </li></ul></ul><ul><li>変数には、生の値をアサインする必要がある </li></ul><ul><ul><li>Xoops オブジェクトの get メソッドを利用する。 </li></ul></ul><{ $object-> get (‘xxxx’) }>      生値 <{ $object-> get (‘xxxx’) | escape }>  サニタイズ済みの値 変換前 変換後 ------- -------- <      &lt; >      &gt; “      &quot; ‘      ‘ &      &amp;
    8. 8. Xcube 独自 Smarty プラグイン追加 <ul><li>XCube 独自追加された Smarty プラグイン </li></ul><ul><ul><li>Modifier </li></ul></ul><ul><ul><ul><li>Xoops_user </li></ul></ul></ul><ul><ul><ul><ul><li>UserID から、 xoopsUserObject のプロパティより必要な情報を返す。 </li></ul></ul></ul></ul><ul><ul><ul><li>Xoops_user_avatarize </li></ul></ul></ul><ul><ul><ul><ul><li>UserID から、該当ユーザーアバターのURLを返す。 </li></ul></ul></ul></ul><ul><ul><ul><li>Xoops_date_format </li></ul></ul></ul><ul><ul><ul><ul><li>UNIX Time を、ユーザーのタイムゾーンに変換して返す。 Xoops_getUserTimestamp </li></ul></ul></ul></ul><ul><ul><ul><li>Xoopsformattimestamp </li></ul></ul></ul><ul><ul><ul><ul><li>U NIX Time を、指定のフォーマットに変換して返す。 formatTimestamp </li></ul></ul></ul></ul><ul><ul><li>Function </li></ul></ul><ul><ul><ul><li>Xoops_input </li></ul></ul></ul><ul><ul><ul><ul><li>Input form を出力する。( value 値のサニタイズも行なわれる) </li></ul></ul></ul></ul><ul><ul><ul><li>Xoops_textarea </li></ul></ul></ul><ul><ul><ul><ul><li>textarea form を出力する。 ( value 値のサニタイズも行なわれる) </li></ul></ul></ul></ul><ul><ul><ul><li>Xoops_dhtmltarea </li></ul></ul></ul><ul><ul><ul><ul><li>xoopsform の dhtmltarea を表示する。( value 値のサニタイズも行なわれる) </li></ul></ul></ul></ul><ul><ul><ul><li>Xoops_token </li></ul></ul></ul><ul><ul><ul><ul><li>Token 用の input form を出力する。 </li></ul></ul></ul></ul><ul><ul><ul><li>Xoops_pagenavi </li></ul></ul></ul><ul><ul><ul><ul><li>Pagenavi 専用の関数 </li></ul></ul></ul></ul>では、簡単に主な関数の説明を・・・
    9. 9. Xoops_input , xoops_textarea <ul><li>Xoops_input </li></ul><ul><ul><li>Input form を出力する。( value 値においては、サニタイズも行なわれる) 。 </li></ul></ul>使用例: <{ xoops_input type=“text” value=“$object->get(‘name’)” }> type = “text” などフォームのタイプを指定する value = サニタイズが自動的に行なわれる。 その他、 name , class , size , maxlength , id , default などが指定できる。 <input type=“text” value=“<{$object->get(‘name’)|escape}>” /> と同じ。 <ul><li>Xoops_textarea </li></ul><ul><ul><li>textarea form を出力する。( value 値においては、サニタイズも行なわれる) 。 </li></ul></ul>使用例: <{ xoops_textarea name=“name” value=“$object->get(‘name’)” }> value = サニタイズが自動的に行なわれる。 その他、 name , class , cols , rows , id , readonly などが指定できる。 <textarea name=“name”><{$object->get(‘name’)|escape}></textarea> と同じ。 追記 : key を追加 (3/15) <{assign name=“id” value=$obj->get(‘id’)}> <input type=“checkbox” name=“hoge[<{$id}>]”> <{xoops_input type=“checkbox” name=“hoge” key = $obj->get(‘id’) }>
    10. 10. Xoops_dhtmltarea , xoops_token <ul><li>Xoops_dhtmltarea </li></ul><ul><ul><li>xoopsform の dhtmltarea を表示する。( value 値においてはサニタイズも行なわれる) </li></ul></ul><ul><li>Xoops_token </li></ul><ul><ul><li>Token 用の input form を出力する。 </li></ul></ul><{ xoops_dhtmltarea name=description value=$actionForm->get('description')}> <{ xoops_token form=$actionForm}> <input type=“hidden” name=“module.user.GroupEditForm.TOKEN” value=“..token 値 ..&quot; />
    11. 11. Xoops_pagenavi <ul><li>Xoops_pagenavi </li></ul><ul><ul><li>PageNavigator 専用の関数 </li></ul></ul>< div class = &quot;pagenavi&quot; >< { xoops_pagenavi pagenavi=$pageNavi}> </ div > pagenavi=$pageNav は、 XCube_PagaNavigator.class.php を前提にしている。 <{ xoops_pagenavi total=“20” current=“3” url=&quot;list.php?start=“ }> という、記述も可能。
    12. 12. デバグ用モディファイ <ul><li>モディファイ debug_print_var </li></ul><ul><ul><li>デバグ用のモディファイ ( Smarty に標準装備) </li></ul></ul><ul><ul><li>オブジェクトの内容を表示するのに便利 </li></ul></ul><ul><ul><li>なぜか、配列には使えない ( バグ?? ) </li></ul></ul><ul><ul><li>Smarty のマニュアルにも記載されていない </li></ul></ul><{ $userObject | debug_print_var }> デバグ出力例:
    13. 13. 【通常表示画面】 <ul><li>従来の system テンプレートを再構築 </li></ul><ul><ul><li>System モジュールは、最終的に削除され、 機能別に個々のモジュールに独立させる </li></ul></ul><ul><ul><ul><li>( base(Legacy), user, pm, ・・・・などに) </li></ul></ul></ul><ul><ul><li>その為、全て再構築する必要がある </li></ul></ul><ul><li>従来のデザインを継承し、互換性の維持 </li></ul><ul><ul><li>一部、htmlタグや使い勝手の見直しなども行なうが、 アップデート時の互換性などを考慮し、 出来るだけ、大幅な変更は行なわないつもりです。 </li></ul></ul>
    14. 14. 【管理画面】 <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><li>ヘルプ機能の実装 </li></ul><ul><ul><li>モジュール毎のヘルプ機能を実装 </li></ul></ul><ul><ul><li>モジュール毎の標準の付加機能を充実・・・かな? </li></ul></ul><ul><ul><ul><li>(XOOPS Cube 2.1 alpha2 ?? 以降に実装予定か?・・できたらいいなぁ~ ) </li></ul></ul></ul>
    15. 15. ホールバック (Fallback) <ul><li>デフォルトのテーマ・テンプレート </li></ul><ul><ul><li>ユーザー側では、変更等を加えない事を前提とする。 </li></ul></ul><ul><ul><li>変更する時は、オーバーライド機能を活用する </li></ul></ul>触っちゃいけない、禁断のディレクトリ~ <ul><li>各モジュール管理画面用テンプレート </li></ul>/modules/ (module_dir) /admin/templates/ / * .html /icons/ * .gif ( モジュール専用の アイコン等 ) /modules/base/admin/theme/ / admin_theme.html   ( 管理画面用テ-マ ) /style.css     ( 管理画面テーマ用 CSS) /icons/ * .gif    ( 管理画面用共通アイコン ) /design/ * .gif   ( テーマ専用画像 ) <ul><li>デフォルト管理画面テーマ </li></ul>
    16. 16. オーバーライド (Override) <ul><li>テーマ・テンプレートを上書きする </li></ul><ul><ul><li>管理画面のテーマ・テンプレートを変更する時に活用する </li></ul></ul><ul><ul><li>変更したテーマ・テンプレートを、 /themes/admin/ 以下で、一括管理可能 </li></ul></ul><ul><ul><li>/themes/admin/ は、管理画面専用の特殊なテーマ </li></ul></ul>変更したいテーマ・テンプレートだけを、これらのディレクトリに入れておけば、 デフォルトを上書きした状態になり、 デザインの変更が容易になる。 上書き専用! 失敗したら、消そう! 元に戻るよ~ /themes/admin/ / admin_theme.html (override 管理画面用テ-マ ) /style.css (override 管理画面テーマ用 CSS) /icons/ * .gif (override 理画面用共通アイコン ) /design/ * .gif (override テーマ専用画像 ) <ul><li>テーマ用オーバーライド </li></ul>/themes/admin/modules/ (module_dir) / / * .html (override 管理画面テンプレート ) <ul><li>テンプレート用オーバーライド </li></ul>
    17. 17. オーバーライドの問題点 <ul><li>画像やCSSの相対パスを解決する必要がある </li></ul>これらを解決する為、管理画面専用の Smarty モディファイを実装。 管理画面のデザインを変更しよう! そうだ!オーバーライド機能を使おう!! だけど、まてよ??ハテ?? info.gif だけを変更したいのに、 admin_theme.html も書き換えなければならない・・ ? style.css を書き換えた時、 背景画像のパスも書き換えなければならない・・ ? 困ったもんだぁ~~。やっとれんがやぁ~! (fallback)/admin_theme.html で、 (fallback)/icons/info.gif を表示する時 通常は、こう記述するが・・・・・。 例 : <img src=“<{$smarty.const._XOOPS_URL}>/modules/base/admin/theme/icons/info.gif” />
    18. 18. モディファイ theme <ul><li>管理画面専用のモディファイを実装  theme </li></ul>記述方法: <{ “icons/info.gif” | theme }> 優先順位 1.   /themes/admin/modules/ (module_dir) /icons/ info.gif オーバーライド内の各モジュールの icons ディレクトリ 2.   /themes/admin/icons/ info.gif オーバーライド内の共通 icons ディレクトリ 3.   /modules/ (module_dir) /admin/template/icons/ info.gif 各モジュールのテンプレート内の icons ディレクトリ 4.   /modules/base/admin/theme/icons/ info.gif ホールバックディレクトリ 管理画面だけで有効なモディファイである 優先順位に従ってファイルの有無をチェックし、 最初に見つかったファイルを表示する。
    19. 19. モディファイ stylesheet <ul><li>管理画面専用のモディファイを実装  stylesheet </li></ul><ul><ul><li>スタイルシートにも、オーバーライド機能を適用させる必要がある </li></ul></ul>記述方法: <{stylesheet file=style.css}> 優先順位 1   /themes/admin/ style.css オーバーライド内の style.css 2   /modules/base/admin/theme/ style.css ホールバックディレクトリ内の style.css 優先順位に従って CSS ファイルの有無をチェックし、 最初に見つかった CSS ファイルを使用する。 ↓ /modules/base/admin/css.php より実行 ↓ CSS の背景画像などの相対パスの問題を解決。 特に、相対パスの関係を意識する必要が無くなる 管理画面だけで有効なモディファイである
    20. 20. StyleSheet について <ul><li>管理画面の Style.css は特殊だす </li></ul><ul><ul><ul><li>システム上、一旦、テンプレートとして扱い /modules/base/admin/css.php  より実行する </li></ul></ul></ul><ul><ul><ul><ul><li>背景画像の相対パスの問題等 </li></ul></ul></ul></ul><ul><ul><ul><li>CSS 内に、 Smarty 変数が使用可能である 。 </li></ul></ul></ul>こんな記述が出来るのは、管理画面の style.css だけです。 ← ・・・・・・・・・・・・・・・・・・・・  /modules/base/admin/css.php <ul><li>背景画像の記述例( style.css ) </li></ul>h2 { color : #666666 ; background : url( <{“icons/h2bg.gif&quot;|theme}> ) repeat-x ; padding-left : 5px ; }
    21. 21. 管理画面 テンプレート指針 <ul><li>HTML & CSS のコーディング指針 </li></ul><ul><ul><li>管理画面全体での統一感のある操作性とデザインをえる事を目的とする </li></ul></ul><ul><ul><ul><li>従来、モジュール毎に異なったデザインや操作性に戸惑う事もあった </li></ul></ul></ul><ul><ul><li>出来る限り簡単な記述で実現できるように、詳細な(複雑な)指定を避ける </li></ul></ul><ul><ul><ul><li>新設する CSS クラスは、出来るだけ少なく </li></ul></ul></ul><ul><ul><ul><li>モジュール開発者が使ってくれなければ意味が無い </li></ul></ul></ul><ul><ul><ul><li>ある程度の自由度も残しておき、これに縛られる事が無いようにしたい。 </li></ul></ul></ul><ul><ul><li>従来の CSS クラスとの互換も維持 </li></ul></ul><ul><ul><ul><li>XOOPS2.0 系モジュールとの CSS の互換も考慮しなければならない。 </li></ul></ul></ul><ul><li>テンプレートのパターンを作成 </li></ul><ul><ul><li>管理画面のデザインパターンは限られていないか・・? </li></ul></ul><ul><ul><ul><li>「一覧表示」、「新規登録・編集画面」、「削除画面」 </li></ul></ul></ul><ul><ul><li>予めパターンを作っておけば、モジュール開発者が楽できる </li></ul></ul><ul><ul><ul><li>更に、 cubson での標準主力パターンにしておく </li></ul></ul></ul>
    22. 22. 見出し用 HTML タグ <ul><li>h * ( 見出し ) タグをテーマとテンプレートで使い分ける </li></ul><ul><ul><li>テーマ用に <h1><h2> を割り当てる </li></ul></ul><ul><ul><li>テンプレート用に <h3><h4><h5> を割り当てる </li></ul></ul>h1  テーマ用 (予約タグ) h2  テーマ用 (主に、現在のモジュール名の表示用に使用) h3  テンプレート用 (管理画面名の表示用に使用する) h4  テンプレート用 (管理画面内の見出し用) h5  テンプレート用 (管理画面内の見出し用)
    23. 23. CSS クラス <ul><li>管理画面はリスト (table) 表示が多い ( 既存の CSS クラス ) </li></ul>.outer       table タグに使用   th         table 内の見出し用 .head       table 内のヘッダー用 .odd   .even   table 内の各 td tr に使用 .foot        table 内のフッター用 .adminnavi  各管理画面上部のナビ(バンくずナビ)に使用 .topnavi     リスト表示画面上部の新規リンク等に使用 .tips        管理画面の簡単な説明等の表示に使用 .pagenavi    リスト表示画面等のページナビ箇所に使用 <ul><li>汎用性の高そうな新規クラスを設置 </li></ul>
    24. 24. 基本フォーマット ( ヘッダー ) <ul><li>各管理画面テンプレート ヘッダー </li></ul><div class = &quot;adminnavi&quot; > <a href = “” > モジュール名 </a> &raquo;&raquo; <a href = “” > 管理画面名 </a> <{* &raquo;&raquo; .... 必要に応じて ........ *}> </div> <h3> 管理画面名 </h3> <div class = &quot;tips&quot; > 必要に応じて、簡単なアドバイス等の表示に使用可能 </div>
    25. 25. 基本フォーマット ( リスト ) <ul><li>一覧( list )画面フォーマット </li></ul><div class = “toptab” > [ <a href = “” > 新規作成 </a> ] </div> <table class = &quot;outer&quot; > <tr> <th> xxxxxx </th> : </tr> <{foreach item=obj from=$objects}> <tr class = &quot;<{cycle values='odd,even'}>&quot; > <td> <{$obj->getVar(‘xxxx’)}> </td> : </tr> <{/foreach}> </table> <div class = &quot;pagenavi&quot; > <{xoops_pagenavi pagenavi=$pageNavi}> </div>
    26. 26. 基本フォーマット ( 編集・新規追加 ) <ul><li>編集・新規登録画面フォーマット </li></ul><form xxxxxxxxxxxx > <table> <tr> <th colspan = &quot;2&quot; > 管理画面名 </th> </tr> <tr> <td class = &quot;head&quot; > xxxxxx </td> <td class =“ <{cycle values=“odd,even”}>” > xxxxxx </td> </tr> : <tr> <td colspan = &quot;2&quot; class = &quot;foot&quot; > xxxxxx </td> </tr> </table> </form>
    27. 27. 管理画面ヘルプ <ul><li>管理画面、モジュール毎にヘルプ機能を実装 </li></ul><ul><ul><li>実は、 xoops_version.php にヘルプの定義だけはされていたが、 ほとんど使われてなかった。( $modversion[‘help’] = “help.html”; ) </li></ul></ul><ul><ul><li>それを利用して、 XOOPS Cube 2.1 で実装した。 </li></ul></ul><ul><li>ヘルプの実装方法 </li></ul><ul><ul><li>各 language ディレクトリ内に、 help ファイルを配置し、テンプレートとして扱う。 </li></ul></ul><ul><ul><li>各言語毎に用意する必要がある。 </li></ul></ul><ul><ul><li>一般設定と同様に、管理メニューに表示。 </li></ul></ul><ul><ul><li>ヘルプ内に複数のページ構造を持つ事が可能。 </li></ul></ul><ul><ul><ul><li>ヘルプ専用 Smarty モディファイ  helpurl </li></ul></ul></ul>
    28. 28. ヘルプ専用モディファイ helpurl <ul><li>ヘルプ専用 Smarty モディファイ  helpurl </li></ul><ul><ul><li>複数のヘルプファイルがある時に、別のヘルプファイルへリンクさせる </li></ul></ul><a href = “<{ ‘xxxx.html’ | helpurl }>” > 次のページ </a> ( /modules/hogehoge/language/japanese/help.html ) Hogehoge モジュールヘルプ ・・・・・・・・・・・ ・・・・・・・・・・・・ <a href = “<{ ‘help2.html’ | helpurl }>” > 続きは「ヘルプ2」 </a> ( /modules/hogehoge/language/japanese/help2.html ) Hogehoge モジュールヘルプ2 ・・・・・・・・・・・ ・・・・・・・・・・・・ <a href = “<{ ‘help.html’ | helpurl }>” > 「 ヘルプ1」に戻る </a>
    29. 29. ヘルプ記述ルール <ul><li>Help はテンプレートとして扱う </li></ul><ul><ul><li>元となるテンプレートから、各ヘルプファイルを呼び出す </li></ul></ul>各ヘルプファイルは、 <ul><li> などの簡素な形式で 記述するのが望ましい。 ( /modules/base/admin/templates/help.html ) < div class = &quot;adminnavi&quot; > < a href = “ ・・・・” > モジュール名 </ a > &raquo;&raquo; ヘルプ </ div > < h3 > ヘルプ < a href = “ ・・・・” > ( モジュール名 ) </ a ></ h3 > < div class = &quot;help&quot; >< {$contents}> </ div > ( /modules/hogehoge/language/japanese/help.html ) < h4 > XOOPS 2.0.x 操作移行リスト </ h4 > < ul > < li >< a href = &quot; < {'xoops2.html'|helpurl}>&quot;> こちら </ a > をご覧ください </ li > </ ul >
    30. 30. おしまい ご参考にしていただければ幸いです 御清聴ありがとうございました

    ×