kamenokoki.com

【26日目】404エラーがやっと回避できた!亀も出現した!今日は記念日だ!

Posted:  Last Update:

サイトを作成し始めて26日目です。昨日はサイトを公開したのに、どのページを開いても404エラーしか表示されずに落ち込みました。

ロードマップ

ここまでの進捗をロードマップで確認すると、こんな感じです。

  • 準備 - サイトの全体像を決める
  • 使用するプログラミング言語を決めて環境を整える
  • サイトの基本構造を作って公開する
    • 大枠の作成
    • ヘッダの作成
    • フッタの作成
    • メイン部分の構成を作成
    • リンクを開いた時の動きを作成
    • ナビゲーションバーの作成
    • メインコンテンツの作成
    • 公開 ← 今ここ
  • 収益化に最適なサイトにアップグレードする
  • GoogleアドセンスとAmazonアソシエイトの申し込みをする
  • ローカルで簡単に入力ができるようにフォームを作る
  • フォローアップ - より収益化に向いたサイト構造に変更する

昨日までのサイトの状態まとめ

昨日は、ローカルサーバーではうまく動いていたサイトをレンタルサーバーにアップロードました。結果、index.php以外のページは全て404エラーに飛ぶと言う恐ろしい自体に…。「https://kamenokoki.com」に接続してもindex.phpに接続できない。あれだけ苦労して作ったショートパス「https://kamenokoki.com/blog/日付」も全く機能しない…。そんな中でも一応分かったことがあったので、昨日の最後にメモをしておきました。なんの助けになるのかも分からないけど…。

  1. とりあえず.htaccessは機能している。思ったように動いていないだけ
  2. 404が表示されている、日記のリンクも作成されている、ことからファイルには問題がない
  3. httpsの設定をなくしてhttpに接続すると、index.phpは表示される
  4. httpでもブログべージは開けない
  5. リンクの画像(png)は表示されるのに、同じ構造で呼び出しているアイコンの亀(jpeg)は相変わらず表示されない

index.phpしか表示できないページをそのまま放置していいのかと思いつつも、昨日は全てが面倒くさくなってPCを閉じました。まぁ、誰も見てないよね!

もうひとつ学んだこと。「ロリポップのFTPサーバーが私にはあまり向いていない」。昨日は24日の日記を書いて、サイトの見栄えをよくするために9月6日7日の日記も更新して、いくつか画像も保存しました。ところが、ロリポップのFTPサーバーだとフォルダごと、ファイルごとに上げなければいけません。一つずつポチポチとクリックを繰り返してアップロードしました…。まとめて更新したいときは手間がかかります。その点、FTPクライアントソフトならミラーリングアップロードで更新が簡単です。今日はFTPクライアントソフトも入れたいです。

まずはFTPクライアントソフトを導入

FTPクライアントソフトは20年前にもお世話になったFFFTPを使いたいと思います。安心感というより、使い方が分かるから。そして、先日一度ダウンロードしたので手順もおぼろげながら覚えています。早速ダウンロードして、解凍して、設定はロリポップのマニュアルがとっても親切であっという間にできました。ダウンロードしている間にちょこちょこ検索していたら、特定のファイルはミラーリングから除外できることも発見。オプションからミラーリングを開いて、.htaccessを追加しておきました。おそらくローカルと本番で設定が変わってくると思う。
2020.09.25 FFFTPのミラーリングで.htacessを上書きしないようにする

さらに、かつてはなかった機能があることも発見した!昔はミラーリングをするとすべてのファイルが置き換えられていたのですが、今は更新されたファイルだけ追加or上書きしてくれるらしいです。しかも、上書きしたくないファイルをアップロード前に選べるらしい。便利だなぁ。今日使うのが楽しみです。

できることから手をつけてみた 1.wwwの設定

FFFTPの設定も無事終ったところで、全てのページに404が表示される不具合に挑みます。まずは「https://kamenokoki.com」に接続したらindex.phpが表示されるようにしたいのですが、何から手をつけていいのか分かりません!!!とりあえず原因を絞り込むために、設定を小分けに分割して検証したいと思います。.htaccessから取り掛かろう。

サイトは「https://kamenokoki.com」の他に、「https://www.kamenokoki.com」というものが自動的にできていました。サブドメインと言うらしい。ロリポップの設定で、両方のドメインに「kamenokoki」というフォルダを適用しています。今回はこれをやめて「https://www.kamenokoki.com」に「www」というフォルダを適用させ、「https://kamenokoki.com」に転送する.htaccessだけ置きたいと思います。

.htaccessの中身はこれだけ。
## 全てwwwなしにリライトする
RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_HOST} ^www\.kamenokoki\.com$
RewriteRule ^(.*)$ https://kamenokoki.com%{REQUEST_URI} [R=301,L]

逆に、「kamenokoki」の.htaccessからは上記のコードを抜いて、エラーの原因(可能性)を一つ少なくしました。「www」は今後一切触らなくて良くなるので一石二鳥です。

実際に動かしてみると、「https://www.kamenokoki.com」は無事「https://kamenokoki.com」に転送されるようになりました。相変わらず404エラーになるけどね!

できることから手をつけてみた 2.httpsの設定

次に「http://kamenokoki.com」にアクセスしたら「https://kamenokoki.com」に接続する設定を省いてみたいと思います。これは別の所には置けないので、.htaccessからバッサリ削除しました。

動かすと、あれ?「https」に接続してる…?

上書きできてなかったのかも。再度.htaccessを上書きして、chromeのキャッシュを全て削除し、サイトに接続。…httpsにアクセスしてますね。ロリポップのマニュアルを確認すると、こちらで設定しなくても基本的には「https」に接続するみたい。頭を悩ませたのに、必要なかったんですね。

でも、相変わらず404エラーのままです。

ロリポップに問い合わせてみよう…と思ったら

もう、自力で解決できない。こんなにやっているのに表示されないのはロリポップのサーバーが悪いんだ!とやけになって、ロリポップの問い合わせ窓口にメールを書き始めました。「index.phpが表示されません。デフォルトページに含まれてるのに、なんで表示されないんですか!マニュアルには表示されるって書いてあるのにっ!!」いや、実際はもっときちんと大人な言葉遣いで丁寧に教えを乞うているのですが。感じが悪い文章になっていないことを確認して、送信を押そうとしたところで、…

index.phpに404エラーの設定してる!!!ことを思い出した。そして検証してない!

問い合わせ窓口にぽちっと送信しなくてよかった。ただでさえ一生懸命働いている人の仕事を増やすところだった。あわててindex.phpの404エラー設定を見に行きました。今の設定はこんな感じです。$categoryと$filenameの値にマッチするブログがなかったら、404エラーを返すようになっています。(少なくともそのつもり)

<?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;
 }
}

?>

原因はindex.phpそのものにあった

index.phpの設定を全く見ていなかったので、上記のコードを自分なりに分析。一行目の「if ($path1 == ""」で「https://kamenokoki.com」を404から除外しているつもりが、間違っているのかもしれない。なんとなくあたりをつけて検索すると、その通りでした。「$path1」には「$_SERVER["REQUEST_URI"]」が入っているのですが、「$_SERVER["REQUEST_URI"]」は必ず「/」で始まるそうです。「https://kamenokoki.com」は空欄ではなく、「/」なんですね。

なんとなくで検索したのに、原因を探り当てた私、天才!

満足感とともに、「if ($path1 == ""」を「if ($path1 == "/"」に書き換え、ローカルで走らせてみるとうまくいきました。本番に移植して「https://kamenokoki.com」を開くと、白い。

なんで画面が白いの!?

再度検索。白い画面が表示されるときは、PHPが動いていない可能性が高いことが分かりました。もしかして、まだ「if ($path1 == ""」を使っている所があったかも。検索すると、title部分にも記述がありました。書き換えて、再度検証。うまく動いたのでローカルから本番環境に移植、「https://kamenokoki.com」を開く…。

うまくいった!嬉しい!嬉しい!
2020.09.25 URLにindex.phpを入れなくてもトップページが表示できた

ブログの表示に挑む

「https://kamenokoki.com」に接続したらindex.phpが表示できるようになりましたが、ブログページの「https://kamenokoki.com/blog/日付」は相変わらず404ページに飛びます。実際のURLとページの表示は画像の通りです。
2020.09.25 ブログページは相変わらず404エラー

ローカルでは動いている設定がなぜレンタルサーバーでは動かないのか、意味が分からない…。なので、どこから手をつけていいのかも分からない…。時間がかかりそうですが、大丈夫!今日は4時間も作業時間を確保しています(こまでで1時間使っちゃってるけど)。まずは可能性をいろいろ考えてみました。

  1. そもそも.htaccessでRewriteが使えない
  2. .htaccessのrewriteの記述が間違っている
  3. .htaccessでtxtファイルを見えなくする設定が悪さをしている
  4. index.phpに書いた404の設定が悪さをしている
  5. ファイルを呼び出すときのパスが間違っている

やはり.htaccessが悪さをしている気がする

可能性として上げた項目を一つずつ検証してみました。

  1. そもそも.htaccessでRewriteが使えない
    ←wwwが転送できていることから、Rewriteは有効。ロリポップのスペックにも大丈夫と書いてある
  2. .htaccessのrewriteの記述が間違っている
    ←検証の仕方が分からないので後回し
  3. .htaccessでtxtファイルを見えなくする設定が悪さをしている
    ←設定を外すとなせがtxtなし(拡張子なしのURL)でもテキストファイルの内容が表示された。よくわからないので後でじっくりやる
  4. index.phpに書いた404の設定が悪さをしている
    ←404の設定を一度全部削除してみたが、結果は変わらなかったので原因ではない
  5. ファイルを呼び出すときのパスが間違っている
    ←冷静に考えたら、これはPHPを使っているので404ではなく、白いページになるはず

結局.htaccessが悪い気がします。そして相変わらず右も左も分からない。ただ、気になっているのが、3番です。たとえば「https://kamenokoki.com/blog/20200901」にアクセスすると、txtを隠していない状態では「20200901.txt」を表示してしまうんですよね。ファイルを隠すと「https://kamenokoki.com/blog/20200901」は404エラー(ページが存在しません)を返します。ちなみに「https://kamenokoki.com/blog/20200901.txt」と拡張子をつけると403エラー(アクセス権限がありません)が返ってきます。404と403の違いはあれども、もしかしたら、ファイルが存在しているのに無理矢理パーマリンクを設定していて、ぶつかりあっている状態になっているのかしら?

同じパスのファイルが存在しない状態を作ってみた

「ファイルバス(ただし拡張子なし)と同じパーマリンクを設定しているせいで、設定がぶつかってしまっている」という可能性を検証してみることにしました。今はフォルダにも、ファイルパスにも「blog」という名前を使っていますが、これを変えてみたらうまく動くかな?まずはローカルで動作テストしてみましょう。index.phpに設定をまとめてあるので、弄る場所は分かっている。取り急ぎ、パスはそのままで、フォルダ名を「article」に変えました。そして、index.php内で、$categoryが「blog」の場合には「article」と読み直すようにします。

<?php
if(isset($_GET['category'])) {
 $category = $_GET['category'];
 if($category=="blog"){
  $category ="article";
 }
}
?>

「最新の日記」のリンクとかには「blog」フォルダを$categoryを使って指定しているので、一部表示ができなくなりましたが、一応動いています。試験のために、再びページが全く表示できなくなるリスクを覚悟をしつつ、本番環境に移植してみました。

…表示された!これが原因だったのか!

学び「同じパスがあるとRewriteは動かない」

一つ賢くなりました。「同じファイルパスがあると.htaccessのRewriteは正常に動かない、404を返すようになる」。ローカルで問題が起きなかったのは、拡張子を厳密に見ているおかげでしょう。ロリポップのレンタルサーバーでは拡張子がなくてもファイル名として認識しているみたいですね。今後パスを作る際には気をつけたいと思います。さて、一度は「article」と分かりやすい名前に変えましたが、「article」は将来別の用途に使いたい。「blogs」というフォルダ名を利用することにしました。ローカルでまずは作業。先ほどのコードの「article」の部分を「blogs」に変え、フォルダ名も「blogs」に変更。さらに、「過去の一覧」に「blog」というフォルダを指定している場所があるので、ここも「blogs」に変更。ローカルで試験して、問題ないことが確認できたので、本番環境にアップロードします。

FFFTPで一括で上げました。と言ってもファイル3枚きりなのですが(笑)。アップロードがとっても早いです!

サイトに接続するとローカルと同じように表示されています!嬉しい!嬉しいっっっっ!タイトルが表示されているのが分かります。
2020.09.25 ブログが表示された

嬉しすぎて、目頭が熱くなりました。

亀を表示したいと頑張っていたらもっとおおごとになってた

初めてからここまでで3時間経過してます。今日は4時間取っているとは言え、ここまで時間がかかるとくたびれてきました。でもね、亀さんを表示したいんですよ。上の方の画像を見ていただければ分かりますが、昨日からアイコンの亀が表示されていないんです。呼び出し方が悪いのが、.jpegなのが悪いのが…。簡単な方から行きましょう。jpegをpngに変えて保存し、表示が可能か見てみます。

表示されません…。

下の方にも画像があって同じように呼び出しているのに、どうして呼び出せないんでしょうか。もしかして、header.phpと同じ階層にあるのがなにか影響をしていたりして。ちょっと保存場所を変えてみましょうか。保存場所を変えても相変わらず表示されない…。ちなみにローカルではどんな方法でもちゃんと表示されています。

と、ここで大事故を起こしていたことを発見。「次の記事」「前の記事」のリンクに変数$categoryを入れていたせいで、リンクが「/blogs/20200905」などになっていた。リンクは「/blog/20200905」なので、存在しないページへのリンクになってしまっています。どうしよう…。付け焼刃ですが、今日は「$categoryを」ベタ打ちの「blog」に置き換えてエラー回避しようと思います。また後日ゆっくり考えよう。

初歩的なミスを犯していた

今日は、まず、亀!亀大事!

いろいろと検索して、もしかしたらファイルが破損しているのではないかと見当をつけてみました。一度jpegファイルを開いて、編集しているふりをして、PNGで保存してみます。…駄目でした。もしかして、spanの中に入れているのが入れないのかしら?…divに要素を変えてみても駄目でした。どうすればいいのっ!

よーく、よーーーーく、HTMLを見ました。穴が開くんじゃないかと言うほど見ました。

…大文字が小文字になってる…。超初歩的なミスだった!「kame48.PNG」になっていたのを、「Kame48.PNG」に直すと、ちゃんと表示されました。
2020.09.25 無事に亀が現れた!

お帰り、私の亀!

収穫の多い日だったように思う

大文字と小文字を打ち間違えるという初歩的なミスでほぼ一時間費やしてしまいました…。でも、でもね、サイトは無事に公開できたし、亀は表示できたし、いい日だったと思う。時間なりの成果は得られた気がする!今日はサイト記念日と行っても過言ではない!

今日は、ノルマになっている「サイトを綺麗に表示させるための日記の更新」9月8日および9日分をこなしてから終了します。明日はロードマップを一つ進めて「収益化に最適なサイトにアップグレードする」に行きます。まずは計画を立てるところからかな。では、また明日。

記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

広告