rev25

スタイルシートの整理を中心に大幅な変更を行いました。よく使う、リセット用のスタイルシートや、プラグインなどの固有のスタイルシートをscripts.css.phpに入れました。なお、リセット用のスタイルシートのベースとなっているものは、HTML5 ★ Boilerplateのv1.0です。

なお、UI見直しに伴い、プレビュー以外のフォーム拡張は無効化しています。

  • スキンのスタイルシートの大規模な見直し。スキンのデザインに含まれない共通部分は、scripts.css.phpに移動。
  • calendar.inc.php、tracker.inc.php、attach.inc.php、vote.inc.phpのテーブルタグ生成部分のスタイルシートをほぼ統一。ロケールファイルの更新。
  • qrcode.inc.phpの作り直し。
  • IE9でスクリプトが動作しないバグを修正。
  • 添付ファイルのヘッダーにLast-Modifiedなどを出すようにした。更新がない場合は、304を出力して処理中断。
  • modernizr、colorbox、json2.jsをバージョンアップ

テーブルの処理に、空欄のセルの処理を追加しました。

thead td.style_td,
tfoot td.style_td{
	background-color:#D0D8E0;
}
thead th.style_th,
tfoot th.style_th{
	background-color:#E0E8F0;
}
.style_table{
	background-color:#ccd5dd;
}
.style_th{
	background-color:#EEEEEE;
}
.style_td{
	background-color:#EEF5FF;
}
.style_td_blank{
	background-color:#E3EAF6;
}

といれると、いいでしょう。

カレンダー関連のプラグインをminicalendar.inc.phpとcalendar2.inc.phpの機能を統合した上で、calendar.inc.php、calendar_edit.inc.php、calendar_read.inc.php、calendar_viewer.inc.phpの4つにまとめました。これに伴いカレンダーの色などを指定する場合以下のクラスを用います。

/* カレンダーのテーブルのスタイルシート */
.style_calendar {
	background-color:#CCD5DD;
}
/* カレンダーのタイトル部分のスタイルシート */
.style_calendar_top {
	background-color:#EEF5FF !important;
}
/* 今日のセルのスタイルシート */
.style_calendar_today {
	background-color:#FFFFDD;
}
/* 土曜日のセルのスタイルシート */
.style_calendar_sat {
	background-color:#DDE5FF;
}
/* 日曜日のセルのスタイルシート(一応、休日と祝日を分けてあります) */
.style_calendar_sun, .style_calendar_holiday {
	background-color:#FFEEEE;
}
/* 空欄のセルのスタイルシート */
.style_calendar_blank {
	
}
/* 平日のセルのスタイルシート */
.style_calendar_day {
	
}
.style_calendar_week {
	background-color:#DDE5EE;
}
/* マウスオーバー時のスタイルシート */
.style_calendar tbody .style_td:hover{
	background-color: #DDFFFF;
}

/* 曜日表記の色 */
/* 土曜日 */
.week_sat{
	color:blue;
}
/* 平日 */
.week_day {
/*	color:black;	*/
}
/* 日曜日・祝日(祝日の色は、カレンダーのみ反映されます) */
.week_sun, .week_holiday {
	color:red;
}

classicスキン(旧称LogueWiki Skin)を追加しました。見た目は、PukiWikiオフィシャルと同じデザインのスキンです。ただし、中身のDOM構造は完全に別物となっています。具体的にはテーブルタグによる段組でなくfloatを用いています。

また、プリント用スタイルシートもデザインし直しました。ぜひ、プレビューで確認してみてください。(FireFox4および、Safariのみ)

あと、こっそりとイタリックが反映されない問題を直しています。メイリオ、微軟雅黒、맑은 고딕フォントをイタリック表示しようとすると、非ASCII文字にイタリックのフォントが含まれないため、イタリックが通常反映されません。そこで、CSS3で実装されたtransformを用いて15度角度をずらします。これにより、擬似的にイタリックを表現します。

/* Fix italic font */
i, em, cite, q{
	font-style: normal;
	transform: skewX(-15deg);
}
.gecko i, .gecko em, .gecko cite, .gecko q{
	-moz-transform: skewX(-15deg);
}
.ie i, .ie em, .ie cite, .ie q{
	-ms-transform: skewX(-15deg);
}
.presto i, .presto em, .presto cite, .presto q{
	-o-transform: skewX(-15deg);
}
.webkit i, .webkit em, .webkit cite, .webkit q{
	-webkit-transform: skewX(-15deg);
}

/* Italic font fix for legacy IE */
.ie6 i, .ie6 em, .ie6 cite, .ie7 i, .ie7 em, .ie7 cite, .ie8 i, .ie8 em, .ie8 cite{
	font-family: 'MS PGothic', suns-serif;
	font-style: italic;
}

テスト

English日本語한국어中文
English日本語한국어中文

ヘッダーの最適化

pkwk_common_header()関数を拡張して、圧縮転送フラグに続いて、更新日時と有効期限を指定できるようにしました。

/**
	@brief Output common HTTP headers

	@param modified 最終更新日時(秒)
	@param expire 有効期限(秒)
	@param compress 圧縮をするかしないか(refなどで二重圧縮されるのを防ぐ)
	@return なし
*/
function pkwk_common_headers($modified = 0, $expire = 0, $compress = true){
	global $expire, $lastmod;
	if (! PKWK_OPTIMISE) pkwk_headers_sent();

	if ($modified !== 0 && $lastmod){
		// 最終更新日(秒で)が指定されていない場合動的なページとみなす。
		// PHPで条件付きGETとかEtagとかでパフォーマンス向上
		// http://firegoby.theta.ne.jp/archives/1730
		$last_modified = gmdate('D, d M Y H:i:s T', $modified);
		if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) ) {
			if ($_SERVER['HTTP_IF_MODIFIED_SINCE'] == $last_modified) {
				header('HTTP/1.1 304 Not Modified');
				exit;
			}
		}
		if (isset($_SERVER['HTTP_IF_NONE_MATCH'])) {
			if (preg_match("/{$etag}/", $_SERVER['HTTP_IF_NONE_MATCH'])) {
				header('HTTP/1.1 304 Not Modified');
				exit;
			}
		}
		header('ETag: "'.md5($last_modified).'"');
		header('Last-Modified: ' . $last_modified );
		header('Cache-control: must-revalidate');
		if ($expire !== 0){
			header('Expires: '.gmdate('D, d M Y H:i:s', time() + $expire).' GMT');
		}
	}else{
		// PHPで動的に生成されるページはキャシュすべきではない
		header('Cache-Control: no-cache, must-revalidate');
		header('Pragma: no-cache');
		header('Expires: Sat, 26 Jul 1997 05:00:00 GMT');
	}

	if(PKWK_ZLIB_LOADABLE_MODULE === true && $compress !== false) {
		$matches = array();
		// どうも、ob_gzhandler関連は動作が不安定だ・・・。
/*
		if(extension_loaded('zlib') &&
			ob_get_length() === FALSE &&
			!ini_get('zlib.output_compression') &&
			ini_get('output_handler') !== 'ob_gzhandler' &&
			ini_get('output_handler') !== 'mb_output_handler'){	// mb_output_handlerとかち合うらしいので、その場合は弾く。http://pukiwiki.sourceforge.jp/dev/?%BB%A8%C3%CC%2F11
	
			global $ob_flag;
			$ob_flag = false;
	
			// http://jp.php.net/manual/ja/function.ob-gzhandler.php
			ob_start('ob_gzhandler');
			$ob_flag = true;
		}else
*/
		if(ini_get('zlib.output_compression') &&
			preg_match('/\b(gzip|deflate)\b/i', $_SERVER['HTTP_ACCEPT_ENCODING'], $matches)) {
			// Bug #29350 output_compression compresses everything _without header_ as loadable module
			// http://bugs.php.net/bug.php?id=29350
			header('Content-Encoding: ' . $matches[1]);
		}
	}
	// RFC2616
	header('Vary: Accept-Encoding, '.get_language_header_vary() );
	header('X-Content-Type-Options: nosniff');	// IEの自動MIME type判別機能を無効化する
	header('X-Frame-Options: SameDomain');	// クリックジャッキング対策
}

更新がない場合は、304を出力して以後の処理をやめます。添付ファイルと、ツールチップの処理では常時これが出力されるため、大幅に負荷を減らすことができると思います。また、$lastmodが有効な場合は、ページに対しても出力します。ただし、キャッシュから読み込むため、副作用としてカウンターが回らなくなったり、「タイムスタンプを更新しない」をチェックして更新した場合、ページにそれが反映されなくなります。

なお、X-Content-Type-Options: nosniffと、X-Frame-Options: SameDomainは、強制的出力されます。

CSSブラウザハックについて

ブラウザによって、html要素に2種類のクラスを自動的に出力するようにしました。ブラウザ名の後の番号はバージョンで環境によって変化します。

ブラウザ出力されるクラス
InternetExplorer.ie .ie8(バージョンによって数字が変化)
FireFox / Netscape.gecko .firefox4
Safari / Chrome.webkit
Opera.presdo
PS2, Wii, PS3, PSP, テレビ.netfront