Blog

[Apache] 404や403や500などエラーページをErrorDocumentでカスタマイズする

    >

プログラミングは、進む時は面白いぐらいに進むのに、詰まる時はとことん詰まる。そしてそのままフェードアウト…といったことはよく聞く話です。僕もHTMLから始めて、長いことプログラミングを続けてきましたが、どうしても自分の思い通りにいかない、実装ができない、エラーが続く、といった状況に悩まされ、うつ状態になり、もういっそプログラミングなんて辞めてしまおうか…と挫折しそうになった経験が、幾度となくあります。

プログラミングを6年続けてきて、プログラミングは自分一人で完結できるものではない、ということは痛いほど分かっています。"スタックオーバーフロー"だけではどうしようもないことも、中にはあります。 特に、新しい技術や言語に挑戦しようとする時は、難関が数多くあります。JavaとPHPは違いますし、スマホアプリが作れるからと言ってPythonができるとは限りません。多くの場合、多くの障壁に立ち塞がることでしょう。

実際、僕も多くのプログラミングをしている友人から、あらゆる相談を受けます。既存の回答や僕の知識から、最適な答えを返してあげられることもありますが、答えられないことや上手く説明できないことも多くあります。
そのような場合、僕が彼らに勧めているのが、『TechAcademy [テックアカデミー]』です。

同サービスは短期間から登録できるオンライン完結のプログラミングスクールで、他社と比較しても、そのコストパフォマンスは圧倒的です。
例えば、A社は148,000円〜のところ、同サービスは99,000円〜でコースが受講できます。( ※はじめてのプログラミングコース4週間の料金 )
また、一言に現役のプロと言っても、エンジニア歴20年以上、プログラム歴35年以上といった、まさにプロ中のプロの方たちが対応してくれるのも、『techacademy』の魅力の一つ。

国内外どこからでもチャット相談が可能で、毎日8時間、1週間あたり57時間の間、メンターが常時待機しています。
受講生限定の転職サポートで、コース受講終了後、企業やコンサルタントからスカウトが届く"TechAcademyキャリア"も、ぜひ活用したいところです。

  • オリジナルアプリをAppStoreにリリースするまで徹底サポート「iPhoneアプリコース」
  • 職業を問わず身につけたい、教養としてのプログラミングが学べる「はじめてのプログラミングコース」
  • 仮想通貨を支えるブロックチェーン技術の仕組みを学べる「ブロックチェーンコース」
  • Pythonと機械学習が学べる「Pythonコース」

『techacademy』では、上記コースをはじめとした、数多くの特化したコースが受講受付中です。プログラミングの進捗に真剣に悩んでいる方は、ぜひご活用ください。

TechAcademy [テックアカデミー]

さて、おまたせしました。

今回の記事は『[Apache] 404や403や500などエラーページをErrorDocumentでカスタマイズする』です。この記事が役に立った、と思ったらぜひ、コメントまたはTwitterやLINEでシェアしてくださいね。

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_864bcf95-a7e5-44fb-9aa6-40556d755ac0.png

本当はエラーページなのでエラーにエラーを誘発したくないしphpよりhtml使いたいところですが、やっぱ500,403,404..etcといくつものエラーコードに対応するなら、phpが良いです。
404だけ、とかなら、htmlでいいと思いますが。

  • 簡単なカスタマイズ

今回はPHPファイルを用意してそれを表示させ、エラーコードによっても出力を変えるといった凝ったことをしていますが、文字列の出力だけにするとかなら、わざわざphpもといhtmlファイルを用意せずともいいんです。

e.g. ErrorDocument 404 "{\"code\": \"404\", \"message\": \"Oops! You're on 404.\"}"

こんなふうにAPI風のjson形式エラーメッセージを表示させてもいいでしょう。

  • httpステータスコードの取得

httpステータスコードがエラーになっている場合、でもって.htaccessからapacheでリダイレクトされている場合には、$_SERVER['REDIRECT_STATUS']で取得します。以下参考。

PHP to handle HTTP Status Codes for ErrorDocument

ちなみにhttp_response_code()だとレスポンスコードは200を返します。

また、javascriptでレスポンスコードを取得することに関しては、まぁ、XMLHttpRequestとかではできるんでしょうけど、カレントのを取得するってことに関しては

This is not in any way possible, sorry.
Get current page http status from javascript – Stack Overflow

だそうです。
なので結局サーバーサイドからやるしかないってことで。

HTTP Status Code from URL in Javascript – Stack Overflow

  • ErrorDocumentのパスについて

パスはローカルサーバーの絶対パスではなく、apacheのルートパスからの相対パスになります。エックスサーバーなら、
~/fumiya.org/public_html/theErrorDoc.phpなら、ErrorDocument ~/fumiya.org/public_html/theErrorDoc.phpではなく、ErrorDocument /theErrorDoc.phpを指定するということです。

  • HTMLからの外部ファイル読み込みはできない

<!-- <link type="text/css" rel="stylesheet" href="../css/style.css" /> -->ってコメントアウトしてるので察してるかと思いますが、HTMLでのCSSやJSなどの外部ファイル読み込みはErrorDocumentリダイレクトだとできません。なので直接書きます。

  • 参考

List of HTTP status codes – Wikipedia

以下にphpと.htaccessのコードを置いておきますので参考にどうぞ。

なお、使用させていただいているエラーテンプレートはColorlib – Probably The Best WordPress Themesに権利が帰属します。以下のソースコードもそれに準拠するものとしますのでご理解ください。

僕もそうですが、フリーのプログラマの仕事内容は様々です。ソフトウェアを受注製作することもあれば、企業ホームページを作ることもあるでしょう。
どういったビジネスを展開するにせよ、事業を成功させるには、正しいマーケティングを行うことは必須事項です。

『ミツモア』は、Googleのリスティング広告やマーケティング広告管理に煩わされることなく、狙った顧客を獲得できる、マーケティングプラットフォームです。
僕のプログラマの友人がいるのですが、彼にも『ミツモア』を紹介し、彼は現在、成功したプログラマの一人です。
どうしても疎かになってしまいがちなマーケティングですが、『ミツモア』を上手く活用し、新たな新規顧客を獲得していきたいところですね。

ミツモア

コード

index.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>404 HTML Template by Colorlib</title>

    <!-- Google font -->
    <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">

    <!-- Custom stlylesheet -->
    <!-- <link type="text/css" rel="stylesheet" href="../css/style.css" /> -->
    <style media="screen">
    * {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
    }

    body {
      padding: 0;
      margin: 0;
    }

    #notfound {
      position: relative;
      height: 100vh;
    }

    #notfound .notfound {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
    }

    .notfound {
      max-width: 710px;
      width: 100%;
      text-align: center;
      padding: 0px 15px;
      line-height: 1.4;
    }

    .notfound .notfound-404 {
      height: 200px;
      line-height: 200px;
    }

    .notfound .notfound-404 h1 {
      font-family: 'Fredoka One', cursive;
      font-size: 168px;
      margin: 0px;
      color: #ff508e;
      text-transform: uppercase;
    }

    .notfound h2 {
      font-family: 'Raleway', sans-serif;
      font-size: 22px;
      font-weight: 400;
      text-transform: uppercase;
      color: #222;
      margin: 0;
    }

    .notfound-search {
      position: relative;
      padding-right: 123px;
      max-width: 420px;
      width: 100%;
      margin: 30px auto 22px;
    }

    .notfound-search input {
      font-family: 'Raleway', sans-serif;
      width: 100%;
      height: 40px;
      padding: 3px 15px;
      color: #222;
      font-size: 18px;
      background: #f8fafb;
      border: 1px solid rgba(34, 34, 34, 0.2);
      border-radius: 3px;
    }

    .notfound-search button {
      font-family: 'Raleway', sans-serif;
      position: absolute;
      right: 0px;
      top: 0px;
      width: 120px;
      height: 40px;
      text-align: center;
      border: none;
      background: #ff508e;
      cursor: pointer;
      padding: 0;
      color: #fff;
      font-weight: 700;
      font-size: 18px;
      border-radius: 3px;
    }

    .notfound a {
      font-family: 'Raleway', sans-serif;
      display: inline-block;
      font-weight: 700;
      border-radius: 15px;
      text-decoration: none;
      color: #39b1cb;
    }

    .notfound a>.arrow {
      position: relative;
      top: -2px;
      border: solid #39b1cb;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 3px;
      -webkit-transform: rotate(135deg);
          -ms-transform: rotate(135deg);
              transform: rotate(135deg);
    }

    @media only screen and (max-width: 767px) {
      .notfound .notfound-404 {
        height: 122px;
        line-height: 122px;
      }
      .notfound .notfound-404 h1 {
        font-size: 122px;
      }
    }

    </style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

</head>

<body>

    <div id="notfound">
        <div class="notfound">
            <div class="notfound-404">
                <?php
                if (isset($_SERVER['REDIRECT_STATUS']) && ($_SERVER['REDIRECT_STATUS'] != 200)) $sc = $_SERVER['REDIRECT_STATUS'];
                elseif (isset($_SERVER['REDIRECT_REDIRECT_STATUS']) && ($_SERVER['REDIRECT_REDIRECT_STATUS'] != 200)) $sc = $_SERVER['REDIRECT_REDIRECT_STATUS'];
                ?>
                <h1><?php echo $sc ; ?></h1>
            </div>
            <h2><?php
            if ($sc == 404){
                echo "Not Found" ;
            } elseif ($sc == 403){
                 echo "Forbidden" ;
            }    elseif ($sc == 400){
                 echo "Bad Request" ;
            } elseif ($sc == 405){
                 echo "Method Not Allowed" ;
            } elseif ($sc == 407){
                 echo "Proxy Authentication Required " ;
            } elseif ($sc == 401){
                 echo "Unauthorized " ;
            } elseif ($sc == 429){
                 echo "Too Many Requests" ;
            } elseif ($sc == 500){
                 echo "Internal Server Error" ;
            } elseif ($sc == 502){
                 echo "Bad Gateway" ;
            } elseif ($sc == 503){
                 echo "Service Unavailable" ;
            }
            ?></h2>
            <!-- <form class="notfound-search">
                <input type="text" placeholder="Search...">
                <button type="button">Search</button>
            </form> -->
            <form method="get" class="notfound-search" action="https://yuis-programming.com/">
                <input type="text" name="s" placeholder="Search">
                <button type="submit">Search</button>
            </form>
            <!-- <form method="get" class="searchform" id="searchform" action="https://yuis-programming.com/">
    <input type="text" class="field" name="s" id="s" placeholder="Search">
    </form> -->
            <a href="https://114514.click/homepage"><span class="arrow"></span>Return To Homepage</a>
            <img class="errorimage" src="https://yuis.xsrv.jp/data/cryingAnimeGirl.gif" alt="">
        </div>
    </div>

</body><!-- This templates was made by Colorlib (https://colorlib.com) -->

<style media="screen">
    .errorimage {
        opacity: 0.7;
    margin-top: 1em;
    }
</style>
</html>

.htaccess

ErrorDocument 404 /ErrorDocument/index.php
ErrorDocument 403 /ErrorDocument/index.php
ErrorDocument 400 /ErrorDocument/index.php
ErrorDocument 405 /ErrorDocument/index.php
ErrorDocument 407 /ErrorDocument/index.php
ErrorDocument 401 /ErrorDocument/index.php
ErrorDocument 429 /ErrorDocument/index.php
ErrorDocument 500 /ErrorDocument/index.php
ErrorDocument 502 /ErrorDocument/index.php
ErrorDocument 503 /ErrorDocument/index.php
エックスサーバー

2020年の東京五輪を間近に控え、来日外国人の数は年々増加しています。ただでさえ、あらゆる職種で"英語力"が求められる時代ですが、その中でも特筆してプログラマ、システムエンジニアには、英語力は必須であると言われています。

僕は現在、英検1級に着手し、英語力が一定水準に達した今でも、日々新しい表現や単語を学んでいます。しかし僕も最初から英語が出来たわけではありません。中学生の頃の英語の成績は、学年でほぼビリでしたし、そもそも英語なんて必要ない（若者の常套句ですね）、今後一生やることはない、と思っていたくらいです。

確かに、英語を使わずとも年収600万以上の仕事に就くことは出来ますし、生活する上で困ることもないでしょう。しかしそれは、英語を知っている世界を知らないからでしかありません。
英語に興味関心がない多くの方は、こういうことを言うと反発するのですが、プログラミング経験者の皆さんなら、そうでもないのではないでしょうか。

プログラミングをやっていて、英語が出来たらなぁと思ったこと、あるのではないでしょうか。僕が英語を始めた動機は他にありますが、一度、二度挫折した英語学習を再開する動機となったのは、紛れもなく、"プログラミング"でした。プログラミングを続けるには、英語の壁を超える必要がある、と幾度となく痛感しました。

  • エラー文章をGoogle検索せずとも理解できる
  • ソースコードに日本語が含まれる場合に起こる特有のエラーを回避できる
  • スタックオーバーフローの回答が理解できる
  • スタックオーバーフローに質問を投稿し、良質で的を射た回答を得ることができる
  • 翻訳されていないドキュメントやリファレンスを理解できる
  • 適切なメソッド名やファイル名をスムーズに定義できる
  • 需要が高く報酬の良い海外で仕事が探せる、または海外のクライアントを相手にできる

上記をはじめとした、プログラミングにおいて英語ができることのメリットは数多く存在します。
英語学習の必要性に疑問を持っていた方も、上記の一覧を見て、何か思うことがあるかもしれません。しかし、英語を学習する意義を見つけたあと、間違っていけないのが、その学習方法です。

英語学習方法には効率的、非効率的、意味がないなど、様々な方法が乱立しています。中には悪徳なものもあり、注意が必要です。
英語学習に回り道やチートはありませんが、効率的でない学習方法を避けて学習を進めていくことは、1年後、5年後の自分の英語力に取り返しのつかない差が開いてしまうことを未然に防ぎます。

そして、僕が一番信頼を置いているのが、『スタディサプリ ENGLISH』です。『スタディサプリ ENGLISH』はこれまで様々な英語に関する相談をしてきた友人への、最も勧める頻度の高かったサービスです。

留学が間近で…、ワーキングホリデーに行ってみたくて…、やっぱり英語をまた始めようと思って…、社内公用語対策で…、英会話教室に通おうと思ってて…などなど、僕への相談は様々ですが、これら全ての方に、『スタディサプリ ENGLISH』は自信を持っておすすめできます。

スタディサプリ ENGLISH

さて、最後までお読み頂きありがとうございました。この記事が役に立った、と思ったらぜひ、コメントまたはTwitterやLINEでシェアしてくださいね。

僕は個人事業として、プログラミング6年、1日14時間パソコン業務をこなしてきました。現在もウェブサイト開発やサポート、ソフトウェア制作、レビューなどライティングをはじめとしたお仕事を承っております。気になったらぜひ、メールにてご連絡ください。いつでもお待ちしております。

現在承っているお仕事の一覧
お問い合わせ

小山はるや(こやまはるや) 東京生まれ。プログラマー。現役大学生。ウェブサイト制作の傍らメディア運営を行い、2017年に開設されたITブログ『yuipro』(https://yuis-programming.com)は2019年に月間アクセス数1万を超える。 これまで80を超えるウェブサイトを制作、小山氏自ら運営するウェブサイトは8つに上り、うち2つが月当たり数万のアクティブビジターを獲得している。

Close Menu