はじめてのホーム画面カスタマイズ：画像をいい感じに加工して敷き詰めたホーム画面

andronaviの方で神職人3回目の記事を出しました。今回は今まで作ったホーム画面の中からお気に入りのものを見せるだけだったので原稿としては楽でした。選ぶのは難しかったですが。

で、この中で1年前、2013年1月に作ったホーム画面について質問を受けました。これです。

これは画像をいろいろ加工して壁紙を作ってそれが全てのようなものですが、せっかく問い合わせをもらったので、他の人でも作れるように作り方を解説していきます。

0.完成形

普段は画像加工などをPCでやっているのですが、今回は全てスマホ上でやってみました。けっこういい感じに出来たと思います。

とりあえずこれが完成形ということで、これを目指していきます。

1.ホームアプリの設定

ホームアプリはNova Launcherを使いました。他のでももちろん大丈夫です。

グリッドは4行8列、ドックを非表示にするかオーバーレイ表示にして、全面グリッドにします。

2.画像収集

完成形を見ての通り、右側には画像を敷き詰めます。この画像を探します。
手元にあればそれでもいいですし、ないなら適当に検索して探します。Google検索で大体のイメージで「画像検索」すればいろいろ出てきます。wallpaperといった言葉と一緒に検索すると大きなものが出てきやすいです。

とりあえず数枚ダウンロードしておきましょう。

3.Desktop VisualizeRの配置

まずはDesktop VisualizeRをホーム画面に配置します。

大きさは1番上の（1×1 SS）以外ならどれでも大丈夫です。

ホームアプリの機能で、置いたDVRを引き伸ばして、適当に大きさを変えて配置します。このときのレイアウトがそのまま画像のレイアウトになりますので、そのあたりもなんとなく考えておくといいです。

4.画像加工

次に、先ほどダウンロードしてきた画像を加工してちょっとカッコよくします。

まずホーム画面に配置したDVRをタップして設定画面を開きます。
そして画面一番下、ウィジェット情報の「画像サイズ」をチェックします。これと同じサイズ（比率）の画像を作ります。忘れないようにどこかにメモっておきましょう。

画像のサイズ変更（トリミング）についてはQuickPicを使います。

QuickPicで画像を開いたらメニューから「編集」を選び、下のツールバー左から2番めのアイコンをタップして「解像度」を選びます。
「カスタムサイズ」を選び、さきほどメモしたDVRの画像サイズを入力します。
あとは切り取る範囲を選び保存します。

このあたりは以前「ピクセル単位で指定して画像をトリミングする」という記事でも解説しましたので、詳しくはそちらで。

サイズを合わせて切り取るだけならこれでもいいですが、今回は画像自体をちょっと加工してみます。
Pixlr Expressというアプリを使います。

わずか数タップでいい感じに画像を加工してくれます。
「エフェクト」→「Vintage」あたりで軽くかけるといいです。

5.DVRに画像とアクションを設定

ホーム画面に戻り、配置したDVRをタップします。
設定画面で「アイコン」とタップした時に起動する「アクション」を選びます。
アイコンはそのDVRの大きさにあったもの（4.で加工したもの）を選んでください。

ラベルが不要な場合はごみ箱アイコンをタップすれば消えます。

アイコンとアクションを設定したらOKをタップし、ホーム画面に反映されたのを確認します。

置いたDVRの数だけ繰り返し、画像を敷き詰めます。
それぞれのアイコンをタップして、ちゃんとアプリが起動するか確かめましょう。

6.壁紙を単色に

隙間から壁紙が覗いてうるさいので、単色の壁紙にします。
Colorsというアプリはわりと簡単に単色の壁紙を設定できます。

7.Glaejaスキンのダウンロードとインポート

次はGlaejaを使います。スキンを適用するだけなので、簡単だと思います。
まずは下記よりGlaejaのスキンをダウンロードしてください。

https://www.dropbox.com/s/2exqi7cw9hb0cdd/bbased.zip
（暫定。あとで差し替えるかも。2014/2/27 18:50頃差し替えました。ちょっと使いやすくなっているかと。）

ドロワーからGlaejaを起動し、「データ管理」→「スキンZIPのインポート」と進みます。

ダウンロードしたスキンZIP「bbased.zip」を選び、インポートします。

ここでうまくいかない場合は、一度ホーム画面上にGlaejaのスキンを置いて、タップ後スキンの保存（untitled）をしてみてください。

おそらくフォントがないという案内が出るので、案内に従ってダウンロードページに進みます。

pc用のサイトですが、右側のボタンからダウンロードします。

そして少し戻って「データ管理」のページから「フォントのインポート」を選びます。そしてダウンロードしたzipファイルを、指定してください。

これでGlaejaで今回ダウンロードしたフォントを扱えるようにできました。

8.Glaejaの設置とスキン適用

ホーム画面にGlaejaのウィジェットを置き、横は半分くらい、縦いっぱいに引き伸ばします。

ウィジェットをタップして、メニューから「オプション設定」→「キャンパスのサイズ」→「フレームに合わせる」

1つ戻って、メニューから「スキンの読み込み」
先ほどインポートしたbbased.skinを選びます。

これでスキンが読み込めるとこの画像のようになります。
戻るキーでホーム画面に戻れば、Glaejaがスキン適用されたものになり、完成です。

完成！

表示項目なりフォントなりはGlaejaのスキンを自分でいじれば好きにできます。今回のスキンをちょっとずつ弄って使い方を覚えるのもいいですよ。

9.壁紙について別のアプローチ

画面右側をDVRではなく、複数の画像を敷き詰めるタイプのライブ壁紙を使っても面白いです。

このライブ壁紙を使うと、左画像のように指定したフォルダの画像をランダムに敷き詰めて表示する事ができます。（レイアウトパターンは数種類から選択）

この壁紙の上にGlaejaを置いても、似たような画面が作れますね。
この時の右側タップ時の動作はどうするかなど、考えられることはまだまだあります。いろいろ工夫してみてください。

まとめ

今回はいくつかのアプリを組み合わせて、スマホのみで作成してみました。十分作れますね。ちなみに、この記事も最後はスマホでモブログで作業してます。できるものですね。

なるべくわかりやすく詳細に書いたつもりですが、わからない点などありましたら、コメントにてどうぞ。

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