タブレット端末向け添削支援アプリケーションの開発

タブレット端末向け添削支援アプリケーションの開発
Development of a Correction Support Application for Tablet Devices
浅井 彬弘
Akihiro ASAI
†
†
†
†
松本 章代
†
Akiyo MATSUMOTO
†
東北学院大学教養学部情報科学科 Faculty of Liberal Arts, Tohoku Gakuin University Email: akiyo@izcc.tohoku-gakuin.ac.jp
あらまし:本アプリケーションはタブレット端末を利用している教員向けに開発するものである.教員宛て
に学生から添削依頼や質問がメールの添付ファイルとして送られてきた場合,タブレット端末上で添削する
ことは難しい.タブレット端末では,一度に複数の画面を表示できないため,添付ファイル閲覧画面とメー
ル入力画面を交互に表示しながら添削しなければならないからである.そのため,添削に時間がかかってし
まう.よって,画像化した文書ファイルに直接文字を書き込めるアプリケーションの開発を行う.添削の効
率化という側面から有用性の検証を行う.
キーワード:Android,iPad,タブレット端末,添削支援
1.
はじめに
教育現場では近年課題を電子的に,例えば添付メー
ルなどで提出することが増えている.教員は,外出先
においてタブレット端末でメールをチェックするとい
う状況が起こりうる.ところが,メールで送られてき
た文書ファイルを添削し,返却する作業をタブレット
端末で行おうとすると,非常に手間がかかり作業がし
にくい.なぜなら,提出された文書ファイルの中身を
閲覧する画面と添削内容を書き込むメール画面を同時
に表示することができないからである.そこで我々は,
タブレット端末での添削作業を容易にするアプリケー
ションの開発を行う.手間がかかるという問題点を解
決するため,文書ファイルを読みながら,その上にタッ
チで自由に添削内容を書けるシステムを目指す.文字
以外の情報も表現できるため,教員の意図をわかりや
すく学生に伝えることも期待できる.
なお,Android と iPad の双方に対応するため,ウェ
ブアプリケーションとして開発する.
2.
本研究の位置づけ
従来のタブレット端末における添削・本アプリケー
ションにおける添削・類似アプリケーションである
Skitch (1) の違いを明確にする.
2. 1 従来のタブレット端末における添削
まず,文書ファイル閲覧する.次に,修正部分があ
れば一端こちらを閉じてメール画面を開き,本文に入
力する.添削が終了するまでこの流れを繰り返し,添
削が終了したあと添削内容を入力したメールを送信
する.
2. 2 本アプリケーションでの添削と Skitch での添削
本アプリケーションは後に述べる画像変換システム
にて返信された URL を用いて,画像を表示すること
ができる.また,表示された画像に直接タッチで色や
太さを変更しつつ自由に描画し添削することができる.
さらに,描画状態を消しゴム機能や一つ戻す・全て消
す機能で訂正できる.なお,画像を保存または共有を
することで送信することができる.
また,Skitch でも本アプリケーションと同様,画像
にタッチで色や太さを変更しつつ自由に描画し添削す
ることができる.しかし,描画したい画像ファイルは
前もってローカルに保存しておかなければならない.
また,消しゴム機能は搭載されていないため,描画状
態を一つ戻す・全て消す機能のみでの訂正をすること
となる.なお,本アプリケーション同様に画像を保存
または共有することで送信することができる.
2. 3
動作環境
2. 3. 1 使用するブラウザ
Android タブレット端末では FireFox,iPad では Safari の使用を推奨している.Android タブレット端末
では Chrome・Opera・Firefox,iPad では Safari を使っ
て利用できるかテストした.ブラウザのテストを行う
にあたり,Canvas に表示される画像の解像度や後に
説明する「画像の保存または共有」ができるかに重点
を置いて検討した.そこで,FireFox は画像の保存が
可能であり,Safari は画像の保存が可能であるため,
現時点では Android タブレット端末は FireFox を使用
し,iPad は Safari を使用することとする.
2. 3. 2 対象とするタブレット端末
本アプリケーションでは Canvas を利用しているが,
Canvas の描画された情報を画像に変換して表示する
ためには toDataURL(Canvas で描画したデータを,
Base64 エンコードした文字列で取得するメソッド)を
利用する必要がある.しかし,toDataURL に対応し
た Android は 4.0 以降のみ(iPad は対応している)で
あるため,Android は 4.0 以降を対象としている.
2. 4 画像変換システム
画像変換システムは我々の所属する研究室で開発さ
れたシステムである.画像変換システムの挙動として,
文書ファイル(doc・docx・pdf・ppt・pptx 形式)を
添付ファイルとしてシステム宛てにメールを送信する
と添付ファイルが画像ファイル(png)にフォーマッ
ト変換される.そして,画像ファイルの URL がメー
ルとして返信される.このシステムは LibreOffice (2) ,
JODConverter (3) ,ImageMagick (4) を用いている.
LibreOffice は文書の作成やデータの処理の役立つ
機能を備えたオープンソースのオフィススイートであ
る.JODConverter は LibreOffice で使える文書ファイ
ルを PDF ファイルに変換できる.ImageMagick は画
像処理や画像を表示することができるソフトウェアで
あり,PDF ファイルを画像ファイルに変換すること
ができる.
2. 5 タッチによる自由描画機能
Canvas にタッチで線を描画することができる.し
かし,線を描画すると端点が角ばっていたり曲線部分
に隙間ができてしまう.そこで,線を描画する際に端
点と線のつなぎ目を丸に指定することでなめらかな線
を描画することができる.
また,本アプリケーションでは描画される色と太さ
の変更ができる.
2. 6
表1
Canvas について
(単位:位)
2. 6. 1 Canvas サイズの設定
Canvas のサイズは画面サイズの縦 90%・横 100%に
設定している.これは Canvas のサイズが画面サイズ
よりも大きい場合,画像が表示されても見えない部分
が生じるからである.
一方,画面サイズが 7 インチ程のタブレット端末で
は Canvas に表示された画像の文字がぼやけて見えな
くなってしまうため,10 インチ程のタブレット端末の
使用を推奨する.
2. 6. 2 画像を Canvas に表示
先に述べた「画像変換システム」で返信された画像
の URL をコピーし,本アプリケーションのテキスト
フォームに貼り付けた後,
「配置」ボタンをタッチする
ことで Canvas に画像が表示される.また,Android で
はローカルに保存されている画像を選択して Canvas
に表示することもできる.しかし,iPad では動作し
ない.
2. 6. 3 レイヤーの設定
本アプリケーションでは 3 つの Canvas をレイヤー
として利用している.第 1 レイヤーを背景として使用
し,第 2 レイヤーに画像ファイルを表示させ,第 3 レ
イヤーに線の描画を行う.なお,第 3 レイヤーの背景
色は透明に設定しているため第 2 レイヤーの画像は見
ることができる.
2. 7 消しゴム機能
本アプリケーションには消しゴム機能が搭載されて
いる.消しゴムを使用した場合,第 2 レイヤーに表示
した画像が消えない仕様にする必要がある.消しゴム
は線を描画するのと同じ原理で機能している.消しゴ
ムの色を透明に設定し,第 3 レイヤーに描画する.第
3 レイヤーの背景色は透明であるため,消しゴムで塗
りつぶすと背景と同じ透明になるので消してるように
見える.また,間違いを訂正するには Canvas の描画
状態を 1 つ戻す機能と全て消す機能も利用することが
できる.
2. 8 画像保存または共有
Canvas では複数 Canvas を統合して 1 つの Canvas
にできる仕組みが存在している.この仕組みを利用し
て第 2 レイヤーと第 3 レイヤーを重ねて 1 つの Canvas
に統合することができる.そして統合された Canvas
を画像として表示し,この画像をロングタッチで保存
または共有することができる.しかし,画像の保存は
iPad のみで動作し,画像の共有は Android のみで動
作する.iPad では画像をロングタッチしても画像の
保存しか選択できず,Android では画像の保存を選択
しても画像ファイルとして保存されない(拡張子のな
い不完全なファイルとして保存される)からである.
これは端末・ブラウザ依存の問題のため,アプリケー
ションを改良しても直すことができない.
3.
評価実験
本アプリケーションは教員を対象として開発してい
るため,大学教員 3 名に従来の添削と本アプリケーショ
ンによる添削と類似アプリケーションである Skitch で
の添削をしてもらい,アンケートに回答する方法で評
価実験を行う.
3. 1 実験概要
比較対象はタブレット端末による「従来の添削」と
「本アプリケーションでの添削」と「Skitch による添
削」である.これら 3 通りの添削を行ったうえで,添
削にかかった時間・手間について順位を答えてもらう
(同順位可).また,
「従来の添削」と本アプリケーショ
ンや Skitch のような「タッチで描画する添削」どちら
が相手に修正指示を伝えやすいのかについて回答を得
る.さらに,添削の流れ全体を通して「従来の添削」
と「タッチで描画する添削」どちらが便利だったかに
ついても回答を得る.また,Skitch と比較して本アプ
リケーションにあった方がいい機能や消しゴム機能の
有用性について尋ねる.さらに,自由回答式の設問も
用意し,今後研究を進める際に参考になる回答を得る.
添削に掛かった時間の順位
被験者
A
B
C
表2
本アプリ
1
2
1
Skitch
2
1
1
従来の方法
3
3
3
添削に掛かった手間の順位
(単位:位)
被験者
A
B
C
本アプリ
1
1
1
Skitch
2
2
1
従来の方法
3
3
3
3. 2 実験結果
アンケートの回答結果を表 1,表 2 に示す.また,
修正指示を伝えやすい・全体を通して便利なのかにつ
いては 3 人とも「タッチで描画する添削」との回答で
あった.また,Skitch にあるテキスト入力・図形入力・
図形移動などの機能がある方がいいかという質問には
3 人とも「すごく思う(4 段階評価の 4)」と回答した.
なお,消しゴム機能がある方がといいかという質問に
は 2 人が「すごく思う」と回答し,1 人が「あまり思
わない(4 段階評価の 2)」と回答した.自由回答では,
「Canvas の拡大・縮小の追加」,
「より手間を減らせる
よう工夫していくとよい」などの回答があった.
3. 3 考察
添削にかかる時間や手間の面では,Skitch よりも本
アプリケーションが優位であることがわかった.この
長所をさらに伸ばすため,
「添付ファイルを画像化し本
アプリケーションで読み込むまで」の手間を減らす改
良を行う.そこで,画像変換システムを CGI に対応
させれば,
「本アプリケーション上で添付ファイルを指
定すると変換後の画像ファイルが読み込まれるように
する」ことも可能なはずである.それによって「メー
ルの転送」
「URL のコピー」
「URL をテキストフォー
ムに貼り付け」といった手間が削減される.
一方,添削指示を表現する性能面では,Skitch の方
が添削に必要な機能が充実していて使いやすいことが
わかった.本アプリケーションにもテキスト入力,図
形入力,図形移動や拡大・縮小機能が備われば,さら
に添削に便利なツールになることが期待できる.
4.
まとめ
タブレット端末で画像化した文書ファイルに直接文
字を書き込めるアプリケーションの開発を行った.評
価実験により,本アプリケーションは「タブレット端
末での添削において手間を減らす」「修正指示をわか
りやすく伝える」という目標を達成できたことを示し
た.また,消しゴム機能の実装により,類似アプリケー
ションとの差別化を図ることができた.
今後は,添削にかかる手間を減らす工夫を重ね,添
削に必要な機能が充実とで添削の一層の効率化を図る.
参考文献
( 1 ) Skitch,http://skitch.com/jp/
( 2 ) LibreOffice,http://ja.libreoffice.org/
( 3 ) JODConverter,http://www.artofsolving.com/
opensource/jodconverter
( 4 ) ImageMagick,http://www.imagemagick.org/
script/index.php