8bit テイストアイコンが素敵にかわいく並ぶ!iPhone 画面サイズに収まる極小 iPhone 「Tiny iOS」とは?

WebService

Tiny iOS - small app icon gallery

◆ 限界に挑戦!iPhoneの画面サイズに収まる極小iPhone – Tiny iOS
(via DOTAPON Blog ) [1] iOS Focus

今日の巡回でなんだか意味のわからないタイトルに惹かれまして、ちょっと遊んでおりました。この記事のタイトルを見ただけで何がどうなっているのか分かる方は素晴らしい。私はさっぱりでした。

一体全体どういうことなんだ

と思ったんですが、説明を読んでなるほどと思いました。

ということで、HTML5 Canvas + JavaScript で、極小サイズのiPhone、兼アイコンギャラリーを作ってみました。
iPhone/iPadのSafariや、いまどきのブラウザ(Chrome, Safari, Opera, Firefox)で動作します。

ブラウザ上で iPhone っぽい操作ができる、アイコンギャラリーって感じなのですが、これが動作が素晴らしく iOS ぽいんですよね。触ってて面白いです。というわけで、Mac の Chrome で開いてみました。

Tiny iOS - small app icon gallery

Tiny iOS のページを開くと(上のリンクから飛んでみて下さい)、まるで iPhone の起動画面。画面をクリックすると読み込みバーが表示されて、OS が起動します。

Tiny iOS - small app icon gallery

まずはロック画面。

ん〜見事ですよね。時間はちゃんとリアルタイムが反映されていますし、日付もそうですね。アンロック用のスライダーを期待通りドラッグしてみると、

Tiny iOS - small app icon gallery

ホーム画面です。かわいい 8bit 風アイコンがなんのアプリかわかるほどうまく再現されていますよね。素晴らしい。ちなみに、これアイコンギャラリーとしか作者さんはおっしゃっていないのですが、各アプリアイコンをクリックするとアプリの説明と AppStore リンクが下に表示されるんですよね。

デフォルトアプリの説明は結構面白いので実際にみなさんの目で確かめてみてはいかがでしょうか?

Tiny iOS - small app icon gallery

なんと、2画面目も存在するんですよね。有名どころのアプリばかりなので思わず「わおぉ」と叫んでしまいました。

Tiny iOS - small app icon gallery

Spotlight も画面だけですが実装されています。ちゃんとキーボードも下からニョキっとでてきますし、このあたりの挙動の再現度はかなり完成度が高いなと思いました。実際に文字が打てればおもしろかったですね。

ここまで来て、まだ気付かなかった私はほんとドアホだなと思ったんですね。

そうじゃないんですよ。作者さんが何を言いたかったのか、やっとここまで記事を書いて気付きました。だって、 HTML5 なんでしょ。ってことはこういうことなんじゃないかと。

iPhoneの画面サイズに収まる極小iPhone

つまりこういうことなんですね。

20120717012415

iPhone の Safari上で動作するんだってことに気付かないから意味がわからなかったんですね。

IMG_0141 IMG_0143

こんな感じで動作するわけですね。

IMG_0150 IMG_0151

iPhoneならピンチインピンチアウトが使えるので、本当にデカク使えるわけです。これが本当の iPhone in iPhone。

動画も撮ってみましたので、興味のある方はご覧下さいませ。

リアルな iPhoneシミュレーター的なものはかつてありましたが、デフォルメされたこんな iPhone も実際触れてみたいな〜と思いました。

みなさんも是非実際にブラウザで開いて試してみてください!

ブログへのいいね!もそのノリで是非!

.