ぷろぐらま☆もーど

 最近は絵も描かずにプログラムばかり打っている。というか右手の親指の痛いのが治らないんですが。昔さんざん整形外科やら接骨院やら通って何も改善されず、最終的には椎間板ヘルニアでさえ自然治癒で治した経験があるので病院は行かないけど。しかし傷とかも治りが遅くなったなぁ…

 そんな病気自慢はともかく、JavaScriptを動かしていたら古いブラウザでの動作を確認がしたくなった。いろいろぐぐっていたら便利なものを発見。古いバージョンのInternet Explorerの動作をエミュレーションする Multiple IE というフリーウェア。IE3、IE4.01、IE5、IE5.5、IE6をサポートしていて、それぞれ単独に動かすことができる。

 IEというのはかつてMicrosoftが訴訟された原因となったほど、システムに深く食い込んでいる。そのためバージョンアップはできてもバージョンダウンができなかったり、複数バージョンのIEを同居させることができなかった。私がかつてWebデザイナーとして活動していた頃はブラウザの不具合など当たり前にあった時代だから、あらゆるブラウザでの動作確認が必須で、10種類以上のブラウザをWindowsとMacに入れてひたすらオーサリングしていた。それでも顧客から「動かない」などと電話がかかってきて胃がキリキリしたものだ。

 今ではブラウザによって変な挙動をしたり、大きくレイアウトが崩れたりすることがほとんどなくなった。それでもモバイル機器に搭載されたOperaMiniとか、果てはPSPとかでサイトを見てやがる人がいるもんだから、機能の限定されたそういうブラウザを再現するのに古いブラウザが都合がいい。

 今回はIE5以降からサポートしているJavaScriptの関数「getElementById」が動作しないときに「この環境では使えません」と表示させようと思って組んだのだが、ちゃんと動作するかわからなかった。Multiple IEのIE4.01で動作確認したところ、やはりちゃんと動かなくてエラーが出た。修正して以下のような記述で「getElementById」が動作しないときに「使えません」表示が出るようになった(下記は一部抜粋でこれ単独じゃ動かない、動くのはこちら)。

<script type="text/JavaScript" language="JavaScript">
<!--
function clearHTML() {
  if (document.getElementById) {
    document.getElementById("outText").innerHTML = "ここに表示されます";
  }
}
if (!document.getElementById) {
  document.write("<br><span style=\"color:#ff0000\"この環境では使えません<\/span>");
}
//-->
</script>
<noscript><span style="color:#ff0000"><br>JavaScriptを有効にしないと使えません</span></noscript>
<div id="outText"></div>

 で、何かと便利だなぁと思ったMultiple IEなのだが、あちこち不具合も。Favorites(お気に入り)を使おうとすると印刷画面が出たり、突然強制終了されたり。本体のIEを8にバージョンアップしたらなんだか動作もおかしくなった。まあローカルファイルの確認だけだったら何とか動くから無視。開発もビミョーに止まってるみたいだし、フリーだしね。

 ちなみにMultiple IEでIE3の画面を最初出すと、デフォルトのホームのmsnにアクセスして英語でいちいちCookieの承認を促す画面が出てウザイ。画像のように「Warn before accepting "cookies"」のチェックを外しておけばOK。

 昔はCookie食わすことに賛否両論あったものだけど、今や無駄なCookieを大量に食わすサイトの多くなったこと。裏側で勝手にやられるのが大嫌いなので未だCookie使うのに抵抗があるし。ブログアフィで10回ぐらいリダイレクト(戻るボタン押すと同じページが残ってるアレ)かけてんの見ると「●ね!」とか思うし。昔の人間なので仕方ない。

 それはそうとIE3だと画像のようにCSSのところが全滅で興味深い。まあ今さらIE3に合わせてサイトを作ることもないけどね。なんだかんだ書いたけど、結局はメモリ不足でブラウザが落ちる時代には戻れない。

Apacheのローカルテスト・Macのhosts設定

 久々、iBookから更新。ウケの悪いこんぴゅーたな話。ていうか自分のメモ書き。

 普段、掲示板やこの日記のCGIのプログラミングと動作確認は、外部に開放していないWindowsXPのPCで一時的にApacheを動かして行っている。Windowsだけで動作確認をするなら以前のローカルテスト環境のバーチャルホスト設定で問題はなかった。だがMacOSで表示を確認したい時、この設定では見れなくて不便だったので今回修正してみた。

 ちょっと脱線する。Macintoshをお使いの人はご存知だろうが、MacのフォントはWindowsとだいぶ表示が異なる。特に問題なのがプロポーションと呼ばれる文字間隔の調整の違いで、Windowsに比べMacのフォントは文字と文字の間が広めになっている。特に句読点や引用符などは前後にスキマが空いて見える。AAなどがMacでズレて見えるのもそのため。AAに限らず1行で表示される文字数が異なるので、長い文章だと文の行数すら変わってしまうのだ。
 ちなみにこのmezzo.jpではWindowsかMacかをJavaScriptで判定してCSSを入れ替えている。Windowsでは本文を13ピクセル、Macでは12ピクセルと微妙に変えて、完璧ではないが行数が増える事を若干回避している。でも今回それについては本題から外れるので割愛。

 …と、本題に戻ると、そういった見た目を確認したいのと、同じブラウザでも動作が違ってくることもあるから、やはりMacでオーサリング(動作確認)したい。だからといってファイルを丸ごとMacに移して見るのはスマートじゃない。せっかくWindowsでApacheが動いているのだから、iBookから内部ネットワーク越しにそれを直接見れるようにすればいい。

 以前 はローカルテスト用のアドレスとして、Windows版 Apache 2.2 の外部設定ファイル httpd-vhosts.conf に

localhost.mezzo.jp

と設定したのだが、どうもこのアドレスではMacは本番用のサーバ mezzo.jp と混同してしまうのか、うまく動作してくれなかった。よく考えればトップレベルドメインの.jpが末尾にあれば、JPドメインのDNSを読みに行ってしまうんだから当たり前。mezzoは知識がありそうだけど、基本がなっちゃいねぇのでどこかが抜けている。でもWindowsはこれで動いちゃってたけどね。

 したがって今回は、

mezzo.jp.local

と、内部ネットワーク参照用の .localアドレスを割り当てる事にする。まずはApache2.2のインストールされているディレクトリ内のconfファイルをテキストエディタで修正(通常インストールなら C:\Program Files\Apache Software Foundation\Apache2.2\conf\extra の中の httpd-vhosts.conf)。

<VirtualHost *:80>
  ServerName mezzo.jp.local
  DocumentRoot "C:/Program Files/Apache Software Foundation/Apache2.2/htdocs/_mezzo.jp"
  <Directory "C:/Program Files/Apache Software Foundation/Apache2.2/htdocs/_mezzo.jp">
    AllowOverride None
    Options FollowSymLinks ExecCGI
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>

赤字部分が今回修正した所。mezzo.jp.local がリクエストされると C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\_mezzo.jp ディレクトリのデータを読み出すという設定。

 次は内部で自身を参照するようWindowsの hosts(C:\WINDOWS\System32\drivers\etc\hosts)の修正。念のために書いておくと、127.0.0.1 ってのは自分自身を示す世界共通のIPアドレス。

# Copyright (c) 1993-1999 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
# (中略)
127.0.0.1   localhost
127.0.0.1   mezzo.jp.local

 次にドメイン→IPアドレス変換して、Mac(クライアント)側からこのApacheが動作するWindows(サーバ)側に読みに行くようにMacを設定しなければならない。別にDNSサーバを動かす必要はなく、サーバのIPアドレスが 192.168.12.34 であるとすれば、クライアントからmezzo.jp.localへアクセスしたら、外部DNSを参照せずにクライアント内部で 192.168.12.34 を見に行くよう設定すればいい。もしクライアント側がWindowsであれば、上記のhostsファイルで 127.0.0.1 の代わりに

192.168.12.34   mezzo.jp.local

と記述すればそのよう動作する。ちなみに外に開放している自宅サーバ mezzo.fam.cx はルータのセキュリティ機能で外部DNSを経由すると見えなくなってしまうので、各々上記のようにhosts設定をして内部からも見えるようにしている。

 だがMacOSのhosts設定はちょっとメンド臭い。MacOS 10.2以降は /private/etc 内にある hosts というテキストファイルを編集するのだが、これが普通に開けない。MacOS Xは深い設定をしようとすると、途端にBSDが顔を出すのだ。まず「ターミナル」(Macintosh HD>アプリケーション>ユーティリティ>ターミナル)を開く。すると窓に以下のコマンド入力画面が出てくる(斜体「user」部分はユーザーによって異なる)。

Last login: Sun Jul 5 13:43:43 on ttyp1
Welcome to Darwin!
localhost:~ user$ |

コマンドを打ち慣れた人じゃなければ恐怖感を感じるだろう。でもこれがコンピュータの正体ってものよ。いちおーhostsファイルのバックアップをとるために、カーソルがチカチカしているところで次を打込んでEnterキー。

sudo cp /private/etc/hosts /private/etc/hosts.bak

sudoってのはスーパーユーザー(管理者)権限で何かをする時の呪文。いわゆるMacOSの深い所を何でもいじれちゃうアブナイ技。MacOSは知識のない人が変にいじっても壊れないよう、システムファイルは深いところに隠しているのだ。それに簡単にいじられないよう、以下の文字が出てパスワードが求められる。

Password:

Macを初期セットアップしたときに設定したパスワードを入力(画面には何も表示されない)してEnterキー。画面上に何の変化もなければ多分大丈夫(適当だな)。

 次はhostsを編集するために同様に以下を打ってEnter。

sudo vi /private/etc/hosts

デフォルトでは以下の画面が出る(MacOS X 10.4.11 Tiger)。

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost

「localhostはシステム起動時にLANの動作確認に使うからいじるな」みたいな内容。したがってここはいじらずに、この下の行に以下の一行

192.168.12.34   mezzo.jp.local

を新たに挿入すればいい。だが、普通のテキストエディタと勝手が違う。別窓が新たに開くわけではないし、そのまま編集できない。ターミナル上でコマンド操作する「vi」という非常にクセのあるテキストエディタなのだ。詳しい使い方は「viの使い方」でぐぐればもっと親切なところがあるだろうが、ここでは大雑把にhosts設定の流れだけ。

 矢印キーでカーソルを最後尾に移動させたらキーボードの「A」キーを打つ。これはインサート(文字挿入)モードへのコマンドで、こうしないとテキストの挿入ができない。カーソルが最末尾にあることを確認したらEnterキーで改行を挿入し、上記の行を新たに記述。IPアドレスとドメインの間はtabキーでタブを挿入。カーソルの移動は矢印キー、打ち間違えたらdeleteキーで消せる。マウスで選択して⌘+C/V でコピペもできる。

 そして記述に間違いない事を確認したらescキー。これでインサートモードからコマンドモードに切り替わり、文字の挿入ができなくなる。保存する際はこの状態で「 :w」(コロンとWキー)とコマンド入力。viの終了は「 :q」(コロンとQキー)。間違えて保存したくない時は「 :q!」(コロンとQキーとビックリマーク)と入れれば変更を保存せずに終了できる。viが終了すると

localhost:/private/etc user$ |

というコマンド待機画面に戻るから

exit

と入力してEnter。⌘+Q かファイルメニューの「終了」。これで再起動しなくても反映されているはずだ。試しにiBook側のブラウザ開いて http://mezzo.jp.local/ にアクセスしたら、やっとこApacheの動いているWindowsPCを参照するようになった。他のバーチャルドメイン設定してあるアドレス mezzo.fam.cx.local も同様に設定しておいて、ようやくWindows/Apache上のテストページがすべてiBookから見れるようになった。

 以上原理をまとめると、iBookのブラウザで http://mezzo.jp.local/ や http://mezzo.fam.cx.local/ にアクセスしようとすると、iBookは自分のhosts設定を読んで 192.168.12.34 にリクエストを送信する。一方Apacheが動作する 192.168.12.34 のWindowsマシンはiBookからリクエストされたドメインを判定し、Apacheのバーチャルドメイン設定で設定された各々のデータを呼び出し、iBookに各々のデータを送信。これで同じIPアドレスでもドメインで表示が変わるようになるという仕組み(だと思う)。

 こうして他にも動作確認用のローカルアドレスを設定して、管理しているドメインすべてのローカル動作確認ができるようになった。でも何だか5つもドメインがあるじゃないか。まったく金にもならない事をなんでこんなに(ry