今まで 業務でHTMLを作成していたが、どれもイントラ用のシステムの為ブラウザをIE限定として
作っていた。しかも、見た目はIEで見れればOKみたいな感じだった。
しかし、今回は以下の条件で作る事になった。
・クロスブラウザに対応してちょ。
・レイアウトにテーブルタグを使用しないでちょ。（レイアウトはブロックで）
・XHTMLを使用してちょ。
・FireFoxで作成し、後でIEで確認してみてちょ。
実際に作ってみるとは、はまりまくった。
FireFoxではきちんと表示されているのに、IEでは表示ができていない。
今までなんとなくIEはヘボというのは耳にしていたが、色々調べていると定石がいろいろあるらしい。
今までの自分が、いかに適当なHTML,CSSを作成していたか痛感している今日この頃。
これを機にクロスブラウザを意識しようと強く思った。
【参考したサイト】
Alternative Design Project by Momomo
web開発時には、ブラウザにFireFox にデバッグツールの Firebug をインストールして使用しています。
理由は、これを使えといわれたから・・・ですが、
実際に使ってみると、グッバイIEという感じです。
まだ使っていない方は、ぜひ使ってみてください。
Firebugは、FireFoxインストール後こちらから。
携帯サイトを作るかもしれないので、ローカルに開発環境を作る事にした。
その時のメモ。
【開発環境構築 for windows】
OS : WinXP
Web Server : Apatch 2.0.59
Perl : ActivePerl 5.6.1
-----------------------------------------------------------
-- ActivePerl のインストール --
-----------------------------------------------------------
1. ActivePerl の ダウンロード
http://downloads.activestate.com/ActivePerl/Windows/5.6/
【補足】08/08/01 時点のバージョン ActivePerl 5.8.8
http://aspn.activestate.com/ASPN/Downloads/ActivePerl/
2. ディフォルトでインストール
3. DOS窓から 「perl -v」を実行。ヴァージョンが表示されたらOK
-----------------------------------------------------------
-- Apatch --
-----------------------------------------------------------
1.Apatchのダウンロード
http://www.apache.jp/
http://httpd.apache.org/download.cgi
apache_2.0.59-win32-x86-no_ssl.msi
【補足】apache_2.2.4-win32-x86-no_ssl.msi 自分の環境ではNGだった
2.インストール
[ServerInfomation]
NetWorkDomain: localhost
Servername : localhost
ServerAdmin : hoge@hoge.com
3.ブラウザで http://localhost/ にアクセスできれば OK
-----------------------------------------------------------
-- Apatch + Perl --
-----------------------------------------------------------
1. %APATCH_HOME%\Apache2\conf\httpd.conf の設定
1.1 AddHandlerをコメントアウトし下記に書き換える
AddHandler cgi-script .cgi .pl
1.2 Addtypeの追加
AddType application/x-httpd-cgi .cgi
AddType application/x-httpd-cgi .pl
2. アパッチを再起動する。
3. %APATCH_HOME%\Apache2\cgi-bin\printenv.pl を開く
4. 一行目をパールのインストール先に変更する
5 ブラウザで http://localhost/cgi-bin/printenv.pl を入力し、表示されればOK
※ http://localhost/cgi-bin/printenv.pl を入力した場合
IEの場合「ファイルのダウンロード」画面が表示される事あり、
FireFoxでは普通にひょうじされた。
その場合、 http://localhost/cgi-bin/printenv.pl/ と最後に「/」を付加する。
-----------------------------------------------------------
-- Docomo (エミュレータ) --
-----------------------------------------------------------
1. エミュレータのダウンロードとインストール
http://www.nttdocomo.co.jp/service/imode/make/
ツールダウンロードを選択、「iモードHTMLシミュレータII」を選択
-----------------------------------------------------------
-- au (エミュレータ) --
-----------------------------------------------------------
1. エミュレータのダウンロードとインストール
http://www.au.kddi.com/ezfactory/index.html
Openwave SDK 6.2K
-----------------------------------------------------------
-- Soft Bank (エミュレータ) --
-----------------------------------------------------------
1. エミュレータのダウンロードとインストール
http://developers.softbankmobile.co.jp/dp/tool_dl/web/wcv.php
ウェブコンテンツヴューア
-----------------------------------------------------------
-- キャリア判別 --
-----------------------------------------------------------
※以下のモジュールを使おうかと思っている
http://memorva.jp/memo/mobile/http_user_agent.php
http://www.kawa.net/works/perl/phone/pnews.html
※ユーザーエージェント
http://www.nttdocomo.co.jp/service/imode/make/content/spec/useragent/index.html
http://www.au.kddi.com/ezfactory/tec/spec/4_4.html
http://developers.softbankmobile.co.jp/dp/tech_svc/info/useragent.php
-----------------------------------------------------------
-- PPMにて必要モジュールのインストール --
-----------------------------------------------------------
※PPM(Perl Package Module)とは、Win32環境において
Perlから新しいモジュールを利用できるようにするモジュール
PPM :version 2.2.0
【必要なモジュール】
CGI
CGI-Session
0. ネット接続時にプロキシを使用している場合、DOS窓をにて以下を入力
※プロキシ、ユーザ、パスワードの設定
Set HTTP_proxy=http://192.168.1.1:8080
Set HTTP_proxy_user=user
Set HTTP_proxy_pass=pass
1. 「PPM」と入力。PPMが起動する。
2. 「query」と入力後「enter」を押す。インストールされているモジュールが表示される。
3. 「CGI」モジュールのインストール。以下を入力
install CGI
4. 「CGI-Session」のインストール
install CGI-Session
5 以下を入力してインストールされているか確認
query CGI
6 「quit」で「ppm」の終了
-----------------------------------------------------------
-- Session 管理 --
-----------------------------------------------------------
※携帯ではCookieを使用できない為、以下のどちらかを使用する
(a)フォームのhiddenフィールドにセッション番号を埋め込む
(b)URIにセッション番号を埋め込む
結局作る事になりました。
以下のモジュールを追加する事にしました。
-----------------------------------------------------------
-- PPMにて必要モジュールのインストール --
-----------------------------------------------------------
HTML-Template
HTML-Tree
--------------------------------------
仕様
--------------------------------------
・言語は「xhtml」を使用する
・HTML-Templateを使用してperlとxhtmlを分離する
・互換性がない部分は、キャリア毎にテンプレート内で分岐する
--------------------------------------
注意する事
--------------------------------------
・docomoは"Content-Length" が必要
※binmodeを使用する
JavaScriptのコーディングを強力に支援するライブラリです