特集■ 執筆協力 川添 歩（はじめに・動画編）／藪 暁彦（音声編）／滝口幸子（画像編・小技編）

インターネットマガジン編集部 編

S本誌で紹介しているソフトでCD-ROMのマークがついているものは付録のCD-ROM に収録されています。くわしくは各関連ページをご覧ください。

188 INTERNET magazine 1996/9

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

インターネットに接続できたら、ネットサーフィンもいいけれど、やはり自分でホームページを作ってみたいもの。今やHTMLを覚えなくても、ホームページ作成
ツールを使えば、ある程度格好がつくホームページが簡単に作れるようになった。
しかし、とりあえずはホームページを作ってみたものの、何かものたりないと思っている人が多いのではないだろうか。
たとえば、タイトル 部分を動かしたり、もっときれいな画像を表示させたりした
いときはどうすればよいのだろうか？ 音の出るページを作りたいときはどうしたらいいのだろうか？
そんな要望に答えるべく、今号では高価なツール や 特別な知識がなくてもできるワンランク上のホームページの作り方を紹介しよう。HTMLをマスターする前に、より簡単な方法でいろいろな素材を集めた楽しいホームページを考えるほうがCOOL なホームページ作成への 近道ではないだろうか。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/9

189

@;@; @;@; @;@; @;@; @;@; @;@;@; @;@;@; @;@;@;@; @;@; @;@; @;@; @;@; @;@; @;@; @; @;@;
;
@



;
@


;
@

;
@


;
@


@
;


@
;


;
@


@;@; @;@; @;@; @;@; @;@; @;@; @;@; @; @;@;@;@; @;@; @;@; @;@; @;@; @;@; @;@; @;@;@;@; @;@; @;@; @;@; @;@; @;@; @;@; @; @;
;
@



;
@


;
@

;
@


@
;


@
;


@
;


;
@


@;@; @;@; @;@; @;@; @;@; @;@; @;@; @; @;@;@; @;@; @;@; @;@; @;@; @; @; @;@;が書けなくてもはじめにCOOLなホームページが作れる！

B

誰でも簡単にホームページができる
ホームページ作成ツールを使ってみよう

これまで、ホームページを作るにはHTML を覚えて面倒なタグ入れをしなければならなかった。しかし、最近になってワープロのような操作で楽にホームページを作れるツールが出そろってきた。
ホームページの作成にはHTML という特別

その後、こざいくウェブデザイナーという製な書式でテキストファイルを作成する必要があ

品のマッキントッシュ版が発売された。
（ウィ

り、HTML でホームページを表現するには、ンドウズ版は7月末発売予定。販売元：日本

また、WWWからフリーでダウンロードでき

たくさんのタグと呼ばれる命令を覚えなければコダック（株）、問い合わせ先： T E L 0 3 -るHTML作成ツール（次ページで紹介）を活ならなかった。またそれを覚えたとしても、タ

5488-2365、定価：198,000 円）。これはペ用するのもいいだろう。

グを使ってホームページを作成していく作業

ージミルがまだ対応していない機能にも対応というわけで、まったくHTML を知らなくはたいへん面倒なものだ。

しているほか、アドビが別製品として出してても、ホームページを作成できる環境はかな
り整いつつある。

った文書をHTML 形式で保存することができるようになってきている。

ワープロで書体を指定したり、図を貼り込いるサイトミルというホームページ管理ツール

んだりするように、もっと簡単にホームページ

が持っている機能まで一部取り入れている。

を作れたらいいのにと考えるのは、HTML を

また、IBMからはホームページビルダーがウ

ただし、WWWやHTMLの機能の発展や拡覚えるのに抵抗がある初心者ばかりでなく、ィンドウズ95 およびOS/2 ワープ用に発売さ張が非常に速いため、各ホームページ作成ツ

毎日のようにホームページを作成しているプロ

れている。ホームページビルダーは表作成の機ールがその新しい機能に追いつくのがなかなかでも同じことだ。

●

能など現在のページミルにはない機能もある。

容易ではない。ネットスケープナビゲーターや

最近、ようやくそうしたホームページ作成

また、クラリスからはクラリス・ホームペー

インターネットエクスプローラが実現できる機

ツールがいくつか出そろってきたので、これかジという、ホームページ作成ツールが発表さ能をすべて使って作れるホームページ作成ツらホームページを作成していく人にとっては注れている。大御所のネットスケープからはネッ

ールはまだない。

目すべき状況になってきた。

トスケープナビゲーターゴールドという、ホー

また、各ツールで作ったホームページの、ツムページ作成の可能なナビゲーターが近いうール上での見え方とブラウザーでの見え方がちに発売される予定だ。

まるで違うということもしばしば起こる。その●先鞭をつけたのは、95年秋に英語版が発売され、この春に日本語版が発売されたアドビのそのほかに、マイクロソフト・ワードをはじページミルだ（マッキントッシュ用）。使いやめとする既 存 のワードプロセッサーや、修正するよりほかない。そのため、まだどうしすく、しかもひととおりの機能を備えている。

QuarkXPress などのDTP ソフトウェアで作ても基本的なHTMLの知識が必要となるのだ。

190 INTERNET magazine 1996/9

場合には、HTML のテキストファイルを直接インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

ワンランク上のホームページ作成術

これがホームページを簡単に作るツールだ
ホームページ作成ツールはかなり数が揃ってきているが、ここでは手軽に購入できて、使い方も簡単なソフト、ホームページビルダー（ウィンドウズ95）、アド
ビ・ページミル（マッキントッシュ）を紹介しよう。

ホームページビルダーのパッケージと基本操作画面

ホームページビルダー
ホームページビルダーでは、文章を作成しまた、HTML を直接編集する場合に非常てその見出しや文字の太さなどの設定をワーに面倒な表作成なども、その機能がついていプロのように簡単に設定できる。

るために難しいことを知らなくても楽に作る

グラフィックを挿入したい場合には、ドラことができる。

ッグ&ドロップでページ上に配置できる。一

そのほか、グラフィック上の部分をクリッ

般にホームページで使用されるグラフィック

クするとリンク先にとべるようにするクリッはGIFかJPEG形式だが、BMPかTIFFのグ

カブルマップを作成するイメージマップエデ

ラフィックをドロップした場合には自動的にィターも備えている。ホームページ作成上でJPEG 形式に変換して配置してくれるので、面倒な部分のサポートをひととおりしてくれ

ユーザーはファイル形式を気にしなくてよい。

る便利ツールだ。

動作環境：ウィンドウズ95、OS/2
開発元：日本アイ・ビー・エム株式会社
問い合わせ先：TEL 0120-041992（フリーダイアル）
定価：14,800 円

アドビ・ページミル 1.0J
Adobe PageMill 1.0.J
ページミルには、文字の書式設定機能はウィンドウズ版も2.0 が発売される予定で、もちろん、ハイパーテキストを実現するリン2.0 では、表とフレームへの対応や、アニメ

クの設定やグラフィックの配置など、基本的ーションGIF、サウンドの張り付けなどの機なホームページを作成する機能がひととおり能も持つようなので、バージョンアップを待そろっている。

ちながら、現在のページミルに慣れておくと

ただし、先発ということもあって、今にな

いいだろう。

ってみると表の作成機能など、非常に重宝

ものたりないとはいえ、現在のページミルする機能がないのがややものたりない。しかでも、面倒な作業を相当軽減してくれるこ

し、7 月にはマッキントッシュ版だけでなくとにかわりはない。

動作環境：68020 以上、PPC
開発元：アドビシステムズ株式会社
問い合わせ先：TEL 092-752-5264（システムソフト）
TEL 03-3222-6841（メディアビジョン）
定価：29,800 円

フリーで入手できるHTML作成ソフト・リンク集■ claris homepage
クラリス・ホームページのウィンドウズ用とマッキントッシュ用のベータ版がダウロードできる
http://www.claris.com/software/■ WindowsWorld on the Internet
アドビ・ページミル1.0J のパッケージと基本操作画面

ウィンドウズ用のHTML作成ソフトがダウンロードできるリンク集
http://www.windows95.com/■ Go Liveマッキントッシュ用のHTML 作成ソフトがダウンロードできる
http://www.golive.de/hこのほかに、本誌付録CD-ROM にもHTML 作成ツールが収録されている（詳しくは、347 ページ「収録したソフトウェアの概要・WWW/作成ソフト」を参照）。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/9

191

動画編

GRAPHICS

タイトルを動かしたりアニメーションを作りたい！
動くホームページといえばショックウェーブが有名だが、それ以外にも簡単に動きのあるページを作る方法がある。それがGIF アニメーションだ。

B GIFアニメーションで動くホームページを作ろう！
最近、あちこちのホームページで、アイコン

マを表示させれば、それ以降はディスクキャ

やグラフィックが動いているのを見かけるようッシュから読んで再生されるので、利用してになった。普通、アニメーションを作成するいる回線が遅くてもループするアニメーションにはJava やショックウェーブを使わなければは高速に再生されることなどである。

ならないと思っている人がいるかもしれないが、●

実はこれらのような難しい技術がなくても、動それでは、さっそくGIFアニメーションを作

くホームページが作れるのだ。これはGIFが持っている機能を使って作るアニメーションで、ってみよう。
まずは、もとになる画像を作らなければならない。それには、グラフィックソフトが必要だ「GIF アニメーション」という。
●

が、フォトショップのような高価なソフトを使GIFアニメーションはグラフィックさえ作れ

用しなくても、シェアウェアのツールでもそれれば難しいことは何もない。特別な再生環境なりのものを作ることができる。ウィンドウズ

が必要ないという点でも、特別なプログラム

では、ペイント・ショップ・プロ（http://www.

言語が必要なJava や操作の難しいショックjasc.com/pspdl.html）、マッキントッシュ

ウェーブよりも使いやすい。GIFアニメーショ

用ではGraphicConverter（付録 CD-ROM

ンを作るには、前もって各コマを作っておき、の「Mac → Graphic Converter」に収録）

ツールでそれを統合するだけでいいのだ。

などがおすすめだ。
これでもとのアニメーションを作成したあと、●このGIFアニメーションの特長は、ホームペ

それらを1 つのファイルにまとめてGIF アニメ

ージでグラフィックを表示するために普通に使ーションを作る。代表的なツールには、GIFっているGIF ファイルをコマ数分用意するだ

Construction Set（ウィンドウズ用）やGIF

けで簡単に作れること、GIFアニメーションにBuilder（マッキントッシュ用）などがあり、対応していないブラウザーで見ても、最初の以下ではその使い方を解説しているので参考

コマだけは表示されること、一度すべてのコにしてほしい。

デジカメで撮った写真でGIF アニメーションを作ってみよう
GIF アニメーションを作るには、なにもグラフィックソフトで絵を描かなければいけないわけではない。デジタルカメラで撮影した写真をつなげば、GIF アニメーションが作れるのだ。
たとえば、人形などの立体オブジェを少しずつ動かしながら撮影して、GIF アニメーションにすれ
ば、WWW でオブジェが動いて見える。

192 INTERNET magazine 1996/9

また、何枚かの違う種類の写真をつなげれば、ぱらぱらとめくれる紙芝居のような効果を出すこともできる。
工夫しだいでいろいろな表現ができるので、まずは試してみよう。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

ワンランク上のホームページ作成術

GIF ANIMATION

動画編

GIF Construction Setの使い方
GIF Construction Set
ウィンドウズ用のGIFアニメーション作成

成しておく必要がある。GIF Construction

用シェアウェア。このツール自体には、グラSet でこれらのコマをひとつにまとめ、再生

フィック作成の機能はないので、前もって複間隔やループなどの設定をして、GIFアニメ数のグラフィックファイルとして各コマを作ーションファイルとして書き出す。

1
2

GIF Construction Set の入手方法
GIF Construction Setは本誌のCD-ROMに収録されている。入
手したら、ウィンドウズ上でSetUpを起動してインストールする

GIF Construction Setがダウンロードできるページ

だけだ。
SCD-ROM

jhttp://www.mindworkshop.com/alchemy/
gifcon.html

収録先：WIN →GIF CONST

GIF アニメーションを作る

GIFアニメーションを作成するには、まず

ョン非対応のブラウザーで見た場合、ペー

複数のコマを作っておく必要がある。GIFアジ上でそこだけぽっかり空間ができてしまう

ニメーション作成ツールは、それ自身ではグことになる。

ラフィックを作成したり編集したりする機能

また、縦横のサイズが大きいと、表示にを持っていないから、ペイントやフォトショ

時間がかかってしまって、なめらかなアニメ

ップなどのグラフィックソフトでアニメーシーションにはならない。GIF アニメーション

ョンのもととなるコマを作成する。

は、アイコンやあまり大きくないアニメーシ

基本的には、GIFアニメーションはパラパ

ョンに適している。

ラマンガのようなもので、テレビのアニメー作成したグラフィックを、グラフィックソ

ションのように、背景の上でセルを動かすのフトで保存する際には、GIFアニメーションとは異なる。背景の上でキャラクターだけを作成ツールで読み込める形式になっていれば動かすということもできなくはないが、多少よい。ウィンドウズであればBMP、マッキ

テクニックが必要となるだろう。

ントッシュであればPICT でもよい。必ずしもっとも簡単なのはすべて同じ大きさのグもGIFである必要はない。また、GIFで保存

ラフィックを用意しておき、それを連続してする場合も、透明化やインターレースの指再生するというやり方なので、まずはそのよ

定をしておく必要はない。これらGIFのファ

うなグラフィックを用意してほしい。

イルでのオプション設定はGIF アニメーショ

たとえば図1 のようなものだ。

図1 ：今回GIF アニメーションを作るのに使用したサンプル。付録CD-ROM にも収録されている。

ン作成ツールで行うことができる。

作成時に注意することは、GIF アニメー

グラフィックファイルは、順番が分かりやションに対応していないブラウザーでGIF ア

すいように、「ANIME1.BMP」「ANIME2

ニメーションのファイルを表示しようとした.BMP」などファイル名に順番を表す数字を場合、最初のコマだけが表示されるというつけておくとよいだろう。このとき、10個以点だ。したがって、そのようなブラウザーの上のファイルを使うのであれば、番号が1 ケ

GIF アニメーション作成の参考にしよう。

ことも配慮するのであれば、最初のコマに意タの場合でも0を加えて「ANIME01.BMP」

味のあるグラフィックを入れておくべきだろ「ANIME02.BMP」……「ANIME10.BMP」

う。たとえば、何もないところからキャラクのようにファイル名をつけたほうがよい。フ

GIF アニメーションのサンプルがある
ホームページ 1

ターが出現するといったアニメーションだと、

ァイル一覧の際に、番号順でちゃんと並ぶMikey's Collection of Animated GIFS

最初のコマに何もないので、GIFアニメーシからだ。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

jhttp://www.geocities.com/SoHo/1085/

INTERNET magazine 1996/9

193

動画

編
GIF Construction Set の使い方

3

GIF Construction Set に読み込む
GIF Construction Setのアイコンをダブル

この際、挿入するグラフィックのパレット

クリックして立ち上げると、図2 のようなウが現在使用しているパレットと異なる場合

ィンドウが表示される。このウィンドウのリに、図 4 のようなウィンドウが表示される。

ストに、あらかじめ用意したグラフィックフ

できるだけグラフィックを作成する時点で、ァイルを、表示する順番に加えていく。

1 つのアニメーションGIF を形作るグラフィ

ウィンドウの上部左から2番目の「Insert」

ックはどれも同じパレットを使用するようにボタンを押すと、何を挿入するかを問い合しておいたほうがよい。このウィンドウが表わせるウィンドウが表示される（図3）。

示された場合には、使用している画像によそこでImageを押す。するとファイルを選る が 、「 Dither this image to the global

択するウィンドウが表示されるので、そこで

palette」を選ぶのが一番無難だろう。選ん

まず最初のグラフィックファイルを選ぶ。そだ結果、そのグラフィックの見栄えがかなりうするとリストに「IMAGE」という文字に変わってしまうようであれば、もともとのグ

続いてファイル名とサイズが書かれた行が加ラフィックファイルのパレットを、グラフィわる。以後、用意したグラフィックを順番

ック作成ソフトを使ってほかのグラフィックにリストに加えていく。

と合わせるなどの作業をしたほうがよい。

動かして確かめ、設定する
ひととおりグラフィックを読み込んだら、ウィンドウの左上の「View」ボタンを押す。
画面上に今読み込んだグラフィックを連続して表示してくれるはずだ。マウスの右ボタ
ンをクリックすれば元の画面にもどる。もし元の画像に問題があるようであれば、その画像をグラフィックソフトで編集しなおさなけ
ればならない。

4が大きいほど遅くなる（図5）。
また、このControl Block のウィンドウで

図2：グラフィックファイルを表示順に並べる
図 3 ：「Image」をクリックしてリストに画像を追加していく

図4：「Dither this image to the global palette」
を選んでパレットの種類を統一する

は、透明化の設定もできる。
「Transparent
colour」にチェックをして、透明にしたい色を右のボタンで選ぶ。2 つボタンがあるが、左のボタンでは色のパレットから選ぶことになり、右では実際の画像を表示して、その部分をクリックして選ぶことになる。

スピードが適切でないというのであれば、さらに、用意した画像の連続再生を1 回

GIF Construction Set 上でその設定をする。

だけでなく、繰り返してアニメーションさせ再びウィンドウ上部左から2 番目の「InるにはLOOP を挿入する。さきほどと同様

sert」ボタンを押す。そこで出てくるウィンに「 I n s e r t 」 ボタンを押 して、 今 度 はドウで、今度は「Control」を選ぶ。すると「LOOP」を選ぶ（図 6）。LOOP では繰りメインのウィンドウのリストにCONTROLの返しの回数を指定できるが、繰り返し回数行が追加される。Control Block のウィンドを認識しないブラウザーや、繰り返し自体

ウにはいくつかの設定があるが、スピードのを認識しないブラウザーでは指定できないこ

設定は「Delay」の部分だ。ここの数字がとは覚えておいてほしい。
図6 ：LOOP で繰り返す回数を指定する

0に近いほど再生スピードは速くなり、数字5

図5 ：Delay の数値でスピードを調整する作成したアニメーションを保存する・ WWW で表示する「View」で確認したアニメーションが思ったとおりのものになったら、保存してGIF

ファイルであれば、<IMG SRC="Anime.gif">

Construction Set は終了する。保存すると、というようにHTML に書いて、そのHTML

複数のグラフィックがまとめられて、1 つのファイルをブラウザーで開けば、ページ上でGIF ファイルとして作られる。

アニメーションが表示されるはずだが、ネッ

これをホームページ上で表示するには、一トスケープナビゲーターやインターネットエ

般のGIFグラフィックを表示するのとまった

クスプローラ 3.0 のような、アニメーション

く同じようにHTML で指定するだけだ。た

GIFに対応したブラウザーでなければ表示さとえば「Anime.gif」というアニメーションれない。
作ったアニメーションをWWW で表示してみる

194 INTERNET magazine 1996/9

ここで作ったGIF アニメーションは付録のCD-ROM に収録されています

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

ワンランク上のホームページ作成術

GIF ANIMATION
Gif Builderの使い方
Gif Builder
GIFアニメーション作成用のフリーウェア。

GifBuilder でコマを読み込み、設定をしグラフィック作成用の機能は持たないので、たあとに1 つのアニメーションGIF ファイル

各コマのグラフィックをPICT、GIF、TIFF

として書き出す。下記の方法でWWW からのいずれかの形式で用意しておく。

入手できる。

1
2
3

Gif Builder の入手方法
GifBuilder は、ftp://ftp.iij.ad.jp/pub/info-mac/gst/
grf/gif-builder-032.hqx/から入手できる。ファイルサイズ
は369Kほど。現在は、0.4.0 にバージョンアップしている。

GifBuilder がダウンロードできるページ
jhttp://iawww.epfl.ch/Staff/Yves.Piguet/

GIF アニメーションを作る
193 ページの「GIF Construction Set の使い方」の2 を参照。

clip2gif-home/GifBuilder.html

ツールだ。
それらのツールを使わなくても、シェアウ

フォトショップやイラストレーターを使用

ェアのGraphic Coverter（本誌 CD-ROM

すると、グラフィックの変形などをしやすい「Mac → GraphicConverter」に収録）なが、これらは10万円以上するかなり高価な

どで、反転や回転などの加工ができる。

Special1.PICTSpecial2.PICTGIF Builder に読み込む
GIF Builder のアイコンをダブルクリック

たとえば、ここで使用するサンプルでは、して立ち上げると、図1 のようなFrames ウ

板が左まわりと右まわりに交互に回転する

ィンドウが表示される。このウィンドウに、ので、一度使ったグラフィックを何度か使用

あらかじめ用意したグラフィックファイルをすることになる。図2 はグラフィックファイル

加えていく。

を入れたままの状態で5 種類のグラフィック

File メニューのAdframe を選んで、ファが入っている。この中の「Special2.PICT」

イルを1 つずつ加えていくのでもよいが、を選択し、EditメニューのDuplicate Selection

Finder で必要なファイルを複数選択して、で複製し、「Special3.PICT」のあとに入れる。

Frames ウィンドウにドラッグ&ドロップす「Special4.PICT」も同様に複製して、もとるほうがずっと簡単だろう。

もと5つのグラフィックだったものを8コマ分加えられたグラフィックファイルは、ドラのアニメーションとして再生するリストにしッグすれば順番を簡単に変えることができたのが図3だ。これで、繰り返し回転するアる。

ニメーションが作成できる。

Special3.PICTSpecial2.PICTSpecial4.PICTSpecial5.PICTSpecial4.PICT

図1 ：Frames ウィンドウ。ここにグラフィックを加えていく
図2 ：5 つのグラフィックをそのまま読み込んだところ

図3 ：複製して順序を並べ替えたもの

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/9

195

動画

編
GifBuilderの使い方

4

動かして確かめ、設定する

ここでAnimation メニューからPlay を選

マを表示している時間を設定する（図5）。全べば、画像が再生ウィンドウに表示される。

体のスピードを上げたければ、まず全部のコ

このままでは1 回しかアニメーションしない

マを選んで（EditメニューからSelect All）かので、Options メニュー（図 4）のLoop をらInterframe Delay を選び、100 分の1 秒単

選び、ダイアログでForeverを選択する。こ位でスピードを設定する。ここで設定したかれでずっと動きっぱなしのアニメーションとらといって、ブラウザーの能力でこのとおりなる。再度Animation メニューからStart をに再生されるとは限らないが、もっとも高速選んで確認してみよう。Loop のダイアログにしたければ、as fast as possible を選んででは繰り返しの回数を指定できるが、ブラおけばいいだろう。

ウザーによっては、できないものもある。

Options メニューのLoop から上にあるオ

ここでアニメーションを再生して動きをチ

プションは、コマごとではなく作成するGIF

ェックする。もし、元の画像に問題がある

アニメーションファイルに共通のものとなる。

ようであれば、グラフィックソフトで編集し色数を減らしたりインターレースにする場合

なおさなければならない。スピードが適切でには、ここのオプションをチェックしておく。

ないというのであれば、Gif Builder上でその設定をする。

図4 ：Loop を選び、ダイアログでForever を選択すると、動きっぱなしのアニメーションができる

またLoop より下のオプションはコマごとに設定するので、まずコマを選択してからコマごとにスピードの設定が可能なので、Optionメニューを選ぶ。Framesウィンドウ

該当するコマをまず選んでから、Optionsメに表示されているオプションであれば、変更

ニューのInterframe Delayを選んで、そのコ箇所をダブルクリックすれば変更できる。
図 5 ： Options からInterframe Delay を選んでアニメーションのスピードを設定する

Gif Builder のPlay で確認したアニメーシ

5

上記のH T M L のタグ指定は、実はG i f

ョンが思ったとおりのものになったら、これ

Builder が作ってくれる。ファイル名が必要を保存（File メニューのSave）する。保存なので一度保存してから、Edit メニューのすると、複数のグラフィックがまとめられて、

Copy HTML Image Tag を選べば、タグ指

1 つのGIF ファイルとして作られる。

定がクリップボードに入る。エディターでこ

これをホームページ上で表示するには、一のアニメーションを置きたいページのHTML

般のGIFグラフィックを表示するのとまったファイルを開いて、該当する場所でペースト

く同じようにHTML で指定するだけだ。たすると、アニメーションを保存する・ WWW で表示する

とえば「Special.gif」というアニメーション<img src="Special.gif" width=102
height=53>

ファイルであれば、のようにサイズ指定まで入ったタグが挿入さ<IMG SRC="Special.gif">というようにHTML に書いて、そのHTMLれる。

ファイルをブラウザーで開けば、ページ上にグラフィックが表示され、アニメーションに

ここで作ったGIF アニメーションは付録のCD-ROM に収録されています

WWW でアニメーションを表示したところなるはずだ。もちろんネットスケープナビゲ
ーターやインターネットエクスプローラ 3.0のような、アニメーションGIFに対応したブラウザーでなければアニメーションは表示されない。
GIF アニメーションのサンプルがあるホームページ 2「Animated Gif Archive」からはGIF アニメーションを使用することができる。ウィンドウズでは、カーソルを画像の上に置き右ボタンを押して「Save Image As」を選んで、保存先を指定する。マッキン
トシュでは、画像を選択したまま、デスクトップ上までドラッグ＆ドロップすれば、 自動的に保存できる。「 GIF Animation on the
WWW」のほうはリンク集なので、使用には許諾が必要。

196 INTERNET magazine 1996/9

Animated Gif Archive

GIF Animation on the WWW

jhttp://www.netusa.net/~rose/animate.html

jhttp://www.reiworld.com/royalef/gifanim.htm

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

ワンランク上のホームページ作成術

B アンダーバーにテキストを流してみよう
アンダーバーのところにテキストが流れているホームページを見たことがあるだろうか。これはJava スクリプトを用いて作られているのだが、実は、スクリプトが書けなくても、同じものが簡単に作れてしまうのだ。
方法はいたって簡単。テキストが流れるホームページを見付けたら、そこのドキュメント
ソースを見てJava スクリプトの部分をコピーし、WWW で流したいテキストの部分（右のソースでは日本語で書かれている「インプレスグループ〜（自動応答）まで」の部分）だ
けを書き換えればいいのだ。これを保存して、自分のホームページがあるファイルの中に置いてリンクを張るか、もしくはドキュメントの中に直接タグで埋め込めばいい。そうすれば、ホームページの中に流れるテキストが表示される

インプレスのホームページのアンダーバーに流れている
テキストとその部分のソースコード。使用する際にはコピーライトの部分「/*Copyright 〜」を必ず表示しよう。

はずだ。
インプレスのホームページ（http://www.

こと。

impress.co.jp/）にも、この流れるテキスト

また、この機能はネットスケープ固有の機があるので、試してみるといいだろう。その能であるので、インターネットエクスプローラ

際、コピーライトの部分も忘れずに引用するでは使えない。

B ページの中にテキストを流してみよう
マイクロソフトのインターネットエクスプロ

BORDER="0" SCROLLAMOUNT=10

ーラでは、いくつかの独自の機能を持ってい

SCROLLDELAY=5>る。その1つがマーキータグだ。これはホーム

This is the Marquee sample. Internet

ページの中で電光掲示板の文字のようにテキ

Magazine.

ストを動かすもので、マイクロソフト社のホー</MARQUEE>

ムページなどで見ることができる。

ネットスケープナビゲーターなどでは対応しこのタグのもっとも簡単な形は下記のようになる。

ていないので、インターネットエクスプローラ
でしか見られないが、マーキータグに対応して<MARQUEE>

いないブラウザーでは、このタグだけを無視しThis is the Marquee sample.

てテキストがそのまま表示される。

</MARQUEE>
流れる形式（BEHAVIOR）として、常時現れて流れては消える"SCROLL"、現れて流れて止まる"SLIDE"、はしまで流れて反対方向に戻る"ALTERNATE"が選べる。また流れる
幅や方向、背景色、ループの回数、スクロー■関連情報

ルの速さなどもオプションで設定できる。

NCDesign HTML Design Guide - Marquee<MARQUEEBGCOLOR="#FFFD5E"

BEHAVIOR="SCROLL" WIDTH="280"

jhttp://ncdesign.kyushu-id.ac.jp/
html/Table/marquee.html

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/9

197

動画

編
ADVANCED TOOLS

これがもっと複雑なアニメーションを作るツールだ
より複雑な動きをさせたりインタラクティブなアニメーションを作ったりしたい場
合にはShockwave for Director の出番だ。

Shockwave for Director は、Director でわれている、どちらかというとプロ向けの高度て動作を変えるインタラクティブな作品を作作成したアニメーション（普通Director では

なソフトウェアだ。価格も188,000 円とそれることもそれほど難しくはない。

「ムービー」と呼ぶ）をホームページ上で再生なりにする。

するための拡張機能だ。したがって、ショッ
クウェーブで再 生 するアニメーションは●

もちろん、プロ向けだからといって一般の人が使っていけないわけではない。

とはいえ、複雑なことをすればするほど、Lingo というスクリプトやさまざまなテクニッ

DirectorではGIFアニメーションのようなパクを覚えなければならないので、使いたい人はDirector で作られた作品は1 つのファイル

ラパラマンガではなく、背景の上に動かすもそれなりの覚悟と豊富なアイディアを持ってになるが、そのままではサイズが大きくなるのの（キャストという）を配置し、その動きをいる必要がある。

で、Afterburner というツールを使って圧縮指定したり、あるコマで音や音楽を鳴らした

してインターネットに載せる。それをHTML

り、ボタンを作ってユーザーがそれを押して違で指定しておけば、ショックウェーブのインスう場面を登場させたりといった複雑なことがトールされたブラウザーで見ることができる。

できる。

Director で作る必要がある。

したがって、一度使い方を覚えてしまえば、●Macromedia社のDirectorは、ほとんどの単なるアニメーションばかりでなく、アイディ

CD-ROMマルチメディアタイトルの制作に使ア次第でゲームのようにユーザーの反応によっ

Director

ショックウェーブのサンプル
アニメーションを集めた素材集『道具箱』
定価：5,800 円
販売：（株）データクラフト
問い合わせ先：TEL 011-707-7780

Authorware

Adobe
Premiere

Macromedia 社のDirector では､インAuthorware はMacromedia 社のプレPremiere はQuickTime およびVideo

タラクティブなアニメーションを作成す

ゼンテーション作成ツール。Authorware

for Windows のムービーを編集したり作ることができる。作成したアニメーショ

で作 成 したプレゼンテーションは、成したりするソフト。Premiere 4.2 For

ンは、ネットスケープなどのブラウザー

Shockwave for Authorware プラグイン

Windows では、VDO live 用のムービー

で、ショックウェーブのプラグインを使を使ってネットスケープなどのブラウザも作成することができる。QuickTimeムって再生することができる。

ー上で表示、再生することができる。

ービーをホームページ上で再生させるに

jhttp://www.macromedia.com/software/dms/
index.html

jhttp://www.macromedia.com/software/ais/index.html

はQuickTime 再生用プラグインをブラ
ウザーにインストールする。
jhttp://www.adobe.com/prodindex/premiere/
main.html
jhttp://quicktime.apple.com/qt/sw/sw.html

198 INTERNET magazine 1996/9

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

ワンランク上のホームページ作成術

Egor
The Animator

Smart
Dubbing

SWAMI

Sausage Software社の開発したツー

同じくSausage Software社の開発しQuickTime ムービーはAV 機能のある

ルで、プログラムがなくてもアニメーシたツールで、さまざまなビジュアル効果

マッキントッシュで容易に作成できるが、ョンを作成してJavaアプレットにするこを加えてテキストを動かすJavaアプレッ

ホームページ上でQuickTimeムービーをとができる。GIF アニメーションを作る

トをプログラミングの知識なしで簡単に見 せるには、 見 る側 のブラウザーにのと同じような方法でできるので、絵さ作成できる。ビジュアル効果としては、

QuickTimeプラグインが入っている必要

え用意できれば、誰でも簡単にJava にスクロールさせたり、ヘビのような動きがある。GIF アニメーションであればプ

よるアニメーションが作れる。下記のをさせたり、バウンドさせたり、映画のラグインの必要がないので、QuickTime

URL で使用期間限定のプログラムを入スタッフロールのようにしたりといったとして作成した映像をGIFアニメーショ手できる。

多彩な表現が可能で、スピードなども調ンにするためのツールがこれ。GIF 化のjhttp://www.sausage.com/

節できる。 Sausage Software Home

方法とサンプルを下記のURL で見るこPage から使用期間限定のSWAMI プロとができる。

グラムを入手できる。

jhttp://www.xs4all.nl/~polder/jhttp://www.sausage.com/

マクロメディア社 エンジニアリング担当上級副社長
ノーム・マイロウィッツ
聞き手：藪 暁彦

果てしなく増幅し続ける減衰知らずの衝撃波
ショックウェーブ
去る6 月11 日と12 日の2 日間、東京・高輪のディレクター対応版のあと、フリーハンドや

新 高 輪 プリンスホテルで M a c r o m e d i a

オーサウェア版ショックウェーブがリリースされConference & International Roadshow '96 がたが、それで終わりというわけではなかった。マ開かれた。このショーのために来日した同社エクロメディア社からは、3D グラフィックツール

ンジニアリング担当上級副社長ノーム・マイロの Extreme 3D、 サ ウ ン ド 編 集 ツ ー ル のウィッツ氏に、ショックウェーブの今後についてSoundEdit 16 が発売されているが、これらのツーマンスが大幅に改善され、ネットワーク対応

話をうかがった。

ールに対応するショックウェーブの開発も予定のLingo コマンドが追加され、QuickTIme ムー

ネットスケープ2.0 のプラグイン第1 号としてされている。なんだかややこしい話だが、ショッビーも使えるようになった。正式版の1 日も早登場したShockwave for Director だが、今後

クウェーブとは同社のデータ圧縮技術の総称だ

いリリースが期待されるところだが、それで満足

あらゆるメジャーなブラウザー用のショックウェ

ったようだ。

するのは早い。未来のショックウェーブは、ス

マクロメディア社が開発したツールは、もとーブが登場するという。

トリーム対応になる予定だというのだ。

「ネットスケープ社と共同でプラグイン用API の

もとローカルで見たり聞いたりするデータを編集「まだ具体的な計画があるわけではありませんが、開発を進めていたから、最初にできたのがネッするためのものだった。それをネットワーク対応

データを複数のチャンク（かたまり）にわけてロトスケープ版だった。それだけのこと。インターにするには圧縮技術が不可欠で、その技術の名ードしながら再生できるようにする予定です」

ネットエクスプローラやモザイク、ネットマネー

称がショックウェーブだと考えればすっきりする。

将来の計画に期待するのは気が早すぎるかもジ、オラクル・パワーブラウザー、サイバードッ

アメリカではディレクター5 がリリースされ、しれないが、7 月下旬には日本語版ディレクタ

グなど、メジャーなブラウザーにはすべて対応す

これに対応するショックウェーブベータ版のリリー「Director 5.0J」もリリースされて今後ます

る予定です」

ースも始まっている。新しいバージョンはパフォ

ます目が離せなくなりそうだ。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/9

199

音声編

SOUND

音楽や声が聞ける
ホームページを作りたい！
最近のパソコンは、ほとんどマイクが付いていたりライン入力ができるので、データを作るのはラクチンになっている。そのデータをページに載せる方法解説しよう。
ホームページにあなたの演奏した音楽を鳴らしてみよう。

B サウンドをホームページに載せられるデータに変えよう
パソコンで音声の録音/再生をするにはサウ使うのが一般的だ。WAVE形式はウィンドウだ。サウンドは粗くなるが、8ビット、11kHz

ンドボードが必要だが、一部ノート型を除け

ズ、AIFFはマッキントッシュ、AUはUNIXで程度のサンプリングでも、喋り手の声を区別ば、現在市販されているパソコンの多くは最広く使われているデータ形式だ。この3 種類

でき、内容も十分聞き取れる。それより低く

初からサウンドボードを内蔵している。だか

すべてのデータを用意すればより親切だろう。

てもいいくらいだ。 せいぜい 1 6 ビット、ら、今すぐにでも声や音楽を録音できる。

サウンドエディターがこれら3 種類のデータ形

22kHz 程度で十分だろう（表2 参照）。

ただし、録音したサウンドをそのまま使うの式に対応していない場合は、変換ツールも用は問題だ。データの最初と最後に音のない部

ホームページにサウンドを載せる際には、著意したいところだ（表1参照）。

分が残っているからだ。この空白部分を取り作権にも注意だ。自作の曲や著作権の切れて●また、サウンドファイルを極力小さくするこいる（著作権者の死後50 年経っているもの）

とも大切だ。スピーチは短く、音楽は演奏全

童謡やクラシックなどを、自分で演奏して載体ではなく一部だけにしよう。

せるのであれば問題ないが、それ以外の無断除く必要がある。
●

録音するときのデータ形式も問題だ。イン●ターネットにはウィンドウズやマッキントッシ

デジタルサウンドの音質は、サンプリングす使用は厳禁。著作権が切れている曲でも、プュやUNIXなどさまざまな環境のマシンが接続るビット数と周波数で決まる。ビット数が大ロの演奏はもちろん使えない。マルチメディア

されているから、特定の環境でしか再生でききいほど、周波数が高いほど音が良くなり、

タイトル制作用に販売されている著作権フリないデータ形式は避けたほうがいい。通常は、サンプリングしたデータも大きくなる。

ーの素材集を除いて、CDからサンプリングしWAVE、AIFF とAU の3 種類のデータ形式をしかし、スピーチにCD並みの音質など不要たサウンドは使えないのだ。

表1 ：サウンドツールと対応データ形式

ソフト名

バージョン

GoldWave

3.2

SoundEffectSoundMachine
ConvertMachine

0.9.1
2.6.2（J）
1.6.2（J）

用途

入手先 URL

録音/再生/編集

データ形式
WAVE AIFF AU○○○

録音/再生/編集
再生
変換

×
○
○

ftp://ftp.alpcom.it/software/mac/Ricci/html/alb.html
http://online.anu.edu.au/RSISE/teleng/Software/JapaneseVersions/welcomeJ.html
http://online.anu.edu.au/RSISE/teleng/Software/JapaneseVersions/welcomeJ.html

○
○
○

×
○
○

http://web.cs.mun.ca/~chris3/goldwave/beta.html

表2 ：サンプリング周波数と1 分間当たりのデータサイズ

長時間の再生には、リアルオーディオが最高！
リアルオーディオなどのリアルタイム再生タイプのシステムのメリットは、ファイルサイズをいく

このタイプの場合、設定が少々面倒くさい。

らでも大きくできること。アクセスした側が、いWAVE やAIFF 形式ならHTML ファイルに直接つでも再生とデータのロードを中断できるからファイル名を設定するだけでいいが、リアルタイだ。ただしこのタイプのシステムは、モデム接続

ム再生の場合は、対応ファイルが置かれているのような低速度の接続環境でもリアルタイム再場所とファイル名を書いた記述ファイルがいる。

生ができるようにデータを圧縮している。そのたそして、この記述ファイルにリンクするアンカー

め音質はそれほどよくない。新しいバージョンのタグを設定する。しかも、WWW サーバーのほ

リアルオーディオでも、AM 放送とFM 放送の中

かにリアルオーディオサーバーも必要なのだ。

200 INTERNET magazine 1996/9

サンプリング周波数（kHz） サンプリングビット数（bit） ステレオ（kB） モノラル（kB）
7.418
8
890
445
11.02581323
661
11.025162646
1323
11.127
8
1335
667
22.05
8
2646
1323
22.05
16
5292
2646
22.254
8
2670
1335
44.1
16
10584
5292

間程度の音質だ。

※マッキントッシュでは、SoundManager3.0 以降を使っている場合、ウィンドウズと同じく11.025kHz、22.05kHz といったサンプリング周波数がシステムに設定されている。また、SoundManager2.0 では、11.127kHz、22.254kHz サ
ンプリング周波数が設定されている。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

ワンランク上のホームページ作成術

SOUND

音声

編

GoldWave の使い方

1 2
3
4
1 2
3
4

サウンドをサンプリングするには、まマイクまたはライン入力からの音声信

GoldWave

ずFileメニューから「New」を選択。各号が録音される。ストップボタンをクリ種の設定をする。あとで不要な部分は切ックすれば録音終了だ。

GoldWave（シェアウェア）は、サンプ

り取ることができるから、録音時間は長リングだけでなく、選択した範囲にさまざまめに設定しておいたほうがいい。

なエフェクトまでかけられる便利で手軽なササウンドウィンドウが表 示 され、ウンドエディターだ。

録音が終わったら編集だ。エフェクト機能を使ってエコーや反転再生などサウンドを好きなように加工できる

Device Controls ウィンドウの録音ボタ
ンをクリックすれば録音開始だ。

まずやらなければならないのが、不要な部分のカット。特に最初と最後の音が入っていない部分は切り取る。エフェク

トやカットなどの処理は、選択した範囲
に対して行われる。波形上でマウスの左サンプリングするサウンドの条件を設定。

ボタンをクリックした場所が選択範囲の録音やサウンドの波形を表示するサウンドウィンドウ。

開始位置、右ボタンをクリックした位置

録音、再生などをコントロールする
Device Control ウィンドウ。普通の再生ボタンをクリックすると再生に、ニ
コニコマーク付き再生ボタンをクリッ
クすると繰り返し再生になる。

が終了位置になる。こうして範囲を決めてから、必要な処理をメニューバーまたはツールバーのボタンで指定するのだ。

編集が終わったら、データの保存だ。

GoldWaveは、WAVE、AIFF、AUの3
種類の形式に対応しているから、必要な形式のデータはこの1 本ですべて作るこ

カットする範囲を指定して、「Delete」
波形を見やすいサイズに拡大。View
キーを押 すか、 E d i t メニューから
メニューの「Zoom 1:100」あたりが見やすい。Viewメニューから「Other」 「Cut」を選ぶか、あるいはツールバ
ーのカットボタンをクリックすると、を選択すれば、任意のサイズに変更
選択した範囲が削除される。
できる。

編集が終わったら、ファイル名を付けてデータを保存する。

とができる。

SoundEffects の使い方
SoundEffects

ソフトを起動し、ウィンドウ下部に並設定がすんだら、録音ボタンをクリッ

んだボタンのうち左端の録音ボタンをククすれば録音が始まる。ストップボタン

リックすると、サンプリングの条件を設をクリックして録 音 を終 了 したら、バージョンがまだ0.9.1 と1.0 にも満たな定する「Record」ダイアログが開く。こ

「Save」ボタンをクリック。
「Record」

いSoundEffects（シェアウェア）だが、ひこで各種の設定をする。入力ソースには、ダイアログが消えて、ウィンドウに録音ととおりの機能は備えている。ホームページ

マイクとライン入力のほか、内蔵 CD-

したばかりの波形が表示される。

用のサウンドデータを作るぶんには十分だ。

ROM からの音楽も使える。

次は波形を作業しやすい大きさに拡大

録音する前に、Record ダイアログでサンプリング条件を設定する。ここではサンプリング周 波 数 は、 2 2 . 0 5 k H z と
44.1kHz のどちらかしか選べない。

して、不要な部分のカットだ。そのあとはサウンドを加工する。波形上でマウスをドラッグして反転表示に変わった部分が加工できる。

波形表示エリアの左下にある2 つのボタンで、表示波形を編集しやすい大きさに変更。

編集作業が完了したらデータのセーブだが、SoundEffects にはAIFF 形式とマックOS のシステム7 サウンドファイルの2 つの選択肢しかない。そこでWAVE 形

式 や A U 形 式 のファイルを作 るには、Convert Machine など別のツールで変換しなければならない。

録音レベルを設定するLevel ダイ
アログ。左側にあるノブを動かして、録音レベルを調整する

ドラッグして反転表示に変わった部分をカットしたり、エフェクトをかけたりする。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/9

201

音声

編
ADVANCED TOOLS

これがMIDIデータを
ホームページに置くためのツールだ
ソフトだけでMIDI データを再生できるプラググインや、MIDI データを作成する
シェアウエアいくつかある。これを使って、きれいな音に出るホームページに仕上
げよう！
ホームページの演出効果の大きいサウンド

ネットスケープ2.0のプラグインのなかには、

MIDPLUGなどのMIDIプラグインで再生でだが、難点はデータサイズが大きいこと。しMIDI 対応のものがいくつかある。ヤマハのきるのは、拡張子が.midのスタンダードMIDIかし、スピーチでなく音楽ならばうまい方法

MIDPLUG がそれだ。MIDPLUG をインスト

ファイルに限られる。各MIDIソフト固有の形がある。MIDI だ。MIDI ファイルに含まれてールしたネットスケープナビゲーター2.0 で式でデータを保存しても、再生できない。まいるのは音程、音長、音量や音色などを指示

MIDI 対応ファイルにアクセスすると、ウィン

た、MIDIファイルをWWWサーバーに認識さするデータだけだから、ファイルサイズはきわ

ドウにコントローラーが表示される。このコンせるには、MIME タイプやサブタイプ、拡張

めて小さい。どんなに長い演奏でも数十 k バ

トローラーを使うと、プレイ、ストップやポー子などをあらかじめサーバー側の設定ファイル

イト程度で、音質良好。ホームページを演出

ズだけでなく、テンポや音程の変更もできるに登録しておかなければならない。このあたりする手段として、これほど最適なものはない。

から面白い。

はプロバイダーに問い合わせてみよう。

ヤマハ
MIDPLUG

MIDI
StudioCressendo!

ヤマハのMIDPLUG はウィンドウズとM I D P L U G と同 じように、ウィンドウズでMIDIデータを作成する

マッキントッシュの両方のバージョンがCressendo!もMIDIデータを再生するプツールだ。音符を並べていくと音楽が出あり、しかもソフトウェアでシンセサイ

ラグインツールだ。こちらウィンドウズ

来上がる。半音上げたり下げたりの記号

ザーのシミュレーションをするソフトシ版とマッキントッシュ版がある。音質ももある。

ンセサイザーを内蔵し、MIDI 音源がな

MIDPLUG とほとんど変わりない。

jftp://ftp.iij.ad.jp/pub/simtelnet/win3/music/
mstud41.zip

くても、音楽が楽しめる。使い方の説明

フリーの試用版もダウンロードできるが、日本語で読めるのはありがたい。

が、製品版を購入するとリアルタイムで

jhttp://www.yamaha.co.jp/xg/S/S.htmlのデータ再生ができる。

フリーの素材ライブラリー：

jhttp://www.liveupdate.com/get.html

jhttp://www.yamaha.co.jp/xg/L/lib.html

ミュージ郎
5500

MIDIGraphy
マッキントッシュ用のMIDIデータ再生

MIDPLUG などに内蔵されているソフツール。こちらは音符を並べるのではな

トシンセサイザーは、ソフトだけで出し

く、コードごとに、鳴らす長さなどを指ているとは思えないほどいい音だ。しか定する。DTM の知識がある人は、こち

し餅は餅屋。もっといい音で音楽を聞こらのほうが作りやすいかもしれない。

うと思ったら、音源は専用のハードウェ

jhttp://ux01.so-net.or.jp/~mmaeda/

アに任せるにかぎる。
ひと口にシンセサイザーといってもピンからキリまであるが、価格などが手頃で操作も簡単なコンピュータミュージッ
ク用にMIDI 編集ソフト付きのパッケージもある。こうしたものなら、MIDIを聞
いて楽しむだけでなく、作って楽しめる。
M I D I 対 応 のゲームもあることだし、MIDI 音源が１つあると何かと便利だ。

202 INTERNET magazine 1996/9

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

販売：ローランド株式会社
定価：63000 円
問い合わせ先：03-3251-5791

ワンランク上のホームページ作成術

画像編

GRAPHICS

きれいな画像を表示したい
画像がなかなか表示されなくてイライラしたり、画像の色が汚くなってしまった
りしたホームページがある。こんなことがないように、すばやくきれいに画像を表示させるコツを紹介しよう。

B 圧縮率と表現力を考えて、ベストな画像形式を選ぼう
GIF 形式は256 色までしか表現できないた

しかし、このJPEG 形式はイラストやロゴ

JPEG 形式の特徴は、色数が多いまま圧縮

め、GIF 形式で保存された写真は不鮮明でぼデザインなどのように線画で描かれるものや、率できる点だ。フルカラーの写真を置いたり、んやりとした印象を受けがちだ。それに対し同じような色やはっきりと分かれた色を使っ

データサイズを小さくしたい場合は、この形て、JPEG 形式は写真画像に対してその効果て描かれた画像に対しては、圧縮率が低くな式を使うとよいだろう。また、JPEG 形式にを発 揮 できるように設 計 されているため、ってしまううえ、画像の質を落としてしまうもプログレッシブJPEG 形式というGIF 形式

1670万色が表示できる。また、同じ写真をGIFこともある。

のインターレースと同じような表示ができるも形式とJPEG 形式で圧縮した場合、JPEG 形

それぞれの圧縮の特徴をふまえると、イラ式の方がファイルが小さくなる。ただ、モニストなどの線画や、色数が少ない画像の場合

ターの発色数の設定を256 色にしていたり、は、GIF形式を使ったほうがよいと言える。まさて、ファイル形式にはGIFとJPEGの2つ

256 色しか表示できないマシンの場合だと、た、GIF形式には、トランスペアレンシーやイの形式が存在し、いくつかのバリエーション

それ以上の色が表示されず、せっかくのきれ

ンターレース（別表参照）などといった機能があることは理解できただろうか。それでは、いなデータがので注意だ。

もあるのだ。

どのように画像が見えるのかを見てみよう。

のがある。
●

■ GIF 形式

■インターレスGIF 形式■ JPEG 形式■プログレッシブJPEG 形式

ファイルサイズ：160K

ファイルサイズ：160K

ファイルサイズ：64K

ファイルサイズ：45K

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/9

203

画像

編
ADVANCED TOOLS

これが、画像を加工する
便利なツールだ
デジタルカメラで撮った写真や、スキャニングした画像などのファイル形式を変換
したり、きれいに表示させるためのツールを紹介しよう。

インターレースGIF やプログレッシブJPEGるためのソフトが必要になる。市販のものもで、かつさまざまな表示形式のものをホームなど、前ページで見たような画像形式にした

もちろんだが、シェアウェアでもなかなか高機

ページに置くことができるのだ。

り、きれいな画像を表示させるためには、フ能なものが出てきている。

ァイル形式を変換するツールや画像を加工す

Adobe
Photoshop

それらをうまく使うことで、きれいな画像

Graphic
Converter

GIF
Converter

画像ファイル編集用のソフトとしては

マッキントッシュ用のシェアウェアのマッキントッシュ用のシェアウェアの定番のソフトだ。補正のしかたや画像形

画像ファイル編集ソフト。画像補正機

画像ファイル編集ソフト。GIF画像の加式もさまざまな方法をサポートしている。

能や編集機能などがかなり充実してい工や減色などの処理ができる。また、イ

しかし、 プロ向 けのソフトだけに、る。インターレースGIF や、トランスペ

ンターレースGIF への変換ができる。

Adobe Photoshop3.0 で価格が155000

アレンシーGIF（透明GIF）などへの変

円 とかなり換 もサポー

高価だ。

トしている。

jhttp://www.adobe.com/prodindex/photoshop/
main.html

jhttp://members.aol.com/lemkesoft/index.html

Paint Shop
Pro

GIX

jhttp://www.kamit.com/index.html

JPEG
Transmogrifier

ウィンドウズ用のシェアウェアの画像

ウィンドウズ用の画像ファイル変換ソ

PICT ファイル、GIF ファイル、それファイル編集ソフト。編集機能も充実

フト。インターレースGIF やトランスペに JPEG ファイルをプログレッシブ

しているうえに、多くの種類の画像形式

アレンシーGIF（透明GIF）に加え、プJPEG に変換するマッキントッシュ用のに対応している。ウィンドウズユーザー

ログレッシブJPEGも作成できる。Paint

シェアウェアソフト。送金して登録するならこれで、かなりのことができる。

Shop Pro と組み合わせて使うとよい。

と、ドラッグ&ドロップで変換ができる。

jhttp://www.jasc.com/pspdl.html

jhttp://www.tocka.com/indexj.html

jhttp://www.in-touch.com/pjpeg.html

ホームページに画像を置くときのポイント

た、画像を作る場合は、最初から色数を減らしてデザインを考えるのもポイントだ。なにも色をたくさん短い時間で画像を表示させるには使えばかっこいい画像になるというわけではないのだ。

ページのトップにいきなり大きな画像をドン！と置く

また、画像をHTML で指定する際には、のは考えものだ。回線が込んでいるときなど、なかな<img src="画像ファイル" ALT="メッセージ"width= 横

か画像がダウンロードされなく、見ている人はかなり

幅 height= 高さ>

いらいらする。せっかく頑張って作った画像も、見てという指定をしておこう。最初に枠とメッセージが表もらう前にほかのページにジャンプされしまってはつ

示され、文字がすぐに読めるようになる。また、うままらない。

く画像が表示されなかったときなど、ここに画像があフォトレタッチのできるソフトがあったら、拡大して、るということを示せる。いくつかのHTML エディター

画像のノイズなどを塗りつぶして減色してみよう。までは、この機能をサポートしている。

204 INTERNET magazine 1996/9

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

ワンランク上のホームページ作成術

B デジタルカメラの写真をもっときれいにしよう
最近流行のデジタルカメラ。シャッターを切ってその場で画像が見られたり、画像をすぐにパソコンに取り込んで加工できるのはかなり便利だが、画質に難点があるのも事実だ。デジカメで撮った写真を上手に加工して、きれいに仕上げるコ
ツをいくつか紹介しよう。
正直言って、デジカメの映像の質はあまりよいとはいえない。天気のいい日、直射日光

デジタルカメラの種類によっては、画像補

フォトエンハンサーの画面。画像補正のメニューがいくつか用意されている。

正ツールが付いているものもある。

の下で撮影をしたりすると、表現域が追いつ

日本コダック株式会社のDC20 や、セイコ

かなくて全体が白っぽく、色が飛んだ画像にーエプソン株式会社のカラリオCP-100 など

なってしまうことがある。

には、フォトエンハンサーという画像修正機

また、解像度もそんなに高くないので影の能を持ったソフトが付録で付いてくる（ウィン部分は真っ黒につぶれてしまい、見えなくな

ドウズ95＆マッキントッシュ対応）。また、デってしまうことが多い。一般的なレンズの絞

ジタルカメラの人気機種であるカシオ計算機

りや露出などは、特別に設定することはできのQV-10A やQV-30 の場合は、ウィンドウズないし、それができるカメラは値段も高い。ま版の接続キットのなかに画像補正機能を持った、部屋の中など光量が少ないところでは、たソフトが付いてくる（QV-LINK ／ 9.800

ぼわっとした、輪郭のはっきりしない絵になっ円）。これらのソフトを使えば、比較的安価てしまいがちだ。

に画像修正ができるというわけだ。

QV シリーズの画像を補正できる
QV-LINK。
色が飛んでしまっている画像

写真の補正のしかた
GraphicConverter
ここでは、マッキントッシュ用のグラフィッ

Pro という強力な画像編集ソフトがあるのでそクツールであるGraphicConverter を例にとっちらを利用してみてはどうだろうか（それぞれて説明しよう。ウィンドウズならPaint Shopの入手先は204 ページ参照）。
輪郭がぼやけてしまっている

色が飛んでしまった場合の補正のしかた
直射日光の下で撮影し、色が飛んでしまっ

全体にぼんやりと色が付いてしまった場合の補正のしかたものの形をしっかり出すための補正のしかた
室内の暗いところで撮影すると、被写体のたあじさいの画像を補正してみよう。全体的にあじさいの写真は、全体的に黄色っぽくなっ

輪郭の部分までを捉えられず、全体にぼんやり

白っぽくなってしまったので、明るさを下げて、てしまったので、黄色の反対色であるブルーをとした印象を受けてしまう。そこで、この室内

コントラストをちょっと強くしてみた。それか

少し加える。また、花びらの形をしっかり出すで撮ったスノーボウルとガラスのコップは輪郭

ら、色が付いているところはもっと色が出るよ

ためにちょっと輪郭にシャープをかけた。

のシャープさを強めて、コントラストを強めに

うに彩度を上げた。これであじさいに水々しさを取り戻すことができた。

ちなみに、赤色がかってしまったらシアンを加える。青色がかってしまったらイエローを足す。

バリエーションにとんだ画 像 補 正が可能だ。

補正したあとの画像。上の画像と比べてみよう。

かけてみた。これによって、形のはっきりした
メリハリのある画像になる。

補正する前の画像。

これが補正したあとの画像。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

補正したあとの画像。形がはっきりしている。

INTERNET magazine 1996/9

205

小技編

GRAPHICS

ホームページにいろいろなしかけを付けたい
クリッカブルマップやアクセスカウンターなど、付いているとかっこよく見えるし
かけがいくつかある。一見難しそうに見えるが、意外と簡単な方法もあるのだ。
ここでは、なるべく簡単にしかけを付ける方法を紹介しよう。

B クリッカブルマップのあるホームページを作ろう
クリッカブルマップの種類には、大きく分設定するものだ。

プナビゲーター2.0 以降に「MAP タグ」といけて2種類ある。サーバーサイドイメージマッ

これは、プロバイダー側のサーバーの種類をうタグが採用されて、クライアントイメージマ

プとクライアントサイドイメージマップという調べたり、こちらでサーバー設定をしたりする

ップという設定ができるようになった。これものだ。

必要があるので、ある程度の知識が必要だ。

は、サーバーのCGI 機能を使わないのでサーサーバーサイドイメージマップは、CGIとい

サーバー設定？

CGI ？そんな単語は知ら

バーに負担をかけずに素早い反応が得られる

うプログラムの一種を使用して、画像のどこない…わからない…だめだできない…という読マップ指定ができるうえ、そんなに難しい知をクリックしたら何というデータを呼び出す、者も多いはずだ。

識はいらない。また、IBM のホームページビというようなマップ設定ファイルをサーバーにあきらめるのは早い。最近、ネットスケー

ルダーならこの機能をサポートしている。

クリッカブルマップの作り方

2

MapEdit本誌の4 月号でも紹介したツールだが、クToos メニューから、URL を埋め込む範囲と形を選び、範囲を指定する。

ライアントサイドイメージマップを簡単に作成できるツールだ。ウィンドウズ版のみ。
（シェ
アウェア）
SCD-ROM

1

収録先：WIN →MAPEDIT
まず、HTML 作成ツールでクリッカブルマップにする画像を置いたファイルを作っておく。File メ
ニューから「OPEN」を選び、クリッカブルマッ
プを置くHTML ファイルと、クリッカブルマップにする画像ファイルを指定する。

3
マッキントッシュでクライアントサイド
イメージマップを作るツール
WebMap
MapConvert

206 INTERNET magazine 1996/9

範囲を指定すると、リンク先のURL を聞いてくるので、リンク先のURLまたはファイルを指定する。

WebMap はサーバーサイドイメージマップを作成するツールだが、MapConvert を使うことで、クライアン
トイメージマップに変 換 してくれる。 しかし、AppleScript が必要だし、環境によってはうまく動かな
いので注意が必要だ。

WebMapjhttp://home.city.net/cnx/software/webmap.html

MapConvert
j http://uiarchive.cso.uiuc.edu/pubindex/infomac/text/html/map-convert-10-as.hqx.abs.html

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

4

何か所かリンクを指定すれば完成だ。ファイルができるので、あとはHTML 作成ツール
でページに張り込む。

ワンランク上のホームページ作成術

小技編

B アクセスカウンターの付いたホームページにしよう「あなたは○○番目の訪問者です」というアクセスカウンター。このシンプルだけ
どあるとかっこいい機能を自分のホームページに付けてみようと思ったことはないだろうか。これが簡単に付けられる方法があるのだ。

見かけのシンプルさとは裏腹に、「普通ののプログラムやススクリプトとの橋渡しをしてるアクセスカウンターなのに、自分のページで人々」が気軽に手をつけられる代物ではないくれる仕組みのことだ。これを使うには、プはできないのか…」とあきらめるなかれ。ここのだ。アクセスカウンターは、CGIというもの

ログラムやスクリプトの知識が必要だ。アクから、その簡単な方法を紹介しよう。

を利用しているからだ。

セスカウンターはこのCGI の仕組みを利用し

CGIはCommon Gateway Interface の略。

ている。

WWW サーバーとサーバー上で動いている他リンクを埋め込めば、簡単にアクセスカウ
ンターが付けられるサービスがあるのだ。これ

しかし、「ああ、あんなにあちこちで見かけを利用しない手はない。

アクセスカウンターの付け方

1

WEB counter（http://www.digits.com/）にアクセスし、「Create」のリンクをクリックする。

CGI を利用するためには
アクセスカウンターに限らず、CGI を利用してなにか特別の機能を持つページを作ろうと思ったら、プログラミング言語やWWWサー
バーについての知識などがないと、扱うことは難しい。
試 し に 「 Matt's Script Archive」（ http://www.worldwidemart.com/scripts/）や「COUNTER4.0 HTML ACCESS COUNTER」（http://www/webtools.org/counter/）など

2

3

メールアドレスやアクセスカウンタ
ーの名前など、必要項目を入力していく。

というサイトを覗いてみよう。これらは、CGIを使ったアクセスカウンターの作り方や、さま
ざまなCGI のスクリプトを紹介している。もし、ここに書いてあることがよくわからないというよ
うなら、前途は多難だ。
その前に、プロバイダーによってはCGI が使えないかもしれない。多くのWWW サーバーでは、初期設定のままだとCGI が使えない設定になっている。
また、プロバイダーによっては、システムの保安上の理由からCGI を禁止しているところもあるのだ。

注意！
世界中の人がここを利用しているので、世界中からアクセスがある。そのため、ちょっと混んでいることも多い（混んでいると、ページ上のカウンターが BUSYの表示になってしまう！）。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

HTML のリンクの一文が送られてくるので、それをコピーして自分のHTML
ファイルの中に書き込めばOK だ。
また、http://www.digits.com/usage.html#Optionsに行くと、カウンターの文字を変えたりできるオプションの情報もあるので、アクセスしてみよう。

その他のアクセスカウンターがつけられるページ
jhttp://www.st.rim.or.jp/~hirono/cgibin/counter/jhttp://www.a-frontier.com/counter.html

INTERNET magazine 1996/9

207

小技

編

B 見る人の環境が違っても、文字が見やすいページにしよう

日本語の文書を美しく表示させる…、これは印刷のプロたちも頭を悩ませる問題だ。しかもホームページの場合、見る側の環境で文字をきれいに表示するにはかなりの制限がある。まずは、どんな違いがあるかを見てみよう。

現在、シェアウェアやβ版も含めると何種グや設定を開発しているので、HTML という

ネットスケープナビゲーターで字の大きさなど類のブラウザーが存在しているか把握できる「共通の約束」に従って文字の大きさや行間を確認しても、インターネットエクスプローラ

だろうか？

数種類のブラウザーを1 台のマを調整してページをレイアウトしても、自分ではまったく違う見え方をしてしまい、思っ

シンにインストールして使っている人も多いのの意図したとおりに表示できないことが多い

たとおりのものにならないこともある。また、ではないだろうか。

のが実状だ。

ウィンドウズとマッキントッシュでも若干見え

さまざまなブラウザーは、それぞれ独自のタHTML エディターでホームページを作成し、方が違ってくるのだ。

ブラウザーやOSでの、ホームページ見え方の比較
同じブラウザーでの見え方の違い
まず、ブラウザーが表示する文字の種類とその大きさだが、これはそのブラウザーを使う人がそれぞれ設定しているので、なかなか統一されない。同じネットスケープナビゲーターでも、作者は左の画面のようにレイアウトしたつもりなのに、とあるインターネットカフェでアクセスしてみたときは、右の画面のように表示されてしまっていた。
手間をかけて画面中の罫線とテキストの幅を合わせたのに、ぜんぜん反映されないので、作り手としてはがっかりだ。
たとえば、マッキントッシュ版のネットスケープナビゲーターの場合
は、「文書の文字コード／ DocumentEncording」で「日本語／Japanese」を選ぶと、最初の設定はOsaka で12 ポイントが設定され作者が最初に意図したデザインのホームページ。

ほかのマッキントッシュで見た場合の見え方。

ウィンドウズ95 で見た場合の見え方。

ウィンドウズ95 に合わせて、字の大きさを調整したが、小さくて見えない部分ができてしまった。

文字が大きくなって読みやすいが、作者の意図したものとは違う見え方だ。

文字の大きさは5 段階で調節する。

ている。それを変えられてしまうと、元も子もなくなってしまう。

ウィンドウズのネットスケープで見た場合の見え方の違い
次にウィンドウズ95 版のネットスケープナビゲーターで見てみる。初期設定のままで表示させてみても、最初に意図したものとは違う表示になっている。
そこで、同じ表示になるようにフォントの大きさを変えてみた。MS
ゴシックで、9 ポイントを指定したところ、罫線とテキストの幅は合った。しかし、潰れて読めない文字が出てきてしまった。ここは本文のフォントよりちょっと小さいフォントで表示するように指定した部分だ。
マッキントッシュ版だとちゃんと読めるが、ウィンドウズ95 版だとこれでは読めないという問題が発生してしまう。

インターネットエクスプローラでの表示の違い
インターネットエクスプローラ の最初の設定のままで表示させると、フォントのサイズが妙に大きい。これは、文字の大きさを指定する<FONT SIZE>タグはネットスケープナビゲーター独自のタグなので、エクスプローラで表示したページ上には反映されないためだ。フォントの大きさで文章にメリハリを付けた作者のもくろみは、崩れさった。
インターネットエクスプローラの文字の大きさは、初期設定の「中」を中心に大小5 段階で調整する。サイズを「最小」に設定しても、テキストは罫線の幅からはみ出してしまった。

208 INTERNET magazine 1996/9

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

ワンランク上のホームページ作成術

ブラウザーやOSでの、ホームページ見え方の比較
インターネットエクスプローラ2.0は行間が設定できる
ネットスケープナビゲーターにはないインターネットエクスプローラの独自のユニークな設定に、行間の調節がある。最初の設定は「小」で、5段階の調節ができる。行間などで読みやすさの変わる日本語には嬉しい設定だが、これでまた見え方が違ってくる。

行間を変えられるのは、見る側にとってはうれしい設定だ。

どんな環境で作成したかを明記しておこう
せっかくHTMLエディターなどで見やすいようにレイアウトしても、ブラウザーでその上から設定をかけるともう元がどうなっていたのかなんてわからなくなってしまう。
しかも、見ている人がどんなブラウザーを使っているかわからないし、
みな同じブラウザーを使っているわけではないので、何を基準にして読みやすいように文字を組むのかを考えるのは大変だ。
そこで、そのページを作った人がどのブラウザーでレイアウトを確認意図した通りの結果が現れるブラウザーなどを指定しておくのも技ではある。

したのか明記するというのも技の1 つだ。

ADVANCED TOOLS

これが雑誌のようなレイアウトのページを作れるツールだ

関連情報
jhttp://www.adobe.com/acrobat/
アクロバットファイルが読めるページのリンク集
jhttp://www.adobe.com/acrobat/3beta/
amexamp.html

雑誌や新聞のようなページがインターネットで読めるのがAdobe Acrobat だ。
近日中に日本語版もリリースされる予定なので楽しみだ。
普通のブラウザーで読むような電子文書のクロバットファイル」などと言われる。これ

まれたファイルをそのままオンラインで配布でレイアウトは、紙の雑誌や新聞に及ぶべくもは、Adobe 社が、DTP ソフトで作成したもきるというわけだ。それでいてファイルサイズ

ない。しかし、Adobe 社の開発したAdobeのをオンラインで流通させるために開発したソも意外に軽いのに驚く。

Acrobat を使うと、雑誌のような文書を読む

フトなのだ。

ことができる。

残念ながらこのAdobe Acrobat、まだ日本

アクロバットファイルなら、ブラウザーの設語が扱えないのだ。しかし現在日本語版も開「.pdf」という拡張子の付いたファイルをご定などに左右されず、イメージしたレイアウト

発中とのことなので、近々日本語で組まれた存 じだろうか？ これは「 Portable Docu

どおりのページを見せることができる。レイア

アクロバットファイルのオンラインマガジンや

ment Format」という意味だが、一般に「アウトや図版が、まるで新聞や雑誌のように組新聞が読めるようになるだろう。

AdobeAcrobat Exchange3.0

Adobe Acrobat3.0
Beta Reader
Adobe Acrobat ファイルを読むため

Adobe Acrobat のファイルを作のソフトだ。専用のリーダーソフトで成するツール。DTPソフトで作っも読めるが、プラグインをインストー

たレイアウトデータをこれらのソフ

ルするとレイアウトされたページがネッ

トを使ってアクロバットファイル

トスケープの画 面 の中 で読 める。

に変換するのだ。

jhttp://www.adobe.com/acrobat/3beta/#dl

jhttp://www.adobe.com/acrobat/ 3beta/#dl

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/9

209

小技

編

B フレームで分割されたページにしたい

最近、ページの中をいくつかに区切ってその中に別々のページを表示させるフレームを使ったページをよく見かける。これを、ぜひホームページにも取り入れてみたいという人は、このページを参考にしよう。

フレームはネットスケープナビゲーター2.0

ドウに区切ることができる。それぞれのフレーる。すべてを一気に理解するのは結構難しい。

から加わった新しい機能だ。現在は、インタ

ムに、別々のページを表示させることができ

サンプルページを用意したので、この中の数

ーネットエクスプローラ3.0 もこの機能をサポるのだ。HTMLエディターではこれをサポート

値を変えたり、リンク先を変えたりしながらートしている。

するものがまだ少ないため、ここではタグを埋

それぞれのタグの働きを理解していこう。

これを使うと、1 ページをいくつかのウィン

め込んでフレームを作る方法を詳しく解説すサンプルはCD-ROM に収録されている
ここで紹介するサンプルページは、付録のCD-ROM に収録されている。
「9 月号のもくじ」→「ワンランク上のホー
ムページ作成術」→「フレームのサンプル」の順にリンクをたどっていけばOK。本誌を読みながら、実際のページを動かしてみよう。

フレームの作り方

1●全体のフレーム（index.htm）を設定する
通常 <HEAD> …</HEAD> でタイトルバーに表示させる文字を指定したあとのファイルの本体の部分は、 <BODY> …</BODY> で囲むが、フレームの場合、<FRAMESET> …</FRAMESET>

1で囲む必要がある（図1 参照）。
次に、画面を分割する。index.htm では最初5 行目で<FRAMESET ROWS="120,*">という指定がしてある。これはフレームを横2 つに分割して、最初の横1 列目の高さが120 ピクセル、残りをフレームにするという意味だ。

2<HTML>

フレームを分けたら、目的のフレームに何を表示するかを決める必要<HEAD>があるが、これは<FRAME> タグで指定する。
<FRAME SRC="header.htm" NAME="header"
SCROLLING=AUTO NORESIZE>
SRC
NAME

<TITLE>The Sample Frame Page#1</TITLE></HEAD>

2<FRAMESET ROWS="120,*">

表示させたいフレームのファイル名またはURLを入れる。

<FRAME SRC="header.htm" NAME="header"

2

SCROLLING=AUTO NORESIZE>

そのフレームに名前をつける。ここでは、上の部分の赤いフレームに"header"という名前を付けている。

<FRAMESET COLS="250,*">SCROLLING スクロールできるようにするかしないかを指定できる。
AUTOは「内容が大きければスクロールバーを表示する」<FRAME SRC="left.htm" NAME="sample"

1

MARGINWIDTH=10 MARGINHEIGHT=10の意味だ。
NORESIZESCROLLING=AUTO NORESIZE>

フレームの大きさを変更できなくする。この指定がない<FRAME SRC="right.htm" NAME="main"

場合、フレーム枠をマウスでドラッグすると、大きさを

MARGINWIDTH=1 MARGINHEIGHT=1

変えることができる。

SCROLLING=AUTO></FRAMESET><FRAMESET COLS="250,*"> 以降で、今度は縦に分割するフレームの設定を同じようにしている。

210 INTERNET magazine 1996/9

図1

index.htm ファイル

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

ワンランク上のホームページ作成術

フレームの作り方

3
4<HTML>●左側のフレーム（left.htm）の設定
右側の黄色いフレームに青色のページを表示させてみようという場合
を例にとろう。ここの場合は左側のフレームのHTML ファイルである<HEAD>

left.htm のファイルで指定する（図2 参照）。

<TITLE>sample</TITLE><A</HEAD>3

HREF="green.htm" TARGET="main">

TARGET="main"となっているので、この左側のフレームの一番上の------ 中略

リンクをクリックすると、mainという名前のフレーム（ここでは右側の青いフレーム）にgreen.htm を表示させるということになる。

3------<A HREF="green.htm" TARGET="main"><FONT SIZE=4><B> ココ</B></FONT></A> をクリックすると、右側のセルが<FONT COLOR="#008800"><B> 緑色</B></FONT>

フレームを解いて外のページへとリンクをしたい、普通のページの形に変わります。<P>

式に戻したい場合の指定だ。

4<A HREF="white.html" TARGET="top"><A HREF="brown.htm" TARGET="main"><FONT SIZE=4>

でTARGET="̲top"と指定すれば、フレーム機能が解除される。

<B> ココ</B></FONT></A> をクリックすると、右側のセルがTARGET="top"<FONT COLOR="#994315"><B> 茶色</B></FONT>という指定で、新しいブラウザーを開くようにもできる。先ほどと違に変わります。<P>って「̲」が付いていないことに注意しよう。

4

あとは、サンプルをいろいろといじって、理解していこう。

<A HREF="white.htm" TARGET="top"><FONT SIZE=4><B> ココ</B></FONT></A> をクリックすると、このペ−ジの上に新しい<FONT COLOR="#FFFFFF"><B>

フレームを簡単に作成するツール

白い</B></FONT> ペ−ジが開きます。
<A HREF="white.htm" TARGET="white.htm"><FONT SIZE=4><B> ココ</B></FONT></A>

FrameITも同じことです。<P>

簡単にフレームを作成できるツールがある。簡単な質問に答えていくだけでフレームを自動的に作ってくれる（シェアウエア）。ただし、
日本語が通らないのと、作れるフレームの形に多少の制限がある。
SCD-ROM

収録先：WIN →FRAME<A HREF="black.htm" TARGET="̲top"><FONT SIZE=4><B> ココ</B></FONT></A> をクリックすると、このペ−ジはフレームが取れてぜーんぶ真っ黒になっちゃうよ！<P></BODY></HTML>

PageSpinner
マッキントッシュ用のHTML エディター。フレーム作成機能が付い

図2

left.htm ファイルている（シェアウェア）。フレームのHTML を自動作成してくれるが、ソースをコピーしなくてはいけないので、HTML の知識が必要だ。

jhttp://www.algonet.se/~optima/pagespinner.html

データをプロバイダーのサーバーに置くにはホームページの出来上がりを確認したら、プロバイダーのサーバーにデータを置いて「公開！」ということになる。
ファイルのアップロードの仕方だが、データをフロッピーデ
ィスクで送るか、FTP でサーバーにアクセスして自分でファイルを転送するのが一般的だ。初心者にとって、フロッピー
でデータを送ってサーバーに置いてもらうのは簡単だが、その後更新したいときには面倒になる。FTPだと自分でデータを更新できるので便利だ。どちらの方法を採用しているかは、
各プロバイダーの入会案内を見るか、プロバイダーに問い合
わせをしてみよう。

Cute
FTP
CuteFTP はウィンドウズのエクス
プローラを操作するのと同じ感覚でFTP作業を行うことができる。コマン
ド入力ではなく、マウスで操作できる
し、ファイルが置かれればウインドウに表示されるので、確認もできる。
SCD-ROM
収録先：
WIN →CUTEFTP

Fetch
マッキントッシュお得意のGUI で、普通にファイルをコピーしたり削除したりするのと同じ感覚で操作できる。
ファイル転送にかかる時間を円グラフで表示してくれる。
SCD-ROM
収録先：
Mac →Fetch3.0.1

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/9

211

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバー
アーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ
番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.