ソフトウェア

ホームページ(Web Site)

 HTML(HyperTextMarkup Language)プログラムの書き方

 HTML文書の全体構造

<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
</HEAD>
<BODY>
文書本体
</BODY>
</HTML>

 代表的なタグ

記入方法
  <タグ名+“属性値”>文字列</タグ名>
<A href=“URL”>文字列</A>
<A href=“ファイル名”>文字列</A>
 タグ名 意味   属性など
 H1〜H6  見出し  数字の小さい方が大きな見出し
 P  段落  align=“right”など
 BR  改行  終了タグなし
 I  イタリック  斜文字
 B  ボールド  太文字
 FONT  フォント  size, face, colorなど
 IMG  画像埋め込み  src=“ファイル名”alt=“代替文字列”width, height、終了タグなし
 UL  Unnumbered List  type=“disc”/”circle”/”square”
 OL  Orderd List  type, startなど
 LI  List Item  リストの項目
 TABLE  Table  borderなど
 TR  Table Row  rowspan(行をまたがる)など
 TD  Table Data  align,valign, rowspan, colspan, nowrapなど
 TH  Header  ボールドでセンタリング

 動的文書・アクティブ文書

 CGIプログラムへのデータの渡し方

 URLUniform Resouce Locator )

HTTPプロトコルでWebサーバにアクセスする場合
http:// user :password@ www.mickey-son.com :80 /dir/index.html
  ユーザ名 パスワード Webサーバのドメイン名 ポート番号 ファイルのパス名
  省略可 省略可   省略可  
FTPプロトコルでファイルサーバにアクセスする場合
ftp:// user :password@ ftp.mickey-son.com :21 /dir/index.html
  ユーザ名 パスワード FTPサーバのドメイン名 ポート番号 ファイルのパス名
  省略可 省略可   省略可  
 自分のホームページにファイルをアップロードする場合、通常はFTPクライアントというソフトを利用して行う。しかし、出先で借りたコンピューターにそのようなソフトがないという場合、IEを使ってアップロードしたりダウンロードできる。出先で、自分のホームページを変更したいとか更新したい場合に使える。
 例えば、FTP接続先が「www.mickey-son.com」、ユーザー名が「whobar」、パスワードが「pass」とする。このとき、次のようなURLをIEのアドレスバーに入力して「Enter」キーを押せばよい。

ftp://whobar:pass@www.mickey-son.com

 パスワードが明示的に指定されるのがいやだという場合は、次のようなURLを入力すれば、ユーザー名とパスワードを問い合わせるダイアログが表示され、入力したパスワードは「*」の連続で表示される。

ftp://www.mickey-son.com

 なお、いずれの場合も、最後に「/log」のようにFTPサーバー内のパス名を入力すれば、接続後に自動的にそのパスに切り替わる。

ftp://whobar:pass@www.mickey-son.com/log
ftp://www.mickey-son.com/log

 接続すると、IEのウインドウにフォルダやファイルが表示されるので、エクスプローラと同じ操作で、ファイルのコピーや削除が行える。
 ちなみに、匿名(anonymous)FTPサイトに接続する場合もこの方法が使える。例えば、マイクロソフトの匿名FTPサイトに接続する場合は、次のようなURLを入力すればよい。

ftp://ftp.microsoft.com
クライアント自身のファイルからデータを読み込む場合
file:// localhost/ c:/path/mickey-son.zip
  コンピュータ名 ファイルのパス名
  省略可  
メールを送信する場合
mailto: mickey-son@mickey-son.com
  メールアドレス
ニュースグループの記事を読む場合
news: mickey-son.mickey-son.com
  ニュースグループ名

 CGI(Common Gateway interface)ファイル

 CGIはWebサーバーから外部プログラムを利用するための仕組みの総称である。JAVAスクリプトは、HTML内に直接記述し、ブラウザがスクリプトを実行しているが、CGIはWWWサーバーがプログラムを実行し、結果を返してくれる。掲示板やアクセスカウンタのように、HTMLだけでは不可能な動的なページを作成することができる。
 CGIはあくまで仕組の総称名で実際は、CGIプログラムはC言語で書いてもバッチファイルで書いてもいいが、文字列処理に優れたPerlと呼ばれるプログラム言語で記述されていることが多く、メモ帳のみで作成できるシンプルな言語である。記述したテキストファイルをCGIとしてアップロードしアクセスすると簡単に実行される。
アスキーモード(ASII)で転送しているか。
 CGIのファイルはバイナリモードで転送するとエラーになる。FTPソフトで必ずASCII(テキスト)モードに切り替えて転送を行う。
ファイルの拡張子は *.cgi になっているか。
 CGIのファイルとして認識させる為には、必ず拡張子を*.cgiにする。
パーミッションは「755」になっているか。
 CGIを動作させる為のパーミッションはすべて「755」にする。「755」とは「通常のディレクトリ、コマンド、CGIスクリプトなど。誰でも読込みと実行はできるが、書き込みは自分だけ」という意味である。 「777」(rwx-rwx-rwx)を与えるとエラーになる。 CGIファイルのみではなく、設置するディレクトリおよびその上位のディレクトリもすべて「755」に設定する。 例としてcgi-binというディレクトリの下にchat.cgiを設置する場合には以下のようになパーミッションになる。

public_html(755)rwxr-xr-x
    │
    └cgi-bin(755)rwxr-xr-x
       │
       └chat.cgi(755)rwxr-xr-x

※ファイルを設置する場所はpublic_html以下であればcgi-binディレクトリでなくても構わない。

Perlで記述されている場合には文頭のパスがあっているか。
#!/usr/local/bin/perl となる。

 サーバのライブラリを使用する場合には、提供されているライブラリまでのパス及びバージョンを確認する。
例:sendmail → /usr/lib/sendmail (sendmail8.9.3)

CGIプログラムからファイルを参照する場合にはパスがあっているか。
 データを書きこむファイル(*.datなど)のファイルを使用する場合には、CGIプログラムから目的のファイルまでのパスが合っているかを確認する。 パスの記述は絶対パスでも相対パスでも有効である。
よくある例:  chat.datを参照する。
(例:1)
    public_html
      │
      └cgi-bin
         │
         ├chat.dat
         └chat.cgi

chat.cgiから見たchat.datまでのパスは
相対パス ./jcode.pl
絶対パス /uhome/[user name]/public_html/cgi-bin/chat.dat

 (例:2)
    public_html
      │
      ├chat.dat
      └cgi-bin
         │
         └chat.cgi

chat.cgiから見たchat.datまでのパスは
相対パス ../jcode.pl
絶対パス /uhome/[user name]/public_html/chat.dat

 パーミッション

 Windowsではファイルの拡張子(.exeなど)によって、そのファイルが実行可能か不可能かが決まるが、UNIXではパーミッションと呼ばれる特別な属性によって実行可能、不可能が決まる。Windowsの場合はパーミッションを変更する必要はないがUNIXサーバーでCGIスクリプトを実行可能にする場合はパーミッションを変更する必要がある。
 CGI/SSI ファイルにはそのファイルに適正なアクセス権を与える事が必要があり、WWWサーバでは通常すべてのCGI/SSIファイルには「755」のパーミッションを付与しなければならない。
アクセス権には以下の3つがありそれぞれ数字と記号によって表示される。
アクセス権限 記号表示 数字表示 2進数(3bits)
読み込む事ができる r 4 1 0 0
書き込む事ができる w 2 0 1 0
実行する事ができる x 1 0 0 1
r:read  w:write  x:execute
 例えばパーミッション「755」 この数字はそれぞれの対象に対するアクセス権限を示している。 それぞれの持っているアクセス権限の数字をたしたものが表現されている。この数字をUnixスタイルで表示すると「所有者の権限−グループの権限−その他の人の権限」の順に記載し、 「rwx  r-x  r-x」となる。
  所有者 グループ その他の人
読み込む (4)、(r)
書き込む (2)、(w)
実行する (1)、(x)
パーミッション 7 5 5
見てもらうだけの通常のホームページであれば「644」(自分は読み込み、書き込みができるが、グループメンバや他人は読み込みしかできない)=「rw-r-r」の設定でOKである。

参考:パミッション設定値

CGIスクリプト:705 又は 755
CGIが出力するファイル:604 又は644
その他のファイル:604 又は 644
CGIを置いたフォルダー、CGIがアクセスするファイル:705 又は 755

 Javaスクリプト(JavaScript )

 「JavaScript」とは、ホームページの内容の中に記述することのできるプログラム言語のひとつであり、ホームページを作成する技術として一般的に普及している。JavaScriptを利用すれば「特定のホームページを開いたときに小さな画面を別に開かせる(ポップアップウインドウ)」や、「為替や株価のような時刻によって変化するデータを表示する」など、動きのある動的なホームページの作成を可能になるなど便利なものである。
しかしJavaScriptの特徴を悪用して、パソコンの動作に支障をきたすようなJavaScriptを使ったホームページも存在するので注意が必要である。

<!--書式-->はJavaでは実行命令であるがJavaを実行できる環境にない時にはHTMLではコメントとして解釈する。

 文字タイプ

 通常、WindowsまたはMac上で記述されたHTMLの文字コードはSJISに、UNIX上ではEUCになる。

 文字サイズ

 Internet Explorerの場合、文字サイズが「px」、「pt」指定だと、ブラウザ側での文字サイズ変更が無効。Netscape(4.x、6.xとも)は、文字サイズが「px」、「pt」指定でも、ブラウザ側で文字サイズの変更が有効。

 スタイルシートでの文字サイズの指定は、mm、cm、in(インチ)、pt(ポイント)、pc(12pt=1pc)、px(ピクセル)という絶対値による指定以外にも、em(大文字の「M」の高さを基準)、ex(小文字の「x」の高さを基準)、%という相対単位での指定やlargerとsmallerによる相対サイズ指定、xx-smallからxx-largeまでの7段階によるキーワード指定といった、相対値による指定ができるようになっている。相対サイズでの指定にしておけば、ブラウザで文字サイズを変更することができる。スタイルシートは正しく使うことができれば、Web制作者にとっても便利なモノで、訪問者側にとっても見栄えがよいサイトを見ることができる。
 これから、スタイルシートを導入しようと思うのであれば、文字サイズは相対的な大きさで指定するほうがよいと思う。

 画像

 JPEG

 ホームページに写真を載せる場合には、640×800ピクセル程度のJPEGで十分である。また通信速度の遅いユーザーでもホームページを快適に見ることの出来るように、 最初は小さな画像「サムネイル(元の画像を縮小した画像)」を表示し、クリックされた場合に元の画像を見せるようにする。しかしJPEGは、小さなサイズの画像を保存するのには数KBのヘッダを含むため、圧縮効果が期待できないから適していない。サムネイルには、GIFなど他の形式を選ぶと良い。色数は256色までに押さえた方がよい。
 「ぼかし」を使うと圧縮率をより高め、よりファイル容量を軽くすることができる。ただし、中心となる被写体までぼけてしまう危険性があるので、「ぼかし(ガウス)」を利用して、背景だけをぼかすと効果的がある。
 またプログレッシブJEPGをホームページ上に使用すると、最初は低解像度のぼやけた状態で表示され、サイトを訪れたユーザーに、写真の全体像を早めに分かってもらう効果があるが、ファイルが余分に重くなる。

 GIF

 バナーやアイコンを作るときに一般的に使われるファイル形式で表示できる色の数が256色までしかないため容量が少なくて済む。
 GIFには、画像ファイルの背景を透明にして、ホームページの壁紙や背景色が透けて見えるように表示する透過GIFという機能がある。透過GIFを作るには、使用している画像ソフトで、新規作成のときに背景のカラーを「透明」にするのが一般的である。
 GIFには、1つのファイルの中に多様な情報(表示時間や表示位置など)を持てるという特性がある。アニメーションGIFというのは、その特性を利用して、複数の画像を1つのGIFファイルにまとめてアニメーションを作る方法である。複数の画像を使いながらも、ファイルとしてはひとつである。

 ウェブセイフカラーコード(Web safe color code

 インターネット上でホームページやカラー画像などを公開すると、閲覧者のコンピュータの利用環境によっては、正しく色が再現されないことがある。このためOSやコンピュータの違いによらずどんな環境でもこれらの色が必ず表示できるように選定した216色をWebセーフカラーという。
 しかし実際にはブラウザまたはOS側でディザ表示を行う場合があるためフルカラー環境以外では色が微妙に異なって表示される。
 カラーコードで表示する場合は<font color="#cc3399">のようにカラーコードの前に#を付ける。
これは赤(R)、緑(G)、青(B)の光の3原色を8bit(16進数)で表した物であり赤=cc(2進数で1101 1101、10進数で204、強度では80%)、緑=33(2進数で0011 0011、10進数で51、強度では20%)、青=99(2進数で1001 1001、10進数で153、強度では60%)を表す。

 動画

 ホームページで動画を公開する時には以下のレベルが適当である。
サイズは320x240ドット
ビットレートは128〜256kbps

 BlogWeb Log

 Web上のlog(記録)を意味する造語。ブラウザー(ホームページ閲覧ソフト)上で、手軽に更新や書き込みができるサイトのこと。 ホームページを作成する専門的な知識がなくても、簡単に開設や更新ができる「簡易ホームページ」と言われている。
 通常のホームページとブログの違いは、何といっても更新が簡単なこと。ホームページの場合、ファイル転送用のサーバーにデータを送ったうえで、画面を見ながらの調整も必要になる。ブログなら、ブラウザーのほかサービスによっては携帯電話からでも更新が可能である。日記サイトなどを中心に、徐々に増え始めている。
 掲示板のようにブログサイトに書かれた記事に対して読者がコメントを書き込め、その記事と同じテーマで自分も記事を書いている場合は、発信者と読者のブログが相互にリンクを張ったりする「トラックバック機能」も搭載。同じような趣味や仕事など話題を共有する人とのコミュニケーションの輪が広がっていく。
 しかしブログはユーザーが投稿記事を1つ書くと、その記事が属するカテゴリー、トップページも自動的に書き換える仕組みになっているのでほかのブログの記事に関してリンクを張り、さらに記事を書くという、ブログの最大の特徴でもある「トラックバック」も含めて、構造上サーバーの負荷が重くなってしまう。

 RSSRich Site Summary又はreally simple syndication

 Webページの要約データのフォーマットのことで、最近のブログサービスは、ユーザーが記事を投稿すると直ちにその記事まで含めたブログサイトの要約データ(サイトの見出しや、概要、著作権、更新日付などさまざまな情報)を作成し、だれでもダウンロードできるようにしている。このファイルを「RSSファイル」と呼ぶ。RSSを使用すると、Web サイトの所有者は、見出し項目のリスト、更新通知、およびコンテンツを Web 上で多数の人に簡単に配布できる。たくさんの人が関心を持つ Web サイトの多くでは、コンテンツが変更されるタイミングは不規則であり、ニュース サイト、旅行サイト、コミュニティ情報ページ、医療 Web サイト、ブログなどは、そういった Web サイトの例である。それぞれの Web サイトを何度もチェックして、新しいコンテンツがアップされているかどうかを確認するのは非常に面倒であるため「RSSリーダ」と呼ばれるソフトウェアや、RSSに対応したブラウザを使うことで、簡単にウェブサイトの更新情報を手に入れることができ、効率よく新着ページの閲覧ができる。
  ほとんどのブログが、サイトの内容を要約した情報を「RSS」という規格で配信している。各サイトがRSSを使ってさまざまな情報を提供することによって、多数のサイトの更新情報を簡単に、素早く、統一された表示形式で読むことができる。 RSSには2種類のバージョンがあって、1つはNetscape Communications社が開発した「RSS0.9」の後継として開発された「RSS2.0」。 もう一つは、RSS-DEVワーキンググループという開発者集団が開発しなおした「RSS 1.0」である。 現在、日本では、「RSS 1.0」が多く使われている。
 RSSファイルは単純にダウンロードしてテキストエディタなどで開いても、なんとなくWebサイトの要約になっているようにみえるが、そのまま読めるようなものではない。
 RSSはXMLeXtensible Markup Language)の一形式であり、XMLを使うことで、ソフトウエアが自動で処理できる形式になっており、ほかのユーザーのアプリケーションがブログサーバーにアクセスしてRSSファイルを取得すれば、最近更新された記事の内容が簡単にわかる。
 RSSファイルの活用法は二つある。一つはエンドユーザーがRSSリーダーと呼ぶ専用ソフトを使ってRSSファイルを読み込み、さまざまなブログの記事の更新情報を集めて表示するという使い方。もう一つは、ブログの記事情報を集めるブログ検索サイトが、さまざまなブログサイトのRSSファイルを読み込んで記事検索用のデータベースとして使う方法である。
 RSSリーダーを例にRSSファイルの使い方を見てみてみるとエンドユーザーは、気に入ったブログのページ内に「RSS]、「PDF]、「XML」などと表示されているアイコンをクリックして、表示された画面のURLをRSSリーダーに登録する。RSSリーダーは登録されているサイトのRSSを調べ、更新されていれば、そのサイトに更新された記事があることを教えてくれると同時に、更新された記事の概要も一緒に表示してくれる。RSSリーダーのほとんどが、ティッカーと呼ばれる小さなウィンドウ表示ができ、この状態でデスクトップの端に表示しておけば、他の作業をしながらでも常に最新のニュースなどをチェックすることができる。
 RSSリーダーには、大別するとウェブサイトでサービスを提供するタイプと、ソフトウェアをパソコンに導入するタイプがある。ウェブのサービスはOSの種類を問わず、どのパソコンからも利用できるのが強みで、ソフトウェアは高機能を売り物にしているものが多い。ウェブサイトでサービスは「ブログラインズ」、「PAIPO READER」など、ソフトウェア型には「ヘッドラインリーダ(Headline−Reader シェアウェア)」や「goo RSSリーダ(無料)」などがある。
 このように登録しておくと、RSSリーダーは定期的にブログサーバーにアクセスし、RSSファイルを取得する。そして、以前のRSSファイルと比較し、更新された記事を探し出す。エンドユーザーがRSSリーダーの画面を開くと、更新された記事が時間順に表示され、気になった記事をクリックすればその内容が表示されるというわけである。
 RSSファイルを用意するのはブログサイトに限らない。ニュースサイトなどを中心に、ブログ以外のWebページでもRSSファイルを用意するWebサイトが増えている。RSSリーダは設定の手間もほとんどいらず、いったん巡回サイトの設定さえ済んでしまえば、情報収集に時間をとられない。RSSフィードの取り込みが、コピー&ペーストやドラッグ&ドロップでカンタンかつ短時間でできることもポイント。また、収集された記事はカテゴリ別に分類されるから、情報の整理にムダな時間を割く必要もない。
 具体的にgoo RSSリーダでは
 「goo RSSリーダ」のメニューから[RSSサイト]−[RSSサイトの追加]を選択する。[サイトの追加]ウィンドウが表示されたら、[サイトURL]の項目に先ほどコピーしたURLをペースト。[判定]ボタンをクリックし、[RSSサイトの追加]ウィンドウが表示されたら[追加!]ボタンをクリックする。画面左側のサイト一覧に、新たな巡回先サイトが追加される。
 「goo RSSリーダ」に登録されたサイトは1時間おきに自動巡回され、もし内容が更新されていれば記事一覧に追加される。巡回間隔は、メニューの[設定]−[goo RSSリーダの設定]から変更可能である。またメニューの[RSSサイト]−[キーワードの追加]から検索キーワードを設定しておけば、収集した記事一覧の中から特定の記事だけを絞り込んで表示できる。

 ステータスコード

ウェブサーバーとのやり取りに中で表示されるエラーコード
 表示コード 表示メッセージ  原因 
 401  Unauthorized  認証に失敗
 403  Forbidden  アクセス権限がない
 404  Not Found  該当するページがない
 500  Internal Server Error  サーバー内部に障害がある
 503  Service Unavailable  メンテナンスや混雑などによる一時的な障害

 印刷への考慮

 ホームページには印刷されることを考慮しないで、横幅が固定されているものがあり、このような設定がされている場合、印刷すると右端が途切れてしまうことがある。(横幅が固定されていない場合は、印刷するときに用紙に納まるように調整される。)
対策 
  1. 印刷したいホームページがフレームで分割されていれば、印刷したい情報がある部分(フレーム)だけを印刷することで、右端が途切れないようにできる可能性がある。
  2. 印刷プレビューを確認しながら、ページ余白を少なくしたり、印刷の向きを「横」にして、右端までがページに納まるようにする。
  3. プリンタによっては、A4用紙までしか印刷できないものでも、用紙サイズとしてA4より大きいサイズを選択でき、実際に印刷するときにA4に縮小して印刷できる機能がある。この機能を使うと用紙サイズをB4にして、A4の大きさに縮小して印刷できる。

注意)
 サーバーがUNIXの場合は大文字と小文字を区別するがWindowsサーバーは区別をしない。

 ホームページ開設手順

  1. ホームページサーバーを手配
    契約プロバイダー及び無料サーバーに登録
  2. ホームページ作成 
    トップファイルは通常「index.html」とし、その下にテーマ毎にフォルダーを作成し、その中に各ファイル(html又はhml)を作成する。
    出来るだけ判りやすいフォルダー、ファイル階層にする。
    テーマ内のファイル指定は相対パス、テーマ間は絶対パスで指定する方が後々、変更はしやすい。
  3. フォルダー、ファイルをサーバーに転送
    サーバー名、ユーザーIDを取得し、FTP(File Transfer Protocol)ソフトを使用してファイルをアップする。
  4. サーバー内でプログラムを動かすには各サーバーによって制限があるためサーバー管理者に確認する。
  5. インターネットでホームページにアクセスし、動作を確認。
  6. 維持、更新する。