.htaccessとは?できることと設定手順を初心者でもわかるように解説

.htaccess」というファイルは、ウェブページの制御や設定を行うために利用するファイルです。
ウェブサイトの運用中に以下のようなことをしたいなと思われたことはありませんか?

・サイトを移転したのでリダイレクトをかけたい
・特定の利用者にしか見られないページを作成したい
・迷惑な利用者をブロックしたい
・スマホユーザーとパソコンユーザーを別のページに誘導したい

これらの要望は全て「.htaccess」ファイルで設定することができるんです。
この記事では「.htaccess」の解説と、実際の設定方法や記述構文について解説いたします。

.htaccessとは?

「.htaccess」は、HTMLやCSSを配置するウェブサーバーのディレクトリ(フォルダ)と同じ場所にファイルを置くことで、ウェブページへのアクセス方法を設定できる制御ファイルです。

通常ウェブサイトの設定はレンタルサーバーの管理画面から行いますよね。
WordPressやEC-CUBE等のコンテンツ管理システムを利用されている方は、管理者としてサイトにログインし設定を行われているかもしれません。

どちらの場合も、背景ではウェブサーバーが可動しており「OS(オペレーティングシステム)」「ミドルウェア」「アプリケーション」「コンテンツファイル」で構成されています。

アクセス方法に関わる設定を担当しているのは、ミドルウェアです。
.htaccess ミドルウェア

「.htaccess」は、ウェブサーバーの中でもApache(アパッチ)というミドルウェアを利用しているサーバーが、設定の一部をコンテンツに行わせるための制御ファイルのことを指しています。
.htaccess 分散設定ファイル

このことから「.htaccess」ファイルは分散設定ファイルとも呼ばれています。

なぜ.htaccessを使う必要があるの?

ウェブページの運用をしていると、掲載情報やデザインを更新する以外にも「利用者にどのようにページを見せたいのか」を指定したいケースが発生します。

例えば…
・スマートフォンでアクセスする利用者とパソコンでアクセスする利用者に別のページを見せたい
・削除したウェブページにアクセスされた際に「ページが見つかりませんでした」と表示したい

HTMLやCSSのみでは、ウェブページのデザインとコンテンツの表示しか行えず、誰にでも同じ情報を同じようにしか見せられません。
HTMLファイル自体を削除してしまえば、情報自体見せることができなくなってしまいます。

「.htaccess」は、HTMLやCSSで指定することができない「アクセスのされ方」=「リクエスト」の処理方法を指定するために必要なファイルです。

.htaccessはどこで編集・設定するの?

ウェブページを作成する際には、FTPクライアントを使ってファイルをアップロードしたり、レンタルサーバーの管理ページからファイルを更新したりしますよね。
「.htaccess」も同じように、HTMLやCSSファイルが配置されているディレクトリへファイルを配置し設定を行います。

ドットから始まるファイルはWindowsでもMacでも「制御ファイル」という特殊な位置付けです。
ファイルが非表示になっていたり、半透明のアイコンで表示されます。
パソコンで編集を行う際には予め以下の設定が必要です。

○Windowsの場合
Windows
フォルダーオプションから「隠しファイル、隠しフォルダー、および隠しドライブを表示する」のチェックをオンにする。

○MacOSの場合
MacOS
ファインダーの環境設定から詳細タブを開き「すべてのファイル名拡張子を表示のチェックをオンにする。

パソコンで編集したファイルを、FTPクライアントでアップロードすれば設定が有効になります。
FTPクライアント アップロード

レンタルサーバーによっては、編集しやすいように専用の設定画面を設けているサービスもあります。
サーバー選びをする際のご参考にしてみてください。

例) XSERVER….htaccess解説ページ
https://www.xserver.ne.jp/manual/man_server_htaccess.php

.htaccessを使うシーンは?

実際に「.htaccess」ファイルで何ができるのか、利用シーン別にご紹介いたします。

リダイレクト

ウェブサイトを移転した場合やURLを変更した場合、サイトの利用者が古いURLへアクセスしてしまうこともありえますよね。
「.htaccess」では、古いURLのリクエストを受けた時、新しいURLへ転送する「リダイレクト」を設定することができます。

BASIC認証

限定コンテンツや会員限定ページを作成したい時、ウェブページにパスワードを設定することができます。
この仕組みをBASIC認証と言い、設定するとページを表示する前にユーザー名とパスワードを入力させるプロンプトが表示されるようになります。
ショッピングサイト等の複雑なログイン機能には向きませんが、管理者だけがこっそり見られるページを作ったり、運用者にファイルの一覧を表示させる等の管理者向けページを手軽に作成する方法として便利です。

ファイル一覧の表示

ウェブサーバーに配置するHTMLや画像等のコンテンツが大量にある場合、ウェブページからファイルの一覧が見られるように設定することができます。
Wikiを運用したり、アプリの配布を行う場合にも、ディレクトリ構造がそのままウェブページに表示されてくれた方が楽な場合がありますよね。
「.htaccess」には、ファイルの一覧を表示させる設定がありますので、いちいちHTMLを作成しなくても利用者にコンテンツを見せることができます。

エラーページ設定

ウェブページを削除した場合や、誤ったURLにアクセスされた時、通信エラーになってしまいます。
ブログやレビューサイト等、頻繁にページが増えたり減ったりする場合は、存在しないURLにアクセスされた際に「ページがありません」といったアナウンスを表示してあげると利用者さんに親切です。
「.htaccess」で、エラーが発生した場合に何を表示するか設定することができます。

SEO対策 URLの正規化

サイトへアクセスする時、リンクを辿ってくる人と、URLを直接入力する人がいるはずです。
入力されるURLには細かいばらつきがあります。

・http://anatanoblog.com
・http://anatanoblog.com/
・http://www.anatanoblog.com
・https://anatanoblog.com
・http://anatanoblog.com/index.html

このようなばらつきによりアクセスできたりできなかったりすると、アクセス数の機会損失に見舞われてしまいます。
「.htaccess」ファイルで、上記のどのようなURLにアクセスした場合でも、[http://anatanoblog.com]にリダイレクトを行わせる「URLの正規化」を行うことができます。
URLを正規化するとSEO対策にもなり、Googleの検索結果に出やすくなるメリットがあります。

アクセスブロック

悪意ある利用者に迷惑行為を受けてしまうこともあるかもしれません。
例えば短期間で大量にリクエストをされサーバーが重くなったり、コメント欄を荒らされてしまう等…
「.htaccess」ファイルでは、サイト運用を妨害する方のみアクセスさせないように、利用者固有の値「IPアドレス」でアクセス拒否・許可を設定することができます。

スマートフォン・パソコンの判別

スマートフォンでアクセスされた時、パソコンでアクセスされた時に別のページを見せたいこともありますよね。
「.htaccess」を設置すると、UserAgent(ユーザーエージェント)の判別ができるようになります。
UserAgentはアクセス元の端末情報やOSのバージョン、機種名等が含まれる情報で、iPhoneユーザー向けのページ、iPad向けのページ、Androidユーザー向けのページ等の細かい判別が行えます。

ファイル拡張子の変更

WordPress等のコンテンツ管理システムを利用されている方や、ご自身でウェブサイトのプログラムを作られている方は、URLの最後が「.php」「.cgi」「.jsp」といった文字になってしまうことがありますよね。
ブログを運用されている方はファイル名に関わらず、URLを[カテゴリ/タグ/日付]としたい場合もあるかと思います。
「.htaccess」ファイルに、アクセスされるURLのルールを指定すると、実際にファイルが無くても該当ページを表示させることができます。
例えば「index.php」「index.cgi」といった「index.」で始まるファイルにアクセスされたら、すべて「index.html」を表示するといったルールです。

設定できる項目は多数存在し、組み合わせて複雑な設定をおこなうことも可能です。
「.htaccess」で行える設定のことをディレクティブと言い、書き方のルールを構文と言います。
どんなディレクティブがあるか気になる方、構文を知りたい方はApacheの公式ドキュメントをご参考ください。

Apache チュートリアル: .htaccess ファイル
https://httpd.apache.org/docs/2.4/ja/howto/htaccess.html

このドキュメントは「.htaccess」を理解している方向けなので、初めて設定される方には難しい内容になっています。

次項では初心者の方向けに、実際にサーバーへ「.htaccess」を設定する手順をご紹介します。

.htaccessを実際に設定してみよう

「.htaccess」ファイルを実際にサーバーに配置する手順と、どのような動きになるのかを見ていきましょう。

今回は例として、存在しないページにアクセスされた時「ページが見つかりませんでした」というページを表示させる方法を解説いたします。
事前準備として、以下を行ってください。

1. ウェブサーバーの契約
2. FTP設定
…ファイルをアップロードできるユーザーの登録、ソフトウェアの設定を行ってください。
※レンタルサーバー管理画面から行うファイルアップロードでも構いません。
この章での解説は、FTPクライアントを用いて行います。
3. ドメインの取得とURL設定
…ドメインを取得し、ウェブサーバーに配置したファイルへURLでアクセスできるようにしてください。
4. サンプルページの作成
…ウェブサーバーへ以下の通りにサンプルページを配置してください。

/ …ルート(一番上の階層)
├ index.html …トップページ
└ notfound.html …存在しないURLへアクセスされた時に表示させるページ

index.html …トップページ
index.html  トップページ

notfound.html …ページが存在しない時に表示するページ
notfound.html

.htaccess設定前に存在しないURLへアクセスした場合はこのような画面が表示されます。
not found

※htaccessの設定を誤ると、ウェブサイトへアクセスできなくなる可能性があります。
試される際はよくご確認の上、自己責任で実施されるようお願いいたします。

.htaccessファイルの作成方法とサーバー側の設定方法

パソコンで[htaccess]というファイルを作成してください。
※Windowsではファイルの先頭をドットにできません。[htaccess]という空ファイルを作成してください。
.htaccessファイル 作成

[htaccess]ファイルを開き、以下のように入力してください。

ErrorDocument 404 /notfound.html

この構文には以下の意味があります。

ErrorDocument エラー時に表示するファイルを指定する という命令文。
404 どのエラーが対象かを指定する。

※404はURLが見つからなかった場合のエラー

/notfound.html 404エラーが発生した時に表示するファイルを指定する。

 

[htaccess]ファイルを保存し、FTPクライアント(またはレンタルサーバーの管理画面)からウェブサーバーにアップロードします。
FTPクライアント アップロード
ファイル名 変更

サーバーにアップロードした[htaccess]のファイル名を[.htaccess]に変更してください。
名前の変更
.htaccess 設定完了

これで設定は完了です。
存在しないURLへアクセスした際[notfound.html]が表示されることを確認して下さい。
notfound.html 確認

.htaccessを実際に活用してみよう

「.htaccess」ファイルには、複数の設定を記載することもできます。
これまでの手順に追加して、以下のような設定を追加していきましょう。

1. iPhone利用者にはiPhone用のページを表示する
2. Android利用者にはAndroid用のページを表示する
3. その他からアクセスした人には、スマートフォンからアクセスするようにアナウンスする
4. 管理者用のパスワード付きページを作成する

まず、それぞれの利用者がアクセスするサンプルページを作成して下さい。

/ …ルート(一番上の階層)
├ index.html …トップページ
iphone.html …iPhone利用者に表示するページ
android.html …Android利用者に表示するページ
pc.html …iPhoneでもAndroidでもない利用者に表示するページ
└ notfound.html …存在しないURLへアクセスされた時に表示させるページ

1. iPhone利用者にiPhone用のページを表示する

先ほど編集した[htaccess]ファイルを開き以下を入力して下さい。

RewriteEngine on

RewriteCond %{HTTP_USER_AGENT} (iPhone)
RewriteRule index.html iphone.html [R]
RewriteBase /

 

ErrorDocument 404 /notfound.html

この構文には以下の意味があります。

1行目

RewriteEngine on アクセスされたURLを書き換える命令文。

書き換えをオンにすると設定しています。

 

3行目

RewriteCond 書き換え条件を指定するディレクティブ。
%{HTTP_USER_AGENT} 書き換え条件の対象文字列。

利用者がアクセスしたUserAgentが取得できるサーバー変数を指定しています。

サーバー変数とは、利用者によって異なる情報を動的に取得できる文字列のことです。

https://httpd.apache.org/docs/2.2/ja/mod/mod_rewrite.html#rewritecond

(iPhone) 書き換え条件のパターン。

対象文字列に含まれる文字のパターンを指定しています。

※パターンについては後述

UserAgentに「iPhone」が含まれている場合の指定です。

 

4行目

RewriteRule 条件に当てはまった時に書き換えるURLを指定するディレクティブ。
index.html 書き換え元となる対象ファイル。
iphone.html 書き換え先となる対象ファイル。
[R] リダイレクトするという指定。

 

UserAgentはスマートフォンの機種ごとに異なる文字が送信されています。
新機種が出ればその都度追加されていく値ですが、iPhoneには必ずiPhoneという文字が入る傾向にあります。
今回は「iPhoneという文字が含まれている場合」という条件にしています。

例) userAgent(ユーザーエージェント一覧)
http://www.openspc2.org/userAgent/

[htaccess]ファイルを保存したら、先ほどと同じようにアップロードし[.htaccess]へ変更してください。

iPhoneから[index.html]へアクセスすると、iPhone専用ページが表示されます。
iPhone専用ページ

2. Android利用者にAndroid用のページを表示する

先ほど編集した[htaccess]ファイルを開き以下を入力して下さい。

RewriteEngine on

RewriteCond %{HTTP_USER_AGENT} (iPhone)
RewriteRule index.html iphone.html [R]
RewriteBase /

RewriteCond %{HTTP_USER_AGENT} (Android)
RewriteRule index.html android.html [R]
RewriteBase /

ErrorDocument 404 /notfound.html

 

基本構文はiPhoneのときと変わりませんね。
書き換え条件のパターンに「Android」を指定していること、リダイレクト先が「android.html」になっていることのみが異なります。

ファイルを保存しアップロードしたらAndroidから[index.html]へアクセスしてみて下さい。
Android専用ページが表示されます。
android専用ページ

iPhoneからもAndroidからも同じ[index.html]にアクセスしていますが、[.htaccess]がスマートフォンを判別してそれぞれのページにリダイレクトを行っています。

3. その他からアクセスした人に、スマートフォンからアクセスするようにアナウンスする
最後に、iPhoneでもAndroidでもない端末からアクセスした人の専用ページを表示させます。

先ほど編集した[htaccess]ファイルを開き以下を入力して下さい。

 

RewriteEngine on

RewriteCond %{HTTP_USER_AGENT} (iPhone)
RewriteRule index.html iphone.html [R]
RewriteBase /

RewriteCond %{HTTP_USER_AGENT} (Android)
RewriteRule index.html android.html [R]
RewriteBase /

RewriteCond %{HTTP_USER_AGENT} !(iPhone|Android)
RewriteRule index.html pc.html [R]
RewriteBase /

ErrorDocument 404 /notfound.html

 

基本構文は変わりませんが、書き換え条件のパターンに新しい記述があります。

!(iPhone|Android)は「iPhoneまたはAndroidではない」パターンを表す正規表現です。
正規表現で指定できる条件には、完全一致する文字列の他、「!」で否定・逆を指定する、「|」でまたはという複合条件にするなど、文字列のパターンで指定することができます。
他にも「先頭がxxxで始まる」「AAAとBBBがどちらも含まれる」といった条件を指定することもできます。

ご参考
http://httpd.apache.org/docs/current/expr.html

ファイルを保存しアップロードしたらパソコンから[index.html]へアクセスしてみて下さい。
パソコン アクセス

iPhoneともAndroidとも違うページが表示されていれば設定は完了です。

4. 管理者用のパスワード付きページを作成する
最後に、管理者のみがアクセスできるようにユーザー名とパスワードを入力させるページを作成します。
以下の通りサンプルページを配置してください。

/ …ルート(一番上の階層)
├ index.html …アクセスするページ
├ iphone.html …iPhone利用者に表示するページ
├ android.html …Android利用者に表示するページ
├ pc.html …iPhoneでもAndroidでもない利用者に表示するページ
├ notfound.html …存在しないURLへアクセスされた時に表示させるページ
└ admin …管理者ページ用のディレクトリ
└ admin.html …管理者ページ

[.htaccess]は自身が配置されたディレクトリ配下に有効になる性質をもっています。
管理者ページのみパスワード制にする為、[admin]ディレクトリを作成し、ルートより1回層下に専用の[.htaccess]ファイルを配置します。

[admin]ディレクトリの中に[htaccess]ファイルと[htpasswd]ファイルを作成して下さい。
htaccess htpasswd

それぞれのファイルに以下を記入して下さい。

htaccess

AuthUserFile /home/xxx/xxx/.htpasswd
AuthName "ログイン"
AuthType BASIC
require valid-user

htpasswd

admin:XXXXXXXXXXXXX

管理者ページには「パスワード付きページにする」ことを指定している[.htaccess]ファイルと、認証する「ユーザー名」と「パスワード」を記載した[.htpasswd]ファイルが必要になります。

[AuthUserFile]ディレクティブでは、ウェブサーバー上で[.htpasswd]を配置するディレクトリを指定する必要があります。
はFTPサーバーのディレクトリやURLと異なる場合があるので、ご自身が契約しているレンタルサーバーの設定を確認されてください。

[.htpasswd]ではユーザー名「admin」と暗号化したパスワードを指定します。
ご自身で暗号化を行い、手書きで作成することもできますが、自動で生成してくれるジェネレータが存在しますので併せて利用されてください。

_htaccess ファイルを簡単作成「.htaccess Editor」
http://www.htaccesseditor.com/#a_basic

[htaccess]と[htpasswd]ファイルをFTPクライアントでアップロードし、ファイル名を
[.htaccess]と[.htpasswd]に変更すると、パスワード付きページの設定は完了です。

[/admin/admin.html]へアクセスしてみてください。
ログイン認証のプロンプトが表示されます。
ログイン認証 プロンプト

先ほど[htpasswd]で指定した[ユーザー名]と[パスワード]を入力し、[ログイン]を押して下さい。
htpasswd ログイン

正しいユーザー名とパスワードが入力された場合のみページが表示されます。

まとめ

「.htaccess」は、HTMLやCSSといったウェブデザインの知識と、ミドルウェアやアプリケーションといったサーバー知識のちょうど中間にあたる設定です。
はじめて触る方にとっては敷居の高いものかもしれませんが、一度コツを覚えればウェブサイト運用でできることが一気に広がります。
.htaccessをマスターして、一歩先をいくデキるウェブ管理者を目指して下さい!

  • .htaccessとは
    .htaccessとは?できることと設定手順を初心者でもわかるように解説
  • リダイレクト redirect
    リダイレクト (redirect)とは?意味・設定方法を5分で解説
  • ネームサーバー DNS
    ネームサーバー(DNSサーバー)とは?意味と設定方法
  • USENスピードテスト
    usenスピードテストの"級"の種類やドラゴン級とは?使い方や目安を解説
  • 「Bluetooth」とは?Wi-Fiとの違いや製品・接続方法まで完全ガイド
  • fast.com
    「Fast.com」でインターネットの通信速度を計測しよう
おすすめの記事