2006 07 29_xtc2006_x_cube_template

383
-1

Published on

2006年7月29日
XTC(XOOPS Cube Tokai カンファレンス)2006
名古屋国際展示場
XOOPS Cube 2.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
383
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • XOOPS Cube 2.1 には、多くの新しい機能が実装されています。 その中でも、テーマー・テンプレートなどの表示関連だけをリストアップしてみました。 そこで、今日は、 XOOPS Cube 2.1 の大きな特徴のひとつである、 管理画面のテーマ・テンプレートに関してお話しいたします。
  • ファイルベースのテンプレートシステム ・管理画面という特殊性 ・変更頻度は少ないと思われる
  • 実際には、こんな画像の呼び出しはしてません。
  • 通常、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 07 29_xtc2006_x_cube_template

    1. 1. XOOPS Cube 2.1 管理画面テンプレート Malaika System 早川知道 (Tom_G3X ) 2006.7.29
    2. 2. Xcube2.1 のテーマ・テンプレート仕様概要 <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>
    3. 3. 管理画面テーマ・テンプレートの特徴 <ul><li>ファイルベースのテンプレート </li></ul><ul><li>旧バージョン (XOOPS2.0 系 ) 互換モジュールにも対応 </li></ul><ul><ul><li>テーマ・テンプレートを使ってない互換モジュールでも利用可能 </li></ul></ul><ul><li>ホールバック・オーバーライド機能の実装 </li></ul><ul><ul><li>デザインをカスタマイズする時に一括管理できる </li></ul></ul>
    4. 4. ホールバック (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>
    5. 5. オーバーライド (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>
    6. 6. オーバーライドの問題点 <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” />
    7. 7. モディファイ 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 ホールバックディレクトリ 管理画面だけで有効なモディファイである 優先順位に従ってファイルの有無をチェックし、 最初に見つかったファイルを表示する。
    8. 8. モディファイ 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 の背景画像などの相対パスの問題を解決。 特に、相対パスの関係を意識する必要が無くなる 管理画面だけで有効なモディファイである
    9. 9. 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 ; }
    10. 10. 管理画面 テンプレート指針 <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>
    11. 11. 見出し用 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  テンプレート用 (管理画面内の見出し用)
    12. 12. 管理画面ヘルプ <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>
    13. 13. ヘルプ専用モディファイ 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>
    14. 14. ヘルプ記述ルール <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 >
    15. 15. 注意事項 <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>
    16. 16. おしまい ご参考にしていただければ幸いです 御清聴ありがとうございました

    ×