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

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

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

• https://blog.codecamp.jp/hidemaru

背景 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 ダウンロードはこちら Deconabyで検索！ または http://deconaby.club/

装飾：カーソルモード

装飾：指モード

装飾：足跡モード

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

• http://example.jp

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

装飾なしの評価の平均点が負となるページの結果 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件の わかりやすさが増加 わかりにくいページは アニメーション付与 により改善! 装飾ありとなしの平均点に 有意な差が認められた

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

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

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

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

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

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

応用：ゲームのマップ

応用：学習支援

応用：一筆書き

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

応用：装飾モードの追加

まとめ http://deconaby.club/ • 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 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

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