タブレット端末向け添削支援アプリケーションの開発 Development of a Correction Support Application for Tablet Devices 浅井彬弘 Akihiro ASAI † † † † 松本章代 † Akiyo MATSUMOTO † 東北学院大学教養学部情報科学科 Faculty of Liberal Arts, Tohoku Gakuin University Email: [email protected] あらまし：本アプリケーションはタブレット端末を利用している教員向けに開発するものである．教員宛てに学生から添削依頼や質問がメールの添付ファイルとして送られてきた場合，タブレット端末上で添削することは難しい．タブレット端末では，一度に複数の画面を表示できないため，添付ファイル閲覧画面とメール入力画面を交互に表示しながら添削しなければならないからである．そのため，添削に時間がかかってしまう．よって，画像化した文書ファイルに直接文字を書き込めるアプリケーションの開発を行う．添削の効率化という側面から有用性の検証を行う．キーワード：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