集中企画

もう普通のページじゃ
ガマンできない

192 INTERNET magazine 1998/10

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D
ホームページを作っていると、どんどん新しいことにチャレンジしたくなってくる。その最終目標とも言えるのが、動画などを使った動くホームページだろう。たしかに、動きのあるコンテンツが入っているとわかりやすく、ホームページとしても非常に魅力的だ。「自分のホームページもこんな風にしたい！」と思って見ている人は多いはず。では、いったいどうやって作ったらいいのだろうか？
そんな人のために、今回の集中企画では、楽しい動きのあるホームページの作り方を解説しよう。

塩田紳二 Illust:Hada Eiji

こんなページがあなたにも作れる動画やアニメーションを作成すると聞くとちょっとハードルが高いように思えるが、最近ではデジタルカメラでも動画を撮影できるものがあるし、8 ミリビデオやデジタルビデオがあるなら、取り込み用のボードさえ用意すれば、誰でも簡単にホームページに動画を埋めこめる。アニメーションは、作成ソフトとちょっとした根気さえあれば誰にでも作れる。
「難しそう」なんて思う前に、動いて楽しいホームページ作成にチャレンジしてみよう。

1 ストリーミングビデオ（P.198）

目標はこんなページだ！

専用のサーバーがなくても手軽にストリーミングビデオが楽しめるQuickTime
3.0J を使って、ホームページでビデオを見られるようにする。今回作るペー
ジでは、左側のサカナのボタンを押すとビデオが再生される。

今回、例として作成してみるのは右の画面のようなようなものだ。これは、アクアリウムについて解説しているページなのだが、3 つの機能が組み込まれている。もちろん、これはあくまでも例で、自分でさらにいろいろ追加することもできる。また、このページは誰にでも作りやすいよ
うにスクリプトなどのプログラミングは必要ない
ようにしてある。この集中企画を読めば、このページにあるようなコンテンツが自分でも作れるようになるのだ。また、このサンプルページはhttp://internet.impress.co.jp で見られるので、参考にしてほしい。

3 GIFアニメーション

2 インタラクティブな仕掛け（P.205）

動くコンテンツの中でも最も手軽に作れるGIF アニメーションを使って宣伝用のバナープレートを作ってみる。自分のページにリンクしてもらうときはこれを使ってもらうのもいいだろう。

（P.202）マクロメディアのFlash 3Jを使ってインタラ
クティブなボタンを作ってみる。今回作る
ページでは、マウスカーソルがボタンの上に来ると絵が変わったり、クリックすると音が鳴ったり、ビデオが再生されたりする。

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

INTERNET magazine 1998/10

193これだけあれば準備 OK！
ジタルビデオのメリットだ。特にアナログからデジタルへの変換はカメラ内で行われるため、アナログ記録の場合のように取り込み機材によって画質が左右されることもない。
ただし、デジタルデータで取り込む場合には、IEEE1394 というイ
ンターフェイスに対応したビデオキャプチャーカードが必要で、現在のところコスト的にはアナログよりも高価だ。ただし、多くのデジタ
ルビデオはアナログ出力（ビデオ出力）もできるので、安価なアナロ
グ取り込み装置も使える

さっそく動くホームページを作ってみようと言いたいところだが、その前に動画やアニメーシ
ョンの作成にはどんなハードウェアやソフトウ
ェアが必要なのだろうか？

ここでは、アナロ

グ記録とデジタル記録に分けて、撮影に必要なビデオカメラから動画をパソコンに取り込むために必要なキャプチャーカードまでの代表的な機材を紹介するほか、簡単にアニメーショ
ソニーのデジタルビデオカメラ「DCRPC10」（オープン価格）。

ンを作成できるソフトもあわせて紹介する。

動画を取り込む
キャプチャーカード

ら、借りることも不可能ではないするためにはオプションのソフトウだろう（海外旅行用の短期レンタ

ェア「LS-10W」が必要）。また、ルという手もある）。その意味では、

必要なら、数回に分けて撮影した

動画取り込みボードの多くは、撮影機材には、大きく分けてデ最も入手しやすい撮影装置だと言ものをつなぎ合わせて長い動画を作

ビデオキャプチャーカードと呼ばれジタル記録のものとアナログ記録のえる。なお、8ミリビデオを使う場ることもできる。

る拡張カードだが、プリンターポー

ものがある。いま多くの家庭にあ

合には、あとで紹介する取り込み

また、デジタルカメラを使う場合

トに接続するような簡易型のもの

る8ミリビデオは、アナログ記録の装置で、アナログビデオ入力機能には、パソコンとケーブル1本で接もある。また、デジタルビデオ用にものだ。これに対してDVと呼ばれのあるものを選択する。

続でき、別途ビデオキャプチャー

はIEEE1394（最大 400Mbps のるデジタルビデオや動画記録のできカードなどの取り込み機材がいらな

データ転送ができる高速シリアルイ

るデジタルカメラなどはデジタル記

いというメリットもある。長い動画

ンターフェイスの規格）インターフ録だ。

は扱えないが、低予算で動画を使ェイスカードを使うが、いまのとこ

いたいという場合には検討の価値

ろ、ハードウェアとデジタルビデオはある。

専用取り込みソフト、さらには編

撮影用ビデオカメラ

インターネットで公開するような動画データは、あまりクオリティーを高くできないので（クオリティー

集ソフトがパッケージになった製品を高くするとファイルサイズが大きがほとんど。以前に比べて安くな

くなってしまう）、撮影機材には高価なものを使う必要はない。たとえばHi8 でない8 ミリビデオでも十ってきたとは言え、価格的にはまだまだ高価だ。

ソニーの 8 ミリビデオカメラ「 CCDTRV95K」（オープン価格）。

GV-VCP/PCI（アナログ用）分に使える。
まとめると、次ぎの3つの選択肢があげられる。

8ミリビデオ（アナログ録画）

動画撮影機能付き
デジタルカメラ（デジタル録画）
最近のデジタルカメラでは、短アイ・オー・データ機器のGVカシオのデジタルカメラ「 QV-770」（5,3000円）。

いながら、動画撮影を行う機能を

VCP/PCIは、低価格のビデオキャ
プチャーカードだ。メーカーの希望小売価格で14,800 円と非常に安デジタルビデオ（デジタル録画）

最も手軽に動画を記録できる撮持つものが増えてきた。たとえば、

影機材だ。現在ではかなり普及しカシオのQV-770 では1 回に約 3.2ていると思われるので、持っている

秒間の動画撮影機能があり、簡単

記録をデジタルで行うため、撮う。ただし、入力した動画をPC人も多いだろうし、友達や親戚にな動画ならこれでも十分撮影に堪影してからパソコンに取り込むまでのモニターの中で表示させるには、1人ぐらいは所有者がいるだろうか

えうる（ただし動画ファイルを作成に画像の劣化が起こらないのがデDirectDraw 対応グラフィックアク

194 INTERNET magazine 1998/10

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

価で、とりあえず動画の入力ができればいいという場合には十分だろセラレーターボード（いわゆるディータタイプも含めて同期再生が可

スプレイカード）が必要だ。

動画編集／
ストリーミング化ソフト

能なため、これを使うユーザーも多動画の取り込み自体は、キャプドペーストによる編集やエフェクト

チャーボードに付属しているソフトなどの機能が使え、基本的なビデでできるが、素材のビデオが撮影

オ編集は、これだけでも十分だ。

したまま使えることはあまりなく、

もちろん、動画をストリーミング対

最低でも、必要なシーンのみを取応にする機能も持っている。購入

り出すなどの作業が必要になる。

方法はアップルのウェブサイトから

また、インターネットでの配信を考

クレジットカード支払いのみでで最後に紹介する松下インターテ

えると、取り込んだ動画をストリ

き、申し込むと電子メールでアククノの「miroVIDEO DV300」は、

ーミング再生ができるようにするソ

セスキーが送られてくる。日本語

I E E E 1 3 9 4 インターフェイスとフトも必要だ。ここでは、こうしによる解説がアップルジャパンのウ

Ultra Wide SCSI インターフェイス

た場合に利用できる動画編集ソフェブサイト（http://quicktime.

が一体になったボードと、デジタル

トを紹介する。

apple.co.jp/）にあるのでそれを参い。
Pro 版では、動画のカットアン

カノープスのビデオキャプチャー機能を持ったディスプレイカード「PWR128A」（39,800円）。

アイ・オー・データ機器のビデオ画像
キャプチャーカード「GV-VCP/PCI」（14,800円）。

MEG-VC1（アナログ用）miroVIDEO DV300（デジタル用）

メルコの「MEG-VC1」
は、
MPEG

ビデオ取り込みソフトがパッケージ

エンコード対応のビデオキャプチャ化されたものだ。ハードウェアのほーカードだ。MPEG は圧縮率が高うは、アダプテックの「HotConnect

アップルが開発したQuickTime

QuickTime 3.0のマニュアルをダウ

く、インターネットなどでも多く使8945」と同等だが、付属ソフトは

は現在バージョン3 で、再生機能

ンロード（http://ftp-info.apple.

われているビデオ圧縮形式で、こ独自のものでアダプテックのものとのみのQuickTime 3.0 は無償で手co.jp/reference/qt̲manual.html）

れが直接作成できるメリットは大は違っている。Ultra Wide SCSIイに入る（本誌のCD-ROM にも収し、 さらにユーティリティー類

きい。また、付属ソフトを使えば、ンターフェイスが一体になっている

録されている。Win版：CD-ROM（http://www.apple.com/quicktim

ウィンドウズのAVIファイルなどをのは、長時間の動画キャプチャー

【A】→ Win → Qt3、Mac 版： CD-e/developers/tools.html）もダウ

MPEGフォーマットに変換できる。

を行う際に十分な速度を確保する

ROM【A】→Mac→QuickTime3）。

ンロードしておく必要がある。特にためだ。その意味では、本格的なQuickTime 3.0 は、特別なサーバ

動画にエフェクト（効果）をかけ

デジタルビデオ編集をしたい人向け

ーを用意しなくてもキャッシュを利る「MakeEffectMovie」は必ず入の製品と言える。また、動画編集用したストリーミング再生ができ、手しておいたほうがいいだろう。な

ソフトとして定評のあるアドビのしかも画質がよい。さらにアップル

お、QuickTime は、ウィンドウズ

Premiere 4.2J が付属しているのからアクセスキーを購入（29.99ド版、マッキントッシュ版ともにPro

で、このパッケージ1つで高度な編ル）して登録すると、編集機能を版にアップグレードできるが、アッ集までできる。

持つQuickTime Pro 版として利用

プルから提供されている各種のユーできる。QuickTime はさまざまなティリティーは、現時点でマッキ

フォーマットをサポートしていて、ントッシュ版しか提供されていない

動画と音声のみならず、ほかのデものもあるので注意してほしい。

メルコのビデオキャプチャーカード
「MEG-VC1」（49,800円）。

PWR128A（アナログ用）nVIDIA のRIVA128 というチップが採用されていて、3D表示を含め

PC

デジタルの
場合

ディスプレイカードながら、ビデオ
ラフィックアクセラレーターには、

また、 同 時 に、 H T M L 版 の動画をパソコンに取り込む

カノープスの「PWR128A」は、キャプチャー機能を持っている。グ

考にしてほしい。

QuickTime Pro

松 下 インターテクノの「 miroVIDEO
DV300」（148,000 円）。動画編集ソフトの定番「Adobe Premiere」のLE版が付属している。

デジタルビデオ

デジタルビデオ
キャプチャーカード

Quick
Time Proて機能的には十分だ。もっとも、
DV端子

最近 RIVA128 はAGPx2 モードにIEEE1394
インターフェイス

対応したRIVA128ZX が出ており、カノープスからもこのチップを採用
現時点ではキャプチャー機能を持
つ製品はない）が出ているので、アナログビデオ

速度重視のシステムを持つ人にとっては、購入はちょっと待ちかもしれない。また、ビデオカードとキャプチャー機能が一緒なので拡張スロットに余裕のないユーザーに向
いている。

PC

アナログの
場合

した新しいビデオカード（ただし、アダプテックの「HotConnect Ultra 8945」（98,000 円）。Adobe Premiere などが付属していないため「miroVIDEO DV300」
より割安になっている。
すでにPremiereなど、動画編集ソフトを持っている人にはこちらがおすすめだ。

ビデオ出力端子アナログビデオ
キャプチャーカード

Quick
Time Pro

ビデオ入力端子ビデオカメラとキャプチャーカードを使って動画をパソコンに取り込む過程は図のようになる。

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

INTERNET magazine 1998/10

195

だけで自動的にアニメーションの作成ができる便利で使いやすいソフトだ。本誌のCD-ROM（CD-ROM【A】Win→Gifconst）にも収録されている。

ウィンドウズのGIF アニメーション作成
ソフトの定 番 「 GIF Construction Set」
（シェアウェア20ドル）。
動画編集ソフトの定番「Adobe Premiere 5J」（120,000円）。

Adobe Premiere

ホームページ
作成ソフト

インタラクティブ
コンテンツ制作ソフト

基 本 的 な動 画 の編 集 は動画と並んで、動くホームペー

HTML の編集をテキストエディ

QuickTime Proだけでも可能だが、ジに欲しいのがユーザーからのリク

ターだけで行う強者もいると聞く

さまざまな効果を加えるなど、本エストに反応するインタラクティブ

が、やはりホームページ作成ソフト

格的な編集作業を考えているなら、性のあるコンテンツだ。マウスカーがあったほうが便利だろう。

専用ソフトを入手しておいたほうがソルに合わせてボタンが動いたりいいだろう。アドビのPremiereは、（アニメーション）、音が鳴ったり

パソコン用の動画編集ソフトとしするようなページは、アクセスしてては定番といえる。多くの動画キ

くれたユーザーにとって非常にわかャプチャーハードウェアがりやすく、楽しいページになるだろ

Premiere 用のプラグインを付属しう。ボタンや音を作るのが面倒だている。

という人は市販の素材集を使ってこうした専用ソフトはやはり操作

それをアレンジするという手もある。

性の良さなど使い勝手がよく、特に長い動画の編集や複雑な処理では、簡易型のQuickTime などに比Macromedia Flash 3J

ホームページ作成ソフトはいくつ
マクロメディアのインタラクティブコン
テンツ制作ソフト「Flash 3J」（39,800円）。マウスカーソルを載せると動くよ
うなアニメーションを使っているホーム
ページのほとんどがこのソフトを使っている。

もあるが、フレームを含んだページの編集が直接できるものが使い勝手がよい。

Adobe PageMill 3.0J
こうした中で今回選んだのはア

GIFアニメーション
作成ソフト

ドビのPageMillだ。このソフトは、HTML の標準的な画像フォーマ

分な機能を持ち、操作も比較的簡

ホームページ作成ソフトとしても十べて作業効率がよい。たとえば、

Flash で作成したコンテンツがットであるGIF は、複数の画像を単なうえ、最新のバージョン3.0でQuickTime のエフェクト機能を使GIFアニメーションと違うところは、

1 つのファイルにまとめられる。こは、サイト管理（あるサイトに含って2 つのビデオトラックの切り替

マウスの動作などによってなんらか

れを順次再生していくとアニメーシ

まれるリンクされたページの関係をえシーンを作る場合には、ちょっのインタラクティブ性を持たせられョンになる。これを使ったのがGIF

表示して管理する機能）を持つ。

とめんどう（前半と後半部分のエるという点だ。たとえば、マウスカ

アニメーションだ。多くは、広告

また、フォトレタッチソフトとしてフェクトをかける部分を切り出しーソルがボタンの上に載ったときにプレートやプログラムのダウンロー

著 名 なフォトショップの簡 易 版て、処理を行った後にそれぞれを絵が動くといった仕掛けが簡単にドリンクを表すリンクプレートなど（Photoshop LE）が付属するのも元の位置に再びつなぎ合わせる）

作れるのだ。もちろん、単純なアニに使われている。もともとGIFは圧魅力だ。 このPhotoshop LE は、だが、Premiere では、単に2 つのメーションの作成もお手のものだ。

縮率が高く、あまり大きな画像で正式版と機能はほぼ同一で高度なトラックの間に画面切り替えの効

また、Flashのファイルは、大がなければ、アニメーションファイル

静止画の修正ができる。

かりなアニメーションでもファイルにしても、それほど転送時の負担

ただし、今回の動画のように、サイズが小さくなるため、インターはない。

最終的にQuickTime のストリーミ

ネットでの利用に向いているのも特果を置くだけでよい。

ングビデオ形式に変換する場合は、

徴 だ。 なお、 本 誌 の C D - R O M

QuickTime Pro と組み合わせて使（Win 版：CD-ROM【B】Trial →うことになる。

Win → Flash3j、Mac 版： CD-

今回は、GIF アニメーションのROM【B】Trial → Mac →作成ツールとしてシェアウェアであFlash3J）に30 日の試用期限が付

るGIF Constraction Set を使っていたトライアル版を収録したので、みた。このソフトは、ウィザード形

ぜひ実際に使ってみてほしい。

式で画像ファイルを指定していく

196 INTERNET magazine 1998/10

GIF Construction Set

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

サイト管理機能やPhotoshop LE 3.0Jまで付いているホームページ作成ソフト「Adobe PageMill 3.0J」（12,800円）。

画像編 集ソフトと素材集
このほかに必要となるものとして、画像を作成、修正するための動画の取り込みに必要なハードウェアスペック

画像編集ソフト（フォトレタッチソフト）がある。すでにホームページを作っているなら、手持ちのものがあるかもしれない。基本的に動画の取り込みや編集には、かなりのハードディスクの空き容はGIF とJPEG の入出力ができ、サイズ（解像度）や色数の変更ができればいいだろう。手軽なものと量とメモリーが必要になる。
手軽に本格的なフォトレタッチが楽しめる「PaintShop Pro 5.0」
（12,800円）。

しては、シェアウェアのペイントソ

8 ミリビデオから取り込む場合、単純に計算して「320 ×240
24bit Color」の1 フレームが230K バイトだから、たった1 秒30
フレームでも約7M バイトにもなってしまう。デジタルビデオから

フト「PaintShop Pro」が、本格取り込む場合でも、1 秒約 3.6M バイトのハードディスク容量が的なものとしては、アドビのフォト必要になる。ざっくりいうと、数秒から10 数秒の動画を数本取

レタッチソフト「Photoshop」なり込んで編集する場合、最低でも100Mバイト程度の空き容量がどがある。

必要になるというわけだ。

また、市販の素材集などがある

さらに、編集するときには、コピーや途中段階での保存が必要と便利だろう。イラストを使ったで、これらにアプリケーションの作業ファイル領域などを考える

区切り線とか、ちょっとしたボタと、150M バイト以上の空き容量が欲しいところだ。ハードディ

ンやマークはいちいち作るのも面倒なものだ。また、アニメーションなどの効果音もさすがに生録して取り込むというのも大変である。この点、素材集を使えば作業は簡単

スクの速度はなるべく高速なもの（たとえばUltraWideSCSI）がボタンやタイトルバー、アイコンなどの画像から、GIF アニメーション、サウン
ドまで、幅広く素材をそろえているイ
ンプレスの「Internetホームページ素材
集」シリーズ。

望ましい。
メインメモリーは、およそ64Mバイト程度は欲しい。編集用ア
プリケーションや取り込みソフトの動作中にスワップが起こらな
い程度は必要だろう。

になる。

アナログで
いくか
デジタルで
いくか

おすすめの機材の組み合わせはこれだ！

ここまでさまざまな機材を紹介してきたが、ここでは、これらをア

GIF Construction Set、PageMill 3.0J の4 本のソフトウェアは、ど

ナログ記録とデジタル記録にわけて、それぞれおすすめの組み合わせ

ちらの組み合わせでも利用する。予算にはこの4 本のソフトウェア代を考えてみた。基本的にはどちらの構成でも最初に紹介したサンプも含まれているので、これらのソフトウェアをすでに持っているのな

ルページは作成可能だ。また、QuickTime Pro 3.0J、Flash 3J、ら、もっと安くて済む。

本格的な動画編集をしたい！

手軽に動画で楽しみたい！

デジタルコース

アナログコース

デジタルビデオカメラ ＋

予算 21万〜●機材
取り込み機材
作成ソフト

miroVIDEO DV300
148,000円
Flash 3J
39,800円
QuickTime Pro 3.0J
4,500円GIF Construction Set
3,000円PageMill 3.0J
12,800円−−−−−−−−−−−−−−−−−−−−−−−−−

計

208,100円

8ミリビデオカメラ ＋

予算 8万〜●機材
取り込み機材
作成ソフト

GV-VCP/PCI
14,800円
Flash 3J
39,800円
QuickTime Pro 3.0J
4,500円GIF Construction Set
3,000円PageMill 3.0J
12,800円−−−−−−−−−−−−−−−−−−−−−−−−−

計

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

74,400円

INTERNET magazine 1998/10

197QuickTime
な
ら
サ
ー
バ
ー
い
ら
ず

このページでは、今回の記事の最大の目玉とも言えるQuickTime Proでのストリーミ
ングビデオの作成方法を解説する。もちろん、その前に動画をビデオカメラからパソコンに取り込むという、動くホームページ作成の一番大変な作業が待っているわけだが、これも一度手順を憶えてしまえばなんてことはない。作業を始める前に作成の工程をしっかりと把握して、ストリーミングビデオ作りにチャレンジしてみよう。

3 動画を編集する取り込んだ動画を編集する。不要な部分を削除したり、必要な部分をつなぎ合わせたりして体裁を整える。必要なら、動画編集ソフトでエフェクト（効果）をかけたりする。
注意してほしいのは、この時点では画像のフォーマットなどの変更はしないほうがよいということだ。たしかに圧縮フォーマットにすると作業の効率はよくなるが、できれば、最終段階まで、取り込んだ時点のオリジナルの2 パソコンに動画を取り込む

基本的な作業行程

クオリティーを保っておいたほうがいい。こ
こでも、編集作業が終わったらPCで再生して内容を確認しよう。

素材の中から必要な部分だけを、動画取
まず、ストリーミングビデオを作る前に、動り込みボードに付属している取り込みソフト

画を作成するための基本的な手順を把握しておを使ってパソコンに取り込む。取り込む際のこう。

注意点は、8ミリビデオなどでは再生開始直

また、素材の取り込みには実時間（1 分のビ

後に画像が乱れることがあり、また、パソコ

デオの取り込みには1 分かかる）が必要なので、ンの取り込みソフトも、指示してからすぐに

最初は数秒から数十秒程度の短いものから始めは取り込まないこともあるので、スタート地てみよう。

点より数秒前から再生を開始することだ。取り込みが終わったら、PC 側で再生して内容

4 インターネットで配信するための設定をする

を確認することを忘れずに。

1 素材をチェックする

ストリーミング再生の設定や画像のサイズなど、インターネットで配信するための設定

動画の取り込みやその後の編集では、シをする。画面のサイズは160×120〜320×

ステムにかかる負担（処理能力やハードディ

240 ピクセル程度がよいだろう。

スクの占有量）が大きいので、撮影した映像
をすべてデジタル化せず、必要なところのみを切り出して取り込むようにするとよい。もちろん、全部取り込んだあとで、不要な部分を捨てることもできるが、これは手間がかか5圧縮方式を指定して保存する（ストリーミングビデオの完成）

るしハードディスクも膨大な容量が必要にな

圧縮方式や圧縮率、フレームレートなどってしまう。そのためには、撮影画像をいっを指定をしてファイルとして保存する。最初

たん家庭用のテレビなどで見て確認し、必要のうちは、このファイルサイズと圧縮率や解な部分を調べて記録しておく（たとえばビデ

像度、フレームレートの関係がつかめないとオレコーダーのカウンター値など）とよい。

思う。また、ビデオの素材によっては、同じ圧縮率でもクオリティーが違ってくることがあるので、いろいろ試して気に入る組み合わせを見つけよう。これでストリーミングビデ
オの完成だ。

198 INTERNET magazine 1998/10

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

デジタルビデオから動画を取り込む
作業工程を把握して取り込む素材をチェックおく。

したら、さっそくパソコンに取り込んでみよう。

このためには、各クリップの中からさらに必要

ここでは、ソニーのデジタルビデオ「DCR-

な部分のみを選択しておく必要がある。まず、PC10」と松下インターテクノの動画取り込み「Capture Gallery」内のクリップをダブルクリ

ボード「miroVIDEO DV300」（以下 DV300）

ックし（q）、「Clip Info」ウィンドウ（w）右を使ったデジタルビデオ（撮影素材）のパソコ

上のボタンを押して「DV Device Control」（e）

ンへの取り込み方を解説する。

を開き、実際にクリップ画像を見ながら必要な

D V 3 0 0 付 属 の動 画 取 り込 みソフト「 D V

部分を「Trim Point」で指定する。これで取りTOOL」は、最初にビデオテープ全体を調べて、込み位置の修正ができる。このようにして、必撮影されている部分（DV TOOLではクリップと要なクリップの中からさらに必要な部分を指定呼ぶ）を全部登録する。この時点では、単に各

したうえで、取り込むのがポイントだ。

2

クリップの開始時間と終了時間が記録されるだけで、画像のキャプチャーは行われない。なお、
このクリップの登録では、テープを最初から最後（一定時間のブランクが続くまで）までを調べる
ので、その時間が必要になる。
クリップが登録されると、そこから必要なものを選んでメインウィンドウにある「Capture
Gallery」にドラッグ＆ドロップで登録していく。
最後にキャプチャーボタンを押せば、指定したクリップがすべてキャプチャーされる。ただし、

1

1 秒の動画が3.6M バイトに相当するので、不要な部分はなるべくキャプチャーしないようにして

3
グ
アナロ

アナログ8ミリビデオカメラ
から動画を取り込む
8ミリビデオからの取り込み（アナログ取り込み）では、安価なアイ・オー・データ機器のGV-VCP/PCI を使ってみた。このボードには、

3

取り込み用のソフトとして「GV-VCP Video
Recorder」が付属している。
まず、取り込みの前に、あらかじめ取り込む
シーンの数秒前までテープの位置を進めておく。
取り込みの準備ができたら、取り込みソフトを起動して「RECORD」ボタンを押す（q）。

1

録画ダイアログ（w）が表示され、ここでファイル名やフレームレート、取り込み秒数など4を指定する。まず、「ビデオ」ボタンを押して取り込むビデオのフォーマットを「24bitRGB」に指定し（e）、さらに、「圧縮」ボタンを押し「全フレーム（未圧縮）」を選択する（r）。こ
れで、取り込んだ動画がQuickTime 3.0 で読み込めるファイルとして保存される。
すべての設定をして「OK」ボタンを押すとダイアログが出る（t）。ここでビデオカメラ側の再生ボタンを押し、すぐに取り込みソフトの「OK」ボタンを押す。これで取り込みが始まる。
指定した時間になると取り込みは自動的に終了し、指定したファイル名で動画ファイル（AVI

2

ファイル）が作成される。

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

INTERNET magazine 1998/10

199

QuickTime Proで動画を編集する

ストリーミングビデオ形式に変換する⁄ ダイアログボックス左上のドロップダウンリ
ストボックスから「ビデオトラック」選択して、右側から「サイズ」選択する。次に「調節」ボ

動画素材をビデオカメラから取り込んだら、
QuickTime Pro で編集して体裁を整える。

動画の体裁を整えたら、ビデオが再生される

タンを押す。

画面の大きさやビデオをループさせるのかさせな
いのか、コントローラ（再生ボタンや停止ボタ` QuickTime Movie Playerの「ファイル」メンが付いたバー）を付けるのか付けないのかといニューから対象となる動画ファイルを開く。

ったことを決める。これらの設定が終われば、いよいよストリーミングビデオ形式に変換する。

¢ QuickTime Movie Playerの「ムービー」メニューから「情報を見る」を選択しよう。

“ 動画の中に不要な部分がある場合、その部

ƒ ムービーウィンドウの四隅に赤いマークが表

分の始まりに「スライダー」を動かす。
「シフト示される（A ）ので、これをマウスでドラッグしキー」を押しながらスライダーを動かすと、不要て、画像の大きさを希望のサイズ（ここではな部分の画像が選択状態になる。

160×120ピクセル）に合わせる。このとき、ダ
イアログボックスには、数値でサイズが表示されるのでそれを参考にしよう。
サイズを合わせたら、ダイアログボックスの「終了」ボタンを押す（B ）。
最初に、ダイアログボックス右上のドロッ
プダウンリストボックスから、「コントローラ」を選択して、「ムービーコントローラなし」を選択する。これで、再生画面にはコントローラが表示されなくなる。

£ 編集メニューから「消去」を選ぶ。これで不要な部分が削除される。同じ編集メニューにある「カット」を選んだ場合は、削除された部

A分がクリップボードに保存される。これを利用す
れば、画像の一部を別の動画ファイルに追加することもできる。また、2 つの動画ファイルをつなげたいなら「コピー」を使う。後半部分になるほうのファイルから必要な部分だけを選択して編集メニューから「コピー」を選び、前半部分の「スライダー」をファイルをつなげたい位置に動かす。これで「ペースト」を選べば画像が連結される。

B
QuickTime Proで設定する項目とファイルサイズ・画質の関係
意味

ファイルサイズとの関係

画質との関係圧縮プログラム
圧 縮 のやり方 。圧 縮 率 優 先 、 元の画像とアルゴリズムによ 転送レートや動画内容により違う。
（圧縮アルゴリズム） 画質優先などの特性がある。 り違う。

左から右にコピーアンドペースト

200 INTERNET magazine 1998/10

品質
（圧縮率）

どれぐらい圧縮するか。

圧縮率を高くするほど、ファ 圧縮率が高いほど画質は落ち
イルサイズは小 さくなるが、 る。多くの場合、細かい部分がぼけたり見にくくなったりする。
画像により限界がある。

動作（フレームレート）

1秒間に表示する画面の数。

フレームレートが少ないほどフ フレームレートが小さくなるとァイルサイズは小さくなる。
動きがぎくしゃくする。

画面サイズ
（解像度）

表示する画面の大きさ。

画面は小さいほどファイルサ
画面が小さいほど見にくくなる。
イズは小さくなる。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D⁄1「ビデオ」の「設定」ボタンを押して、圧¥ ダイアログボックス右上のドロップダウンから「プリロード」を選択し、「プリロード」と

縮 方 式 を設 定 する。 圧 縮 プログラムとして「キャッシュヒント」のチェックボックスをオン「Sorenson Video」を選び、品質は「低」を、にする。これで、ダウンロードが終了する前に再フレーム/秒には「12」を指定する。ここで設定

生が開始され、画像ファイルがWWW ブラウザ

した値でファイルサイズや画質は大きく変わってー側でキャッシュされるようになる。要するにスくる。このあたりの設定にこだわるなら、左ペー

トリーミング再生がされるようになるのだ。

ジの表を参照して最適な値を見つけてほしい。

… ムービー設定ダイアログでは、「インターネ
ットでダウンロード中に再生」をオンにし、「ムービーのヘッダを圧縮」もオンにする。

»

ダイアログを閉じたら、こんどはMovie

Playerの「ファイル」メニューから「書き出し」
を選択する。表示されたダイアログボックスの左下の項目から「ムービーからQuickTime ムービー」を選び、隣りの「オプション」ボタンを押OKボタンを押して書き出しダイアログに戻り、す。

ファイル名を入力すれば、ストリーミングビデオの完成だ。

動画の編集にPremiereを使ったら今回は、安価にストリーミングビデオ形

登録しておいてもよい）。それにはムービー

式の動画ファイルが作成できるということも作成ダイアログ（q）の「出力オプション」

あり、QuickTime Pro 3.0J を中心に解説しを使って、画面サイズ（w）やフレームレてきたが、本格的に動画を編集したいと思ート（e）を指定する。

ったらPremiere のような編集ソフトが必要になってくる。
Premiere では、1 つの作業はプロジェク
トとよばれ、これで素材の動画や最終出力3方法などをまとめて管理する。製品版の最新バージョンは5.0 だが、松下インターテク

このときには、とりあえず以下の値を指定する。

ノの動画取り込みボード「m i r o V I D E O

画像サイズ：160X120ピクセル程度（最DV300」のように1 つ前のバージョン4.2 の大でも320X240 ピクセル程度）

LE（ライトエディション）版が付属している製品もある。両者には微妙な違いがあり、

1

出力フォーマット：QuickTime ムービー

扱えるフォーマットなども違う。操作が複雑

圧縮方式：CinePack

なプログラムなので、細かい解説はマニュア

フレームレート：12 フレーム/秒

ルや参考書を見てもらうとして、ここでは圧縮率：中間QuickTime ムービーでの出力方法だけを編集が終わったら、動画ファイルを保存

Premiere LE 4.2Jをベースに解説しよう。

する。 ただし、 この時 点 ではまだPremiere は、動画や音声を時間線上に

QuickTime のストリーミングには対応して配置していき、最後にムービーを作成する。

いない。必ず、QuickTime Pro でファイル

この時点でフレームレートなどの設定を行う（あらかじめプロジェクトテンプレートとして2を開き、上記のストリーミングの設定をしておこう。

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

INTERNET magazine 1998/10

201

ボタンの完成形を確認する

Flashとは？

サカナを「シンボル」で作る

テレビなどでも使われるアニメーションは、1

ここで作成するボタンは、大きく3つの部分か` Flashを起動すると、空のムービーのウィン

コマ1コマを書いていき、それを撮影したものをらできている。「背景」と「サカナ」と「波」ドウが表示される。このウィンドウの上にあるの

連続して再生することで動きを出している。こだ。それぞれが別のレイヤー（階層）上に作らがアニメーションの動きを定義して時間経過をうした作業も、簡単な絵ならば1コマ1コマ動かれており、背景と波の動きがアニメーションにな示す「タイムライン」で、下の空白部分がアニ

すのも苦ではないが、激しい動きを付けるとか、っている。

メーションの作成領域「ステージ」になる。

変形するとかして凝り出すと大変な作業になる。
ところがコンピュータを使うと、動きの始めと終わりの絵を作るだけでその間を勝手に補完してアニメーションを作成してくれる。こうした機能を持つアニメーション作成ソフトはいくつかあるが、マクロメディアのFlash は、できあがった
アニメーションのファイルサイズが小さいインタ
ーネット向きのソフトなのだ。
このFlash は、WWW ブラウザー用のプラグインも無償で配布されていて簡単に入手できるほか、作成したアニメーションファイルをHTML

背景と波のアニメーションには、Flashでいうに埋め込むためのタグを自動で作成するツール「トゥイーン」という方法が使われている。これも含まれている。なお、本誌のCD-ROM（Winが、最初に説明したアニメーションの自動生成“ サカナを作るためには、「挿入」メニューの版：CD-ROM【B】→Trial →Win →Flash3j、機能である。つまり、変化する最初と最後のシ「シンボルの作成」を選択する。すると、シンボ

Mac 版： CD-ROM【B】→ Trial → Mac →ーンだけ作れば、その間のシーンはFlashが自動ルの名称などを指定する「シンボルプロパティ」

Flash3J）に30 日の試用期限が付いたトライア的に作成してくれるというわけだ。

のダイアログボックスが開くので、ここで作成すル版を収録したので、実際に使ってみてほしい。

Flash のトゥイーン機能には、動きを付ける「モーション」と、形を変化させる「シェイプ」

るシンボルの名前を入れ、「ビヘイビア」（属性）
として「ボタン」を選択する。

の2種類があり、背景のほうはシェイプトゥイー
ンが、波のほうにはモーショントゥイーンが使わ

Flash

れている。
ボタンになるサカナは、ボタンシンボルと呼ばれる部品形式になっており、マウスの動きに合わせて3 種類の状態（通常の状態、マウスカー
ソルがシンボルの上に来たときの状態、シンボルをクリックしたときの状態）が切り替わる。また、3本のビデオと連動させるため、動きがちょっとずつ違うボタンを3 つ作成する。

Flash

な
が い ン マ ちア
小 て を ウ ょニ
さ い 作 ス っメ でる る が とー 動 い ︒ に 上 凝のシ 画
し は に っ
ョ と が か マ 来 た
ン 連 特 も ク る ア
ボ
徴 ︑ ロ と ニタ 動 だ 非 メ 形 メ
しンーデを た ︒ 常 ィ を シ
変
に
作 イ こ
ョ
ア
成 ン こ フ の え ン
ァ
る
タ
で
し
な を
て ラ は イ
ル
ど 作
ク
み
︑ サ
の っ
テ
よ
こ
イ
が
ィ
ボ た
う
向
ブ
ズ
の
タ り
︒
︑

マウス操作に合わせて絵が動く

202 INTERNET magazine 1998/10

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D£ OKボタンを押すとシンボルの編集状態にな⁄る。シンボルを編集しているときは、このウィンンから離れている状態の「アップ」の絵だ。こ… 「ダウン」を選んでプロパティーを表示させ、「サウンドタブ」を選ぶ。左上にあるドロッドウの右側にシンボルを表す「タブ」が付く。

のウィンドウの上のレイヤーには、このほか「オプダウンボックスから先ほど読み込んだサウンドーバー」や「ダウン」、「ヒット」といった項目を選択してOKボタンを押す。これでサカナは完がある。それぞれがマウスの動きに対応している

成だ。

で作成したのは、マウスカーソルがボタ（ただし「ヒット」は特別な目的で使うものでマ
ウスの動きとは関係ない）。

¢ ここで、Flashのウィンドウ左側にある描画

ƒ 次にマウスカーソルがボタンの上に来たときツールを使ってステージに絵を描いていく。まずの絵を作ろう。マウスでレイヤーにある「オーバは鉛筆のアイコンのツール「ペン」を選択する。

ー」をクリックして選択したあと、右クリックメ

するとツールバーの下の部分にペン用の設定ボニューから「キーフレームの挿入」を選ぶ。

⁄1シーンの作成状態に戻るにはウィンドウ右の上矢印ボタン（シンボル名タブの上）を押す。

タンが表示される。虫眼鏡ボタンの下にあるペンモードから「スムース」を選択しよう。

背景を作る⁄2背景は単純な絵で、ペンで四角を枠一杯に十字線のあるウィンドウ内にマウスを使っ¥ 先ほど描いたサカナの絵がここにも表示さてサカナを描いていく。スムース機能では、線れる。これがマウスがボタンの上に来たときの絵

初のキーフレームができたら、タイムライン上でをなめらかにしてくれるので、多少でこぼこしてになる。これを変形させたり色を変えたり、泡

そこからいくつか離れた場所にカーソルを置き、しまっても問題はないし、あとからいくらでも修を付け加えるなどして違った絵を作る。

キーフレームを挿入する。もういちど、すこし離描き、その中をグラデーションで塗りつぶす。最正できる。この中を塗りつぶすので、サカナの輪

同様に、ボタンをクリックしたときの状態「ダれた場所でキーフレームを挿入しておく。つま郭線はしっかり閉じておこう。あとは、目や鰭ウン」を選択し、キーフレーム（イベントの最り、最初を含めて同じ絵のキーフレームが3つでをかきこむ。次に「バケツツール」を選択して初と最後のシーンを設定するためのしるし）をきたことになる。これで2 番目のキーフレームをサカナを好きな色に塗る。今回はグラデーショ

挿入してまた絵を変形させる。

選択し、バケツツールで別のグラデーションパタ

ンで塗りつぶした。

ーンで再度塗りつぶしを行う。

» これで動作が完成したので、次にボタンを押したときの音を付けよう。これには、あらかじめ作成したWAV ファイルが必要だ。素材集などを使うと簡単になる。音を使うためには、最初にファイルメニューの読み込みでサウンドファ
イルの読み込みを行う。

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

INTERNET magazine 1998/10

203⁄3最初と2番目のキーフレームの間にカーソル⁄7アクションの「On Release」を選び、右側を置き、右クリックメニューの「プロパティ」をの項目から「マウスダウン」を選択する。

選び、「トゥイーン設定」タブを選ぶ。このとき、トゥイーンは「なし」になっているので「シェイプ」を選び、OK ボタンでダイアログを閉じる。
すると赤い矢印が最初と2番目のキーフレームの間に入るはずだ。同様の設定を2 番目と最後のキーフレームの間に行えば、背景は完成だ。

B⁄8「Get URL」を選んで、右側の「URL」欄に「 v i d e o 0 1 . h t m 」、「 ウィンドウ」 に「FrameVideo」と入力する。

⁄4「制御」メニューから「再生」を選べば、作成したアニメーションが見られる。この上に、最初に作ったサカナを配置する。
「ウィンドウ」
メニューから「ライブラリ」を選ぶと、シンボルの一覧が表示されるので、そこからサカナを選ん⁄9もう一度プラスボタンで「Get URL」を追C

で、画像領域にドラッグしてくればよい。シン

加し、追加されたGet URLを選んで、前と同じ

ボルの大きさの変更は、シンボルを選んで右メ

く「videotext01.htm」と「Frametxt」を追加

ニューの「伸縮」で行う。この状態で、「制御」

する。OK ボタンを押してプロパティーウィンド
ウを閉じる。これで、ボタンを押したときの動作

メニューの「ボタンアクション」を選べば、サカアクションを設定する

ナの動作もプレビューできる。

の定義ができた。

本当は、サカナのボタンシンボルに動作を付けるわけだが、そのためには、HTML 側を作る必要がある。HTML ファイルのほうの解説は、この後ろのページにあるため、ここでは手順のみを解説する。
ボタンシンボルを使ってHTML ページ側に作用を及ぼすためには2 つの方法がある。1 つはURLで、これは通常のリンクと同じ働きをする。
もう1つが「FS Command」と呼ばれるもので、これはボタンシンボルがクリックされたときにムービーとして保存する

JavaScript の関数を呼び出すものだ。今回は簡波を作る

単にページを作るため、前者のURL を使う。

¤0ここまでの作業が終了したら、いったんファ⁄5波の部分は別のレイヤーにあり、これは、半⁄6ムービー内に置いたサカナのボタンシンボル

透明な波のような図形（A ）を最初にサカナのを選択し、右クリックメニューから「プロパテューから「ムービーの書き出し」使ってムービー下に置き（B ）、次のキーフレームでサカナの上ィ」を選択する（これは、ライブラリー内のボファイルを作成しよう。とりあえず、最初は設まで移動させ（C ）、その間を「モーション」のタンシンボルではなく、必ずムービーのほうにあ

定には何も手を付けなくてよい。

トゥイーンとして指定したものだ。これは背景とるシンボルで行う）。

イルをセーブする。その上で、「ファイル」メニ

この時点で、作成したFla ファイルをコピーは違うトゥイーンを使うため、別レイヤーとしな

インスタンスプロパティーのダイアログからし、残りの2 つのボタンも同様の操作で作成すければならない。また、この波はサカナの上に来「アクション」タブを選択し、ボタンが押されたる。アクションの指定では、URL 部分の数字をるので、サカナを置いたレイヤーより上（前）のときの動作を指定する。ダイアログ左側にある

02、03 と変えて設定する。わかりやすいように

レイヤーに指定する必要がある。

プラス記号のボタンを押し、その中から「Get

オリジナルに「fish01.fla/swf」というファイル

URL」を選択する。すると、リストボックス内

名を付け、他のファイルも「fish02/fish03」とにアクション（動作）が登録される。

しておく。ファイルができたら、fish02/03 のアクションに登 録 されている U R L を「video02/03.htm」と「videotext02/03.htm」に修正する。

A
204 INTERNET magazine 1998/10

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

一 番 手 軽 に作 れる動 くコンテンツと言 えば
GIF アニメーションだ。ここでは、この GIF
アニメーションを使って、リンクをしてもらうときに使う宣伝用のバナープレートを作ってみる。インパクトのあるバナープレートを作れ
ば、ホームページへのアクセスだって倍増する

アニメーションのしくみを知るかもしれない。さっそくチャレンジしてみよう。

アニメーションの基礎は「パラパラマンガ」だ。
つまり、少しずつ違って動いている絵を連続しのときに使う描画ソフトには以下のような機能のあることが望ましい。

て見ると、人間の目には連続して動いているよ

1描画の一部のカット＆ペースト機能

うに見えるわけだ。
GIFアニメーションは、手軽でプラグインやス

2描画の拡大縮小機能

クリプトを書く必要がないため、広告用やリン

3画像フィルター機能

ク用のバナープレートなどでよく使われている。
ネットスケープナビゲーターやインターネットエ

4文字の書き込み機能

ち
ょ
っ
と
し
た
工
夫
で
ア
ク
セ
ス
倍
増
！

クスプローラなどのWWWブラウザーや、ショッ
クウェーブなどのプラグインをダウンロードする

ちょっと補足すると、カットアンドペーストは

ためのリンクによく使われているので、目にした

たぶんほとんどのソフトが備えているが、できれことのある人も多いだろう。

ば、色の違いなどを使って領域を自動で選択しここでは、今回作成しているアクアリウムのてくれる機能（MagicWand などと呼ばれる機

ページにリンクをしてもらうときに使う小さなバ能）があるほうがアニメーション作成には使いやナープレートを作ってみた。この前に紹介した

すい。

Flash でもGIF アニメーションを作成できるが、また、フィルター機能

ここでは、アニメーションの基礎を学ぶという意

は、画像をあいまいにさせ味で、ほかのソフトを使って、1コマずつ描くとる「ぼかし」や逆に画像いう古典的な手法でアニメーションを作成するをはっきりさせる「シャー方法を選んでみた。

プネス」などの機能のある
もののほうが、画像をよりキレイに仕上げられる。

作業の流れをつかむ

さらに、描画の一部を選択したら、再度別の領少しずつ動いている絵を描くのは大変なよう域を選択しないかぎり、ほだが、描画ソフトの編集機能を使えば比較的簡

かのコマンド（たとえばフ単に作れる。あまり複雑な動きは難しいが、動ァイルのセーブ）を使ってかしたい部分を切り抜き、ちょっとずらして貼りも選択領域が解除されな付けてセーブするということを繰り返していけば、いものが便利だ。

サカナが泳いでいくようなアニメーションは慣れていなくとも1 時間ぐらいで作れる。

今回は、シェアウェアでユーザーも多いPaintShop

今回のGIF アニメーションの作成は、以下のPro 5.0（画面右）を使っ手順で行った。

てみた。

1描画ソフトによる各コマの作成

きる。アドビのホームページ作成ソフトである

このほかにアドビのPhotoShop なども利用で
PageMill を購入すると、Photoshop LE 3.0J

2GIFアニメーション化ソフトによる（簡易版）が付いてくるのでこちらを使ってもよ

ファイルの作成

い。

要は、手慣れた描画ソフトで絵を描き、それを使ってアニメーションを完成させるわけだ。こインターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1998/10

205

絵柄を考える

アニメーションを組み立てる“ ` で作成した画像にサカナのアニメーショ
ンを置いて、タイトルである Fish

アニメーションを作る前に、どんなものを作る
かを簡単に考えておくといいだろう。紙にザッとでいいので絵コンテのようなものを描くだけで、という文字を書き込んだら、1 枚目の絵は完成だ。
これにimage01.pcx という名前にしてセーブ今回使ったGIF Construction Set では、アニメーション作成用のウィザードがあり、質問に答えていくだけで、簡単にGIFアニメーションがする。

作成できる。

インパクトのあるバナープレートにするには画像

pcx ファイルにするのは、パレットなしでフルが何枚必要になるのかがわかるはずだ。あまり行

カラー状 態 にしておくためだ。 というのも、

き当たりばったりで作業を進めると、あとで面倒

PaintShop Proでは、フルカラーでないとフィル¢ 最初の質問は、作成するGIF アニメーショ

なことになるので気を付けよう。

ターがかけられないのだ。

ンはホームページで使うものかどうかという質問だ。これには「Yes, for use with a Web page」

また、あまり画像の枚数を多くすると、1 枚を選択する。

のGIF アニメーションにしたときにファイルサイ
ズが大きくなってしまうので注意しよう。せっか
くの宣伝用のバナープレートも、見てもらえなくては意味がない。
さて、今回は、サカナが左から右のほうに泳いでいき、枠の外に消えていくというアニメーシ
ョンを作った。このGIFアニメーションは、自分のページにリンクしてもらうときに使ってもらう
ものなので、あまりサイズを大きくせず、96 ×£ 同じ絵でサカナの部分を選択して、数ドッ

32 ドットで作成した。

ト分動かし、それをimage02.pcxでセーブする。
これを繰り返して、サカナが枠の外に消えるまで続ける。25 〜30 枚ぐらいの数になると思う。
作業としては、ずらしてセーブしていくだけなので、そんなに難しくはない。
こうしてできたのが下の画面だ。なお、この次の質問は、アニメーションを1回で終わら

例では、最後にぼやっとした部分がだんだんはせるか、それとも再生し続けるか（ループさせる

っきりしてきて、 Fishという文字になるアニ

メーションも追加されている（これにはフィルタか）というもので、これは「Loop indefinitely」（ループさせる）を選択する。

ーを使った）。

絵を描く` まずは、最初にベースとなる部分を作成しよう。96 × 32 ドットのサイズの描画領域（カンバス）を新規で作成して、それをグレーに塗る（もちろんほかの色でもよい）。その周りを白⁄ その次は、カラーパレットの使い方だ。線画と黒で塗っておくと立体らしく見える。これがや写真などの内容に応じて切り替えるが、初期絵のベースになるので、ファイル名を付けて保存

設定のままでかまわない。

しておく。

206 INTERNET magazine 1998/10

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

再 生 スピードは、 今 回 作 成 した絵 では「10hundredths」、つまり「10/100=0.1 秒」をGIFアニメーション作成のTIPS4選択した。この程度の大きさのものであれば、あまり大きな値を使う必要はない。

TIPS

1 ボタンをTIPS

3 管理しやすい

立体的に見せる

ファイル名を付ける

まず、四角を描いて好きな色で塗りつぶ

GIF アニメーションのようにたくさんの画す。この四角の上面と左面の2ドット分を塗像を扱うときは、ファイル名を01、02、03

りつぶした色より明るい色で塗る。逆に、下…… 09、10、11、……のように付けよう。

面と右面の2 ドット分を塗りつぶした色より

1、2、3、……とゼロをつけないと、1、10、

濃い色で塗る。これだけで立体的なボタンの11、…… 2、20、21、…… 3、30、31 とできあがりだ。

いうようにファイルが並んでしまい、あとの処理が面倒になってしまう。

TIPS

2 小さなボタンに¥ 最後にアニメーションの元になる画像を指TIPS

4 オリジナルの素材は

絵を描く

とっておく

定する。
「select」ボタンを押すとファイルダイ

小さなボタンに絵を描くのは難しい。こうGIFアニメーションを作るときはもちろん、アログが表示されるので、ファイルを選択していう場合には、大きな絵を描いて、それを縮動画を作るときなどにも言えることだが、オ「Open」ボタンを押す。すべてのファイルを指小してボタンと重ね合わせるとうまくいく。

リジナルの素材はそのままの状態でとってお定したら、ファイルダイアログでキャンセルボタ

このとき、縮小する前にフィルターで絵をくようにしよう。オリジナルの絵に作業途中ンを押し、この画面に戻ってから「Next」ボタ「ぼかし」ておき、縮小後に絵を「シャープ」の段階の絵を上書き保存したりしてしまうンを押す。

にするフィルターをかけると見栄えのよいボと、失敗したときにやり直しができなくなっタンになる。

てしまうのだ。

動画からGIFアニメーションが作れる「GIF Movie Gear」
今回、動画にはQuickTime ムービーを使ったが、もっと簡単に、手軽に動く
ホームページを作 りたいという人 もいるだろう。そんな人 は「GIF MovieGear」というソフトを使ってみよう。なんと、このソフトは AVI ファイルをGIFアニメーションに変換するソフトなのだ。もちろん、音声はなくなってしま
うが、画像はけっこうきれいだし、操作はいたって簡単。あっというまにGIF
アニメーションを使ったムービーが完成する。

» これでアニメーションの指定は終わりだ。

q GIF Movie Gear を起動したら、File メニ「Done」を押してウィザードを終了する。メイューの「Open」を選び、GIF アニメーシ

ンウィンドウに戻るので、「File」メニューからョンに変換したいAVIファイルを選択する。

「Save」を選んで、GIFアニメーションファイル

w ファイルを読み込むとカラーパレットにつ（拡張子はGIF）をセーブする。これで作業は終いて聞いてくるが、これは初期設定のまま了だ。

でかまわない。
「OK」を押すとAVIファイ● GIF Movie Gear 2.51（シェアウェア30ドル）
jhttp://www.gamani.com/

ルが展開され、たくさんのフレームに分けられる。このとき、ウィンドウの下にあるステータスバーには、フレーム数、ファイ
ルサイズ、28.8Kbps での読み込み時間、動作時間などが表示される。この値をよく見て、ファイルサイズが大きすぎないかをチェックしておこう。
e File メニューの「Save As」を選び、ファイル名を入力すれば、GIFアニメーショ
ンが完成する。

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

INTERNET magazine 1998/10

207これで動いて楽しいホームページの完成だ！
最後に、これまで作ってきた素材を組み合わせてアクアリウムのページを完成させよう。これまでの苦労が報われる瞬間だ。今回は、スクリプトなどは使わずに、フレームなどのHTML を駆使したページの作成法を解説する。やる気があるのなら単なるテキスト
エディターでも編集はできるが、ホームページ作成ソ
フトを使ったほうが楽に進められる。さあ、最後まで気を抜かずに動くホームページを完成させよう。

ページを作る
ここでは、ホームページ作成ソフトとしてアド

この例 では、 フレームセットのほうにビのPageMill を使って解説するが、もちろん、「main.htm」というファイル名を、表示される

ほかの編集ソフトでも問題ない。ただ、フレー

ページのほうに「head.htm」、「menu.htm」、

ムを使ったページを作成するため、フレーム編集「video0.htm」、「text0.htm」、「bottom.htm」

メインのフレーム部分を作成するができるホームページ作成ソフトを使ったほうが楽だ。フレームに対応している主なソフトとしてというファイル名を付け、それぞれのフレームに「 F r a m e h e a d 」、「 F r a m e M e n u 」、
「 F r a m e V i d e o 」、「 F r a m e T e x t 」、は、マイクロソフトのFrontPage 98、シマンテ
ックのVisualPage 2.0、日本アイ・ビー・エム` PageMill ではフレームの作成は簡単で、表「FrameBottom」といった名前を付けておく。

のホームページ・ビルダー 3.0 などがある。

示しているページに対して、「編集」メニューの

なお、「FrameVideo」という名前は、P.204で今回作成するページは、下図のように大きく
5 つのフレームから構成されている。

「フレーム」を使って自由にページを分割できる。

解 説 した F a l s h の

このとき、開いているページはフレーム内に表示「Get URL」アクショ

されるファイルとなり、下図のような別にフレーンで指定しているので、ムセットの入ったページができる。

変更してはいけない。

A“ フレームで分割するが、見た目には1 枚のページに見えるよう

B

Cにフレームの枠線は表示させず、スクロール
バーも右 図 のように

D
E「非表示」にしておく。
また、各フレームのバックグラウンド色も同じにしておく。なお、ここで背景画像を使うと、つなぎ目が目立ってしまう。

一番上はタイトル部分、一番下はリンクなどの紹介部分だ。その間は、縦横の3 つに分割されており、左側にFlash で作ったボタンが並び、

図1

素材とHTMLファイルの関係

A タイトル部分
head.htm

右側がストリーミングビデオの再生領域になっている。また、この下の部分は、再生中のビデオに応じて解説文が表示されるところだ。実際

B メニュー部分
menu.htmにページを作る場合には、ほかにメニュー代わり

Flashが組み込まれたページ

A

C ビデオ部分
video0.htmのリンクなども入るだろうが、ここは、単純に1ページのみで、Flash のボタンを押すとビデオが再生されるようになっている。これらの素材とHTMLの関係を表したのが図1だ。フレームにな②のボタンをクリックする

D

テキスト部分
text0.htm

Bってはいるが、それぞれは簡単なHTML ファイ
ルだ。

E ボトム部分
bottom.htm
GIF アニメーションが組み込まれたページ

208 INTERNET magazine 1998/10

C
D
video02.htm

E

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

video01.htm

video03.htm

QuickTime ムービーが組み込まれたページ

表 1 QuickTimeで使う主な属性タグ

メニュー（ボタン）部分を作成する

タグ名

メニュー部分にはFlashプラグインが配置されている。Flashプラグインの埋め込みタグはちょと複雑なので、Flash に付属するAfterShock というツールを使う。これは、指定したムービーを埋め込むタグを自動生成してくれる便利なツールだ。最初にPageMillを使って、指定のファイ
ル名「menu.htm」でページファイルを作成し、背景色などの指定をすませておく。

説

SRC=ファイル名明

QuickTimeムービーのファイル名を記入する

width=数値

QuickTimeムービーの横幅をピクセル単位で指定

height=数値

QuickTimeムービーの高さをピクセル単位で指定

autoplay=true/false

自動的にムービーを再生するかしないかを定義

cache=true/false

ムービーをキャッシュするかしないかを定義

controller=true/false

コントローラーを表示するかしないかを定義

loop=true/false/palindrome

ムービーの繰り返し再生をするかしないかを定義

pluginspage=URL

QuickTime がインストールされていない場合、指定したURL に（通常はhttp://quicktime.apple.com/）にアクセスさせる£ AfterShockを起動して、埋め込むムービー「fb1.swf」、「fb2.swf」、「fb3.swf」と、いま作

ビデオ部分を作成するった「menu.htm」を読み込む（下図）。これ「videotext01 〜03.htm」を用意する。

で、AfterShock で指定を行うとムービーのタグがhtmlファイルに書き込まれる。このとき、「ペ

ビデオ部分は、全部で4つのページからできてージレイアウト」タグにある「ハイパーリンク」

いる。ページにアクセスしたときはJPEG ファイのチェックボックスはオフにしておく。

ルの張り付けられたページが表示されているが、最後に「ファイル」メニューで変更を保存しこの部分も、ページの表示直後に表示される「t e x t 0 . h t m 」とボタンに応じて表示されるボタンを押すと、このフレームに「video01 〜
video03.htm」ファイルが表示される。このペてAfterShock を閉じる。

ボトム部分とタイトル部分を作成する

ージにはQuickTime のプラグインが埋め込まれており、ページがロードされるとビデオの再生が開始される。

ƒ ボトム部分には、GIFアニメーションを配置

すべてのページの背景色を同じにしておくと、する。これは、下図のように単純に図版を埋めユーザーには切り替えが見えず、今まで止まっ込むだけでよい。タイトル部分では、大きな文ていた静止画が動き出したように見えるという字を使ってタイトルなどを入れる。アクセントにわけだ。

画像などを入れてもいいだろう。

この部分にフレームを指定したリンク（これ自体はFlashムービーに埋め込まれている）を使っているため、スクリプトを使わずに動画を切り替えて表示できる。

¢ このあと、PageMill で「menu.htm」を読み込む前に、このファイルをテキストエディター

QuickTime ムービーの組み込みはPageMill

で開く。ここで、各 Flash プラグインの部分のを使えばよい。ムービーを入れたい場所にファイ前後を<!--NOEDIT--> で囲んでおく。

ルをドラック＆ドロップするだけでQuickTime

動きのあるページを作るときには用のタグを自動的に埋め込んでくれる。
（例）

これで動くホームページは完成なのだが、ここ<!--NOEDIT--><EMBED SRC="sample2.mov" width="360"<!-- Aftershock fb03.swf -->height="240" align="middle"にはいろいろなプラグインなどが配置されており、：

loop="false" cache="true" controller="false">ページとしてはちょっと重くなっている。このため、入り口になる簡単なページを作っておこう。

：<!-- EndAftershock fb03.swf --><!--/NOEDIT-->

ただ、QuickTime 用のタグにはいろいろなオ

また、このページを見るにはネットスケープナ

プションがあるので、変更する場合はエディター

ビゲーターかインターネットエクスプローラが必などで書き換える必要がある。タグの主なもの

要なこと、Flash とQuickTime のプラグインがこれは、PageMill がHTML の文法チェックをだけ表にまとめてみたので参考にしてほしい（表必要なことなどを明記しておいたほうがいいだろ

行っており、この部分が引っかかってしまうから

1）。
「video01.htm」を作成し、サイズや位置う。せっかくアクセスしてくれたのに、エラーがだ。また、AfterShock でハイパーリンクのチェの調整が終わったら、それを「video02」と出てしまっては意味がない。プラグインの入手先

ックボックスをオフにしたのも、これで生成され「video03」にコピーして、タグ内のファイル名

へのリンクなども用意しておくと完ぺきだ。

るリンクがこの文法チェックに影響するからだ。

を修正する。

＊
さて、これまで動いて楽しいホームページの作

こうしておくと、PageMill はこの部分を勝手り方を一通り解説してきた。もし、今回の記事に変更しなくなる。

テキスト部分を作成する

を読んでおもしろそうだなと思っていただけたな
ら、ぜひ動くホームページ作りにチャレンジしてみてほしい。自分でやってみるときっと動画を作⁄ テキスト部分は、背景色からみて見やすいる楽しさにやみつきになるはずだ。

色やサイズを選んでおけばよい。

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

INTERNET magazine 1998/10

209［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この 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.