|
|
| DynamicCGIとは |
| | DynamicCGIとは |
 |
- 現在、インターネットに「ダイナミックCGI」等という言葉はありません。
ここで紹介するダイナミックCGIとは、CGIにスタイルシートと、JavaScriptを生成させて、
今まで不可能だった機能をCGIに実現しようというもので、当サイトが勝手に付けた名称です。
このサンプルをご覧いただければ今までのCGIとの違いは歴然です。 洗練されたデザインだけでなく、
CGIだけでもスタイルシートだけでもJavaScriptだけでも不可能な事が３つの統合で可能になっています。
HTMLでなく、CGIでダイナミックHTMLを生成する事で、
ブラウザの違いをCGIが吸収してほとんどのブラウザから使用できるようになります。
|
| | DynamicHTML |
|
- 従来のHTMLでは単にドキュメントを表示する物で、
動きの有るページを作成するにはせいぜいアニメーション画像を使用したり、
動画を使用する程度でした。
確かに動きは有るのですが、これでは訪問者の要求に答えるインタラクティブ(双方向性)なページとは呼べません。
それに対してCGIは、訪問者の要求に答えて必要とされているページを表示することができますので、
インタラクティブといえます。
当サイトは、これまでCGIでHTMLを生成するスクリプトを紹介してきましたが、CGIはサーバで動作する為、
要求に答える為には一度サーバに要求を伝えなければなりません。
ダイナミックHTMLは、HTMLにスタイルシートを使用してタグをオブジェクトとしてJavaScriptで操作可能にした物です。
ダイナミックHTMLはユーザのブラウザ上で動作しますので、サーバにリクエストを送信する必要がありません。
【DynamicHTMLで出来る事】
- ブラウザを更新せずにフォントの大きさや色を変更できます。
- 文字や画像を動かすことができます。
- 動的に画像や、既に表示されているドキュメントを変更できます。
- ポップアップウィンドウが作成できます。
- 部分的に表示、非表示を指定できます。
- フォームの状態を設定したり、参照できます
【DynamicHTMLの弱点】
- 極端に古いブラウザや、一般的でないブラウザでは動作しない。
- 新しいブラウザでも、訪問者がユーザ設定でJavaを制限していると動作しない。
- ダウンロードしたデータをクライアントで実行させる為、クライアントの性能に左右される
DynamicHTML自体は、MicrosoftInternetExplorer4、NetscapeNavigator4からサポートされていたのですが、
両者の考え方が全く違い、ほとんど互換性が有りませんでした。
互換性がないということはブラウザ毎に実行コードを複数用意しておく必要があり全く普及しませんでした。
そのうち、NetscapeがDynamicHTMLのサポートから撤退した為、さらに利用価値がなくなり、
単純なJavaScriptは使用してもページ全体がDynamicHTMLでできているページも見かけなくなりました。
今回、当サイトがDynamicHTMLのCGIを作成しようとしたのは、Netscape7の登場で、
ほぼMicrosoftInternetExplorer6の機能を持ったことにあります。
本コーナーは、Netscape7、MicrosoftInternetExplorer6以降のブラウザで動作する事を前提に解説しています。
１つしか紹介していないコードは、両ブラウザで動作し、 
が付いているコードはNetscape専用、 はIE専用です。
CGIから使用する場合は、ブラウザを取得し、必要なJavaコードを出力する事で、両ブラウザに対応させます。
実行可能なサンプルが有る場合は、次のように記述してボタンを付けています。
<p>
<div id="layer1" style="DISPLAY: none;Z-INDEX: 1;POSITION:absolute;LEFT:150;TOP:80;" class="close">
<table border="1" bgcolor="#DDFFEE"><tr><td>
これがレイヤーです。<br>
いつでも表示、非表示を切り替える事ができます。
</td></tr></table>
</div>
<p><input type="button" id="button1" value="表示" onclick="show();"></p>
<script Language=javascript>
//-->
function show() {
var objID=document.getElementById('layer1');
var buttonID=document.getElementById('button1');
if(objID.className=='close') {
objID.style.display='block';
objID.className='open';
buttonID.value='非表示';
}else{
objID.style.display='none';
objID.className='close';
buttonID.value='表示';
}
}
//-->
</script>
<p>
|
|
|
|
|
|
|
