実現出来るか調べるようにと
もう1人のファミリーレストランの面接の相手と
勤務表にサインをされる方に言われたので私はインターネットで調べました。
まずはタブを使ってページの切り替えが出来るかどうか調べました。
タブを使ってページの切り替えが出来るサイトを見付けました。
まずはサンプルをダウンロードしてタブの切り替えが上手く行くか確認し、更に複数のタブを使えるページがあるのでタブの切り替えが上手く行くかを確認しました。
私はポータルサイト向けに作り直しましたが、タブの切り替えが上手く行くかを確認しましたが、
勤務表にサインをされる方は
ポータルサイトを使っている方達の名前とデザインのパターンとコメント欄の書かれた紙を見たが、タブのデザインではなく、違うデザインが選ばれそうだと言われたので私は違うデザインの方が実現出来るか調べました。
プルダウンを使ってページの切り替えが出来るかどうかを調べました。
統合する前のポータルサイトの1つにもプルダウンを使ってページの切り替えが出来るようになっていたのでページの切り替えをしているページのソースコードを見て、ページの切り替えをしている部分をコピーして、統合するポータルサイトのページのJavaScriptの箇所に貼り付け、インターネットで調べてJavaScriptでページの切り替えをしているページをを参考にしました。
統合するポータルサイトではフレームを使っているので貼り付けたJavaScriptの箇所をwindow.open( リンクURL , ウィンドウ名 , スタイル , エントリ)のウィンドウ名をページを切り替えたいフレーム名に変更したら上手く切り換えが出来ました。
また、ページを切り替える時にフレームの幅を変える事が出来るかどうかインターネットで調べました。
そこのページはフレームの横幅を変更するものでしたが、縦幅の変更も可能でした。
ほかにも検索窓を切り替える機能があったのでそれも別の統合する前のポータルサイトの1つのソースコードを見て、検索窓を切り替える部分をコピーしたら上手く行きましたが、検索窓の1つで上手く検索が出来ませんでした…。
原因は文字コードだという事が解り、インターネットで調べるとformタグに accept-charset="送信先に指定する文字コード"
(例)<form action="起動したいプログラムのURL名" accept-charset="Shift_JIS">
を指定すればいいと書かれていましたが、上手く行きませんでした…。
またインターネットで調べると送信する前にページの charset をJavascript で Shift_JIS(送信先に指定する文字コード)に書き換えればいいと書かれていました。
(例)<form id=”form1″ action=”hogehoge.html” method=”post” accept-charset=”Shift_JIS”>
<input type=”text” name=”hoge1″ />
<input type=”submit” onclick=”document.charset=’Shift_JIS’; document.form1.submit(); ” />
</form>
これも試してみましたが、上手く行きませんでした…。
その日は文字コードでつまずいて終わりました…。
次の日、私は会社に行こうとしている途中で統合する前のポータルサイトでも検索窓の文字コードの問題があったかもしれないと思い、私は統合する前のポータルサイトの1つのソースコードを見ると、解決方法が分かりました。
文字コードを変換するプログラムを経由して検索結果ページにジャンプすればいいのです。
(例)検索窓のページ
<form action="文字コードを変換するプログラム.php" target="sita" method="get" name="search_form" id="outbound" style="margin:2px;display:inline;">
<input type="text" name="keyword" size="50">
<input type="submit" name="send" value="検索">
<input type="hidden" name="request_url" value="検索結果のページ">
</form>
(例)文字コードを変換するプログラム.php
$param = "?";
foreach($_GET as $key=>$val){
if($i) $param .= "&";
$param .= "$key=".urlencode(mb_convert_encoding($val,"変換後の文字コード(検索結果のページの文字コード)","変換前の文字コード(検索窓のページの文字コード)"));
$i = true;
}
header("Location: ".$_GET["request_url"].$param);
?>
プログラムは違いますが、根本的には
ここのページと同じ方法です。
勤務表にサインをされる方がCSSでプルダウンが実現できないかとおっしゃり、インターネットで調べて、いくつかCSSでプルダウンを行っているページがありましたが、中にはIE7以上じゃないとプルダウンが動作しないページがありました…。(私の会社ではIE6を使っています。)
勤務表にサインをされる方が紹介して下さったページを参考にして、プルダウンが出来るかどうか調べましたが、上手く行きませんでした…。
私は自分でも調べてみました。
ここのページが使えそうだったので、CSSでプルダウンが出来るかどうか調べました。
プルダウンのデザインに決まりそうだったので、
勤務表にサインをされる方からプルダウンを使ってページの切り替えのデザインから更に3つのパターンのデザインを考えるようにと言われました。
3つのパターンのデザインはhtmlで作る事にしました。(トップページと、サンプルで1つだけ切り替えた後のページを作ります)
3つのパターンのデザインはゴールデンウィーク明けには出来なくてはなりません。
ここのページの文字コードは=shift_jisですが、統合するページの文字コードはutf-8だったのでダウンロードしたサンプルコードのファイルをutf-8で保存しましたが、ダウンロードした時に一緒に付いていたCSSファイルはShift_JISのままですが、CSSファイルの先頭に@charset "utf-8";と付けなければなりません。
それで上手く行きました。
統合するページのトップページだけを作ろうとして、(ポータルサイトを使っている方達に見て頂く為)統合するページのトップページで普通のプルダウンのページが出来たので、統合するページの別のパターンでCSSでプルダウンが出来るかどうか調べてみましたが、統合するページのトップページのレイアウトが崩れてしまいました…。
私はダウンロードしたサンプルコードと統合する前のポータルサイトの1つのページのトップページのソースを見比べてみました。(統合する前のポータルサイトの1つのページのトップページのデザインを参考にしている為)
すると、サンプルコードには<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">があり、統合する前のポータルサイトの1つのページのトップページにはありませんでした。
私は<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">が何なのかをインターネットで調べてみると
ここのページに現在のブラウザの多くはCSS標準に基づいてページを表示するするようになっています。このCSSの標準に準拠して表示するモードを『標準モード』、一方過去のブラウザでも表示できるようなレイアウトで表示するモードを『互換モード』と呼んでいます。
と書かれてあり、
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">は標準モードで、<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">が無い場合か<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
の場合(IEとOPの場合のみ)は互換モードと書かれていました。
私は試しに<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">の互換モードでCSSのプルダウンが上手く行くかどうか試してみたら上手く行ったので、統合するページのトップページで何も無い互換モードでCSSのプルダウンが上手く行くかどうか試してみたら上手く行きましたが、
CSSのプルダウンを作っている間に気になる事がありました。
それは、統合するページのトップページを開くと文字化けが発生し、表示→エンコードでutf-8を選択すると文字化けは直りますが、また新たに統合するページのトップページを開くと文字化けが発生してしまうので、私は過去にもこのような事があったと思い、
硬派迷宮の過去のページに解決ヒントになる事書かれていました。
私が統合するページのトップページに<meta http-equiv="Content-Type" content="text/html; charset=utf-8">を加えると統合するページのトップページを開いても文字化けが発生しなくなりました。
prototype.js でタブ切り替え
http://a-h.parfe.jp/einfach/archives/2006/1012175043.htmlprototype.js でタブ切り替え(複数表示版)
http://a-h.parfe.jp/einfach/archives/2008/0222180032.htmlイヌでもわかるJavaScript講座
http://www.red.oit-net.jp/tatsuya/java/winopen.htmフレームの横幅を変更する方法
http://www5e.biglobe.ne.jp/access_r/hp/javascript/js_063.htmlソースとは異なる文字コードをフォームで受け渡す方法
http://kiriusa.cool.ne.jp/living/webtips/form.htmlIEのFormでaccept-charsetが無視される。
http://www.terut.net/?p=146IEのformで効かないaccept-charsetの文字コード指定を効かすには？
http://gont.net/gontdo/archives/000740.htmlGETとPOSTの違い
http://nyx.pu1.net/practice/external_var/external_var2.php99%CSSプルダウンメニュー for カスタマイズ
http://www.stylish-style.com/csstec/ultimate/css-roll-4.html@charsetでスタイルシートのエンコード（文字コード）を指定
http://template.b-cures.net/dl/stylecss/index3.html標準モードと互換モードについて
http://www.dspt.net/html_tag/mode.html