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

147 Views

March 08, 17

スライド概要

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

profile-image

明治大学 総合数理学部 先端メディアサイエンス学科 中村聡史研究室

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

Deconaby:ウェブ上の画像に対する 解説アニメーション付与システム 樋川 一幸 (明治大学総合数理学部3年) 松田 滉平 中村 聡史 (明治大学総合数理学部)

2.

デモ https://blog.codecamp.jp/hidemaru

3.

背景 HOWTOページがわかりづらいパターン 1. 文章がわかりづらい 2. 画像がわかりづらい 3. 文章と画像の対応がわかりづらい

4.

背景 HOWTOページ - 画像とテキスト両方の理解が必要

5.

背景 HOWTOページ - 画像とテキスト両方の理解が必要 例:用語がわからない人 ディレクトリ OS プラグイン 環境変数 ドライブ

6.

背景 HOWTOページ - 画像とテキスト両方の理解が必要 例:英語が苦手な人 Hello

7.

背景 HOWTOページ - 画像とテキスト両方の理解が必要 例:フランス語が苦手な人 Bonjour

8.

背景 HOWTOページ - 画像とテキスト両方の理解が必要 例:オランダ語が苦手な人 Goede middag

9.

背景 HOWTOページ - 画像とテキスト両方の理解が必要 例:アラビア語が苦手な人 ‫السالم عليكم‬

10.

想定されるシチュエーション パソコン操作関係のHOWTO - 家族にSkypeのインストールの方法を教えたい ページや動画を作ればいいのでは? - 生徒に授業で使うツールのダウンロード方法を教えたい 操作手順を教えたい - 友達にYouTubeの動画の投稿の仕方を教えたい わざわざ作るのは面倒なので 元からあるコンテンツを再利用!! 道順や経路を教えたい

11.

目的 HOWTOページをわかりやすくする 手法を実現 • HOWTOページにアニメーション付与 • アニメーションを他人と共有

12.

画像にアニメーションを付与 アニメーションならわかりやすい!

13.

提案システム

14.

実装 ブラウザ(Chrome)拡張で実装 使用言語(スクリプトを含む) -JavaScript/jQuery/P5.js/PHP/MySQL ダウンロードはこちら Deconabyで検索! または http://deconaby.club/

15.

装飾:カーソルモード

16.

装飾:指モード

17.

装飾:足跡モード

18.

共有手法 URLとハッシュ値を利用した共有 http://example.jp #ID=XXXXX ハッシュ値

19.

実験 システムの有用性の検証 500件の データ!! 25件 25件 10人 ページのわかりやすさを5段階(-2~+2)で評価

20.

装飾なしの評価の平均点が負となるページの結果 No. 4 9 10 21 23 25 28 33 38 41 44 46 48 49 平均 なし -1.2 -0.25 -0.4 -0.8 -0.8 -0.6 -0.6 -0.6 -0.4 -0.8 -1 -0.8 -1.4 -1 -0.76 あり -0.4 0.6 0 -0.2 -0.2 0.8 -0.6 0.6 0 -0.4 0.2 -0.6 -0.4 1.6 0.071 14件中13件の わかりやすさが増加 わかりにくいページは アニメーション付与 により改善! 装飾ありとなしの平均点に 有意な差が認められた

21.

考察:特徴的な装飾 ぐるぐると囲むような装飾

22.

考察:特徴的な装飾 指でなぞる装飾

23.

考察:特徴的な装飾 迂回する経路 通常 迂回

24.

考察:システムの利点 • ユーザ同士ならではの装飾が可能 - おすすめの経路 - 住んでいる場所からの経路 - 相手の環境に合わせた操作方法 • ユーザの苦手な言語のページでも アニメーションでなら理解が可能

25.

考察:システムの欠点 • 操作アニメーションがクリックのみな ので表現に限界がある • HOWTOページが見つからないと もできない 何

26.

応用:Gyazoでの利用 HOWTOページが見つからなくても アニメーション付きの画像を共有可能

27.

応用:ゲームのマップ

28.

応用:学習支援

29.

応用:一筆書き

30.

応用:文字の書き順を示す

31.

応用:装飾モードの追加

32.

まとめ http://deconaby.club/ • HOWTOに関するページにアニメーションを 付与する手法の提案 • アニメーションを共有する仕組みの実現 今後の課題 -記録可能な操作パターンの追加 -スマホや他のブラウザ上でアニメーショ ンを閲覧できるサービスの実装

33.

関連研究 オンラインでリアルタイムに文 章や手書きを共有 [Marcel 2009] ブラウジングを同期し て支援 [中村 2010]

34.

関連研究 グラフィカルなアノテーション付与 [Giordano 2005]

35.

関連研究 Decoby [松田 2015]

36.

関連研究 ブラウザ上での操作を 記録し,習慣的操作の軽減 [椿 2011] 操作ログを利用し,支援が必要 と判断される場面を検出してハ イライト表示 [中村 2009]

37.

実験結果 50件全体 ジャンル内訳 • PC操作 20件 • スマホ操作 12件 • 地図 5件 • その他 13件 結果 平均 なし0.218点 あり0.51点 対応のないt検定 t(98)=2.06, p=0.04

38.

装飾なしの評価の平均点が負となるページの結果 No. 4 9 10 21 23 25 28 33 38 41 44 46 48 49 平均 なし -1.2 -0.25 -0.4 -0.8 -0.8 -0.6 -0.6 -0.6 -0.4 -0.8 -1 -0.8 -1.4 -1 -0.76 あり -0.4 0.6 0 -0.2 -0.2 0.8 -0.6 0.6 0 -0.4 0.2 -0.6 -0.4 1.6 0.071 ジャンル内訳 組み立て 4 PC操作 9,10,21,23,25,28,44,46 スマホ操作 33 地図 38,49 迷路 41 フローチャート 48 うち外国語 48,49 t(19)=4.40, p=0.0003

39.

実験協力者の平均点 協力者 なし あり 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 平均