アニメ内のホーム画面を再現してみた

ホーム画面晒しのスレでこんなレスがありました。

268 SIM無しさん [sage] 2011/08/24(水) 21:36:06.76 ID:uXrslvp9 Be:
http://iup.2ch-library.com/i/i0400834-1314189316.png
このホームを作りたいんですができるだけ似ているアプリってありますか？
クレクレすいません

これがその画像です。ふむ…。なにかのアニメの一場面でしょうか。スマートフォンのような、フィーチャーフォンのような、そんな画面ですね。まぁ作れないこともないだろう、と思ったのでやってみました。

壁紙

まずは壁紙を探します。このお題の画像を加工しても良かったのですが、少々解像度が足りません。似た様な画像を探します。

Google画像検索

画像から似たものを検索できるGoogle画像検索で検索します。元の画像のURLを入れれば似たものを探しだしてきてくれます。

ふむ…アイマスだったのですね…。

しかし類似画像を見ても、緑っぽいものは出てきますが、なかなかいいものは出てきません。キーワードとしては「庭園」に「椅子」があり、その上に「うさぎ」の「ぬいぐるみ」がおいてある画像でしょうか。適当に検索してみます。

…が、なかなかいいものが出てきません。さて、どうしましょう？私一応司書の資格持っています。（資格だけです。）司書というのは、つまり検索のエキスパートです。ここで諦めたら司書の名前が泣きます。

ひらめき

…が、ここで1つのイメージが浮かびました。椅子…その上にぬいぐるみ…どこか、どこかで見たぞ…。し、シャルロッテ！？
おおぅ…ノイズが多すぎるぜ…。「シャルロッテ 椅子」で再検索…っと。いろいろ出てきました。中からシャルロッテのフィギュアを作成している方の写真が使えそうだな、と思い画像をダウンロード。

画像加工で壁紙に

そのままでは使いにくかったので、いろいろ加工（写真を少し絵っぽくしたり、椅子の足が長かったのを縮小したり）して壁紙サイズにします。元々人の写真ですので、壁紙の公開はしませんが。
（今思うと、pixivで「庭園 ぬいぐるみ」なり「シャルロッテ」で検索すればよかった気もしますが…。）

全体的なイメージとホームアプリの設定

完成像のイメージは最初にお題としてあげられているので、それをどう実現するか、です。

まずホームアプリはいろいろ弄るときに便利なADW EXにしました。行・列を10行4列にしてあります。（それぞれのウィジェットが重ならないようにオートストレッチにしてあります。）

DVRで示すと左の画像の通り。ついでにこれで1×1の大きさが何ピクセルになるのか調べておきます。この場合は1×1が110×65、2×2が230×140でした。それぞれのブロックの間が10ピクセル空きます。

10行にしたのは、なるべく細かく位置調整をしたかったからです。列も増やしてもかまいません。ドックを消すとその分広がってしまうので、ドックまで入れて11行のように考えます。

ステータスバーを出せば、その分さらに細かくなりますが、今回はステータスバーにあるような電波強度などもウィジェットでやるので非表示にしてあります。

メール通知

画面中央にあるメール通知を設定しましょう。これにはMissed It!が使えそうです。
Output formatでCustomizeと進み、「You have [mails1][mails1_str]」とします。Layout→Outer paddingで数値を0にすると画面両端まで背景が描画されます。

これが左の画像。ふむ、悪くはないですが、ちょっと帯（背景）が太い気もします。とりあえずこのまま行きますが、やっぱり太いと感じれば壁紙に直接書くという手もあります。

Missed It!!の文字列はセンタリングしてありますが、メールアイコンを乗せるために文字列の先頭に空白スペースを入れて調整してあります。

この時点で先ほどのマス目にしたものと画像を重ねてみます。

うーん…。列の数を調整すればなんとかなりそうです。

列の数を6にしてみました。これならなんとかなりそうです。ほかの配置に影響が出るかもしれませんが、まあ出たとこ勝負というか、何にも考えていません。いきあたりばったりです。
なお、これで1×1の大きさは75×65、2×2は150×140になりました。

時計

時計は、カスタマイズできるものが幾つか出ていますので、方法も様々にあります。ここでは後で同じアプリを使うこともあってGlaejaを使うことにします。

午前/午後表記のテキストは背景を文字の背景を設定しています。そのままだと文字ぎりぎりになるので、$a$の前後に半角スペースを入れて調整しています。

アナログ時計はそのままアナログ時計を作ってもいいのですが、せっかくGlaejaを使っているので一番外のサークルは曜日を表現し、ピンクの小さな点はバッテリー残量を、などとしています。このあたりは好みで機能をつければいいと思います。

デジタル時計のフォントは適当に「フォント 細身」と検索して出てきたフリーフォントを使います。

ドック部分のボタン

一番下にボタンを置きたいですが、レイアウト調整のためにドックを表示させています。しかしドックにはこんなに横長のボタンを置くことが出来ません。どうしましょう？

壁紙に描いちゃいましょう。で、ドックを5Iconsにして、左右2つずつを同じ機能を充てればOKです。（このあたりは、元の画像になるべく似せるためにそうしていますが、普通にドックボタンを5つ並べてもいいんじゃないでしょうか。）

ついでに、メール通知の帯が太く感じたのでこれも壁紙に直接描いちゃいます。そして帯にメールのアイコンも。

ドックはすべて透明な画像をアイコンに設定しています。中央をタップするとドロワーが起動し、左右2つはそれぞれ設定などが立ち上がります。（適当）

このあたりは、1画面運用を想定して行っています。複数画面運用だと、壁紙にメールアイコンは入れないほうがいいかと思います。

擬似ステータスバー

だいたい完成が見えてきました。あとはステータスバーの電波強度とバッテリー残量とPmodeの文字です。これらもGlaejaで作ってしまいましょう。
Glaejaには画像をマッチテキストで表示できる機能があります。これは、ある値によってそれにマッチする画像ファイルを表示する、というものです。例えばバッテリー残量が50%のときに、Battery50.pngというファイルを、30%のときにBattery30.pngを表示する、というものです。

これを利用して、電波強度とバッテリーそれぞれに何段階かの画像を用意してあげればいいのです。

完成

そんなわけで完成したのがこれです。
メールアイコンの部分には透明アイコンを置いて、GMailが起動するようにしています。（最初っから壁紙に書かないでアイコン用意すればよかったのですが。）

壁紙は全然違うので印象は違うかもしれませんが、だいぶ最初のお題に近づけたのではないでしょうか。それにしてもGlaejaは便利ですね。やりたいことが大抵は実現できます。

擬似ステータスバーは、電波とバッテリーは再現できますが、一番肝心な通知が出ません。だったらステータスバーを出したままにすればいいとは思うのですが、好みは人それぞれですので。

一応、今回Glaejaで作成したスキン及びバッテリーと電波の画像をダウンロードできるようにしておきました。壁紙は入っていません。以下からどうぞ。
スキンのダウンロード

本記事に記載された内容は記事公開時点のものであり、必ずしも最新の情報とは限りません。記事をご覧いただく際には、最新の情報を確認するようお願いいたします。