WWW.AKIRAFUKUOKA.COM BLOG

【作ってみた】fladdictさん流サングリア

2011.05.31 Food

sangria_0.jpg

ここのところがんばって書いたエントリーが続いたので閑話休題。去年漬けた漫画「うめぼし」の柿のラム酒漬(漫画食堂さんのエントリー)をほぼ飲みきってしまったので、開いた瓶を有効活用したい、しかし梅酒にはちょっと早いのかな…?と思って以前fladdictさんが紹介していた美味しいサングリアのレシピを思い出し、週末に一念発起。早速作ってみました。用意したのは以下の材料+α。

sangria_1.jpg

レシピはほとんどfladdictさんの「fladdict製サングリア19号」と同じですが、シナモンスティックを2本から1本に、キウイ、不二家ネクターを追加したりと余計なことをしたりしています。写真には写ってませんがマンゴー超重要です(自分の中では)。生がなければジュースでもいいのかも。

sangria_2.jpg

材料を適当に切ります。オレンジは分厚い皮はレシピの通り捨てます。薄皮までは剥いていられないので、成分がしみ出すように真ん中で切っちゃいましょう。切った果物を容器に入れて、ナツメグ、シナモンスティックを投入。八角は手でばらばらにしながら。関係ないですけどテレビであの六角精児さんがバツ3と聞いて戦慄しました。本人曰く「仕事もしないで飲んだくれてたらそりゃそうなるよ!」とのこと。ちなみに六角さん、今結婚されてます。

sangria_3.jpg

こんな感じ。でここから常温6時間、冷蔵庫で18時間、書いてある通り待つ。そして冒頭の写真の通りの出来上がりに。マンゴーの甘い香りが強くてびっくり。あんまり蜂蜜は入れなかったんですがネクターのおかげかちゃんと甘く仕上がっていました。fladdictさんおいしいレシピをありがとうございます!

ちなみに中に入れた果物は1日で取りだしてました。タイミングはお好みでしょうがあんまり長いこと入れておかない方が良さそうです。

sangria_4.jpg

柿酒とサングリアの残り。次回は梅酒チャレンジですね!

今VJするならブラウザででしょ! HTML5でVJアプリ「Fi-VJ」を制作しました

2011.05.18

fivj_1.jpg

HTML5ならのVJアプリだって作れるはず!で、作りました

Fi-VJ ver1.02
デモページはこちら
ファイルダウンロードはこちら (ver1.02)

DLしたら@akirafukuokaに声をかけていただけると嬉しいです!!

Fi-VJ(ファイブイジェイ)というVJアプリを極々個人的に制作しました。MacのネイティブアプリでもなければiPhone/iPadアプリでもありません。ブラウザで動くHTML5-VJアプリです。確認済み動作環境はMac版Safari 5.0.5だけです。他のブラウザでは確認してません(デモページはSafariとChromeで動くようですが)。というかローカル実行ではSafari以外ではまず動きません。これに関する解説は後ほど。

ここ数年ビデオミキサーにiPhoneやiPodを繋いでプレイしていた私ですが、そろそろPCを使ったVJに戻ろうかと思ったのがちょうど一年前。そのときいのくまさんの超絶かっこいいiPad用VJアプリのモックアップ"vPad(仮)"を見て「この手があったか!」と感動したもののiPadアプリなんて作れず、すぐに作れる手段を考えたときHTML5が思い浮かびました。videoタグもあればcanvasタグもある、これならいけるのでは…!! それから1ヶ月ほどして最初のバージョンが完成。去年末に行ったRaw-Fi 3Dでは私の出番では全てこのブラウザアプリを使ってVJプレイをしました。少なくとも自分のプレイスタイルなら実用に堪える性能です。

そんなわけで、そもそも自分用に作ったブラウザアプリですが、せっかく手を入れたしついでに公開してみるか、ということになりました。あくまで「自分仕様」なものなので人様がまじめに使えるものとは思えませんが、これで「html5のポテンシャルってけっこうすごいんだね」とか「フクオカさんがんばったね、えらいね」と思っていただければ幸いです。では具体的な機能説明を。

これ以降の解説はFi-VJ ver1.00における使用方法です。ご注意ください。

4つのvideoタグと1つのキャンバスを操る

fivj_0.jpg

Fi-VJの画面は左半分、右半分でそれぞれ別の機能を持っています。

左半分はvideoタグプレイヤー。普通ビデオミキサーと言うと2チャンネルの切り替えが普通ですが、PCDJにも4チャンネルブームが到来してるのでそれに負けじと4チャンネルコントロールできるようにしました。へへーっ、誰もこの発想は無かったでしょ。無茶です。でもやりました。それぞれのチャンネルは中央のローテートフェーダーで切り替えます。各チャンネルのサムネールをクリックする事で瞬時に切り替えることも可能。また全てのチャンネルで独立して再生/一時停止、ループキューの機能を備えています。

Fi-VJは暫定的にキーボードショートカットも備えていて、Q、R、A、Fキーがそれぞれビデオトラックの一発切り替えに対応してます。これでぱちぱち切り替えるのが僕のプレイスタイルです。

当初フェーダーはタッチパッド風のインターフェースにする予定でしたが、それだと複数のチャンネルがアルファを持つ状態になってしまうため処理を圧迫する結果に。しぶしぶ直線的にしか進まないローテートフェーダーというインターフェースを考えました。副次的にくるくる回すとなんか楽しい!という効能も発生してこれはこれで円満解決。

右半分はcanvasタグプレイヤーです。機能的にはエフェクターですね。先に白状しますが、僕の実装がヘッタクソなせいかけっこう重いです。現状ではvideoタグプレイヤーの操作に飽きたときにちょこっといじってもらえれば、というポジション。映像を反転させるMIRROR、映像が乱れるNOISE、テキストをのせるSUPER IMPOSE、ぽこぽこと図形を描画するDRAWの4種類のエフェクトを搭載しています。エフェクトのかかり具合はタッチパッドやスライダー、ツマミ、トグルスイッチなど専用のインターフェースで操作可能です。

ここまで説明したところで本当にFi-VJを使う人が現れるかどうかわかりませんが、念のためファイルをダウンロードしてから先のセットアップに関してもご説明しましょう。

DLしてからセットアップまでの一連の流れ

fivj_2.jpg

DLしたファイルを展開するとこんな感じになります。Fi-VJが読み込めるビデオフォーマットは.mov.mp4.m4vだけです。要注意。このフォーマットのファイルをまずvideoフォルダに格納しましょう。

fivj_6.jpg

index.htmlを開きます。ブラウザのポップアップブロックは解除しておいてください。でないとちゃんと起動しません。index.htmlともう一つ小さい画面でvideo.htmlが開きます。それぞれプレイヤー、ビュアーと呼ぶことにします。プレイヤー右上に「SETTINGS」ボタンがあるのでこれをクリック、すると設定画面へ。

fivj_5.jpg

設定画面左側はビュアーのサイズなどを設定する場所、右側はビデオ素材を読み込む場所です。では、先ほどvideoフォルダに格納した映像ファイルを、設定画面右下の点線内部にドラッグアンドドロップします。

fivj_3.jpg

ファイルが読み込まれたら、それぞれの映像のサムネールをスライダーで調整します。調整が終わったら「ADD MOVIE」ボタンをクリックしましょう。これで映像ファイルが追加されました。では設定画面左上の「BACK」ボタンを押してプレイヤー画面に戻りましょう。さあこれでVJできますよ。

fivj_4.jpg

ちなみにプレイヤー右下端にぺろっとくっついている紙切れはメモスペースです。イベントのタイムテーブルや何分押しとかの情報をここに書いておくと便利です。個人的にこういった予定を書くスペースが欲しいことが多々あったので実装してみました。

現状で把握していたり見て見ぬふりをしている問題点

さあ、Fi-VJの一連の機能をご紹介しましたが、現時点でのブラウザの仕様や僕のざっくり実装のお陰で問題箇所も多いです。

・ローカル実行時Chromeで動かない。Safariでも今後動き続けるかどうかわからない
Chromeで動かない理由は"–allow-file-access-from-files"がデフォルトでOFFになっているせいです。そのせいでローカルのファイル一つ一つが別ドメインであるかのように振る舞ってしまうわけです。強制的にこの起動オプションを切り替えることもできますがセキュリティ的によろしくないのは事実でしょう。Safariも今後のバージョンアップの際に同様の仕様になる可能性があります。

・ウィンドウのタイトルバーが邪魔
ま、ブラウザである以上しょうがないですね。SafariのプラグインGlimsを使うとフルスクリーン表示ができますが、タイトルバーが消えて今度はタブバーが出てきます。何考えてんd…あいえいえ、Fi-VJではビュアーのタイトルを変えるができます。イベント名やDJネームを入れてあげると喜ばれそうですね。

・アピアランスに無駄が多い
メタファーにするかどうかでいろいろ悩んで中途半端なところに落としてしまいました。もうちょっときれいで楽しいアピアランスにいつかリデザインしたいですね。

・エフェクトをプラグイン的に増やしたい、が増やせない
ごめんなさいここは手を、抜きました…これ簡単に増やせるようにしたいですよね。はい。

・videoフォルダに一旦映像ファイルを格納してからドラッグアンドドロップしなきゃいけないのが面倒
これHTML5のFIle APIの仕様からきてる問題です。File APIは名前やファイルタイプは取得できても意外なことにファイルパスは取得できません。多分セキュリティ的な問題でしょうね。なので特定のフォルダ内に入っていてもらわないと色々困ってしまうのです。ファイルパスを設定から指定できるようにする、くらいはできそうです。

・ビデオの読み込みスペース小さすぎ
そうだよね、そうだよね…私も後から気がついたけど後回しにしちゃえって…こりゃビデオの管理画面は作り直しですな!! ハッハッハ…

・ビデオの並び替え、サムネールの再取得
できたほうがいいよね。いいに決まってます。

・設定を他のブラウザ、マシンに引き継げない
設定はウィンドウを閉じるときに自動的に保存する仕組みになっています。で、どこに保存しているかと言うとこれまたHTML5の新機能Local Strageに保存しています。保存している内容は各種設定や映像のサムネールです。でそれを一式のJSONにして保存しているわけですが、画像を文字列にしちゃってるから結構な長さなんですよね。どうしたものか…いずれインポート/エクスポートのことも考えたいです。

・処理重過ぎ、メモリ食い過ぎ
ビデオ4トラック走らせているということでそれなりにパワー食うんですが極力効率の無駄にならないように組んでみたつもりです。そもそもビュアーのサイズがでかかったり映像ファイル自体のサイズがでかかったりするとけっこう辛くなります。推奨ファイルフォーマットは640*480pxのMPEG4でしょうか。これならMBAでも余裕で動いてくれるはずです。720pはちょっとキツいです。あとcanvasによるエフェクトは現状、むちゃくちゃ重いです。本末転倒気味ですがあんまり使いすぎない方がいいですね。

・で、わざわざ市販のソフトじゃなくてこれ使う意味あんの?
ないんだなそれが。ソフト買うにもお金はいるのでちょっとした節約にはなるかも。僕のプレイスタイルだとFi-VJで十分だよ、という話でしかないので。

・継続的にサポートする気はそんなにないですごめんなさい
これがんばってもお金になるわけじゃないですしね。個人的にアップデートはするかもしれませんが公開するとも限らないという。趣味なので大目に見ていただければ。

デモページについて

上にもリンクを張りましたがFi-VJのも用意してあります。映像ファイルのインポートとかできませんがだいたいの操作体系は理解していただけるかと思います。

公開するにあたってデモ用ネット上にアップしてもいい動画ファイルを探したんですが手持ちは大昔に作ったしょっぱいやつしかなく…なので私よりもっとかっこいい映像が作れるdeformことTaiyo Yamamotoくんにいくつか映像をお借りいたしました。本当にありがとうございます!映像ファイルリストで言うところの後半4つのかっこいい映像が貸していただいた映像です。ぜひ刮目してください。こちらの都合で映像はちょっと強めに圧縮しちゃってます。本当はもっと綺麗な映像なんだよ!! ><

お願いとか今後の展望とか

もしFi-VJ使うよ!!っていう人がいたらTwitterで@akirafukuokaに声かけてもらえるとうれしいです。いないとは思いますけども。

今後ブラウザもPCの処理能力も進化していくんでFi-VJも順当に進化させていくことは可能でしょう。あとはやる気の問題ですね…!! 個人的にiPadでFi-VJが使えればいいのになと思ってるんですが、iPhone/iPadはブラウザからローカルストレージにアクセスすることはできない以上やはりアプリの形にしないと実現は難しそうです。それでもチャレンジしたい分野。

DJは最近PCDJだiPadだUstだと盛り上がってる感じですがVJはここのところ元気がない感じでしたし、僭越ながらVJ界の盛り上げに少しでも貢献できたらなと思います。あとはやっぱり、ちょっとでもほめてもらえるとうれしいな!! では皆さんもよいVJライフを!!

2011年4月 | BLOG TOP | 2011年6月

Archives

2015.06 2015.05 2015.04 2015.03 2015.01 2014.12 2014.10 2014.05 2014.03 2014.01 2013.08 2013.01 2012.12 2012.09 2012.08 2012.07 2012.06 2012.05 2012.03 2012.01 2011.12 2011.10 2011.09 2011.08 2011.07 2011.06 2011.05 2011.04 2011.03 2011.02 2011.01 2010.12 2010.11 2010.10 2010.09 2010.08 2010.07 2010.06 2010.05 2010.04 2010.03 2010.02 2010.01 2009.12 2009.11 2009.10 2009.09 2009.08 2009.07 2009.06 2009.05 2009.04 2009.03 2009.02 2009.01 2008.12 2008.11 2008.10 2008.09 2008.08 2008.07 2008.06 2008.05 2008.04 2008.03 2008.02 2008.01 2007.12 2007.11 2007.10 2007.09 2007.08 2007.07 2007.06 2007.05 2007.04 2007.03 2007.02 2007.01

Feed

Category

Profile

  • akirafukuoka
  • AKIRAFUKUOKA(福岡 陽)
  • FICC inc.所属。Flashコンテンツ開発担当、でもデザインや企画まで手がけることも。
  • WebデザインブックマークサイトAnotherBookmark、Web制作系求人情報サイトMOREWORKSの制作も担当。
  • また趣味的にクラブイベントRaw-Fi 主宰も。当ブログよりモノ系・文化系に特化したRaw-Fi Blogも更新中。
  • ABOUT AKIRAFUKUOKA

Link