エフェクト一覧を表示する
せっかく一覧を入力したので、それをあいうえお順にソートして表示するようにしてみました。
画面イメージは以下の通り。
以前別件で作った奴をちょこっと手直ししました。
ただしこれ大問題があって、データがCSVです。面倒です。やっぱりせっかくだからデータベース使いたい。
コード
とりあえず現状のコードは以下の通り。
定義ファイル【effect_ini.php】
<?php /* 定数の定義 */ //データファイル名 define("DATAFILENAME", "effect_list.csv"); //CSSファイル名 define("CSSNAME", "effe_main"); //データ表示用PHPファイル名 define("HYOJIPHPNAME", "index.php"); /* 以降データファイルに格納されているデータのフィールド名と順番の対応 */ //ID番号 define("DATA_ID", 0); //エフェクト名 define("DATA_EFFE_NAME", 1); //エフェクトよみ define("DATA_EFFE_YOMI", 2); //ルルブ名 define("DATA_RULE_BOOK", 3); //ページ数 define("DATA_RULE_PAGE", 4); //シンドローム種別 define("DATA_SYN_NAME", 5); ?>
データ表示【index.php】
<?php //ファイル名定義ファイル読み込み require("effect_ini.php"); //usort用、あいうえお順に並べ替える関数 function cmp_by_Kana($a, $b){ return strcmp($a[DATA_EFFE_YOMI], $b[DATA_EFFE_YOMI]); } //全データ数をカウント、配列に格納 $file = fopen(DATAFILENAME,"r"); $count = 0; while($row = fgetcsv($file, 1024, ",")){ $hyou[$count++]=$row; } fclose($file); //全データをアイウエオ順にソート usort($hyou, "cmp_by_Kana"); //全データをア行、カ行……ワ行に分別して3次元配列$akasatanaに格納 $i_a=0; $i_ka=0; $i_sa=0; $i_ta=0; $i_na=0; $i_ha=0; $i_ma=0; $i_ya=0; $i_ra=0; $i_wa=0; $i_xx=0; mb_regex_encoding("UTF-8"); foreach($hyou as $row){ if (mb_ereg_match("^[あいうえお]", $row[DATA_EFFE_YOMI])) { $akasatana[0][$i_a++]=$row; $tab_guide[0]="あ"; $tab_guide_a[0]="a_gyo"; } elseif(mb_ereg_match("^[かきくけこがぎぐげご]", $row[DATA_EFFE_YOMI])) { $akasatana[1][$i_ka++]=$row; $tab_guide[1]="か"; $tab_guide_a[1]="ka_gyo"; } elseif(mb_ereg_match("^[さしすせそざじずぜぞ]", $row[DATA_EFFE_YOMI])) { $akasatana[2][$i_sa++]=$row; $tab_guide[2]="さ"; $tab_guide_a[2]="sa_gyo"; } elseif(mb_ereg_match("^[たちつてとだぢづでど]", $row[DATA_EFFE_YOMI])) { $akasatana[3][$i_ta++]=$row; $tab_guide[3]="た"; $tab_guide_a[3]="ta_gyo"; } elseif(mb_ereg_match("^[なにぬねの]", $row[DATA_EFFE_YOMI])) { $akasatana[4][$i_na++]=$row; $tab_guide[4]="な"; $tab_guide_a[4]="na_gyo"; } elseif(mb_ereg_match("^[はひふへほばびぶべぼぱぴぷぺぽ]", $row[DATA_EFFE_YOMI])) { $akasatana[5][$i_ha++]=$row; $tab_guide[5]="は"; $tab_guide_a[5]="ha_gyo"; } elseif(mb_ereg_match("^[まみむめも]", $row[DATA_EFFE_YOMI])) { $akasatana[6][$i_ma++]=$row; $tab_guide[6]="ま"; $tab_guide_a[6]="ma_gyo"; } elseif(mb_ereg_match("^[やゆよ]", $row[DATA_EFFE_YOMI])) { $akasatana[7][$i_ya++]=$row; $tab_guide[7]="や"; $tab_guide_a[7]="ya_gyo"; } elseif(mb_ereg_match("^[らりるれろ]", $row[DATA_EFFE_YOMI])) { $akasatana[8][$i_ra++]=$row; $tab_guide[8]="ら"; $tab_guide_a[8]="ra_gyo"; } elseif(mb_ereg_match("^[わをん]", $row[DATA_EFFE_YOMI])) { $akasatana[9][$i_wa++]=$row; $tab_guide[9]="わ"; $tab_guide_a[9]="wa_gyo"; } else { $akasatana[10][$i_xx++]=$row; $tab_guide[10]="その他"; $tab_guide_a[10]="sono_ta"; } } //各行のカウントアップ数を配列$sum_countに格納 $sum_count = array($i_a, $i_ka, $i_sa, $i_ta, $i_na, $i_ha, $i_ma, $i_ya, $i_ra, $i_wa, $i_xx); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>エフェクト一覧</title> <meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE"> <LINK rel="stylesheet" type ="text/css" href="<?=CSSNAME ?>"> </head> <body> <div id="wrapper"> <h1>エフェクト一覧</h1> <!-- <p class="tonew"><a href="tel_new.php">新規登録</a></p> --> <?php //各行ごとにナビとデータテーブル表示 for ($x_gyo=0; $x_gyo<10; $x_gyo++){ //行にデータが一件もない時は何も表示せず次の行へ if($sum_count[$x_gyo]==0){ }else{ //ナビ用文字列作り $navi_str = ""; for ($navi_gyo = 0; $navi_gyo < 10; $navi_gyo++){ if($navi_gyo == $x_gyo){ $navi_str = $navi_str.'<strong><a name="'.$tab_guide_a[$navi_gyo].'">'.$tab_guide[$navi_gyo].'</a></strong>'; }else{ $navi_str = $navi_str.'<a href="#'.$tab_guide_a[$navi_gyo].'">'.$tab_guide[$navi_gyo].'</a>'; } } ?> <!-- 各行ナビ --> <p class="navi"><?=$navi_str ?></p> <h2><?= $tab_guide[$x_gyo] ?>行</h2> <?php $i=0; for($n=0;$n < 2;$n++){ //左右どちらかのカラムか検査 //データが奇数の場合左側のカラムが1行増える $rows = floor($sum_count[$x_gyo]/2); if($n==0 && $sum_count[$x_gyo]%2==1){ $rows++; } //カラムが左の場合、id="column1"、右の場合id="column2" if($n==0){ $columnname = "column1"; }else{ $columnname = "column2"; } ?> <div class="<?=$columnname ?>"> <table> <tr> <th>番号</th> <th>エフェクト名</th> <th>ルルブ名</th> <th>ページ</th> <th>シンドローム</th> </tr> <?php //テーブルを1行ごとに色分け $irowake=0; for($m=0;$m < $rows;$m++){ $row = $akasatana[$x_gyo][$i++]; $irowake=($irowake+1)%2; if($irowake==0){ $rowclass = "row2"; }else{ $rowclass = "row1"; } ?> <tr> <td class="<?=$rowclass ?>"> <?=$row[DATA_ID] ?></td> <td class="<?=$rowclass ?>"> <?php print(htmlspecialchars($row[DATA_EFFE_NAME])); ?></td> <td class="<?=$rowclass ?>"> <?php print(htmlspecialchars($row[DATA_RULE_BOOK])); ?></td> <td class="<?=$rowclass ?>"> <?php print(htmlspecialchars($row[DATA_RULE_PAGE])); ?></td> <td class="<?=$rowclass ?>"> <?php print(htmlspecialchars($row[DATA_SYN_NAME])); ?></td> </tr> <?php } ?> </table> </div> <?php } } } ?> </div> </body> </html>
CSS【effe_main.css】
BODY { color: #333333; font-size: 80%; background: white; line-height: 1.5; } #wrapper { margin-left: 2%; margin-right: 2%; } p.tonew { text-align: right; } p.navi { clear: both; border-top: solid 5px #CCCCFF; border-bottom: solid 5px #CCCCFF; margin-top: 20px; margin-bottom: 0px; padding: 5px; font-size: small; } p.navi a { padding-left: 20px; padding-right: 20px; } h2 { background-color: #CCCCFF; padding: 10px; margin-top: 0px; } div.column1{ width: 45%; float: left; } div.column2 { width: 45%; float: right; } table { width: 100%; } td , th{ font-size: 80%; padding: 5px; } th { font-weight: bold; font-color: #ffffff; background: #eeeeee; } td.row1 { background: #ffffff; } td.row2 { background: #eeeeee; } td.row3 { background: #FFCCFF; } h1 { font-size: medium; }
あとは
データ部分をデータベース使うようにして、あとエフェクト名からエフェクトの詳細データを表示できるようにしたいですねえ。
(前者はともかく後者は厳しい……データ入力的に)
あとはエフェクト別(あいうえお順)とか、エフェクト別(ルルブ掲載順)とか出来ると便利なのかな。
……それともそれほど出番ないかな。
そういえば
usort()について自分的に理解したことをまとめようと思っててすっかり忘れてたことに気付きました。
ていうかあれだ。そもそもデータベース使えてたらusort()いらんのですよ。クエリー発行の段階でソートも命令してるんですよ。ふうう。