はじめてのホーム画面カスタマイズ：画像をいい感じに加工して敷き詰めたホーム画面
andronaviの方で神職人3回目の記事を出しました。今回は今まで作ったホーム画面の中からお気に入りのものを見せるだけだったので原稿としては楽でした。選ぶのは難しかったですが。
で、この中で1年前、2013年1月に作ったホーム画面について質問を受けました。これです。
これは画像をいろいろ加工して壁紙を作ってそれが全てのようなものですが、せっかく問い合わせをもらったので、他の人でも作れるように作り方を解説していきます。
普段は画像加工などを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を置いても、似たような画面が作れますね。
この時の右側タップ時の動作はどうするかなど、考えられることはまだまだあります。いろいろ工夫してみてください。
まとめ
今回はいくつかのアプリを組み合わせて、スマホのみで作成してみました。十分作れますね。ちなみに、この記事も最後はスマホでモブログで作業してます。できるものですね。
なるべくわかりやすく詳細に書いたつもりですが、わからない点などありましたら、コメントにてどうぞ。
ファイルタイプがサポートされていませんって表示されます(´×ω×`)
どのブラウザを使っているのかわかりませんが、そのままタップでダウンロードされないようであれば、長押しで出てくるメニューから「リンク先のファイルを保存」といったような項目で保存してください。
https://www.dropbox.com/s/2exqi7cw9hb0cdd/bbased.zip
このURLがダウンロードできません(´×ω×`)
どおすればいいですか？
かっこいいので使わせていただこうと思ってるんですが、
LINE等のテキストからアプリを開けるように
設定したいんですが、
透明アイコンから「他のアプリを開く」を選択すると
強制終了してしまいます。
どうすると設定できるでしょうか？
Galaxyとか一部の端末では不具合があった気もします。そこはもうそのアプリのことなので、デベロッパーに不具合報告してください。
Glaejaではなく、他のカスタマイズ系アプリを使って作成する方法もあります。
はじめまして。
とても参考になるサイトで有り難く観覧しています。
質問なのですが、8.Glaejaの設置とスキン適用でウィジェットをおくとありますが、設置しようとすると他のアイコンがゴソゴソと動いたりして大きくすることが出来ません。
設置方法が間違っているのでしょうか…
Nova Launcherの設定→ホーム画面→リサイズ時の重なりを許可する・重ねた配置を許可する この2つにチェックを入れてください。
はじめまして。今回このホーム画面を参考にいじってみたのですが、前の質問にもあったのですがGlaejaのウィジェットが重ねて配置できない…という回答にホームアプリの設定の範疇と書いてあったのですが、Nova Launcherの設定でいろいろ試したのですがよくわかりません。
初歩的な質問で申し訳ないのですが、教えていただけるとありがたいです。
Nova Launcherの設定→ホーム画面→リサイズ時の重なりを許可する・重ねた配置を許可する この2つにチェックを入れてください。
サイトを見てホーム画面を作っていたのですがbbased.zipをダウンロードしてもファイルが空となってしまいます!アドバイスお願いします。
ダウンロードするブラウザを変えてみてください。
フォントのダウンロードページが開けません
502 bad gatewayと出てきます
モバイル版の標準ブラウザ、chrome、habitブラウザ全て開けませんでした
それはもうそのサイト側の問題なので、こちらではどうすることもできません。
スキンをダウンロードして使わさせて頂いてます。スキンのアプリショートカットに他のアプリも登録できたら便利だと思い、試行錯誤してみたのですが、元からある3つのアプリショートカットのようにアイコンを配置することができません。アイコンを置きたい場合、どのように指定すれば良いのでしょうか？教えていただきたいです。
これのアイコンは、例えばtwitterと入力するとTwitterのアイコンになるというちょっと特殊なフォントを使って表示しています。なので、そのフォントに含まれているものでないと表示できません。
似たようなのにLigature Symbolsというものやfontaweasomeなどがあります。http://kudakurage.com/ligature_symbols/ それらを使うか、自分でアイコン画像を用意してイメージレイヤーで表示するか、です。たぶんアイコンをイメージレイヤーで置くほうが簡単ですが…。
ありがとうございます！やってみます！
Glaejaの透過部分とDesktop VisualizeRによるアイコンが重ねっている部分をタッチした場合Glaejaの方が起動されるのは仕様ですか？
そういう仕様であるならGlaejaの透過部分をタッチした時に、その後ろにあるアイコンをタッチできるようにGlaejaの仕様を変更できますか？
ウィジェットの重なり順に関しては、ホームアプリの挙動次第です。Nova Launcherならウィジェット長押しでメニューが出てきます。
bbasedをダウンロードしようとしたらnot foundとなってしまいダウンロードできないのですがどうすればよいのでしょうか>_<？
モバイル版でしたらChromeで試したらダウンロードできたので、それ以外を使っている場合はChromeで試してください。
フォントをダウンロードしたんですけどインポートしようとするとインポートできませんでしたとでるんですけど何故でしょうか？
フォントがちゃんとダウンロードされてなかったなどが考えられます。
うまくインポートできない場合は、ダウンロードしたzipファイルを解凍して、中のttfなりotfファイルをcom.gmail.kanitawa.glaeja/fonts/フォルダ内に移動させれば使えるはずです。
できました！！ほんとにありがとうございました！！！
上記のようなアイコンが表示されません。テキストのみです
どこか別でダウンロードまたは設定するのでしょうか？
アイコンはフォントとして表示しています。そのフォントはダウンロードしたGlaejaスキンのファイルに入っていて自動で設定されるはずです。
適用されていないようであれば、Glaicon3というフォントをTwitterとかの前にある文字に適用させてみてください。
私の使ってる携帯が古くてAndroid4.0だったので読み込めてないだけでした。。
一つ前のフォントglaicon2にして調整したら綺麗にできました
ありがとうございますm(__)m
こんにちは いつもお世話になっております
GlaejaのスキンをDLしたのですが、フォルダが空ですと表示され
インポートができないのですが、どうすれば良いでしょうか
ホーム画面上にGlaejaのスキンを置くこともできないので、よろしくお願いいたします。
ファイルがちゃんとダウンロードできていないのかもしれません。またダウンロードしたzipファイルは解答せずにそのままGlaejaでインポートします。
とりあえずこちらの環境では記事のとおりにやってインポートから設置までできたので、まずはzipがちゃんとダウンロードできているか確かめてみてください。25KBほどのファイルになります。
こんにちは！ ようやく最後まで設定できたのですが、Glaejaのテキスト文字 LineやTwitterにはアプリが開くようにはなってはいないのでしょうか？
そこまで設定してなかったと思います。（アプリが入ってるかどうかは人それぞれなので。）
Glaejaで透明ボタンをレイヤーで加えれば、起動ボタンを配置できるようになります。
かっこいいので使わせていただきます！
Glaejaのウィジェットが重ねて配置できないのがホームアプリの設定の範疇ということですが実際にどのようにしたらいいのでしょうか？
初心者でわからないので教えていただけると嬉しいです♪
海外からなので英語で余計わからなくなってしまいました。。。
ホームアプリに「ウィジェットを重ねての配置を可能にする」機能がある必要があります。記事ではNova Launcherを使っていますが、その機能にウィジェットを重ねて配置するというものがあります。
Glaejaのウィジェットが重ねて配置できないのですがどこで設定できるのでしょうか？
ホームアプリの設定の範疇ですね。
ありがとうございます。
設定を見落としてました。
フォントのインポートで、ダウンロードしたzipファイルが見つからないんですがどこにありますか？
端末やブラウザによって違うかもしれませんが、SD直下か内部ストレージの「Download」フォルダにあると思います。
探してもわからなかったので
パソコンでzipファイルとって
「Download」フォルダにぶちこんでやりました！笑
そしたらできました！
すみません ありがとうございました！！
かっこいいんで使わせていただきます！
ちょっと頑張って書いた。