関連コンテツへの導線、各カテゴリーへの横の移動、サイトの情報構造を確認できるようナビゲーションを設置。


| XML宣言 | 有り |
|---|---|
| 文書型宣言 | XHTML 1.0 Transitional |
| 文字コード | utf-8 |
<?xml version="1.0" encoding="utf-8"?>
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="robots" content="index,follow" />
<meta name="author" content="東 敏満,Azuma Toshimitsu" />
<meta name="keywords" content="Web,XML,HTML,CSS,JavaScript,XSLT,PHP,インタラクションデザイン,情報デザイン,情報アーキテクチャ" />
<title> {TILTE} - Vosegus Sakura</title>
<link rel="alternate" type="application/atom+xml" title="Atom" href="/blog/atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/blog/rss.xml" />
<link rel="stylesheet" type="text/css" href="/css/vosegus.css" media="all" />
<link rel="shortcut icon" href="/img/favicon.ico" />
<script type="text/javascript" src="/js/add_event.js"> </script>
<script type="text/javascript" src="/js/analytics.js"> </script>
<script type="text/javascript" src="/js/analyticsload.js"> </script>
{UNIQUEHEADER}
</head>
<body>
<div id="container">
<!-- header -->
<div id="header">
<p id="site-id"> <a href="/index.html"> Vosegus Sakura</a> </p>
<ul>
<li id="feed"> <a href="/blog/atom.xml"> Kangaroonote RSS feed</a> </li>
<li id="contact"> <a href="/blog/contact.php"> Contact</a> </li>
</ul>
</div>
<!-- topic path -->
<ol id="topic-path">
<li><a href="/index.html"></a></li>
{TOPICPATH}
</ol>
<!-- contents -->
<div id="contents">
<h1> {TILTE}</h1>
<ul class="date">
<li class="created">{CREATE}</li>
<li class="modified">{UPDATE}</li>
</ul>
{CONTENTS}
</div>
<!-- relational -->
<div id="{TAGNAME}" class="relational">
</div>
<!-- footer -->
<div id="footer">
<ul>
<li> <a href="/guideline/index.html"> XHTML CSS ガイドライン Beta</a> </li>
<li> <a href="/JSDepository/index.html"> JavaScript { Depository; }</a> </li>
<li> <a href="/labs.html"> Vosegus Labs (XML、XSLT、PHP、CSS)</a> </li>
<li> <a href="/bookmark/index.php"> Vosegus Bookmark</a> </li>
<li> <a href="/xslt/book/index.xml"> 読んだ本をXMLでまとめてXSLTでスタイリングしてみるの巻</a> </li>
</ul>
</div>
</div>
</body>
</html>
CSSはvosegus.css1枚のみ。
| コンポーネント | id/class名 共に不要な場合はタグ名 |
|---|---|
| 見出し Level1〜Level6 | #contents h1〜h6 |
| 段落 | #contents p |
| 順不同リスト | #contents ul |
| 順序付きリスト | #contents ol |
| 定義リスト | #contents dl |
| 引用ブロック | #contents blockquote |
| 引用インライン | #contents q |
| テーブル | #contents table |
| ハイパーリンク | #contents a |
| サイトID | #site-id |
| パンクズナビゲーション | #topic-path |
| プライマリナビゲーション | #header > ul |
| 下階層へのナビゲーション | #contents li > a |
| ページ内ナビゲーション | #nav li > a |
| ページ上部へのナビゲーション | p.to-top |
| フッターナビゲーション | #footer > a |
| 外部ドメインへのハイパーリンク | #contents .external |
| 作成日 | .create |
| 更新日 | .update |
| ソースコード | #contents code |
| 書籍広告 | .book-ad |
| アドセンス広告 | .google-ad |
JavaScriptとXMLで管理。
<?xml version="1.0" encoding="utf-8" ?>
<tag-names>
<tag-name>TagName</tag-name>
</tag-names>
<?xml version="1.0" encoding="utf-8" ?>
<snippet>
<code title="title"><![CDATA[code]]></code>
</snippet>
| tag-name | tagNames |
|---|---|
| code | codes |
CREATE DATABASE vosegus CHARACTER SET utf8;
CREATE TABLE documents(
document_id SMALLINT UNSIGNED AUTO_INCREMENT,
path VARCHAR(40),
title TINYTEXT,
unique_head TEXT,
contents LONGTEXT,
create_date DATE,
update_date DATE,
category VARCHAR(20),
tag_name VARCHAR(20),
CONSTRAINT pk_vosegus PRIMARY KEY (document_id)
);
| ラベル | POSTデータ | 変数名 |
|---|---|---|
| 出力ディレクトリ | $_POST['put-dir'] | $put_dir |
| 出力ファイル | $_POST['put-file'] | $put_file |
| ドキュメントユニークhead要素 | $_POST['unique-head'] | $unique_head |
| ドキュメントタイトル | $_POST['title'] | $title |
| コンテンツ | $_POST['contents'] | $contents |
| 作成日 | $_POST['create-day'] | $create_day |
| 更新日 | $_POST['update_day'] | $update-day |
| カテゴリ | $_POST['category'] | $category |
| タグ | $_POST['tag-name'] | $tag-name |
| ( | $op |
|---|---|
| ' | $q |
| ) | $cp |
| , | $c |
| ; | $semicolon |
| table-name | $table_name |
| FROM | $from |
| WHERE | $where |
| INSERT INTO | $insert |
|---|---|
| field | $insert_fields |
| value | $insert_values |
| UPDATE | $update |
|---|---|
| field = 'value' | $update_values |
| DELETE | $delete |
|---|---|
| field = value | $delete_values |
| SELECT | $select |
|---|---|
| field | $select_field |
| WHERE field = 'value' | $select_where |
<?php
//**********************
//データベースに接続
//**********************
$connect = mysql_connect("PATH","ID","PASS");
if(!$connect){
die('Could not connect');
}
$db = mysql_select_db('vosegus', $connect);
if(!$db){
die('Could not select database');
}
//今日の日付を取得
$d = getdate();
$today = date("Y-m-d");
//テンプレ−トを取得
$template = file_get_contents("template.html");
//**********************
//共通POSTデータを変数に格納
//**********************
if( !is_null($_POST['create']) || !is_null($_POST['update']) ){
//ユニークhead
$unique_head = $_POST['unique-head'];
//タイトル
$title = $_POST['title'];
//作成日
$create_day = $_POST['create-day'];
//更新日
$update_day = $_POST['update-day'];
//カテゴリ
$category = $_POST['category'];
if($category == 'null'){
$topic_path = '';
}else if($category == 1){
$topic_path = '<li><a href="/guideline/index.html">XHTML CSS ガイドライン Beta</a></li>';
}else if($category == 2){
$topic_path = '<li><a href="/JSDepository/index.html">JavaScript { Depository; }</a></li>';
}else if($category == 3){
$topic_path = '<li><a href="/labs.html">Vosegus Labs</a></li>';
}
//タグ
$tag_name = $_POST['tag-name'];
$tag_name = str_replace(' ','',$tag_name);
//コンテンツ
$contents = $_POST['contents'];
}
//**********************
//SQL構文作成
//**********************
//共通
$op = '(';
$q = "'";
$cp = ')';
$c = ', ';
$semicolon = ';';
$table_name = 'documents ';
$from = 'FROM ';
$where = ' WHERE ';
//UPDATE
$update = 'UPDATE ';
$set = 'SET ';
$update_values = " field = 'value' ";
//DELETE
$delete = 'DELETE';
$delete_values = " field = 'value' ";
//SELECT
$select = 'SELECT ';
$select_field = "field";
$select_where = " WHERE field = 'value' ";
//**********************
//ファイルを作成
//**********************
if(!is_null($_POST['create'])){
//POSTデータを変数に格納-------------
//ファイルパス
$defaut_puth = "../";
$put_dir = $_POST['put-dir'];
$pur_file = $_POST['put-file'];
$put_path = $defaut_puth.$put_dir.$pur_file.'.html';
$put_path = str_replace(' ','',$put_path);
//INSERT QUERY
$insert = 'INSERT INTO ';
$insert_fields = "(path,title,unique_head,contents,create_date,update_date,category,tag_name) ";
$insert_value = 'VALUES';
$insert_values = $op.$q.$put_path.$q.$c.$q.$title.$q.$c.$q.$unique_head.$q.$c.$q.$contents.$q.$c.$q.$create_day.$q.$c.$q.$update_day.$q.$c.$q.$category.$q.$c.$q.$tag_name.$q.$cp;
$query = $insert.$table_name.$insert_fields.$insert_value.$insert_values.$semicolon;
//テンプレートの文字列をPOSTデータで置換
$template = str_replace('{UNIQUEHEADER}',$unique_head,$template);
$template = str_replace('{TOPICPATH}',$topic_path,$template);
$template = str_replace('{TILTE}',$title,$template);
$template = str_replace('{CREATE}',$create_day,$template);
$template = str_replace('{UPDATE}',$update_day,$template);
$template = str_replace('{TAGNAME}',$tag_name,$template);
$template = str_replace('{CONTENTS}',$contents,$template);
$template = str_replace('','',$template);
//ファイルの有無を判定
if(file_exists($put_path) ){
print "<script>alert('ファイルは既に存在します')</script>";
}else{
$insert_query = mysql_query($query);
if(!$insert_query){
die('Could not mysql_query');
}
//読み込み/書き込み(既存ファイルの上書き ファイルが存在しない場合はファイル作成)
$create_file = fopen($put_path ,"w+");
$create_write = fwrite($create_file ,$template);
fclose($create_file);
}
}
//**********************
//ファイルを編集
//**********************
if($_POST['update']){
//ファイルパス
$defaut_puth = "../";
$put_path = $defaut_puth.$_POST['update-path'];
$put_path = str_replace(' ','',$put_path);
//UPDATE QUERY
$d_id = $_POST['update_id'];
$update_path = $_POST['update-path'];
$update_values = 'update_date='.$q.$update_day.$q.$c.'tag_name='.$q.$tag_name.$q.$c.'title='.$q.$title.$q.$c.'unique_head='.$q.$unique_head.$q.$c.'contents='.$q.$contents.$q.$c.'path='.$q.'../'.$update_path.$q;
$query = $update.$table_name.$set.$update_values.$where.'document_id='.$d_id.$semicolon;
$update_query = mysql_query($query);
if(!$update_query){
die('Could not mysql_query');
}
//テンプレートの文字列をPOSTデータで置換
$template = str_replace('{UNIQUEHEADER}',$unique_head,$template);
$template = str_replace('{TOPICPATH}',$topic_path,$template);
$template = str_replace('{TILTE}',$title,$template);
$template = str_replace('{CREATE}',$create_day,$template);
$template = str_replace('{UPDATE}',$update_day,$template);
$template = str_replace('{TAGNAME}',$tag_name,$template);
$template = str_replace('{CONTENTS}',$contents,$template);
$template = str_replace('','',$template);
//読み込み/書き込み(既存ファイルの上書き ファイルが存在しない場合はファイル作成)
$create_file = fopen($put_path ,"w+");
$create_write = fwrite($create_file ,$template);
fclose($create_file);
}
//全て再構築
if(!is_null($_POST['all-build'])){
$select_field = "document_id,path,title,unique_head,contents,create_date,update_date,category,tag_name ";
$select_list = $select.$select_field.$from.$table_name.$semicolon;
$allw_query = mysql_query($select_list);
if(!$allw_query){
die('Could not mysql_query');
}
$wnum = 0;
$pnum = 0;
while( $result_row = mysql_fetch_array($allw_query) ){
$result_row[1] = str_replace(' ','',$result_row[1]);
$document_id[$wnum] = $result_row[0];
$path[$wnum] = $result_row[1];
$title [$wnum] = $result_row[2];
$unique_head[$wnum] = $result_row[3];
$contents[$wnum] = $result_row[4];
$create_day[$wnum] = $result_row[5];
$update_day[$wnum] = $result_row[6];
$category[$wnum] = $result_row[7];
$tag_name[$wnum] = $result_row[8];
$wnum += 1;
}
for($i=0;$i<count($document_id);$i+=1){
//テンプレ−トを取得
$template = file_get_contents("template.html");
if($category[$pnum] == 'null'){
$topic_path = '';
}else if($category[$pnum] == 1){
$topic_path = '<li><a href="/guideline/index.html">XHTML CSS ガイドライン Beta</a></li>';
}else if($category[$pnum] == 2){
$topic_path = '<li><a href="/JSDepository/index.html">JavaScript { Depository; }</a></li>';
}else if($category[$pnum] == 3){
$topic_path = '<li><a href="/labs.html">Vosegus Labs</a></li>';
}
$tag_name[$pnum] = str_replace(' ','',$tag_name[$pnum]);
$template = str_replace('{TILTE}',$title[$pnum],$template);
$template = str_replace('{UNIQUEHEADER}',$unique_head[$pnum],$template);
$template = str_replace('{CONTENTS}',$contents[$pnum],$template);
$template = str_replace('{CREATE}',$create_day[$pnum],$template);
$template = str_replace('{UPDATE}',$update_day[$pnum],$template);
$template = str_replace('{TOPICPATH}',$topic_path,$template);
$template = str_replace('{TAGNAME}',$tag_name[$pnum],$template);
$template = str_replace('','',$template);
//読み込み/書き込み(既存ファイルの上書き ファイルが存在しない場合はファイル作成)
$create_file = fopen($path[$pnum] ,"w+");
$create_write = fwrite($create_file ,$template);
fclose($create_file);
$pnum += 1;
}
}
//XML宣言を記述
print '<?xml version="1.0" encoding="utf-8"?>';
?>
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="robots" content="index,follow" />
<meta name="author" content="東 敏満,Azuma Toshimitsu" />
<title>Webサイト管理アプリケーション - Vosegus Sakura</title>
<link rel="alternate" type="application/atom+xml" title="Atom" href="/blog/atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/blog/rss.xml" />
<link rel="stylesheet" type="text/css" href="/css/vosegus.css" media="all" />
<link rel="shortcut icon" href="/img/favicon.ico" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/add_event.js"></script>
<script type="text/javascript" src="/js/analytics.js"></script>
<script type="text/javascript" src="/js/analyticsload.js"></script>
<script type="text/javascript" src="/js/jquery.textarearesizer.js"></script>
<script type="text/javascript" src="sma.js"></script>
<style type="text/css">
#sunippet{
float:right;
}
xmp{
height:200px;
overflow:scroll;
}
</style>
</head>
<body>
<div id="container">
<!-- header -->
<div id="header">
<p id="site-id"><a href="/index.html">Vosegus Sakura</a></p>
<ul>
<li id="feed"><a href="/blog/atom.xml">Kangaroonote RSS feed</a></li>
<li id="contact"><a href="/blog/contact.php">Contact</a></li>
</ul>
</div>
<!-- topic path -->
<ol id="topic-path">
<li><a href="/index.html">Home</a></li>
<li>Webサイト管理アプリケーション</li>
</ol>
<!-- contents -->
<div id="contents">
<h1>Webサイト管理アプリケーション</h1>
<ul class="date">
<li class="create" title="20090507">2009/05/07</li>
<li class="update" title="20090507">2009/05/07</li>
</ul>
<ul id="nav">
<li><a href="index.php?create">ドキュメントの新規追加</a></li>
<li><a href="index.php">ドキュメント一覧</a></li>
</ul>
<?php
if(!is_null($_POST['create'])){
print '
ファイルを作成しました。<a target="_blank" href="
';
print
$put_path
;
print '
">確認する</a></p>
';
}else if(!is_null($_POST['update'])){
print '
<p>ファイルを更新しました。<a href="">確認する</a></p>
';
}else if(!is_null($_POST['all-build'])){
print '
<p>全てのファイルを更新しました。</p>
';
}
else if(!is_null($_GET['create'])){
print '
<form method="post" action="index.php">
<div>
<h2>ドキュメントの新規追加</h2>
<dl id="sunippet">
<dt>コードスニペット
<select name="code" id="code">
</select></dt>
<dd><textarea id="snippet" cols="40" rows="10" class="resizable"></dd>
</dl>
<p>作成日
<input type="text" name="create-day" value="
';
print $today;
print '" />
更新日
<input type="text" name="update-day" value="
';
print $today;
print '" /></p>
<p>出力ディレクトリ
<input type="text" name="put-dir" />
出力ファイル
<input type="text" name="put-file" /></p>
<p>カテゴリ
<select name="category" id="category">
<option value="null">null</option>
<option value="1">XHTML CSS ガイドライン Beta</option>
<option value="2">JavaScript { Depository; }</option>
<option value="3">Vosegus Labs</option>
</select>
タグ
<select name="tag-name" id="tag-name">
</select></p>
<dl>
<dt>ドキュメントタイトル</dt>
<dd><input type="text" name="title" /></dd>
<dt>ドキュメントユニークhead要素</dt>
<dd><textarea name="unique-head" cols="70" rows="3" class="resizable"></dd>
<dt>コンテンツ</dt>
<dd><textarea name="contents" cols="70" rows="16" class="resizable"></dd>
</dl>
<input type="hidden" name="create" />
<p><input type="submit" value="送信" /></p>
</div>
</form>
';
}else if(!is_null($_GET['update'])){
$d_id = $_GET['update'];
$select_where = " WHERE document_id =".$d_id;
$select_field = "document_id,title,category,tag_name,create_date,update_date,path,unique_head,contents ";
$select_source = $select.$select_field.$from.$table_name.$select_where.$semicolon;
$source_query = mysql_query($select_source);
if(!$source_query){
die('Could not mysql_query');
}
while( $result_row = mysql_fetch_array($source_query) ){
$result_row[6] = str_replace('../','',$result_row[6]);
$source[0] = $result_row[1];
$source[1] = $result_row[2];
$source[2] = $result_row[3];
$source[3] = $result_row[4];
$source[4] = $result_row[5];
$source[5] = $result_row[6];
$source[6] = $result_row[7];
$source[7] = $result_row[8];
}
print '
<form method="post" action="index.php">
<div>
<h2>ドキュメントの更新</h2>
<dl id="sunippet">
<dt>コードスニペット
<select name="code" id="code">
</select></dt>
<dd><textarea id="snippet" cols="40" rows="10" class="resizable"></dd>
</dl>
<p>作成日
<input type="text" name="create-day" value="
';
print $source[3];
print '" />
更新日
<input type="text" name="update-day" value="';
print $today;
print '" />';
print '</p>
<p>出力パス
<input type="text" name="update-path" value="'.$source[5].'" /></p>
<p>カテゴリ
<select name="category" id="category">
<option value="
';
print $source[1];
print '">null</option>
<option value="null">null</option>
<option value="1">XHTML CSS ガイドライン Beta</option>
<option value="2">JavaScript { Depository; }</option>
<option value="3">Vosegus Labs</option>
</select>'
.
'
タグ
<select name="tag-name" id="tag-name">
<option value="'.$source[2].'">'.$source[2].'</option>
</select></p>
<dl>
<dt>ドキュメントタイトル</dt>
<dd><input type="text" name="title" value="'.$source[0].'"
/></dd>
<dt>ドキュメントユニークhead要素</dt>
<dd><textarea name="unique-head" cols="70" rows="3" class="resizable">';
print $source[6];
print '</dd>
<dt>コンテンツ</dt>
<dd><textarea name="contents" cols="135" rows="16" class="resizable">'.$source[7];
print '</dd>
</dl>
';
print '<input type="hidden" name="update" value="1" />
<input type="hidden" name="update_id" value="'.$d_id.'" />
<p><input type="submit" value="送信" /></p>
</div>
</form>
';
print "<xmp>".$source[7]."</xmp>";
}else{
print '
<div>
<h2>ドキュメント一覧</h2>
<table>
<thead>
<tr><th>タイトル</th><th>カテゴリ</th><th>タグ</th><th>作成日</th><th>更新日</th><th>URL</th></tr>
</thead>
<tbody>';
$select_field = "document_id,title,category,tag_name,create_date,update_date,path ";
$select_list = $select.$select_field.$from.$table_name."ORDER BY update_date".$semicolon;
$list_query = mysql_query($select_list);
if(!$list_query){
die('Could not mysql_query');
}
while( $result_row = mysql_fetch_array($list_query) ){
$result_row[6] = str_replace('../','',$result_row[6]);
$result_row[6] = str_replace(' ','',$result_row[6]);
print '<tr>'.
'<td><a href="?update='.$result_row[0].' ">'.
$result_row[1].'</a></td>'.
'<td>'.$result_row[2].'</td>'.
'<td>'.$result_row[3].'</td>'.
'<td>'.$result_row[4].'</td>'.
'<td>'.$result_row[5].'</td>'.
'<td><a href="../'.$result_row[6].'" target="_blank">'.$result_row[6].'</a></td>'.
'</tr>';
}
print '
</tbody>
</table>
<form method="post" action="index.php?build=1">
<input type="hidden" name="all-build" value="1" />
<p><input type="submit" value="全て再構築" /></p>
</form>
</div>
';
}
?>
</div>
<!-- footer -->
<div id="footer">
<ul>
<li><a href="/blog/index.html">Kangaroonote - blog</a></li>
<li><a href="/guideline/index.html">XHTML CSS ガイドライン Beta</a></li>
<li><a href="/JSDepository/index.html">JavaScript { Depository; }</a></li>
<li><a href="/labs.html">Vosegus Labs</a></li>
<li><a href="/bookmark/index.php">Vosegus Bookmark</a></li>
<li><a href="/xslt/book/index.xml">読んだ本をXMLでまとめてXSLTでスタイリングしてみるの巻</a></li>
</ul>
</div>
</div>
</body>
</html>