2000/4/20 更新
| ここではホームページを作成する時に便利な機能・タグのいくつかをご紹介します。またこれらのタグは私が試行錯誤した結果、正常に働くことを確認したもので現在私の使用しているものです。 特にJavaScriptなどはいろんな書き方がありますしこれでなければならないというものではありません。一応の参考として下さい。 今後も新しいものを確認しましたら掲載いたします。 |
| １．MIDI再生の方法 | ２．MIDIをBGMに使用する |
| MIDIファイルを再生する方法です。 | MIDIファイルをバッグランドに 流す方法です。 |
| ３．文字のスクロール | ４．カーソルに文字を出す |
| 文字をスクロールさせる方法です。 （白地に黒文字） |
リンクする時にカーソルが手の形に なったときにその説明などを出す。 |
| ５．ステータスバーに文字 | ６．テーブルの応用 |
| リンク文字に触れたときにステータス バーに文字を出す。 |
テーブルの便利な応用例です。 |
| ７．アンカーの使用 | ８．JavaScriptの使用 |
| アンカーの使用方法の説明です。 | JavaScript の使用について。 |
| ９．文字化けの防止 | １０．リンク文字の色の変更 |
|
その防止方法。 |
スタイルの変更の方法。 |
| １１．CGI の使用 | １２．私の利用しているソフト |
| アクセスカウンタ、フォーム返信、 掲示板等のCGIの使用について。 |
CGIやエディターなど現在私の 利用しているプログラム等です。 |
|
MIDIを再生させるには大きく分けて二つの方法があります。 もともとデフォルトの状態ではIEもNNもMIDIに対応していて、単にリンク先をそのMIDIファイルの名前にしておけば自動的にIEならMediaPlayer、NNならLiveAudioが起動して演奏の開始、停止等の操作が行えるのですが、現状はややこしくてMIDIPLUGやQuick
T imeをインストールしている人も多いので、その場合は、いちいちファイルの保存先、処理方法を尋ねてきたりして、かえって面倒な操作となります。
もっと確実な方法としては、ページにフレームを使い、そのフレームにリンクさせ、次（２）に書いてあるBGMで流すタグを入れたページを作ってそのページをそのフレームで再生させる方法があります。 |
|
MIDIをバックグラウンドに使う方法としてはBGSOUNDタグを使う方法、EMBEDタグを使う方法、そしてJavaScriptを使用してブラウザーによってタグを切り替える方法の３通りのやり方があります。
その他に現在一部のホームページでEMBEDタグとBGSOUNDタグを単に併記しているだけのものもありますが、その場合QuickTime等のプラグインの入ったIEでは２重に少しタイミングがずれて再生されます。また一部のホームページ作成方法の説明のページで<OBJECT></OBJECT>でEMBEDタグをくくればIEはOBJECTタグを理解しないので併記出来るとの記述があり、実際に現在それを使っているページもありすし実際私も使っていましたが、やはりそれも間違いで、たまたま私のIEの調子が悪くて理解しなかっただけでデフォルトの状態に戻ればやはり２重に再生されるようになりました。 |
|
文字をスクロールさせる方法もたくさんあります。
次にIEでもNNでもスクロールさせようとすればJavaScriptを使うしか方法はありません。その場合いろんな記述の方法がありますが現在私が使用しているのはその中でも比較的簡単で、単に白地の中を黒の文字がスクロールするだけのものです。
もっと簡単に書き込みが出来るようにIEもNNも統一してくれれば良いと思うのですが現状はその統一はなかなか難しそうです。 |
|
リンクするものにカーソルを当てればカーソルが手の形になりますが、その時にその手からリンク先の説明などが表示出来る方法が二つあります。
次にカーソルが触って手の形になったときにその手に説明が現れる方法もありますがこのタグはIEだけで認識されNNの場合は認識されません。ただこの場合はオブジェクトだけでなく普通の文字でも何の場合にも使用できます。
他にJavaScriptを使用してダイアログを出したりする方法もありますが記述がややこしく、また現実にむやみにダイアログを出してもうっとうしくなるばかりであまりお奨めいたしません。 |
|
４項の方法とは別に、リンク元にカーソルが触れればステータスバーにその説明などを表示する方法もあります。
その他ステータスバーにコメントをスクロールさせたりする方法もありますがあまりむやみに使って本来のステータスバーの働き、例えばダウンロード状況の表示などに支障を与えない程度に使用すべきです。 |
| テーブルは使い出すと全く便利なもので、レイアウトを整理するためには欠かせないものです。 別にも書いてありますが、最近は見る人のデフォルトのフォントの設定が人によって異なりますから、いくら文字をスペース等を利用して整列させても、見る人によってまったく崩れたものになってしまいます。ですから文字はテーブルを利用して自動的に改行するようにしておけばそれほどの崩れは起こりません。またIE5になってから行を整えるためのスペースは認識されなくなりましたから、ますますテーブルを使用する機会が増えています。 またテーブルの中にテーブルを作ることによって簡単にかつ小さな容量で枠取りも作れますし、工夫次第でその利用方法は無限にひろがります。 ただテーブルを使用する場合<注意点>のページに書いてあることに気をつけて下さい。またそのページに書いてありますように一部のブラウザーではなにも文字の入っていないテーブルは無視されることもありますので、上記の枠取りの場合など分からないように「−」等の文字を仕込む等の工夫も必要です。 |
| アンカーは基本的には同じページの中で内容が多い場合、最初に目次みたいなものを作っておいてその目次からそのページの目的の場所へ跳ばす、一種のページ内リンクのようなものです。アンカーを挿入してそのアンカーに1とかの名前を与えておいて、目次などのなかのそこへのリンクのリンク先を#1にすれば簡単にその場所へ跳ぶことが出来ます。その場合注意しなければならないのは各リンク先にも頭へ戻れるようにページの先頭にtop等のアンカーを置き、例えばトップへ戻る等のリンクを作る必要があります。時たまホームページをのぞいていてアンカーで目的の場所に行くには行ったが戻るのに延々とスクロールしなければならないページもあります。 またアンカーはそのページ内部だけでなく、他のページからそのページのアンカーをリンク先に指定することも出来ます。リンク先として****.html#**とかしておけばそのページの#**に直接行くことができます。全体のページ構造がややこしくなるほど便利な道具です。 |
| 最近JavaScriptが大いに使われだしていろんな動きをホームページに加えることができるようになりました。これからももっともっと普及するものと思われます。ただその使い過ぎも考え物で、一部にはうっとうしく感じるものもあります。またJavaScriptの教本などを読んでも、そのうっとうしいものの方法ばかり書かれていて、いざ本当に必要なものを探すと案外見つからないものです。 また基本的にJavaScript等はいちいちソースを開いて間違いが無いようにひとつひとつ書き込む必要があります。よくサンプルをコピーしてペーストすれば良いと書かれてあっても思い通り動作しない場合の方が多いようです。 また使用しているホームページ作成ソフトによっては苦心して書き込んだものを保存する時に勝手に書き換えてしまい、結局動作しなくなるということもあります。最近のホームページ作成ソフトは親切でこちらが苦心して書き込んでも、保存の時に自分(ソフト自身)が理解(?)している形に書き換えようとする傾向があります。そんな場合はこちらもあれこれと試してみてなんとかまともに働くタグを探るしかありません。こちら自身そのソフトに頼っているのですからお互いに歩み寄るしかないようです。 またJavaScript等を使用するときに注意しなければならない点としてくくりの記号の使い分けです。{ } ( ) の場合は方向性があるので分かりやすいですが、" ゃ' の場合方向性が有りませんので、うっかりすると違ったくくりに認識されたりします。ですから中に入れる文や説明などに" や' は使用しない方が無難です。 |
|
ネットをいろいろと廻っていると時折文字化けしていていちいち「エンコード」で「自動選択」を選択しなおさなければいけない場合があります。その原因はブラウザでいくら「自動選択」にしておいてもブラウザはそれほど賢くなく、タグが入っていてはじめて自動選択を行っているわけです。その防止のためには<HEAD>と</HEAD>の間に次のタグを入れることによって解消されます。
このMETAタグによって文字コードの指定が出来るわけです。 |
|
リンクする文字の色は標準ではブルーで、訪問済みリンクの場合は茶色(?)で表示されますが、それを変更することも出来ます。
という具合にBODYタグの中にLINK(標準リンク)、ALINK(アクティブ、つまり現在表示中のリンク)、VLINK(訪問済みリンク)の色を指定すればその色で表示されます。 また最近スタイルシートを使ってリンクの下線を消したりする方法もあります。その方法は<HEAD></HEAD>タグの間に以下のタグを入れることによって可能です。
この場合「link」がリンク文字、「visited」が訪問済みリンク、「active」がアクティブリンク、そして「hover」がマウスを乗せた場合の指定になります。また「text-decoration」を「none」にすれば下線は表示されませんし、それを「underline」にすれば表示されます。ですからマウスを乗せた時だけ下線を表示させることも可能です。また<!---と--->はスタイルシートに対応していないブラウザで見た時にA以下の文字が表示されないためのくくりです。JavaScriptの場合や、ソースに説明などを入れたい時に使用します。 もう一つの応用の方法として以下の方法もあります。普通ホームページ作成ソフトで文字の色を指定してもリンクをすれば普通の状態になります。その場合のソースは以下のようになっています。
それを次のように書き替えればリンク文字の色をそれぞれ自由に変えることができます。
つまりリンクターゲットとフォントカラーのタグを逆にするだけでリンク文字の色を自由自在に変えることが出来ます。またアンダーラインは表示されますが、スタイルシートで指定すればその設定も変えられます。ただし色の変化は出来ません。 |
| CGIを使用する場合に一番注意が必要なことは契約しているプロバイダがどこまで許しているかをまえもって確認しておくことです。 大手プロバイダの場合はほとんど全部が許してなく、せいぜいアクセスカウンタとフォーム返信機能くらいです。その場合はプロバイダで書式をサンプルとして表示してありますのでHTMLのソースを開いてそのまま書き込めば簡単に仕上がります。またその場合掲示板等を使用するとすれば無料・有料の掲示板サービスを利用するしかなりません。（<リンク集>にその一例としてTEA CUPへのリンクがあります。） 小規模あるいは中堅どころのプロバイダで一部CGIが自由に使えるところがあります。そういう場合は自分でプログラムを組んで自由に掲示板等を作ることが出来ます。ただ実際に自分でプログラムを組むのは大変ですのでフリーウェア等のプログラムを仕入れて使用する方が無難です。<リンク集>に表示していますが「ネットレスキュー−Web裏技」などで簡単にそれらのプログラムを手に入れることが出来ます。 大体は付属の説明通りに使用すれば簡単に仕上げることが出来ます。ただ注意しなければならないのはCGIプログラムの加工はメモ帳などのエディタ(こちらを推奨)で行わなければならないこと、アップロードはアスキーモードで行うこと、またCGIはサーバーのUNIXで働きますので中に入れる言葉などに記号等を使うと文字化けしやすいということです。Windowsの場合は基本的にsift-jisモードなのでそういうことが起こります。またGIFやMIDI等も基本的には<>で囲んでHTML文書で使用できますが、（またメール送信フォーム等の戻るページにしてもそうですが）基本的にファイルの表示はそのCGIからの相対パスでいけますけど時にはhttp://****/**/**のように絶対パスで書き込まなければ認識されないこともあります。うまくいかない場合書き換えてみてもいいと思います。 またCGIをサーバーのUNIXで働かせるにはパーミッションの設定が必要です。パーミッションの値は755とか600のように３桁の数字で表示され、その値はプロバイダから指定されますから、アップロードの後そのファイルを選択して右クリックすればメニューが表示され、その中のパーミッション(UNIX)という項目を選択します。そうすれば左からOwner、Group、Otherの３つが表示され、それぞれにRead、Write、Executeのチェックボックスがあります。Readは４、Writeは２、Executeは１の値で、チェックしたものの合計がその値となります。例えば全部チェックすれば７、ReadとExecuteなら５、全部外せば０という具合です。 また他の応用としてアクセスカウンターをいくつか設けたい場合、プロバイダが１個だけとしている場合は無理ですが、そうでない場合は**.dat（**はログイン名）のところに**00.datとか**01.datのようにしてやれば別々にカウントされます。またその数字を変えてやれば別のものと認識され、カウンターは０にリセットされます。 メール返信フォームについての注意はソフトによって異なりますが、返信時にNAMEのデータをアルファベット順にソートされて返信される仕様のものが多いようですが、その場合NAMEの頭に00とか01等の数字を入れておくとその順番にソートされて返信されます。その方がこちらも順番通りのデータで見やすくなります。 |
|
CGIプログラムなどを現在私はいくつか使用させてもらっていますがそれらについてご紹介いたします。 まずエディタですが私は現在EmEditorを使用しています。これが私の使用している唯一のシェアウェアで1200円プラス消費税の投資です。ただエディタにもいろいろとありますが性能としては名の知れたものならそれほど違いは無さそうです。 http://www.nifty.ne.jp/forum/femsoft 次にこのホームページの掲示板で使用しているのはフリーウェアの「簡易BBS」です。これは「ネットサーフレスキュー[Web裏技]」から拝借しています。ここには他にもたくさんのCGIプログラムがシェアウェア、フリーウェアとも掲載取されています。 このホームページの会議室で使用していますのはツリー式掲示板の「WebForum」で「KENT WEB」から拝借しています。 新しく設けた登録式リンク集は「My Tools Net」の「T-Bookmark V1.10」で、検索機能がついている、管理者が認めなければ登録出来ない、管理者による修正・加筆が出来る、ジャンルの追加・修正が簡単にネットから出来る、複数ジャンルに登録出来るなどの大変便利な機能が付いていましたので採用しました。 そして別に私の管理している「関西玉翠会のホームページ」の「会議室」に使用していますのは「Falcon World」の「グラデーションチャット」です。このFalconさんはツリー式掲示板でサポートを行っていますが、その答えの素早いことは他に類を見ません。質問を入れたその日には答えが掲示板に返ってきます。また他のサイトのサポートは基本的な動作に関してのサポートはしてくれますが改造に関してはもう一つ親切ではありませんが、このFalconさんだけは改造にも熱心でいろいろと教えてくれます。今でもいくつかのCGIプログラムが掲載されていますが、もっともっとCGIプログラムが増えることを期待してやまないサイトです。 CGIプログラム等を使用する場合どうしても避けられないのはその改造です。自分の好みのタイトル・色・壁紙・カウンタ・レイアウト等の改造を行って表現するには、そのプログラムを開いて書き換える必要があります。そのためには多少のHTMLやCGI等の勉強も必要になりますが、とにかく試してみてアップロードして隠れサイトとして試運転を繰り返し、まともに動くようになってから自分のホームページからのリンクをつければいいでしょう。なにせperlが入っていなければならないので自分の仮想サーバでは試運転は出来ませんから。ただ何回も繰り返しているうちになんとなくそれぞれの命令の意味が分かってくるものです。また改造したプログラムのどのあたりが間違っているのか知る手段としてtelnetも便利な手段です。telnetで接続してみてプログラムを実際に働かせてみるとパーミッションの間違い、ファイル名の書き間違い、プログラムの何行目あたりに間違いがあるか指摘してくれます。Windowsには基本的にtelnetの機能がありますから便利です。 |
