======================================================================

●      ●  ●●●●●  ●      ●  ●           ☆ＨＴＭＬ入門講座☆
●      ●      ●      ●●  ●●  ●           第14号       98/10/18
●      ●      ●      ● ●● ●  ●
●●●●●      ●      ●  ●  ●  ●
●      ●      ●      ●      ●  ●           発行人：
●      ●      ●      ●      ●  ●           池田蛇足 dasoku Ikeda
●      ●      ●      ●      ●  ●●●●●    

Visit Our Web Site About This Magazine and HTML----------------------
          http://hp.vector.co.jp/authors/VA014079/study_html/
=====================================================発行部数 2913部=

第11講：画像

さて、今回はついに静止画像を扱います。あなたのウェッブページに、あなた
の描いた絵を載せることができます。

しかしＨＴＭＬで絵を描画することはできません。できたとしても、たとえば
<HR>によって水平線を描くのが関の山です。カラフルな画像をＨＴＭＬで扱う
には、ＨＴＭＬドキュメントに、画像を「埋め込む」必要があります。

ＨＴＭＬファイルというのは、言うまでもなく、みなさんが今まで勉強してき
たような、単なるテキストファイルです。ここに画像を貼りつけることはでき
ません。ですから、そのＨＴＭＬファイルに、「ここにこういう画像を貼りつ
けろ」という命令を書き加え、ＨＴＭＬファイルとは別にその画像ファイルを
用意するわけです。

まずは画像ファイルを用意しましょう。前号の宿題をやっている方は、少なく
とも１つは画像のファイルを持っているはずです。まだ入手していない人は、
必ず入手してください。

現在、ＷＷＷで扱える画像は、ＪＰＥＧ方式・ＧＩＦ方式・ＰＮＧ方式の三種
です。現在、ＮＮとＭＳＩＥの両者が対応しているのは以下２方式で、ＰＮＧ
はＭＳＩＥのみサポートしています。

●ＪＰＥＧ方式
	「ジェイペグ」と読む。
	扱える色の数が多い（２４ビットカラー＝事実上のフルカラー）。
	圧縮に際してデータの損失がある（不可逆式）
	写真や色数の多い複雑な絵柄の画像に向く。

●ＧＩＦ方式
	「ギフ」または「ジフ」と読む。
	扱える色が少ない（２５６色）
	圧縮に際しデータは損失しない（可逆式）
	ロゴや単純なイラストなどの画像に向く。

画像ファイルというのは、普通はビットマップとして保存されます。ビットマ
ップとは、画像を小さな桝目に分け、その一つ一つの色をＲＧＢ方式で保存す
る方法です。画像ファイルを拡大表示すると、ラインがガタガタになりますよ
ね。ビットマップでは、絵は小さな色のついた桝目の集合として扱われている
わけです。

ところが、この方式ではファイルが巨大なものになってしまうという弱点があ
ります。たとえば真っ黒一色の、画面いっぱいの大きな画像をビットマップで
作ったとすると、それは１メガバイトを超える大きさになってしまうかも知れ
ません。それは、たとえ黒一色でも、「左から１番目、上から１番目の桝目の
色は黒（000000）。左から２番目、上から１番目の桝目の色は黒…」というよ
うに、一つ一つの桝目の色をごていねいにＲＧＢで記録しているからです。

インターネット全体の現在の回線の状況から言って、またモデムの性能から考
えても、そのような重い画像は扱えません。そこで、画像ファイルを「圧縮」
し、ファイルのサイズを小さくして、閲覧する時に復元するような画像方式が
考案されました。その代表例がＧＩＦとＪＰＥＧです。


    発信者「圧縮」＞＞＞＞＞圧縮された画像＞＞＞＞＞「復元」受信者
            ^^^^                                      ^^^^

ＧＩＦ方式は圧縮画像フォーマットの中でも非常に優れたアルゴリズム（圧縮
の「方法」）を使っています。原理としては、画像の中から同じようなパター
ンを見出し、それを利用してデータの反復を押さえ、画像を圧縮する方式です。
先の例に挙げた「黒一色の大画像」などは、おそらくビットマップ方式の何十
分の一かのサイズに圧縮されるでしょう。

また、ＧＩＦ規格は、背景を透明化したり、アニメーション効果を出したりす
ることができます。ＪＰＥＧは高圧縮のアルゴリズムを採用していますが、残
念ながらアニメーションを作ることはできませんし、背景を透明にすることも
できません。

しかしその優れたアルゴリズムが、かえって災いしているのが現状です。とい
うのも、ＧＩＦの圧縮アルゴリズムである「ＬＺＷ」という技術が特許の対象
になっているのです。もちろんみなさんがＧＩＦ方式でデータを作り、それを
発表することには問題はありません。しかし、ＧＩＦイメージを表示・編集す
るソフトウェアを開発・配布・使用するにはライセンス料を支払わなくてはな
らないのです。

「ＬＺＷ」とは、その開発者である Lempel, Ziv, Welch の三氏からとった名
です。ライセンスはユニシスという会社が持っていて、今日もどこかでユニシ
スは特許の権利を主張し、開発者を告訴しているはずです。

正規に購入したパッケージソフトや、オンラインのシェアウェア（たとえば
Paint Shop Pro など）は、その料金の中にＧＩＦライセンス料が加算されて
いるので問題ありませんが、フリーソフトの中にはＧＩＦライセンス料が支払
われていないものも多く、バージョンアップしてみたら「ＧＩＦのサポートは
中止しました」などということがよくあります。

この問題を解決するために生まれた規格がＰＮＧです。

●ＰＮＧ方式
	「ピング」と読む。
	２４ビットカラーサポート＝事実上のフルカラー
	圧縮に際しデータは損失しない（可逆式）
	マスキング、透明化が可能

しかし現在、ＰＮＧ方式をサポートするＷＥＢブラウザは少数ですので、これを
積極的に使うことはできないのが現状です。また、ＰＮＧの編集・保存・読み込
みをサポートするツールも、まだそれほど多くはありません。

みなさんが画像を扱うときには、次のように規格を使い分けるとよいと思います。

-------------------------------------------------------------------------
１：基本的にはＪＰＥＧ方式を使う

２：ただし単純なロゴなどの絵柄で、背景の透明化、アニメーション効果を得た
    い場合はＧＩＦ方式を使う

３：ＰＮＧ方式は時機尚早。時機が来れば使用する。
-------------------------------------------------------------------------

続いて、画像をＨＴＭＬドキュメントに埋め込む方法を説明します。

画像は、保存されたフォーマット（規格）に応じて、適する拡張子を付けなくて
はなりません。ＧＩＦ方式ならば、filename.gifのようにします。ＪＰＥＧ方式
は、ＤＯＳ上ではfilename.jpgとしていましたが、現在では一般的にfilename.jpeg
としています。これはどちらでも問題がないことが殆どですが、サーバーの設定
によってはどちらかに限定されることもあるでしょう。

画像を用意し、拡張子をつけたら、それを my_web_pages などと名づけたディレ
クトリ（フォルダ）に複写・移動してください。

ディレクトリは、Windows環境では「フォルダ」と呼ばれます。これを作るには、
作りたい場所でマウスの右ボタンをクリックし、「新規作成」から「フォルダ」
を選べば、「新しいフォルダ」という名前のフォルダが作られるはずです。まず
はデスクトップ上で作ってみましょう。

ディレクトリとは、ファイルを整理するための「部屋」のことです。ハードディ
スクの中には、たくさんのディレクトリが樹木構造（枝分かれしている構造）を
持って作られているはずです。Windows環境でそれを俯瞰するためには、「スター
ト」ボタンを押し、「ファイル名を指定して実行」に入って、そこで「名前」の
ところに「explorer」と入れてＯＫしてみましょう。樹木階層構造というのがど
ういうものかよく分かるはずです。

ディレクトリをこまめに作ってファイルを整理しておかないと、「あれ、あのフ
ァイルどこ行ったぁー？？」などということになりますよね。

ともかく、新しく作ったディレクトリ（フォルダ）に my_web_pages などと、分
かりやすい名前を付けましょう。Windowsでは、フォルダをマウスの右ボタンで
クリックし、「名前の変更」を選べばフォルダの名前を変更できます。

そこに、ＧＩＦ、ＪＰＥＧ、ＰＮＧのいずれかのフォーマットで保存した画像の
ファイルを入れます。前回の宿題で、みなさんはもうこれらのいずれかのファイ
ルは入手されているはずですよね。

次に、また新しいＨＴＭＬファイルを記述しましょう。エディタを起動し、ドク
タイプ宣言、ヘッダ部、タイトル、BODYタグを記述し、内容はまあ適当でいいの
ですが、次のようにしてみましょうか。

【例１】----------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE>任意の表題</TITLE>
</HEAD>
<BODY>
  <H1 ALIGN="center">絵を挿入してみよう！</H1>
  <HR>
  <P>今回は、ＨＴＭＬファイルに画像を入れようというわけです。ＨＴＭＬは
  見栄えを記述するマークアップ言語じゃないのはよく分かるけど、やっぱり
  カラフルに絵を入れたりしたいのが人情ってもんです・・・というわけで、以
  下に画像を入れてみます。</P>
</BODY>
</HTML>

------------------------------------------------------------------------

どうですか。もうここに書かれているタグの意味は全部分からないと駄目ですよ。
もちろんこれだけでは画像は埋め込まれませんね。でもまあ、これをちょいと保
存してみてください。ただし、保存する場所ですが、必ず先ほど作った新しいデ
ィレクトリに保存してください。ファイル名は何でも構いませんが、一応、test.html
とでもしておいてください。

【例１】のtest.htmlと、用意した画像（*.gif, *.jpeg, *.png）が同じディレク
トリにあることを確認してください。大丈夫ですか？・・・では、【例１】のコ
ードに、画像を埋め込むＨＴＭＬコードを付け足してみます。

【例１】----------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE>任意の表題</TITLE>
</HEAD>
<BODY>
  <H1 ALIGN="center">絵を挿入してみよう！</H1>
  <HR>
  <P>今回は、ＨＴＭＬファイルに画像を入れようというわけです。ＨＴＭＬは
  見栄えを記述するマークアップ言語じゃないのはよく分かるけど、やっぱり
  カラフルに絵を入れたりしたいのが人情ってもんです・・・というわけで、以
  下に画像を入れてみます。</P>
 
  <IMG SRC="icon.gif"  ALT="YUJUのアイコン" WIDTH="80" HEIGHT="80" 
   BORDER="0">

</BODY>
</HTML>

------------------------------------------------------------------------

どこを書き足したかお分かりですね？

<IMG SRC="icon.gif"  ALT="YUJUのアイコン" WIDTH="80" HEIGHT="80" 
BORDER="0">

というコードを書き足しました。これが、画像をＨＴＭＬドキュメントに挿入す
るためのタグです。このタグは、終了タグがありません。<HR>と同じような性質
のタグです。

基本的に、画像は（今のところ）<IMG>タグで扱います。IMaGe（イメージ＝画像）
と、その名もズバリなタグの名前です。ただし、このタグは、タグ名だけを記し
て

  <IMG>

としても何も効果が出ません。<HR>は属性無しでも使えましたが、<IMG>は、必ず
SRC属性を付加しなくてはいけません。SRCは、SouRCe（ソース）の略です。これ
で、画像の場所・ファイル名を指定します。【例２】では、icon.gif という名の
画像ファイルを埋め込む指令となっています。ここはもちろん、あなたの用意した
画像ファイル名を入れればいいわけです。

  <IMG SRC="icon.gif">

ではこれだけでＯＫなのでしょうか。おそらくこれだけでも、あなたの用意した
画像は、ＨＴＭＬドキュメントに挿入されて表示されるでしょう。しかし、思い
出してください。世の中には、画像を読み込めない、表示できないブラウザも数
多くあることを。そしてまた、知覚障害をお持ちの方で、テキストデータのみを
読み上げソフトで利用している方もいることを。

画像を読み込むことができないブラウザのための<IMG>タグの属性がALT属性です。
この属性は、値に、画像の代替として表示される文字列をとります。つまりALT
属性の値に記入した文字列が、テキストブラウザで表示され、読み上げソフトで
読み上げられるわけです。ALT属性は必ず指定してください。

ＮＮなどでは、画像の上にマウスを置くとこのALT属性の文字列をポップアップヒ
ントのようにして表示します。たぶんそのせいだと思うのですが、このALT属性の
誤った用例が散見されるようです。たとえば

【例３：誤ったALT属性】--------------------------------------------------

  <IMG SRC="dasoku.jpeg" ALT="俺の顔、ダウンロードしてもいいよ！">

-------------------------------------------------------------------------

何か人の顔などの画像ファイルの「セリフ」に見立ててALT属性を使っているよう
な用例ですね。これではしかし、画像を読めないブラウザではただ単に

                     俺の顔、ダウンロードしていいよ

とだけ表示され、全く意味不明になってしまいます。あくまでも、画像が無くとも
代替のテキストでコンテンツの内容を理解できるようにALT属性はつけてやる必要
があります。

<IMG>タグには他にも HEIGHT, WIDTH属性があります。これらの属性は、画像のサ
イズを指定するためのものです。何も指定しない場合には、その画像のサイズが
そのまま表示されますが、この属性を使って自由に伸縮することができます。

ですが、HEIGHT, WIDTH属性は、画像の伸縮のためだけにあるのではありません。
たとえ画像のサイズそのままであっても、これは指定した方がよいでしょう。こ
れはなぜでしょうか？？ちょっとこれはクイズ方式にしてしましょう。正解が分
かった人はこのメルマガに返事を出してみてください。

なお HEIGHT は「高さ」、WIDTH は「横幅」を指定するための属性です。値はピ
クセルで指定します。

最後の BORDER属性は、画像の外枠線の太さを指定するための属性です。これは
画像をリンクポイントにしたくなった時に特に重要になりますが、今は考えな
くともよいでしょう。リンクの説明の時に後述します。

また、SRC属性で画像ファイルを指定する場合の、相対・絶対パス辺りの話もリ
ンクの説明の時に説明します。

では今回の内容をまとめましょう。

●ＷＷＷで一般的な画像フォーマットはＧＩＦ、ＪＰＥＧ、ＰＮＧ方式
●基本的にはＪＰＥＧを使うべき
●単純なロゴなどの絵柄、透明化・アニメーション効果を必要とするならＧＩＦ
●ＰＮＧは時機尚早
●イメージを埋め込むには<IMG>タグを使う
●<IMG>タグSRC属性で画像ファイルの場所、名前を指定
●<IMG>タグALT属性で画像の代替テキストを指定
●<IMG>タグのHEIGHT,WIDTH属性で画像の表示サイズを指定


●宿題

（１）前回の宿題で入手した画像を取り込んだＨＴＭＬドキュメントを作りなさ
      い。

（２）ＧＩＦまたはＪＰＥＧ方式の閲覧・編集が可能なグラフィックエディタを
      入手しなさい。既に持っている人は必要ありません。

      なお、ＷＩＮをお使いの方は
      ・D-pixed （http://www.win.ne.jp/~doichan/）をオススメします。
      この高性能でフリーソフトなのは奇跡ですな。

      ＭＡＣな人は、コンバータですが
      ・Graphic Converter （http://members.aol.com/lemkesoft/index.html）
        が有名で、かつＧＯＯＤだそうです。
      ・日本語化するパッチが公開されています
        （http://www.bekkoame.or.jp/~yingming/maclinic/home.html）

      ＃情報をお寄せくださった読者の皆様、ありがとうございました m(__)m

●前回の宿題の解答-------------------------------------------------------

応募者多数のためしばらくお待ちを！
応募総数は７９でした。添削たぁいへん。^^;

-------------------------------------------------------------------------

☆ちょっと難しい言葉☆

スクリプトエラー
  ネットサーフォンをしてて「スクリプトエラー」って出るときありませんか。
  何か訳が分からないうちに「はい」とか押してブラウザが強制終了されたりし
  ます。「強制終了」って言えば「そんなモンか・・・」って思うけど、これは
  「落ちた」ということです。柔道なんかで「落とした」とか言いますけど、つ
  まりあなたのブラウザは気絶してしまったわけです。負けてしまったわけです。
  怒り、悲しんでください ^^;

  スクリプトっていうのは、ＨＴＭＬの中に落書きみたいに書き込まれた簡易な
  プログラムのことです。現在使われているスクリプト言語の最大勢力は Java
  Script ですが、こいつはセキュリティーに配慮されており、あんまりヤバイ
  ことはできないようになっています。しかし、変なスクリプト、ヘタクソなス
  クリプトが処理を無限ループに行ったり、メモリをどんどん消費したり、とい
  うようなことはありえるわけで、そんな時にはブラウザを終了させた方がよい
  でしょう。

  Windowsにおける最終手段は、Ctl+Alt+Del の三点攻撃であります (^O^)


★編集後記★

・YUJU HTML Editor1.5 のユーザー登録について
  よく readme.txt を読んでください。ハードウェアＩＤとは、あなたのパソコ
  ンのメーカー名や型番ではありません。登録申し込みが多く、個別に対応しな
  ければならないため、「違いますよ。これじゃ登録できませんよ」というメー
  ルを出せません。どうも登録が遅いと感じたら、間違っている可能性がありま
  すので調べてみてください。

・ポストペットのメール大募集！！
    ★蛇足のPOSTPET Mailto:dasoku4@geocities.co.jp
   
・学園祭シーズンが近づいています。何かいつのまにか所属する学生会の、学
  園祭の火元責任者（焼き鳥屋を出店）になってしまったので、何だか面倒で
  す。読者の皆さんも、もしよろしければ焼き鳥を食べに来てください。読者
  特典でお安くしまひょ。←まじです。

・僕の就職活動の目標を発表！
  出版関係や編集者、記者を目指します。宣言したら少しは気合が入るかも。
  何かこれらの業界に就職活動するにあたって参考になる情報をお持ちの方が
  いらっしゃいましたら、ぜひ色々教えてください。

・読者の方で同じくこの大不況時代に就職活動する方がいらっしゃったら、情
  報交換しましょう。

・来年の春、夏に、この誌面で「内定ＧＥＴ！！」の吉報をお知らせできると
  いいなぁとか思っています。

----------------------------------------------------------------------
●次号は１０月中旬の発行予定です。

●Visit Our Web Site About This magazine and HTML- - - - - - - - - - -

バックナンバーの閲覧、購読解除＆登録、みんなの助け合い掲示板、リンク集
やソフト紹介など、このメールマガジンのサイトです。
★ＨＴＭＬ入門講座 ホームページ
ＧＯ>>http://hp.vector.co.jp/authors/VA014079/study_html/


●YUJU HTML Editor1.0- - - - - - - - - - - - - - - - - - - - - - - - - 

ＨＴＭＬをテキストベースで編集することに特化したエディタです。「シェア
ウェア（５００円）」ですが、当マガジン読者には無料で配布します。是非、
ダウンロードしてお使い下さい。なお、無料でお使いになる場合は、下記アド
レスまで一言、お便りくださいね。ちなみに、拙作のソフトです。性能は…そ
んなにすんごいモノじゃありませんので、期待しないように (^O^) あくまで
教育目的の仮バージョンってことで。実用版 2.0 はそのうちリリース。
★なお、このソフトは Windows95 98 NT4.0以上の環境でお使いになれます。

最新ベータ版ダウンロード（YUJU HTML Editor1.5β）
Download URL
http://hp.vector.co.jp/authors/VA014079/study_html/
Mailto dasoku@geocities.co.jp


 ===================================================================  
 このメールマガジンは、インターネットの本屋さん『まぐまぐ』を利用し
 て発行しています。( http://www.mag2.com/ )
 ===================================================================

----------------------------------------------------------------------
ＨＴＭＬ入門講座 第14号
発行人：池田蛇足 dasoku@geocities.co.jp  10月18日発行  発行部数 2913部