SXSW と Facebook で何やらセンセーションを巻き起こしているらしい animoto.com。このサイトはアップロードされた写真から超かっこいいビデオをくみ上げてくれる、という何やらブラックマジックな響きのサービス。
昔はビデオ編集の為だったら「週末つぶしてもやってやるぅ」という僕でしたが最近はもう疲れちゃってそんなことやってられない。最近では大っきらいだった iLife ’08 の iMovie も使うほどのおちこぼれ。
そんな僕には写真から自動的にかっこいいビデオをつくってくれちゃうらしいという animoto.com は生唾もの。早速試してみる。
ステップ１＝写真をアップロードしてアレンジ。他の写真サイトも大体サポートしているので既に Flickr にアップロードされている写真などを簡単にインポート。ハイライトしたい写真は Spotlight という機能をオンにしてクリック選択。
ステップ２＝音楽＆ジャンルを決定。派手な感じのエフェクトにはロックやヒップホップを。エレガントなものにしたければクラシックなどを。既に用意されている音楽又は DRM のかかっていないファイルをアップロードすることが出来ます。
ステップ３＝タイトルや説明文をつけておしまい。Create Video ボタンを押すとしばらくするとビデオが完成。その後 Remix という機能を使って細かいエディットも可能。
３０秒以内のビデオなら無料。それ以上のビデオは一本 $3、又は一年購読で好きなだけビデオが作成できるアカウントが $30。
以下が５分間で作ったサンプルビデオです。
I have the tendency to get stuck coding when something about the process clicks. The JavaScript stuff is awesome since I’m a user experience centric guy and like to see UI interactions happen in an interesting manner. CSS can do quite a bit but JavaScript gives you a lot more control.
Today, I took yesterday’s JavaScript code and used prototype lite + moo.fx to make the tab behavior a little more interesting.
- Of course, shortly after finishing this code, I realized doing it the accordion way is a lot easier. grr.
- But I also started reading up on mootools, prototype, and jQuery and noticed jQuery is a lot more complete and clean framework to build stuff on. I guess I’ll go study that next!
I’m getting back to my roots these days, doing more web dev stuff.
The last time I touched JavaScript was a few years back in my FileMaker days. Since then, things have changed with ajax and other fancy JavaScript+CSS tricks being developed. I’m definitely rusty.
Today I spent some time writing basic JavaScript stuff to get back into the game. Here’s what I got.
- I initially tried to use CSS visibility:hide/visible combined with position:absolute, to show and hide different tab divs, but noticed positioning is very fragile across different browsers
- In the end decided to use height:0px/300px along with overflow:hide to dynamically change height of the divs to create the same effect without disrupting the position.
- This seems to work across all browsers without special casing which is the only way to go!
Download the code here.
ベイエリア暑すぎだよ。この温度の変動のえげつなさは流石海沿いとしか言いようがありません。ま、そんな事はどうでもいいのですが・・・。
昔はだいっきらいな Dreamweaver でしたが、それでも Web 開発者として知らなきゃならんだろうと思い、たかしさんに社割で購入していただいた CS3。それでもしばらくは TextMate のせいで放ったらかしを喰らってました。（だって Ruby on Rails の開発には TextMate の方が断然らくなんだもん。）でも最近静的サイトのデザインが重なってちょっと DW 使いだしてます。結構それなりにワークフローが身についてきたので楽しい！
さて Dreamweaver 話ついでにちょっと Web 開発ネタ。実は最近自分の中で CSS がアツいです！特に Microsoft が IE7 で様々なコンパチビリティ問題をなおしてくれたお陰でスタンダード CSS 2.1 が３大ブラウザー（Firefox、Safari、そして IE）で共通に動いてくれる時代がついに到来？！僕は CSS はしばらく触ってなかったので勉強がしら ryosode.com のホームページを書き直してみました。
今回は世の中結構ちょっとインタラクティブなサイトＵＩを作ろうとするとすぐに JavaScript や Flash に目がいってしまいがちですが、CSS だけでも結構色々出来る事ってある事を再確認しました。（結構 Web エンジニアの人でも rollover ボタンは JavaScript でしか作れないと思っている人が多いです！）
まだ開発途中ではありますが、http://ryosode.com のホームページに行っていただくと結構 JavaScript を使わずともシンプルな XHTML 構造のページを CSS だけでいやらしくいじくれる事をご理解いただけるのではないかと思います。（っていうかうるさすぎ？すんません・・・。）
例えば IE6 では :hover 機能は a (anchor) タグにしか使えませんでしたが、IE7 ではきちんと他のタグに対しても使えるようになりました。これを visibility パラメターと組み合わせる事でマウスの位置によって様々な HTML エレメントを見せたり隠したりできるんです。
そんなこんなでまた CSS アツいんで、しばらく遊んでみようかと思います・・・。
マウスがブラウザウィンドウの外にある時は・・・
いったんマウスをブラウザの中にもっていくと・・・・
今日はちょっと開発系オタクネタ。
先日 SDForum という Silicon Valley のテックフォーラムの Cloud Computing Demo Night というイベントに行って参りました。それまでは Cloud Computing という名前に疎い自分でしたが、この機会に色々勉強できて、ちょっと嬉しかった矢先の Google App Engine の発表で更に興奮しているところです。
Cloud Computing って実は新しいコンセプトではなく結構古くからある考えで、単純にいってしまえば多大にあるコンピューターリソースを統一化、それをエンドユーザがそれぞれ必用な分だけ使用できるようにサービスにしたもの。ちょっと難しいでしょうか？
これをウェブホスティングに置き換えて言えばこんな感じ。サイトオーナーは従来 Shared Hosting や Dedicated Server などといったお値段の差が出て来るサーバー／サービスに気をとられていたのですが、Cloud Computing の法則下では、自分のアプリケーションの走っているサーバーのキャパシティが無限大と想定し、サイトが使用する分のリソース（CPU time / ハードディスク / Bandwidth などなど）だけを借用し、それに対して電話代を払うかの様にリソース使用量だけ払えばよし、という形。
僕の説明分かりにくいと思うので興味のある方は wikipedia の定義をお読みください。
さて Cloud Computing サービス提供企業の中でもひと際目立っているのが Amazon.com。ちょと驚きでしょ？でも地球上最大のショッピングサイトを経営する会社ですのでスケーラブルなサーバーの構築は超得意技。そう考えるとそこまで不思議な話ではないんです。
AWS (Amazon Web Service) に含まれる Amazon EC2 (Elastic Compute Cloud – 仮想アプサーバ) 、 S3 (Simple Storage Service – 大量のアップロード／ダウンロードを破格で提供出来る為のストレージサービス）、そして SimpleDB（Amazon が開発したデータベースエンジンで、アプリケーションが使うデータを保存する為のサービスとして使用できる）の３つのサービスをうまく組み合わせる事で Web アプリケーション／Web サービスを破格の値段で提供することができます。しかもお値段が破格！僕も Amazon S3 を使わせていただいていますが本当に安いので驚きです。
これに対して Google も Google App Engine を通して GFS や BigTableのサービス化を進めていくと思います。この先しばらくは Google と Amazon の Cloud Computing サービス提供王者戦が結構楽しめそうです。
でもそんなエキサイティングな Cloud Computing Service にもまだまだハードルがあります。いくつか挙げてみると・・・
- EC2 などのセットアップや使用規制は凡人には複雑すぎ。恐らく AWS などの大規模 Cloud をバックエンドにした特化 Cloud サービスがこれから流行ってくるんだろうなぁと僕はにらんでおります。これが発展するまでにはちょっと時間がかかるのでしょうが既に Heroku などバックで AWS を使用している会社は出現しはじめています。
- グリッドマネージメント層がオチると Cloud 全体が使用不可能になります。Amazon EC2 は先日オチたばかり。こうなってしまうと、ホスティング会社に一本電話いれてサーバーリブートすれば良しという単純な問題ではないので運営とフェイルセーフ機能だけはしっかりして欲しいですね。
いずれにせよサーバー運営の中でも大きな問題であるハードのメンテナンスとスケーラビリティが無視できるようになるだけでも Cloud サービスを使ってみたくなる方たちは数多くいるのではないでしょうか？僕的には Cloud サービスのコストパフォーマンスに目をつけて .Mac のオルターナティブサービスを誰かに開発して欲しいですね〜。（notMac は自分でサーバー立ち上げなきゃいけないのが面倒。）きっと大容量かつ低コストのソリューションが作れるのではないでしょうか？
ちょっとドライ＆まとまりのないブログエントリーですんませんでした。
