iPhone5が欲しくて気付いたらドットでiPhone5描いて3D化してた

iphone5dot

ついにiPhone5が発売されましたね。周りでもiPhone5を手にしたという方々の声が次々にあがっています。そういった声にやられてか、iPhone5が早く欲しいという気持ちが湧き上がってきました。

そんな中、冒頭挿絵を描いて、更にiPhone本体ドット絵部分を3D化してみたという流れに行き着きました。これはまた理解に難しい流れで、自分でも驚きです。

そんな今回、ドット絵を3D化する為に使用したのは、Firefoxでした。

Firefoxで3D化するよ

「Firefoxで3Dにするってどういうこと?」

と思われるかもしれません。正直私も全くとっていいほど使ってないのですが、Firefox(バージョン11以降)にはHTML構造を視覚的に確認できる3Dビューという機能があります。

※Firefoxの上部メニューバーから、ツール→Web開発→調査、で右下に出てくる3DビューをON

百聞は一見にしかずということで、Yahoo!を3Dビューで見てみると…。

yahoo

もこもこ盛り上がってますね。巷では「無駄にすごい」と言われているようです。今回はこの仕組みを利用しました。

HTMLの入れ子が多いほど積み重なっていくという仕組みなので、ここが理解できれば後は作業ゲーだ!なんて考えてましたが結構手間が掛かることは間違いなし。

結局一つ一つHTMLの要素を書いていくのは面倒になったので、ここはjavascriptのDOMさんに手助けしてもらうことにしました。

配列にドット絵の元を作り、独自関数にそれを渡してあげると…。

iphone53d

なんということでしょう。見事ブラウザの上にiPhone5が築き上げられました。

iphone53d

iPhone5の前に寄り道した某配管工。カラーが少ないのが難点でしたが、どうにかこちらもそれっぽく。

完成と共にわずかな達成感を得ながらも、iPhone5に対する欲求は全く満たされぬまま消えないこの想い。一体何がしたかったのでしょう。

こうして今日という一日が始まるのでした。

おしまい

ちなみにこのページをFirefox11以降の3Dビュー表示すると何故か崩れそうなiPhone5が堂々と立っているのが確認できます。

タグ: iPhone5 javascript DOM ドット絵 3D Firefox

プロフィール
Daisuke Suzuki
ウェブサイトの制作から運営管理、アプリ開発など、様々な挑戦をして試行錯誤の日々を送っているフリーランスです。対外業務をするお仕事生活から抜け、現在は個人制作でご飯を食べています。 最近はアプリ攻略サイト AppGames を制作・公開し、そちらも手がけています。詳しいプロフィール
サイト内検索
facebook
このブログについて1
一から制作したお手製ブログ ver1.23
2012年9月11日に開始。自分で見て触って動かして、日々コツコツと調整しています。