東京学芸大学教育実践研究支援センター紀要

第２集

pp. 59_66，2006

一斉授業におけるデジタルコンテンツ利用を支援するシステムの提案加藤直

樹*（2005 年 12 月 1 日受理）

KATO, N.; Proposal for a System that Supports Use of Digital Contents in Lectures.

ISSN 1349-9580

This paper describes a proposal for a system to support the use of digital contents, such as images and animations
that are abundant on the Internet, in lectures. This system will allow the user to collect contents from various web
pages and combine them into a single web page through a general web browser-based interface. In addition, it ispossible to save this combined information in a form suitable for use in both online and offline environments and may
be registered to a database to be shared with other teachers.
KEY WORDS : Digital Contents, The Internet, Web Browser* Center for the Research and Support of Educational Practice, Tokyo Gakugei University

1 ．はじめに

度に教育委員会、教育センター等が所有する学校教育用教材のデジタルデータベース化や、多様な学習活動

学校へのパーソナルコンピュータとインターネットを支援するネットワーク提供型の教育用コンテンツの接続環境の設置が進み、普通教室における授業におい開発・提供が行なわれた。続いて、14 年度にはコンテて、それらの活用が可能になってきた。このような中、ンツを活用した授業実践例の動画作成やカテゴリー検画像や動画をはじめ、シミュレーションなどを実現す索など児童生徒が利用しやすい画面の開発、15 年度にる Flash コンテンツやソフトウェアをも含むデジタルコ

はコンテンツをまとめたポータルサイトの開発などがンテンツを一斉授業において提示する授業方法が積極行われた。一方、デジコン事業は平成 14 年度から 16 年的に推進され、また、試みられてきている。

度に渡って行なわれた事業であり、我々はその最終年

筆者は、文部科学省による教育用コンテンツの活度に携わったことになる。

用・促進事業（通称デジコン）[ 1 ] において、近隣およこのデジコン事業が目標とするのは、すべての教師

び附属の小中学校でのデジタルコンテンツ利用授業のが、普通の授業で、コンピュータの利点を活かした授[2]に参加した。

業を行なえるようになることであり、コンピュータル

デジコン事業は、ミレニアムプロジェクトを背景にームでコンピュータに精通した教師が行なう授業や、進められた学校教育用コンテンツの開発、経済産業省生徒にコンピュータを使わせる授業ではなく、一般教の経済活性化戦略、そして、e-Japan 重点計画と関連し室に設置されたパーソナルコンピュータとプロジェクて開発・整備されてきたデジタルコンテンツの活用事タ、そしてインターネット回線を利用する授業が対象実践と記録収集を行なうプロジェクト

例を全国へ普及させることを目的とした事業である。となる（図 1 ）。この前提は、デジコン事業に限らず、学校教育用コンテンツの開発事業では、平成 12_13 年

今後のデジタルコンテンツ活用授業の一つの姿と言っ* 東京学芸大学教育実践研究支援センター

情報教育支援部門− 59 −

東京学芸大学教育実践研究支援センター紀要

図1

第２集（2006）

デジタルコンテンツを利用した授業風景像や動画を提示するだけであっても、数々の実施上のてよいであろう。
デジタルコンテンツには前述したとおり様々な種類問題点が明らかになった。この問題を解消することながある。筆者は、授業内容の理解を容易にしたり深めしには、デジタルコンテンツを活用した授業の実施を、たりするために、interactive（対話）性が高く様々な工あらゆる教師に広げていくことは難しいであろう。そ夫がされたソフトウェアの利用こそ、デジタルコンテ

こで本稿では、明らかになった問題点を紹介し、そのンツの活用であるとの考えを持っていたが、このプロ一部の解決を目指したシステムの提案について述べる。

ジェクトを通して、今まで本やビデオなどのメディアで提示していた資料に変わるものとして画像や動画を

2 ．デジタルコンテンツ活用における IT 環境の理想とコンピュータで提示することも効果があることを認識
本節では、筆者が参加したデジコン事業における授した。
従来の資料提示には、(a)全員に配るために印刷する業実践、およびその実践を通して明らかになったデジと白黒になってしまう、(b)そこで資料集等を前で提示

タルコンテンツを利用した授業の実施における問題点

しても小さくよく見えない、(c)回覧すると時間がかかについて述べる。

る、(d)そもそも重くてかさばって教室へ持っていくのが大変、という問題点があった。書画カメラの利用に

2 ．1

デジタルコンテンツを活用した授業の実践

よって(a)〜(c)は解決できるが、(d)の問題点が残ってし筆者が参加したデジコン事業では、小金井市、小平まう。また書画カメラが全教室に設置されているわけ市、国分寺市、および、学芸大附属の小中学校に協力ではない。また、実演や板書による表現には時間がかしていただき、約 120 の授業を記録した。このうち、きかるために、ビデオを利用することがあるが、ビデオちんと記録のとれたものの学年、科目の内訳を表 1 に

放映は、内容や提示のコントロールが行いにくいとい示す。また、利用したコンテンツの種別とコンテンツう大きな問題点を抱えている。これらの問題点を解決を取得・提示するための方法の割合をそれぞれ表 2 、する可能性があるのがデジタルコンテンツである。(a)表 3 に示す。なお、この割合はおおまかなものである〜(d)の問題点を解決できることは明らかで、これに加ことを断っておく。コンテンツの種別における web ペ

えて、資料提示に interactive 性を加える可能性を持ってージとは、web ブラウザで web ページを提示したものいる。ビデオテープによる映像提示と違い、コンピュである。教師の意図としては web ページに含まれる画ータによる映像提示では、話に合わせて必要とする映像や動画を提示したいという可能性はあるが、この集像ポイントへ容易に飛ばしたりすることが可能である。

計では画像や動画ではなく、web ページとして集計した。

また、ソフトウェアの利用は教師に相当のスキルが必要となるが、画像や動画の提示であれば、それほど2 ．2

デジタルコンテンツ活用授業環境の現状

ミレニアムプロジェクトでは、2005 年度の目標としのスキルなしに行なえるため、多くの教師が実践でき、て、各学級の授業でコンピュータを活用できる環境を現実的な利用方法であろう。
ところが、このプロジェクトを進めていく中で、画整備することが掲げられている。しかし、先のプロジ− 60 −

加藤：一斉授業におけるデジタルコンテンツ利用を支援するシステムの提案

表1

表2実施した授業の対象学年と教科コンテンツの種別

表3

取得・提示方法の種別調査結果

なり、デジタルコンテンツ活用授業実施における大きな問題点となった。また、各教室に持ち運べるコンピ
ュータとプロジェクタの数には限りがあり、同時に複数の教室で実施できないと言う致命的な問題点も抱えェクトで授業を実践した近隣の小中学校では、実施しることになった。

た 2004 年度の段階で、各教室へのコンピュータやプロ加えて、普通教室には一般的に暗幕は設置されていジェクタの配置、および、教室への LAN 整備は行なわない。普及型のプロジェクタを用いてきれいに見やすれていない情況であった。2003 年度終了時において、く投影するためには、暗幕は必須であり、意外な盲点東京都の各教室への LAN 整備率は 5.7%（協力 3 市平であった。

均 0.1%）との報告がされていて、この現状を裏づけて2 ．4いる。

教室でインターネットに接続できない問題

LAN の整備が行なわれていないため、多くの教師が2 ．3

教室にコンピュータが設置されていない問題

授業中にインターネットに接続できない状況で授業を

このような状況のため、授業の際には、ノートパソ行なわなければならなかった（表 3 ）。

コンとプロジェクタを毎回運び、設置しなければなら授業中にインターネットへ接続できない場合には、なかった。これは、教師 にとって非常に負担となり、授業前に提示するコンテンツをダウンロードしておかさらには、準備のために授業時間を圧迫することにもなければならない。この手間は意外に大きいものであ− 61 −

東京学芸大学教育実践研究支援センター紀要る。また、動画や FLASH コンテンツ、サーバサイドプ

第２集（2006）

・授業の環境（オンラインかオフラインか）に適した形式による保存

ログラムを利用して映像を提示しているコンテンツは、単純にはダウンロードを行なえないという問題もある。

・他の教師との共有のためにデータベースの提供

事後アンケートにも、使いたいコンテンツのダウンロを特徴としたシステムである。次に、これらの特徴にードができなかったという意見が得られた。

ついて述べる。

また、ダウンロードしたファイルが多くなると、それをファイラー（Microsoft Windows ではファイルエク

3 ．1

コンテンツ収集

スプローラと呼ばれるファイル閲覧ソフトウェア）を授業中にインターネット接続ができない場合にあら用いて選択して提示する手間も多くなり、授業の進行かじめ行わなければならないダウンロードに関する問を妨げてしまうという問題が生じた。それを回避する

題点、および、提示するときの問題点は先に述べた。

ために、あらかじめ Microsoft Power Point などのプレゼ

一方、インターネットに接続できる環境で提示をするンテーションソフトを用いてコンテンツを編集した教ときにも、URL をいちいち入力したりブックマークか師もいたが、このような作業も、特にコンピュータにら選択したりしなければならないことや、web ページ慣れていない教師にとっては負担の大きい作業である。

を開いた後に特定のコンテンツを探して表示させなければならないことといった、授業の流れを妨げかねな

2 ．4

コンテンツ探しの問題

い問題点がある。

上記のハードウェア的な問題以外に、授業に適する

そこで、Web Scrap では、web ページ上の様々なコンコンテンツを探すのが大変であったという意見が目立テンツを、一つの web ページ（Scrap シート）に集めるった。最終的に利用されたサイトは数十に上り、先にことを可能とする（図 2 左上にイメージ）。

記したような各種事業で作られたコンテンツデータベ

ある授業で提示したいコンテンツを一つの web ペーースから検索した教師もいたが、それ以外のコンテンジとしてまとめることで、ファイルの選択や URL の入ツを拾ってくる教師も多くいた。これは、コンテンツ力やブックマークの選択など、提示時のコンテンツ選集の整備がまだまだ不十分であることを示している。

択作業の負担を減らすことができる。また、web ブラ

Yahoo や Google などの検索サイトを使いこなせる教師ウザさえあれば、収集したコンテンツを見せることがならばそのようなところを用いればよいが、それ以外できる。の教師には、授業の単元やテーマから検索できるコン
3 ．2

テンツデータベースが必須であろう。

コンテンツ保存

教育情報ナショナルセンター（NICER）では多くの作成した Scrap シートは、授業の環境がインターネコンテンツ集を整備しており、今回のデジコン事業でットに接続できる環境（オンライン）なのか、接続で収集した授業実践は eCase [ 3 ] というデータベースで公きない環境（オフライン）なのかそれぞれに適した形開される。ところが、このデータベースの登録は非常式での保存を可能とする。に手間がかかり（入力情報の多さだけではなく、ユーオフライン環境で提示するためには、コンテンツをザインタフェースが非常に悪い）、多くの実践記録を集ダウンロードして外部記憶装置に保存しておく必要がめるのは難しいのではないかと感じた。

ある。逆にオンラインの場合は、インターネットを通先の理由から、検索が行ないやすく、そして、デジしてその場で表示することができる。もちろんダウン

コン活用授業を実施した教師が簡単に登録できるようロードしてしまえばオンラインでも使えるが、ダウンなデータベースの確立も大切な課題であると考える。

ロードしたコンテンツを持ち歩かなくてはならなく可搬性が落ちてしまう。したがって、ダウンロードして3 ．Web Scrap ：デジタルコンテンツ活用支援システムおく必要がないときはしなくてもよい方法を提供しておくべきである。

前節に挙げた問題を解消しなければ、デジタルコンテンツを活用した授業の実施を、すべての教師に求め3．3

データベースるのは難しい。そこで本稿では、この問題解消を目標

Web Scrap を用いて作成した Scrap シートは、それを使としたシステム Web Scrap を提案する。Web Scrap は、用する授業の単元用のコンテンツ集となる。この Scrap・WWW（web ページ）上コンテンツを一つの web ペーシートを集めておくことで、デジタルコンテンツ活用ジへ収集授業のためのデータベースとして機能すると考える。
− 62 −

加藤：一斉授業におけるデジタルコンテンツ利用を支援するシステムの提案

また、Scrap シートを利用した授業の学年、科目、単ることなく行なえるようにする。具体的には、コンテ

元名、そして対応する学習指導要領の項目、さらにはンツをダウンロードする標準的なインタフェースに合指導案として単元における該当授業の位置付け、該当わせ、web ブラウザ上に表示されたコンテンツの上で授業の構成とデジタルコンテンツの利用方法を共に保右クリックを行なうと出現するメニュー（コンテキス存できるようにする。これは、他の教師がデジタルコトメニュー）から指示できるようにする（図 2 右上）。

ンテンツを利用した授業設計の参考資料として、デーなお、文字列など複数の要素からなるコンテンツを収タベースの意義と検索性の向上を期待したものである。

集するときは、ドラッグ操作によって収集したい範囲を選択状態にし、その上で右クリックをすることにな

4．ユーザインタフェースの設計る。
コンテキストメニューからコンテンツ収集を指示す

4．1

基本ユーザインタフェース

ると、Scrap シートに貼り付ける際の形式選択を経てWeb Scrap は、多くの教師に使ってもらえるように、（図 2 右中）、Scrap シートの編集ウィンドウに貼り付け教師にとっても身近であろう web ブラウザ（IE: Microsoftられる（図 2 右下）。編集ウィンドウ上には、保存とデInternet Explore）ベースとして実装し、システムとの対ータベース登録のためのボタンがあり、それらのボタ話はすべて web ブラウザを通して行なうこととする。

ンを押すことで、各操作を行なうことができる。

コンテンツの収集も特別なソフトウェアを立ち上げ

図2

Web Scrap システムの全体像− 63 −

東京学芸大学教育実践研究支援センター紀要

4 ．2

収集インタフェースの詳細

第２集（2006）

場合はそのコンテンツ自体を収集したい場合がある。

Web ページ上のコンテンツには、文字や表、画像、そこで、Scrap ページに貼り付ける際の形式としては、動画などがある。また、リンクも収集対象となるであリンクがかけられた文字列などのコンテンツをそのまろう。次に種類別に、収集インタフェースの詳細を述

ま、リンクを付加した URL、リンク先の画像（縮小可べる。

能）や動画から選べるようにする。

a

なお、画像にリンクがかけられている場合に画像の画像
画像を収集したいときには画像の上で右クリックを上で右クリックをすると、IE の仕組み上、対象が画像になってしまう（<A … ><IMG … ></A> の <IMG … >行ない、コンテキストメニューから収集を指示する。
画像を提示する際には、最初から（他の画像と共に）をクリックしたことになってしまう）。この場合には、提示したい場合、小さい画像を見せておき、意図した後に記す選択領域の収集方法を用いる。

ときに大きく表示したい場合、説明文章などだけを見d動画せておき、意図したときに画像を見せたい場合が考え動画はリンクで埋め込まれることがもっとも多い。

られる。そこで、Scrap シートに貼り付ける際の形式とこの場合は、先に述べたリンクの収集インタフェースしては、画像そのまま（縮小可能）、画像へのリンクをを用いることになる。
一方、web ページ上に IMG タグ、EMBED タグ、付加した画像の説明（ALT タグの内容）や画像の URLから選べるようにする（図 3 ）。

OBJECT タグを用いて直接埋め込まれることもある。

s

これらのタグで埋め込まれたコンテンツの上で右クリリンク
リンクを収集したいときの手順も画像のときと同様ックを行なうと、IE の仕組み上、コンテンツ特有のコンテキストメニューが表示されてしまう。このコンテである。
リンクを収集するときの目的としては、リンク自体キストメニューを制御することはできない。そこで、を収集したい、つまり、提示する際にクリックをしてこのような場合には、動画の部分を選択領域にし、次リンク先を開きたい場合と、リンク先が画像や動画のに述べる選択領域の収集インタフェースを利用する。
動画の貼り付け形式としては、直接動画を貼り付けるものと、動画へのリンクを付加した動画の URL から選べるようにする。
f

選択領域
文字列や複数の要素からなる web ページの一部分を収集したいときには、ドラッグ操作によって収集したい範囲を選択状態にし、その上で右クリックをする。
また、複数のコンテンツをまとめて収集したい場合や、上に述べた画像にリンクがかかっているときのリンクの収集、動画の収集の際にも、それらを含む範囲を選択状態にして、この方法を用いる。
貼り付ける形式としては、選択されている部分全体を貼り付けるか、選択領域に含まれている（複数の）画像や動画、リンクを各々貼り付けるかを選択できるようにする。さらに、後者を選択した場合は、含まれているコンテンツ各々について、先のa〜dで述べた貼り付け形式を選択する。
4 ．3

保存とデータベース登録

保存は編集ウィンドウ上のボタンを押すことによって行なう。保存自体は web ブラウザの保存機能を用いており、オンライン用のときはファイルの種類が
図3

画像の貼り付け形式選択

用のときは− 64 −

名前をつけてWeb ページ、HTML のみ 、オフライン
Web ページ、完全が選択された状態で、

加藤：一斉授業におけるデジタルコンテンツ利用を支援するシステムの提案

保存用ダイアログが表示され、このダイアログを通し

5 ．2

データベース

今回、データベースは Wiki の一種である Free Styleてファイル名などを指示して、保存する。
データベースへの登録も編集ウィンドウ上のボタン

Wiki [4] を利用して実装した。一つの Scrap シートの内容を押すことで行なう。データベース登録を指示すると、を、Wiki の 1 ページとして保存する。また、索引はScrap シートが対象とする学年、科目などの情報の入Index Japan [5] を利用した。キーとして、対象学年、科力・確認が促された後（図 4 ）、データベースに登録さ目、対応する学習指導要領項目、単元名別を登録し、れる（図 2 左下）。登録に先立って、これらの情報を入それら別の一覧の閲覧と、先の Wiki による Scrap シー

力したい場合は、編集ウィンドウ上のボタンを押すこトのデータを開くことができる。なお、Index Japan にとで行なえる。

登録する際に、単元名を単語ごとに区切ることで、関連性のある Scrap シート検索の効率を向上させること
5 ．実装ができる。
ここで、Scrap シートの内容の Wiki ページ上での表

5 ．1

基本実装方法現形態は、コンテンツへのリンクが付加された文字列

Web ベースのシステムとするため、実装は JavaScript（URL）のリストとした。これは、著作権上の配慮である。

を用いた。コンテキストメニューから項目が選択され収集したデジタルコンテンツは著作権法で保護されたときに JavaScript コードを実行するようにすることている。したがって、それらを Scrap シートなど自分で、先に述べた収集インタフェースを実現した。なお、の web ページ上に配置して公開することは著作権を侵Web ブラウザ上で右クリックしたときに現れるコンテ害する可能性が大きい。著作権法第 35 条で教育上の利キストメニューの内容は web ブラウザのレジストリで用は例外となるが、これは授業を行なう者が自ら複製設定できる。

等を行ない、自らの授業で利用する場合に限られておWeb Scrap では JavaScript コードでウィンドウの生成り、他の教師への配布や、公開することは例外とならを行なっている。また、後述する Wiki との連携のためない。引用という解釈も、集めたデジタルコンテンツに HTTP 通信を直接制御する ActiveX コントロールを利が従となっているとは言いがたいため、不可能であろ用している。Microsoft Windows SP2 以降では、これらう。今回選択した方法はページ上の画像等に対してののコードが実行される際には許可の確認が求められて直リンクである。これが著作権侵害になるかどうかはしまい、操作が煩雑になる。これが嫌な場合にはこの実は明らかな答えがみつかっていない問題であるが、確認を行なわないように設定する必要があるが、セキ画像等をそのまま表示するのに比べ問題が少ない方法

ュリティが低くなるというトレードオフが発生する。

として採用した。
6 ．関連研究
デジタルコンテンツを利用した授業の実施方法に関しては石黒ら [6] や表ら [7] など多くの報告がある。また、
実践報告は関連学会で次々に発表されており、関心が高いことがわかる。森下らはデジタルコンテンツを利用した授業記録を web 上への蓄積を試みており、現場の教師たちへのインタビューを通じて、どのような情報を掲載すべきかについて報告をしている [8]。まだ調査途中の報告であるが、デジタルコンテンツ集のデータベースの設計について参考として今後の報告が期待される。
実施支援に着目すると、奥村ら [9]、川井ら [10] が、本報告同様にデジタルコンテンツの収集、提示を支援するソフトウェアの研究・開発について報告している。
奥村らは、一つのディレクトリに格納された画像など

図4

対応する指導要領項目の入力のデジタルコンテンツから web ページを生成するツー− 65 −

東京学芸大学教育実践研究支援センター紀要

第２集（2006）

謝辞

ルについて報告している。Web 上のコンテンツはそのコンテンツへのショートカットファイルをディレクトリに入れておけばよく、自らの作成したコンテンツと本 研 究 の 一 部 は 、 科 学 研 究 費 補 助 金 ・ 若 手 研 究( B )Web 上のコンテンツを同様に扱える利点がある。しか17700096 の補助によります。

し、筆者が問題と考えているコンテンツ収集に対応す
参考文献・ web サイトるショートカットを生成する方法については今後の課題となっている。川井らは web 上のコンテンツを取り込み、最終的には web ページとして出力できるツール[1] デジコン：について報告している。しかし、利用できるコンテン

http://e-school.nicer.go.jp/digicon/ digicon01.htm

ツは SCORM1.2 や LOM1.0 に対応したものが前提とな[2] わかる授業： http://it.u-gakugei.ac.jp/digicon/っており、現時点では現実的なツールとは言えない。

[3] eCase みんなで作る授業実践：

web 上のコンテンツを収集するための市販されているツールとしては紙 copi[11]がある。収集の際には Web

http://www.nicer.go.jp/ecase/[4] Free Style Wiki ： http://fswiki.poi.jp/

Scrap と同様にコンテンツ上で右クリックをするだけで[5] Index Japan: http://pitecan.com/IndexJapan/

よく、容易に収集が行なえる。しかし、本来自分用の[6] 石黒、高橋、堀田：テジタルコンテンツを活用したスクラップブックを作るためのソフトウェアであるた

授業を設計する際の留意点：日本教育工学会第 19

め、教育利用では頻繁に起こるであろう、他のコンピ回全国大会講演論文集、Vol.1、pp.339_340（2003）

ュータへのデータ移動の際には、ある程度の知識と手[7] 表、高橋、堀田：デジタルコンテンツを活用した一斉授業における発問・指示の留意点、日本教育工学間が必要となってしまう。
また、内田洋行の WebSchool Works [12] は、デジタル会第 20 回全国大会講演論文集、pp.375_376（2004）

コンテンツを利用した授業を支援するために開発され[8] 森下、瀧本、亀井、中島、遠藤、増田、黒上：教たソフトウェアであり、デジタルコンテンツの収集と師のデジタルコンテンツ使用を支援する実践記録

提示のための機能、および、データベース機能も備え、フォーマットの構築と評価、日本教育工学会第 20

Web Scrap の目的、そして機能にも非常に似ている。た回全国大会講演論文集、pp.447_448（2004）

だし、収集したデータは専用の形式で保存されるため、[9] 奥村：デジタルコンテンツの活用を支援するツー提示の際にも専用ソフトウェアがインストールされてルの開発、日本教育工学会第 20 回全国大会講演論いる環境が必要となってしまう。また、データベース

文集、pp.729_730（2004）

への格納において、その授業内容による分類などは行[10] 川井、高幣、金子、戎崎、高沖、町田、デジタル

なえないため、他の教師が参考にしたいときの検索性

データ活用ツールとしての ReKOS、電子情報通信が低いと考えられる。

学会技術研究報告、ET_104 （452）、pp.33_37（2004）

7 ．おわりに[11] WEB ページやニュース・ブログの保存なら「紙copi」： http://www.kamilabo.jp/

本稿では、筆者が参加したデジコン事業の概要と、[12] 高倉、青木、伊藤：学習コンテンツを活かす授その中で明らかになったデジタルコンテンツを利用し業・学習支援ツールの開発、日本教育工学会第 21

た授業実践記録の現状の問題点の解決を目的としたシ回全国大会講演論文集、pp.169_172（2005）

ステムについて述べた。このシステムを利用することによって、すべての教師が、普通の授業で、コンピュータの利点を活かした授業を行なえるようになるという目標に近づけるのではないかと考える。
今後は、実際の教育現場において教師の方々に利用していただくことを通して、Web Scrap の有用性を検証していきたい。また、Scrap ページの編集や再編集、提示を効率化するための制御機能を組み込むことを行なっていきたい。

− 66 −