初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ
Web基礎知識

.htaccessとは?できることや書き方を、実践形式で覚えよう!

.htaccess .htaccessって何?一体何ができるの?

.htaccessとはウェブサーバー(Apache)の基本的な動作を、ディレクトリ単位で制御するためのファイルです。

サーバーの制御…?はて…?

といった感じですが、主に以下のようなことができます。

.htaccessでできること
  • URL正規化
    ウェブサイトのURLを、wwwありかなしで統一できる
  • BASIC認証
    一般公開したくないページにIDとパスワードを設定できる
  • IP制限
    特定のIPのアクセスを拒否したり、許可したりできる
  • ファイル一覧の表示キャンセル
    index.htmlがない時などに表示されるファイル一覧画面を回避できる

さて、それぞれのやり方を紹介していきたいところですが、まずは.htaccessの基本的な使い方や書き方、ルール、注意点などを知っておく必要があります。

.htaccess使い方を間違えると顔面蒼白案件です。

なので今回の記事では、.htaccessを使いこなすための事前準備をしていきましょう。
後半では実際に.htaccessを試す構成になっています!

コーディングだけをする方には不要な知識ですが、今後ご自身ウェブサイト運営や、お客様のウェブサイト管理・メンテナンスをしていく上で欠かせない知識です!

.htaccessとは?もう少し詳しく見ていこう!

通常ウェブサーバー(Apache)の制御は、httpd.confというファイルによって管理されています。

多くの場合httpd.confは、サーバー管理者(レンタルサーバー会社)しか操作することができません。

しかし一部の設定だけ.htaccessを用いることによって、サーバーの設定をディレクトリ単位で変更することができるようになります。

少しややこしいですね!すみません!

サーバー会社がウェブサーバー全体の基本的な設定を行っているのですが、.htaccessを使うことで、一部の設定を変更することができます。

.htaccessは使えない場合がある!

残念ながら.htaccessは、誰もが分け隔てなく平等に使える素敵ファイルではありません。

まずは、ウェブサーバーでも、ApacheというOSに限られています。
Nginxでは使うことができません。

そしてApacheだった場合でも、サーバー会社が.htaccessの使用を許可していない場合があります。

.htaccessがご自身のウェブサイトで使えるかどうかは、契約しているサーバーの会社によって異なります。

使用が許可されているサーバーでも、使用範囲に制限がかかっている場合もあります

.htaccessを使用する前に、必ず契約しているサーバー会社のウェブサイトから確認するようにしましょう。

サーバー会社で確認すること
  • .htaccessが使えるかどうか
  • 使用制限や記述箇所、パーミッションなど、各サーバー会社が指示している内容

この条件をクリアし把握することで、ようやく.htaccessの入り口をくぐることができます。

.htaccessの所在と有効範囲について

あとほんの少しだけ!座学にお付き合いください。

.htaccessの記述は、.htaccessが入っているディレクトリと、それ以降の階層全て反映されます。

そして.htaccessはディレクトリ単位で管理ができるため、各ディレクトリにつき1つ作成することが可能です。そんなことしませんが…。

また記述にダブりが生じた場合は、下位のディレクトリにある処理が優先されます。

またワードプレスをインストールすると、.htaccessが自動的に生成されます。

さて問題、一体どのディレクトリに生成されるでしょうか!

正解です!

ワードプレス関連のファイルに反映させたい処理が入っているので、ワードプレスをインストールしたディレクトリに入っています。

さて、有効範囲についても覚えたということで、実際に試してみましょう!

.htaccessの書き方!実際に試して見よう!

それでは.htaccessの書き方を、実際にやりながら覚えてきましょう!

.htaccessの流れ
  1. 反映させたいディレクトリに.htaccessがないか確認する
    既にあるのに上書きしてしまうと、悲しいことになる可能姓があるので事前に必ず確認しておきます
  2. なければファイルを作成、あればFTPからローカルに落とす
    あった場合、変更用とバックアップ用の2つが欲しいのでファイルを複製しておきます
  3. コードを記述する
  4. サーバーにアップする
  5. 正常に動作しているか確認する

実際に運用しているサーバーで試すことも可能ですが、ローカルサーバーなどのテスト環境で実施することを強く推奨します。万が一トラブルが発生した際は自己責任でお願いします。

.htaccessのファイルを作ろう!

.htaccessのファイル名はそのまんま「.htaccess」です。

まずはMAMPなどのローカルサーバーに、適当に1つテスト用のディレクトリを作成しましょう。

コードエディターを開き、作成したディレクトリ内に「.htaccess」というファイルを作成します。

ファイルを作ったのに出てこない!

あれ、ファイル作成したのに…ない!?

実は.htaccessはとっても大切なファイルなので、誰もが適当に触れないように隠しファイルになっています。

macの場合は、「command + shift + .(ドット)」で隠しファイルが見られるようになります。

windowsの場合は、フォルダの「表示」タブにある「隠しファイル」にチェックを入れることで見られるようになるらしいです。
windowsのパソコンを持っていないので画像の準備はおろか試すこともできていません。ごめんなさい。

これで隠しファイルをクリアしました。

.htaccessにいざ記述!

今回はお試しということで、あらかじめサンプルコードを用意しておきました。
HTML/CSSでもない、JavaScriptでもない、PHPでもない謎言語です。

処理内容としては、作成したディレクトリをブラウザで開くと、僕のウェブサイトにリダイレクトするようになっています。

以下を.htaccessにコピペしましょう!

5行目のコピーもお忘れなく!

# ちなみにシャープでコメントアウトです
RewriteEngine on
RewriteBase /
RewriteRule ^$ https://efilamola.com/ [R=301,L]

なぜ何も書いていない5行目も…?

これは.htaccessのお約束です。
ということで、せっかくなので.htaccessのお約束を見ていきましょう。

.htaccessのお約束ごと

記述の最後には改行を入れる

記述を終えたら、最終行に必ず改行を入れます。

改行は1行でOKなのですが、別に10行入れてもOKです。

文字コードは「UTF-8」(BOMなし)、改行コードは「LF」

は?日本語で頼むわ

って感じですよね。
簡単に言うと、適当なメモ帳などで.htaccessを作成しても機能しない可能姓があるということです。

全てのコードエディターが対応しているとは断言できませんが、主要なコードエディターであれば問題ないかと思います。
僕はVSCodeを使っています。

テストページをブラウザで開いてみよう!

それでは、コピペも完了したことなので、実際にブラウザで開いてみましょう!

MAMPを起動させて、作成したディレクトリをブラウザから開いてください。

ね!作成したディレクトリを開いたはずなのにあら不思議。
僕のウェブサイトに飛んでますね!

.htaccessさんが、僕のウェブサイトへのリダイレクト処理を行ってくれていますね。

.htaccessが正常に作動しない場合

.htaccessさんはとてもきまぐれで、時折思うように動いてくれないことがあります。

そんなときに考えられる可能性が、いくつかあります。

.htaccessが動作しない原因
  • 誤字がある
    ファイル名や記述に間違いはありませんか?
  • 設置箇所を間違えている
    アップした先のディレクトリなどに間違いはありませんか?
  • 文字コードや改行コードが不適切
    適当なメモ帳で作成していませんか?
  • パーミッションの設定が異なっている
    サーバー会社によっては、パーミッションの変更が必要な場合があります。
  • そもそもサーバー会社が許可していない
    ご愁傷様です…。

ローカルサーバーでもうまくいかない場合は、記述の誤字や設置箇所など、こちら側に原因があると考えられます。

ローカルサーバーではうまくいっていたのに、本番のサーバーでうまくいかない場合は、サーバーの設定に問題がある可能性があります。

サーバー側の問題になってくると、こちらでは対処できないこともあります。

おまけ

サーバーを司る神、httpd.confを見に行こう!

記事の方で最初に紹介しました、ウェブサーバー全体の設定を制御しているhttpd.confを見にいきましょう!

今回は、MAMPを使ったローカルサーバーのhttpd.confを拝見します。
ズバリ所在地はここ。

何とでもなるのですが、ファイルは編集しないようにお気をつけください。

/Applications/MAMP/conf/apache/httpd.conf