kara-Sラボ第3期レビューチーム活動報告「Mr.reviewはおしゃれ」

京都精華大学 kara-S ホーム > kara-Sラボ > kara-Sラボ第3期レビューチーム活動報告「Mr.reviewはおしゃれ」

kara-Sラボ第3期レビューチーム活動報告「Mr.reviewはおしゃれ」

kara-Sラボ活動とは

半年に一度、京都精華大学のデジタルコンテンツ制作に興味のある学生が研究生として集まり、
Flashを始めとした様々な技術を使用した作品制作を行っています。
kara-Sラボ第3期は2011年10月より開講。
ラボ生の活動の様子をご覧になりたい方はこちら

kara-Sラボ第3期レビューチーム作品「Mr.reviewはおしゃれ」

今期は「お店で役立つデジタルコンテンツ」というテーマのもと３チームに分かれ、
kara-SのSHOPスペースで実際-に設置することを目標に企画・制作を行ってきました。

「Mr.reviewはおしゃれ」は「商品への寄せ書き」をコンセプトに、
誰でも気軽にkara-Sのショップに置いてある商品にレビューを残す事が出来ます。
この作品の特徴である手書きPOP風のレビューはiPadから操作する事で可能となっており、
誰でも簡単に気に入った商品に対して手描きのレビューを描き、共有する事が出来ます。

開発にはCakePHP、HTML5、CSS3、Javascriptを使用しています。

「Mr.reviewはおしゃれ」
http://review.kara-s.jp/

-インスタレーション内容-

1.商品を選んで　2.レビューを描いて　3.展示しよう！

「Mr.reviewはおしゃれ」はiPadから簡単にお店に置いてある商品のレビューを残す事が出来ます。

１、商品を選ぶ
インスタレーション内容ー商品を選ぶ

数ある商品の中から自分の気に入った商品、
レビューを描きたい商品を選択する事ができます。
また商品の情報だけでなく、他の人が描いた
レビューを閲覧することもできるので、
購入の参考にすることができます。

２、レビューを描く
インスタレーション内容ーレビューを描く

iPadの画面に直接指で描く事が出来るので、
自由にレビューを残す事が出来ます。

３、レビューを飾る
インスタレーション内容ーレビューを飾る

描き終わったレビューはリアルタイムで
商品ページに反映されます。

文字だけでなくイラストや装飾などアイデア次第で様々なレビューを描く事が出来ます。
またお持ちのPCやiPad、iPhoneからも閲覧、投稿する事が出来るので商品のご購入後などにも是非
ご利用下さい。

「Mr.reviewはおしゃれ」
http://review.kara-s.jp/

-技術紹介-

<canvasタグを使用しiPad上で手描きを再現>
技術紹介ー指でレビューを描く

「Mr.reviewはおしゃれ」はHTML5のCanvasを使用して制作しているので、
iPadから指で思うようにレビューを描く事が出来ます。
ペンの色は全５色、太さは３種類ありますのでより自由に描く事が出来ます。
真っ白なキャンバスに思いのままに描写することができるので、
従来の投稿型レビューのように文字数に制限があるなどの制約は一切ありません。

<Canvasタグでの手描き描写>
技術紹介ーCanvasタグでの手描き描写

１、指で画面をタッチします。
２、タッチされた位置をJavaScriptで取得します
３、取得された位置に、Canvasタグ内で線を描写します。

この処理を行う事により、手描き感覚で画面に図を描く事が出来ます。

canvasとは
ブラウザ上に図を描くために策定されたタグで、FlashやJavaのようにプラグインを使わずに、
JavaScriptベースで図を描く事が出来ます。
HTML上で図を表現できるので、今までのようにあらかじめjpegなどの画像を用意する必要もありません。

【参考】HTML5.jp-canvasとは

＜CSS3、JavaScriptでアニメーションを制作＞
技術紹介ーCSS3、Javaの使用

今回はFlashが再生できないiPadでの制作ということで、CSS3とJavascriptを使用し、
ページ上のアニメーションを制作しました。
トップページでのキャラクターの移動や、タッチ操作でのスクロールにも使用しています。