スライド効果
今月は久し振りに｢ＨＴＭＬ文書(ハイパーテキスト)｣の書き方をご紹介します。ホームペ−ジをお持ちのかたなら、たとえコンピュータが苦手でも、さほど難しくないテクニックで効果は絶大です。このページを開いた時のように、ちょうどスクリーンセーバーの｢スライドショー｣で画像が入れ替わるときの効果を、ホームページへ取り入れると思って下さい。
それも、ご自分のホームページをウィンドウズの｢メモ帳｣などで開き、たった１行書き加えるだけで、あとは閲覧ソフト(ブラウザ)が勝手にやってくれます。たとえば、右の画像は筆者個人のホームページ(左上)からこの｢ハリウッド最前線｣のサイトマップ(右下)へリンクする途中、細かい水平線状に分割しながら画像が変わってゆくところ(中央)を示したものです。たった１行の記入でこうなります。
どう記入すればいいかを説明する前に、順序としては、まず技術的な解説です。コンピュータが苦手なかたはここと次の文節を読み飛ばしていただいてかまいません。ある程度まで詳しいかたならご存じだと思いますが、ハイパーテキストの記述は｢タグ｣と呼ばれるコマンドを用います。そのタグもハイパーテキストが｢ＨＴＭＬレベル１｣から｢レベル２｣、｢レベル３｣、｢レベル４｣、｢ＤＨＴＭＬ｣へと進化するうち、既存のものはそれまでになかった機能が追加されたり、新しく登場するもののいっぽうでは消え去ってゆくものなど、ひときわ生存競争が激しい世界です。
今回ご紹介するスライド効果で使うのは、以前｢違う画像に替えるには？｣でもご紹介した<meta>というタグで、そもそも閲覧ソフト(ブラウザ)のエンコ−ド(言語)やロボット検索の対象となる言葉などを指定したりするのに使われてきました。そこへスライド効果の｢Transition｣という機能が加わったのはＤＨＴＭＬからなので、比較的最近のことです。したがって、今のところインターネット･エクスプルーラの新しいバージョン以外で機能しないという欠点があります。
具体的なスクリプトの記述方法は、ＨＴＭＬ文書をメモ帳などで開き、冒頭の<html>と続く何行目かの<body>の間へ以下の１行(緑の文字)を書き加え(もし<html>の次が<body>である場合は以下の作例のように記述し、間が何行かある場合は<html>のすぐ後へ記述して下さい)、それがページを開いた時に用いる効果であれば、
<html>
<meta http-equiv="page-enter" content="revealtrans (duration=1, transition=23)">
<body>
そして、ページを閉じた時に用いる効果であれば、
<html>
<meta http-equiv="page-exit" content="revealtrans (ruration=1, transition=23)">
<body>
以上の２パターンです。これらは、もちろん同一ページへ書き込む(用いる)ことが可能で、今ご覧になっているこのページの場合は、
<html>
<meta http-equiv="page-enter" content="revealtrans (duration=1.6, transition=12)">
<meta http-equiv="page-exit" content="revealtrans (duration=0.6, transition=22)">
<body>
となっています。これらのスクリプトで｢duration｣とあるのが効果を表示する長さの指定で、その後の数値(赤い文字)は小数点以下まで細かい設定が可能です。いろいろと違う数字を試しながら、ご自分のイメージに合った長さを設定して下さい。いっぽう、｢transition｣のほうは23種類ある効果を0から23の数字(赤い文字の部分)で指定します。それぞれの数字がどういう効果を意味するかは、以下にリストアップしておきます。
0 Box in: 画面全体が周辺から中央へ四角い枠状に表示されます。 1 Box out: 画面全体が中央から周辺へ四角い枠状に表示されます。 2 Circle in: 画面全体が周辺から中央へ丸い枠状に表示されます。 3 Circle out: 画面全体が中央から周辺へ丸い枠状に表示されます。 4 Wipe up: 画面全体が下から上へ拭き取るように表示されます。 5 Wipe down: 画面全体が上から下へ拭き取るように表示されます。 6 Wipe right: 画面全体が左から右へ拭き取るように表示されます。 7 Wipe left: 画面全体が右から左へ拭き取るように表示されます。 8 Vertical blinds: 画面全体が水平のブラインド状に分割されて表示されます。 9 Horizontial blinds: 画面全体が垂直のブラインド状に分割されて表示されます。 10 Checkerboard across: 画面全体がチェッカー板状に分割されて表示されます。 11 Checkerboard down: 画面全体が上から下へチェッカー板状に分割されて表示されます。 12 Random dissolve: 画面全体がランダムな細かい粒子状に浮かび上がってゆきます。 13 Spilit vertical in: 水平に２分された画面が上下から中央へ集まってゆきます。 14 Spilit vertical out: 元の画面を中央から水平に上下へ２分しながら次の画像が表示されます。 15 Spilit horizontial in: 垂直に２分された画面が左右から中央へ集まってゆきます。 16 Spilit horizontial out: 元の画面を中央から垂直に左右へ２分しながら次の画像が表示されます。 17 Stripes left down: 画面全体が右上から左下へ斜線に分割されながら表示されてゆきます。 18 Stripes left up: 画面全体が右下から左上へ斜線に分割されながら表示されてゆきます。 19 Stripes right down: 画面全体が左上から右下へ斜線に分割されながら表示されてゆきます。 20 Stripes right up: 画面全体が左下から右上へ斜線に分割されながら表示されてゆきます。 21 Random bars horizontial: 画面全体がランダムな縦線状に浮かび上がってゆきます。 22 Random bars vertical: 画面全体がランダムな横線状に浮かび上がってゆきます。 23 Random: 以上23種類の効果がランダムに表示されます。 使いたい効果をこのリストから選び、スクリプトをそれらの番号と書き変えることで、ページのイメージアップを図れます。まず、最初は23のランダム効果を使って感触をつかむといいでしょう。そうすると、効果の長さを少し(たとえば±1)変えただけで印象がどれだけ違ってくるかなども徐々に把握できます。はっきり言えることは、たいへん効果的な機能である反面、多用すればホームページ全体が見づらくなりかねません。ホームページの中でも交通量の多いリンクは、ほんの一瞬の効果が何度も登場するうち、えらく長く感じたり、うっとおしくなってくるものです。
また、１つだけご注意いただきたいのは、このスクリプトが機能するのはフレームを使用していないページに限定されます。つまり、<frame>タグを書き込むＨＴＭＬ文書へ上記の<meta>タグを加えたところで、いっさい変化が起こりません。フレームを使ったスライドショーなどでスライド効果を活かしたい時は、<frame>タグを書き込んだＨＴＭＬ文書でなく、その<frame>タグが指定するＨＴＭＬ文書のほうに<meta>タグを加えて下さい(この場合、効果はフレームの部分でしか表示されませんが)。
巧く使うコツは、スライドショーでランダム機能を利用するような場合と、普通のページへ取り入れるような場合のメリハリが重要であり、後者ではスライド効果を使っていると読者が感じないぐらいのページを作れたら成功だといえます。特定のスライド効果で、いわば映画のような効果を演出してみて下さい。また、前者では各ページの始めと終わりに使っても重複するだけで意味がありません。ページの終わりはスライド効果が使えないページへ進む時などに使えばいいわけです。こうした重複するような設定は避けましょう。
もう１つ知っておくと役立つのが、閲覧ソフト(ブラウザ)の設定で、インターネット･エクスプローラ６を使っているにもかかわらずスライド効果は表示されない場合があります。それは、ただ設定を変更すれば解決する問題です。ツールバーの｢ツール(T)｣→｢インターネット オプション(O)｣で一番右側のメニュー｢詳細設定｣を選択して下さい。そうすると、｢設定(S):｣の窓へ様々な項目が表示される中で、｢ブラウズ｣の最後のほうに｢ページの切り替えを行う｣という項目が見つかります。初期設定ではこの項目がチェックされているのを、うっかり変更していれば、スライド効果はいっさい表示されません。
ご自分のホームページへ上記の１行(最初か終わりの片方で使う場合)か２行(最初と終わりに使う場合)を書き加え、変化が何も起こらないとしたら、ほとんどは｢ページの切り替えを行う｣をチェックするだけで解決します。また、自分のコンピュータでちゃんと機能していたのが、お友達のコンピュータだと見られない時も、まずそのお友達へ設定はどうなっているのかお確かめ下さい。そして、ちゃんとスライド効果が表示されるようになれば、あとはどんなページを作るかです･･････Good Luck!
＊ ｢Yokochinのハイパーテキスト･マニュアル｣では<meta>タグに関して、より詳しい解説がご覧いただけます。
|
お断り