2017.7.12
日記システム再構築計画#3-クエリパラメータをスラッシュで表現する-
日記システムのリファインもいよいよ大詰めです。
とりあえずジェネレーターにパラメータをぶっこむとページが表示されるところまで行きました。
とはいえ、難関であると予想されるjavascript周りがまだ完全に放置されてるので、作業量としてはまだ半分といったところですかね･･････。
･･････あ、せっかくだからビフォーアフターの一部をお見せしましょうか。(笑)
例えばさっきまで作業してた、日記ログの左部分の目次部分ですね。
この部分ですね。
辞書ファイルから目次を拾ってきて表示し、パラメータとして「いま表示している記事の日付」を渡してきて、該当するところがあれば赤く表示する、といったことをやっています。
恥ずかしいけど、全文見せましょうか。
まずは現行システムが以下です。
<?php
function index_date($str){
if(preg_match('/^[0-9]{8}$/',$str)){
return $str;
}
else{
return "";
}
}
function get_now_ymd(){
$n_d_url=strpos($_SERVER["REQUEST_URI"],'/',5);
$n_d_y=substr($_SERVER["REQUEST_URI"],$n_d_url+1,4);
$n_d_m=substr($_SERVER["REQUEST_URI"],$n_d_url+6,2);
return array($n_d_y,$n_d_m);
}
function Nexts($now,$yy,$mm,$dd){
$y=$now["y"];
$m=$now["m"];
$m=$m+1;
if($m>12){
$m=1;
$y=$y+1;
}
if($m<10){
$m="0".$m;
}
if(file_exists("../../${y}/${m}")){
return "<A class=\"a\" Href=\"../../${y}/${m}/index_left.php?date=${yy}${mm}${dd}\" Target=\"d_0_index\">NEXT month<<</A>";
}else{
return '';
}
}
function Prevs($now,$yy,$mm,$dd){
$y=$now["y"];
$m=$now["m"];
$m=$m-1;
if($m<1){
$m=12;
$y=$y-1;
}
if($m<10){
$m="0".$m;
}
if($y==2014){
return '<a class="a" href="../../../php/Diary/set.php?date=141231" target="_top">>>PREV month</a>';
}
else{
return "<A class=\"a\" Href=\"../../${y}/${m}/index_left.php?date=${yy}${mm}${dd}\" Target=\"d_0_index\">>>PREV month</A>";
}
}
function nextandprev($now,$yy,$mm,$dd){
return Nexts($now,$yy,$mm,$dd).' <A class="a" Href="../../../diary_index.php" Target="_top">Index(Log)</A> '.Prevs($now,$yy,$mm,$dd);
}
function F($month){
if($month==1){
return 'January';
}
if($month==2){
return 'February';
}
if($month==3){
return 'March';
}
if($month==4){
return 'April';
}
if($month==5){
return 'May';
}
if($month==6){
return 'June';
}
if($month==7){
return 'July';
}
if($month==8){
return 'August';
}
if($month==9){
return 'September';
}
if($month==10){
return 'October';
}
if($month==11){
return 'November';
}
if($month==12){
return 'December';
}
}
function D_link($l_y,$l_m,$l_d,$yy,$mm,$dd){
if($l_y==$yy&&$l_m==$mm&&$l_d==$dd){
//現在参照しているページを
$l_m=$l_m+0;
$mm=$mm+0;
$l_d=$l_d+0;
$dd=$dd+0;
/*目次の色設定もここで*/
return "<span style=\"color:#FF0000\"><b>${l_y}/${l_m}/${l_d}</b></span>";
}
else{
$month=$l_m+0;
$day=$l_d+0;
return '<A class="a" Href="./'.$l_d.'.php" Target="_top">'.$l_y.'/'.$month.'/'.$day.'</A></Font>';
}
}
function display($index,$container,$now){
$yy=substr($container,0,4);
$mm=substr($container,4,2);
$dd=substr($container,6);
?>
<!DOCTYPE HTML>
<html>
<head>
<title>見てはいけない日記ログ <?php echo $now["y"];echo '年';echo $now["m"]+0;echo '月';?>
</title>
<style type="text/css">
<!--
html{
overflow-y:scroll;
}
A.a { text-decoration : underline }
A.a:link { color : #3399FF; }
A.a:visited { color : #4682B4; }
A.a:active { color : #FF3333; }
A.a:hover { color : #FF0000; }
table{
margin-left:auto;
margin-right:0;
}
td{
text-align:left;
}
div.indent {
margin-left: 0.5em; /* ブロック全体を 1em（1文字）分右に */
text-indent: -0.5em; /* 先頭の1行のみ 1em（1文字）分左に */
}
-->
</style>
</head>
<body>
<div style="text-align:right;">
<span style="color:#0066FF;font-size:150%">
<?php
echo $now["y"],"年",$now["m"]+0,'月-',F($now["m"]+0),' ',$now["y"],'-';
?></span><br>
<span style="color:#000000;font-size:100%">
<I><?php
include "../../diary_index_title.php";if(isset($d[$now["y"]][$now["m"]+0])){echo $d[$now["y"]][$now["m"]+0];}?></I><br>
<br></span>
<?php
echo nextandprev($now,$yy,$mm,$dd);
?><br>
<br>
<Table Border="1" BorderColor="#00BBFF" style="border-style:hidden">
<?php
for($i=31;$i>0;$i--){
if($i<10){
$ii="0".$i;
}
else{
$ii=$i;
}
if( date("Y-m-d") >= date($now["y"]."-".$now["m"]."-".$ii) ){
if(file_exists("./${ii}.php")){
if(!empty($index[$i][0])){
$j=0;
echo '<Tr><Td><span style="font-size:80%">';
echo D_link($now["y"],$now["m"],$ii,$yy,$mm,$dd);
echo'</span></Td><Td><span style="font-size:80%">';
while(true){
$switch=0;
$color='#0066FF';//デフォルトカラー宣言
if(isset($index[$i][$j])){
if(strstr($index[$i][$j+1],'x')){
$index[$i][$j+1]=str_replace("x","",$index[$i][$j+1]);
$switch=1;
}
if($index[$i][$j+1]=='n'){
//デフォルトカラーのため特に変更しない
}
if($index[$i][$j+1]=='b'){
$color='#000066';
}
if($index[$i][$j+1]=='h'){
$color='#999999';
}
if($index[$i][$j+1]=='r'){
$color='#FF6600';
}
if($index[$i][$j+1]=='c'){
$color='#005555';
}
if($index[$i][$j+1]=='g'){
$color='#009933';
}
if($index[$i][$j+1]=='p'){
$color='#FF66FF';
}//色設定.end
/*タグ生成*/
if($switch==0){
echo "<div class=\"indent\"><span style=\"color:${color}\">「".$index[$i][$j]."」</span></div>";
}
else{
echo "<div class=\"indent\"><span style=\"color:${color}\"><b>「".$index[$i][$j]."」</b></span></div>";
}
$j=$j+2;
}
else{
if($j==0){
//ファイルは存在するが辞書が更新されていない場合//
echo "<span style=\"color:${color}\">「」</span><br>";
}
break;//無限ループを抜ける
}
}//無限ループ.end
##終了タグ##
echo "</span></Td></Tr>\n";
}
}
}
}
?>
<Tr>
<Td ColSpan="2">
<span style="font-size:80%">
<span style="color:#006699"><B>※色の見方</B></span><BR>
<span style="color:#006699">>>普通の記事(日常の話寄り)</span><BR>
<span style="color:#000066">>>普通の記事(ネタ話寄り)</span><BR>
<span style="color:#999999">>>シリアス記事</span><BR>
<span style="color:#FF6600">>>報告記事</span><BR>
<span style="color:#005555">>>料理記事</span><BR>
<span style="color:#009933">>>紹介記事(自分のも含む)</span><BR>
<span style="color:#FF66FF">>>下ネタ(18禁含む)</span><BR>
<span style="color:#0066FF"><BR>
太字は<B>ギャグ要素のある話</B>となっております。<BR>
笑える記事を探している方はどうぞ。
</span></span>
</Td>
</Tr>
</Table>
<br>
<?php
echo nextandprev($now,$yy,$mm,$dd);
?></div>
</body>
</html>
<?php
}
$date="";
if(isset($_GET['date'])){
$date=index_date($_GET['date']);
}
list($now["y"],$now["m"])=get_now_ymd();
display($index,$date,$now);
実はこういうプログラムだったんですが、これを全部クラスにしまして･･････
<?php
include "./Diary.php";
include "./DiaryFunction.php";
include "./Time.php";
class Index_left{
public $disp_yyyy;
public $disp_mm;
public $target;
public $target_yyyy;
public $target_mm;
public $target_dd;
public $index;
public $diary_month_subtitle;
public $next_and_prev_month_link ="";
public $color =[
"n" => '#0066FF',
"b" => '#000066',
"r" => '#FF6600',
"c" => '#005555',
"g" => '#009933',
"p" => '#FF66FF',
];
public $f =[
"1" => 'January',
"2" => 'February',
"3" => 'March',
"4" => 'April',
"5" => 'May',
"6" => 'June',
"7" => 'July',
"8" => 'August',
"9" => 'September',
"10" => 'October',
"11" => 'November',
"12" => 'December',
];
function __construct(){
/*URLから日時を取得*/
$disp = $_GET["disp"]; //表示するページ
$target = $_GET["target"]; //いま見ている記事の日付
$this->disp_yyyy = substr($disp, 0, 4);
$this->disp_mm = substr($disp, 4, 2);
$this->target_yyyy = substr($target, 0, 4);
$this->target_mm = substr($target, 4, 2);
$this->target_dd = substr($target, 6, 2);
/*バリデーション*/
try{
new DateTime($this->disp_yyyy."-".$this->disp_mm."-01");
$target = new DateTime($this->target_yyyy."-".$this->target_mm."-".$this->target_dd);
}catch(Exception $e){
//なんらかのエラーが発生
header('Location: http://trc-vlackhistory.net/');
exit;
}
/*バリデーション通過したらインデックス読み込み*/
include "../..//Diary/diary_index_title.php";
$this->diary_month_subtitle = $d[$this->disp_yyyy][($this->disp_mm)+0];//サブタイトル登録
/*NEXT,PREV month登録*/
$next = $this->url_search_plus();
if(!empty($next)){
$this->next_and_prev_month_link .= $this->next_and_prev_month_link_url($time,'NEXT<<')." ";
}
$this->next_and_prev_month_link .= '<A class="a" Href="../../../diary_index.php" Target="_top">Index(Log)</A> ';
$this->next_and_prev_month_link .= $this->next_and_prev_month_link_url($this->url_search_minus(),'>>PREV');
}
function url_search_plus(){
$search = new DateTime($this->disp_yyyy."-".$this->disp_mm."-01");//現在の月を取得
$search->modify('+1 month');//一ヶ月先に進めた状態でスタート
while(true){
if($search >=new DateTime()){return;}//未来に行ってしまった
if((new Diary($search))->exist === true){
//記事が存在
return new Time($search);//時間情報だけ渡す
}
$search->modify('+1 day');//一日進める
}
}
function url_search_minus(){
$search = new DateTime($this->disp_yyyy."-".$this->disp_mm."-01");//現在の月を取得
$search->modify('-1 day');//一日前から状態でスタート
while(true){
if((new Diary($search))->exist === true){
//記事が存在
return new Time($search);//時間情報だけ渡す
}
$search->modify('-1 day');//一日戻る
}
}
function next_and_prev_month_link_url($time,$str){
return "<a class=\"a\" href=\"../../Diary/{$time->yyyy}/{$time->mm}/{$time->dd}.php\">{$str}</a>";
}
}
$l = new Index_left();//インスタンス準備
?>
<!DOCTYPE HTML>
<html>
<head>
<title>見てはいけない日記ログ <?php echo "{$l->disp_yyyy}年{$l->disp_mm}月";?></title>
<style type="text/css">
<!--
html{
overflow-y:scroll;
}
A.a { text-decoration : underline }
A.a:link { color : #3399FF; }
A.a:visited { color : #4682B4; }
A.a:active { color : #FF3333; }
A.a:hover { color : #FF0000; }
table{
margin-left:auto;
margin-right:0;
}
td{
text-align:left;
}
div.indent {
margin-left: 0.5em; /* ブロック全体を 1em（1文字）分右に */
text-indent: -0.5em; /* 先頭の1行のみ 1em（1文字）分左に */
}
-->
</style>
</head>
<body>
<div style="text-align:right;">
<span style="color:#0066FF;font-size:150%">
<?php
echo "{$l->disp_yyyy}年{$l->disp_mm}月-",$l->f[$l->disp_mm+0],' ',$l->disp_yyyy,'-';
?></span><br>
<span style="color:#000000;font-size:100%">
<I><?php echo $l->diary_month_subtitle;?></I><br>
<br></span>
<?php echo $l->next_and_prev_month_link;?><br>
<br>
<Table Border="1" BorderColor="#00BBFF" style="border-style:hidden">
<?php
$search = (new DateTime($l->disp_yyyy."-".$l->disp_mm."-01"))->modify('+1 month');
$search_end = new DateTime($l->disp_yyyy."-".$l->disp_mm."-01");
while(true){
$search->modify('-1 day');//まず一日戻す
if($search > new DateTime()){continue;}//未来ならばスキップ
//日記インスタンスを作る
$d = new Diary($search);
//存在チェック
if($d->exist === true){
?><Tr>
<Td>
<span style="font-size:80%"><?php
$t = new Time($search);
$str = "{$t->yyyy}/{$t->mm}/{$t->dd}";
if($search == $l->target){
echo "<span style=\"color:#FF0000\"><b>{$str}</b></span>";
}else{
echo "<A class=\"a\" Href=\"{$d->url()}\" Target=\"_top\">{$str}</A>";
}?>
</span>
</Td>
<Td>
<span style="font-size:80%"><?php
for($i=0; !empty($d->index[$i]); $i=$i+2){
$title = $d->index[$i];
$mark = $d->index[$i+1];
//太字マーカーの付与チェックと除去
if(strstr($mark,'x')){
$mark=str_replace("x","",$mark);
$title = '<b>'.$title.'</b>';
}
echo "<div class=\"indent\"><span style=\"color:{$l->color[$mark]}\">「".$d->index[$i]."」</span></div>";
}?>
</span>
</Td>
</Tr><?php
}
if($search_end >= $search){
break;//終端(1日)に到達したら終了
}
}
?>
<Tr>
<Td ColSpan="2">
<span style="font-size:80%">
<span style="color:#006699"><B>※色の見方</B></span><BR>
<span style="color:<?php echo $l->color["n"];?>">>>普通の記事(日常の話寄り)</span><BR>
<span style="color:<?php echo $l->color["b"];?>">>>普通の記事(ネタ話寄り)</span><BR>
<span style="color:<?php echo $l->color["h"];?>">>>シリアス記事</span><BR>
<span style="color:<?php echo $l->color["r"];?>">>>報告記事</span><BR>
<span style="color:<?php echo $l->color["c"];?>">>>料理記事</span><BR>
<span style="color:<?php echo $l->color["g"];?>">>>紹介記事(自分のも含む)</span><BR>
<span style="color:<?php echo $l->color["p"];?>">>>下ネタ(18禁含む)</span><BR>
<span style="color:#0066FF"><BR>
太字は<B>ギャグ要素のある話</B>となっております。<BR>
笑える記事を探している方はどうぞ。
</span>
</span>
</Td>
</Tr>
</Table>
<br>
<?php echo $l->next_and_prev_month_link;?><br>
</div>
</body>
</html>
行数にして40行ほど減ってるんですけど、実はいろいろ機能強化されてます。
もし月に1日も書いてない場合もバグらないし、冗長な部分も多少は改善されています。
CSS直書きはどうかって感じもしますけど、まぁわかりやすいのでこれはこれでって感じです。全体的にDatetimeオブジェクトを活用してるって感じですね。バリデーションにも使ってます。
まぁ、自分がメンテしやすいように作ってるんで、やっぱ全体的にお行儀は悪いですが、メンテのしやすさは格段に上がったと思います。
本題ですね。今まではphpファイルに直にアクセスすることでHTMLページを描写されるプログラムを組んでいましたが、新システムにはジェネレーターにパラメータを渡して記事を描写するという仕組みに変えたいと思います。
まぁこうすることで、デザインの変更をよりしやすくするということですね。
しかし、クエリパラメータは見た目が結構ダサいです。例えば、今日の記事を表示させようとしたときにhttp://trc-vlackhistory.net/php/Diary_25/generate.php?yyyy=2017&mm=07&dd=10とする必要があるわけですね。これはとてもダサい。ついでに言うとDiary_25というシステムフォルダが丸見えなのもダサいですね。Diaryにしたい。(笑)
まとめると、http://trc-vlackhistory.net/Diary/2017/07/10/とかにしたいんですよ。これなら直感的でわかりやすいですね。
こういうのはhtaccessでできるので、やっちまいましょう。(笑)
こういうのはmod_rewriteというものを使ってやるんですね。
んで、これをどのように実装してるかって話ですね。
|
RewriteEngine On RewriteRule ^Diary/[0-9]{4}/[0-9]{2}/[0-9]{2}/$ /php/Diary_25/generate.php [L] |
こうすると、Diaryうんたらかんたらの部分が全部/php/Diary_25/generate.phpに置き換わります(笑)
僕がハマったこととしてはRフラグを付けるとフルパスが帰ってきて詰むってことですね。あんまり意味を深く考えずにつけてました(笑)なんでも、外部へのアクセス扱いになるとかなんとかで。
Lフラグは以降の処理はしないというフラグなので、まぁつけといて良いんじゃないかなって思います。
ただ、ここにもう一つ問題がありまして･･････これを用いると相対パスの指定が狂うんですね。
というのも、URLのスラッシュは必ずしも実際のファイル構造に即している必要もなく、ただただ機械的にパースされてしまうので、例えばDiary/2017/07/12/というアクセスの仕方にしていると、"../../"で呼び出したらDiary/2017というフォルダを見に行っちゃうんですよね。
ということで、悪いことは言わないので、スラッシュを使ったmod_rewriteを使う際は相対パス使うのやめて、絶対パスを使うようにしましょう･･････(笑)
絶対パスをスーパーグローバル変数で取ってくるとHTTPヘッダインジェクションとかいう脆弱性を生むので、どっかに定数置いとくのが良いかとと思います。HTTPヘッダインジェクションがどういう攻撃なのかは各自ググってもらうとして...。
まぁ、簡単に言えば、絶対パスをsrc属性にぶち込むために直接スーパーグローバル変数から取ってくると、そこに改行を含めた自由な値が入れられちゃってる可能性があるってことですね。
まぁ、これでビジュアル面は完成ですね。あとはjavascriptまわりをなんとかしたら、日記システムの改修は終わりです。もう大規模な改修は必要なくなるでしょう･･････と信じたい(笑)