Embed Size (px)
Citation preview
ウェブ上のコンテンツに対する視覚的装飾手法の提案
松田滉平（明治大学 B3/JST CREST）中村聡史（明治大学 /JST CREST）
HCG シンポジウム2015/12/16
URL を用いたコンテンツ共有
様々な SNSで URLベースのコンテンツの共有が行われている
URL を用いたコンテンツ共有
ここの料理こんな風にうまかった！http://ryori.co.jp/kushiage
今度行ってみようかな
既存のコンテンツに自身の意図を込めて他者と共有したい
背景
• コミックで使用される効果線- 集中線- たれ線- スピード線 ( 流線 )
表情付けやインパクトを出すのに効果的
関連研究
• エフェクト（集中線など）はコンテンツの面白さや状況の把握し易さを増幅可能
- ライブカメラに漫画的手法 [ 高橋ら 2007]
目的
• ウェブ上の任意のマルチメディアコンテンツを装飾
• 装飾したコンテンツを他の人と共有
自分好みにウェブ上のコンテンツに装飾を付与して演出を可能にする
サーバ
装飾 ID付き URLを伝えるユーザA
ユーザB
装飾 ID URL 装飾データ装飾 ID URL 装飾データ#deco_id=AAAAA http://example.jp [{“mode”:
[1],”img_src”:[http://sample1.jpg]}]
装飾 ID URL 装飾情報#deco_id=AAAAA http://example.jp [{“mode”:
[1],”img_src”:[http://sample1.jpg]}]
#deco_id=BBBBB http://example.com [{“mode”:[3],”img_src”:[http://sample2.jpg]}]
データベース
装飾情報
装飾情報
• 装飾ページ URL• 装飾 ID （一意に装飾を識別）• 装飾記述
• 装飾パターン ＋ ページ内の画像情報• 装飾パターン ＋ 動画の装飾開始および終了時間
装飾 ID#deco_id=AAAAA#deco_id=BBBBB
サイトの URLhttp://example.jphttp://example.com
エフェクトの種類deco_mode=12
画像： 画像の URLURL_src=http://～
動画： 装飾指定時間
装飾 ID の URL への埋め込み
•HTML のハッシュ要素を利用- ハッシュ要素： ページ内の場所を指定- http://example.jp/test.html#deco_id=AAAAA- http://example.jp/test.html#deco_id=BBBBB
• システムを導入している場合- ハッシュ要素の ID を利用してサーバに問い合わせし，装飾データを読み込む
• システムを導入していない場合- 装飾なしのオリジナルのページにアクセス
別々の装飾
プロトタイプシステム
• ブラウザ (Chrome) 拡張で実装• 使用言語 ( スクリプトを含む )
- JavaScript/jQuery/P5.js/PHP/MySQL
デモ
• ウェブ上の任意の画像に装飾を付与- 印象を付与して相手に伝える
プロトタイプシステムの試用
• 実際にシステムを利用し，コンテンツを装飾してもらった
-8 名が 22 件の動画に対して装飾-4 名が 26 件のウェブページの画像に対して装飾
ユーザフィードバック
• 手軽に装飾を付与出来て面白い
• もっとエフェクトが欲しい• 現状はマイナス面の装飾が多い• キラキラしたエフェクトなどのように，プラスに
見せるエフェクトが欲しい
• 画像や動画の全体ではなく，一部に対してエフェクトを付与したい
• 「集中線」の使用頻度が高い- 動画のシーンやページの注目部分の表現に利用- 集中線のパターンを増やすことが重要？
• 静的な画像への動的な装飾の面白さ- 動きによって画像を際立たせることが可能
考察（装飾コンテンツから）
• コンテンツとエフェクトの相性- 装飾によって画像や動画が見えづらくなる- エフェクトのパラメータ変更の必要性
• 印象をエフェクトで表現- 文章よりも自身の気持ちに近い表現
考察（装飾コンテンツから）
装飾手法の応用
• ウェブコミックにおけるコマ識別が可能になるとコマ単位で装飾可能に
装飾手法の応用
• ウェブ画像・動画への自動装飾の可能性• 膨大なコミックでの効果線情報を収集＆学習
ウェブページのコンテンツに適した装飾
装飾手法の応用
• ユーザの嗜好に合わせたサイト- ユーザが気に入る商品を強調するよう自動装飾
• 将来的にスタイルシートの一部として- CSS の表現の一部として記述することで手軽に装飾Img.example1{ decoby : focus_line;}
まとめ
• ウェブ上の任意のマルチメディアコンテンツに対して視覚的装飾を付与する手法の提案
• 装飾したコンテンツを共有する仕組み
• 今後の課題- ウェブコミックへの応用- エフェクトを増やす仕組み- エフェクトによる印象実験
