スキン/技術資料の履歴の現在との差分(No.4)

追加された行はこの色です。
削除された行はこの色です。
#author("2016-06-29T17:25:13+09:00","","")
RIGHT:&size(12){Category:[[Design>:Design]], [[:Category_Document]], [[:CategoryDev]]};

#topicpath
*スキンの技術資料 [#o8cfe0a9]

----
#contents

以下の情報は PukiWiki-1.4.4の情報です。
----
**関連 [#xcd9e739]
-[[PukiWiki/スキン研究]]
-[[PukiWiki/技術資料]]
--[[PukiWiki/CSSのclass一覧]]
--[[PukiWiki/関数一覧表]]
-[[アクセシビリティとユーザビリティ>Accessibility]]
-[[文法チェックプログラム>Validator]]
-[[official:スキン]]
--[[official:自作スキン]]

*PukiWikiのスキン [#d01151b0]
PukiWikiは、XHTML1.1orXHTML1.0のHTMLコードを生成いたします。画面デザインは、CSSファイルとそれを使用したPHPファイルにて行います。
~ファイルは、skin directory 以下に置かれている以下のファイルです。
-default.en.css : 英語画面用 CSS 定義デフォルトファイル
-default.jp.css : 日本語画面用 CSS 定義デフォルトファイル
-pukiwiki.skin.en.php ： 英語画面スキン 生成スクリプト
-pukiwiki.skin.ja.php ： 日本語画面スキン 生成スクリプト
-keitai.skin.ja.php ： 携帯用画面スキン 生成スクリプト
**PukiWikiパッケージのスキン [#v4181ccd]
-[[BugTrack/769]] tDiaryスキン (tDiaryテーマラッパー)

画面の基本構成は、スキン生成スクリプト側で行い、CSS側でそのデザインを行います。
#ls2

ここでは、まず、スキン生成スクリプトの解説を行い、次にCSSファイルの設定について解説をいたします。
**スキン開発者向け [#wd62a245]
スキンを開発してみようと思う方へ（作成途中...）
- [[PukiWiki/Plug-inの仕様#y03c2d4c]]や[[PukiWiki/Plug-inの仕様#x5a0079e]]も参考にどうぞ

**PukiWikiで生成されるHTMLの構成 [#m1e4594f]
PukiWikiで生成されるHTMLは以下のような構成を持っています。
+ 生のHTTPヘッダの送信
+ XML定義送信 
+ !DOCTYPE 送信 
+ ヘッダ送信
++ ロボット対策(閲覧のみ読めるようにする)
++ ページタイトル送信 
++ スタイルシート読み込み
++ トラックバック用 JAVA SCRIPT ON
++ 追加HEADタグの送信~
+ HTML BODY 送信
++ [HEADER部]
+++ ロゴイメージ送信 
+++ ページタイトル送信
+++ ページURL送信  
++[NAVIGATOR部]:送信 ~
++ 横線表示
++ [MENUBAR部]/[BODY部]
++ 横線表示
++[NOTE部]
++[ATTACH部]
++ 横線表示
++[TOOLBAR部]
++ [BOTTOM部]
+++ [[LASTMODIFIED部]
+++ [RELATED部]
+++ [FOOTER部]
+ HTML BODY 終了
+ HTML 終了
***スキン開発者向け、内部定義される変数 [#jc5ddafe]
:$_page|ページ名（$vars['page']のコピー）~
各種判定などに用いる
:$r_page|URI用にエンコードされたページ名
:$is_page|フラグ: バックアップを表示している時以外で、有効なページ名を持った一般ページの時にTRUE
:$is_read|フラグ: 存在するページを閲覧している時にTRUE
:$is_freeze|フラグ: ページが凍結されている時にTRUE
:$title|エスケープ済みのタイトル~
主に、titleタグで使用する。
:$page|リンク加工されたタイトル
:$body|エスケープ済みの本文
:$lastmodified|そのページの最終更新時刻~
どのように表示するかは、スキンのポリシーによる
:$related|関連するページのリスト~
どのように表示するかは、スキンのポリシーによる
:$attaches|添付ファイルのリスト~
どのように表示するかは、スキンのポリシーによる
:$notes|注釈のリスト~
どのように表示するかは、スキンのポリシーによる
:$head_tag|プラグインなどが独自に<head>内に追加するタグ~
実際に出力するかは、スキンのポリシーによる

この構成は、skin/pukiwiki.skin.##.phpにて生成されています。以下で、pukiwiki.skin.ja.phpの解説を行います。
***スキン開発者向け、主な内部関数 [#j829896e]
:lib/html.php|
--catbody()
---スキンファイルを直接呼び出している場所
---スキン内定義を除けば、[[各種定義>#jc5ddafe]]などを最終設定している場所
--pkwk_common_headers()
---設置者がスキンの種類に関係なく設定しているheaderを、出力するための関数。1.4.5 以降対応。（[[開発日記/2004-12-24>開発日記/2004-12-24#iafedf29]]）~
デフォルトでは、zlib.output_compression 関連（[[BugTrack/738]]）のみ定義されている。
--pkwk_output_dtd($pkwk_dtd, $charset)
---$pkwk_dtdの値に応じて(X)HTMLのDTD、およびHTMLの開始タグを出力する。1.4.5 以降対応。（[[BugTrack/768>BugTrack/768#reea7092]]）~
通常は必要ないが、本文などの出力内容の文字コードを内部定義とは違うものに変換した場合は、$charsetにその文字コード名を明示して呼び出す必要がある。
:lib/func.php|
-- htmlsc($string, $flags, $charset)
--- 変換に用いるデフォルトの文字コードがUTF-8やdefault_charset設定に変更された、[[htmlspecialchars 関数>PHP関数:htmlspecialchars]]用の互換ラッパーです（1.5 系） → [[BugTrack2/355>BugTrack2/355#lb1b06b4]]
--- GREPによる検索・置き換えで簡単に互換動作できるよう、htmlspecialchars() → htmlsc() とした場合の$flags と$charset 初期値は、過去のバージョン準拠に近づくよう設定されています。（本体設定と異なる文字コードを扱う可能性がある場合は、置き換えだけでなく文字コードを明示指定する必要があります）
--- 将来のバージョンでデフォルト動作が変更となっても問題がないよう、ソースコードでは$flags と$charset を可能な限り明示的に呼び出す事をお勧めします。

また、HTMLのBODYにおいて[]にて括られた部分のデザインは、[[CSS]]にて定義されています。CSSは、SKIN_DIR/default.##.cssにて定義されています。
***補足情報 [#xcb03b92]
-[[BugTrack2/213>BugTrack2/213#hb0abc89]] グローバル変数 $scriptは参照せず、get_script_uri() を使用することを推奨
-- リダイレクトする場合は絶対パスである事が必須なので、必ずget_script_uri() を使用してください
-[[BugTrack2/262]]
--出力を開始する前にメニューバーなどのコンバートをしておかないと、(X)HTMLのフラグ（$pkwk_dtd）変更などがあっても無意味になる
-- スキン内で以前の仕様と混在する状況が発生すると多重呼び出しを防止する機構などが誤動作する可能性があるため、パッチを適用など改修をする際には注意が必要です のの→ [[BugTrack2/386]]

SKIN_DIR を直接指定している部分は、DATA_HONE変更時にスキンがロードできなくなる事に対する暫定処置です

** pukiwiki.skin.ja.php [#i93e8739]
+ ファイルコメント - cvs管理されているので IDなどが入っている
 <?php
 /////////////////////////////////////////////////
 // PukiWiki - Yet another WikiWikiWeb clone.
 //
 // $Id: pukiwiki.skin.ja.php,v 1.34 2004/08/08 05:33:43 henoheno Exp $
 //
+ エラー処理 (データの有無)
 if (!defined('DATA_DIR')) { exit; }
+ 生のHTTPヘッダの送信
 header('Cache-control: no-cache');
 header('Pragma: no-cache');
 header('Content-Type: text/html; charset=EUC-JP');
+XML定義送信 (XHTML 対応)
 echo '<?xml version="1.0" encoding="EUC-JP"?>';
 ?>
+ !DOCTYPE 送信 (TRANSLATIONAL(XHTML1.0)/STRICT(XHTML1.1)切替え)
lib/init.php (341行:1.4.4)で定義されている。
 <?php if ($html_transitional) { ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
 <?php } else { ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
 <?php } ?>
+ ヘッダ送信
 <head>
  <meta http-equiv="content-type" content="application/xhtml+xml; charset=EUC-JP" />
  <meta http-equiv="content-style-type" content="text/css" />
++ ロボット対策(閲覧のみ読めるようにする)
 <?php if (!$is_read) { ?>
  <meta name="robots" content="NOINDEX,NOFOLLOW" />
 <?php } ?>
++ ページタイトル送信 
  <title><?php echo "$title - $page_title" ?></title>
++ スタイルシート読み込み
  <link rel="stylesheet" href="skin/default.ja.css" type="text/css" media="screen" charset="Shift_JIS" />
  <link rel="stylesheet" href="skin/print.ja.css" type="text/css" media="print" charset="Shift_JIS" />
++ トラックバック用 JAVA SCRIPT ON
 <?php
   global $trackback, $referer;
   if ($trackback) {
 ?>
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <script type="text/javascript" src="skin/trackback.js"></script>
 <?php } ?>
++ 追加HEADタグの送信~
lib/init.php (51行:1.4.4)以降で定義する。デフォルトでは未設定~
 <?php echo $head_tag ?>
 </head>
+ HTML BODY 送信
 <body>
++ [HEADER部]
+++ ロゴイメージ送信 
  <div id="header">
   <a href="<?php echo $modifierlink ?>"><img id="logo" src="<?php echo IMAGE_DIR ?>pukiwiki.png" width="80" height="80" alt="[PukiWiki]" title="[PukiWiki]" /></a>
+++ ページタイトル送信
   <h1 class="title"><?php echo $page ?></h1>
+++ ページURL送信  
  <?php if ($is_page) { ?>
   <a href="<?php echo "$script?$r_page" ?>"><span class="small"><?php echo "$script?$r_page" ?></span></a>
  <?php } ?>
  
  </div>
++[NAVIGATOR部]:送信 ~
メニューのみを変える場合には、この部分を変更する。
 <div id="navigator">
 
 <?php if ($is_page) { ?>
  [ <a href="<?php echo "$script?$r_page" ?>">リロード</a> ]
  &nbsp;
  [ <a href="<?php echo "$script?plugin=newpage&amp;refer=$r_page" ?>">新規</a>
  | <a href="<?php echo $link_edit ?>">編集</a>
 <?php   if ($is_read and $function_freeze) { ?>
 <?php     if ($is_freeze) { ?>
  | <a href="<?php echo $link_unfreeze ?>">凍結解除</a>
 <?php     } else { ?>
  | <a href="<?php echo $link_freeze ?>">凍結</a>
 <?php     } ?>
 <?php   } ?>
 
  | <a href="<?php echo $link_diff ?>">差分</a>
 
 <?php   if ((bool)ini_get('file_uploads')) { ?>
  | <a href="<?php echo $link_upload ?>">添付</a>
 <?php   } ?>
 
  ]
  &nbsp;
 <?php } ?>
 
  [ <a href="<?php echo $link_top ?>">トップ</a>
  | <a href="<?php echo $link_list ?>">一覧</a>
 
 <?php if (arg_check('list')) { ?>
  | <a href="<?php echo $link_filelist ?>">ファイル名一覧</a>
 <?php } ?>
 
  | <a href="<?php echo $link_search ?>">単語検索</a>
  | <a href="<?php echo $link_whatsnew ?>">最終更新</a>
 
 <?php if ($do_backup) { ?>
  | <a href="<?php echo $link_backup ?>">バックアップ</a>
 <?php } ?>
 
  | <a href="<?php echo $link_help ?>">ヘルプ</a>
  ]
 <?php
   if ($trackback) {
    $tb_id = tb_get_id($_page);
 ?>
  &nbsp;
  [ <a href="<?php echo "$script?plugin=tb&amp;__mode=view&amp;tb_id=$tb_id" ?>">TrackBack(<?php echo tb_count($_page) ?>)</a> ]
 <?php } ?>
 
 <?php
   if ($referer) {
 ?>
  [ <a href="<?php echo "$script?plugin=referer&amp;page=$r_page" ?>">リンク元</a> ]
 
 <?php } ?>
 
 </div>
++ 横線表示
 <?php echo $hr ?>
++ [MENUBAR部]/[BODY部]:MENUBAR部およびBODY部のレイアウトおよび送信(表形式による)~
閲覧の場合のみMENU部を送信~
 <?php if (arg_check('read') and exist_plugin_convert('menu')) { ?>
 <table border="0" style="width:100%">
  <tr>
   <td class="menubar">
    <div id="menubar">
     <?php echo do_plugin_convert('menu') ?>
    </div>
   </td>
   <td valign="top">
    <div id="body"><?php echo $body ?></div>
   </td>
  </tr>
 </table>
 <?php } else { ?>
 <div id="body"><?php echo $body ?></div>
 <?php } ?>

++[NOTE部] 脚注部表示送信
 <?php if ($notes) { ?>
 <div id="note">
 <?php echo $notes ?>
 </div>
 <?php } ?> 

++[ATTACH部] 添付ファイル表示送信
 <?php if ($attaches) { ?>
 <div id="attach">
 <?php echo $hr ?>
 <?php echo $attaches ?>
 </div>
 <?php } ?>
++ 横線表示
 <?php echo $hr ?>

++[TOOLBAR部] ツールバー送信~
メニューのみを変える場合には、この部分も変更する。
 <div id="toolbar">
 
 <?php if ($is_page) { ?>
  <a href="<?php echo "$script?$r_page" ?>"><img src="<?php echo IMAGE_DIR ?>reload.png" width="20" height="20" alt="リロード" title="リロード" /></a>
  &nbsp;
  <a href="<?php echo $script ?>?plugin=newpage"><img src="<?php echo IMAGE_DIR ?>new.png" width="20" height="20" alt="新規" title="新規" /></a>
  <a href="<?php echo $link_edit ?>"><img src="<?php echo IMAGE_DIR ?>edit.png" width="20" height="20" alt="編集" title="編集" /></a>
 <?php   if ($is_read and $function_freeze) { ?>
 <?php     if ($is_freeze) { ?>
  <a href="<?php echo $link_unfreeze ?>"><img src="<?php echo IMAGE_DIR ?>unfreeze.png" width="20" height="20" alt="凍結解除" title="凍結解除" /></a>
 <?php     } else { ?>
  <a href="<?php echo $link_freeze ?>"><img src="<?php echo IMAGE_DIR ?>freeze.png" width="20" height="20" alt="凍結" title="凍結" /></a>
 <?php     } ?>
 <?php   } ?>
  <a href="<?php echo $link_diff ?>"><img src="<?php echo IMAGE_DIR ?>diff.png" width="20" height="20" alt="差分" title="差分" /></a>
 <?php   if ((bool)ini_get('file_uploads')) { ?>
  <a href="<?php echo $link_upload ?>"><img src="<?php echo IMAGE_DIR ?>file.png" width="20" height="20" alt="添付" title="添付" /></a>
 <?php   } ?>
  <a href="<?php echo $link_template ?>"><img src="<?php echo IMAGE_DIR ?>copy.png" width="20" height="20" alt="複製" title="複製" /></a>
  <a href="<?php echo $link_rename ?>"><img src="<?php echo IMAGE_DIR ?>rename.png" width="20" height="20" alt="改名" title="改名" /></a>
  &nbsp;
 <?php } ?>
 
  <a href="<?php echo $link_top ?>"><img src="<?php echo IMAGE_DIR ?>top.png" width="20" height="20" alt="トップ" title="トップ" /></a>
  <a href="<?php echo $link_list ?>"><img src="<?php echo IMAGE_DIR ?>list.png" width="20" height="20" alt="一覧" title="一覧" /></a>
  <a href="<?php echo $link_search ?>"><img src="<?php echo IMAGE_DIR ?>search.png" width="20" height="20" alt="検索" title="検索" /></a>
  <a href="<?php echo $link_whatsnew ?>"><img src="<?php echo IMAGE_DIR ?>recentchanges.png" width="20" height="20" alt="最終更新" title="最終更新" /></a>
 
 <?php if ($do_backup) { ?>
  <a href="<?php echo $link_backup ?>"><img src="<?php echo IMAGE_DIR ?>backup.png" width="20" height="20" alt="バックアップ" title="バックアップ" /></a>
 <?php } ?>
 
  &nbsp;
  <a href="<?php echo $link_help ?>"><img src="<?php echo IMAGE_DIR ?>help.png" width="20" height="20" alt="ヘルプ" title="ヘルプ" /></a>
  &nbsp;
  <a href="<?php echo $link_rss ?>"><img src="<?php echo IMAGE_DIR ?>rss.png" width="36" height="14" alt="最終更新のRSS" title="最終更新のRSS" /></a>
 </div> 
 
++ [BOTTOM部]
+++ [[LASTMODIFIED部] 最終更新時間情報の送信~
pukiwiki.ini.php (214:1.4.4)の $lastmod により ON/OFF設定
 <?php if ($lastmodified) { ?>
 <div id="lastmodified">
  Last-modified: <?php echo $lastmodified ?>
 </div>
 <?php } ?>
 
+++ [RELATED部] 関連ページ情報の送信
ページ内への #norelatedの表記により抑制される。
 <?php if ($related) { ?>
 <div id="related">
  Link: <?php echo $related ?>
 </div>
 <?php } ?> 
 
+++ [FOOTER部] 著作権情報などの送信 ~
$modifier-サイトの持ち主 : pukiwiki.ini.php 内で設定~
S_COPYRIHT - PukiWikiプログラム著作権情報 : lib/init.php (32:1.4.4)で定義~
S_VERSION - PukiWikiバージョン情報 : lib/init.php (31:1.4.4)で定義~
 <div id="footer">
  Modified by <a href="<?php echo $modifierlink ?>"><?php echo $modifier ?></a>
  <br /><br />
  <?php echo S_COPYRIGHT ?>
  <br />
  Powered by PHP <?php echo PHP_VERSION ?>
  <br /><br />
  HTML convert time to <?php echo $taketime ?> sec.
 </div>
 
+ HTML BODY 終了
 </body>
+ HTML 終了
 </html>
スキン/技術資料 の履歴の現在との差分(No.4)

スキン/技術資料の履歴の現在との差分(No.4)
