ハナアルキ花京院スマホホーム

自分用にAndroidのホームをカスタマイズしたので、せっかくなので手順を載せておきます。
iOSはホーム画面がカスタマイズできないので…残念ですが…
二次創作のクロスオーバーなので権利元には内密に、個人で楽しむ用に限り画像はフリーです。
サイズや色味などご自分のスマホのサイズや好みに合わせて変更してもらっても構いません。

出来上がりイメージはこんな感じです。

Screenshot_2017-04-15-17-10-26
ハナアルキ院をタップすると吹き出しが入れ替わります。
目や耳も動くよ。
アイコンが気に入らなかったら自分で描き直してね。

1.カスタマイズの準備

1-1.使用するアプリの準備
カスタマイズに使用するアプリをインストールします。

・Nova Launcher ホーム

ホーム画面を管理するアプリです。
これだけでも結構色々できますが今回はベースに使用します。
Get it on Google Play

・KLWP Live Wallpaper Maker

ホーム画面カスタマイズアプリです。
有料版は作成したカスタマイズの保存や他の人の作ったもののインポートができます。
今回は手動で作成するので無料版で大丈夫です。
Get it on Google Play

・Apps Organizer

アプリ整理用アプリです。
今回は複数のアプリをまとめたフォルダを作るのに利用します。
Get it on Google Play

1-2.画像などの素材の準備

壁紙などの画像をインストールします。
ここにまとめてあるので解凍して使ってね。

2.ホーム画面に配置するアプリの整理

まずはApps Organizerを起動してフォルダを作成します。
今回入っているアイコンは下記の6つです。
・通話
・ブラウザ
・ツール
・ゲーム
・ツイッター
・LINE
完全に自分用です…みんな自由にカスタマイズしてね…
このうち「通話」と「ツール」と「ゲーム」がフォルダになります。
もうちょっとイラストのみの空間を減らしてアイコンを並べればフォルダを作る必要はありませんが、今回はあるきちゃんメインなので仕方ない。

まず「ラベル」タブに移動して設定ボタンから「新しいラベル」を3つ作成します。

名前は「通話」、「ツール」、「ゲーム」にします。
もちろん好きな名前でいいよ。

次に「アプリ」タブに移動し、フォルダに入れたいアプリをタップして追加していきます。

「通話」には電話やメールなど、「ツール」には設定や電卓などという感じです。

3.ホーム画面管理アプリの設定

次にホーム画面を管理するアプリをデフォルトのものからNova Launcherに変更します。
機種によって多少違うかもしれませんが、設定→本体設定→ホーム切替みたいな名前の項目からNova Launcherを選択します。
これでデフォルトで表示されるアイコンや検索バーなどが消えると思います。
消えなかったらNova Launcherを起動して設定項目から消してください。
残しておきたかったら次のページを作って使うとかでも問題ないです。
Nova Launcherの真価はホーム画面をグリッド状にして使えるというところなので、あるきちゃんホームに飽きたらぜひ使ってみてください。
というか昔グリッド状にして遊んでた名残で入れてるだけでデフォルトのホーム画面管理アプリでもものによっては問題なくカスタマイズできるかもしれない…

4.ホーム画面をカスタマイズしよう!

ここからが楽しい楽しいカスタマイズ本番です!
KLWPを起動してください。英語だけどまったく怖くはないです。
日本語化する方法もあるみたいですが英語で困ったことはないので私はそのまま使ってます。
単語くらいしか出てこないし。

4-1.壁紙を設定

まずはバックの壁紙を設定します。
下の方の項目からBACKGROUNDを選んで、TypeをタップしてImageを選択します。
Bitmap項目でhome5_base.pngを選びます。
あるきちゃん素体がセットされたと思います。

4-2.耳を配置

右上の「+」をタップして、Imageを選びます。
ITEMSのところにImage(Not Set)というのが追加されたと思います。
これをタップして詳細設定に入り、Bitmap項目でhome5_ear.pngを選びます。
ホーム画面の大きさによっては壁紙との比率がおかしい場合があるので、そのときはWidth項目をいじって調整してください。
+-が1ずつ、◀◀▶▶が10ずつ値を増減できます。
数字部分タップで直接入力もできます。
BITMAPタブの隣のPOSITONタブに移り、位置を指定していきます。
こちらもXOffsetとYOffsetを適当にいじって調整してください。
Xというのが横、Yが縦を表しています。
このあとこの耳にはピクピク動くアニメーションをつけますが、とりあえず左上の矢印マークでITEMSの項目まで戻ってください。
アイテムをロングタップ、または右端のチェックボックスをタップで名前の変更やコピーができます。
Imageという名前が分かりづらかったら耳とかEarにでもしておいてください。

4-3.目を配置

同じようにImageを追加して、今度はhome5_eye1.pngを選択します。
いい感じにかわいいサイズ・場所に配置してやってください。
できたらまた1段階戻って、この目のアイテムをロングタップまたはチェックでコピー・ペーストします。
名前を変えたらBitmap項目でhome5_eye2.pngを選びます。
2種類の画像が重なっている状態ですが、あとで調整するのでこれで問題ありません。

4-4.吹き出しアイコンを配置

次は吹き出しアイコンを配置します。
まずは新しいImageアイテムを追加します。
名前は通話アイコンとかその辺にしておいてください。
home5_icon01.pngを選んだらいい感じのサイズにして右上のあいてるスペースに配置してください。
数ピクセルズレても死なないのでてきとうにてきとうに。
できたら今度はTOUCHタブに移動します。
長い英文が表示されてますが親切に使い方を説明してくれてるだけなので無視して大丈夫です。
右上の+をタップするとSingleというアイテムが追加されます。
Noneと表示されている部分をタップすると詳細設定に入ります。
Action項目のNone部分をタップして、出てきた一覧の中からLaunch Shortcutを選びます。
ショートカットを起動するという意味です。
選ぶとActionの下にShortcut項目が追加されるので、こいつをタップします。
一覧の中からApps Organizerを選ぶとラベル一覧が表示されるので、先程作成した通話ラベルを選びます。
ここ、直に電話アプリ起動したいわーという人は次で似たようなことやるのであとで戻ってきてください。

同じようにImageアイテムを追加、home5_icon2.pngを設定します。

Chrome派じゃねーんだけどという人は我慢して使うか自分で作り直してね。
いい感じのサイズ・位置に配置できたら同じようにTOUCHからActionを追加し、今度はLaunch Appを選びます。
アプリを起動するという意味です。
今度はApp項目が追加されるので、ここから起動するアプリを選びます。
私はChromeですが好きなブラウザアプリでいいよ。

3番目にはツールアイコンを設定します。

home_icon3.pngをいい感じにセットし、通話アイコンと同じようにツールフォルダへのショートカットを設定します。

吹き出しが3つできたらITEMSの並んだページまで戻り、この3つのImageアイテムにチェックを入れてコピペします。

これで吹き出しアイテムが6つになったと思います。
新しくできた3つの名前をゲーム、ツイッター、ラインに変更してそれぞれ中身も修正します。
Bitmap項目をhome5_icon04.png~icon05.pngに修正して、TOUCHの中のActionもそれぞれアプリやショートカットに設定し直します。
2つずつ重なっている状態ですが問題ありません。
これで画像の配置は終わりです!
あとでこれにアニメーションつけていきます!楽しいよ!

4-5.日付と時刻をセット

日付と時刻を文字列で入れていきます。
デザインによってはアナログ時計みたいなウィジェットを使ったりもするのですが、今回は文字列でいきます。
動的に変わる文字列には正規表現を使います。
分かる人はいろんな文字列入れて遊んでみてください。
なにそれわからんという人は今回私が用意する文字列をそのまま使ってもらえれば大丈夫です。

右上の+から今度はTextを選んで追加します。

名前を日付にして、中を設定していきます。
Text項目には$df(MM/dd)$と入力してください。
簡単に説明すると$$で囲ったところが「ここからここまでデータやで」って感じで、dfが「このデータは日付データやで」という意味、MMが月でddが日です。
年を入れたかったからyyyyとか使おう。
でも今回はフォントサイズ大きめにするから月日だけで。
できたら右上のチェックボタンをタップして編集を完了します。
Font項目で使用するフォントを選びます。
私はRoboto Slab Boldにしましたがなんでもいいよ。
Typeはそのままで大丈夫です。
SizeとPOSITIONはこれまたいい感じにしてください。
斜めとかにしたかったらRotationとかに何かセットしてみてね。
PAINTタブでStyleにはFillを選び、Colorでは白(#FFFFFF)を選んでください。
私はこいつにTOUCHでLaunch Appからカレンダーが起動するように仕込んでいますが、カレンダー使わないならそのままで大丈夫です。

同じようにTextアイテムを追加して、今度は曜日を入れます。

Text欄には$df(E)$と記入してください。
これで曜日が英語表記で入るはずです。
こいつはTypeをFit Widthにします。
これで横幅はみ出ない。
Widthは私の場合は120くらいです。

最後に時刻を入れます。

$df(hh:mm:ss)$と記入しましょう。
ssは秒数です。
分まででいーわという人はmmまでにしておいてね。
私はこいつにTOUCHでアラームアプリが起動するように仕込んでいますが以下略。
これでテキスト類の配置は終了です。
問題なければテキスト部分は日付や時刻に変わっているはずです。

4-6.グローバルスイッチを追加

目や耳や吹き出しを動かそう!
ピクピクぱちぱちさせよう!かわいいぞ!

まずはグローバルスイッチを用意します。

グローバルスイッチというのは、カスタマイズ全体に効果のあるフラグみたいなもんです。
ITEMSの並んでいる画面まで戻って、タブの列を右に移動するとGLOBALSというのがあります。
ここで右上の+をタップして新しいアイテムを追加します。
Titleはなんでもいいのですがあとで演算子に組み込むので短い英単語がいいと思います。tapとか。
TypeをOn/Off Switchにします。
Auto OnもOffもManual(手動)のままにしておきます。
タイマーとか関数でも動かせますが今回は手動で。

4-7.タップ用図形を仕込む

ITEMSまで戻って+から新しいアイテムを追加します。
今度追加するのはShape(図形)アイテムです。
名前はなんかてきとうに…私これしか言ってない。
詳細設定に入り、ShapeはなんでもいいですがCircleが分かりやすいかな。
Widthをいじってあるきちゃんの体くらいの大きさにします。
できたらPAINTタブのColor欄で透明(#01FFFFFF)を選んでください。
真ん中あたりのバーを一番右まで動かせばいいと思います。
右上のチェックで戻ると作成した画像が透明になっていると思います。
POSITIONタブで図形をあるきちゃんの体に重なるように設定します。
できたら次はTOUCHタブに移動します。
+ボタンで追加、SingleのActionではToggle Global Switchを選びます。
できたらSwitchをさっき作ったtapスイッチにします。
これであるきちゃんの体をタップすると、タップスイッチのオンオフが切り替わることになります。
このスイッチによって画像アイテムの挙動を変更しましょう!

4-8.目を動かす

まずは目をぱちぱちさせます。
前の方で追加した目(開く)のアイテムの詳細設定に移動します。
BITMAPタブにOpacityという項目があると思います。透過度のことです。
こいつの右端のチェックボックスにチェックを入れたら、右上の電卓のようなマークをタップします。
これでこいつに演算子が組み込めることになります。
現れた電卓マークをタップすると、何やら別の画面に移動すると思います。
Formula Editorというところに条件文を入れていきましょう。
$if(gv(tap,1),100,0)$と記入します。
これは「もしグローバルスイッチtapが1だったら透明度は100、違ったら0」という意味です。
記入できたら右上のチェックをタップで反映しましょう。

同じことを目(閉じる)のアイテムでもやります。

ただしこちらは$if(gv(tap,1),0,100)$と記入します。

せっかくなのでどんな感じか見てみましょう!

一番上の階層に戻り、右上の方のボタンで保存します。
1回目は壁紙に反映しますかみたいなことを聞かれると思うのでOKだったかそんなボタンで反映します。
問題なければホーム画面が変わっているはずです。
下の方に日付や時刻が表示されていると思います。
あるきちゃんの体をタップするとおめめをぱちぱちするはずです。かわいい!

4-9.吹き出しを入れ替える

グローバルスイッチによって吹き出しも入れ替わるように設定します。
ゲームの吹き出しに移動し、ANIMATIONタブで右上の+から新規追加します。
Animate→ReactOnと進み、Global Switchを選択します。
Globalにはtapを入れます。
このあとどんなアクションをさせるかは好みの問題にもなってくるのですが、とりあえず今回はフェードイン・アウトさせましょう。
ActionにFade Outを選びます。
同じものをツイッターとLINEのアイコンにも仕込みます。
これであるきちゃんをタップするごとに吹き出しがフェードイン・アウトで切り替わるようになりました。
ANIMATEタブのDurationやDelayなどでアニメーション速度や遅延などを調整できます。

4-10.耳を動かす

これが最後の項目です!
タップするたび耳がピクピクするようにしましょう。

耳の画像アイテムに移動します。

ANIMATIONタブに新規追加、Global Switchからtapを選びます。
今回はタップするたび、という条件にしましたが、ループアクションを使うことで特に条件なしに延々ピクピクさせておくこともできます。
ActionにはRotate Invertedを選びます。
EaseはNormal with returnにします。
ちなみに右上の再生ボタンで動きを確認できます。
ここまでの状態だと耳がぐるんぐるん大変なことになると思います。
Anchorは回転の中心点です。
Module Bottom Rightにします。
これで耳の付け根を中心に回転しはじめます。
Amountを7前後にします。増減はお好きなように。
これで一周ではなくちょこっとだけ動くようになります。
Durationは10のままでもいいですが、早めたかったら減らしてゆっくりにしたかったら増やしてください。

これで完成です!

いえーい!ぱちぱち!
アイコンタップでアプリまたはショートカットが開き、あるきちゃんタップでぱちぱちしながら吹き出しが入れ替わると思います。
今回はそんなに複雑な作りにはしませんでしたが、もっと演算子を使ったり(夜だけ暗くするとか)動的なウィジェット(バッテリー表示とか)を置いたりもできます。
そう!このページの目的は皆さんにカスタマイズって楽しいよ!ということをお伝えすることだったのです!
これをきっかけに色んなオリジナルのホーム画面作ってくださいね!