Embed Size (px)
Citation preview
Deconaby:ウェブ上の画像に対する解説アニメーション付与システム
樋川 一幸 （明治大学総合数理学部 3 年） 松田 滉平 中村 聡史 （明治大学総合数理学部）
デモ
https://blog.codecamp.jp/hidemaru
http://peachcle.com/installing-processing-to-mac#DeconaId=14806004119336
HOWTO ページがわかりづらいパターン
1. 文章がわかりづらい
2. 画像がわかりづらい
3. 文章と画像の対応がわかりづらい
背景
HOWTO ページ- 画像とテキスト両方の理解が必要
背景
HOWTO ページ- 画像とテキスト両方の理解が必要
背景
例：用語がわからない人
プラグイン
ディレクトリ
環境変数 ドライブ
OS
HOWTO ページ- 画像とテキスト両方の理解が必要
背景
例：英語が苦手な人Hello
HOWTO ページ- 画像とテキスト両方の理解が必要
背景
例：フランス語が苦手な人Bonjour
HOWTO ページ- 画像とテキスト両方の理解が必要
背景
例：オランダ語が苦手な人Goede middag
HOWTO ページ- 画像とテキスト両方の理解が必要
背景
例：アラビア語が苦手な人 عليكم السالم
想定されるシチュエーション
パソコン操作関係の HOWTO- 家族に Skype のインストールの方法を教えたい- 生徒に授業で使うツールのダウンロード方法を教えたい
操作手順を教えたい- 友達に YouTube の動画の投稿の仕方を教えたい
道順や経路を教えたい
ページや動画を作ればいいのでは？
わざわざ作るのは面倒なので元からあるコンテンツを再利用！！
目的
•HOWTO ページにアニメーション付与
•アニメーションを他人と共有
HOWTO ページをわかりやすくする手法を実現
画像にアニメーションを付与
アニメーションならわかりやすい！
提案システム
実装
ブラウザ（ Chrome ）拡張で実装
使用言語（スクリプトを含む）- JavaScript/jQuery/P5.js/PHP/MySQL
http://deconaby.club/
ダウンロードはこちら Deconaby で検索！または
装飾：カーソルモード
装飾：指モード
装飾：足跡モード
共有手法
URL とハッシュ値を利用した共有
http://example.jp #ID=XXXXX
ハッシュ値
実験
システムの有用性の検証
25 件
10 人25 件
500 件のデータ !!
ページのわかりやすさを 5 段階 (-2~+2) で評価
No. なし あり4 -1.2 -0.49 -0.25 0.610 -0.4 021 -0.8 -0.223 -0.8 -0.225 -0.6 0.828 -0.6 -0.633 -0.6 0.638 -0.4 041 -0.8 -0.444 -1 0.246 -0.8 -0.648 -1.4 -0.449 -1 1.6平均 -0.76 0.071
14 件中 13 件のわかりやすさが増加
わかりにくいページはアニメーション付与により改善 !
装飾ありとなしの平均点に有意な差が認められた
装飾なしの評価の平均点が負となるページの結果
考察：特徴的な装飾
ぐるぐると囲むような装飾
考察：特徴的な装飾
指でなぞる装飾
考察：特徴的な装飾
迂回する経路
迂回通常
考察：システムの利点
•ユーザ同士ならではの装飾が可能- おすすめの経路- 住んでいる場所からの経路- 相手の環境に合わせた操作方法
•ユーザの苦手な言語のページでも アニメーションでなら理解が可能
考察：システムの欠点
•操作アニメーションがクリックのみなので表現に限界がある
•HOWTO ページが見つからないと 何もできない
応用： Gyazo での利用
HOWTO ページが見つからなくてもアニメーション付きの画像を共有可能
応用：ゲームのマップ
応用：学習支援
応用：一筆書き
応用：文字の書き順を示す
応用：装飾モードの追加
まとめ
•HOWTO に関するページにアニメーションを付与する手法の提案•アニメーションを共有する仕組みの実現
今後の課題-記録可能な操作パターンの追加- スマホや他のブラウザ上でアニメーションを閲覧できるサービスの実装
http://deconaby.club/
関連研究
[Marcel 2009]
オンラインでリアルタイムに文章や手書きを共有
ブラウジングを同期して支援
[ 中村 2010]
関連研究
グラフィカルなアノテーション付与
[Giordano 2005]
関連研究
Decoby [ 松田 2015]
関連研究
ブラウザ上での操作を記録し，習慣的操作の軽減
[椿 2011]
操作ログを利用し，支援が必要と判断される場面を検出してハイライト表示
[ 中村 2009]
実験結果
50 件全体
ジャンル内訳• PC 操作 20 件
• スマホ操作 12 件
• 地図 5 件
• その他 13 件
結果平均 なし 0.218 点 あり 0.51 点対応のない t 検定t(98)=2.06, p=0.04
No. なし あり4 -1.2 -0.49 -0.25 0.610 -0.4 021 -0.8 -0.223 -0.8 -0.225 -0.6 0.828 -0.6 -0.633 -0.6 0.638 -0.4 041 -0.8 -0.444 -1 0.246 -0.8 -0.648 -1.4 -0.449 -1 1.6平均 -0.76 0.071
ジャンル内訳組み立て 4PC 操作 9,10,21,23,25,28,44,46スマホ操作 33地図 38,49迷路 41フローチャート 48
うち外国語 48,49
t(19)=4.40, p=0.0003
装飾なしの評価の平均点が負となるページの結果
実験協力者の平均点
協力者 なし あり
A -0.28 0.72
B -0.16 0.28
C 0.56 1.16
D -0.04 1.04
E 0.72 0.24
F 1 0.68
G 0.32 -0.24
H -0.08 0.44
I 0.48 0.36
J -0.4 0.48
平均 0.212 0.516
