これぞ近未来…!最新技術をふんだんに使ったサイト「モーグリのツイートキャッチ」の知られざる裏側
FINAL FANTASY
XIII-2のキャンペーンとして作られたサイト「モーグリのツイートキャッチ」。見てみるとサウンドや動画、アニメーションなどの最新技術がふんだんに使われていますが、なんとこれ、Flashを使わずに次世代のweb規格「HTML5」だけで作られたのだとか。スゲェ…!
このサイトではどんなテクノロジーが使われているのか、そして、それはどうやって作るのか?マイクロソフトの特設サイト 「 Start Something! 」で、その詳細が明かされていました。
マイクロソフトの特設サイト「Start Something!」は、もっと手軽に開発を楽しんで貰うために立ち上げられた特設サイト。
Start Something! つくりたいを誰でもすぐに 〜 MSDN
その中で、FINAL FANTASY
XIII-2のキャンペーンwebアプリ「モーグリのツイートキャッチ」の開発の裏側を特集した「
メイキング・オブ・モーグリのツイートキャッチ
」が公開されました。
これが…読んでみると、最新技術やプログラミングテクニックがぎっちり詰め込まれたすんごい作り…。開発経験のある人が見ると凄い内容なのですが、経験がなくても、実際に「モーグリのツイートキャッチ」を見てみると、その構成の凄さがわかります。
ちなみにモーグリのツイートキャッチはこちら。スクリーンショットを見ても、今まで見てきたwebサイトとはちょっと違う雰囲気の、凝った作り…。
このサイトはWindowsのクラウドサービス「Windows Azure」と、次世代のweb規格「HTML5」を駆使し、データベース、映像、アニメーション、音声を組み合わせた最先端のコンテンツ。驚いたことに、 Flashは使われていません。 閲覧はインターネットエクスプローラー9推奨ですが、Google Chrome、FireFox、Safariの各最新バージョンでも表示できます。
このサイト自体は、モーグリを放り投げると、その周辺で投稿されたTwitterのつぶやきを拾うという楽しいサイトなのですが、そのページに詰め込まれたテクノロジーをちょっと要約してみると…
こ…こんなにありました…。見逃してるものもまだまだありそう。
私は一応webサイトを作ったりしている身ですが…こんな凝ったサイト、 私の持っている知識では10年かけても作れそうな気がしません…!
特に凄いのがこのモーグリ。これは3Dモデルから落とし込まれた、SVGという従来使えなかったベクターフォーマットが使われていて、拡大してもギザギザの出ない、滑らかなアニメーション描画を実現しています。
モーグリを投げるシーンでは、トンネルに突入するアニメーションが背景に動的に挿入されたり、トンネルのアニメーションをJavascriptでリアルタイムで描画したり…
ってさらっと書いてますけど、従来は到底不可能だった凄い演出なんですよこれ…スゲェ…!
ちなみにモーグリのツイートキャッチでは、Twitter用FINAL
FANTASYアイコンや、Windows7のテーマパックがプライズとして用意されているので、技術的に関心がある人も、そうで無い人にもオススメです。
マイクロソフトには無料の開発ツールもいろいろ
これを見て、 「俺もこんなスゲェサイト作ってみてぇ!」 なんて思った人には、 Start Something! からダウンロードできる、マイクロソフトのフリーダウンロード製品がオススメです。
あまり知られていませんが、マイクロソフトでは開発ソフトやアンチウイルスを無料で配布しています。昔は開発ツールと言えば高価でなかなか手が出なかったのですが、いい時代になったものですね…。
私は有料の開発環境「VisualStudio 2010」を使っていますが、マイクロソフトの開発環境や言語は業務でも広く利用されていて、 インターネットにはプログラミングの情報が豊富にあり、書籍も豊富。 また開発ツールは贅沢なアシスト機能が豊富に備わっていて、慣れればかなり使いやすいんですよね。
また、マイクロソフトの新しいwebソリューション「Windows Azure」や「Web Matrix」がよくわかるマンガ「
クラウドガール
」も公開中。
従来のwebサイト構築に比べて、マイクロソフトの環境は何が違うかをマンガで紹介しているのですが、webサイト構築経験者には試してみたくなる機能やシーンが色々…。
特に数クリックで自分のパソコンにブログ(wordpress)を構築したり、簡単にクラウドに反映したりというのは、かなり魅力的です。
また「
開発ハジメ
」では、WindowsPhoneを使ったアプリの作り方をわかりやすく解説しています。書かれているとおりに作ってみて、そこから自分でアレンジを加えながらプログラムの構造を理解するのは、プログラミング習得の近道なんですよね。
プログラミングは、人に仕事を教えるのと要領は同じ
開発は最初こそなかなか取っつきにくいものですが、仕組みがわかると簡単なもので、そのプロセスは人に物を教えるのと要領は一緒です。
やってもらいたい事を、順番立てて丁寧に教えてあげる(=プログラミング)ことで、教えたとおり忠実に仕事をこなしてくれるので、習得するとパソコンを使った作業の効率がグンと上がったり、より便利で楽しいwebサイトが作れるようになります。
ちなみにらばQでも、マイクロソフトのVisual C#で作った色んなオリジナルツールを使って、少人数で効率的に運営しています。
プログラミングを身につけようと思ったら、環境は全て無料で用意されているので、あと必要なのは 興味と目的とやる気だけ。 これら無料のツールで、webサイトの作成、Windowsアプリケーションの開発、データベースなど幅広く行えるので、興味があるなら空いた時間にでもぜひ取り組んでみましょう。
Start Something! つくりたいを誰でもすぐに 〜 MSDN