tDiaryスキン (tDiaryテーマラッパー)†
- ページ: BugTrack
- 投稿者: henoheno
- 優先順位: 普通
- 状態: 完了
- カテゴリー: その他
- 投稿日: 2004-12-24 (金) 20:46:52
- バージョン: 1.4.x
メッセージ†
tDiaryテーマを利用できるラッパーの作成と調整
tDiaryについて†
tDiaryテーマについて†
入手先: (tdiary-theme-2.1.2.tar.gz)
- tDiary.org: テーマギャラリー (1.5系)
- 気まぐれゲーマーの備忘録: tDiary テーマ・サンプル
- テーマ別によるスタイルシートサンプル(サムネイル版)
- (tDiaryテーマ) 1.5系DIV構成図 - 図解
tDiaryスキンの利用の仕方†
- 上記リンクから、tdiary-theme-***.tar.gz を入手します。
- tdiary-theme-***.tar.gz を展開し、'tdiary-theme-***' ディレクトリを 'theme' とリネームします。
- theme ディレクトリを skin ディレクトリの下に配置します。
- ※skin/theme/<テーマ名>/<テーマ名>.css という位置関係になる様にして下さい
- 複数のテーマを見比べたりする必要がないのならば、index.php に 下記のようなdefine を追加して下さい。(1.4.5_alpha以降では、この定数が設定してあると、自動的にtDiaryスキンが選択されます)
define('TDIARY_THEME', 'kaeru');
- 複数のテーマを見比べたりしてみたいのであれば、index.phpがあるのと同じディレクトリに、index.php をインクルードする適当な名前のファイルを用意します (例えばkaeru.php)
- Webブラウザから "pukiwikiのURL/設定したファイル.php" にアクセスすることで、指定されたtDiaryテーマの有無などがチェックされます。状況に応じてエラーメッセージが表示されます。問題なければ、そのテーマを利用したPukiWikiが表示されます。
- うまく行ったなら、必要であれば適宜CSSやスキンを調整して下さい。
- tdiary.css.php は PukiWiki 独自のCSSの中で、tDiaryテーマに関係の無いものを削除したものです。テーマのCSSよりも後に読み込まれるため、テーマのCSSを上書きするためにも利用されています。
FAQ†
これはどういうもの?†
PukiWikiのスキン(とCSS)です。これを使うと、多数あるtDiaryテーマ(200種類ほど存在します)をPukiWikiにかぶせることができるようになります。
PukiWiki独自のCSS(特に配色)は「デフォルト」と「黒」が用意されていますが、細かい部分は個別に調整する必要があるかもしれません。
どういう用途があるの?†
- いつもとは違うPukiWikiを作る
- PukiWikiとtDiaryと組み合わせるために使う (両方のテーマを揃えたり、変えたり・・・)
- PukiWikiを日記ツールとして使う (Wikiとして使っているPukiWikiとは別に用意して、こちらはread onlyにしたり・・・)
どういう制限があるの?†
tDiaryテーマによっては、PukiWikiには可能であるがtDiaryでは実装されていない部分の表現がうまくありません。具体的にはいくつかのテーマでSandBoxのページを見て下さい。
PukiWikiとして使い込まれているサイトに適用するよりは、新く立ち上げるサイトに使った方が良いかもしれません。
どうやって作られたの?†
元々はPukiWikiデフォルトスキンを改修するための訓練のつもりでした。スキンとCSSのラッピングで可能な部分だけ使えないかなと思って始めてみたら、そこそこうまく動いてしまいました。
出力はtDiaryそのままなの?†
随時本物のtDiaryの出力と比較する形で、なるべく同じ要素を同じ順番で出力する様にしてあります。ただし、あくまでもPukiWikiとして利用できる様にするため、また、それぞれのコンセプトの違いなどから、全く同じ様にした(できた)部分と全く異なる(できない)部分があります。
- はい/いいえ。DOCTYPE は特に問題が無ければ PukiWiki 標準の XHTML 1.1 として出力します。これは個別に変更が可能です。christmasテーマは、MSIEで見た場合に中央寄せが実現しない様であるため、デフォルトで tDiary互換の HTML 4.01 Strict のDOCTYPEを出力します。
- はい/いいえ。tDiaryはデータごとに「年月日」と「タイトル」という２つの属性がありますが、PukiWikiは「ページ名(タイトルに相当)」の属性しかありません。tDiaryのデザインはテーマによって「年月日」と「タイトル」で異なる場合がありますが、PukiWikiでtDiaryテーマを利用する場合はそのいずれかのデザインしか利用することができません。tDiary 2.1.2までのテーマについてはデフォルトの値を設定済みです。(個別に変更も可能です)。
- tDiaryの「年月日」のデザインはごく短い固定長の半角英数字のためのものですから、無理に長い文を挿入すると､テーマによってはデザインから文字が飛び出したり、他の要素を隠してしまう可能性があります(kanban、husenなど)。ただし、tDiaryではこの欄が常にハイパーリンクとなっていることから、ハイパーリンクによるデザインの影響は少なくなります。
- tDiaryの「タイトル」のデザインは、ある程度長文が入ることが意図されています。ただし、tDiaryではこの欄はハイパーリンクではないため、WikiNameやAutoLinkなどがタイトルに入った場合にデザイン上の問題が出ることがあります。
- はい/いいえ。カレンダーのデザインはデフォルトでは空欄です。ただしURIやtopicpathを挿入したい方のために、URLの表示、およびtopicpathの表示は設定を変更するだけで表示されます。
- いいえ。PukiWikiの編集画面はそんなに小さくありませんので、(CSSの指定を上書きすることにより)大きく表示させています。
- はい。hatenaテーマを選んだとき、段落の先頭に「■」は表示されません。これは元のテーマがそのような装飾を持っていないためで、tDiaryでも同じ様に表示されます。日本語に異存した文字列をスキンに埋め込みたくないため、個別に改造するか、hatenaテーマを改良してtDiaryに還元してください。
- はい。hatenaテーマはタイトル(ページ名)にハイパーリンクがあると、テキストの文字が背景の色と同色あるいは似た色になってしまう問題があります。そこでこのテーマについては強制的にハイパーリンクを無効にしてあります。(個別に変更が可能です)しかしそのために、PukiWikiの「逆リンク検索」が利用できません。(CSSを改良することで克服できるかもしれません)
Sidebar(PukiWikiでいうMenuBar)は利用できるの?†
利用できます。
- MenuBarの内容が、サイドバーのデザイン位置に出力されます。サイドバーをどこ(上下左右)に表示するのかはテーマに依存しています。
- MenuBarのページが存在しない場合､サイドバーのデザインは全く出力されません。サイドバーに対応していないテーマの場合、あるいはサイドバー対応のテーマでサイドバーを利用したくない場合、MenuBarを削除してしまうのも一つの手です。
- テーマのデザインと管理者の意図に合わせられるように、出力方法を5通り用意しています。既存のテーマについてはデフォルト値の調整が終わっています。個別に変更可能です。
- (1) サイドバーに対応していない(CSSにデザインを含まない)テーマの場合、MenuBarの内容は本文の下に、新しいページがあるかのようなスタイルで表示されます。
- (2) サイドバーに対応しているテーマは、基本的にtDiaryが推奨する位置(本文とフッターの間)に出力されます。(※デザイン上の兼ね合いで 1, 3, 4 の値がデフォルトの物もあります。gearなど)
- (3) サイドバーの位置の狂いが見受けられるテーマの場合、推奨とは異なる位置(本文の直前)に出力されます (※tDiaryでも、この位置にサイドバーを出力する事が可能であるため、それを前提にしているものと思われます。kaeruなど)
- (4) デザイン上の崩れが見受けられるものの場合、推奨とは異なる方法、異なる位置(文章の先頭)に出力されます (※PukiWikiのナビゲーションボタン類がサイドバーと重なってしまったり、縦線が切れてしまうもの。aoikurumaやcandyなど)
- (5) サイドバーを全く表示しない場合。表示方法を 'none' に指定することで、サイドバーは MenuBarページの状態に限らず表示されなくなります。(1.4.6 以前のバージョンでは、表示されない事に変りありませんが、MenuBar ページの中身は内部で一旦実行されます)
- サイドバー内のデザインは、あまりtDiary互換ではないかもしれません。これはPukiWikiが出力するHTMLとの兼ね合いになります。
PukiWiki独自機能(表やカレンダーなど)の配色を、様々なtDiaryテーマに合わせる簡単な方法は?†
- tDiaryテーマ用のCSS(skin/tdiary.css.php)に、与えらた「配色のテーマ」名に基づいた配色を出力する機構が備わっています。
- 現状は 'default'(PukiWikiの配色そのまま) の他に 'black' (黒ベースのテーマ用) が用意されています。
- また、tDiaryスキンの側では、黒系統のtDiaryテーマを指定した場合、自動的に 'black' を呼び出すように設定されています (現状は whiteout など、一部の白系統のテーマも実用性を考慮し 'black' が割り当てられています)。
- 同じ要領でカスタマイズすることは比較的簡単でしょう。新しい配色案をぜひフィードバックして下さい。より多くのテーマを満足させる配色テーマが求められています。
- この件に関する詳細は BugTrack/789 にあります。
その他のデザインの割り当てはどうなっているの?†
- 「コメント」のためのデザインは、PukiWikiの「脚注」「添付」「referer」などのために(複数個)割り当てられています。それぞれの項目はPukiWikiにおいては存在したり、しなかったり、複数存在しますので、コメント欄が必ず一つだけあることを前提にデザインされているもの(tinybox, tinybox_green)はうまく表示されません。
- ※逆に言えば、必ず一つだけ出力される様にカスタマイズすることで違和感なく使用できる様になります
- 「短いリンク先」のためのデザインは、PukiWikiの「Last modified」のために割り当てられています。
- 「長いリンク先」のためのデザインは、将来のために使用していません。
- その他、現状のPukiWikiの出力するXHTMLと、tDiaryテーマそれぞれのCSSで干渉が起こる可能性があります。例えばsnow だけ、なぜか #navi がうまく表示されない気がします。
実際にお試し下さい。うまい解決方法がありましたらぜひフィードバックして下さい :)
(tDiaryのように) 日記風のデザイン構成は取れるの?†
はい。calendar2 プラグインと calenda_viewer プラグインを組み合わせて下さい。 開発日記 のソースが参考になるでしょう。
#calendar2(off)
#calendar_viewer([[開発日記]],6)
- 現在のPukiWiki(readプラグイン)は1ページを表示するために作られています。includeやcalendar_viewerの出力結果も「インクルードした全体が1つページ」であるかのように扱われるため、厳密な見た目はtDiaryとは異なるものになります。
- テーマによって合う・合わないがあると思いますので、いろいろ試してみて下さい。
(普通のPukiWikiのように) 下部に「編集」「差分」などのボタンを表示させることはできるの?†
はい。tDiaryスキン本体(tdiary.skin.php) の上部にある設定を有効にすると、フッターのデザインの中に表示される様になります。テーマごとに相性がある様ですから、表示させるべきかどうか、表示させる場合の場所などについては各自で調整して下さい。
tDiaryテーマ全部を試すための簡単な方法は?†
既存のデモサイト(このページの上部を参照) を見るのが一番簡単です。
また、cvs:../devel/tdiary-demogen.sh を使えば、<テーマ名>.php というファイルを一度に生成/削除することができます。実行するにはシェルスクリプトが動作する環境が必要です。
引数を何も与えなければ、以下のようなヘルプを表示します。
$ sh tdiary-demogen.sh
tdiary-demogen.sh [-d path/to/theme-directory] list
tdiary-demogen.sh [-d path/to/theme-directory] interwiki
tdiary-demogen.sh [-d path/to/theme-directory] touch
tdiary-demogen.sh [-d path/to/theme-directory] untouch
Command:
lis|list - List themes
int|interwiki - Publish interwiki definition and setting for each theme
tou|touch - Generate $theme.php that includes index.php
unt|untouch - Remove $theme.php(s) listed in theme directory
慎重に操作してください。できればテスト環境で試すのが良いでしょう。
以前作った自作のtDiaryテーマを使うにはどうしたらいいの?†
- そのtDiaryテーマを skin/theme/テーマ名/テーマ名.css という場所に保存します。他に画像などがあれば、CSSから参照している場所に配置して下さい。
- てっとり早く試すため、テーマ名.phpを作成します。以下のような内容になります。
<?php
define('TDIARY_THEME', 'テーマ名');
define('TDIARY_SIDEBAR_POSITION', 'strict');
//define('TDIARY_SIDEBAR_POSITION', 'top');
//define('TDIARY_SIDEBAR_POSITION', 'bottom');
//define('TDIARY_SIDEBAR_POSITION', 'another');
//define('TDIARY_SIDEBAR_POSITION', 'none');
require('./index.php')
?>
- テーマ名.php にWebブラウザでアクセスすれば、すぐに動作するはずです。これでちょっと様子を見ましょう。
- なお、サイドバーの出力位置には 'strict', 'top', 'bottom', 'another'(下部に表示する), 'none'(表示しない) があり、どれが最も美しいのかはテーマ次第です。
- サイドバーの文字列幅を調整したい場合、skin/tdiary.css.php の中の div#menubar(特にwidth:9em;) を調整して下さい。
- その他、好みに応じた調整を加えて下さい。
PukiWiki 1.4.4 以下のバージョンで使えるの?†
- いいえ。新しい関数などを使用しているため動作しません。PukiWiki 1.4.5以降向けです。
いつごろ使える様になるの?†
- これから公開する開発テスト版である程度叩かれた後、もう少し調整できるところを調整し、問題がないか煮詰めた後に、本当に問題が見当たらないのであれば、1.4.5とともにリリースされるでしょう。
- 1.4.5_rc1 には、2005/01/23現在のtDiaryスキンが同梱されています。
- 1.4.5_alpha には、2004/12/30現在のtDiaryスキンが同梱されています。
- 1.4.5以降に同梱されています。
Special thanks†
羊堂本舗 ちょき さん、およびそのページにコメントを遺された先人の方々に。
Wanted†
tdiary-theme-2.1.2対応 チェック済み (開発日記/2005-08-01)tdiary-theme-2.0.1対応 チェック済み (開発日記/2005-04-23)
- natriumとtdiarynetはPukiWikiのフッタ(比較的横に長い)を一部隠してしまうようであるが、かといってサイドバーの設定を strict にすると格好が悪くなるジレンマがあるようだ (^^;
- snowで #navi の中央寄せが効いていない様に見えるのはなぜだろう
メッセージ†
- 次期バージョンの目玉になりそうですね :) -- teanan
- rainy-seasonをベースにしスタートしてみましたが、どうでしょうか。 -- hirokasa
- 初級な質問で大変恐縮なのですが、「(tDiaryのように) 日記風のデザイン構成は取れるの?」にある「開発日記 のソース」を探していますが、これはどこをみたらいいのでしょうか？セキュリティー的な理由とおもいますが、開発日記の編集はauthorizeされていないとできないので、ソースをみることができません。~ #calendar2(日記), #calendar_viewer(日記,this)とただ書き付けてみたのですが、~ pkwk_chown(): fopen() failed for: CACHEDIR/pkwk_chown.lockなどといわれてしまうのです。calendar2と calendar_viewerの使い方がわからないのが原因なのですが。。。 -- SOK
- こんにちは。該当部分を上に追加してみました。ちなみにdiffなどからも参照できます。pkwk_chownの話は別件なのでお調べ下さい。 -- henoheno
- ありがとうございます。あまりに簡単なので、恥ずかしい限りです。お手数おかけいたしました。 -- SOK
Yet anohter tDiary skin†
- tDiaryテーマ互換風PukiWiki1.4スキン http://pctraining.s21.xrea.com/snapshot/20041123.html --
- あれ。うちに「通報しますた！」ってツッコミがあったのは spam じゃなかったんだ…。なるほどそゆことですか。そりゃ「通報しますた！」なんて spam ないか(^^; うちのは完全に手動なんであまり使いものにならないと思いますよ。 -- わたなべ
- こんにちは :) 拝見しました。デザインの解釈が異なっているのが興味深いです。サイドバー対応のテーマも程よく表示されていますよ。アクセスキーやツールチップはまだPukiWiki本体には搭載されていません (^^; -- henoheno
- ここのtDiaryスキンと同じ要領でテーマを切り替えられる様に修正したものを貼っておきます。
tdiary-pc.skin.php ファイル名が無かったのでテケトーにつけました (^^; あと$vars['cmd'] がある二箇所にisset()を追加しています。 -- henoheno
- 不備があったようで修正ありがとうございます。Wiki のデザインは Firefox まとめサイトなど、最近は工夫されているところが多くて面白いですね。私は圧倒的多数の「読む」ためのアクセスをメニューから便利にすること、「編集」のためのアクセスは accesskey で便利にすることを意識して作りました。 -- わたなべ
- SsPukiWiki: PukiWiki用スキン他
- できればMT互換もほしかったりして...tDiaryで個人的にいけてるデザインのスキンそのものがない...愛するPukiwikiが対応するならつくるしかないのか... -- tomix
- ちと研究してみます。tDiaryスキンそのものを考えるのか、tDiary的Pukiwikiスキンを考えるのか、tDiaryへの理解が足らないので、まずはそこから考えてみます。本当は、MTにしろ、Wikiにしろページ要素のID/Classの命名規則が統一されていれば、相互に行き来できるはずなんですけど、特に要素のゾーニングを司るレイアウトブロックの部分ですね。USのCSSにつよいデザイナーの間ではこの命名を統一していこうという議論もされているようです。*1 -- tomix
- 関連？BugTrack/591 -- okkez
- なにげに tdiary-demogen.sh に untouch コマンドを追加 :) -- henoheno
移植ねた†
- PukiWikiModやB-Wikiへの移植は難しいかもしれない (XOOPSと干渉するらしい)
![[PukiWiki]](image/pukiwiki-dev.png "[PukiWiki]")
