Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

178 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Deconaby:ウェブ上の画像に対する 解説アニメーション付与システム 樋川 一幸 (明治大学総合数理学部3年) 松田 滉平 中村 聡史 (明治大学総合数理学部)
  2. 2. デモ https://blog.codecamp.jp/hidemaru
  3. 3. HOWTOページがわかりづらいパターン 1. 文章がわかりづらい 2. 画像がわかりづらい 3. 文章と画像の対応がわかりづらい 背景
  4. 4. HOWTOページ - 画像とテキスト両方の理解が必要 背景
  5. 5. HOWTOページ - 画像とテキスト両方の理解が必要 背景 例:用語がわからない人 プラグイン ディレクトリ 環境変数 ドライブ OS
  6. 6. HOWTOページ - 画像とテキスト両方の理解が必要 背景 例:英語が苦手な人 Hello
  7. 7. HOWTOページ - 画像とテキスト両方の理解が必要 背景 例:フランス語が苦手な人 Bonjour
  8. 8. HOWTOページ - 画像とテキスト両方の理解が必要 背景 例:オランダ語が苦手な人 Goede middag
  9. 9. HOWTOページ - 画像とテキスト両方の理解が必要 背景 例:アラビア語が苦手な人 ‫السالم‬‫عليكم‬
  10. 10. 想定されるシチュエーション パソコン操作関係のHOWTO - 家族にSkypeのインストールの方法を教えたい - 生徒に授業で使うツールのダウンロード方法を教えたい 操作手順を教えたい - 友達にYouTubeの動画の投稿の仕方を教えたい 道順や経路を教えたい ページや動画を作ればいいのでは? わざわざ作るのは面倒なので 元からあるコンテンツを再利用!!
  11. 11. 目的 •HOWTOページにアニメーション付与 •アニメーションを他人と共有 HOWTOページをわかりやすくする 手法を実現
  12. 12. 画像にアニメーションを付与 アニメーションならわかりやすい!
  13. 13. 提案システム
  14. 14. 実装 ブラウザ(Chrome)拡張で実装 使用言語(スクリプトを含む) -JavaScript/jQuery/P5.js/PHP/MySQL http://deconaby.club/ ダウンロードはこちら Deconabyで検索! または
  15. 15. 装飾:カーソルモード
  16. 16. 装飾:指モード
  17. 17. 装飾:足跡モード
  18. 18. 共有手法 URLとハッシュ値を利用した共有 http://example.jp #ID=XXXXX ハッシュ値
  19. 19. 実験 システムの有用性の検証 25件 10人 25件 500件の データ!! ページのわかりやすさを5段階(-2~+2)で評価
  20. 20. No. なし あり 4 -1.2 -0.4 9 -0.25 0.6 10 -0.4 0 21 -0.8 -0.2 23 -0.8 -0.2 25 -0.6 0.8 28 -0.6 -0.6 33 -0.6 0.6 38 -0.4 0 41 -0.8 -0.4 44 -1 0.2 46 -0.8 -0.6 48 -1.4 -0.4 49 -1 1.6 平均 -0.76 0.071 14件中13件の わかりやすさが増加 わかりにくいページは アニメーション付与 により改善! 装飾ありとなしの平均点に 有意な差が認められた 装飾なしの評価の平均点が負となるページの結果
  21. 21. 考察:特徴的な装飾 ぐるぐると囲むような装飾
  22. 22. 考察:特徴的な装飾 指でなぞる装飾
  23. 23. 考察:特徴的な装飾 迂回する経路 迂回通常
  24. 24. 考察:システムの利点 • ユーザ同士ならではの装飾が可能 -おすすめの経路 -住んでいる場所からの経路 -相手の環境に合わせた操作方法 • ユーザの苦手な言語のページでも アニメーションでなら理解が可能
  25. 25. 考察:システムの欠点 • 操作アニメーションがクリックのみな ので表現に限界がある • HOWTOページが見つからないと 何 もできない
  26. 26. 応用:Gyazoでの利用 HOWTOページが見つからなくても アニメーション付きの画像を共有可能
  27. 27. 応用:ゲームのマップ
  28. 28. 応用:学習支援
  29. 29. 応用:一筆書き
  30. 30. 応用:文字の書き順を示す
  31. 31. 応用:装飾モードの追加
  32. 32. まとめ • HOWTOに関するページにアニメーションを 付与する手法の提案 • アニメーションを共有する仕組みの実現 今後の課題 -記録可能な操作パターンの追加 -スマホや他のブラウザ上でアニメーショ ンを閲覧できるサービスの実装 http://deconaby.club/
  33. 33. 関連研究 [Marcel 2009] オンラインでリアルタイムに文 章や手書きを共有 ブラウジングを同期し て支援 [中村 2010]
  34. 34. 関連研究 グラフィカルなアノテーション付与 [Giordano 2005]
  35. 35. 関連研究 Decoby [松田 2015]
  36. 36. 関連研究 ブラウザ上での操作を 記録し,習慣的操作の軽減 [椿 2011] 操作ログを利用し,支援が必要 と判断される場面を検出してハ イライト表示 [中村 2009]
  37. 37. 実験結果 50件全体 ジャンル内訳 • PC操作 20件 • スマホ操作 12件 • 地図 5件 • その他 13件 結果 平均 なし0.218点 あり0.51点 対応のないt検定 t(98)=2.06, p=0.04
  38. 38. No. なし あり 4 -1.2 -0.4 9 -0.25 0.6 10 -0.4 0 21 -0.8 -0.2 23 -0.8 -0.2 25 -0.6 0.8 28 -0.6 -0.6 33 -0.6 0.6 38 -0.4 0 41 -0.8 -0.4 44 -1 0.2 46 -0.8 -0.6 48 -1.4 -0.4 49 -1 1.6 平均 -0.76 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. 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

×