子ウィンドウの編集 @ 青木ITプランニング

子ウィンドウの編集

ここでの作業手順は、

2.1 子ウィンドウのサンプルファイルを作業ディレクトリにコピーします。
2.2 <SCRIPT>タグのSRC属性を編集します。
2.3 デザインをカスタマイズします。
2.4 Webサーバーにアップロードします。
2.5 子ウィンドウ単独で表示し、JavaScriptエラーがないことを確認します。

2.1 子ウィンドウのサンプルファイルを作業ディレクトリにコピーする

J-POSTAL配布ディレクトリから、子ウィンドウのサンプルファイルを作業ディレクトリなどにコピーします。

jpostal-1.2
　

jpostal
　　

sample
　　　

jpostal_child.html　　　子ウィンドウのサンプルファイル（このファイルを直接編集しないように！）
　　　

*.html

2.2 <SCRIPT>タグのSRC属性を編集する

作業ディレクトリにコピーした子ウィンドウファイルをテキストエディタで編集します。
ここで重要なことは、子ウィンドウから見た、jpostal の相対パスです。架空のWebサイトでは、../jpostal/
でした。（ステップ０の「図0-4 ３つの要素の位置関係」を参照）

編集前の状態です。 style=”BACKGROUND: #00ccff”>反転表示の４箇所を ../jpostal に修正します。

9: <meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”> 10: <title>J-POSTAL</title> 11: 12: <script src=”../mwlib.js” ></script> 13: <script src=”../jpostal.js” ></script> 14: <script src=”../jpostal_child.js”></script> 15: <script> 16: <!– 17: var jpc_obj; 18: jpc_obj = new JPOSTAL_CHILD_O(); 19: jpc_obj.judge_raw_kanji(‘あいうえお’); 20: jpc_obj.get_arguments(); 21: jpc_obj.include(‘../datajs/%p.js’); 22: // –> 23: </script><script> 24: <!–

編集後の状態です。

9: <meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”> 10: <title>J-POSTAL</title> 11: 12: <script src=”../jpostal/mwlib.js” ></script> 13: <script src=”../jpostal/jpostal.js” ></script> 14: <script src=”../jpostal/jpostal_child.js”></script> 15: <script> 16: <!– 17: var jpc_obj; 18: jpc_obj = new JPOSTAL_CHILD_O(); 19: jpc_obj.judge_raw_kanji(‘あいうえお’); 20: jpc_obj.get_arguments(); 21: jpc_obj.include(‘../jpostal/datajs/%p.js’); 22: // –> 23: </script><script> 24: <!–

2.3. デザインをカスタマイズする

※ヒント！　ステップ３の住所入力フォームの編集が完了し、表示確認できた後に、子ウィンドウのデザインのカスタマイズをしたほうがいいでしょう。
ページ上部、ページ下部の表示内容やレイアウトをカスタマイズします。背景色、画像表示、スタイルシート定義も可能です。

<script>と</script>の範囲は、郵便番号や検索結果件数を表示するスクリプトです。変更しないでください。

46: <!– 47: /*———————————————————— 48: * ページ上部 49: *————————————————————*/ 50: –> 51: <body> 52: <form> 53: <h1>検索結果</h1> 54: 55: 郵便番号 <script>document.write(jpc_obj.POSTCODE);</script><br> 56: <br> 57: 58: 検索結果 <script>document.write(jpc_obj.COUNT);</script> 件<br> 59: <br> 60: 61: <script> 62: if ( jpc_obj.WARNING_RAW_KANJI ) 63: { 64: document.write(‘<’ + ‘b’ + ‘>’); 65: document.write(‘お使いのブラウザでは検索結果が文字化けしている可能性があります。’); 66: document.write(‘文字化けしている場合このウィンドウを閉じてから手動で入力してください。’); 67: document.write(‘<’ + ‘/b’ + ‘>’); 68: document.write(‘<’ + ‘br’ + ‘>’); 69: document.write(‘<’ + ‘br’ + ‘>’); 70: } 71: </script>

152: <!–
153: /*————————————————————
154: * ページ下部
155: * MW Web StudioのCopyrightは削除してもかまいません
156: *————————————————————*/
157: –>
158: <hr>
159: <div align=right>J-POSTAL, Copyright (c) 2003 MW Web Studio</div>
160:
161: </form>
162: </body></html>

ページ中央は、ボタンの表示文字列の変更ができます。その他の部分のカスタマイズをする場合は、関数リファレンスを参考にしてください。

80: // １件も見つからなかった場合の[閉じる]ボタンの表示文字列 81: var CLOSE_BUTTON = “閉じる“; 82: 83: // 見つかった場合の[OK]ボタンと[CANCEL]ボタンの表示文字列 84: var OK_BUTTON = “　ＯＫ　“; 85: var CANCEL_BUTTON = “キャンセル“;

2.4. Webサーバーにアップロードする

http://myserver/mysite/
　

mycorner/
　　

input.html　　

color=#000000>jpostal_child.html　　※アップロード先
　

cgi-bin/
　　

regist.cgi
　

jpostal/　　　　　　　　　※ステップ１でアップロード済み
　　

*.*
　　

datajs/
　　　

*.js
　　

sample/
　　　

*.html

2.5. 子ウィンドウ単独で表示し、JavaScriptエラーがないことを確認する

子ウィンドウのURLは、http://myserver/mysite/mycorner/jpostal_child.html
です。Webブラウザのアドレスバーに直接入力して、表示します。
↓
「検索結果　０件、郵便番号が３桁未満です」と表示されたら、成功です。
表示途中で、JavaScriptエラーの警告ボックスが表示されたら、設定ミスや入力ミスが考えられます。本ステップの「2.2
<SCRIPT>タグのSRC属性を編集する」「2.3 デザインをカスタマイズする」の編集作業を見直してください。
ページが見つかりません、旨のエラーの場合は、アップロード先が間違っているか、アドレスバー入力ミスが考えられます。

Smarty動的webサイト構築入門

・本サイトの紹介ページ