このページへのアクセスは人目です。(Since 2000/11/26）

　ホームページを見ているときに、なかなか画面が表示されずにイライラしたことはありませんか。エンターテイメント系のページならまだしも、学術サイトでも結構重たい表紙がついていたりします・・・。私も最初はGIFアニメに凝ったり、バックグラントミュージックを流してみたりいろいろやりました。最終的にいきついたのが、いまの姿です。デザインに凝ったところでセンスがあるわけでないし、コンテンツを充実させたほうがよいと思ったからです。テキスト中心にすれば、貧弱な通信環境でも高速に画面表示が可能です。最近流行のi-mode対応のホームページへの移行もテキスト中心にしておけば簡単です。このコーナーをみて、みなさん重たいページをやめて軽いページを作りませんか。

ホームページ作成ソフトについて

当館のホームページを作ろうにも書きましたけど、本格的なホームページをつくるならホームページビルダーが絶対にお勧めです。IBMの回し者ではありませんけど・・・。ほかのホームページ作成ソフトやフリーソフト、体験版などいろいろ試してみたけど一番簡単です。ワードや一太郎をホームページ作成ソフト代わりに使うよりも、余計なHTMLコマンドを使用しないので画面表示スピードどもわずかに速いはずです。画面表示スピードは結局、ファイルの大きさに依存するので、同じ内容を表現する場合にできるだけ少ないコマンドを使用していたほうが有利です。まあ、テキストが数行増えてもファイルサイズの及ぼす影響は、微々たるものですけどね。HTMLソースを直接編集するときにわかりやすいというほうがメリットでしょう。ところでHTMLソースって何か知っていますか？ホームページはHTML言語というプログラム言語で記述されています。そのプログラムのことをソースと呼んでます。これはインターネットエクスプローラーでも見ることができます。たとえばこのページのソースを見てみましょう。

　表示（V)→ソース

を選択してください。自動的にメモ帳が立ち上がって、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>ホームページ高速化計画</TITLE>
</HEAD>
<BODY>
<P align="center"><IMG src="logo/logospeed.gif" width="509" height="55" border="0"><BR>
<BR>
このページへのアクセスは <IMG src="http://cgi13.plala.or.jp/hkyoji/count/dream.cgi?id=speed">人目です。(Since 2000/11/26）</P>
<P align="left">　ホームページを見ているときに、なかなか画面が表示されずにイライラしたことはありませんか。エンターテイメント系のページならまだしも、学術サイトでも結構重たい表紙がついていたりします・・・。私も最初はGIFアニメに凝ったり、バックグラントミュージックを流してみたりいろいろやりました。最終的にいきついたのが、いまの姿です。デザインに凝ったところでセンスがあるわけでないし、コンテンツを充実させたほうがよいと思ったからです。テキスト中心にすれば、貧弱な通信環境でも高速に画面表示が可能です。最近流行のi-mode対応のホームページへの移行もテキスト中心にしておけば簡単です。このコーナーをみて、みなさん重たいページをやめて軽いページを作りませんか。<BR>

以下省略

というようなテキストが表示されますね。これがHTML言語のソースです。ホームページビルダーを使えばこのようなHTML言語を意識することなく、ワープロを操作する感覚で文字を入力すれば自動的にHTML言語を記述してくれます。ワードや一太郎でも同じようなことができるのですが、変な制御文がついてしまいます。たとえば画面にタイトルだけ表示するページをワードとホームページビルダーの両方で作成してみましょうか。まずホームページビルダーを使用して作成したサンプルがコレです。ソースは以下のようになってますね。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<P>ワードとホームページビルダーの違い</P>
</BODY>
</HTML>

次にワードで同様のページを作成したものがコレです。HTML言語に変換するには、ファイル→Webページとして保存を選べばOKです。インターネットエクスプローラーでみると見た目は同じですよね。でもHTMLソースを見てみると、

html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv=Content-Type content="text/html; charset=shift_jis">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 9">
<meta name=Originator content="Microsoft Word 9">
<link rel=File-List href="./sample2.files/filelist.xml">
<title>ワードとホームページビルダーの違い</title>

<style>

</style>
</head>
<body lang=JA style='tab-interval:42.0pt;text-justify-trim:punctuation'>
<div class=Section1 style='layout-grid:18.0pt'>
<p class=MsoNormal><span style='font-family:"ＭＳ明朝";mso-ascii-font-family:Century;
mso-hansi-font-family:Century'>ワードとホームページビルダーの違い</span></p>
</div>
</body>
</html>

というように、ほとんど冗談としか思えないような余計なことをしてくれています。こんな長いソースがなんで必要なのか私には理解できません。ちなみにファイルサイズは、ホームページビルダーを使用したものが１KB、ワードを作成したものが４KBです。この１行だけのテキストなら、表示スピードはほとんど変わりませんけどね。でも少しHTML言語に対する知識をみにつけてきた時に、ワードで作成したファイルを修正するのはかなり厄介ですから、やはりホームページビルダーを買いましょう。あるいは、HTML言語を覚えてメモ帳で直接入力していく手もありますけど。

TOPへ戻る

超入門HTML

　ホームページビルダーを使用すれば、HTMLを覚える必要はないのですけど最小限のコマンドぐらいは知っていたほうが便利です。掲示板やカウンターの設置には、HTMLを直接編集する必要もありますし。さきほどのサンプルファイルを参考に解説しましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

という部分は、以下のテキストがHTML言語の4.0というバージョンに準拠していることを宣言している部分です。多分・・・？さわる必要はないので、気にする必要はありません。

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

という部分も修正する必要はありません。<BODY></BODY>の間に記述された部分が実行されると考えてください。なお、<TITLE></TITLE>の間に文字をいれておくとお気に入りに登録したときにタイトルがでます。

リンクの設定方法

覚えておくと便利なコマンドとしては、リンクをさせたいときのコマンドです。このページの一番下には、メインページに戻るためのリンクが設定されています。これは、

<A href="index.htm">【財政学の館TOP】へ戻る</A>

というHTMLソースで実現されています。<A href="index.htm">の"index.htm"がリンク先のアドレスですね。このリンク先のアドレスには、相対アドレスと絶対アドレスの両方が使えます。この場合は相対アドレスを使用してます。絶対アドレスなら

<A href="http://www3.plala.or.jp/hkyoji/index.htm">【財政学の館TOP】へ戻る</A>

という表記にすればOKです。でもなぜ相対アドレスを使用しているかと言うと、当館では、ミラーサイトも作成しているからです。メインサイトのある関西大学のサーバーは、昼間の間は学生さんが授業等で使用するのでかなりスピードが落ちてしまいます。そこで、わたしが個人的に加入しているぷららからでもメインサイトと同じコンテンツが見えるようにしています。絶対アドレスでリンクを設定するとメインサイトないしミラーサイトのどちらか一方にしか戻れません。相対アドレスを指定しておけば、２つのサーバ内のファイルの位置関係、ファイル名が同じであれば、それぞれのサーバーの該当ページに飛ばすことができます。

カウンターの付け方

　ホームページを作成したからには、どのくらいの人が見てくれているのかを知りたくなりますね。わたしは表紙だけでなく、各ページの人気度が知りたくて、個別のページまで付けてます。カウンターをつけるとCGIという仕組みを利用することになり、それだけ画面表示は遅くなってしまいますけど・・・。当館ではKENT　WEBのCGIを利用させてもらっています。でも初心者には、CGIの設置はお勧めしません。どうしても設置したい人は当館の超入門CGIをご覧ください。ほとんどのプロバイダがレンタルカウンタを提供してますからそれを利用してください。ぷららならレンタルでも高機能なカウンタが用意されています。詳しくはこちらをご覧ください。プロバイダが用意していない場合には無料のレンタルカウンタが星の数ほどありますから。レンタルカウンターで検索すれば山のようにでますので、お好きなものをご利用ください。

カウンターをつける場合には、直接HTMLソースにカウンタに関するコマンドを加える必要があります。一般的な記述方法は

<IMG src="http://○○○/□□□.cgi?△△△>

というものです。○○○の部分にはカウンタのCGIが設定してあるアドレスを記入します。□□□は使用しているカウンタのファイル名を入れます。△△△の部分はカウンタ使用上のオプションコマンドをいれます。この部分には、レンタルカウンタのIDなどをいれることになります。

TOPへ戻る

i-mode対応ホームページの作り方

　画面表示の軽いホームページにするなら、いっそのことi-mode対応のホームページにするのもひとつの手です。ホームページビルダーならi-mode対応のページも簡単につくれます。ターゲットブラウザをi-modeに変更すると、ホームページ作成の画面が縮小表示になり、i-modeに対応していないHTMLコマンドを削除することができます。フォントとか、テーブルのタグが使えないようです。GIFについては白黒画面用に２色に減色したほうがよいみたいです。色を減らせばファイルサイズも小さくなりますから。でも、色を減らしてまでGIFを使うこともないでしょうね。ただし、カウンターぐらいは付けたいという気もしますね。当館では、i-mode対応のカウンタとしてKENT　WEBのe-Counterを利用させてもらっています。カウンタのなかにはi-modeで表示できないものがあるようですが、これなら大丈夫です。それにi-mode版のコンテンツの少なさを補うために回覧板を設置しました。こちらはKENT　WEBのSUN BOARDのCGIをi-mode用に改造したものを使用しています。改造と言っても画面表示のところをさわっただけです。当館のように管理者限定の掲示板を設置すれば、日記としても使えます。掲示板については、i-mode対応のレンタル掲示板がたくさんありますからそちらのご利用をお勧めします。i-modeのコンテンツとしては、掲示板が一番適しているでしょうね。通常のコンテンツはパソコンの広い画面でみたほうがよいに決まってますから。
　
リンクの設定方法
　i-mode版で覚えておいたらよいテクニックとしては、携帯の数字ボタンでリンク先に飛ぶためのタグがあります。当館のi-mode対応版のソースでは、

<A href="http://www3.plala.or.jp/hkyoji/i-mode/minijiten.html" accesskey="2">2.経済英語事典</A>

としている箇所です。accesskey="2"というところが数字ボタン（この場合は２番）に対応させるタグになっています。これで２番を押せば、 A href=の””の中に記述されているアドレスに飛ぶことができます。

その他のi-mode作成のテクニックについては、以下のサイトが役立ちますので。

ｉモード対応HTML Version1.0・2.0・3.0 タグ・画面イメージ対応表	NTTドコモによるi-mode対応ページの作り方。
iモード対応のホームページを作ろう	INTERNET Watchホームページの記事です。

TOPへ戻る

【財政学の館TOP】へ戻る