【18日目】存在しないページを404に飛ばしてみた
Posted: Last Update:
サイトを作成し始めて18日目。昨日は仮ながらも左側のナビゲーションバーの作成が完了できて達成感がありました。今日は記事を呼び起こす部分を作りたいと思います。
ロードマップ
全体の進み具合をロードマップで見ると、こんな感じです。もう少しでサイトの公開にこぎつけられます。
- 準備 - サイトの全体像を決める
- 使用するプログラミング言語を決めて環境を整える
- サイトの基本構造を作って公開する
- 大枠の作成
- ヘッダの作成
- フッタの作成
- メイン部分の構成を作成
- リンクを開いた時の動きを作成
- ナビゲーションバーの作成
- メインコンテンツの作成 ← 今ここ
- 関連情報エリアの作成
- 公開
- 収益化に最適なサイトにアップグレードする
- GoogleアドセンスとAmazonアソシエイトの申し込みをする
- ローカルで簡単に入力ができるようにフォームを作る
- フォローアップ - より収益化に向いたサイト構造に変更する
存在しないページに関する問題を解決していなかった
早速メインページに挑戦、と言いたいところですが、その前に設定しておかなければいけないことを思い出しました。.htaccessを弄っていた時の課題として残っていた「2. 存在しないファイル名に接続してもページが表示されてしまう。エラーページに飛びたい」。すっかり忘れていました。この設定はサイトを運用していくうえでとっても大事です。万が一リンクに間違いがあったときに「なんだよ、このページ内容がないじゃん」、と思われるよりも「ああ、リンク間違ってたんだな」と思われるほうがずっとまし。幸いにも404エラー(ページが存在しません)ページはテストのために途中まで準備してあるので、存在しないページが404に飛ぶようにだけしたいと思います。
PHPでの404リダイレクトの仕方を検索してみました。どうやらindex.php内のPHPで404ページを読み込ませるのがいいらしい。「リダイレクト」ではなく「読み込ませる」のが正しいとか。理屈は分かった。実装できるかが問題だ。
PHPでの404読み込みはファイルの一番先頭に書く
index.phpをいじらなくてはならないので、テスト用にサイトの複製をつくってテスト用のサーバ(ホスト)で開けるようにしました。まず書いてみないと始まらないのですが、どこに書くのかすらわからない…。
またまた検索のお世話になって、PHPのheader部分に書くといいという情報を得ました。さらに、headerに関する情報を検索。PHPの公式サイトに「何を置いても一番先に持って来い」と書かれていたので、index.phpの一番上に書き出してみることにします。コードはこんな感じ。「$category」と「$filenum」はURLから取得している値です。if文ファイルが存在するか確認して、存在しない場合には404に飛ばしています。
<?php $mypath = dirname(__FILE__); ?>
<?php $path1 = $_SERVER["REQUEST_URI"] ?>
<?php if(isset($_GET['category'])) { $category = $_GET['category']; } ?>
<?php if(isset($_GET['filenum'])) { $filenum = $_GET['filenum']; } ?>
<?php
$filename = "$mypath/$category/$filenum.txt";
if (file_exists($filename)) {
}
else{
header("HTTP/1.0 404 Not Found");
http_response_code(404);
include_once("$mypath/404error.php");
exit;
}
?>
テストのためにでたらめなURLを打ち込むと、無事に404に飛んでくれました。
index.phpにもエラーが返ってしまった…
できた!と喜んでいましたが、index.phpに接続するとエラーが…。Index.phpに接続した際には「&category」や「$filenum」が存在しないのでPHPのエラーが発生してしまいます。どう回避したものか…。
どうせ「if」を使っているので、とことん場合分けしてしまえばいいのかな。独自ドメイン/$category/$filenumに当てはまらない場合を考えると、正規のリンクだとindex.phpが空欄しか思いつきません。でも、どういうURL間違いがあるか分からない。URLの打ち間違いとかあり得るし…。というわけで、正誤判定の順番を考えて書き出してみました。
- index.phpあるいは空欄 → index.phpをそのまま表示
- $category/$filenumの値をPHPが認識できない → 404エラー
- $category/$filenumの値は認識できるが、ファイルが存在しない → 404エラー
- $category/$filenumの値を認識でき、ファイルも存在する → ページを表示
3と4は同時に判定できるので、条件は3つです。うわぁ、3つも条件を書くのか。…頑張ってみます。
if分でindex.phpのエラーを回避した
頭をひねってひねって、$categoryや$filenumを呼び出すときにエラーが発生しないようにすることも考慮し、ifを入れ子にしてみました。もっと美しい書き方がありそうだけど、思いつきません。
<?php $mypath = dirname(__FILE__); ?>
<?php $path1 = $_SERVER["REQUEST_URI"] ?>
<?php if(isset($_GET['category'])) { $category = $_GET['category']; } ?>
<?php if(isset($_GET['filenum'])) { $filenum = $_GET['filenum']; } ?>
<?php
if ($path1 == "" || $path1 == "/index.php"){
}
elseif ( isset($category)==false || isset($filenum)==false ) {
header("HTTP/1.0 404 Not Found");
http_response_code(404);
include_once("$mypath/404error.php");
exit;
}
else{
$filename = "$mypath/$category/$filenum.txt";
if (file_exists($filename)) {
}
else{
header("HTTP/1.0 404 Not Found");
http_response_code(404);
include_once("$mypath/404error.php");
exit;
}
}
?>
いくつかURLを入れてテストしてみるとうまく動いています。あまり美しくないけれど、今日はこれで満足することにします。書いたコードをそのまま本番テスト用環境に移植してきました。ここまででかなり時間を使ってしまいました。
メインコンテンツの形を整えるプランを練る
ここまでとても時間を使ってしまったので、時間のリミットを気になりますが、今日のメインイベントであるメインコンテンツの作成に取り掛かりたいと思います。まずは計画を立てましょうか。
- ブログが表示された時のページの見栄えを整える
- index.phpが開かれた時の基準となるページを作る(サイト説明+記事一覧)
- 1と2を切り替えかえられるようにする
「1.ブログが表示された時のページの見栄えを整える」からさっそく作り始めたいと思います。いくつか欲しいものがあるので、これも計画を立てて挑みます。
- 掲題を目立たせつつもシンプルに読みやすくする
- 投稿日と最終更新日を薄い字にして「読みたかったらちゃんと見えるけれど、主張しない」デザインにする
- 箇条書き部分の装飾を作る
- PHPやHTMLのコードを書いている部分をきちんと表示できるようにする
- 掲題をページのタイトルとして反映できるようにする
ブログの内容をメインコンテンツに表示する
昨日(一昨日?)メインコンテンツを呼び出すために作ったtext4.txtを流用することにしました。text4.txtには、indexとblog記事の切り替えがあって、さらに内容も簡単に読み込んでいます。これに味付けをしていくことにしました。現在は下記のようにブログの内容を読み出しています。
require("$mypath/$category/$filenum.txt");
echo "<h1>",$articletitle."</h1>";
echo "投稿日:",$articledate,"</br>";
echo "最終更新:",$articleeditdate,"</br>";
echo $articlebody;
?>
echoで呼び出している部分の上から順番に、掲題、投稿日、最終更新日、本文です。PHPに入れ込んでいくのは大変なので、HTMLの中にPHPを入れ込む形に変えて見たいと思います。とりあえずこんな感じです。
<h2><?php echo $articletitle;?></h2>
<p>
投稿日: <time <?php echo date(strtotime($articledate));?>><?php echo date("Y年m月d日", strtotime($articledate));?></time></br>
最終更新日: <time <?php $articlemodified = filemtime("$mypath/$category/$filenum.txt"); echo date($articlemodified);?>><?php echo date("Y年m月d日", $articlemodified);?></time>
</p>
<?php echo $articlebody;?>
どう書くか検索している間に、PHPでファイルの更新日時を拾えることを発見したのでさっそく使っています。PHPのfilemtimeというものです。とっても便利!いちいちファイル更新日を手で打ちこまなくていいなんて、なんてすばらしい。
メインコンテンツに装飾をつける
「filemtime」という嬉しい発見もあったし、無事にブログの内容も引っ張ってくることができたので、装飾もつけてみることにしました。スタイルシートを使って、まずは掲題から設定して見ます。h2に対する装飾です。
text-align: center;
font-size: 1.5em;
font-weight:bold;/* 文字を太くする */
margin: 0em 0em 0em 0em;/* マージンの変更 上 左 下 右*/
padding: 1em 0em 0.5em 0em;/* マージンの変更 上 左 下 右*/
background-color: E6FFE9#;
font-family: 'メイリオ',Meiryo;
}
次に投稿日と更新日時を設定しました。これは更新日を囲っているpの装飾。
text-align: right;
font-size: 0.85em;
margin: 0em 0em 0em 0em;/* マージンの変更 上 左 下 右*/
padding: 0em 0em 0em 0em;/* マージンの変更 上 左 下 右*/
color: grey;
}
メインコンテンツも少し読みやすく、行間を広めにとってみました。後で$articlebodyをdivで囲って適用してみます。
line-height: 1.7em;
}
頑張ってもセンスが追いつかない…
表示して見ると、ナビゲーションバーとの隙間が小さくて読みにくい…かな?ナビゲーションバーのパディングを少し広めにとって、隙間を大きくしてみたりしているうちに今日も時間が来てしまいました。今日までの仕上がりはこんな感じです。
なんだか読みづらい…。そして「素人が作りました」感が満載…。美的センスが皆無なので何が悪いのか分からない!
困った!
…明日またいろいろと挑戦してみたいと思います。