作成者別アーカイブ: admin

.htaccessの書式とよく使う設定

Apacheの設定ファイル.htaccessを使用してできることは多岐にわたります。その中でも代表的で、サイト制作には割合必須な機能の紹介を、書式の説明と並行して行いましょう。

トップページにindex.html以外のファイルを指定する

たとえばhttp://www.○○○.com/というアドレスのサイトで、http://www.○○○.com/とだけアドレスバーに打ち込んで表示されるページは、ドキュメントルートに置かれたindex.htmlというファイルです。これは下位のディレクトリでも同様で、http://www.○○○.com/page/というアドレスで表示されるのは、ドキュメントルートに存在するpageディレクトリに置かれたindex.html、といったように、指定されたディレクトリに置かれたindex.htmlを探して表示するというのがhtml文書での約束事です。
一方、ページ中にPHPプログラムを含む場合に、ファイルの拡張子を.phpにしなければならないという約束事も存在します。トップページにPHPプログラムを置きたい場合など、ファイル名をindex.phpとしてしまうとブラウザでアクセスしてもよくわからないリストページが現れるだけで、柔軟に解釈してindex.phpを表示してくれたりはしません。そこでディレクトリ名のみをアドレス指定された場合に探すファイルを、以下のような記述で設定します。

DirectoryIndex index.php index.html

DirectoryIndexの部分が設定項目名、index.php index.htmlの部分が設定したい値です。つまり.htaccessの書式は以下のようになります。

設定項目名 値1 値2

php.iniの場合と異なり、設定項目と値の間を半角スペースで区切り、イコールはつけません。設定したい値が複数ある場合は、値同士をやはり半角スペースで区切ります。そして文の終わりには、たとえ設定項目が1つであったとしても改行が必要です。ちなみにコメントアウトは以前書いた通り#を使います。
DirectoryIndexの説明に戻りますと、値として指定された名称のファイルを、ディレクトリ名でアクセスされた場合表示します。さらに後ろに続けて値を与えると、最初に与えた値のファイル名が無かった場合に、次に探すべきファイル名と解釈します。上の例ならば、まずindex.phpを探して、無かったらindex.htmlを探して表示ということですね。ちなみに.htaccessの設定は下位ディレクトリにも反映されますので、こういった設定をドキュメントルートでしてしまうとわかりやすいです。

DirectoryIndexで指定されたファイルが存在しなかったときリスト表示になるのを避ける

先にindex.html無しでディレクトリのアドレスを入力してみたときの、よくわからないリストの出現を抑える方法です。

Options -Indexes

セキュリティの為にも、ファイル構成が外部から筒抜けになってしまうのは避けたいところです。公開サイトを段階的に大きくしていくケースでも、この設定は最優先でしてしまいましょう。

ディレクトリへのアクセスにパスワードをかける(Basic認証)

外部からアクセスされては困るディレクトリに、ユーザ名とパスワードを要求するタイプのプロテクトをかける事もできます。パスワードは.htpasswdというファイルに保存して、そのファイルへの参照を.htaccessで指定します。.htpasswdファイルはドキュメントルートより上の階層に置いて、まかり間違ってもそちらに外部からアクセスされないようにする必要があります。ユーザ名user、パスワードpassという例で書き方を説明します。

user:pass

こちらが.htpasswdファイルへの記述です。複数ユーザにも対応可能ですのでその場合は同ファイル内に羅列して書いてしまって構いません。そしてこちらも文の終わりの改行が必須です。

AuthName "hidden"
AuthUserFile "/home/usr/.htpasswd"
AuthType Basic
require valid-user

こちらが.htaccessの記述です。AuthNameという項目は、パスワードを求める領域の名称で、ダイアログの本文に現れます。特に意味はないので好きな名称を設定してください。AuthUserFileには.htpasswdファイルへのパスを与えます。なお.htpasswdのファイル名は自由に決められるようですので、パスの指定もそれに即して変えてください。AuthType Basicは認証の種類で、この他にDigestという値もとり得ますが、対応ブラウザが狭い、Apacheのヴァージョンにより書式が異なる部分が出るなどの問題があり、あまり積極的に採用されていないようです。最後のrequireでは複数ユーザが登録されていた場合に、アクセスを許すユーザを名指しで指定するというものです。vaLid-userにしておけば、全登録ユーザを許可します。
このBasic認証は少し面倒くさいでしょうか。ちなみに、cPanelではこのBasic認証の設定をPassword Protected DirectoriesというアイコンからGUIで行えます。ちゃんと.htpasswdをドキュメントルートより上に保存してくれるので便利です。

アクセスのリダイレクトを行う

指定されたパスにアクセスがあったとき、そのアクセスを別のアドレスに振り向けます。

Redirect permanent / http://www.google.com/

この例では、Redirect permanentの部分が設定項目名で、その後ろに値を2つ与えています。1つ目の値はただのスラッシュですが、これはドキュメントルートを指定して与えていると読んで下さい。もしドキュメントルート直下のpageディレクトリを与えたいなら/page/となります。2つ目の値はリダイレクト先のhttp://から始まるアドレスです。つまりこの例では、ホームページにアクセスされたらgoogle.comにジャンプするという結果になります。ホームページ移転などがあったときに、この設定を使って新ページにリダイレクトしましょう。

特定の拡張子のファイルへのアクセスを禁止する

さて、長々と説明してきてやっと前回予告した機能の説明に入ります。最後になってしまったのは、書式がこれまでのものといくらか異なるからです。拡張子.iniのファイルへのアクセスを禁止する例を見てみましょう。

<Files ~ "\.ini$">
deny from all
</Files>

htmlのような、タグで挟んだ書式になっています。しかし異なるのは、タグの終わりと文の終わりに改行を必要とするため、3行で1セットということです。最初のタグの中にあるバックスラッシュは、正規表現でのエスケープを表しています。windows環境では¥マークになりますね。正規表現全般については説明を省きますが、この項目でよく使いそうな指定としては、”または”を表す|(縦の一本棒)、前方一致を表す^、後方一致の$などがあります。それらを使って、拡張子が.iniおよびファイル名の先頭が.htのファイル(.htaccess、.htpasswd)へのアクセスを禁止してみます。

<Files ~ "\.ini$|^\.ht">
deny from all
</Files>

他にも特定プロバイダからのアクセス禁止や、カスタムエラーページの参照などできることは沢山あるのですが、ひとまずここでは解説を省きます。また.htaccessを使ったPHPの設定変更(php.iniを使用しない)については、独立したエントリに書くつもりです。


.htaccessを使ってphp.iniの有効範囲を拡張する

前回の続きです。ユーザ側で用意したphp.iniは、レンタルサーバ側で特別な設定をしていない限りその有効範囲が同ディレクトリ内に制限されます。つまりディレクトリを多数用意するサイト作りではユーザが作成するフォルダ毎にphp.iniを用意せねばならず、ファイル構成が冗長になってしまいます。そこでApacheの設定ファイルである.htaccessを使用して、任意の箇所に配置されたphp.iniファイルの設定が.htaccessファイルを置いたディレクトリと下位のディレクトリに適用されるように変更してみましょう。

.htaccessファイルの名前は拡張子も含めて.htaccessになります。テキストエディタなどで保存するとOSによっては不可視ファイルの扱いになってしまうので、適当な名前で保存してサーバにアップロードした後にFTPクライアントの機能でリネームするという方法が便利です。そして作成した.htaccessという名前のファイルにこのような記述をして、文の最後に改行を忘れずに入れて保存してください。

suPHP_ConfigPath /home/user/public_html/settings/

この例での/home/user/public_html/settings/の部分は、用意したphp.iniを置いているディレクトリのパスという設定です。各々のケースに合ったパスへと置換して下さい。このように設定しておくと、.htaccessを置いたパスと、それより下位のディレクトリで実行されたプログラムに/home/user/public_html/settings/に置いたphp.iniの設定が適用されるようになります。

なお.htaccessファイルもphp.iniファイルもただのテキストファイルですので、ブラウザからアクセスすると現在の設定内容が丸見えになってしまいます。それを避ける為にはApacheの特定の拡張子をもったファイルへのアクセスを禁止する機能を使うのですが、やはりそれも.htaccessファイルで設定することになります。次回はそれを含めた.htaccessの代表的な機能と書式を紹介することにします。


php.iniでPHPの各種設定を変更

PHPのデフォルト文字コードなどの各種設定は、php.iniというファイルで定義されています。レンタルサーバを契約してPHPを使用したサイトを作成する際には、まずプロバイダによる現在のphp.iniの設定をチェックしてみましょう。PHPの関数phpinfo()を使うと実行ディレクトリに適用されている設定を一覧にして表示してくれますので、ドキュメントルートに以下のように記述したファイルを保存しブラウザでアクセスします。

<?php
phpinfo();
?>

phpinfo()というタイトルのページが表示されれば成功です。PHPロゴの隣に現在のヴァージョン、その下の表では現在の設定内容がわかります。

表の項目Configuration_File (php.ini)Pathにはphp.iniファイルが置かれているディレクトリが、Loaded_Configuration_Fileには実際に読み込まれたファイルが示されています。レンタルサーバの場合Configuration_File (php.ini)Pathの項目で設定されたパスにユーザがアクセスを許されず、設定を変更しようとしてもそこにあるファイルに直接手を加えることができないことが多いですので、新たに設定済みのphp.iniファイルをPHPプログラムと同じディレクトリに作成します。
php.iniファイルの書式は以下のようになります。

設定項目 = 値

文の終わりは改行で示し、特別な文字はつけません。また、コメントアウトは;(セミコロン)を行頭につけて行います。例えばデフォルトの文字コードをUTF-8にしたいときは、以下のように記述します。

default_charset = "UTF-8"

その他にどのような設定項目があるのかの解説はここでは省きますが、PHPのパッケージに付属したphp.iniには、コメント行を活用した各設定項目の説明が英語で書かれていますので、既存のphp.iniをコピーして、説明を見ながら必要な設定項目だけ変更して保存するという方法が便利です。先程phpinfo()で調べたヴァージョンのphpを、http://www.php.net/からダウンロードし、展開したファイルの中からphp.ini-○○といったような先頭にphp.iniがついているファイルを見つけてください。後ろについている単語は用途にあわせた設定を表していますが、php.ini-recommendedがあればそれを、無ければphp.ini-productionをphp.iniにリネームして使用します。
これでphp.iniの入ったディレクトリに設定が適用された筈です。そのディレクトリ内のファイルでphpinfo()をやってみて、Loaded_Configuration_Fileが同ディレクトリ内のものに変更されていることを確認してください。

ユーザが配置したphp.iniの有効範囲はそのディレクトリ内のみですが、Apacheの設定ファイル.htaccessを使って有効範囲を広げることも可能です。次回はその方法の解説をします。


サイトC:レンタルサーバを000webhostに変更

サイトC(このサイト)のサーバを、以前のサーバの仕様変更を機に000webhostという海外サーバに移転しました。1500MBのディスクスペース、2つのMySQLデータベースとPHPが使用可能という条件で、広告無しの完全無料という謳い文句です。移転から2年近く経過しているのですが、その間特に不具合や怪しい料金請求なども発生せず、(予想とは裏腹に)順調に使えています。FAQによれば、有料契約コースの収益があるからそれが可能になっているとのこと。確かに無料契約のままではアクセス解析などが利用できないので、サイトが大規模になったら切り替えの需要はありそうです。


IE7.jsを使ってInternet Exploler 6でのPNGの透過指定を有効にする

前回エントリで述べたPNG形式の優位性、アルファチャンネル使用による透過ですが、Internet Explorerではヴァージョン7からの対応となり、それ以前のヴァージョンでは透明部分が灰色に表示されてしまうなど上手く表示されません。ブラウザシェアの全世界および国別割合がわかるこちらのサイト(http://gs.statcounter.com/)の数字を見ると、代表的な未対応ブラウザであるInternet Explorer 6のシェアが、2012年1月現在全世界で約1.6%、日本で約2.3%であることがわかります。数年前に比べればあまり大きな割合ではないので対応を放棄してしまうというのも十分ありなのですが、もし手間をかけず対応させたいのであれば、Googleの公開しているIE7.jsを利用するのが便利です。

IE7.jsの概要

IE7.jsは、古いヴァージョンのIE(5.5〜)に新しいヴァージョンのIEの機能を提供する目的で作られたライブラリで、拡張子に.jsと付いていることから判るように、JavaScriptのライブラリです。ですが使用にJavaScriptの知識は必要なく、html文書のヘッダ部でリンクを明示するだけで使用できるようになります。

(2012.6追記:この部分の画像は000webhostに接収されてしまいました)

上のコードの赤字部分が必要なコードになります。透過PNG対応の話からは余談になりますが、同様に以前のヴァージョンのIEをヴァージョン8相当および9相当にする、IE8.js、IE9.jsというライブラリも存在します。それらを呼び出す場合には、一行目のIE 7の部分を呼び出すヴァージョンに、二行目のアドレスの末尾をIE8.jsやIE9.jsに変えてください。

さて、ライブラリの宣言が終ったら、透過を有効にしたいPNGファイルの末尾に-transを加えて保存してください。上の例では、titleimage.pngというファイルの透過を有効にしたかったので、titleimage-trans.pngとリネームして保存しています。これで必要な作業は終わりです。

注意点があります。まずこの機能は閲覧者がJavaScriptを有効にしていないと働かないということ。そして、透過PNGを背景画像として使用した場合にbackground-repeatやbackground-positionが上手く機能しなくなってしまうという点です。前者については、そもそも再三の注意喚起にも関わらずIE6を使い続けている(使い続けざるを得ない)閲覧者がJavaScriptを有効にしているのかという疑問がありますし、後者の仕様などは、うっかり見落としてIE6での見え方が大変なことになったとして、それを確認できる環境がページ作成者の手元に揃っているとは限らないため問題が長く放置されてしまう可能性が高くなるのが困りものです。

ということで、透過PNGをレイアウトに使いたい場合にIE7.jsを使うか、それともIE6はお断りと但し書きをするかについては、最初に提示したIE6のシェアも加味して結論を下しても良いのではないかと思います。仕事の場合であれば、クライアントが依然IE6を使っていそうだったらしっかり対応するといった具合で良いのかもしれません。


GIF形式とPNG形式それぞれの透過の実現

前回の予告通り、GIF形式とPNG形式それぞれの透過についての説明です。

GIF形式での透過 〜クロマキー合成

GIFの画像で透過を実現する場合には、映像制作でいうところのクロマキーの手法を使います。よくテレビ番組の制作現場で、俳優が青い背景をバックに撮影を行い、のちに別撮りした背景と合成するという方法がとられていますが、同じことをインデックスカラーを使って表現します。映像の合成の場合、青色の背景が使われるのは俳優の衣装や肌の色とかぶりにくいからですが、GIF画像の場合も、画像の中で使われていない色をカラーマップで宣言し、透明にしたい部分に敷き詰め透過色とします。8ビットで宣言できる256色のうち1色が透過色になるので、画像自体の最大色数は255色になります。

PNG形式での透過 〜アルファチャンネル

GIFの代替形式としてインデックスカラーを採用したPNG-8の場合は、やはりクロマキーの方法で透過を表現します。一方PNG-24の場合は、フルカラーの表現に必要な24ビットに加えて8ビットのアルファチャンネルを持つことで、完全な透過のみならず半透明のような段階的な透過の表現ができるようになっています。

アルファチャンネルについて、わかりやすく図式化します。

アルファチャンネルの説明

クロマキー合成を使う場合、使うビット数が1ビットなので、そのドットが不透明かそうでないかという2値しか表現できません。それに対してPNG-24のアルファチャンネルを使えば、そのドットの透明度がどれ程なのか、分母を8ビット=256にした数値で表せます。たとえば128/256ならば、そのドットの透明度は50パーセントであり、そのドットが重なった下の要素が半分程透けて見えるということになります。

以上の違いをふまえると、段階的な透過を用いたレイアウトをしたい場面ではアルファチャンネル付きのPNG-24を使用するのが適当であり、レイアウト的にそれが必要ない場合では、画像のサイズを不必要に増やしてしまわないよう8ビットのフォーマットを採用するのがよいと判断できます。

とは言え、高性能なアルファチャンネル付きPNGは古いブラウザに対応していないというのも実状です。そこで次回のエントリではそれを解決するウラ技を紹介してみたいと思います。


もう少し突っ込んだGIFとPNGの話

前回はGIFとPNGの機能差について、いくつかの項目を挙げて説明としました。予定ではその次のエントリで両形式の透過の実現について書くつもりでしたが、前回の説明で言葉足らずな部分があったことに気付いたので、このエントリを補足とさせていただきます。とりあえず両形式の使い分けについてだけ知りたい方は、このエントリを飛ばして前後のエントリを参考にしてください。

ビット配列による色表現

基本的な部分にたちかえってみますと、デジタルの画像データはつまるところ1または0の値をもったビットの集まりになります。色の表現の考え方としては、1ドットにつき1ビットの情報をもつことができるのならば、そこに色があるか/ないかを情報としてもてるわけで、単色の画像を表現できます。この場合の単色は白黒に限らず、もし1を、”赤色が存在している”ことの指標として定義しているのなら、この1ビットの画像は赤白になるはずです。宣言は画像データの内部や、あるいはデータを読み込むソフトウェアのどこかでされているはずですが、その場合でも1ドットについてみれば1ビットのデータしかもっていないので、1ビットのビット深度をもつ画像と呼ばれます。

次に、2ビットのビット深度をもつ画像について考えてみます。2ビットのデータというのは、00、01、10、11という四種類の値をもつので、1ドットにつき4色を表現できることになります。例として、赤、茶色、焦げ茶色、群青色の四色を使う場合を考えてみましょう。どの値にどの色を割り当てるかという情報は、先ほどの赤白画像の例と同じようにどこかで宣言されていなければなりません。この例の場合00=赤、01=茶色、10=焦げ茶色、11=群青色のような宣言をするのですが、このビット配列と色の対応表をカラーマップと呼びます。一方、ドットごとにカラーマップのどの色を使うかの宣言部分は、たとえば赤が3ドット並んだ後茶色のドットが1ドットある場合、00、00、00、01のようになります。この宣言部はインデックスと呼ばれ、このようなカラーパレットとインデックスを使った表現方式をインデックスカラーと呼びます。

インデックスカラーの特長として、画像ファイルのサイズに見合った効果的な色表現ができることが挙げられます。たとえば青空を撮影対象とした写真では、使われている色はほとんど青や水色です。もし8ビットのビット深度をもつ画像が、赤から青、緑までまんべんなく色を備えていたとしたら、その中で使う色はたかだか10種類くらいで、残りの200色以上の定義色が無駄になってしまいます。理想としては青系統の色で数十段階用意されていた方が、より自然に青空を表現できます。その点インデックスカラーではカラーマップに自由に色を当てはめることができるので、青空の画像のような例では8ビット、つまり256色でも後述のフルカラー画像と遜色ない表現が可能になります。

インデックスカラーは確かに少ないビット数での色表現に向いていますが、画像のビット深度が大きくなるにつれ、今度はカラーマップの定義部分が無視できないサイズになってきます。理屈では24ビットのビット深度をフルに使う場合、たとえ青空のみの画像でも1680万色弱を定義しなければなりません。そこでビット深度の大きい画像では、ドットあたりのビットデータを3等分し、rgb(赤、緑、青)それぞれの色を段階的に定義、その混色で色を作り出すという方法がとられます。この方法はダイレクトカラーと呼ばれ、特に24ビットをrgbの各色8ビットずつで分割し定義したものはフルカラー画像と呼ばれ、標準的なフォーマットになっています。

GIFとPNGの採用方式の違い

さて、GIFとPNGの比較に戻ります。GIFが通信環境の貧弱な時代に策定された形式であることは先述のとおりですが、そのため採用されている色表現の方式はインデックスカラーです。一方のPNGでは、GIFの代替フォーマットとして普及を狙ったという経緯から、8ビットのPNG-8でインデックスカラーを採用しています。PNGはGIFに比べてサイズが大きいというイメージがありますが、GIFと同じ256色に減色を行うPNG-8で保存すれば、サイズは多くの場合PNGの方が小さくなるようです。

PNGはまたダイレクトカラーもサポートします。ビット深度に応じてPNG-24、PNG-48などフォーマット名に接尾語がつきますが、よく使われるのはフルカラー画像のPNG-24およびPNG-32です。ただしソフトによってはこうした接尾語つきの呼び方を使わず、一様にPNGとして扱ったり、PNG-32をアルファチャンネル付き24ビットPNGと表現したりと呼称に揺れがあるので、WEB上の解説でも混乱が生じているという印象があります。今回のエントリでビット配列にまで踏み込んだ解説を行ったのは、そのあたりの混乱をある程度解消することを狙ったものですが、次回のエントリの透過の説明とあわせて、呼称の揺れに対してある程度のあたりをつける材料となってくれることを期待しています。