ObjectSample
*このぺージは他のブラウザではご覧になれません
このようにIEの拡張機能とマウスイベントを使ってオブジェクトを制御すれば
インタラクティブなページを作成することができます
しかし、上記のようなDHTMLオブジェクトは他のブラウザでは動作しません
デザイン的要素に重点を置くと閲覧者を限定してしまう結果となるので
アクセスビリティは低くなってしまいます
Object
をデザインする
アクセスビリティが高く、かつインタラクティブなホームページをデザインするには
画像を使う場合でも容量の軽いGIF形式にしたり、代用できる部分は背景色にしたり
プラグインや画像をなるべく使わずに軽く作ることを考えてみましょう
WEBプログラミングの基本はクロスプラットフォームの制御技術にあります
使用するブラウザによる表示の違いを「どう処理するか？」という問題
クリアするには、Ｃ++やJAVAとまでは行かなくても…
多少のプログラミングの知識があれば
テキストベースでもホームページをデザインすることができます
ブラウザ制御には「オブジェクト・プロパティ・メソッド」の３つが必要となります
これらはWEBページを構成する要素を指し示す言葉です
オブジェクト：<h1>などの見出し、<table>で作った表、<img>の画像等は
すべて「オブジェクト」と呼ばれます。これらオブジェクトにはツリー構造を成す
「階層」があり上下関係がDTD宣言で定義されています。一番上にはブラウザのウィンドウを
示すwindowオブジェクトがあり、その下にはページ全体を表すdocumentオブジェクトがあり
直下にbodyオブジェクト…tableオブジェクト…trオブジェクト…tdオブジェクト…のように
上位・下位の関係で配置・構成されています。
Window
|
+ Document <html>
|
+ Head <head> <title>
|
+ Body <body>
|
+ <h1~6>
+ <a>
+ <p>
+ <img>
+ <table>
+ <tr>
+ <td>
プロパティはこれらオブジェクトの性質(サイズ・位置・色)を表します
メソッドはオブジェクトに備わっているさまざまな機能のことです
＊「オブジェクト・プロパティ・メソッド」はそれぞれHTML、CSS、Javascriptの
３つに対応しているのでWEBページをデザインする基本的な考え方は
この他にInternetExpolere独自の拡張機能として以下のようなメソッドがあります
このような機能を利用すれば画像を使わずにオブジェクトをデザインすることが可能です
＊各フィルターはスタイルシートに設定します
dropshadow() : シャドウフィルターよりパラメーターが多い
fliph() : オブジェクトを水平方向に反転させる
flipv() : オブジェクトを垂直方向に反転させる
chroma() : オブジェクトの指定した色だけを透過させる
gray() : 画像をグレースケール表示させる
invert() : 画像のRGBを反転させる
＊メソッドを組み合わせた動的コンテンツ(InternetExpolrer)
次のサンプルは複数のオブジェクトを組み合わせて作った動的コンテンツです
画面上部の画像アニメにカーソルが乗るとサウンドと共にサブウィンドウが開きます
また何もないところで右クリックするとコンテキストメニューが立ち上がります
次のサンプルを参照してください ObjectSample
*このぺージは他のブラウザではご覧になれません
このようにIEの拡張機能とマウスイベントを使ってオブジェクトを制御すれば
インタラクティブなページを作成することができます
しかし、上記のようなDHTMLオブジェクトは他のブラウザでは動作しません
デザイン的要素に重点を置くと閲覧者を限定してしまう結果となるので
アクセスビリティは低くなってしまいます
<!--[if IE]>と<![endif]-->の間に記述されたHTMLやスクリプトは InternetExplorerだけに認識させることができます <!--[if IE]> <link rel="stylesheet" href="object.css" type="text/css"> <![endif]--> IE以外のブラウザ、MozilaやOperaなどでDHTMLを実装したオブジェクトが動かない場合は 共通関数を用いることによって同じように表示することもできます
document.all.item(id).style.プロパティまたはメソッド //IE
document.layers[id].プロパティまたはメソッド //NN4
document.getElementById(id).style.プロパティまたはメソッド //NN6
document.getElementBy～XUL要素の情報の取得や更新
var div = document.getElementById("lyr1");
var index = div.currentIndex;
if(index >= 0){
var item = div.view.getItemAtIndex(index);
if(item.getAttribute("container") != "true"){
var src = item.firstChild.getAttribute("src");
難関はクロスプラットフォームで動作するレイヤーオブジェクトです
DHTMLに対応するブラウザもだいぶ増えてきましたが
それらが全て最新のものであるかどうかまではわかりません
そこでIE4・NN4にも共通の<DIV>タグをレイヤーとして
バージョンの違いをif文を使って条件分岐をし各ブラウザへ対応させます
if(document.layers){
objver=document.layers;
}
else if(document.all){
objver=document.all.tags('DIV');
}
else if(document.getElementsByTagName){
objver=document.getElementsByTagName('DIV');
}
else{
return;
}
// _bro: 1=NN6+, 2=NN4, 3=IE, 4=Opera, 0=others
_bro=(window.opera?4:(document.all?3:(document.getElementById?1:(document.layers?2:0))));
// _ie5: true=IE5+
_ie5=(navigator.appName.indexOf('Microsoft Internet Explorer')>=0
&& document.getElementById)?true:false;
// _mac : true = macintosh, false = other os
_mac=navigator.userAgent.indexOf('Mac')>=0;
＊注意する点
IE以外のブラウザを使用しているエンドユーザーの多くは動的なDHTMLや
ActiveXなどのプラグインを嫌がる場合も少なくありません
よほど重要な内容を掲載しているコンテンツでもない限り
強制的に同じような表示をさせる事はあまり好ましいとは言えません
そのような場合はブラウザごとに別ファイルを用意する配慮が必要です
一般的には条件処理をヘッダーに置いて別ページにジャンプさせます
app=navigator.appName.charAt(0);
ver=navigator.appVersion.charAt(0);
if((app=="M")||(app=="N")){
if(ver>4){
location.href="./index1.html";
}
else if(ver<4){
location.href="./index2.html";
}
}
else{
location.href="../index3.html";
}
XMLのコメントタグを使ってInternetExplorerだけに認識させます
<!--[if IE]>
<script type=text/javascript>
app=navigator.appName.charAt(0);
ver=navigator.appVersion.charAt(0);
if(app=="M"){
if(ver>4){
location.href="./index1.html";
}
else if(ver<4){
location.href="./index2.html";
}
}
else{
location.href="../index3.html";
}
</script>
<![endif]-->
以上の点を踏まえた上で対象とするブラウザを想定し
オブジェクトのデザインを考えるというのが本稿の狙いです
スタイルシートを使う場合
１．タグ内に記述する （部分的にデザインを変更するのに有利）
２．ヘッダーに設定する（ページ事に違うデザインにする際など）
３．外部ファイルとして組み込む（サイト全体のデザインを統一する場合）
の３通りがあります
現在最も広く採用されているのがページ内に記述する方法です
デザインの細部まで作り込むにはスタイルシートを外部ファイルとして
別に用意する方が更新もしやすくソースコードも簡略化できる利点があります
HTMLで示されるタグは全てオブジェクトとして扱うことができます
デザインスタイルを構築するにはスタイルシートにクラスを定義します
BODY{ } というようにオブジェクト名の後に{ }カッコを付け
{ }の中に定義します
HTMLへの実装には予めプロパティが用意されています
文字色を変更したい場合color=#ff0000とするように
スタイルシートも同じように記述しますが
定義には＝や"´クォートを使わず:や;を使います
body{ color:#ffffff; background:#000000;} と定義した場合
このオブジェクトの背景は「黒」文字は「白」として表示されます
クラスとは「プログラムの仕様をまとめた指示書」のようなもので
HTMLもある意味でひとつのクラスと捉えることができます
プログラミング言語と違う点は四則演算や条件処理ができないので
メソッドにはJavascriptやCGIなどのスクリプトを必要とする点です
複数の要素を同時にデザインするには新しいクラスの定義をします
任意のクラス名の前に.ピリオドをつけて処理の内容を記述し
実装するタグの中にclass="クラス名"とすることで反映されます
classで指定されたタグは全て同じ処理をされ
クラスのスタイルは同一ファイル内に何回でも使用できます
＊新しいクラスの定義
.obj{ color:#00ff00; background:#ffffff;}
<font class=obj> New Class </font>
<font class=obj> New Title </font>
<font class=obj> New Subject </font>
スタイルシートを使えば他のタグでも同じ結果が得られますが
複雑な段組や長い構文を記述するには用途に応じたタグを使い分けると
GREP検索などにも対応するのでHTML定義を十分に活用しましょう
#obj{ color:#ffffff; background:#00ff00;}
<font id=obj> New Class </font>
定義されたクラスは固有の識別名(id)を付けることもできます
先頭に＃を付け上記のようにするとid=""で指定されたタグだけを処理します
また定義クラスの継承も.を付けることによって可能となります
＊<HR>にスタイルシートを設定した例
.hr1{border:2px solid #ddd;padding:1px;background:#eee;height:8px;}.hr2{border:2px dotted #ccc;padding:1px;background:#fff;height:8px;}
.hr3{border:2px outset #900;padding:1px;background:#ee6;height:8px;}
.hr4{border:2px inset #eff;padding:1px;background:#fef;height:8px;}
.hr5{border:2px ridge #ddd;padding:1px;background:#fff;height:8px;}
＊次の項では実際にスタイルシートを使ったデザインオブジェクトを解説します
ロールオーバーはリンクにカーソルが乗った時に画像を変化させるスクリプトです 最も画像が使われる箇所にリンクボタンなどがありますが どんなにファイルを軽くしたとしても読み込む時のタイムラグがあります ADSL接続や光ファイバーなど高速回線を利用している環境では問題ありませんが モバイルの無線LANやダイアルアップを使った接続では、かなり重くなります またサーバーが込み合っている場合、表示はさらに遅くなります こうした問題を回避するために、ロールオーバーオブジェクトを考えてみましょう ＊イメージオブジェクトを使ったロールオーバーオブジェクト 次のサンプルを参照してください
| Contents | |
| News&Topics | |
ObjectSample
＊注意する点は、リンクの文字列に使うフォントを汎用性のあるフォントにすることです
OSによって使えるフォントにも違いがあるので、統一されたデザインにしたい場合は
次の項を参照してください
Webをイメージ戦略として考えたコンテンツ制作には、スタイルシートの使用が前提となります
特に、企業や商用サイトでは、商品や企業のイメージをページデザインに置き換えることで利用者に
なるべく良い印象を持ってもらうということが当然の課題となります。
文書で補えない分を画像で補ったり、ページ全体のレイアウトや文字色も大切な要素となります。
またインターフェース上の「見栄えの違い」や「レイアウトの崩れ」を最小限に押さえることは
優先課題でもあり、Web設計の基本として今だに開発が続いているといった状況です。
一般的な方法に、Javascriptを使ってブラウザ情報を調べ、各ブラウザ別に用意したスタイルシート
を使用環境ごとに、if文を使ってヘッダーへ動的に出力する技術があります。
以下は簡単な例ですが、Javascriptがオフにでもされていない限り大抵のブラウザで動作するので
なかなか使い回しの利くソースです。それぞれのＯＳやブラウザに対応したスタイルシートを作成
するためには、動作確認するための環境も用意しなければなりませんが、現況のシェア率から見て
最低限、WindowsとMacに対応できていれば、良しとするべきでしょう
<script type="text/javascript"><!--
var useEnv = navigator.userAgent;
var macOs = (useEnv.indexOf('Mac')!=-1);
var winOs = (useEnv.indexOf('Win')!=-1);
var ie5 = (useEnv.indexOf('MSIE')!=-1);
var ns6 = (useEnv.indexOf('Gecko')!=-1);
if(macOs){
if(ie5){
document.write ('<link rel="stylesheet" href="css/mie.css" type="text/css">')
}else if(ns6){
document.write ('<link rel="stylesheet" href="css/mns.css" type="text/css">')
}else{
document.write ('<link rel="stylesheet" href="css/other.css" type="text/css">')
}
}else{
if(ie5){
document.write ('<link rel="stylesheet" href="css/wie.css" type="text/css">')
}else if(ns6){
document.write ('<link rel="stylesheet" href="css/wns.css" type="text/css">')
}else{
document.write ('<link rel="stylesheet" href="css/other.css" type="text/css">')
}
}
--></script>
フォントにスタイルを設定してデザインしている場合、OSやブラウザによる
表示の違いは、そのままサイトのイメージダウンになってしまうことがあります
ブラウザ別に対応する文字制御はJavascriptとCSSを使えば実現が可能です
以下に紹介するファイルソースを試してみてください
---------------------------------------------------------------------------
webfont.html
---------------------------------------------------------------------------
<html><head><title>ブラウザ別に文字を制御する</title>
<link href="./css/default.css" rel="stylesheet" type="text/css">
<script src="./jvs/webfont.js" type="text/javascript"></script>
</head><body>
<div class="f1j"> FONT1 <br>
基本的な文字制御はJavascriptとCSSを使えば実現できます
</div><br>
<div class="f2j"> FONT2 <br>
基本的な文字制御はJavascriptとCSSを使えば実現できます
</div><br>
<div class="f3j"> FONT3 <br>
基本的な文字制御はJavascriptとCSSを使えば実現できます
</div><br>
<div class="f4j"> FONT4 <br>
基本的な文字制御はJavascriptとCSSを使えば実現できます
</div><br>
<div class="f5e"> FONT5 <br>
基本的な文字制御はJavascriptとCSSを使えば実現できます
</div><br>
<div class="f6e"> FONT6 <br>
基本的な文字制御はJavascriptとCSSを使えば実現できます
</div><br>
<div class="f7e"> FONT7 <br>
基本的な文字制御はJavascriptとCSSを使えば実現できます
</div><br>
<div class="f8e"> FONT8 <br>
基本的な文字制御はJavascriptとCSSを使えば実現できます
</div><br>
</body></html>
---------------------------------------------------------------------------
default.css
---------------------------------------------------------------------------
body{color:#000;background:#fff;margin-left:10px;margin-top:10px;}
a{text-decoration:underline;}
a:hover{color:#00f;text-decoration:none;}
.f1j,.f2j,.f3j,.f4j{font-family:Osaka,MS Pgothic,MS UI gothic,sans-serif}
.f5e,.f6e,.f7e,.f8e{font-family:Arial,Verdana,sans-serif;}
---------------------------------------------------------------------------
webfont.js
---------------------------------------------------------------------------
var vN = navigator.appVersion.charAt(0);
var bN = navigator.appName.chartAt(0);
if (bN == "M" && vN < 4)
location.href="plaintext.html";
if (bN == "N" && vN <4)
location.href="plaintext.html";
document.writeln("<style type='text/css'><!--");
if(navigator.appVersion.indexOf("Mac") > -1){
if(bN == "M"){ //Mac IE
document.writeln(".f1j{font-size:9px;}");
document.writeln(".f2j{font-size:10px;}");
document.writeln(".f3j{font-size:12px;}");
document.writeln(".f4j{font-size:14px;}");
document.writeln(".f5e{font-size:9px;}");
document.writeln(".f6e{font-size:10px;}");
document.writeln(".f7e{font-size:12px;}");
document.writeln(".f8e{font-size:14px;}");
}
else{
if(vN < 5){ // Mac NN4x
document.writeln(".f1j{font-size:9px;}");
document.writeln(".f2j{font-size:10px;}");
document.writeln(".f3j{font-size:12px;}");
document.writeln(".f4j{font-size:14px;}");
document.writeln(".f5e{font-size:9px;}");
document.writeln(".f6e{font-size:10px;}");
document.writeln(".f7e{font-size:12px;}");
document.writeln(".f8e{font-size:14px;}");
}
else{ // Mac NN6x
document.writeln(".f1j{font-size:9px;}");
document.writeln(".f2j{font-size:10px;}");
document.writeln(".f3j{font-size:12px;}");
document.writeln(".f4j{font-size:14px;}");
document.writeln(".f5e{font-size:9px;}");
document.writeln(".f6e{font-size:10px;}");
document.writeln(".f7e{font-size:12px;}");
document.writeln(".f8e{font-size:14px;}");
}
}
}
else{
if(bN == "M"){ // Win IE
document.writeln(".f1j{font-size:9px;}");
document.writeln(".f2j{font-size:10px;}");
document.writeln(".f3j{font-size:12px;}");
document.writeln(".f4j{font-size:14px;}");
document.writeln(".f5e{font-size:9px;}");
document.writeln(".f6e{font-size:10px;}");
document.writeln(".f7e{font-size:12px;}");
document.writeln(".f8e{font-size:14px;}");
}
else{
if(vN > 5){ // Win NN4x
document.writeln(".f1j{font-size:9px;}");
document.writeln(".f2j{font-size:10px;}");
document.writeln(".f3j{font-size:12px;}");
document.writeln(".f4j{font-size:14px;}");
document.writeln(".f5e{font-size:9px;}");
document.writeln(".f6e{font-size:10px;}");
document.writeln(".f7e{font-size:12px;}");
document.writeln(".f8e{font-size:14px;}");
}
else{ // Win NN6x
document.writeln(".f1j{font-size:9px;}");
document.writeln(".f2j{font-size:10px;}");
document.writeln(".f3j{font-size:12px;}");
document.writeln(".f4j{font-size:14px;}");
document.writeln(".f5e{font-size:9px;}");
document.writeln(".f6e{font-size:10px;}");
document.writeln(".f7e{font-size:12px;}");
document.writeln(".f8e{font-size:14px;}");
}
}
}
document.writeln("--></style>");
---------------------------------------------------------------------------
ただし強制的に同じ表示をさせるので、ユーザー側がブラウザを使って
文字サイズを変更することができなくなるという不具合も生じてきます
デザインする上ではそうした点を踏まえてスタイルシートを使うことが前提となります
またスタイルシートをサポートしていないブラウザの場合
エンドユーザーが携帯やテキストブラウザを使用していたり
またモニターの解像度やOSのバージョンに違いがあったりするので
せっかくデザインをしても反映されない点を考慮しなければなりません
現在ほとんどのブラウザでスタイルシートがサポートされていますが
上述のような環境においてはデザインはあくまで付加価値ですから
コンテンツやデフォルト(標準設定)機能を生かしユーザー定義を優先させます
スクリプトに対応しないブラウザへは<META>タグで対応させます
<META http-equiv="refresh" content="0;URL=http://www.xxx.com/noBro/plaintext.html">
<NOSCRIPT>タグでテキスト形式のページへ誘導ジャンプさせます
スクリプト未対応のブラウザは画像を見るためのアプリケーションというより
主にデータ入力やファイル管理などデータソースアクセスを目的としています
また外部ファイルに分けることで必要のないデザインファイルを読み込まず
ファイル内のテキストデータだけを表示させると
結果的にパケットの送受信もスムースになり表示も速くなります
テーマは何を選んでも構いません 季節や風景など身の回りにある事柄 社会的状況やスポーツ…etc <META name="keyword" content="銀河鉄道の夜"> テーマはネット上に公開する場合のメタ情報にもなります 検索対象としてキーワードにも使用するものが良いでしょう ------------------------------------------------- 宮沢賢治「銀河鉄道の夜」を題材としてイメージ化した例 □「銀河鉄道の夜」 ▽ イメージされる色・形・動き ▽ 移動しながら送信できるフォーム ▽ 最終的に出力されるソース 「移動オブジェクト型フォームメール」 -------------------------------------------------
オブジェクトデザインはコンテンツの目的や内容に応じてデザイン設計します上のオブジェクトは
HTMLタグは予約語によって仕様が定義されています これらの定義済みのクラス(タグ)に新たな属性を付け加えて 出力することをスタイルシートでは「クラスの継承」と呼びます <H1>というタグはデフォルトでは以下のように表示されます <H1>Artopix</H1>Artopix
タイトル・見出し用タグはデフォルト(標準)では 文字サイズ・太字・改行などが予め定義されています このタグに枠線という属性を追加して新たに<H1>タグを定義すると <H1>で配置される文字列は全て枠線付きで表示されます しかしページ内に<H1>タグで配置される文字列が複数ある時など 内容によっては枠線や文字装飾を変更した方がいい場合があります その場合は各文字列ごとにクラスを設定し直す方法もありますが 項目ごとに定義しなければならないのでたいへんな作業となります Extends「継承」は同一タグを複数使った場合でも同じ属性を引き継ぐので 属性の追加・変更を行うだけで違うデザインにすることができます 例えば<H2>タグを新たに定義して出力すると 配置される文字列は以下のように表示されます <H2>Contents</H2> H2 { color:#fff; font-family:Times New Roman; font-size:24pt; font-weight:normal; font-style:italic; background:#00C; border:4px outset; width:128; text-align:center; }Contents
同一タグで複数のデザインを設定するには 属性を部分的に変更したサブクラスを実装します <H2 class="sub1">Subject</H2> H2.sub1 { font-size:16pt; background:#080; border-width:3px; width:96; }Object
<H2 class="sub2">link</H2> H2.sub2 { font-size:10pt; background:#800; border-width:1px; width:64; }link
Extends「継承」を利用すると前項で定義した属性を そのまま引き継いで出力します このようにあらかじめ定義されたクラスは「親クラス」 「親クラス」を継承して定義されたサブクラスは「子クラス」と呼ばれます クラスの実装が理解できたところで具体的なオブジェクトの設計に入ります
スタイルシートオブジェクトをHTMLタグに組み込み
設定値を変更しながら細部をデザインします
<form method=post action="http://www.xxx.com/cgi-bin/mail.cgi">
<input type=text name="hitokoto" size=40>
<input type=submit value="OK">
<input type=reset value="NO">
</form>
#obj{
color:#fff;
background:#ccc;
font-family:Georgia;
border:2px outset #eee;
padding:5px;
width:320;
}
<div id=obj>
<form method=post action="http://www.xxx.com/cgi-bin/mail.cgi">
<input type=text name="hitokoto" size=40>
<input type=submit value="OK">
<input type=reset value="NO">
</form>
</div>
input.text{
color:#006;
background:#fff;
border:1px solid #666;
}
input.btn{
color:#006;
background:#ddd;
font-family:Georgia;
border:1px solid #666;
}
<div id=obj>
<form method=post action="http://www.xxx.com/cgi-bin/mail.cgi">
<input type=text name="hitokoto" size=40 class="text">
<input type=submit value="OK" class="btn">
<input type=reset value="NO" class="btn">
</form>
</div>
スタイルシートによるクラスの実装が理解できれば
大まかなデザイン変更は意外と簡単にできると思います
さらに細部の作り込みをする場合は
background:url('mail_bg.jpg')
属性値に画像を指定すれば好みのデザインでフォームメールが作成できます
ObjectSample
画像の作成には画像ソフトのスキルも必要です
また同一ファイル上にたくさんの画像を配置した場合
サーバーにアクセスが集中した時にタイムアウトが発生したり
環境によってはフリーズすることもあります
こうした問題を回避するにはある程度デザイン部分を犠牲にして
軽量化を図ることが一番良い方法ですが
テキストベースのデータでオブジェクトを表現すれば
非常に軽く表示もスムースになります
ObjectSample
グラデーションを使ってオブジェクトを立体的に表現する方法
ネスト(入れ子)したタグにクラスを実装し背景色に変化をつけます
画像を使った時のような効果は期待できませんが
ネストの数を多くすればかなり滑らかな表現が可能になります
この他にサポートされているブラウザは限定されてしまいますが
一般的にVMLやSVGという技術もあります
＊VML(ベクターグラフィックマークアップ言語)は
Webページ上で画像を線や円などのベクター形式で表示するための言語です
IE5.0以降のブラウザでサポートされ、XMLの言語仕様で定義されるタグとプロパティ
によって図形を表現することができます。
またJavascriptを使って簡単に図形を変化させることができます
＊SVG
現在正式に標準規格として承認されたのがSVG(Scalable Vector Graphics)です
VMLと同じくXMLのタグを用いた仕様になっています
またプラグインを使えば多くのブラウザで表示が可能になります
移動オブジェクトを実現するにはレイヤー機能を使います
IEではすべてのタグをレイヤーとして指定できます
＊マウスイベントを使ってレイヤーを移動させる
メソッドは他にもいろいろありますが
基本的にはカーソルがクリックされた位置から
移動した分のピクセルを計算させ元の値に足します
＊スクリプト部分
<script type=text/javascript><!--
var xy=0
var x1,y1,x2,y2;
function mouseDown()
{
if(xy==1)
{
x1=event.clientX
y1=event.clientY
}
}
function mouseMove()
{
if(xy==1)
{
x2=event.clientX
y2=event.clientY
obj.style.pixelLeft+=x2-x1
obj.style.pixelTop+=y2-y1
x1=x2
y1=y2
}
}
function mouseUp(){
xy=null;
}
document.onmousedown=mouseDown
document.onmousemove=mouseMove
document.onmouseup=mouseUp
//--></script>
スタイルシート部分
<style type=text/css><!--
#obj{position:absolute;top:0px;left:0px;}
--></style>
HTML部分
<h1 id=obj onmousedown="xy=1" onmouseup="xy=0" onmousemove="returnValue=0">
□オブジェクト□
</h1>
＊以上が基本的なオブジェクトの設計構造ですが、スクリプト部分はIE上でしか動作しません
クロスプラットフォームで動作させるには、前項で述べた汎用の移動レイヤを組み込みます
---------------------------------------------------------------------------
movingmail.css
---------------------------------------------------------------------------
body{color:#fff;background:#000;}
#movTab{position:absolute;top:0px;left:0px;border:1px #404040 solid;cursor:crosshair;}
.onemail{color:#fff;background:#000;border:1px solid #ccc;}
.btn1{color:#fff;border:1px solid #fff;background:#000;cursor:hand;}
.fon1{color:#C00;font-family:Georgia,sans-serif;font-size:16pt;}
.fon2{color:#666;font-family:Georgia;font-size:14pt;}
.fon3{color:#888;font-family:Georgia;font-size:20pt;}
.fon4{color:#C00;font-family:Georgia;font-size:18pt;}
table.bgc1{background:#666;width:256;}
table.bgc2{background:#999;}
tr.bgc1{background:#000;}
td.bgc1{background:#fff;}
td.bgc2{background:#ddd;}
td.bgc3{background:#bbb;}
td.bgc4{background:#999;}
td.bgc5{background:#888;}
td.bgc6{background:#777;}
td.bgc7{background:#666;}
td.bgc8{background:#555;}
td.bgc9{background:#444;}
td.bgc10{background:#333;}
td.bgc11{background:#000;}
---------------------------------------------------------------------------
movingmail.js
---------------------------------------------------------------------------
/*-------------------Mouse_Move_共通関数-------------------------*/
var obj;
var offsetX;
var offsetY;
function movObj(){
if(document.layers){
objver=document.layers;
}
else if(document.all){
objver=document.all.tags('div');
}
else if(document.getElementsByTagName){
objver=document.getElementsByTagName('div');
}
else{
return;
}
for(i=0; i<objver.length; i++){
if (document.layers) {
objver[i].captureEvents(Event.MOUSEDOWN);
}
objver[i].onmousedown=onMouseDown;
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousemove=onMouseMove;
document.onmouseup=onMouseUp;
}
function onMouseDown(e){
obj=this;
if(document.layers){
offsetX=e.layerX;
offsetY=e.layerY;
}
else if(document.all){
offsetX=event.offsetX+2;
offsetY=event.offsetY+2;
}
else if(obj.getElementsByTagName){
offsetX=e.pageX-parseInt(obj.style.left);
offsetY=e.pageY-parseInt(obj.style.top);
}
return false;
}
function onMouseMove(e){
if(!obj){
return true;
}
if(document.layers){
obj.pageX=e.pageX-offsetX;
obj.pageY=e.pageY-offsetY;
}else if(document.all){
obj.style.left=event.clientX-offsetX+document.body.scrollLeft;
obj.style.top=event.clientY-offsetY+document.body.scrollTop;
}else if(obj.getElementsByTagName){
obj.style.left=e.pageX-offsetX;
obj.style.top=e.pageY-offsetY;
}
return false;
}
function onMouseUp(e){
obj=null;
}
---------------------------------------------------------------------------
movingmail.html
---------------------------------------------------------------------------
<!-----------------------------------Header_Start------------------------------>
<html><head><title>ARTOPIX/MovingMailObject</title>
<meta http-equiv=content-type content=text/html;charset=shift_jis>
<meta http-equiv=content-style-type content=text/css>
<meta http-equiv=content-script-type content=text/javascript>
<link rel="stylesheet" href="movingmail.css">
<script src="movingmail.js" type="text/javascript"></script></head>
<body onload="movObj();" text=#ffffff bgcolor=#000000>
<!-----------------------------------Header_End--------------------------------->
<!-----------------------------------Main_Object-------------------------------->
<div style="position:absolute;top:10;left:10;">
<form action="使用するCGIスクリプトのURL" method="post">
<table id="movTab" width=520 cellspacing=2 cellpadding=2 border=1 bordercolor=#ffffff>
<tr><td width=360 height=50 align=right valign=middle nowrap>
<font face=Georgia>OnelineMail </font><br>
<input type=text name="comment" size=50 class="onemail" value="■これはサンプルです">
<input type=submit value="送信" class="btn1" onmouseOver="this.style.background='#C00'"
onmouseOut="this.style.background='#000'">
<input type=reset value="中止" class="btn1" onmouseOver="this.style.background='#C00'"
onmouseOut="this.style.background='#000'"> </td>
<td width=140 height=50 align=center>
<font class="fon1">ARTOPIX</font></td>
<td class=bgc2 width=6 height=50></td>
<td class=bgc4 width=4 height=50></td></tr>
<tr><td class="bgc1" height=6></td><td class="bgc2"></td>
<td class=bgc3></td><td class="bgc4"></td></tr>
<tr><td class="bgc4" height=4></td><td class="bgc5"></td>
<td class="bgc6"></td><td class=bgc7></td></tr>
<tr><td class=bgc7 height=4></td><td class="bgc8"></td>
<td class="bgc9"></td><td class="bgc10"></td></tr>
</table></form></div>
<!-----------------------------Main_Object_End---------------------------------->
<!----------------------------Footer_Space-------------------------------------->
<font class="fon2">WebDesign<font class="fon3">&</font>Graphics
<font class="fon4">Artopix </font>All Rights Reserved.</font>
</body></html>
以上までが、移動レイヤを使ったメールフォームのソースコードです
次に、複数のオブジェクトを組み合わせて、具体的なコンテンツの製作に移ります
各パーツをページ上へレイアウトする前に、全体の構成と大まかな背景を考えてみましょう
一般的なWEBデザインは2次元グラフィック的要素を基本として 平面の構成に重点を置いて組み立てますが ここではWEBページに遠近法的表現を取り入れ立体的なコンテンツを作成します 平面的なウィンドウを立体的に見せるには 視覚的なオブジェクトを相対させ遠近感を出します １．手前にある物は鮮明に見え離れている物はぼやけて見える ２．近くにある物は大きく見え遠くにあれば小さく見える ３．対角線上に配置すると奥行きがあるように見える ４．コントラストの弱いものは奥へ強いものは手前に見える ５．赤→緑→青のRGBでは赤は近く見え青は遠く見える 実際に視覚的な違いはどのように見えるのでしょうか？ 次のサンプルを参照してください
RGB(Red Green Blue)は光源を用いた投影による色彩表現法 CMYK(Cyan Magenta Yellow Black)はインク(あるいは焼付け)による転写による色彩表現法 一般的に、光源法(RGB)と原色法(CMYK)と呼ばれる２種類のバリエーションがあり RGBはスクリーンやモニター画像、CMYKはプリント印刷などの色を表現する場合に使われます インターネット上のWebコンテンツはモニターの光源によって色を表現しますので RGBを使った色彩表現に慣れておく必要があります ３Ｄ的なオブジェクトを表現するには、色の深さ(色深度)を利用します RGBを３次元軸上に並べると赤・緑・青の順にモニター画面奥へ配置されます これは光の波長の長さの違いによるもので 光源から赤は画面手前まで届き、青は逆に届きにくくなります RGBの構造モデル つまり…「前景色が赤 背景色が青」の場合が最も奥行きを感じさせることになります こうした見る側の視覚特性を生かし、前項で述べた遠近法的表現に色彩を加えます 次のサンプルを参照してください
では…これまでの技術を応用して、トップバナーにロールオーバーオブジェクトを組み込み いよいよ立体的なナビゲーションバーを実現させます …注意する点は… バナーとリンクボタンのソースコードはそれぞれ別のファイルに一度作り 動作確認を行ってから組み込むようにすると、比較的簡単に構築できます 前項の「ロールオーバーオブジェトの構築」で述べた、リンクボタンを横長に改良します 次のサンプルを参照してください
それでは、フレームセットの設計を概念図を使って、視覚的に考えてみましょうファイルを階層順に見ていくと閲覧者から見て、もっとも上位の位置にあるのが index.html です しかし実際に表示されているのは、そのすぐ下の head.html・body.html ２ファイルになります 最初に読み込まれるインデックスファイル(この図の場合)にはメタ情報やブラウザ別の条件処理 フレームセットに対応しないブラウザ(携帯等)からのアクセスを考え、テキストによるサイト情報 や文書などを記述しておきます。 □ index.html ===================================================================== <html> <head><title>Artopix/Index</title> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <script type="text/javascript"> <!-- app=navigator.appName.charAt(0); ver=navigator.appVersion.charAt(0); if(app=="N"){ if(ver==4){ location.href="./index_ns4.html"; } } //--> </script></head> <frameset frameborder=0 border=0 rows="60,*"> <frame src="head.html" frameborder=0 border=0 name=head> <frame src="body.html" frameborder=0 border=0 name=body> </frameset><noframes><body> <h1>* 軽量ホームページを作るための基礎的なWEB技術について情報を公開しています *</h1> <pre> +-------------------------------------------------------------------------------+ □フレーム未対応のブラウザをご使用の場合はこちらのリンクからどうぞ +-------------------------------------------------------------------------------+ <b>▽Contents/目次</b> ＋ ▽ ＋/<a href="./contents/start.html" title="このサイトについて">About this site</a> ＋/<a href="./contents/text_obj.html" title="テキストベースを知る">Text Tips</a> ＋/<a href="./contents/object.html" title="オブジェクトをデザインする">Design Object</a> ＋/<a href="./contents/design.html" title="デザインサンプル">Sample design</a> </pre></body></noframes> </html> ===================================================================== index.html □ ＊タグのプロパティは変更せずに、リンク内容は明確に、文書は簡潔にまとめておきましょう ナビゲーション部分は scrnavi.js・navibar.css・head.html の３つのファイルから構成されます デザイン的要素を持ったナビゲーションオブジェクトは、読み込みを早くするために パケット単位に分散させ、別ファイルからスクリプトを使ってHTMLを書き出します 喩えるなら建築に相当します…窓のある壁をイメージしてみてください このような構造物を造る場合、まず最初に、壁を組み立てた後 予め用意しておいた窓を取り付けるといった作業工程が考えられます オブジェクトも窓のようにひとつの規格品として処理をまとめておくと 後はファイルを呼び出すだけで何回でも利用することができます 前項で解説したロールオーバーオブジェクトをJavascriptのwriteln()メソッドを使って スクリプトファイルから出力をさせ、デザインはスタイルシートを別ファイルにして読み込み スクリプトから出力するHTMLのデザインスタイルも同じファイルに記述をします またHTML(ヘッド)ファイルは見出し(タイトル)とテーブルタグだけを記述します タグによって土台（配置情報）が決められ、スクリプトによってオブジェクトが組み込まれ デザインファイルが体裁を整えるという仕組みになります □ scrnavi.js ===================================================================== function scrNavi(){ document.writeln("<td width='8' height='10' class='td10'></td>"); document.writeln("<td width='60' class='td11'> Contents</td>"); document.writeln("<td width='8' height='10' class='td12'></td>"); document.writeln("<td width='50' onmouseover='chg(this)' onmouseout='rtn(this)' onClick='clk(this)' class='td13'><a href='#'> Topics</a></td>"); document.writeln("<td width='8' height='10' class='td12'></td>"); document.writeln("<td width='50' onmouseover='chg(this)' onmouseout='rtn(this)' onClick='clk(this)' class='td13'><a href='#'> Photo</a></td>"); document.writeln("<td width='8' height='10' class='td12'></td>"); document.writeln("<td width='50' onmouseover='chg(this)' onmouseout='rtn(this)' onClick='clk(this);' class='td13'><a href='#'> BBS</a></td>"); document.writeln("<td width='8' height='10' class='td12'></td>"); document.writeln("<td width='50' onmouseover='chg(this)' onmouseout='rtn(this)' onClick='clk(this)' class='td13'><a href='#'> Mail</a></td>"); document.writeln("<td width='8' height='10' class='td12'></td>"); document.writeln("<td width='40' height='10' class='td13'></td>"); } //*--------------------------// Roll Over Function //---------------------------*// function chg(i){i.style.background='#CCC';} function rtn(i){i.style.background='#444';} function clk(i){i.style.background='#C00';} □ navibar.css ===================================================================== body {color:#009;background:#d0d0d0;} h1 {color:#003;font-weight:normal;font-family:Georgia,Helvetica,sans-serif;} h2 {color:#00e;font-size:32px;font-weight:normal; font-family:Georgia,Helvetica,sans-serif;margin-top:-40px;margin-left:10px;} h3 {color:#B41900;font-size:32px;font-weight:normal; font-family:Georgia,Helvetica,sans-serif; margin-top:-10px;margin-left:10px;margin-bottom:0px;} .pos1{z-index:1;position:absolute;top:25px;left:0px;} .pos2{z-index:0;position:absolute;top:0px;left:0px;} .pos3{z-index:0;margin-top:100;} .td1 {background:#ccc;} .td2 {background:#bbb;} .td3 {background:#aaa;} .td4 {background:#999;} .td5 {background:#888;} .td6 {background:#777;} .td7 {background:#666;} .td8 {background:#555;} .td9 {background:#444;text-indent:120px;color:#900;} .td10{background:#f00;} .td11{color:#fff;font-family:Arial,sans-serif; font-weight:bold;font-size:9pt;background:#A00;} .td12{background:#666;} .td13{background:#444;} .td14{background:#555;} .td15{background:#555;} .td16{background:#555;} .td17{background:#555;} .td18{background:#555;} .td19{background:#555;} .td20{background:#555;} .td21{background:#555;} .fnt1{color:#fff;font-family:Arial,sans-serif;font-size:11pt;} a {color:#fff;text-decoration:none; font-family:Arial,sans-serif;font-weight:bold;font-size:9pt;} □ head.html ===================================================================== <html><head><title>ObjectDesign/Head File</title> <meta http-equiv=content-type content=text/html;charset=shift_jis> <link href=./css/navibar.css rel=stylesheet type=text/css> <script src=./jvs/scrnavi.js type=text/javascript></script> </head><body><h3 class="pos1">Artopix</h3> <div class="pos2"> <table cellpadding=0 cellspacing=0> <tr><td width=800 height=3 class="td1" colspan="13"></td></tr> <tr><td width=800 height=3 class="td2" colspan="13"></td></tr> <tr><td width=800 height=3 class="td3" colspan="13"></td></tr> <tr><td width=800 height=3 class="td4" colspan="13"></td></tr> <tr><td width=800 height=3 class="td5" colspan="13"></td></tr> <tr><td width=800 height=3 class="td6" colspan="13"></td></tr> <tr><td width=800 height=3 class="td7" colspan="13"></td></tr> <tr><td width=800 height=3 class="td8" colspan="13"></td></tr> <tr><td width=800 height=3 class="td9">WebDesign&Programming</td> <!--+---------------------------// Navigation Bar //---------------------------+--> <script type="text/javascript">scrNavi()</script> <!--+---------------------------// Navigation Bar //---------------------------+--> </tr> <tr><td width=800 height=3 class="td8" colspan="13"></td></tr> <tr><td width=800 height=3 class="td7" colspan="13"></td></tr> <tr><td width=800 height=3 class="td6" colspan="13"></td></tr> <tr><td width=800 height=3 class="td5" colspan="13"></td></tr> <tr><td width=800 height=3 class="td4" colspan="13"></td></tr> <tr><td width=800 height=3 class="td3" colspan="13"></td></tr> </table> </div> </body></html> =====================================================================
前項では、フレームタグによる各処理の分割について説明をしました。 本来のフレームセットは、複数のコンテンツページを同一ブラウザ上に表示させることを目的として 設計されているようなのでタグの定義からすれば、あまり正しい使い方とは言えません これはインラインフレームも同様に、複合ドメイン型コンテンツを構築するための設計思想ですが 例えば混在したコンテンツを構築する場合、１ページ中に複数のオブジェクトが存在していると 管理や更新等にいろいろと不具合が生じます。そこで画面を分割し、ナビゲーションメニュー・広告用 バナー・本文等を別々のドメインに分け、それぞれを独立したサイトとして作業を分担して運営・管理 して行くというものです わかり易く言えば、ナビゲーションメニューはＡ社がファイル管理を行い、広告用バナーはＢ社 本文のデザインや更新はＣ社が行い、それぞれをまとめて単一コンテンツとして扱うという意味です。 実際は、あまりそのような使われ方はしませんが、作業を分担できるという点ではとても便利なタグと言えます また個人のホームページやＨＰ作成ソフト等、かなり多くのケースで使われ、一見すればとても便利な ように思えるフレームセットですが、アクセス数の多いサイトではファイル表示に時間がかかったり さらに広告掲載の義務のある無料ホームページでは、各ファイルごとに広告バナーが入り、デザインや レイアウトが崩れたりと、あまり使い勝手は良くないように思います。 こうした問題を解決するのに適した方法としてＰＨＰ・ＡＳＰなどのサーバーサイドスクリプトと 呼ばれるものがあります。これはプログラミングとデザインの作業を独立させて行うことができ またＣＧＩのようにサーバーに過負荷をかけることがないので多くのサイトで採用されています。 しかし無料ホームページでは、これらのスクリプトには大抵使用制限がかけられていたりするので 余程のことでも無いかぎり使用はできないものと考えてください。そこでサーバースクリプトの代わりに ローカルサイドでも動くJavascriptを使って、複合ドメイン型コンテンツを設計します さて、前述の通りローカルサイドで動作するスクリプトとしてJavascriptには、いろいろな機能が 実装されていると解説してきました。その中でも特に良く使われるwrite()メソッドがあります。 DHTMLを使ったコンテンツには、欠かせないもののひとつであることは言うまでもありませんが ページデザインにJavascriptを多用すればソースが複雑化し、修正もHTMLだけの時に比べると かなり面倒なことになってしまいます。またこれまでのマークアップによるファイル作成と違い プログラミング言語を使いますので、バグが起こった際の対処も知っておかなければなりません バグが起こる原因として一番多いのが（ や｛ の閉じ忘れ、” ’；の記入モレ等によるものです これ以外にはfor文による無限ループが上げられますが、今回はHTMLの出力だけなので、上のような ミスさえなければ、ほぼ意図した通りに表示されると思います。 ＊IE（インターネットエクスプローラー）にはデバッグ機能もついています ツール→インターネットオプション→詳細設定へと進み ＜□スクリプトのデバッグを使用しない＞の チェックを外しておきます。万が一スクリプトによるバグが起きた場合は、警告ウィンドウに記述ミス の箇所が表示されるので（警告箇所はあくまで目安ですが…）指示に従って修正をしてください □メインファイルの設計 まずは前項のナビゲーションオブジェクトで解説したように簡単な設計図を書いてみましょう
基本的な設計に大きな相違はありませんが、同一ファイル内に記述するという点では、多少理解しにくい
かもしれません。スクリプトで出力する部分は図で示した①タイトルバナー②リンクメニュー③フッター
の３箇所で、グレーで囲まれた部分がそのファイルのボディ（本文）にあたります。
まずスクリプト処理をする部分を大きく３つに分け、それぞれを上から順に構成し
１．ヘッダー（head.html） ２．メニュー（menu.html） ３．フッター（foot.html）
として各ファイルを別々にデザインします。
＊サイトファイルのデザインを統一させる場合は、特に１と３は予め作り込んでおく必要があります。
参考例として、前述のナビゲーションオブジェクトからリンクメニューを除いたものを以下に示しておきます。
１．ヘッダー（①タイトルバナー）
<table cellpadding=0 cellspacing=0>
<tr><td width=800 height=3 class="td1"></td></tr>
<tr><td width=800 height=3 class="td2"></td></tr>
<tr><td width=800 height=3 class="td3"></td></tr>
<tr><td width=800 height=3 class="td4"></td></tr>
<tr><td width=800 height=3 class="td5"></td></tr>
<tr><td width=800 height=3 class="td6"></td></tr>
<tr><td width=800 height=3 class="td7"></td></tr>
<tr><td width=800 height=3 class="td8"></td></tr>
<tr><td width=800 height=3 class="td9">WebDesign&Programming</td></tr>
<tr><td width=800 height=3 class="td8"></td></tr>
<tr><td width=800 height=3 class="td7"></td></tr>
<tr><td width=800 height=3 class="td6"></td></tr>
<tr><td width=800 height=3 class="td5"></td></tr>
<tr><td width=800 height=3 class="td4"></td></tr>
<tr><td width=800 height=3 class="td3"></td></tr>
</table>
表示を確認しデザインが決まったら、次に上記のHTMLファイルをJSファイル（スクリプト）に書き直します。
ダブルクォートで囲まれた箇所は、同一スクリプトファイル内では、二重引用となりバグを引き起こして
しまうのでシングルクォートに変換して記述します。
また<html><head><title></title></head><body>のヘッダー部分および
</body></html>のタグは省略し、スタイルシートはすべて別ファイルにまとめておきます。
＊スタイルシートはタグ内に直接記述するとバグになる場合があります。
次に、リンクメニューや著作権表示をするフッターも同じようにそれぞれスクリプトファイルに書き直します。
このように一連の処理をまとめて単一オブジェクトにすることをカプセル化と言います。
以下はその記述例です。
□ head.js =====================================================================
function head(){
document.write("<table cellpadding=0 cellspacing=0>");
document.write("<tr><td width=800 height=3 class='td1'></td></tr>");
document.write("<tr><td width=800 height=3 class='td2'></td></tr>");
document.write("<tr><td width=800 height=3 class='td3'></td></tr>");
document.write("<tr><td width=800 height=3 class='td4'></td></tr>");
document.write("<tr><td width=800 height=3 class='td5'></td></tr>");
document.write("<tr><td width=800 height=3 class='td6'></td></tr>");
document.write("<tr><td width=800 height=3 class='td7'></td></tr>");
document.write("<tr><td width=800 height=3 class='td8'></td></tr>");
document.write("<tr><td width=800 height=3 class='td9'>WebDesign&Programming</td></tr>");
document.write("<tr><td width=800 height=3 class='td8'></td></tr>");
document.write("<tr><td width=800 height=3 class='td7'></td></tr>");
document.write("<tr><td width=800 height=3 class='td6'></td></tr>");
document.write("<tr><td width=800 height=3 class='td5'></td></tr>");
document.write("<tr><td width=800 height=3 class='td4'></td></tr>");
document.write("<tr><td width=800 height=3 class='td3'></td></tr>");
document.write("</table>");
}
□ foot.js =====================================================================
function foot(){
document.write("<address><img src='http://www.xxx.com/img/artopix.gif'
width=16 height=16 alt='Top'>");
document.write("<font class=fnt1>Mailto:</font>");
document.write("<a href='mailto:umahamu40112691@yahoo.co.jp'>umahamu40112691@
yahoo.co.jp</a>");
document.write("</address></font>");
}
=====================================================================
＊画像を背景やアイコンとして使用したい場合は、相対パスではなく絶対パスで記述します。
＊リンクメニューについては、前述の「ロールオーバーオブジェトの構築」を参考にしてください
これまでが正しく理解されているなら、head.js・menu.js・foot.js に加え、それぞれのスタイルをまとめた
スタイルシート（ここでは仮にmain.cssとしておきます）の合わせて４つのファイルができていることになります。
最後に、これらをひとつのファイルに組み込んでHTMLとして出力させます。
各オブジェクトの設定にはDIVタグを使いブロック要素としてレイアウトし、本文となる画像や文書はメインファイルに
直接、記述します。このようにすることでサーチエンジンやテキストブラウザあるいは携帯などからのアクセスがあっても
スクリプト部分は無視されページの主要な本文だけを読み取るのでアクセスビリティも高くなります。
またサイト内で統一したデザインを出力したい場合は、オブジェクトを入れたタグをすべてのファイルに記述し
デザインを変更する時は、スクリプトファイルを修正することで一括変更が可能となります。
次のサンプルを参照してください ObjectSample
□ main.html =====================================================================
<html><head><title>メインファイル</title>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<link href="css/main.css" rel="stylesheet" type="text/css">
<script src="http://www.abc.com/js/head.js" type="text/javascript"></script>…①タイトルバナー
<script src="js/menu.js" type="text/javascript"></script>…②リンクメニュー
<script src="js/foot.js" type="text/javascript"></script>…③フッター
</head><body>
<div><script>head()</script></div>
<!------------------- ここに本文を記述します ------------------------->
<div>
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td rowspan=2 width=132 valign=top><script>menu()</script></td>
<td><img src="10.jpg" width="320" height="240" border="0" alt=""></td>
</tr>
<tr><td width=240>
＊スタイルシートおよびスクリプトは、基本的に外部ファイルとしての読み込みが可能ですが
最近では、フィッシングやスパム対策のため、同一ドメイン以外からのファイル呼び出しや
アクセス制限をしている場合がありますのでサイト規約等を参照して適切な設定をしてください
</td></tr></table>
</div>
<!------------------ 本文の記述ここまで ------------------------------>
<div><script>foot()</script></div>
</body></html>
=====================================================================
オブジェクトの集合としてプログラムを設計することは「再利用」というメリットだけではなく
開発に対しても様々なメリットがあります。例えば、機能（メソッド）を例に挙げたクラスでは
「画像」クラスや「フォーム」フィールドが「インスタンス」の依存性となります。
情報を外部に切り出すことで、状況や環境が変わったとしても、設定を変更するだけで
そのオブジェクトを利用することができるようになります
つまり再利用性の高い「パーツ」としてオブジェクトを実装しやすくなるのです
このような「パーツ」のことを「＊コンポーネント」と呼びます
＊「設定を利用から分離する」という考え方、構築・設計のための1つの原則
次のステップでは、HTMLを基本概念として、制御構造のモジュール化を考えてみましょう。
モジュールとはある一連の処理を一つのまとまりとして記述し、プログラムの他の部分から独立させ
別の処理のように扱う機能です。この機能の実現方法は使用言語によって違いがあります。
＊モジュール化の定義：構造またはプロセスを分解し、独立したシステムに設計すること
＊モジュール ：構造を構成する基準尺度や基本単位のこと
ＷＥＢでは、プログラムを書く際に、JavascriptやPerlなどがよく使われています。
これらは、スクリプト言語と呼ばれ、C・C++・JAVA言語とは違ってコンパイル作業(マシン語変換)の必要がないので
頻繁に更新するホームページ上のサービスなどに向いています。またスクリプト言語には多くのメソッドがあり
それらを使って書いた処理を一般に、ユーザー定義関数と言います。
ユーザーが定義した関数は function 関数名(引数) { 処理ブロック } の形で書かれ
記述する部分は処理ブロックと呼ばれ、返す値を 名 = 値 と指定します。
□ ＦＯＲステートメントを使ったループ処理で記述を簡略化する
では次に、スクリプトを使った単純なHTMLモジュールを作ってみましょう
前回は、メソッドに writeln() や write() を使ってHTMLを出力する方法を説明しました。
今度は、制御構文をつかって動的にオブジェクトを生成することについて考えてみましょう
これまでスクリプトを使って、ＨＴＭＬを出力させるオブジェクトを作成する場合は
以下のように write( ) の中にタグを記述し、出力するタグを増やしたい時は、 document.write( );
の部分を書き足すということを学んできました。
function scrImg(){
document.write('<img src="./img_1.gif">');
document.writ('<img src="./img_2.gif">');
document.writ('<img src="./img_3.gif">');
document.writ('・・・
}
上のオブジェクトは、画像をまとめてＨＴＭＬ出力する場合の処理内容を示したものですが、
こうした記述は、画像枚数が多くなればなるほど、記述内容と共にファイル容量そのものも増え
結果的に編集作業やファイル読み込みにも時間がかかってしまうことになります。
そこでスクリプトに修正を加え、制御構文を使って内容を簡略化し、自動的に記述をするように処理させます。
このような場合に使われる制御構文に、ＦＯＲステートメントがあります。
ＦＯＲステートメントはプログラミングの基本として、いろいろなケースで使われますので覚えておくと
一意の言語だけではなくその他の言語へステップアップする場合にも役に立つので是非習得したいスキルです。
基本的な使い方はfor( )の中に 値・条件・式 の３つを設定し、その後に{ }をつけ処理内容を記述します。
変数（条件によって変化する値）は、ここでは仮に ｉ としてありますが、任意の文字を用いることができます。
例えば次のような設定の場合では
for(i=0; i<4; i++)｛１回目の処理｝
ⅰは最初に０という値を与えられ、次にその値が４よりも小さいという条件の時、その値を１つ増加（++）させる。
という意味になります。そしてこの後に続く｛処理｝が行われると、ⅰの値は１つ増加され
for(i=1; i<4; i++)｛２回目の処理｝
となって最初に戻り、条件に従って再び処理が行われます。
for(i=2; i<4; i++)｛３回目の処理｝… for(i=3; i<4; i++)｛４回目の処理｝…
処理は繰り返されるごとに、ⅰ値を増加させ、４回目の処理後、値はⅰ＝４となって繰り返しを抜け終了します。
こうしたFOR構文を使った制御は、ループ処理と呼ばれています。
それでは次に、このループ処理を使って先ほどのオブジェクトの記述を簡略化してみましょう
まず出力させたい画像のファイル名を数字付きの連番にし、それぞれを img_1 img_2 img_3 img_4 .gifとします。
次にオブジェクト内に for(i=1; i<=4; ++i) { } を設定し、document.write( ) の記述を以下のように修正します。
function scrImg(){
for(i=1; i<=4; ++i)
{
document.write('<img src=./img_'+ i +'.gif>')
}
}
以上のようにＦＯＲ文を使うと４行の記述を１行に減らすことができます。
例えばホームページ上で多量の画像サムネイルを提供する場合など
for(i=1; i<=10; ++i)
変数ⅰの値だけを変更するだけで簡単に出力画像の枚数を増やすことが可能となります。
また読み込むファイルの容量が増えることもないので、処理動作が遅くなることもありません
次のサンプルを参照してください ObjectSample
さて前項ではループ制御を使うと、「外部設定ファイルを軽量化することができる」と解説しました。
そこで次は、これまでのデザインオブジェクトをループ制御で軽量化し、外部モジュールとして設計し直してみましょう
ここでは「スクリプト処理をまとめて各オブジェクトをカプセル化する」の項で作成したタイトルバナーオブジェクトを
ＦＯＲ文を使って簡略化し、再利用が可能なデザインオブジェクトに作り直します。
□ head.js ====================＊修正前のタイトルバナーオブジェクト====================
function head(){
document.write("<table cellpadding=0 cellspacing=0>");
document.write("<tr><td width=800 height=3 class='td1'></td></tr>");
document.write("<tr><td width=800 height=3 class='td2'></td></tr>");
document.write("<tr><td width=800 height=3 class='td3'></td></tr>");
document.write("<tr><td width=800 height=3 class='td4'></td></tr>");
document.write("<tr><td width=800 height=3 class='td5'></td></tr>");
document.write("<tr><td width=800 height=3 class='td6'></td></tr>");
document.write("<tr><td width=800 height=3 class='td7'></td></tr>");
document.write("<tr><td width=800 height=3 class='td8'></td></tr>");
document.write("<tr><td width=800 height=3 class='td9'>WebDesign&Programming</td></tr>");
document.write("<tr><td width=800 height=3 class='td8'></td></tr>");
document.write("<tr><td width=800 height=3 class='td7'></td></tr>");
document.write("<tr><td width=800 height=3 class='td6'></td></tr>");
document.write("<tr><td width=800 height=3 class='td5'></td></tr>");
document.write("<tr><td width=800 height=3 class='td4'></td></tr>");
document.write("<tr><td width=800 height=3 class='td3'></td></tr>");
document.write("</table>");
}
上のサンプルでは、スタイルクラス以外は、同じタグを write( ) の連続を使って記述しています。
またスタイルクラス名には連番が設定されているので、この数値部分をＦＯＲ文で制御させれば簡略化することができます。
□ head.js ＊================ 修正後のタイトルバナーオブジェクト ================
function head(){
document.writeln('<table cellpadding=0 cellspacing=0>');
for(i=1; i<=9; ++i){
document.writeln('<tr><td class=td'+ i +'></td>& lt;/tr>');
}
document.writeln('<tr><td class=td9>WebDesign& Programming</td></tr>');
for(i=8; i>=3; --i){
document.writeln('<tr><td class=td'+ i +'></td></tr>');
}
document.writeln('</table>');
}
□ head.css ＊================ 修正後のスタイルシート ================
.td1{width:337;height:3;background:#c00;border-width:0px;}
.td2{width:337;height:3;background:#b00;border-width:0px;}
.td3{width:337;height:3;background:#a00;border-width:0px;}
.td4{width:337;height:3;background:#900;border-width:0px;}
.td5{width:337;height:3;background:#800;border-width:0px;}
.td6{width:337;height:3;background:#700;border-width:0px;}
.td7{width:337;height:3;background:#600;border-width:0px;}
.td8{width:337;height:3;background:#500;border-width:0px;}
.td9{width:337;height:3;background:#400;border-width:0px;
color:#900;text-indent:128px;}
＊注意する箇所は、連番が逆に小さくなっていく場合のＦＯＲ文設定です。またTableタグの閉じ忘れなども気を付けましょう
このようにすれば、例えばタイトルバナーのサイズを変更したい時やグラデーションの変化量を多くしたい場合でも
設定値やスタイルクラスを修正するだけで、違ったデザインのオブジェクトを出力させることができます。
次のサンプルを参照してください ObjectSample
さて…とうとう最終章になってしまいましたが、ここではこれまで本稿で解説してきたＷＥＢの技術を
ひとつのオブジェクトへ統合させ、独立した単一デザインオブジェクトを完成させたいと思います。
前項では、繰り返し処理は、複数の画像を出力する場合に有効な手段であることを学習しましたが
その他にループ制御を使ってファイルを軽量化する方法についても触れてみました。そこで最終段階では
ヘッダー・ボディ・フッターの３つに分かれていたパーツを、ひとつのスクリプトファイルにまとめ
独立したオブジェクトとして出力する方法について解説します。
最初に別ファイルのスクリプト内に設定されたタグのプロパティやデザインスタイルは、スタイルシートクラスへまとめ
メインオブジェクトの基本構造を明確にさせておきます。全体的に大きな変更点はありませんが、クォーテーションの
記入ミスやタグの閉じ忘れなどに十分注意しながら、それぞれのパーツを組み立ててください。また後から修正や変更が
しやすいように、各パーツがどの部分なのかコメントや注釈を入れて置くようにすることも大切です。
これまでファイル別に記述されていたユーザー定義関数の処理部分の中身だけを新しく定義した関数の中へ記述したら
最後にスタイルクラスが正しく設定されているかどうか、もう一度確認作業をしておきましょう。
スタイルシートは前項で作成したものを修正して使ってください。
さて今回は最終章ということで、簡単なスクリプトを使った画像オブジェクトを付録として作ってみました。
スクリプトの解説については、本稿のテーマとは主旨が違うので省略させてもらいますが、リンクにカーソルがのると
メインウィンドウの画像が変化するというものです。基本的な記述だけなので、大抵のブラウザで動作すると思います。
このようにスクリプトは、なるべく余計な言い回しをせず、簡潔に記述すると、例えバグが起きた時でも
素早く問題に対処できるというわけです。特にホームページ上でサービスを提供する場合は、迅速な対応が要求されます。
ＤＯＭやＤＨＴＭＬを多用し過ぎれば、構造は複雑になり、修正や更新そして管理もたいへんな作業となってしまいます。
そうした点も踏まえ、「修正や管理がしやすいか」「コンテンツに本当に必要かどうか」ということを考えながら設計をしましょう
＊ イメージオーバースクリプト
----------------------------------------------------------------------
var photo=new Array('0.jpg','1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg');
function btnOn(i){
if(i>=1){
document.images['atx'].src = photo[i];
}
else{
if(i==0){
document.images['atx'].src = photo[i];}
}
}
----------------------------------------------------------------------
上のスクリプトを含めたものは、以下の記述を参考にしてください。関数名は objMenu() としました。
□ obje_menu.js / デザインオブジェクトJavaScript
//*--------- RollOver ----------------------*//
function chg(i){i.style.background='#8CA6CA';}
function rtn(i){i.style.background='#00007B';}
//*--------- ImageOver ---------------------*//
var photo=new Array('0.jpg','1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg');
function btnOn(i){
if(i>=1){
document.images['atx'].src = photo[i];
}
else{
if(i==0){
document.images['atx'].src = photo[i];}
}
}
//*-- MainObject -------------------------------------------------------*//
function objMenu(){
//*-- Header ---------------------------------*//
document.write('<h3 class="pos">Artopix</h3>');
document.writeln('<table cellpadding=0 cellspacing=0 border=0 class=td5>');
for(i=1; i<=8; ++i){
document.writeln('<tr><td class=td'+ i +'></td></
tr>');
}
document.write('<tr><td class=td9>WebDesign&Programming<
/td></tr>');
for(i=8; i>=3; --i){
document.writeln('<tr><td class=td'+ i +'></td></
tr>');
}
document.writeln('</table>');
//*-- Navigator ------------------------------*//
document.write('<table cellpadding="0" cellspacing="0" class="tbl1"><tr><
td>');
document.write('<table cellpadding="0" cellspacing="0" class="tbl2">');
document.write('<tr><td class="th1" colspan="2"></td></tr>');
document.write('<tr><td class="th2"></td>');
document.write('<td class="th3"> Contents</td></tr>');
document.write('<tr><td class="tb1" colspan="2"></td></tr>');
//Link1
document.write('<tr><td class="tb2" colspan="2"></td></tr>');
document.write('<tr><td class="tb3"></td>');
document.write('<td class="tb4" onmouseover="btnOn(1);chg(this)" onmouseout="btnOn(0);
rtn(this)">');
document.write('<a href="#"> News&Topics</a></td></tr>');
document.write('<tr><td class="tb1" colspan="2"></td></tr>');
//Link2
document.write('<tr><td class="tb2" colspan="2"></td></tr>');
document.write('<tr><td class="tb3"></td>');
document.write('<td class="tb4" onmouseover="btnOn(2);chg(this)" onmouseout="btnOn(0);
rtn(this)">');
document.write('<a href="#"> Entertainment</a></td></tr>');
document.write('<tr><td class="tb1" colspan="2"></td></tr>');
//Link3
document.write('<tr><td class="tb2" colspan="2"></td></tr>');
document.write('<tr><td class="tb3"></td>');
document.write('<td class="tb4" onmouseover="btnOn(3);chg(this)" onmouseout="btnOn(0);
rtn(this)">');
document.write('<a href="#"> Graphics</a></td></tr>');
document.write('<tr><td class="tb1" colspan="2"></td></tr>');
//Link4
document.write('<tr><td class="tb2" colspan="2"></td></tr>');
document.write('<tr><td class="tb3"></td>');
document.write('<td class="tb4" onmouseover="btnOn(4);chg(this)" onmouseout="btnOn(0);
rtn(this)">');
document.write('<a href="#"> Document</a></td></tr>');
document.write('<tr><td class="tb1" colspan="2"></td></tr>');
//Link5
document.write('<tr><td class="tb2" colspan="2"></td></tr>');
document.write('<tr><td class="tb3"></td>');
document.write('<td class="tb4" onmouseover="btnOn(5);chg(this)" onmouseout="btnOn(0);
rtn(this)">');
document.write('<a href="#"> Products</a></td></tr>');
document.write('<tr><td class="tb1" colspan="2"></td></tr>');
//Link6
document.write('<tr><td class="tb2" colspan="2"></td></tr>');
document.write('<tr><td class="tb3"></td>');
document.write('<td class="tb4" onmouseover="btnOn(6);chg(this)" onmouseout="btnOn(0);
rtn(this)">');
document.write('<a href="#"> Download</a></td></tr>');
document.write('<tr><td class="tb1" colspan="2"></td></tr>');
//Link7
document.write('<tr><td class="tb2" colspan="2"></td></tr>');
document.write('<tr><td class="tb3"></td>');
document.write('<td class="tb4" onmouseover="btnOn(7);chg(this)" onmouseout="btnOn(0);
rtn(this)">');
document.write('<a href="#"> Support</a></td></tr>');
document.write('<tr><td class="tb1" colspan="2"></td></tr>');
document.write('<tr><td class="tb2" colspan="2"></td></tr>');
document.write('</table></td><td class="tbg">');
document.write('<img name="atx" src="./0.jpg" width="200" height="150" border="0" alt="
">');
document.write('</td></tr></table>');
//*-- Footer ---------------------*//
document.write('<address><img src="./cross.gif" width=16 height=16 alt="Top"
align=top> Copyright©Artopix ');
document.write('<a href="mailto:" class=fnt1>');
document.write('Mailto : Artopix</a></address>');
}
＊デザインスタイルはひとつにまとめると、修正や変更も簡単にでき、使い回しの利くソースとなります。
□ design_obj.css／デザインオブジェクトCSS
body{color:#000;font-family:Georgia,Helvetica,sans-serif;background:#fff;margin:10 0 0 10;
}
div{width:340;border:solid 1px #006;background:#600;
}
.pos{z-index:1;position:absolute;top:30px;left:20px;
}
h3{color:#B41900;
font-size:32px;
font-weight:normal;
font-family:Georgia,Helvetica,sans-serif;
margin-top:-10px;margin-left:10px;margin-bottom:0px;
}
td{color:#eee;font-family:Arial,sans-serif;font-size:10pt;border:solid 1px #004;background:#600;
}
.tbl1{background:#f00;border-width:0px;}
.tbl2{background:#900;border-width:0px;}
.td1{width:337;height:3;background:#c00;border-width:0px;}
.td2{width:337;height:3;background:#b00;border-width:0px;}
.td3{width:337;height:3;background:#a00;border-width:0px;}
.td4{width:337;height:3;background:#900;border-width:0px;}
.td5{width:337;height:3;background:#800;border-width:0px;}
.td6{width:337;height:3;background:#700;border-width:0px;}
.td7{width:337;height:3;background:#600;border-width:0px;}
.td8{width:337;height:3;background:#500;border-width:0px;}
.td9{width:337;height:3;background:#400;border-width:0px;
text-indent:128px;color:#900;}
.tbg{width:210;background:#600;text-align:center;}
.th1{width:120;height:1;background:#f00;}
.th2{width:8;height:16;background:#C00;}
.th3{width:112;height:16;color:#fff;font-family:Arial,sans-serif;font-weight:bold;font-
size:9pt;background:#A00;}
.tb1{width:120;height:1;background:#003;}
.tb2{width:120;height:1;background:#8689C9;}
.tb3{width:8;height:16;background:#8689C9;}
.tb4{width:112;height:16;background:#00007B;line-height:120%;}
.fnt1{color:#999;text-indent:20;}
img{border:1px solid #900;}
address{color:#eee;font-size:10pt;font-family:Arial,sans-serif;background:#900;border:1px
solid #900;width:338;}
a{color:#eee;text-decoration:none;font-family:Arial,sans-serif;font-weight:bold;font-size:
9pt;}
a:hover{text-decoration:underline;}
最後にＨＴＭＬファイルを作成し上記の設定ファイルを読み込み、オブジェクトを出力させます。
□ design_obj.html／デザインオブジェクトHTML
<html><head><title>Artopix／デザインオブジェクト</title>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<link href="navibar.css" rel="stylesheet" type="text/css">
<script src="obj_menu.js" type="text/javascript"></script></head><body>
<!--/////////////////////////////////////////////////////////////////////////-->
<div><script>objMenu()</script></div>
<!--/////////////////////////////////////////////////////////////////////////-->
</body></html>
次のサンプルを参照してください 
Design Object ver1.10 by Artopx
このようにしてモジュール化されたデザインオブジェクトは、複雑な処理を隠し、WEBの構築を単純化させることができます。
またデザイン的要素が混在しているHTMLの文書構造を明確にし、仕様を切り離して独立させることもできます。
その結果、スクリプト機能を持たないブラウザからのアクセスにも対応でき、検索エンジンへも、適切な情報提供が
可能となります。それでは最後に、このテーマの最初に戻って、もう一度ＷＥＢを考えてみたいと思います。
「テキストベースのオブジェクトデザイン」について
ブロードバンド全盛期を向かえ、ＷＥＢ上で提供される情報はテキストや画像だけに限らず
容量の大きな動画や音声やストリーミングによる中継など多種多様に広がっています。
その傾向は、やがて次世代の光通信によってさらに加速し発展していくことになると思います。
こうした時代に、なぜファイルの軽量化を考える必要があるというのでしょうか？
その答えのひとつに「ＷＷＷは地球規模でつながっている世界である」ということが挙げられます。
例えば、遠い海外に暮らす友人が、自分のホームページを見たり、掲示板に書き込んだり、メールをくれたり、
あるいは、やり取りしたデータをアップしたり、自分の方から海外のホームページへアクセスする場合もあると思います。
このように世界中の誰もがインターネットを介して、どこからでも情報やデータを交換したり
ファイルを共有したりすることができるのは、たいへん便利な時代になったと言えると思います。
しかし実際のワールドワイドの世界は、すべての環境が最新のものやブロードバンドであるというわけではありません
国や地域、あるいはプロバイダーやサーバーの性能や経由するルートによって表示速度は大きく異なり
例えブロードバンドであったとしても、実用速度は、十分に発揮されないことも多いというのが現状です。
また携帯電話の利便性や拡張された機能は、今後のインターネットをより広範な情報ネットワークへと進化させ
ホームページへのアクセスもパソコン利用者と同等に扱わなければならない時代が来るかもしれません
もしこうした状況の中で、あなたがサイトの管理者となって、ホームページを立ち上げ、情報を発信するとしたら
あるいは、突然、携帯用サイトの運営を任されることになったとしたら…どのようなことを考えるでしょうか？
例えば、回線速度の遅い地域やモバイルコンテンツへの配慮から更新や管理等…もしそれがアクセスの多い人気サイトなら
画像サイズを減らし…ファイルサイズを小さくし、処理を早くさせることを検討すると思います。そして最終的に
これまで考えてきたホームページは、全く違うものとして設計し直さなければならないことになるかもしれません
そんな時、テキストベースのオブジェクトデザインを考えてみてください
例え、個人サイトであろうが、企業サイトであろうが、基本とする技術に大きな違いはありません
またその原点も、インターネットを共有しようというスピリットから始まったことに変わりはありません
その根底にある設計思想は、「より多くの人へ、より良い情報を、素早く提供する」という原則から成り立つものなのです。
それは、設計する人の考え方ひとつで「より多くのアクセス」を可能にし
「より多くのアクセスからより価値のあるアクセスへ」と変えることができるものなのです。
そして「価値のあるアクセスから真のネットワーク社会を実現するのがＷＥＢである」とＡｒｔｏｐｉｘは考えているのです。