Deconaby: ウェブ上の画像に対する解説アニメーション付与システム

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