Comments
Description
Transcript
マルチメディア・ネットワークの活用
＜マルチメディア＞ マルチメディア・ネットワークの活用 −マルチメディアを生かした学科紹介作り− 県立沖縄工業高等学校教諭 當 山 正 則 Ⅰ テーマ設定の理由 高度情報通信社会といわれる今日，マルチメディ アやインターネットでコンピュータを利用する人々 が増えてきた。急激に進展するコンピュータの世界 Ⅱ 研究内容 １ 研修項目 (１) Windows 98 の基本操作 (２) DTP 基礎・応用 にまで普及してきている。 (３) 表計算ソフト (４) 情報リテラシー (５) インターネット技術 本校におけるコンピュータの授業内容は，ワープ ロソフトや表計算ソフトといったアプリケーション (６) マルチメディア技術 (７) DTM 基礎 ソフトの操作方法を学習させることが多い。また， BASIC や Visual Basic などの言語を用いて基本プ (８) HTML の基礎 (９) ビデオ編集ソフト ログラムを理解させることが中心となっている。 基本的なアプリケーションソフトの操作方法やコン (10) 画像編集ソフト (11) オーサリングソフト (12) プレゼンテーション技法 が身近なものになってきており，ビジネスで使用さ れることの多かったコンピュータが，今や一般家庭 ピュータの基礎的知識・技術を習得させることは， 大事なことである。しかし，コンピュータの活用状 況を考えると，それだけでは十分といえなくなって きている。 「実習」や「課題研究」などでパソコンを利用する 場合，コンピュータグラフィックス（CG）やアニメ ーションといった画像的要素を含んだものになると 生徒の興味・関心が一段と増し，より積極的に取り 組む姿勢が伺える。日常生活で，生徒が関心をもっ ているものは，コミュニケーションの手段に使う携 ２ 研究したアプリケーションソフト (１) Access 97 データベースを定義して管理や活用するためのソ フトウェア。 (２) Direct CD 2.5 CD−Ｒまたは CD−RW メディアへ書き込むため のソフトウェア。ウィザード（ガイド機能）で簡単 に書き込み処理ができる。 (３) Director ６J 帯電話・PHS・ポケットベルなどの通信機器や有名 アーチストの音楽を鑑賞するめの CD・MD（などの 文字やグラフィックス，音声などの素材を組み合 オーディオ機器と音楽ソフト，娯楽の目的に使うゲ わせて，まとまったアプリケーションを開発するた ーム機器・ゲームソフトなどである。これらはマル チメディア，情報通信といった分野の最先端の技術 めのオーサリングソフト。 (４) Dream Weaver J である。最先端のコンピュータ利用技術を授業でも 学ぶ機会が増えれば，生徒の学習意欲も一層高まる 気がする。 ホームページを作成するためのソフトウェアでタ イムライン機能によって，Java Script を記述しな くても Dynamic HTML アニメーションを作成する ここで，本研修を機会にマルチメディアやネット ワークについて理解を深め，最先端の知識と技術を ことができる。 (５) DV gate アセンブル 1.3 習得したいと思った。私自身の力量を高め，実践力 を身につけることで，生徒も授業により興味・関心 動画ファイルを編集することができる。複数の AVI ファイルを１本の映像に連結することができる。 また，AVI ファイルを MPEG１ファイルへ変換する をもつことができることと思い，本テーマを設定し た。本研究では，マルチメディアを生かして県内工 業高校の「学科紹介」作りを中心に取り組みたい。 ことができる。 (６) DV gate motion 1.3 - 361 - デジタルビデオカメラで撮影した映像などをコン ピュータへ取り込むことができる。また，AVI ファ (16) Power Point 97 文字，グラフィックス，静止画，動画などを交え イルをビデオ機器へ出力することもできる。 (７) Excel 97 た説明資料を作成するためのプレゼンテーションソ フト。 (17) Premiere 5.1 Ｊ 表計算ソフトで作表や計算の処理を主目的として いるソフトウェア。 (８) Internet Explorer 5.0 ビデオ映像をパソコンで編集する時に使うソフト ウェア。ノンリニアビデオ編集（デジタルによるビ インターネット上の Web ページ（ホームページ） をブラウズ（閲覧）するためのソフト。ブラウズす るだけでなく，HTML エディタとしても使うことが できる。 (９) ドレミ BOX 1.5 デオ編集）なので，画質の劣化もほとんどなく手軽 に高品質な映像作品を完成させることができる。 (18) Score Grapher Lite 1.0 演奏したい曲の楽譜を見て，マウス操作で音符を １つずつ入力する。パソコン画面上の五線譜に音符 を入力するだけで，演奏してくれるＤＴＭ（Desktop Music）用のソフト。 楽器を弾くことができなくても，マウス操作で自 由に演奏することができる。ポップスやロックなど のジャンルを選択して,リズムを鳴らしながらピア ノなどの鍵盤を適当にマウスでクリックするだけで， アレンジ曲を作ることができる。 (10) Light Wave 3D 5.6 モデリングを担当する「Modeler」と，アニメー (19) Visual Basic 6.0 オブジェクト指向のプログラミング言語でグラフ ィックスソフトの感覚で Windows アプリケーショ ンの画面設計ができる。 (20) Word 98 ワープロソフト。ワープロ機能だけでなく，DTP （ビジュアルな文書を作成・印刷）や HTML エデ ション，レンダリングを担当する「Layout」のふた つのアプリケーションから成り立っている 3DCG ィタ（ホームページ作成） ，ワードアート（文字列に 特殊効果を付ける）などの機能がある。 アニメーション統合ソフト。 (11) サウンドレコーダー Windows 98 のアクセサリにプリインストールさ れているソフトウェア。サウンドを再生したり wav ３ 工業高校の「学科紹介」の作成 (１) 作成のねらい 形式で録音（保存）することができる。 (12) ペイント Windows 98 のアクセサリにプリインストールさ ① アプリケーションに関係なく，パソコンから「学 科紹介」を見ることができるように，Web ページ形 れているソフトウェア。グラフィックス（絵）を描 くことができる。簡単な図形を描くだけでなく，GIF 式で作成する。文字表示するだけでなく，写真やビ デオ映像，音楽，ナレーションなどを多く取り入れ や JPEG など他のファイル形式で保存することがで て見やすいものにする。 きる。 ② CD−ROM やホームページなどのメディアに のせて，高校入学希望者や一般の人たちに対して工 業高校を PR できるようなものにする。 (13) Photo Editor 3.0 機能がシンプルで使いやすいフォトレタッチソフ ト。デジタルカメラで撮影した写真を自動調整した り，透過 GIF なども簡単に作ることできる。 (２) 作成するための使用環境 ① パソコン (14) Photo Shop 5.5 フォトレタッチソフト（写真に後から手を加えて ・SONY VAIO PCV−S720 修正するためのソフト）。出版や印刷，デザインなど の分野で，プロ向けにも広く使われている。機能が ・INTERGRAPH TDZ−2000 ・NEC PC−FN20C 豊富で充実しているので使いこなすのが大変である。 ・COMPAQ DESKPRO6000 ・EPSON LC23A1800 (15) Photo Deluxe 2.0J ホームユース向けフォトレタッチソフト。家庭用 とあって，操作方法はわかりやすいステップ・バイ・ ステップ方式になっている。Photo Shop の機能を ② アプリケーションソフト ・Word 98 Web ・Photo Editor 限定して価格を１万円強に抑えている。 ・Microsoft ペイント - 362 - (４) Web ページのソースプログラム ・Microsoft サウンドレコーダー ・Internet Explorer 作成した「学科紹介」の一部（HTML 言語） ・Premiere ・Photo Shop <HTML> <HEAD> ・DV gate motion ・DV gate アセンブル ・ドレミ BOX <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=x-sjis"> ・Score Grapher Lite ・Direct CD CONTENT="Microsoft Word 97"> <TITLE>フレーム「工業高校の特色」</TITLE> <META NAME="Generator" <META CONTENT="8.0.3720"> ③ その他 ・スキャナー EPSON ES−8000 NAME="Version" ・ビデオカセットレコーダー SONY WV−D9000 <META NAME="Date" CONTENT="1/23/97"> <META NAME="Template" ・デジタルビデオカメラ CONTENT="C:¥Program SONY DCR−VX1000 ・デジタルカメラ FIJIFILM FinePix700 Office¥Office¥HTML.DOT"> </HEAD> Files¥Microsoft <FRAMESET COLS="25%,75%"> <FRAME NAME="menu" SRC="menu.htm" ・フラッシュパス I−O DATA FPFDC−ADP NORESIZE> (３) 作成の方法 Web ページのほとんどは Word Web で作成した。 Word で対応していない HTML のタグは，Explorer <FRAME NAME="msg" SRC="tokusyoku.htm"> </FRAMESET> でファイルを開き，ソース表示にして，タグを直接 <NOFRAMES> <BODY TEXT="#000000" 入力・訂正を行って作成した。 文字表示だけでは見栄えが良くないと思い，ナレ VLINK="#800080" BGCOLOR="#ffffff"> <FONT FACE=" Ｍ Ｓ 明 ーションをつけた。ナレーターは，研修員の先生に LANG="JA"></FONT></BODY> 依頼し，サウンドレコーダーで録音をした。 各工業高校の「学校案内」と「学校要覧」などの </NOFRAMES> </HTML> 資料を収集し，学科の内容などについて調査した。 「学校案内」の写真をスキャナーで取り込み，画像 (５) データファイルの内容およびサイズ LINK="#0000ff" 朝 " 作成した「学科紹介」の全ファイルサイズが約 432MB。その内の 94％が映像ファイル（mpg）で ある。また，ファイル数が 221 個である。全てのペ データとして使用した。取り込み解像度を上げると 画質は鮮明になるが，データのファイルサイズが大 きくなるので試行錯誤が多かった。 実習風景とロボット競技大会は，現場へ行きビデ オ撮影を行った。ビデオ撮影は室内が多かったので， ージを見るには，約１時間かかる。 表１ データファイルの内容およびサイズ ホワイトバランスを手動で設定し画面全体が暗くな らないように気をつけ，編集しやすくするために撮 ファイルの種類（拡張子） HTML 文書 (htm) GIF イメージ (gif) Quick Time Picture (jpg) Quick Time Picture (mpg) WAV サウンド (wav) MIDI シーケンス (mid) ショートカット （lnk） 合 計 影場面等にも配慮した。 ビデオの編集は，Premiere を使って行ったが,編 集作業は思った以上に大変で時間がかかった。編集 したビデオ映像には，ドレミ BOX で作成した曲を BGM として使った。 - 363 - ﾌｧｲﾙ数（ﾌｧｲﾙｻｲｽﾞ） 71 個（約 113KB） 67 個（約 894KB） 27 個（約 605KB） 19 個（約 404MB） 35 個（約 25.6MB） １個（約 5.3KB） １個（350B） 221 個（約 432MB） (６) 動作環境 Microsoft Windows 95／98 または Windows NT 対応の解像度 640×480 以上のディスプレイ（解像 度 1024×768 ドットを推奨）。CD−ROM ドライブ 最大 24 倍速以上を推奨。 (７) ソフトの起動および操作方法 「学科紹介」の CD−ROM をパソコンの CD− ROM ドライブに挿入し,［学科紹介］をダブルクリ ックして起動する。あとは，メニューから選択をし て Web ページを開いていく。 (８) 「学科紹介」ソフトの構成図 メインメニュー 工業高校の特色 学科内容の紹介 ・機械科 ・電子機械科 ・電子科 ・情報電子科 ・情報技術科 ・電気科 工業高校一覧 ・建築科 ・設備工業科 ・ｲﾝﾃﾘｱ科 ・ﾃﾞｻﾞｲﾝ科 ・土木科 ・自動車科 ・工業化学科 ・設備ｼｽﾃﾑ科 ・ｸﾞﾗﾌｨｯｸｱｰﾂ科 ・調理科 学 科 一 覧 ・生活情報科 ・服飾ﾃﾞｻﾞｲﾝ科 学 科 紹 介 (学科ﾒﾆｭｰ) トップ画面 各学科の実習風景をビデオで紹介 ・機械科 ・電子機械科 ・電子科 ・情報電子科 ・情報技術科 ・電気科 ・建築科 ・設備工業科 ・ｲﾝﾃﾘｱ科 実 習 風 景 (学科ﾒﾆｭｰ) ・ﾃﾞｻﾞｲﾝ科 ・土木科 ・自動車科 ・工業化学科 ・設備ｼｽﾃﾑ科 ・ｸﾞﾗﾌｨｯｸｱｰﾂ科 ・調理科 校 歌 (学校ﾒﾆｭｰ) ・生活情報科 ・服飾ﾃﾞｻﾞｲﾝ科 ・ロボット競技大会 資格・検定 校歌の演奏 ・北部工業 ・美里工業 ・中部工業 ・浦添工業 ・那覇工業 ・沖縄工業 ・南部工業 ・宮古工業 ・八重山商工 リ ン ク 集 工業高校の開設するホームページへリンク ・北部工業 ・浦添工業 ・那覇工業 ・八重山商工 図１ 構成図 - 364 - (９) 実行画面（一部） ① トップ画面 CD−ROM ドライブの［学科紹 介］をダブルクリックして，最初に 表示される画面である。 ２つのフレームから構成されてお り，左側がメインメニュー欄となっ ている。８つのメニューがあり，表 示したいものをクリックして選択す る。 なお，このメインメニュー欄は， どの画面においても表示される。 画面１（トップ画面） ② 工業高校の特色 ２つのフレームから構成されてお り，右側に表示される。 工業高校と普通高校との違いを例 にあげて，工業高校の特色について 紹介している。 文字表示だけでなく，ナレーショ ンも聞こえる。 画面２（工業高校の特色） ③ 学科紹介−機械科− ４つのフレームから構成されてお り，右側上の学科メニュー欄の学科 名をクリックすれば，学科の紹介が 表示される。 全部で 18 の学科紹介を見ること ができる。 右側中のフレームが学科の紹介欄 である。写真，科の内容をまとめた 文章，教育課程が表示される。 右側下のフレームは，専門用語の 解説欄となっており，学科紹介欄の アンダーラインの用語をクリックす ると，意味などを表示する。 画面３（学科紹介−機械科−） - 365 - ④ 実習風景−電気科− ３つのフレームから構成されてお り，右側上の学科メニュー欄の学科 名をクリックすれば，実習風景のビ デオ映像が再生される。 全部で 18 学科の実習風景や作品 などビデオ映像で見ることができる。 実習の項目がタイトル表示され， 項目が変わるごとに画面に表示効果 を付けてあるので楽しく見ることが できる。また，BGM も流れる。 ロボット競技大会のビデオ映像も 見ることができる。 なお，各学科の再生時間は，２ 画面４（実習風景−電気科−） ∼３分程となっている。 ⑤ −ロボット競技大会− 右側下のフレームに沖縄県高等学 校ロボット競技大会の映像が再生さ れる。 ロボットの動きにピントを合わせ て撮影してあるので，迫力ある映像 を見ることができる。 画面５（−ロボット競技大会−） ⑥ 校歌−北部工業− ３つのフレームから構成されてお り，右側上の学校名メニュー欄の学 校名をクリックすれば，校歌の演奏 が始まる。ピアノ演奏で聞こえる。 歌詞もスクロール文字で表示される。 また，楽譜も表示される。 音楽データといえば，MIDI 形式 が多く用いられているが，MIDI 形 式の場合，パソコンの内部音源によ って音色が変わるので，WAV 形式を 採用した。 校歌は DTM（Desktop Music）パ ソコンで作成した。 画面６（校歌−北部工業−） - 366 - ⑦ リンク集 ２つのフレームから構成されてお り，右側のフレームに表示される。 高校名をクリックすれば，工業高 校で開設しているホームページへリ ンクすることができる。 現在，浦添工業高校，八重山商工 高校，那覇工業高校（グラフィック アーツ科） ，北部工業高校の４校がホ ームページを開設している。 画面７（リンク集） (10) 「学科紹介」CD−ROM 版の実物 楽貼りというアプリケーションソフトを使って， CD−ROM のラベルを作成した。 産業教育課内のスタジオを使って，カメラ撮影し た。照明に気を配りながら撮影したのが，写真１で ある。 WAV 形式から MIDI 形式に変えて，データサイズ を小さくした。そして，WAV 形式だったナレーショ ンは，容量が大きいので削除した。全体のファイル サイズを小さくすることができた。 新年度から産業教育課のホームページを開設する ので，そこに掲載していきたい。 ５ CODEC について CODEC とは圧縮・伸張技術のことで，映像をよ り少ないデータサイズに圧縮する方法である。 映像データを AVI ファイルとして出力する場合， CODEC の種類によってどう違うのか比較してみた。 なお，映像データは，再生時間が２分 30 秒のも のを使い，フレームレート（コマ数）は 30，フレー ムサイズは 320×240 ドットに設定した。 表２ 圧縮効果の比較 写真１ ４ 「学科紹介」ホームページ版の作成 インターネット上のホームページで見ることがで きるように， 「学科紹介」CD−ROM 版をもとにホ ームページ版を作成した。 データ の ファ イ ルサ イ ズを 小 さく す るた め に ， Premiere という映像編集ソフトを使って実習風景 のビデオデータを再出力した。映像サイズを 160× 120 ドットと小さくし，フレームレートは 15 コマ に落として，AVI ファイルで出力する。そして，イ ンターネットで使われている映像フォーマットの RM（Real Media）ファイルに変換する。そうす ることによって，大きな映像データのサイズを小さ くすることができる。また，校歌の音楽データを CODEC の種類 ﾃﾞｰﾀｻｲｽﾞ 圧縮時間 なし（圧縮しない） 980MB 約 10 分 Microsoft Video1 151MB 約 11 分 Cinepak Codec 111MB 約 81 分 約 ７分 SONY DV 534MB Microsoft Video1 は，圧縮効率も時間もかなり良 い。Cinepak Codec は，圧縮時間に相当かかるが， あまり映像の質が落ちないので，AVI ファイルとし て，最終的に出力する場合に用いるのが良い。 SONY DV は，圧縮効率は悪いが MPEG 形式や DV テープに出力する場合に必要なので，その時に使用 する。 AVI ファイルは Windows の標準動画ファイル形 式であるが，データサイズは大きい。そこでカラー 動画を圧縮伸張する標準形式の MPEG1 で出力する とデータサイズは 25MB に大幅減少する。 - 367 - ６ 沖縄工業高校の「学校案内」の作成 沖縄工業高校の「学校案内」（平成 12 年度）のパ ンフレットをもとに Web ページを作成した。 パンフレットと卒業アルバムの写真を画像データ として使い，Word で作成した。 実習風景やロボット競技大会のビデオ映像も見る ことができる。 文字表示が多いので，ナレーションや BGM が流 れるようにした。 (1) 「学校案内」ソフトの構成図 メニュー １教育目標 ２沿革概要 電子機械科 ３職 員 情報電子科 ４日 課 建 築 科 ５教育課程 （普通科目） 土 木 科 工業化学科 トップ画面 ６部活動 生活情報科 ７卒業生の 進路状況 サブメニュー 校 歌 ８募集定員 校長からのﾒｯｾｰｼﾞ ９本校の制服 本校の実績 電子機械科 学校行事 情報電子科 部 活 動 建 築 科 実習風景メニューへ 土 木 科 ロボット競技大会 工業化学科 10 学科紹介 11 ｻﾌﾞﾒﾆｭｰ 12 定時制課程 生活情報科 図２ 構成図 - 368 - (2) 実行画面（一部） ① トップ画面 「学校案内」の CD−ROM を CD −ROM ドライブに挿入し，［学校 案内］をダブルクリックして最初に 表示される画面である。 画面８（トップ画面） ② メニュー 12 個のメニューが表示される。 表示したいものをクリックすれば 選択できる。 メニュー内容 １教育目標 ２沿革概要 ３職員 ４日課 ５教育課程（普通科目） ６部活動 ７卒業生の進路状況 ８募集定員 ９本校の制服 10 学科紹介 11 サブメニュー 12 定時制課程 画面９（メニュー） ③ 学科紹介−情報電子科− メニューから［10 学科紹介］―［情 報電子科］の順でクリックすると表 示される。 実習風景の写真，科の紹介文，教 育課程（専門科目） ，卒業後の進路， 取得しやすい免許・資格等が表示さ れる。 画面 10（学科紹介−情報電子科−） - 369 - ７ 手引書の作成 (１) CD―Ｒへの書き込み方 CD−Ｒまたは CD−RW メディアへ書き込みする 場合，専用ソフトを使えば簡単にできる。しかし， チェック項目を間違えたりすると書き込み処理を失 敗することがある。そこで，初心者向けの手引書を 作成した。 使用するパソコン：VAIO PCV−S720 使 用 す る ソ フ ト：Direct CD 2.5 (２) ＤＴＭ入門 DTM（Desktop Music）の基礎が学習できる手引 書を作成した。楽器が弾けない人や楽譜を読むこと が苦手な人でも演奏や曲作りができる音楽ソフトを 使っている。 使用するパソコン：COMPAQ DESKPRO6000 使 用 す る ソ フ ト：ドレミ BOX， Score Grapher Lite ８ ビデオテープの作成 「学科紹介」用に作った実習風景とロボット競技 大会のビデオ映像を MiniDV テープとＶＨＳテープ に録画した。Premiere で AVI ファイルに出力し， DV gate motion を使ってテープに出力した。 Ⅲ まとめと今後の課題 今回の研修は，マルチメディアやネットワークに ついて理解を深め，知識と技術を習得することを目 標にしていた。マルチメディア関連のアプリケーシ ョンソフトを講座で学び自主研修で習得することが できた。ソフトだけでなく，パソコンや周辺機器な どの操作もマスターすることができた。習得したも のを授業等に生かしたい。 今後のコンピュータ教育は，ワープロなどの操作 は当然となり，マルチメディアやネットワークの活 用技術が重要視されてくる。コンピュータの授業で 生徒が興味・関心を強く示すものは，インターネッ ト，フォトレタッチソフトやビデオ編集ソフトの活 用である。産業教育課における生徒実習の様子を見 て感じることができた。楽しかっただけで終わらせ ることなく，学習意欲を持続させるために教材開発 や実習手引書を作る必要がある。学校現場に戻った ら，学校の設備に合ったものを早急に作りたい。ま た，最新の技術習得を目指し，どのようなソフト・ ハードがあるかなども探究し続けたい。 マルチメディアに関しては，満足できる研修がで きたが，ネットワークについては，不十分であった。 インターネットを利用したホームページやＥメール などは，操作できるようになったが，満足できるレ ベルには達していない。インターネットは，今後ま すます重要なものとなるので知識・技術の習得を高 めたい。 県内工業高校の「学科紹介」作りは，かなり苦労 した。制作作業の中で，実習風景ビデオの編集作業 に多くの時間を要した。初めての経験だったので試 行錯誤の連続だった。ビデオ編集ソフトを習得する ことも大事だったが，AVI ファイルとして出力する ためのビデオ圧縮方式について知ることがポイント だった。 また，多くのビデオ映像を CD−ROM の限られた 容量（650MB）に納めるには，AVI ファイルの形式 では無理である。AVI 形式を mpg 形式にファイル変 換すれば，問題は解決するが，その作業も容易では 1 枚の CD−ROM なかった。多くの困難を乗り越え， を完成することができたので良かった。内容や構成 など不十分な面もあると承知しているが，このソフ トを自由に公開できるようにして，工業高校の PR に役立てれば幸いである。 この研修を通して得たことは多く，大きな財産と なった。新しい知識や技術の習得だけでなく，もの 作りの大切さも体験することができた。本研修の成 果を生かして授業に役立てるとともに，さらに自主 研修を深め新しいコンピュータ活用についても研究 していきたい。 ＜主な参考文献＞ 御手洗 毅著 『編集！デジタルビデオ』 ㈱きんのくわがた 1999 Ｃ＆Ｒ研究所デジタル梁山泊編 『インターネットホームページ素材集』 ㈱ナツメ社 1999 日経パソコン編 『日経パソコン新語辞典』 日経ＢＰ社 1998 - 370 -