更新: 2001年 3月 3日
|
Altair☆'s Pageに戻る |
by Altair☆ 更新: 2001年 3月 3日 |
このページは、HTMLやJavaScriptを少し書き慣れた初心者を対象としています。間違いだらけのHTML書法も併せて御覧ください。
(^o^)
<a href="〜">でリンクされているテキストは、ブラウザやその設定によっても異なりますが、下線付きのテキストで表示され、リンクの多いページは下線だらけで見にくくなってしまうことがあります。
CSS (Cascading Style Sheets)[8]に対応したブラウザであれば、
<a href="〜"
style=text-decoration:none>
と、するか、
<style type="text/css"><!--
.n {text-decoration:none}
--></style>
と headセクションに宣言しておき、リンクを張る際に、
<a href="〜"
class=n>Somewhere</a>
(nは、任意の名前)とすることで、Somewhereは、下線なしで、Somewhereと表示されるようになります。
classオプションの指定なしで、無条件に<a href>のリンクに下線を付けないようにするには、上の宣言の代わりに、
<STYLE type="text/css"><!--
A {text-decoration:none}
--></STYLE>
とheadセクションに宣言すればokです。
DOSかWindowsを使っていると、テキスト・ファイルのEOFマークとしてctrl-Z (これは、たいていの場合、userの意識しないうちに自動的に付加されます)が、HTMLの末尾に残り、ページ末尾に意図しない1文字が出てしまうことがあります。
これは、拙作『TextPack』で除去できます。DOSやWindowsは、テキスト・ファイルの行末をCR＋LFで表記しますが、HTMLは、もともとunix文化から登場しましたので、行末はLFのみで構いません。TextPackは、CR＋LFをLFのみに置換し、HTML textのサイズを僅かながら小さくする機能も持っています。私のwebページの例では、5%ほどサイズが小さくなりました。混雑している時には、この5%も意外に効果あるかな…。
OS/2 WARP版 ⇒ OS/2 WARP Library
DOS版 ⇒ DOS Library
Linux版 ⇒ Linux Library
HTML 4.0[1]では、“&{ };”が、将来、HTML CDATA attributesにスクリプトを埋め込めるようにするためにreserveされています。
<a
href="&{document.referrer};">
<body
bgcolor="&{if(Date.getHours >
18)…};">
さて、“&{ };”に囲まれたスクリプトがJavaScriptなのか、tcl/tk[3]なのか、それとも他の何かなのかということを、ブラウザに知らせてやらなければなりません。そのために、
<META HTTP-EQUIV=Content-Script-Type
CONTENT="text/language">
と、スクリプトのディフォルトを宣言しておく必要があります。
<META HTTP-EQUIV=Content-Script-Type
CONTENT="text/javascript">
Noframesは「フレーム未対応のブラウザに表示させる」ためのエレメントですが、HTML 4.0では、逆に「フレーム対応のブラウザには表示させない」エレメントとしての役割も持っています。
最初の例(sample.html)は、大抵のHTML入門書に紹介されています。(ここで紹介したいのは、その次の例なのですが、初心に帰って、ちょっとおつきあいください)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<html lang=en-us>
<head>
<title>My Home (Frame Version)</title>
</head>
<frameset cols="*,*">
<frame src=menu.html>
<frame src="noframe.html#new">
<noframes>
<body>
<h1>Welcome to my home page</h1>
This page contains <frame> elements.
But your browser cannot interpret them.
<p>Please visit <a href=noframe.html><strong>non-frame
version</strong> of this page</a>.</p>
</body>
</noframes>
</frameset>
</html>
これは、左右に2分割したフレームを用意し、左側にメニューを右側にトップ・ページを表示しようとする例です。もし、フレーム対応していないブラウザから参照された場合には、後半の<noframes>から</noframes>の間を表示し、noframe.htmlを参照するよう促しています。<noframes>に続いて<body>エレメントが登場している点を奇妙に思うかたもおられるかも知れませんが、これについては、もうひとつの例(noframe.html)を見て頂いてから解説します。
上のsample.htmlの中で、次のnoframes.htmlを使うよう記述してあります。また、フレーム対応していないブラウザ用に、non-frame versionのページとしてもnoframes.htmlを使うようになっています。
下に例示したnoframes.htmlの最初に目次(Table of Contents)を用意してありますが、これは<noframes>と</noframes>で囲んであります。ですから、フレーム対応したブラウザでは表示されません。フレーム対応していないブラウザでのみ、この目次が表示されるシカケです。フレーム対応のブラウザでは、別フレームで目次を用意しても、目次があちこちのフレームに表示されるようなことがなくなるわけです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang=en-us><head>
<title>My Home</title></head>
<body>
<noframes>
<h1>Welcome to My Home!</h1>
<h2>Table of Contents...</h2>
<ul>
<li><a href="#new">What's new</a>
<li><a href="#prof">My profile</a>
<li><a href="#interest">Iinterest things</a>
<li><a href="#links">My friends</a>
</ul></td>
<hr></noframes>
<h2><a name=new>What's new</a></h2>:
(中略)
:</body></html>
さて、ここから先がちょっとややこしい話しになります。<body>と<noframes>の関係です。ふたつの例のDTDが違うことに気付いて頂けたでしょうか？
最初のsample.htmlのDTDは、HTML4.0 Framesetを指定しています。このDTDでは、<frameset>の中に<frame>と<noframes>を記述できます。そして、<noframes>に<body>のみを続けることができます。<body>は<noframes>の内側にしか書けません。
2番目の例のnoframe.htmlでは、HTML 4.0 TransitionalをDTDとして指定しています。HTML 4.0 Transitionalには、<noframes>以外のフレーム関係のエレメント、<frameset>や<frames>がありません。そして、<noframes>は、<body>〜</body>の外側に書くことはできません。
<frame src="noframe.html#new">と、</noframes>直後のアンカーを明示するような工夫が必要になります。
Netscape Navigator 3.0以降のJavaScriptは、拡張子.jsのexternal objectsを利用できます[4]が、それを利用できない古い版のNetscape Navigatorも未だに少なからず利用されていますし、Web server側でmime.typesがちゃんと設定されていないと利用できない場合もあります。
External objectsが使えない場合は、代わりに、一番外側のframesetを記述しているHTMLのheadセクションにJavaScript objectsを定義しておく方法を採ると良いかも知れません。そうすれば、どのフレームからも“top.〜”で参照できます。
このtop.〜による共通functoinの括り出しは意外に便利なのですが、JavaScriptの解釈に問題の多いMicrosoft Internet Explorerは、意味不明なエラー・メッセージを返してくることがあるので動作検証を十分に行いましょう。Microsoft Internet ExplorerのJSCRIPTは、所詮、JavaScriptモドキに過ぎないようです。
スクリプトの一般的な書き方として、かつては、ちょっとtrickyですが、
といった書き方ができました。下から2行目は、/* */で囲まれているので、JavaScriptにとってはコメントと見なされ、しかし、「/*-->」で、HTMLのコメントは終わっているので、次に「<!--」が登場するまでの部分を、古いブラウザは表示してしまうというシカケです。<script><!--:
(スクリプト本体)
:/*--> スクリプトに対応していない古いブラウザに表示したいテキスト<!--*/
//--></script>
しかし、最近は、スクリプトには未対応であるものの、その存在は認識して、<script>〜</script>間を無視するブラウザも出て来ています。上のような書き方では、必ずしも「スクリプトに対応していないブラウザに表示したいテキスト」を表示して貰えません。
HDML 4.0で新たに追加された <noscript>〜</noscript>を使うと、その部分をスクリプト対応ブラウザは無視しますから、スクリプトに対応していないブラウザに表示したいテキストをそこに記述できます。コメントを使うトリッキーな方法よりわかり易いですね。
<noscript>
スクリプトに対応していない古いブラウザに表示したいテキスト
</noscript>
Inline graphicsとしてJPEG[9]を利用している場合、jpegtranの -optimizeオプションを使えば、たいていの場合、そのファイル・サイズを5〜20%程度、場合によっては、半分程度にまで小さくできます。もちろん画質を損ねることは無いようです。少なくとも私の目では違いがわかりませんでした。
jpegtran -optimize -outfileoutfile.jpeg
infile.jpeg
ファイル・サイズが小さくなると言うことは、それだけ転送所要時間が短くなますから、あなたのwebページを、遅い回線網を利用している人にも、より快適にブラウジングして貰える知れません。
このjpegtranには、プログレッシブJPEGと普通のJPEGの相互変換の機能もあります。UNIX用と紹介されることが多いようですが、ソース・コードで公開されていますから、コンパイルさえできればUNIXでなくても使えます。
jpegtranは、Independent JPEG Groupが配布しているJPEG Softwareのパッケージ[10]の中にあります。また、Vector DesignのSoftware PACKにはOS/2用にコンパイルされたもの[7]があります。
HTMLをplain textに変換するために様々な専用のプログラムも公開されていますが、ここでは、University of Kansasで開発されたLynx[5 ]というwebブラウザを利用する方法を紹介します。Lynxは、DOSやunixはもちろん、AMIGA、X68000[6]などに至るまで様々な環境で利用されています。テキスト・ブラウザですので制約はありますが、HTML 3.0のエレメントに対応しており、最近の版は日本語にも対応しています。
これをdump modeで利用することにより、任意のwebページを標準出力にplain textとして出力できます。
lynx -dump -nolist http://server.domain/path/file.html
> plain.txt
lynx -dump -nolist file://localhost/path/file.html >
plain.txt
-nolistを指定しなければ、そのページからリンクされているURLの一覧表がテキストの最後に添付されます。
スクリプトやフレームには、それらに対応していないブラウザのための<noscript>や<noframes>というエレメントが用意されています。しかし、ブラウザがstyle sheetに対応していない時だけに何かを表示させるHTMLエレメントは特にありません。style sheetに対応していない時だけ何かを表示させるには、display:noneというpropertyを記述すればokです。例えば、
<span style=display:none>
お使いのブラウザはStyle Sheetに対応していないようですので、私が期待している通りの表示が、あなたにご覧いただけるかどうか、ちょっと不安です。
</span>
もちろん、<span>の他に、<p>や<div>にもstyle=display:noneが指定できるでしょう。
また、このページの最初の方で実際にやっている例ですが、<hr>にも応用できます。
<blockquote style="border:outset silver">このページは、HTMLやJavaScriptを少し書き慣れた初心者を対象としています。</blockquote>
<hr style=display:none
width="60%">
この例では、<blockquote>と</blockquote>の間の文をstyle sheet対応ブラウザは枠で囲んで表示します(style="border:outset silver")。style sheetに対応していないブラウザでは、<hr>のstyle=display:noneが無視されるので、文の直後にhair line (<hr width="60%">)が引かれます。
Style sheetを使用していますので、headセクションに、
<META http-equiv=Content-Style-Type content="text/css">
を宣言しておくことをお薦めします。
段落の字下げを行うのに、このページの場合には、style sheetを使って、
<style type="text/css"><!--
p { text-indent: 1em }
--></style>
と宣言しておき、各段落毎にその始まりを意味する<p>を明示することで字下げさせることができます。
(^o^)Face markを使用する時は、<tt> (teletype font)を明示してみてはいかがでしょう？
<tt>(^_-)v</tt>
読み手の環境によって見え方が違ってしまうことはしかたないですし、指定しなくても誤りではないのですが、プロポーショナル・フォントでface markを表示させると、なんとなく情けない表情になってしまいます。日本語でプロポーショナル・フォントを使ってない人は気付かないのでしょうね、きっと。
HTML書方から脱線しますが『ぶんかのちがい』で、欧米でのface markは、
:) ;( :P :0
のように90゜回転して縦書き的に表現することが多く、日本では、
(^o^)v (+_;) (^.-) (`_')と、横に表現することが多いようです。縦書き文化圏(?)の日本人が横書きで、欧米人が何故かface markは縦書き。日本では目と口で表情をあらわし、欧米では口だけで表情をあらわします。表情が乏しいと言われる日本人も、face markに限っては、欧米より表情豊かなようですね。
Face markを使う時に困るのは、その途中で改行され、顔の左右が生き別れになってしまうかもしれないことです。
改行されちゃいました。(;
_;)
こんなことが起きないようにするには、style sheetを併用すると良いかも知れません。
これなら大丈夫。<tt style=white-space:pre>(^.-)v</tt>
(^.-)v
HTMLで“<a href="/abc.doc">”とか“<a href="/abc.gif">”などとすると、勝手にワードが立ち上がってしまったり、ブラウザ上に画像を表示してしまうが、ダウンロード確認のダイアログが出るようにしたい。なんとかならんかぃ？との質問を受けました。
JavaScriptを使って、こんな風にしてみてはどうでしょう？ “retrun”を忘れると“cancel (取消)”してもダウンロードが始まってしまうので、忘れないようにしましょう。
<a href="../os2/us.gif" onclick="return confirm('Are you sure to display?')">星条旗</a> (GIFイメージ)
次の行には、実際に上に例示した <a href= … が書いてあります。JavaScriptが機能するブラウザであれば確認メッセージが表示される筈です。
気を付けなければいけないのは、JavaScriptを使っているからと言って、<a>エレメントのプロバティとして type="text/javascript"を明示してはいけません。<a>エレメントのプロバティとしてこれを書くと、href=で参照されるオブジェクトのタイプだと誤解されてしまいます。このような誤解を避けるには“<META HTTP-EQUIV=Content-Script-Type CONTENT="text/javascript">”をHTMLヘッダに書いておきます。
<a href=foo.mp3>で、mp3ファイルにリンクを張り、それをブラウザで選択すると再生を始める前に、ブラウザはまずダウンロードを開始します。再生はダウンロード完了後なので、大きなファイルだと再生が始まるまでに時間がかかってしまいます。
MP3プレーヤ・ソフトに、ファイルをダウンロードしつつ、それを再生させる、いわゆるストリーミング再生を簡単にさせるには、プレイリストを作成し、そこに <a href=foo.m3u>とリンクを張ります。ダウンロードするのはプレイリストだけで、mp3ファイル本体はストリーミング再生になので、再生開始までの待ち時間は大幅に短くなります。
ブラウザは、foo.m3uをダウンロードすると、それをpluggerや mp3プレーヤ(ブラウザの設定によって異なりますが、Windows Media Playerや winampなど)に渡します。webサーバから渡されたのが、プレイリストであるとブラウザに認識させるためには、mimeタイプが audio/mpegurlである必要があります。この辺の設定はブラウザやwebサーバによって異なりますので、お使いのソフトウェアのマニュアルに従ってください。
audio/mpegurlを渡されたプレーヤは、そこに羅列されたURLを順に再生します。
いくつものmp3ファイルが存在し、個々のファイル毎にリンクを張りたい場合、それらにいちいちm3uファイルを用意するのも面倒なので、そのような時には、CGIを使ってプレイリストを自動生成するのも便利です。
unixのシェル・スクリプトで書いたCGI playlistの一例を以下に示します。
#!/bin/sh echo Content-Type: audio/mpegurl echo echo $*
そして MP3ファイルをこのCGIを介して間接的に
<a href="/cgi-bin/playlist?http://server.your-domain/directory/foo.mp3">
として呼び出します。
なお、たいていのwebサーバはコネクションが長時間に渡ると、その接続を切るようになっているのが普通で、そのリミットは30分程度が一般的です。これは、httpプロトコルによるリミットを超える長時間のストリーミングはできないことを意味します。サーバ設定を変更するか、タイム・リミットを超える長時間MP3ファイルは、複数の短時間のファイルに分割し、それを順に再生するようなプレイリストを用意することで問題を回避できます。
また、プレイリストの中にAVIのURLを書けば、AVIビデオやMPEGビデオもhttpプロトコルによるストリーミングができるものもあるようです。再生するのがビデオなのに、プレイリストのmimeタイプが audio/mpegurlだと言うのが、ちょっとだけ違和感ありますが、私の環境で実験してみた限りでは、うまく行きました。
Webサーバの管理権限を持っていれば、特定のページを他のページにマッピングしたりリダイレクトさせたり自由に設定できますが、そうではない時、あるページを他のページに置き換えるには、クライアント・サイド・プル、すなわち“<meta http-equiv=refresh content="0; url=〜>”と、置き換え元のページに入れる方法が広く使われているようです。
この方法を採ると、置き換え先のページを見ている時にブラウザの“Back (戻る)”ボタンを押すと、置き換え元のページを表示しようとし、そこで“<meta http-equiv=refresh …”が機能し、また置き換え先のページに飛ばされ、ヒストリを戻りにくくなってしまいます。
もし、ブラウザがJavaScriptに対応しているなら、そのreplaceメソッドを利用すると置き換え元のヒストリがオーヴァー・ライトされ、上に記したような問題が発生しません。
私が実際に利用している例を以下に紹介します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html40/loose.dtd">
<html lang=ja>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=Shift_JIS">
<title>Altair☆'s Page</title>
<script type="text/javascript"><!--
// 強制的にカレント・ページを置換
location.replace('http://www.vector.co.jp/authors/VA000199/')
//--></script>
</head>
<body bgcolor=black text=gray link=gray vlink=gray alink=yellow>
<!-- JavaScriptに対応していないブラウザのためのリンク -->
<noscript>
<br><br><br><br><br><br><br><br>
<h1 align=center>
<a href="http://www.vector.co.jp/authors/VA000199/">Altair☆'s Page</a>
</h1>
</noscript>
</body>
</html>
 |
Copyright (c) 1997-2002 by Altair☆ <NBG01720@nifty.ne.jp> All rights reserved. 不許複製、無断転載厳禁 |