重ね着コーディネート支援システムの提案

重ね着コーディネート支援システムの提案
Proposal of Layering Coordination Support System
データベースシステム学講座 0312012017 伊藤良恵
指導教員: 村田嘉利 鈴木彰真 佐藤永欣
1. はじめに
服装のコーディネートは,着用者の印象やセンス
が直接表現されるため,重要と考える人が多い.一
方,日常的に着回しが必要であることから,洋服や
着用アイテムを購入する際,自分が所持している洋
服との相性を考慮して洋服を購入したいと思う人が
多い.しかし,ショッピングの際には,自分の持っ
ている洋服を確認することが難しい.また,既に所
持している洋服との相性は想像に委ねられているた
め,イメージ通りのコーディネートができるとは限
らない.
そこで,先行研究としてコーディネーション相談
システムを提案し,研究を進めてきた 1)2)3).本稿
ではその改良として,相性を考慮するために必要な
複数枚の重ね着表現機能と,サイズ変更機能を実装
した,重ね着コーディネート支援システムを開発し
た.
割された画像から,透明化したい領域をタップする
ことにより,アイテム画像を作成する.最後に,本
稿で拡張したシステムである図 1(b)で示される重
ね着表現アプリケーションを利用し,登録したアイ
テム画像を複数選択することで,コーディネートを
行う.
(b) アイテム画像作成
アプリケーション
なぞった線
タップ
アイテム画像
撮影
(a) 重ね着表現アプリケーション
2. 関連研究
原田らは,具体的なシステムの制作については述
べていないものの,ユーザが選択したアイテムと,
コーディネート履歴のデータベースをもとに,ユー
ザの嗜好に合致するコーディネートの提示を提案し
た 4).それに対し,先行研究 1)2)では,視覚的なコ
ーディネートシステムを製作し,評価してきた.
斉藤らは,アイテム画像作成アプリケーションを
開発した 3).洋服画像の背景や裏地を透明化し,2
枚のアイテム画像を重ね合わせることで,実際に重
ね着したときに近いコーディネートの状態を表現で
きるようにした.
本研究ではさらに発展させ,3 枚以上の重ね着表
現への対応をし,トータルコーディネート表現がで
きるようにした.また,サイズ調整機能を付け,ア
イテム画像のサイズ差異をなくし,重ね着表現がで
きるようにした.
3. 重ね着コーディネート支援システム
3.1.
システム構成
本システムの利用イメージを図 1 に示す.まず,
スマートフォンのカメラを利用し,持っている洋服
や着用アイテムを撮影する.次に,先行研究 3)で開
発されたアイテム画像作成アプリケーションを利用
する.操作手順は,まず撮影した画像の洋服以外の
背景や,洋服の裏地部分を指でなぞり,分割したい
領域を指定する.次に,図 1(a)に示すように,分
図1
3.2.
利用イメージ図
重ね着表現の実現方法
図 1(a)で示された画像を利用し,図 1(b)の重
ね着表現アプリケーションで重ね着の表現を実現す
る.図 2 に重ね着表現アプリの構成を示す.重ね着
表現アプリは,ギャラリー画面とキャンパス描画画
面から構成される.キャンパス描画画面において,
提案するサイズの調整と重ね着における前面,背面
の処理を行う.図 3 は,図 2 のキャンパス描画画面
で行う重ね着表現の流れを示している.まず,図 3
②と③のように,背景のみを透過した画像データを,
最も外側に着ている洋服から最も内側に着ている洋
服まで順に上から重ねて表示する.次に図 3④と⑤
のように,背景と裏地を透過した画像データを最も
内側に着ている洋服から最も外側に着ている洋服ま
で順に上から重ねる表示を行うことにより,実際に
洋服を重ね着したときのような順序関係を実現する.
画面描画は,リアルタイム処理を必要とするため,
アプリケーションスレッドと UI スレッドが独立し,
別スレッドから直接 UI 操作を行うことができる
SurfaceView の Canvas を利用した.図 4 は2つのア
イテム画像の重ね着表現をした UI を示している.ま
た,図 4 に表示している各ボタンを使って,現在選
択されているアイテム画像の移動,削除,撮影を行
う.
重ね着表現アプリ
背景切り抜き
画像
外部
ストレージ
ギャラリー
サイズ調整
画像選択
キャンバス
描画
前面 背面
処理
背景切り抜き画像
背景・裏地切り抜き画像
ファイル名で組み合わせを認識
図2
重ね着表現アプリの構成
①
②
④
図3
3.4.
アイテム画像一覧表示方法
図 4(b)を左にスライドすると,図 5 で示すギャ
ラリーとして,アイテム画像を一覧表示する.アプ
リケーション内のデータ領域には,ユーザが作成し
たアイテム画像を書き込むことは不可能であり,ア
イテム画像データを追加することはできない.そこ
で,SDCard による外部ストレージを利用し,アイテ
ム画像一覧表示を実現した(図 2 参照).
ギャラリーから画像を選択して,メイン画面の
Canvas に画像が表示される際には,背景のみを透過
した画像と,背景と裏地を透過した画像どちらも読
み込み,重なって表示されるようにする.背景を透
過した画像名から,一定の命名規則に則り背景と裏
地を透過した画像名をつけることにより,アイテム
画像を一対で読み込む.
4. システムの動作確認
③
本システムにおいて提案した部分の動作検証を行
った.動作検証では,NEXUS7 を用い,複数枚洋服の
撮影と,アイテム画像作成アプリケーションによる,
アイテム画像の作成を行った.作成後,ギャラリー
に作成した画像が新しく表示できているか検証した.
その結果,複数のアイテム画像をタップし選択し
た上で,アイテムのサイズ調整や重ね着表現が出来
ていることを確認できた.
⑤
重ね着表現の流れ
5. まとめと今後の展望
本研究では,重ね着表現に対応させたコーディネ
ーション相談システムの機能を拡張し,複数枚の重
ね着表現やサイズ調整機能,画像一覧表示機能の実
装および動作確認を行った.
今後は,着用者以外の意見をもとに,コーディネ
ートを伝えるようにする.そのため,通信機能を追
加させる.また,本システムのコーディネートにお
ける有用性について評価を行う.
(a)
(b)
図4
3.3.
重ね着表示
画面
図5
アイテム一覧
表示画面
サイズ調整方法
アイテム画像のサイズ調整は,画像のサイズを拡
縮することにより表現した.表示された洋服をタッ
プして選択すると,図 4(a)のアイテム画像右上に
あるハンドルが出現し,ハンドルをスライドさせる
ことで,アイテム画像の中心位置とスライドした位
置までのサイズに画像データをリサイズする.これ
により,あらゆるアイテム画像のサイズに合わせた
重ね着が表現できる.
参考文献
1)三矢慶子ほか,“コーディネーション相談システ
ムの提案”,情処大 73 回,1-Z6,2011
2)渡邉優香ほか,“Web を利用したコーディネーシ
ョン相談システム”,情処大 74 回,2ZC-5,2012
3)斎藤慎弥ほか,“コーディネーション相談システ
ムにおける洋服の重ね着表現の開発”
http://www.soft.iwate-pu.ac.jp/~spa-g/IPU/
PBL/poster/2012/PBL2012-02.pdf
4)原田史子ほか,“アイテム組合せポリシーを考慮
した協調フィルタリングによる服装コー ディネ
ート支援”,情処大 71 回,2C-5(2009)