公立はこだて未来大学 2012 年度 システム情報科学実習
グループ報告書
Future University Hakodate 2012 System Information Science Practice
Group Report
プロジェクト名
小学生のためのエデュテインメントシステム開発プロジェクト
Project Name
Development of Edutainment System for Elementary School Students
グループ名
システム班
Group Name
System Group
プロジェクト番号/Project No.
6-B
プロジェクトリーダ/Project Leader
1010171
岡村卓磨
Takuma Okamura
グループリーダ/Group Leader
1010148
厚谷圭佑
Keisuke Atsuya
グループメンバ/Group Member
1010061
森澤勇大
Yudai Morisawa
1010148
厚谷圭佑
Keisuke Atsuya
1010216
北信生
Nobuo Kita
指導教員
山本敏雄
原田泰
Advisor
Toshio Yamamoto Yasushi Harada
提出日
2013 年 1 月 16 日
Date of Submission
January 16, 2013
概要
「小学生のためのエデュテインメントシステムの開発」である。ここ
本プロジェクトの目標は、
でいう「エデュテインメント」とは、「教育/education」と「娯楽/entertainment」を合わせ
た造語であり、遊びの中で別の何かを学ぶことができる教育分野や教育方針のことをいう。例
として、テレビ番組やゲーム、音楽などが挙げられる。我々はこのエデュテインメントを軸と
して授業カリキュラムおよびソフトウェアを開発し、実際に小学校で実践授業を行って評価を
した。例年同様、函館市立赤川小学校に協力していただき、5 年生の児童 27 人を対象に約二ヶ
月間、計８回の授業を行った。
今回、我々が本プロジェクトのテーマとするのが「伝えることの大切さ」である。例年のプロ
ジェクトでは児童の能力を純粋に育むという内容のものは少なかった。しかし今年度は、勉強
面とは違った児童の能力に重点を置き、現在の小学校の授業では養うことができない分野の教
養を育むことを目的とした実践授業を行う。今回我々は創造力と伝達力を身につけさせ、「伝
えることの大切さ」を認識させようと考えた。
以上を踏まえて開発したカリキュラムが、児童が自分たちで伝えたい物事を決定して、それを
紙芝居のシーン一枚毎に撮影・編集をして電子紙芝居を作成し、それを上映するというもので
ある。我々システム班は、授業カリキュラムを実行する上で必要となるソフトウェアを開発し
た。それは「電子紙芝居作成・再生ソフトウェア」であり、撮影した写真に絵や音声を追加する
ことで児童たちの創造力と伝達力を養うことができるという目的のソフトである。我々が開発
したシステムは「楽しさ」に重点を置いて作られたものであり、実践授業の最後に評価を行っ
たところ、全体的に良い評価が得られた。なお、児童たちが作成した電子紙芝居は実践授業実
施後に児童に配布した。
キーワード
エデュテインメント、小学生、伝えることの大切さ、電子紙芝居
（※文責: 厚谷圭佑）
-i-
Abstract
This project aims to ”Develop the Edu-tainment System for Elementary School Students”. Edu-tainment is a coined word which combined ”Education” and ”Entertainment”. Edu-tainment means educational policy and method which learn something
educational through playing. Examples include such as TV programs, games and music. This project has cooperated with Akagawa Elementary School. We gave 8 lessons
to 27 students for 2 months.
The theme of this lesson is ”importance of communication”. There were few contents
which let a bring up the ability of the elementary school students in previous projects.
However, in this year we give weight to bring up the ability of students different from
knowledge. We give plactical lesson aimed at bring up the ability that current elementary school cannot educate. We make students learn creativity and communicating
ability and recognize importance of communication.
The curriculum is made, based on the aforementioned. The broadly contents of this are
children decide things to make know themselves, and take pictures for each scene, and
edit these pictures. Then, they complete making ”e-picture story show” and screening
it. Our group developed a software, which necessary for translating the curriculum
into action. That software is make and play back electronic picture show software.
It’s purpose is educating creativity and power of communication through drawing some
illustrations and recording voice. The system we made has put emphasis on pleasure.
Result of a questionnaire at the last crasswork said good review. After that, distributed
the electronic picture story show that made children to them.
Keyword
Edu-tainment, Elementary School Students, Importance of Communication, e-Picture Story Show
（※文責: 厚谷圭佑）
- ii -
目次
はじめに
1
背景 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
総合学習 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
前年度の成果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
1.2.1
2009 年度 「意見を持ち、わかりやすく伝える」 . . . . . . . . . . . . .
2
1.2.2
2010 年度 「楽しく歴史を学んでもらう」 . . . . . . . . . . . . . . . . .
2
1.2.3
2011 年度 「地域再発見」 . . . . . . . . . . . . . . . . . . . . . . . . .
3
従来の問題点 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4
本プロジェクトの内容
6
2.1
課題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6
2.2
目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6
2.3
問題の設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6
2.4
到達レベル . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7
2.5
課題の割り当て . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8
2.6
課題解決のプロセス . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8
2.7
各人の課題の概要とプロジェクト内における位置づけ
. . . . . . . . . . . . . . .
9
2.8
年間の活動予定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10
活動内容
12
第1章
1.1
1.1.1
1.2
1.3
第2章
第3章
3.1
年間スケジュール
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
12
3.2
プログラム . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
14
3.2.1
プログラム概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
14
3.2.2
プログラム詳細 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
14
3.2.3
主な変数の説明 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
20
第4章
成果
27
4.1
システム班の成果
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
27
4.2
成果の評価 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
27
4.2.1
成果の効果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
27
4.2.2
開発言語の習得 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
28
4.2.3
システム班の問題点 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
29
4.2.4
問題の解決 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
29
第5章
まとめ
30
5.1
プロジェクトの成果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
30
5.2
自分が担当した仕事の成果および反省 . . . . . . . . . . . . . . . . . . . . . . . .
30
5.2.1
森澤勇大 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
30
5.2.2
厚谷圭祐 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
31
- iii -
5.2.3
5.3
北信生 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
今後の課題と展望
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
- iv -
33
33
Development of Edutainment System for Elementary School Students
第1章
1.1
はじめに
背景
本プロジェクトのテーマである「エデュテインメント (Edu-tainment)」とは教育（Education）
と娯楽（Entertainment）を組み合わせた造語であり、娯楽の中に教育要素を埋め込んだもののこ
とである (図 1.1)。一般に広く知られた例として以前話題になった携帯ゲーム機での脳トレーニン
グゲームがあるが、漫画やテレビ番組、音楽、ウェブサイトなどもその一つである。他にもニュー
ス解説番組や体験学習、博物館展示など大人を対象に含めたエデュテインメントも存在する。また
エデュテインメントを用いた教育の内容として国語や算数といった日本の教育機関における主要な
学習科目だけでなく、時事的な社会問題、道徳といったものを取り入れる場合もある。
本プロジェクトは毎年、エデュテインメントの考え方を用いた教育カリキュラムを構築し実践し
ている。今年度も赤川小学校の協力のもと小学 5 年生の児童 27 名を対象として、総合学習の時間
に実践授業を行う。小学校の総合学習の授業にエデュテインメントを取り入れることで、楽しく、
効率的に児童に学習してもらう方法を考える。一般に学習にエデュテインメントを用いる利点とし
てまず挙げられるのは、娯楽を楽しむことがそのまま学習へとつながるため児童が興味を持って継
続的に学習に取り組むことができるという点である。また心理的なもののみならず学習効率におい
ても、エデュテインメントを用いた教育のほうが学習内容の理解や記憶の助けになる。それに加え
て「総合学習」にエデュテインメントを用いる利点として、エデュテインメント学習においては単
一の学習教材からでも複数の異なる知識や能力を身につけることができるという点がある。総合学
習は他の一般的な授業とは異なり思考力や判断力、表現力などを学習することを目的としている授
業である。エデュテインメントを総合学習に用いることで、このような複数の能力をよりわかりや
すく児童に伝えることができる。特に赤川小学校では総合学習のテーマとして自分の考えを自らの
力で伝える能力について重点を置いているため、本プロジェクトでは赤川小学校の要望を取り入
れながら「自分の考えを伝える」能力を学習するのに有効なエデュテインメントシステムの開発を
行った。
1.1.1
総合学習
総合学習とは主に小・中学校で行われている授業の 1 つである。一般的な授業とは異なり国が内
容や目標を設定しておらず、各学校ごとに内容を工夫し異なる授業を行なっている。児童が自ら学
び考えるという自発的な力を身につけ、思考力や表現力など、幅広い分野の学習や日常生活におい
ても基盤となる「問題を自ら発見し解決する能力」をはぐくむ事を狙いとしている。
（※文責: 北信生）
1.2
前年度の成果
前年度までの本プロジェクトにおける活動の成果を、エデュテインメントという分野の従来例と
して過去 3 年分紹介する。
Group Report of 2012 SISP
-1-
Group Number 6-B
Development of Edutainment System for Elementary School Students
図 1.1
1.2.1
エデュテインメントという考え方
2009 年度 「意見を持ち、わかりやすく伝える」
グループでのプレゼンテーションの制作作業を通して、状況に合わせて情報メディアを使い分け
ることでより相手に伝わりやすくなるということを学ぶ。文字、絵、動画、音声、写真といった各
情報メディアにはそれぞれ特性があり、コミュニケーションを取るときにはその特性を活かすこと
でより意図を正確に、わかりやすく伝えることができる。そのことを学習するために、パソコンに
慣れていない小学生でも簡単にスライドを作成できるようなプレゼンテーション作成支援ソフト
ウェアを開発した (図 1.2)。これは一般的なプレゼンテーションソフトウェアから最低限の機能を
絞り出して児童が迷いにくいよう手順を一本化し、さらにキャラクターなどを用いて抵抗なくソフ
トウェアを使用できるようにしたものである。またパソコンで文字の入力や画像の加工などの操作
をすることに慣れていない児童がいる可能性があり操作の練習をする必要があったため、事前授業
で作成ソフトウェアの各情報メディア機能の部分を用いて操作方法を教えた。
問題点として、当初にプロジェクト側で用意していたテーマが赤川小学校の教員の方々から児童
たちには難しすぎるという意見が出て、多少の変更を加えることになった。テーマ設定時に児童の
ことを考えるのはもちろん、決定の前に赤川小学校側と話し合いを持つ必要がある。
1.2.2
2010 年度 「楽しく歴史を学んでもらう」
函館市立赤川開校 130 周年にちなんで、自らが通う小学校の歴史を学んでもらう。成果物として
年表というツールを選び、年表を作成するシステムを開発・実装した。授業は大きく事前授業と本
授業に分けられ、事前授業では児童が自らの通う小学校の歴史に興味があるかなどのアンケートを
実施し、現状を理解した上で本授業の授業プログラムを企画していった。本授業では、情報収集、
文書作成を児童自らの手で行った。テーマに「行事」「教科書」「服装」「学校周辺の景色」「校舎」
Group Report of 2012 SISP
-2-
Group Number 6-B
Development of Edutainment System for Elementary School Students
図 1.2 2009 年度のエデュテインメントシステム「プレゼンくん」
とし、それぞれグループごとに調査した。授業では想像で赤川小学校を書き、実物との違いを感じ
る。その後、収集した情報をもとに年表を作成した。ここで使用するソフトウェアは「デジねんく
ん」と呼ばれ、年表用編集ソフト、閲覧ソフトからなる。編集ソフトでは、「ねんぴょん」という
イメージキャラクターの音声案内により、年表のページを作成する (図 1.3)。完成したデジタル年
表はタッチスクリーンで見ることできる。
問題点として、「楽しさ」の点で調査不足が生じ、評価があいまいになってしまった。また、タ
イムスケジュール通りに進められなかった。そのため授業前はリハーサルを何度も行い、授業中は
咄嗟の事態に臨機対応に対応することが必要である。
1.2.3
2011 年度 「地域再発見」
再発見ということで、児童に地域の魅力を見つけてもらう。総合学習が「自ら課題を見つけ、自
ら学び、自ら考え、主体的に判断し、より良く問題を解決する資質や能力を育てること」と定義さ
れていることから、このテーマの決定に至った。その地域を再発見をする方法として、再発見補助
アプリを用いた地域の調べ学習を行い、調べた内容を図鑑制作ソフトを用いてまとめる。再発見補
助アプリとはアンドロイド端末を使用し、現在地を示す機能とその現在地より調べるポイントを促
すヒントを示す機能、写真を撮った場所を記録する機能、ノルマを確認する機能を備えている。図
鑑制作ソフトは、画像を入れ文字入力だけの直感的な操作でまとめることができるソフトである
(図 1.4)。また事前授業としてタイピング練習を行い図鑑制作のための準備をした。本授業の最後
にアンケートに答えてもらい授業の評価を行った。その結果として地域の魅力を共有することがで
きたと言える。
問題点として、システムを開発する上でそのシステムを開発する目的が明確でなかったことと、
授業を行う前の段階での分析に時間をかけていなかったため、終了後の評価がしにくかったことが
挙げられる。
Group Report of 2012 SISP
-3-
Group Number 6-B
Development of Edutainment System for Elementary School Students
図 1.3 2010 年度のエデュテインメントシステム「デジねんくん」
図 1.4 2011 年度のエデュテインメントシステム「あかがわずかん」
（※文責: 北信生）
1.3
従来の問題点
前年度までに本プロジェクトで提供してきた学習カリキュラムでは、児童に対して何らかの課題
を与えてそれに取り組んでもらったり、調べ物をして発表するという形式の物が多かった。そのた
め、以下の問題が生じていた。
(1) 自分で考えてものを創り上げる学習ができない
(2) 自分の感じたことや考えを伝える能力を学ぶことができない
(3) 児童の発表技能が未熟で相手に伝わりにくい
(4) 児童の集中力が続かないために長時間発表を聞く事ができず飽きてしまう
Group Report of 2012 SISP
-4-
Group Number 6-B
Development of Edutainment System for Elementary School Students
それ以外にも従来存在した問題として、メンバー間での情報共有が不十分であり目的達成の基準
があいまいであったことや、赤川小学校側との間でプロジェクトの進行状況について連携がとれて
いなかったというプロジェクト活動の進行における問題点があった。
（※文責: 北信生）
Group Report of 2012 SISP
-5-
Group Number 6-B
Development of Edutainment System for Elementary School Students
第 2 章 本プロジェクトの内容
2.1
課題
1.3 節で挙げられた従来の問題点を解決するため、児童が主体となってものを考えつくり上げる
授業にしていく。またものを作り上げる中で、自分の考えを相手に伝えることについて楽しみなが
ら学べるようにする。そして児童が発表を行う場合には発表技術の未熟さによる伝わりにくさを少
なくし、児童の集中力がきれて飽きてしまうことのないようにする。これが今回の本プロジェクト
において中心となる課題である。その他にプロジェクトメンバー間での情報共有や、赤川小学校側
との連携をしっかりととるという課題も解決しなければならない。
（※文責: 北信生）
2.2
目的
本プロジェクトでは、授業内容を「電子紙芝居づくり」に設定することで 2.1 節の課題を解決し
ていく。プロジェクト全体の目的は「伝えることの楽しさ、難しさ」を学ぶ授業を実施することで
ある。この授業テーマは赤川小学校が総合学習において「自分の考えを自らの力で伝える力を養
う」というテーマを設定しているため、私達がそのテーマをエデュテインメントという手段を用い
て実現するために設定したものである。
その中において、我々システム班は電子紙芝居作りに用いるエデュテインメントなソフトウェア
を開発することを目的とする。エデュテインメントの理念を達成するために、このソフトウェアは
ただの道具ではなく使っている児童が楽しむことができるようなものにする。また既成品を使うの
ではなく我々が自ら一からソフトウェアを作りあげるというこのプロジェクト学習の特性を生か
し、児童の反応や意見を参考にしながら改善を加えて使いやすさと楽しさを両立したソフトウェア
を開発する。
（※文責: 北信生）
2.3
問題の設定
本プロジェクトで行う電子紙芝居づくりの授業では、まずあらかじめ用意しておいた見本を見せ
て児童が電子紙芝居のテーマやストーリー、構成を考える機会を与える。そして何をテーマにする
ことで伝えたい内容について考えさせ、その後グループに分かれそれらを話し合うことで各児童の
意見を出しあい、どうすればより良いものが作れるのか児童が能動的に意見を交わすようにさせ
る。電子紙芝居を作る過程においても、児童同士に積極的に意見を出させる。これにより、自分で
考えて物を作り上げることや、自分の考えを相手に伝える能力について学ぶことができるように
する。作業においては、児童が楽しさを感じ能動的に使用できるようなエデュテインメントソフト
ウェアを用いて電子紙芝居づくりを行う。ソフトウェアの操作は簡単にし、使いやすさを優先して
機能を盛り込むようにする。電子紙芝居が完成したら発表会を行う。同じ児童の作った電子紙芝居
Group Report of 2012 SISP
-6-
Group Number 6-B
Development of Edutainment System for Elementary School Students
を発表することで発表を聞く側が飽きることなく聞け、また発表が単調にならないようにする。ま
た児童たちが未来大学に興味を持っているということで、未来大学という普段と違う環境で電子紙
芝居の発表を行うことで上映を楽しんでもらう。これにより児童が発表に集中して取り組めるよう
にする。
（※文責: 北信生）
2.4
到達レベル
まず、児童が主体となってテーマやストーリーを考える授業を実現するためには、電子紙芝居作
成という授業の進め方を検討しなければならない。授業の進め方について検討した後、進め方につ
いて赤川小学校側と連絡を取り、了承していただいたら実際の授業に入る。授業に際しては、進捗
状況について赤川小学校側と連絡を取りながら進めていく。また実際の授業においてプロジェクト
メンバーが児童のグループの担当となることで随時補佐、手助けをできるようにしておく。授業の
中で電子紙芝居を作成してゆき、完成したら発表会を行う。発表会において、児童同士が互いの作
成した紙芝居について積極的に感想や意見を出しあい、自分の考えを伝えるというのはどういうこ
とか、より伝わりやすくするためにはどうすればいいのかを学ぶことができるようにする。
また、授業で電子紙芝居を作成するために我々の手で電子紙芝居作成ソフトウェアを開発する。
ソフトウェアを開発する上では今回の対象である小学 5 年生の児童向けとして適したソフトウェア
デザインを心がける必要がある。例えば機能の操作に必要なステップを減らしたり、直感的に理解
できるよう文字情報による説明をできるだけ避けるなどの配慮をする。このソフトウェアが電子紙
芝居を作成するために持つべき機能は、以下の 4 つである。
• 児童が撮ってきた写真を取り込み、一覧表示する
• 写真に絵を描き込む
• 音声を録音する
• 音声と画像を同期させ再生する
電子紙芝居として上映される絵は、児童が役者やカメラマンとなって撮影した写真に絵を描き込み
加工することで作成する。そこで撮影した写真を取り込んで一覧表示する機能を用意し、紙芝居の
絵として加工する写真を児童自身が選択できるようにする。絵の描き込み機能は一般のペイントソ
フトにあるようなペンの色や太さを変更できるような機能を含むが、必要な機能を最低限に絞込み
操作の煩雑さをなくして児童が扱いやすいようにする。しかし単に機能を削減しただけでは市販品
をそのまま使うのと差がないため、本プロジェクト独自の機能を盛り込む必要がある。また今回本
プロジェクトが提案した授業では、電子紙芝居の発表を行うときに児童が台本を読むのではなく予
め吹き込んだ音声を再生することで児童の発表技術による差をなくすことを考えている。したがっ
てこのソフトウェアは音声を録音し、画像に合わせて再生する機能を持つ。紙芝居として上映する
ためには録音した音声と画像を対応付ける機能が必要である。以上の各機能を実装し、最後にひと
つのシステムとして統合することで電子紙芝居作成ソフトウェアを完成させる。
（※文責: 北信生）
Group Report of 2012 SISP
-7-
Group Number 6-B
Development of Edutainment System for Elementary School Students
2.5
課題の割り当て
2.4 節で述べた課題を各自の得意分野にあわせ、メンバーに掛かる負荷をできるだけ均一化でき
るようにしながら個人に割り当てた。プロジェクト全体におけるメンバーの割り当ては以下のとお
りである。
• 授業の進め方について検討し、実際の授業において児童のグループを担当する（岡村、兎内、
石橋、青砥）
• 赤川小学校の教員と連絡をとる（岡村）
• 電子紙芝居作成ソフトウェアの開発をする (森澤、北、厚谷)
授業の進め方を担当する 4 人は、毎回の授業後に各グループの進捗状況を相互に確認し次回の授業
について細かな修正などの打ち合わせを行い、児童がよりよく学びをできるように補佐をする役割
である。なお赤川小学校の 5 年生が日常的に使用しているグループが 5 つあったので、1 グループ
に 1 人担当メンバーを置くために開発においてソフトウェアの各機能のデザインを決定した後は負
担が軽くなる厚谷が児童のグループを担当することとする。
赤川小学校側との連絡は、窓口を一本化し情報のやり取りをスムーズにするためプロジェクト
リーダーである岡村が一括で担当する。ソフトウェアの開発はメンバーの中でプログラミングの比
較的得意な森澤と北、情報デザインコースである厚谷が担当することとし、以降この 3 人はシステ
ム班として上記の 4 人とは基本的に別に活動する。
また、電子紙芝居作成ソフトウェアのシステムの機能ごとに実装する担当者を分ける。これは負
荷の均一化とともに機能ごとの独立性が維持できるようにするためである。システム班の中での、
ソフトウェア開発における各個人の割り当ては以下のとおりである。
• 児童が利用しやすいようにシステム全ての画面についてデザインを行う（厚谷）
• 撮影画像の読み込みと一覧の機能を実装する（森澤）
• 画像へイラストの書き込み機能を実装する（北）
• 音声の録音機能を実装する（森澤）
• 画像と音声の再生機能を実装する（北）
システムデザインは情報デザインコースの厚谷が主導となり、わかりやすいデザインかどうかと実
際に実現できるかどうかを開発担当の 3 人で話し合いながら決定する。機能の実装においては、同
時に作業する機能は競合するところがないようにし、「この機能の実装作業をしたいが他の機能が
完成していないので取り組めない」といったような状況が起こらず作業を行えるようになってい
る。またすべての機能を 1 つのプログラムとして実行できるように統合する作業は、森澤が主体と
なり北がサポートをする形で行う。
（※文責: 北信生）
2.6
課題解決のプロセス
授業カリキュラムの考案と検討を岡村、兎内、石橋、青砥で行い、どのように電子紙芝居作成の
授業を進めていくか計画する。その後赤川小学校側と連絡を取りながら実際の授業について日程な
Group Report of 2012 SISP
-8-
Group Number 6-B
Development of Edutainment System for Elementary School Students
どの詳しい内容を固めていく。決めなければならないものの例として、それぞれの回の授業でする
作業内容や授業に必要となる物などが考えられる。授業で配布するプリントの内容など、先に決め
られるものは予め決めておく。
また、授業の計画がある程度固まった段階で紙芝居を作成するソフトウェアの開発を始める。た
だし開発の前に、システム全体のフローチャートと個々の画面の構成をある程度決めておかなけれ
ばならない。その段階でユーザとなる児童に使いやすいかどうかを考えておき、完成してから機能
の根幹部分を修正することはできるだけ少なくする。加えて、そもそもどの言語を用いてシステム
を構築するかを決める必要もある。言語の選定においては開発に当たるメンバーの使いやすさと、
意図した通りのシステムが実現できるかどうかが重要なポイントとなる。構成と使用言語を決めた
ら、開発に取り掛かる。開発における割り当ては 2.5 節のとおりであるが、進捗状況を確認する必
要があるため毎回メンバー間で知識の共有もかねて話し合いを行う。なお開発の中でプログラミン
グに関する知識が必要となった場合は、メンバーは適宜時間を見つけ勉強を重ねて知識を身につけ
る。開発を進めて各自に割り当てられた機能を実装することができれば、次に一つのシステムとし
て動作するようにプログラムを統合する作業に入る。複数の機能の連携において新たな問題が発生
する事も考えられるため、できるだけ早く個々の機能を作り上げ統合作業に余裕を持って当たれる
ようにする。授業が始まったら、児童からの実際の声を元により使いやすさを高めるために改良を
重ねる。システムの根幹に関わる部分についての修正はできるだけ少なくなるように事前に十分に
考えてからシステムを開発するが、実際の授業において児童はこちらの予想とは異なる使い方や反
応をすることも想像されるため、外観や機能追加などは簡単に変更できるようにプログラミングし
なければならない。授業を通し児童からのフィードバックを得て、児童にも使いやすいエデュテイ
ンメントなソフトウェアを完成させる。
（※文責: 北信生）
2.7
各人の課題の概要とプロジェクト内における位置づけ
森澤勇大
システムの開発においては写真を取り込み一覧表示する機能と音声を録音する機能を実装
し、さらに実装させた機能を一つのシステムとして統合する作業を行う。プロジェクト内に
おいてはシステムの基本機能の実装と連携を行い、ソフトウェアの基盤を作る役割である。
厚谷圭佑
システムの開発においては全体のフローチャートと各画面のデザインを考案する。プロジェ
クト内においては作業をメンバーに割り振り、スケジュールの調整や進捗状況を確認するな
どグループ全体の統括を行う役割である。
北信生
システムの開発においては写真に絵を描く機能と音声、絵を再生する機能を実装する。また
システムの統合作業において、複数のプログラムを組み合わせたことにより正常な動作をし
ないことが考えられるため、逐次プログラムの改善を行う。プロジェクト内においてはプロ
グラムのコーディング作業を行い、また他のメンバーが発見したバグについても修正の手助
けをする役割である。
（※文責: 北信生）
Group Report of 2012 SISP
-9-
Group Number 6-B
Development of Edutainment System for Elementary School Students
年間の活動予定
2.8
年間の活動予定において、システム班が関わるものは以下の通りである。
5月
・テーマ決定
プロジェクトを始めるにあたり、今年度の本プロジェクトが行う授業は何をテーマにし、ど
のような題材で授業を行うのか過去のプロジェクトの成果を参考にメンバー全員が各自アイ
デアを考える。その後考えてきたテーマを持ち寄り、そのうちで幾つか小学生の総合学習の
時間の授業として適しているものを話し合いにより選ぶ。
6月
・赤川小学校訪問
赤川小学校の校長、教頭、5 年生の担当教員の方と連絡を取り、小学校や児童の様子を調べ
るとともに授業をどのように進めていくか話し合うため小学校を訪問する。上のテーマ決定
にて選出したテーマを持って行き、赤川小学校側の意見を参考にしてどのようなテーマで授
業を行うか決定する。
・交流会
赤川小学校で授業を行う前に自分たちの自己紹介やプロジェクトの説明、親睦を深めること
を目的に交流会を行っう。この交流会は毎年恒例になっているが、今年も児童の様子をプロ
ジェクトメンバー自身の目で確認するために行うこととする。また本プロジェクトの説明用
紙を作成し、本プロジェクトの概要や本授業の流れを一通り説明する。児童が楽しめる見た
目、わかりやすい説明を心がける。
6, 7 月
・エデュテインメントシステム考案
実際に使うソフトにどのような機能を持たせ、インターフェイスをどのようにすれば良いか
などについて話し合い、具体的な案まで考える。案が固まったら、できるところからシステ
ムの開発を始める。
8, 9 月
・システム開発
学内のライブラリや web も参考にし学習をしながら、考案したシステムの開発に取り組む。
この期間は大半が夏季休暇期間となるので通常よりもメンバーとの連絡が取りにくいが、可
能な限り情報の齟齬をなくすように心がける。
10, 11 月
・赤川小学校にて授業
赤川小学校にて授業を行う。システム班も授業に同行し、システムトラブルに備えるととも
に児童の反応を見てシステムの改良点を見つけ随時調整を行なっていく。
Group Report of 2012 SISP
- 10 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
12 月
・最終発表の準備
最終発表に向けてスライドと原稿の作成をし、発表会場に掲示するためのポスターも作成す
る。見やすく、わかりやすくするため担当教員とも相談しながら取り組む。なお発表におい
て我々システム班は、完成したソフトウェアの実演と説明を担当する。
12, 1 月
・最終報告書執筆
プロジェクトの最終報告書を執筆する。
（※文責: 北信生）
Group Report of 2012 SISP
- 11 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
第 3 章 活動内容
3.1
年間スケジュール
本プロジェクトのグループ B の年間の活動内容は以下の通りであった。
5月
顔合わせをして自己紹介を行い、プロジェクトに対する抱負を伝えたりプロジェクト学習の
行い方について話し合った。立候補によりプロジェクトリーダーが決定し、早速赤川小学校
で行う授業のカリキュラム案を出しあうこととなった。これに際してこれまでの同プロジェ
クトで作成されたソフトウェアの調査を行い、どのようなソフトウェアを利用した授業を行
えるかを考えた。前年度のプロジェクトのプロジェクトリーダーを招いてプロジェクトの進
行で実際にどんな問題点があったかなどの質問を行い、それを踏まえてここまでに提案した
カリキュラム案の見直しを行ったり、さらなる案を出し合った。また、プロジェクト名刺用
のロゴ作りを行ったり、小学校に訪問する際の質問・確認事項、交流会についてや、赤川小
学校への連絡・最初の挨拶の日程を決定した。
6月
赤川小学校へはじめて訪問した。訪問で小学生のパソコンに対する知識のレベルや、授業カ
リキュラム案に対する教員の方の感想を教えていただき、授業のテーマの再検討をするため
の材料として役立てた。行いたい授業内容と、その授業を実現するために必要となるシステ
ムの複雑度を推測し、実現が難しい計画にならないように考慮した。これまでのプロジェク
トの成果物や参加人数を調査した結果から、今年度はシステム開発に携わる人数が比較的少
ないことが見込まれるためシンプルなシステムで実現可能で尚且つ授業としても魅力的な内
容の企画を目指した。その結果、
「映画作り」からエデュテインメントシステムらしく転じて
電子紙芝居づくりというテーマが仮決定した。また、赤川小学校での私たちの授業を受ける
クラスの児童たちとの交流会を企画・実行した。交流会で仮決定したテーマについて説明を
行い、授業についての理解を助けられるよう務めた。授業の方針がおよそ決定したのでシス
テム開発の準備に取りかかった。まずはシステムの概要をまとめるところから話し合った。
7月
システムの概要が決まったら開発言語を決める話しあいをした。システムの要件を満たせ
て、講義で習ったことがある言語や不慣れでも扱いやすい言語がよいということを条件に
して調査し話し合った結果、Java による開発を行うことになった。完成したシステムに備
わっているべき主要な機能を挙げて、システム開発グループのメンバーがそれぞれ担当する
機能を決め、開発のため必要な学習を進めた。電子紙芝居づくりのシステムの主要な機能
は、電子紙芝居を再生する機能、画像を編集する機能、音声を録音する機能、画像一覧を表
示する機能の 4 つということになった。写真を撮ってパソコンに取り込むための操作もシス
テム内で行いたい、操作説明を表示させたいといった意見があったが期限内に実装しきれる
か不安なため、開発できる余裕があれば実装するということにした。同時に中間発表と中間
報告書の準備を進めた。
8月
Group Report of 2012 SISP
- 12 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
夏季休暇期間中の計画を立てた。夏季休暇期間中、各自の担当分の開発作業を進めた。
9月
作業結果の報告と以降の開発スケジュールの修正を行った。児童が使いやすいシステムとし
ては各機能の動作の他にもデザインが重要であるとして挙げられ、システムの構造や画面構
成をデザインする作業を開始した。
10 月
各自作成したプログラムを確認し、それらをひとつのシステムとして統合することを視野に
入れた開発を進める。画像をサムネイル表示する画面から、画像を選択してボタンを押すこ
とでペイント画面へ遷移する動作を試作した。録音システムの進捗が予定より遅く、そこを
重点的に作業を行った。また、再生機能の作成も順調に行かず、録音した音声を再生して確
認しながらさらに録音し直すということができない状態で授業を行うこととなった。赤川小
学校で授業を始めて電子紙芝居づくりの作業を開始した。タイトル画面をデザインし、合わ
せてプログラミングした。授業でのシステムの利用に合わせてプログラムの仕上げを行っ
た。実際に授業でシステムを使うときは大きめのモニターへパソコンの画面を出力して見や
すいようにする。このとき画面のサイズが開発時と違ったり、モニターによって表示が変
わったりするため、各モニターとパソコンに調整が必要だった。授業でペイント機能を使っ
た児童たちの感想や途中経過を参考にすると、ペイントが難しく同じ班のメンバー全員が納
得する編集でないと作業が進みにくいという問題があることがわかった。授業時間は限られ
ており、電子紙芝居を完成するためにはもっと作業の進行を速めなくてはならなかった。そ
こで、ペイントに新たな機能としてスタンプを追加することにした。スタンプを最初から用
意するには児童が自由にペイントできるように数多くのスタンプを用意しなければならない
ため本プロジェクトでのエデュテインメントシステムにおいては現実的ではなかったため実
装しなかったが、テーマが決定し写真にどんなものを描き込みたいのかがおよそ定まってお
り、そのなかでもマウスでは描きづらいものを各班の作品に一つスタンプ化して用意し、簡
単に写真に描きこむことができるようにすることで電子紙芝居作成作業の進行の手助けをす
ることになった。スタンプを追加して改めて授業を行った。
11 月
録音機能、再生機能を仕上げた。また、プロジェクト最終発表のサブポスターの作成を進め
た。赤川小学校での授業は電子紙芝居が全グループ完成するよう授業時間を調整し作成作業
を終了した。電子紙芝居発表会を未来大学内で行うため、大学入り口から使用する講義室ま
での案内図を作成し配布した。発表会を行い赤川小学校児童との授業予定は全て終了した。
12 月
プロジェクト最終発表会の準備、および最終発表を行った。最終報告書の作成を開始した。
1月
引き続き最終報告書を作成した。また秋葉原での課外発表会に向けて準備を行った。
（※文責: 厚谷圭佑）
Group Report of 2012 SISP
- 13 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
プログラム
3.2
3.2.1
プログラム概要
電子紙芝居作成・再生プログラムは電子紙芝居を作成するために必要と考えられるペイント機能
と録音機能を備えており、これを用いて作成した電子紙芝居を視聴するための再生機能も備えてい
る。実際にシステムを実行して電子紙芝居を作成する作業を開始する前に下準備が必要である。ま
ず電子紙芝居に使用するための写真をデジタルカメラで撮影してパソコンに画像ファイルを移動す
る。電子紙芝居作成プログラムがファイルを読み込む場所は決まっているため、このときに移動先
のフォルダの場所と名前を指示する。このフォルダは photo という名前で用意している。そして、
写真は多めに用意しておかれると想定されるから、その中から電子紙芝居の作成に使用する写真を
最大 12 枚までで選び出す。選んだ写真はコピーしてまた別のフォルダにペーストする。このフォ
ルダは thumb という名前で用意している。さらに、ファイル名も指定の通りに変更する。素写真
をストーリー順に並べたとき最初に使用する写真には image00.jpg という名前をつける。その後
もストーリー順に image01.jpg、image02.jpg という様に名前をつけてゆき、最大 12 枚であるか
ら全 12 枚の写真を使用する場合は最後の写真は image11.jpg という名前とする。ここで準備が整
い、プログラムを実行して電子紙芝居の作成を開始できる。
プログラムの画面は全 5 種類であり、タイトル画面、サムネイル画面、ペイント画面、録音画
面、そして再生画面である。制作関連の作業ではサムネイル画面とペイント画面、録音画面を使用
する。再生をするときは再生画面を使用する。プログラムを実行するとタイトル画面が開き電子紙
芝居の制作をするか、再生をするかが選択できる。制作を選択するとサムネイル画面へ、再生を選
択すると再生画面へ移動する。サムネイル画面からはペイント画面または録音画面へ移動でき、そ
こからサムネイル画面に戻ることができる。サムネイル画面と再生画面からはタイトル画面へ戻る
ことができる。このプログラムの利用のおおまかな流れは次の通り。まずタイトル画面からサムネ
イル画面へ移動し、サムネイル画面で表示される事前に用意していた画像から一枚を選択してペイ
ント画面または録音画面でお絵かきや録音をするという作業をすべての画像に行い制作作業を完了
する。次はタイトル画面へ戻って再生画面へ移動して制作した電子紙芝居を再生、鑑賞する。
3.2.2
プログラム詳細
電子紙芝居作成・再生プログラムは java 言語を用いて作成した。このプログラムは 6 つのクラ
スからなり、それぞれのクラス名は Thumb クラス、Title クラス、Paint クラス、Record クラス、
jmidi クラス、ImageSound クラスとした。メインクラスは Thumb クラスである。
1. Thumb クラス
Thumb クラスの担う役割は、サムネイル画面を表示して画像の一覧表示をすることである。
サムネイル画面は電子紙芝居を作成するときに、各画像の閲覧、編集したい画像の選択を行
うための画面である。画面下方には小さく画像を並べており、それらの画像をクリックする
と画面上方にその選択された画像が大きく表示される。この状態でペイントボタンまたは録
音ボタンを押すと、それぞれペイント画面、録音画面に移動することができ、選択した画像
に対して絵を描きこんだり、音声をつけることができる。
この画面は編集作業の開始地点であるために最も頻繁に表示される。そのうえ多くの画像が
一度に表示されるが、ともに作業をする班のメンバーにもよく見えるようにしなくてはなら
Group Report of 2012 SISP
- 14 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
ないため、シンプルな機能を備え、各オブジェクトをバランスよく配置することに注意した。
次に、Thumb クラスのプログラム部分について詳しく説明する。Thumb クラスでは画像
の読み込みのため、thumb フォルダからファイルを取り出す。Thumb クラスには main 関
数があり、main 関数では Title クラスを呼ぶのみである。Title クラスについての詳細は
後述する。Title クラスから Thumb クラスが呼び出されたとき、サムネイル画面を表示
する。まず、画像を表示するために BufferedImage 型の変数に画像を読み込み格納する。
画像をクリックしたとき画像が選択されるようにするために画像を表示する位置と同じ座
標に JButton を配置し、setRolloverEnabled(false) によってマウスポインタに反応しない
ようにすることで、ポイントしたときに画像の上にボタンが重なってしまい画像が見えな
くなる状態を防いだ。各画像の下に配置したボタンは、押されたときに Image 型の変数
MainPicture にそのボタンの画像を代入する。加えて、String 型の変数 fileMainS と同じく
String 型の変数 voiceMain に、選択した画像を識別し、編集した画像や録音した音声ファイ
ルの保存時につけるファイル名に利用するための文字列を代入する。一つ目の画像が選択さ
れたとき fileMainS には image00.jpg という文字列が、voiceMain には 00 という文字列が
代入される。filMainS は Paint クラスで利用し、voiceMain は Record クラスで利用する。
MainPicture はサムネイル画面の中央に最も大きく表示される画像であり、現在選択してい
る画像を表すものである。画像が選択されるたびに表示を切り替えるために画像がクリック
されたときのアクションのなかのひとつに repaint が組まれている。この MainPicture が
null かあるいはいずれかの画像が選択されているかを判断して、ペイントボタンや録音ボタ
ンが押されたとき画面遷移するか何も起こさないかが決まる。MainPicture が null でない
とき、すなわちサムネイル画面中央に選択した画像が大きく表示されている状態のときにペ
イントボタンまたは録音ボタンを押すとそれぞれ Paint クラス、Record クラスが呼び出さ
れて画面が切り替わる。切り替わった先でも先ほど選択されていた画像が表示されており、
その画像に対する編集作業ができる。ペイント画面からサムネイル画面が呼び出された場合
は MainPicture の画像が編集により変更されている可能性があるため初期化して最新の状
態を表示しなければならない。そのため MainPicture は null となって画像の選択は解除さ
れた状態になる。録音画面からサムネイル画面が呼び出された場合は画像に対しての変更は
起こらないので MainPicture はそのままであり、画像の選択がされた状態でサムネイル画
面が表示される。以下の図 3.1 はサムネイル画面とその操作や機能に関する説明である。
2. Title クラス
Title クラスの役割はタイトル画面を表示して、電子紙芝居の作成か再生かを選択すること
である。「せいさく」ボタンを押すとサムネイル画面に移動し、「さいせい」ボタンを押すと
再生画面に移動する。タイトル画面として最初に表示される画面であるため、画面は背景画
像をメインとして見せてこれからの作業に皆と協力して楽しく取り組む気持ちを持たせるこ
とを狙った。
次に、プログラム部分について詳しく説明する。まずは JButton を用意して、ImageIcon
型の変数にせいさくボタンとさいせいボタンのアイコン画像を読み込んで代入する。各ボタ
ンに 2 つのアイコン画像を読み込み、setPressedIcon メソッドでボタンが押されている状
態のアイコンを設定した。背景画像も読み込み paint 関数で描画する。せいさくボタンのア
クションは Thumb クラスを呼び出し、dispose でタイトル画面を消す。さいせいボタンの
アクションは ImageSound クラスを呼び出し、同様にタイトル画面を消す。
Group Report of 2012 SISP
- 15 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
図 3.1
サムネイル画面
3. Paint クラス
Paint クラスの役割はペイント画面を表示し、サムネイル画面で選択した画像にペンでお絵
かきをしたりスタンプを押したりした後、変更を保存することである。ペンは色を 12 色の
中から選択でき、太さは 6 つの中から選択できる。スタンプは 5 種類から選択でき、スタ
ンプの大きさも 6 つの中から選択できる。スタンプ機能は開発初期では実装する予定は無
かった。なぜならば、児童が自ら考えたテーマで自由な表現で電子紙芝居を作成して発表す
るというコンセプトの授業では、スタンプを用意するにも児童がどんなものを使いたいと思
うかわからず、かなり多くの種類のスタンプを作成して用意しておかなければならなかった
からである。わずかな数のスタンプを用意してあってもそれが有効に利用される可能性は低
く、さらに児童が好奇心でそれらの限られた中からスタンプを使おうとすると無理に作品の
方向を捻じ曲げてしまいかねない。これらの理由からスタンプは事前に用意するのは実用的
ではなかったが、実際に授業を行ってみるとマウスだけでペイントを思ったように自由自在
に描き込むことには多くの班が苦戦しており、紙芝居作成作業が滞ってしまったため、ペイ
ントの作業を楽に進められるよう対策しなくてはならなかった。作品の方針が決まったこの
時点からならば私たちがどんなスタンプを用意すれば作業の手助けになるかが判断できるこ
とと、児童の作品の方針が変化するという影響が出ないと考えられたことから急遽スタンプ
を各班にひとつ用意した。スタンプの一部は回転して使用できるようにした。角度は 8 方向
から選ぶことができる。もどるボタンを押すと保存ボタンを押したあとからの編集内容は破
棄してサムネイル画面に戻る。アンドゥやリドゥ機能を実装することはできなかったため、
編集に失敗した場合は保存せずに一旦サムネイル画面に戻りペイントを呼び出し直す。誤っ
て保存してしまった場合でも、ファイル名は保存する度に別名で保存しているため一旦フォ
ルダを開いてファイル名を指定のものに変更することで編集前の画像を復帰できる。
次に、Paint クラスのプログラムを詳しく説明する。
まず Paint クラスが呼び出されたとき、初期設定と下準備として、背景画像、編集する画像
や、スタンプの画像を読み込む。特に、編集する画像を読み込むにはどの画像を編集したい
のか判断させるため Thumb クラスから String 型の変数 fileMainS を参照し、その文字列
が使用したい画像のファイル名の一部となっているので、読み込む画像ファイルの指定のな
Group Report of 2012 SISP
- 16 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
かに fileMainS を組み込むことでサムネイル画面で選択した画像を表示できる。Graphics
オブジェクトは paint メソッドで使うものとは別に用意するため、gr というオブジェクトを
置く。
次に disp pen メソッドを説明する。このメソッドはペイント画面のなかでもペンのサイズ
を選択するパレットを描画するものである。Graphics は gr に描画する。初期準備として枠
や枠の内部の塗りつぶし、ペンの太さを示す円を描画する。それだけでなくこのメソッドは
ペンの色が選択されたときにこのパレットのペンの太さの表示も同じ色で描き直しするため
のもので、スタンプを選択したときもペンの太さの替わりに選択されているスタンプの大き
さを順に表示する。ペンやスタンプが選択されるたびに disp pen メソッドが実行される。
選択しているペンの太さを示すため、該当する枠だけ青色の枠で囲う。
つづいて、paint メソッドの説明をする。paint メソッドの Graphics は g とする。paint メ
ソッド内では最初にスタンプの回転分の画像も全て先に描画しておかなければならない。編
集作業中にスタンプを回転させると、先に画像を読み込んでいなかった場合だと読み込みと
同時に画面全体が描き直されてしまいペンで書き込んだものもすべて消えてしまうからであ
る。その後、背景画像と、編集する画像も描画する。カラーパレットとスタンプ一覧も描画
し、完成ボタンともどるボタン、スタンプ回転ボタンも表示する。
次は mouseDown メソッドについて説明する。これはマウスがクリックされたとき、その座
標を取得するメソッドである。どこをクリックしたら何を行うかについて順に説明する。ま
ずカラーパレットの上でクリックするとその座標は何の色のパレットであるか計算してその
色にペンを変更する。ペンの色の変更とは、最初に Color 型の配列に色を決めておき、int
型変数 PenColor の値で Color 配列の箱の番号を指定して色を決めている。
PenColor の値にはクリックされた座標を計算して出した整数値を代入している。縦にカ
ラーパレットが並んでいるから、パレットの縦の長さにパレット同士の隙間を考慮した値と
マウスポインタの Y 座標を除算すれば、上からいくつめのパレットがクリックされたかと
いう数字が整数で求められる。同様に計算することでカラーパレットの隣に配置したスタン
プパレットも選択されたことを判定することができる。ペンの色が変更されたりスタンプが
選択されたらその都度 disp pen を実行してペンサイズの表示を合わせて変更する。次に、
ペンサイズが変更されたときは、これもまた同様にクリックされた座標とペンサイズパレッ
トの位置から計算して、左から何番目の枠がクリックされたという数字を int 型の変数 PS
に代入する。int 型の配列 PenSize にはペンの直径を順に入れておき、PS の値から PenSize
の箱を決定しそのサイズにペンを設定する。スタンプ回転ボタンの上でクリックされたとき
はスタンプの画像を描画するために使用している Image 型の変数に、ひとつ回転した状態
の画像を代入するために int 型変数 angle を用いる。回転ボタンは右回りと左回りの二つが
あるので angle の初期値を 1000 としておいて、右回りの時は angle を 1 加え、左回りの時
は angle を 1 減らす。さらに angle を 8 で割った余りを見て 0 から 7 のときそれぞれに対
応した角度のスタンプ画像を代入する。回転してもスタンプの描画用の変数に回転後の画像
が代入されるだけであり、同時に選択しているスタンプを担う変数を変更することはしない
ため、もし回転スタンプを選択中であった場合は回転前のスタンプを選択している状態であ
るので、勘違いしてしまう。間違って使用することを避けるため回転したときいずれかのス
タンプを選択していた場合は自動でペンに持ち替える。
次に、保存ボタンの上でクリックされた場合、画像を表示しているエリアをキャプチャし
て jpg ファイルで保存する。キャプチャには Robot オブジェクトを用いて指定した座標を
Group Report of 2012 SISP
- 17 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
切り取ってキャプチャする。保存するファイル名は fileMainS を使って元の名前のまま上書
きするものと、int 型変数 piccnt をファイル名に加えて新規に保存するものの 2 つがある。
piccnt は保存ボタンを押すたびに 1 加えられるため保存される画像はすべて別のファイル
としてフォルダ内に保管される。次に、編集する画像上をクリックした場合は、ペンを選択
していたときは何も起こらなく、スタンプを選択していたときのみその場所にスタンプを押
すことができる。
次に mouseDrag メソッドについて説明する。マウスがドラッグされているときマウスポイ
ンタの座標を取得するメソッドである。マウスが編集する画像のエリア内でドラッグされて
いるとき、マウスポインタの場所に円を描く。ただし、座標を取得する周期は充分に早くは
なく、あまり高速でマウスをドラッグすると円と円の間隔が離れすぎてしまいペンで描いた
ような軌跡には見えなくなってしまう。このときのペンの太さはペンサイズパレットで選択
したものが適用されている。スタンプのようにクリックするだけではペンで点を描くことは
できない。以下の図 3.2 にペイント画面の図を示す。
図 3.2
ペイント画面
4. Record クラス
Record クラスの役割は録音画面を表示し、サムネイル画面で選択した画像に対してつける
音声を録音することである。画面上には、選択した画像、録音ボタン、戻るボタン、録音時
間を入力する欄と、その入力内容を適用する決定ボタン、そして適用された録音時間を表示
する。まずは録音時間を入力欄に半角数字で打ち込み決定ボタンを押して適用する。する
と、その数が録音秒数として表示されて確認できる。これで録音準備が整い録音ボタンを押
した瞬間から録音が開始されるようになる。録音開始すると録音ボタンは録音中という表示
に変化し、入力した秒数が経過すると録音が停止する。入力された文字列が半角数字でな
い場合、または 100 より大きい数字や整数でない場合は決定ボタンを押しても適用されな
い。100 以上の整数が入力された場合は、100 以下の秒数を入力するように促すため「100
秒まで」という文字列が入力欄に表示される。また、半角数字以外の文字列が入力された場
合は、整数を半角数字で入力するように促すため「半角数字で入力」という文字列が入力欄
に表示される。録音中はシステムが反応しなくなるため、ボタンを押すなどによって画面を
切り替えたり録音を途中停止するという行動は取れない。一度録音したことがある画像に
対して重複して録音を繰り返した場合は、以前の音声データは失われて最後に録音した音
Group Report of 2012 SISP
- 18 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
声が保存される。各種ボタンは JButton、録音秒数の入力欄は JTextField で実装した。決
定ボタンを押したとき、テキストフィールドに入力された文字列は String 型の変数 sec に
格納すると同時に、int 型にキャストして int 型変数 time に格納する。sec は録音画面上に
録音秒数を表示するために利用する。time は録音した音声を保存するとき同時に time に
格納した数字を txt ファイルへ保存する。この txt ファイルは ImageSound クラスで読み
出して音声の再生時間として利用する。txt ファイルと wav ファイルの保存時の名前は同
じものを使用する。録音するときの AudioFormat はリニア PCM、8000Hz、8bit、モノラ
ル符号付リトルエンディアンとし、このとき録音するデータ量が 1 秒間に 8000Hz * 8bit *
time = 8000byte となることから byte 型の配列を byte[8000*time] と用意して、マイクか
らの入力データをこの配列の長さ分だけ格納するものとした。データが指定分格納された時
点で録音を終了し、wav ファイルへ書き出す。ファイル名は画像ファイルと番号を揃えて、
voice00.wav や、voice01.wav などの名前をつける。番号部分には Thumb クラスの String
型変数 voiceMain を利用する。例として、image00.jpg の画像を選択した状態で録音を開始
した場合は voiceMain には 00 という文字列が入れられているため、保存するファイル名を
指定する部分に voiceMain を組み込むことでその画像ファイルと番号部分を揃える。図 3.3
は Record クラスを呼び出すと生成される、録音画面である。
図 3.3
録音画面
5. jmidi クラス
jmidi クラスの役割は java アプレットで wav ファイルの再生を可能にすることである。
AudioClip 型の変数 ac を置いて、java.applet.Applet.newAudioClip(URL url) を用いて
指定したファイルの URL から AudioClip を取得することで wav ファイルを再生すること
ができるようになる。
6. ImageSound クラス
ImageSound クラスは作成した電子紙芝居を再生、鑑賞するための機能を持つ。タイトル画
面から「さいせい」ボタンを押すと ImageSound クラスが呼び出され再生画面が表示され
る。再生画面には画面中央に電子紙芝居の画像、下部に再生を開始したり停止するといった
操作のボタンが表示される。開始ボタンを押すと再生が開始され、停止ボタンを押すと停止
する。はじめからボタンを押すと最初に再生される画像へ戻る。開始ボタンを押すと画像と
Group Report of 2012 SISP
- 19 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
音声を順番に表示・再生していくが、動画ファイルではないため音声の再生時間を測って画
像の表示時間を合わせる。停止ボタンを押したとき音声の再生が止まるが、再度開始ボタン
を押したときは音声の途中からではなくその場面の音声を最初から再生する。
プログラムではまず、Image 型、AudioClip 型、int 型の配列をそれぞれ用意する。Image
配列には再生時に使用する画像を再生順に格納し、AudioClip 配列には再生する音声ファイ
ルを再生順に格納する。int 型配列 dspTime[] には音声と画像を表示する時間を格納する。
音声ファイルの再生時間の長さを記録した txt ファイルを読み込み int 型変数 inteval に代
入し、dspTime[] には inteval を 1000 倍してミリセカンドとして扱えるようにすることに
加えて適度な間を取るため 1000ms を加算したものを再生順に格納する。また、何番目の画
像を表示して何番目の音声を再生するかということを全体で統一するため int 型変数 index
を置いた。index の数字を Image、AudioClip、int の各配列の呼び出す箱の番号として利用
することですべてを一括して切り替えることができる。
他にも、時間を計り画像と音声の切り替えタイミングにアクションするための Thread を用
意した。開始ボタンが押されると Thread を Start し音声を再生する。Thread は dspTime
を参照し、その秒数 sleep してから画像と音声の切り替えを実行する。図 3.4 は ImageSound
クラスを呼び出すと生成される、再生画面である。
図 3.4
3.2.3
再生画面
主な変数の説明
1. Thumb クラス
• Image MainPicture;
選択されて画面中央に大きく表示する画像を格納する。小さく一覧表示されている画
像をクリックするたびにその画像が MainPicture にコピーされ、画面が再描画される。
ペイント画面や録音画面に移動したときも MainPicture を呼び出して選択された画像
を表示する。
Group Report of 2012 SISP
- 20 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
• BufferedImage bimg0,bimg1,bimg2,bimg3,bimg4,bimg5,bimg6,bimg7,bimg8,bimg9,bimg10,bimg11;
サムネイル画面下部に一覧表示する画像を格納する。最大 12 枚まで読み込み表示する。
• JButton btn0,btn1,btn2,btn3,btn4,btn5,btn6,btn7,btn8,btn9,btn10,btn11:
JButton でボタンを生成する。これらのボタンはサムネイル画面下部に一覧表示する
画像の背後に配置しておく。ボタンが画像の上に重なると画像が隠されて見えなくなっ
てしまう。画面を開いたときの初期準備ではボタンを生成してから画像を描画するため
ボタンの上に画像を表示することができる。画像を選択しようとマウスオーバーすると
ボタンが上になり画像を隠してしまうため、それを防止するために setRolloverEnabled
メソッドを用いてマウスオーバーによる反応を無効とした。
• JButton btn pen,btn oto,btn bc:
btn pen はペイント画面へ移動するためのボタンであり、btn oto は録音画面へ移動す
るためのボタン、btn bc はタイトル画面へ移動するためのボタンである。
• ImageIcon icon pen,icon oto,icon bc:
icon pen は btn pen のアイコンとして使用する画像を格納する。同様に icon oto は
btn oto に使用するアイコンを、icon bc は btn bc に使用するアイコンを格納する。
• String fileMainS;
画像を選択したときにその画像ファイルを指し示す文字列を格納する。ペイント画面
に移動した後、編集した画像を保存するときにつけるファイル名にこの文字列を利用
する。
• String voiceMain;
画像を選択したときにその画像ファイルを指し示す文字列を格納する。録音画面に移動
した後、録音した音声ファイルを保存するときにつけるファイル名にこの文字列を利用
する。
2. Title クラス
• Image titleImage:
タイトル画面の背景画像を読み込み表示するために使用する。
• ImageIcon icon1:
せいさくボタンのアイコンとして使用する画像を読み込む。
• ImageIcon icon2:
さいせいボタンのアイコンとして使用する画像を読み込む。
• ImageIcon icon3:
せいさくボタンが押された状態のときに表示するアイコンとして使用する画像を読み
込む。
• ImageIcon icon4:
さいせいボタンが押された状態のときに表示するアイコンとして使用する画像を読み
込む。
• JButton button1:
せいさくボタンを用意する。setPressedIcon メソッドを用いてこのボタンが押された
ときにアイコンを切り替えるようにする。通常時は icon1, 押されているときは icon3
が表示される。
• Jbutton button2:
Group Report of 2012 SISP
- 21 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
さいせいボタンを用意する。setPressedIcon メソッドを用いてこのボタンが押された
ときにアイコンを切り替えるようにする。通常時は icon2, 押されているときは icon4
が表示される。
3. Paint クラス
• int PS:
ペンの太さを決めるとき PenSize の配列の箱の番号を指定するときに使用する整数値
が代入される。
• int PenSize[] = 5,10,15,20,25,30;
ペンの太さを決める数値を配列内に入れている。この数値はペンで描かれる円形の直径
をピクセルで指定するものとなる。
• int PenColor;
ペンの色を決めるとき Col の配列の箱の番号を指定するときに使用する整数値が代入
される。
• Color Col[] = Color.black, Color.darkGray, Color.gray, Color.white, Color.blue,
Color.cyan, Color.magenta, Color.pink, Color.red, Color.orange, Color.yellow,
Color.green, Color.white;
色の種類を配列内に入れている。この中からペンに使用する色を PenColor の値で決定
する。Color.black は黒色、Color.darkGray は黒色よりの灰色、Color.gray は白色より
の灰色、Color.white は白色、Color.blue は青色、Color.cyan は水色、Color.magenta
は紫色、Color.pink は桃色、Color.red は赤色、Color.orange は橙色、Color.yellow は
黄色、Color.green は緑色を指定している。
• Graphics gr;
Graphics クラスのオブジェクトの一つで、こちらはペンサイズのパレットやスタンプ
を選択するパレットを描画するために利用する。ペンの色やスタンプを選択しなおした
りスタンプを回転させると合わせてパレット部分も表示を変更しなければならないが、
オブジェクトを使い分けなければ画像上にペンで書き込んだ内容などもすべて再描画さ
れ消えてしまうため、パレット部分の描画はこのオブジェクトを指定して行う。
• Image img;
サムネイル画面で選択した画像、すなわちペイント画面で編集する画像を格納する。
• Image bgd;
ペイント画面の背景画像を格納する。
• Image kansei;
完成ボタンとして表示する画像を格納する。
• Image stamp;
選択されたスタンプの画像を格納する。
• Image
thunder,ball,hane,hane1,hane2,hane3,hane4,hane5,hane6,hane7,hane8,
fire,kan;
それぞれスタンプとして表示する画像を格納する。hane は回転するスタンプであり、
hane1 から hane8 までは 8 方向分の画像で、現在の状態としてスタンプパレットに表
示する画像を格納するのは hane である。
• Image right,left:
Group Report of 2012 SISP
- 22 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
right と left はスタンプを右回りまたは左回りに回転させるボタンとして表示する画像
を格納する。
• int angle;
回転するスタンプの現在の角度を求める整数値である。初期値は 1000。回転ボタンが
押されたとき angle の値を右回転か左回転によって 1 ずつ加減し、その angle の値を 8
で割った余りの値から回転後スタンプの画像を決める。
• BufferedImage si;
編集した画像を保存するとき Robot を利用して指定した範囲をキャプチャし、その画
像データを si に格納して保存できるようにする。
• String outname:
出力した絵の名前を格納する。
• int piccnt;
画像を保存するときに、誤って保存ボタンを押してしまい上書きされて以前の画像デー
タが失われるということがないように、保存ボタンを押すたびに予備の画像ファイルと
して別名で同じ画像を保存する。piccnt は予備で保存するときにつけるファイル名の
文字列に組み込むための数値である。保存するたびに piccnt の数値は 1 ずつ加算され
るためすべて上書き保存されずに新規ファイルとして作成して保存できる。誤って保存
してしまったため元の画像に戻したいという場合は、ファイル名から piccnt の部分を
取り除くようにリネームしてコピーすることで元に戻すことができる。保存する度にす
べて予備ファイルが残しておかれるため数回前の編集内容まで戻したいときも利用で
きる。
• Button btn f;
もどるボタンを実装する。
• int width;
画面サイズの横幅を指定する数値である。初期値として 1280 を代入する。
• int height;
画面サイズの縦幅を指定する数値である。初期値として 800 を代入する。
• int drwid;
編集する画像を表示してペンやスタンプを用いて描き込むことができる範囲の、横幅と
して使用する数値である。初期値として 900 を代入する。
• int drhei;
編集する画像を表示してペンやスタンプを用いて書き込むことができる範囲の、縦幅と
して使用する数値である。初期値として 600 を代入する。
• int rect;
カラーパレットやペンサイズパレットの枠の横幅、縦幅として使用する数値である。初
期値として 50 を代入する。
• int space;
カラーパレットの各枠同士の間に空ける隙間の幅として使用する数値である。初期値と
して 30 を代入する。
• int stampSize;
選択されているスタンプのサイズを決める数値。初期値は 0 である。
Group Report of 2012 SISP
- 23 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
4. Record クラス
• int i;
録音ボタンを押して録音開始してから録音停止するまでの秒数として使用する数値を代
入する。テキスト入力欄に入力された数字を int 型にして i に代入する。
• JTextField inputSecField;
テキスト入力欄を用意する。ここに入力された文字列を Integer.parseInt(inputSecField.getText())
で int 型の数値として取得し、100 以下の半角数字であった場合は i に代入する。100
以上であった場合は setText メソッドを用いて「100 秒まで」という文字列をこの入力
欄に出力する。半角数字以外の文字列が入力された場合は同様に setText メソッドを用
いて「半角数字を入力」という文字列を入力欄に出力する。
• String sec;
録音する秒数が入力され適用されたとき、録音画面上にその秒数を表示するために使用
する。録音画面を開いたときから画面上には「録音 秒」という文字を表示している。
スペースが空いている部分に sec の文字列を挿入して表示することで録音する秒数を表
す。最初から sec は挿入された状態で表示しているため、sec が空だと表示が「録音秒」
となってしまいわかりにくく見えたり、sec が空でもスペースが入っているようにする
と、sec に数字が入ったときにそのスペースが間隔を空け過ぎて読みにくくなってしま
うのではないかと考え、sec には初期値として” ”のようにスペースを入れた状態で
表示することにした。一度数字を入力してしまえばスペースの代わりに数字が入り読み
にくいことは無くなり、sec には半角数字しか格納されることはないため sec が null と
なってスペースが無くなってしまうこともない。
• int time;
time には i の数値と同じものを代入する。録音ボタンを押して録音が完了したとき、音
声ファイルの保存と同時にその録音の長さを記録するテキストファイルを保存する。こ
のテキストファイルに保存する録音時間の値に time を使用する。
5. jmidi クラス
• AudioClip ac;
wav ファイルを再生するため AudioClip を作成し、指定したソースからファイルを取
得する。ac の初期値は null としておく。java.applet.Applet.newAudioClip メソッド
を利用して、さらにソースファイルの URL は jmidi.class.getResource() で指定する。
6. ImageSound クラス
• JButton btn f,btn s,btn p,btn re;
Jbutton で各種操作に関するボタンを用意する。btn f はタイトル画面へ戻るボタンで
ある。btn s は電子紙芝居の再生を開始するボタンで、btn p を押すと再生を停止でき
る。btn re を押して頭出しする。
• Image[] images;
再生するときに表示する画像をストーリー順に格納する。配列の長さは 12 とする。画
像のファイル名はストーリー順に image00、image01、image02 というようになってい
るから for 文によるループで 12 回画像の読み込みを行い、そのときファイル名の指定
は、ファイルの絶対パスと image まで共通で、String 型の配列 number を利用して 00
Group Report of 2012 SISP
- 24 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
や 01 といった番号部分を対応させながらファイル名を指定して読み込む。必ずしも 12
枚の画像を使用するわけではないため存在しないファイルを指定してエラーが出ること
があるから try catch で処理する。
• AudioClip[] sounds;
再生するときに出力する音声ファイルをストーリー順に格納する。配列の長さは 12 と
する。画像ファイルと同様に音声ファイルもストーリー順に voice00.wav、voice01.wav
と共通部分と番号部分でファイル名をつけているので、画像ファイルと同じ方法ファイ
ル名を指定しながら読み込みを行う。ファイルを読み込むとき jimidi クラスを利用す
る。存在しない音声ファイルを指定した場合は int 型の変数 cnt の数値を 1 減らす。
• Thread thread;
スレッドを用意する。初期値は null である。再生開始時にスレッドを start し、while
文で指定時間スレッドを sleep してから画像と音声を切り替えるという作業を繰り
返す。
• int[] dspTime;
int 型の配列を用いてスレッドの sleep する時間を決める。音声によって再生する時間
が異なるため、音声および画像の切り替えは再生時間に合わせて行う必要があるから、
スレッドが sleep する時間をその都度変化させながら再生しなければならない。そのた
めにまず int 型の変数 interval の中に録音時と同時に再生時間を記録した txt ファイル
をストーリー順に読み込み数値を代入する。その数値をミリセカンドとして使用するた
めに 1000 倍する。さらに再生時に適切な間を取るために 1000 を加算し、その数値を
dspTime の中に格納する。この作業を for 文で行う。この txt ファイルを読み込むとき
は変数 cnt が使用する音声ファイルの数を数えているからそれを利用して音声ファイル
と同数分 txt ファイルの読み込みを行う。txt ファイルの名前は音声ファイルと同名で
ある。
• int index;
再生時に何番目の画像および音声を再生するかを管理する数値として使用する。初期値
は 0 で、画像および音声の切り替えを行うと同時に index の値を 1 加算する。index の
値を配列の指定に利用することで同時に画像と音声を管理できる。
• int cnt:
電子紙芝居の再生時に使用する音声ファイルの数を数えるための変数である。初期値を
12 とする。音声ファイルを読み込む際に存在しないファイルを読み込もうとしたとき
cnt の値を 1 減らす。
• int interval;
音声ファイルの再生時間を txt ファイルから読み出すときに一旦この interval に数値を
入れる。そして単位をセカンドからミリセカンドに変換するために 1000 倍する。さら
に再生時に再生時間丁度のタイミングで画像と音声の切り替えを行うと音声の終了と次
の音声の開始がほぼ同時になり間が悪くなったり聞き取りにくくなるという悪影響が出
る可能性があるため、適度に間をおくために interval に 1000 を加算することで 1 秒の
猶予を挿入する。以上の計算結果で得られる数値を dspTime に代入する。
• String[] number = ”00”, ”01”, ”02”, ”03”, ”04”, ”05”, ”06”, ”07”, ”08”, ”09”, ”10”,
”11”;
この配列の文字列を読み込むファイル名の指定に利用する。画像ファイルと音声ファイ
Group Report of 2012 SISP
- 25 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
ルおよび再生時間を記録したテキストファイルのファイル名には共通する文字列の部分
とストーリー順につけられた番号部分がある。これらのファイルを読み込むときに指
定するファイル名のうち番号部分だけを number の値を用いて指定することで for 文の
ループで順に読み込むことができる。
（※文責: 森澤勇大）
Group Report of 2012 SISP
- 26 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
第4章
4.1
成果
システム班の成果
私たちのグループは電子紙芝居作成・再生ソフトウェアを開発した。今回の本プロジェクトにお
ける開発したソフトウェアは”伝えることの大切さ”という授業テーマを基にした授業カリキュラ
ムを支援する「電子紙芝居作成・再生ソフト」である。「電子紙芝居作成・再生ソフト」は各自電
子紙芝居のテーマやストーリーを考え、撮影場所や撮影ポーズなどを決定して、それを基に指定し
た場所で撮影し、撮影したもの写真を並び替え、絵を描いて、音を挿入して紙芝居の形に形成して
いくものである（図 4.1、 4.2、 4.3）。
図 4.1 実際の授業における編集作業の様子
（※文責: 厚谷圭佑）
4.2
4.2.1
成果の評価
成果の効果
６月に交流会を行った際に児童にアンケートを取ったところ、”言葉だけよりも画像や音声を使
うことによって伝わりやすくなると思いますか”という質問に対して”そう思う”と答えていた児
童は 29 人中 13 人と半数以下だったが、１２月に授業カリキュラムを終えた後に行ったアンケート
では 28 人中 26 人と、ほとんどの児童が同じ質問に対して”そう思う”と答えた。そのことから、
本プロジェクトが開発したソフトウェアによって児童に授業テーマである「伝えることの楽しさや
難しさを学習し、児童の伝達力・創造力を養う」を理解させることができた。
また、電子紙芝居を最初から最後まで自分たちが作成したということで、何もないところから新
たに何かを作り出すという貴重な体験を与えることができたのではないかと考える。
Group Report of 2012 SISP
- 27 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
4.2.2
図 4.2
エデュテインメントソフトウェアのタイトル画面
図 4.3
エデュテインメントソフトウェアのペイント画面
開発言語の習得
4 章に記述した通り、Java を開発言語として決定した。しかし、メンバー全員が Java 言語の経
験が浅かったため、開発作業に入る前に Java 言語の基礎知識を学ぶことを優先すべきであるとい
う結論に至り、メンバー全員で Java の勉強会を行った。その際にどのようなプログラミングの構
成にするかということを明確にさせるために、開発するソフトウェアの起動画面や実際に児童がど
のような画面ならスムーズかつミスのないようにできるだろうかということを絵コンテを作成して
考えていった。そして、本プロジェクトが開発する電子紙芝居システムというソフトウェアにおい
て必要不可欠であろう音声の入力や保存、紙芝居のような動きを見せることのできるプログラムを
中心にして開発作業のための準備を入念に行った。
Group Report of 2012 SISP
- 28 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
4.2.3
システム班の問題点
6 月の児童との交流会の際に、本プロジェクトが使用するソフトウェアについて簡単な説明した
が、交流会後にアンケートにて「本プロジェクトが行う授業の際に使用するソフトウェアについて
大まかには理解できたか」という質問をしてみると、約半数 の児童がよくわからないと答えた。そ
のために実際に児童を対象としている電子紙芝居作成のソフトの開発を進めるとともに、ユーザー
（本プロジェクトの場合は児童）に対してどのように展開していくかが大きな問題である。
またシステム班のなかでもプログラミング技術に差があったため、担当するプログラムの難易度
に差が生まれたように思われる。プログラムの実装をするにあたり、グループメンバー各々の実装
方法が異なったためプログラムを合わせた際にバグが発生したこともあった。
4.2.4
問題の解決
前節で挙げられた問題点を順を追って解決していった。ユーザーに対しての展開に関しては、実
際に児童が対象ということでボタンなどに使用した文字を小学 5 年生の知っている漢字にあわせた
り、難しい語句の使用をなくし極力ユーザーの視点にたってソフトウェアの制作に臨んだことによ
り、本授業の際にユーザーからとてもわかりやすくかつ操作がしやすいと好評であった。担当する
プログラムの振り分けは各々ができる限りのことを確実にこなせるという前提の下に行い、プログ
ラムで負担が軽かった人はその分だけビジュアルデザインや、ソフトウェアのインターフェースを
担当していくことにより、グループメンバー全員の仕事量が概ね等しくなるように振り分けを行っ
た。実装方法はすべてプログラミングの骨組みを作成した森澤のプログラミング方法を用いること
により、その後のプログラムの結合を行った際のバグを軽減した。
（※文責: 厚谷圭佑）
Group Report of 2012 SISP
- 29 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
第 5 章 まとめ
5.1
プロジェクトの成果
グループ全体の活動として、赤川小学校の授業の際に使用するソフトウェアの開発を行った。今
年度のプロジェクトが製作したソフトウェアは、”伝えることの大切さ”という授業テーマを基に
した授業カリキュラムを支援する「電子紙芝居作成・再生ソフト」である。開発したソフトウェア
を用いて授業を行うことにより児童たちに”伝えることの大切さ”を認識させるということをして
いくことで、自分たちとは異なる考えをもっている人たちに対してどのようにしたら”伝えること
の大切さ”を認識させていくかということの難しさを知り、その上でソフトウェアを何もない状態
からつくりだすことにより、プログラミング技術を向上させることができた。
（※文責: 厚谷圭佑）
5.2
5.2.1
自分が担当した仕事の成果および反省
森澤勇大
森澤が担当した仕事とその成果および反省について述べる。
私はプロジェクト活動を通して主にシステム開発についての提案や計画、そしてプログラミング
作業を行った。プロジェクト開始後まもなく行ったエデュテインメントシステムの企画会議では、
他のメンバーと同様に数種類の授業案と作成するシステムの概要案を提案し、また、システム開発
作業の開始後には私は開発班のメンバーとして参加することをふまえたうえで、システム案のなか
からどのようなシステムであれば開発の目処が立てられそうか、開発したシステムを利用する機器
はパソコンやスマートフォンではどれが適しているか、という意見を出した。
システムの案から決定案が決まり、本格的に開発作業を開始するときに会議を行いシステムの設
計をした。設計案からシステムに主要な機能が明確になり、私は録音の機能を実装する作業を担当
した。録音機能を実装するためにまずマイク入力の方法から調べて試行し、マイクから音声データ
を取り込むことができた。次に、音声データを wav ファイルとしてファイル名をつけて保存する
方法を学び実装した。この作業では計画より長く時間がかかり、開発作業全体のスケジュールを修
正することになった。
録音機能の実装を進めるとともに、サムネイル表示機能の実装を担当することになった。画面構
成のデザインは後から相談しつつ行うことになり、ボタンのアクションの設定や画像の表示および
表示切替機能を実装した。また、サムネイル画面と録音画面を同時に作成していたため、ある画面
から違う画面へと移動する方法のテストも行った。別な機能の画面へと移動することに成功したた
め、各自で作成したプログラムを一つのシステムとして統合する作業を担当した。
サムネイル画面での画像ファイルの読み込みや、録音画面での音声ファイルの書き込みを行う際
について、ファイル名を管理しやすくする必要があると考え、ストーリー順を示す番号をファイル
名の指定に用いて画像と音声の関連付けをするという方法を提案した。
各自が仕上げたプログラムを統合して動作テストを行い、不具合を報告してデバックを協同で
Group Report of 2012 SISP
- 30 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
行った。しかし、個人作業に没頭しがちになってしまい問題の発生や解決などの状況についての情
報共有が不足した。
私のプロジェクト活動の成果を総合すると、録音機能とサムネイル表示機能の作成と、各機能の
統合を完了したことである。反省点は、メンバーへの状況報告が足りず作業予定の方針修正が大き
くなるような影響を与えてしまったことである。システムの設計が詳細化していくとともに頻繁に
情報を共有して作業方針を決定するべきであったと感じた。
5.2.2
厚谷圭祐
自分が担当した仕事は以下の通りである。
児童にむけてのプロジェクト説明のポスターや児童の保護者宛てのパンフレット（図 5.1）
、授業
後に赤川小学校に送った小学生の成果の DVD のパッケージのラベルなどを作成した（図 5.2）
。こ
れらを制作したことにより、自分たちが行いたいことを明確に赤川小学校の担当教師や児童たちや
保護者などに伝えることができた。この作業はすべて円滑に行うことができたと感じている。
図 5.1
保護者宛に作成した発表会のパンフレット
中間発表会や成果発表会のポスター制作については、ポスターを作成していくにあたって本プロ
ジェクトの担当教授や他のグループメンバーなどと内容などの意思疎通を行い、ポスターのアウト
ラインや細かいレイアウトをデザインコースの教授に相談しながら作成した。成果としては中間発
表会では 2 枚、成果発表会では 3 枚のメインポスターおよびサブポスターを作成した。この仕事の
反省点としては、成果発表会の際に作業日程をシステム開発に時間をとられてしまったことにより
他のグループメンバーなどと意思疎通が完全に行われていなかったため、他のグループメンバーが
ポスターの内容を網羅していないということが発生してしまったことである。
ソフトの画面の遷移やビジュアルデザインを担当した。具体的に言うと、イラストレータなどで
絵コンテを作成して出来上がったものを担当教授やデザインコースの教授に見せてみて評価を頂い
て、納得のいく絵コンテになったらそれをプロジェクトメンバーにアドバイスをもらいながらプロ
グラムとして書きおこした（図 5.3）。
ソフトの修正・デバッグ作業については、メンバーが実際につかってみて違和感を覚えた箇所
や、児童に使用させた際に起こったバグを中心にリストアップしたバグの中から解決していった。
これにより重要度の高いバグはすべて解決することができたのだが、重要度の低いバグに関しては
なぜそのようなバグが発生しているのかを理解することができず解決できないものも存在した。こ
れは開発したソフトウェアのプログラムの内部構造を正確に理解していなかったため起こったもの
Group Report of 2012 SISP
- 31 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
図 5.2
図 5.3
Group Report of 2012 SISP
パッケージのラベル
サムネイル画面の寸法などのラフ画
- 32 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
であるので、ソフトウェアを開発していく際に段階を追うごとにどういう構造になっていたかとい
うことをグループメンバー全員で共有できていれば、より精度の高い修正・デバッグ作業ができた
と思われる。
グループリーダーとしてグループメンバー全員のタスク振り分けとスケジュール調整とカリキュ
ラム班のリーダーとの進捗確認を行った。これによりグループメンバー内で作業の負担が偏ると
いったようなことが発生せずにとてもスムーズに作業を行うことができた。しかし、カリキュラム
班との進捗確認の際に具体的に確認を行わなかったためグループ間で若干の食い違いが生じてし
まったこともあったのが反省点である。
5.2.3
北信生
電子紙芝居作成ソフトウェアの開発において実際にソフトウェアに必要となる機能を作る役割を
担当した。その成果として写真へ絵を描き込んで紙芝居の画像を作る機能と出来上がった音声・画
像を再生して電子紙芝居を鑑賞する機能を実装した。
絵の描き込みプログラムは写真の上に線を書き込み、児童が撮った写真を加工するものである。
主な機能として、線の太さや色の変更をすることができる。しかし一般のペイントソフトにあるよ
うな直線の描画や文字の表示などの機能は実装することができず、また一度描いた線を消す機能も
存在しないため児童が扱うソフトとして少々不便なものとなってしまった。これはソフトウェア作
成において写真の読み込みや書き込んだ画像の保存をする機能の実装に多くの作業時間を割くこと
となってしまい、実際の描画機能の充実化にかける時間が少なくなってしまったためである。
電子紙芝居の鑑賞プログラムは、紙芝居の再生と停止機能、それに一番始めから再生し直す機能
がある。この内紙芝居の再生として音声と画像を同時に再生する基本の機能を実装するまでは 1 人
で取り組んでいたが、停止や始めからの機能はほぼ他のメンバーに任せる形となってしまったのが
反省点である。
また中間、最終のグループ報告書を TeX を用いて作成する作業も行った。グループメンバーが
それぞれで書いた報告書の内容を TeX の形式に合うように調整し、報告書の体裁を整えた。成果
としてプロジェクトの内容を十分に伝えるようしっかりとした報告書を作成できた。しかし他人が
書いたものを書き写すという作業が多く、章立てや箇条書きなどの大きな部分で外見を整えること
に労力を払った結果文中の誤字などの細かなミスをなくすことができなかった。
（※文責: 厚谷圭佑）
5.3
今後の課題と展望
小学生のためのエデュテインメント開発プロジェクトということで、グループメンバー各々がき
ちんと作業をこなしていくことができ、なおかつグループメンバー全体が一致団結してそれらの成
果をまとめることができたため概ね満足のいくソフトウェアの開発ができた。しかし、児童を対象
とした電子紙芝居作成・再生のソフトウェアを作ろうという考えが強くなってしまったため、汎用
性や他のソフトウェアとの明確な違いを見せ付けるようなオリジナリティあふれるソフトウェアに
することができなかった。実際に赤川小学校で授業を展開した際に開発したソフトウェアを使用し
てもらったときは児童や担当教員には好評であったが、未来大学にて行われた成果発表会の際には
システムやヒューマンインターフェスの専門家などに既存のソフトウェアとの明確な違いが見えな
いことなどを指摘されてしまった。そのため、これから本プロジェクトが開発したソフトウェアに
Group Report of 2012 SISP
- 33 -
Group Number 6-B
Development of Edutainment System for Elementary School Students
さらに手直しをかけてオリジナリティあふれるソフトウェアにしていくことが課題となる。
これらの課題が発生してしまった原因として、「エデュテインメント」の基となる「エデュケー
ション」と「エンターテインメント」のうちエンターテインメントの要素が先行してしまい、遊び
要素の強いソフトウェアとなったため児童に学びを与えるということが不足していたことがあげら
れる。本来なら何を開発するかという段階できちんと調査を踏まえた上で客観的な視点を持ち、各
機能の役割や重要度などを十分に考慮した上で取り組むべきであった。そこが主観的になってし
まったからこそ児童を楽しくさせるようなソフトウェアを作ればいいのではないかという考え方が
基盤となってしまったことが 1 番の反省点である。
2 月 15 日に東京にて発表会があるのでそれにむけた準備もしていく必要がある。具体的にいう
と、成果発表会の際に指摘されたシステム起動画面内のアイコンの細かい配置の修正や本プロジェ
クトならではのオリジナリティの検討などをしていく予定である。例を挙げると、対象ユーザが小
学生ということと「函館」という港町ということを利用したデザインにするとユーザがいままでの
ソフトに比べより一層楽しめる可能性もあり、尚かつ函館のことを理解する材料としても幅を広げ
ることができるのではないかと考えている。この点に関しては、今後も様々な人のサポートにより
本プロジェクトが開発した「電子紙芝居作成・再生ソフトウェア」というものをエデュテインメン
トソフトとして更なる発展をさせていくことにより、今後の教育文化の発展に貢献していきたいと
考えている。
仮に本プロジェクトが次年度以降も継続していくならば、小学校の担当教員とどんな授業を展開
していくかということを相談していく段階から開発するシステムのおおまかなアウトラインもセッ
トにして話していくと授業の際にカリキュラムとソフトウェアの両方の視点から協議していくこと
ができるのではないかと思うため、授業の概要決定の段階から開発するシステムの検討をしてい
き、よりよいエデュテインメントシステムの開発に取り組んでほしいと考える。 （※文責: 厚谷圭佑）
Group Report of 2012 SISP
- 34 -
Group Number 6-B