読者です 読者をやめる 読者になる 読者になる

本しゃぶり

骨しゃぶりの本と何かを繋げるブログ

【iPhone】iOS7のパララックス壁紙で遊んでみた

作ったもの

ようやくiPhone5Sを手に入れたからParallax Effect(視差効果)で遊んでみた。
こんな感じに。

f:id:honeshabri:20140321175238g:plain

俺の好きな壁紙

ケータイ電話というものは持ち主の趣味や考えが反映されやすい。特に壁紙は毎回見るものだけあって各々のこだわりが見える。逆にデフォルトのままというのもある種のこだわりと言えるだろう。

俺の好きな壁紙は何かしらのギミックがあるタイプだ。ただ好きな写真が貼ってあるのではなく、アイコンや表示などと組み合わさって意味があるやつだ。いわゆる「棚壁紙」なんかがそれにあたる。それから話題になっていたこういうのも好き。
【Twitterで話題】好きなキャラをスマホ画面に閉じ込め!【画像】 - NAVER まとめ
【画像9枚】ツイッターで流行ってる「ロック解除画面」がすごいwwwwwww - NAVER まとめ

そして自作もする。以前もこんなのを作ったことがあった。

【ガッチャマン クラウズ】iPhoneでバード・ゴーしてみた - 本しゃぶり【ガッチャマン クラウズ】iPhoneでバード・ゴーしてみた - 本しゃぶり

きっかけ俺もバード・ゴーしたい。まだカッコイイころの丈さん /ガッチャマンクラウズ4話よりガッチャマンクラウズ見ている人の7割ぐらいは同意してくれると思う。見て...

今回4Sから5Sになったと同時にiOS5.1.1からiOS7.1にワープ進化したので、壁紙を一新しようと考えていた。ディスプレイサイズも変わったし、フラットデザインになってアイコンなどの雰囲気もかなり違う。最適なのを用意するしか無い。

Parallax Effect

今更説明するまでもないが、iOS7から壁紙にParallax Effect(視差効果)が搭載された。こんなふうに傾けると見え方が変わるやつだ。

f:id:honeshabri:20140321175949g:plain

せっかく新しい機能なのだからこれを活かした壁紙を使いたいと思った。iOS7が登場してもう半年。既にいろいろあるだろうと検索してみた。しかし全然見つからない。例えばここで多くのパララックス対応壁紙が紹介されている。
iOS 7のパララックス効果(視差効果)の壁紙サイトと壁紙アプリまとめ | delaymania

しかしここでの『対応』というのはあくまでも「サイズが」という意味だ。別に見え方が変わっても変わらなくても大した違いはない。他のところでの『パララックス対応』も大した差はなく、せいぜい視差効果ONを想定した棚壁紙ぐらいだ。これならiOS6以前と何も変わらない。

そしていろんなところで「視差効果をOFFにする方法」とか「パララックスうぜえ」みたいなことが書かれている。もういい、もうたくさんだ。俺がやってやる。DIYってやつだ。

とりあえずロック画面で

作る上でまずここを参考にした。
iOS7 壁紙作成メモ - Web Design Internship at FJÖRD, LLC

重要なのはこれ。

Parallax対応壁紙
744x1392*1

表示箇所が640x1136に対して一回り大きく作る必要がある。そうしないと画像が引き伸ばされ、ぼやけたようになる。少し気になるのは複数のサイトで1536×1040が適正サイズとなっているのだが、これがよくわからない。ベータ版はこのサイズだったというコメントを1つ見つけたが、本当なのだろうか。よくわからないがプリセット壁紙は744x1392なのでこれで作る。

そして試しに作ったのが冒頭に載せた大統領である。傾けるとチラリと姿を現す。せっかくなのでもう一度。

f:id:honeshabri:20140321175238g:plain

この「傾けることで姿を見せる」というのはパララックス壁紙の基本技になりそうだ。

アイコンをブロックに

iPhone登場初期から壁紙としてネタにされてきたマリオを俺も使ってみる。それがこちら。

f:id:honeshabri:20140321170730g:plain

前後に傾けるとマリオが跳ねてブロックからコインが出てくる。今までも棚壁紙でマリオはいろいろあったが、コインを出せるのは初だと思う。マリオとコインを壁紙にすることでこのような動きができている。

このアプリの間にあるブロックもアイコンとなっている。前からあった透明アイコンの応用でiEmptyを使って用意した。もちろん脱獄不要。やり方はこのサイトを参考にした。
iOS7でも透明アイコンは設置できる!! iPhoneホーム画面に空白アイコンを作成する方法

スマイルに行く

マリオでアイコンを利用するというのをやったので、今度はアイコンをメインに作ってみた。

f:id:honeshabri:20140321201020g:plain

瞳がグリングリン動いて目をそらす。これは壁紙を白目画像にしておき、瞳の部分をアイコン化することで作った。目に対して瞳が小さくないと作れないのでこんな顔を採用するはめに。ちなみに「〇〇(キャラ名) 顔芸」で検索すると見つけやすい。今思えば瞳しか無いキャラにしておけば楽できたな。キュゥべえとか。

みえ

iOS7からDockがすりガラス状になった。最初これを消してやろうかと思ったがすでにやられていた。
iOS7 棚壁紙・ドックが消える壁紙|wallpaper to hide iPhone,iPad dock・Shelf type wallpaper.

仕方ない。逆にDockを最大限に利用してやる。

傾けると動く壁紙、すりガラス状のDock、レイヤー構造、導き出される結論は……

f:id:honeshabri:20140321202157g:plain

f:id:honeshabri:20140321202259p:plain

Apple - iOS 7

*1:iPhone5Sなどのディスプレイが4インチの場合