第八回：2種類のアニメで簡単に作れるレコード盤ギミック【How to Kustom】

久々にKLWPのお話でも。

Google+のオフィシャルコミュニティに、レコード盤ギミックを簡単に作る方法がアップされていました。

KLWPβ版が更新、v2.11b525812betaでZooper WidgetのBBcodeをサポート！

クリックで拡大表示。でかいので気をつけて

久々にKLWPネタ。
忙しくてタブレット用ホーム画面v3が作れません。

【KLWP】タブレット用ホーム画面v2 RC1 Newspaper Style

Xperia Z4 Tablet SO-05Gの画面（2560x1600px WQXGA）をサポートしています。

横画面でFABを押した時のみ表示されます。
縦画面時、および横画面でFABを押す前の画面はこれから作ります。

【KLWP】タブレット用ホーム画面v1

間に合ったー。
エディオンからのメールで明日の午前中にBKB50が到着すると言われて大急ぎで作りました。

【KLWP】周囲の景色に合わせてテーマ色を変更するアクロバティックなKustomプラグインが公開

実際の動作を収めた動画。

このアプリはKLWPのプラグインとして動作します。単体では意味がありません。
アプリにカメラ権限がついており、インストールして所定のフォーマットで壁紙を作ると、メインカメラが映しているものから色を抽出してホーム画面に反映できるようになるみたいです。

第七回：Komponentから学ぶ、ホーム画面にRSSを埋め込む方法【How to Kustom】

今回はKLWPで作ったホーム画面にRSSを表示します。

ちょうど使いやすいKomponentが配布されているので、フィードURLを入手するだけです。

第六回：フローティングアクションボタン（FAB）の作り方【KLWP】

Android 5.xで本格的に導入された「マテリアルデザイン」という設計思想があります。

このマテリアルデザインを採用したUIによく使われている「フローティングアクションボタン」、略してFABをKLWPで作ってみます。

【KLWP】スライド・フェード・スケールアニメを使ったホーム画面

また作ってみました。

第五回：グローバル変数の基本、よく使う変数2つをモノにする【How to Kustom】

KLWPの一番の利点は関数を使えることです。
関数のおかげでテキストなどを変化させ、現在時刻や再生中の曲情報などを自動的に表示できるようになります。
ついでに、この関数（特殊な記号を用いた計算式）の中に代入する値のことを変数といいます。

今回はその変数をちょっと応用します。

第四回： アイコンフォントを使ってお手軽画像配置【How to Kustom】

How to Kustom 第4回ではアイコンフォントを使います。

アイコンフォントとは、その名の通り「文字」を「アイコン」に置き換えたフォントです。

【号外】How To KLWP作成にあたってモバイルでブログを見やすくしました。

ちょっとしたお知らせです。

このブログ、PCよりもモバイルデバイスから見てくださっている方が多い（過半数）のようなので、少し改造しました。
さしあたって「How To KLWP」講座に埋め込んだ動画に以下の工夫を加えてあります。

第三回 プリセットされた関数を使って様々な情報を表示しよう【KLWP】

第三回では、KLWPにプリセットされた「関数」を使います。

これはJavascriptなどで扱う演算子を用いたもので、Zooper Widgetでも同じように扱える部分があるため見たことのある人もいると思います。
とはいえプログラムと比べれば格段に簡単で、たいてい1行で事足りますので身構える必要はないです。

第二回 ぼかし処理と反転アニメ、図形の応用方法【KLWP】

How to Kustom 第二回では背景画像のぼかし処理に関する小技と、図形を使った応用編の2つを紹介します。

【KLWP】ホーム画面制作に役立つちょっとした小技を動画で解説 第一回

今回は、Androidのホーム画面カスタム用ライブ壁紙アプリ「Kustom LWP」を使って簡単なギミックを作る方法を紹介します。

毎回スクショだと枚数もかさむし文量も増えちゃうので動画撮ってきました。
動画に字幕も入れますがこちらでも細かい部分を解説していきます。

【KLWP】ループアニメが面白い

また作ってみました。

元になったホーム画面はMyColorscreenで公開されていたZooperテーマで、気に入って使っていた時期もあります。

Camera UI for Themer Android Homescreen by Themer - MyColorscreen
Camera UI Android Homescreen by peszek - MyColorscreen

「ループ」アニメで、触らずに動くライブ壁紙を作る

「ループ（バウンド）」というアニメを使って、カメラのファインダーに見立てた部分を「回転」と「スケールアウト」させています。

「時間」のデフォルトは10ですが、増やすことでそのアニメーションエフェクトを1回行なう（1サイクル）までの時間を伸ばすことができます。

「量」のデフォルトは100ですが、減らすことで少しだけ回転、少しだけスケールアウトするように調整します。ここの数値は「％」と捉えると良いかもしれませんね。

「遅延」のデフォルトは0ですが、ここの値を増やすと前述の「1サイクル」が行なう前に一定の待ち時間が生まれます。

ちょっと待ってから少し動くようなアニメを作り、そのアニメが「ループ（バウンド）」のため繰り返し行われます。

※ちなみに、「ループ」アニメの場合は 再生→再生→再生 という挙動となり、「ループ（バウンド）」アニメの場合は 再生→逆再生→再生 という挙動となります。「行って戻る」というのがバウンドアニメです。

背景のボカシ方

これは意外と簡単で、画面いっぱいに「図形」を置いて「FX」タブから「マスク」に「ぼかした背景」を選び、ブラー度合いを決めるだけです。

が、一定間隔でブラーの度合いを変化させたい場合はアニメを使います。

まず「FX」で「ブラー」に最大値を指定しておきます（MAXは25です）。

その上で、「ループ（バウンド）」アニメを追加、アクションを「フェードアウト」にします。

あとは速度を調節してやるだけで、「ぼかした背景（ブラー25%）を描くレイヤー」が一定間隔でフェードアウトし、ループアニメによってフェードインしてくる動きを作ります。
先に作った「回転」アニメに合わせるよう速度を調節すると見栄えが良くなると思います。

KLWPでパラメーターを決める上で一番不便に感じていることの1つとして、"サイズ"に関連する数値が最大720までしか取れないことが挙げられます。

Tomの端末は1280x720pxのディスプレイがあるため、縦方向に100%拡大した図形を置くにはレイヤーグループ（重ねる・並べる）を作って「スケール」を弄るしかありません。

しかし、レイヤーグループは独立したレイヤーとみなされ、「FX」タブに「背景」「ぼかした背景」を指定しても、適用されるのは「同じグループ内に指定した背景」とみなされます。
しかし現状レイヤーグループ内に限定した背景を置くことはできないので、グループ内に入れた図形には「背景」「ぼかした背景」要素は指定できません。

つまり、グループを作ると透過やブラーといった配色が多少使いにくくなります。

そこで今回はグループを作らず、 横720、縦640 の「図形」を2個置いて対処しました。
Z3 Compactの縦解像度の半分（1280/2=640）です。で、「位置」に「上」と「下」を指定します。
つまり「ぼかした背景」を表示するパーツを2個作っているわけです。

あと一応蛇足ですが、今回使っている背景（森林の写真）は「画像」や「図形」ではなく、グローバル階層（一番上の階層）の「背景」タブに指定しています。

そんな感じ。

【KLWP】LINE MUSICリリースを記念してUIをトレースしたホーム画面を作ってみた

なかなかいいですねLINE MUSIC。
特に、プレイヤー画面とかがどことなくiPhoneチックで好きです。

正直今のAndroidの主流となったマテリアルデザインはあんまり好きじゃないんですよね…。
背景がとりあえず白！って感じでコントラストが強すぎてチカチカします。

そこで注目したのが、iPhoneの通知領域の背景などに使われるブラーがかったまだら模様でした。
あれいいよねぇ…。

LINE MUSIC風ホーム画面（ただし原型あまり留めず）

こんな感じ。

3画面構成ですが全てグローバルスイッチ（KLWPのボタン）を使っているため、ホーム画面自体は1画面です。

参考にしたのは一番上に載せたプレイヤー画面と、この「アプリ起動直後」に表示されるカバー画面と、もう1つあります。

それがこの曲一覧画面。

ギミックや遷移エフェクトは適当に作りました。微調整まだまだ甘いけど（´・ω・`；）。

「アニメ」要素の「Fomula（式）」の使い方のコツを掴みつつあるため、多少凝った動きも今後させてみたいですね。

そんな感じ。

【KLWP】ステキなテーマを手に入れたのでポップアップウィジェットと合わせてみた

テーマはPlayストアで無料で配信されています。

Organicc for Kustom KLWP

開発元:Dillogic

無料

posted with アプリーチ

アプリアイコンなどは自分が使うものに挿し替えています。

それと、音楽ウィジェットを自作しました。

1つ1つZooperで作って、Popup Widget2のマルチウィジェットを使い、一気に6個をポップアップさせるようにしています。

Popup Widgetは通常4つまでしか同時指定できませんが、メニューから制限を解除できます。
ただし数が増えれば相応に重くなります。Z3Cは6つに耐えることが今のところできています。

あとはアニメを変更して左右からスライドインするようにして、

アニメーション効果を「オーバーシュート」にします。少し行き過ぎてから戻る感じになります。

なお、アニメーション速度を個別に変更することでバラバラに挿入させるよう演出しています。

設置後に位置を弄れるのもこのアプリが好きな理由の1つです。

この音楽ウィジェットは個人的に気に入っているので、ロック画面（WidgetLocker）でも使ってます。

もう1つ見つけた面白いテーマも紹介します。

Flappy K for Kustom KLWP

開発元:Dillogic

無料

posted with アプリーチ

Playストアにムービーが公開されています。

さすがに当たり判定とかはありませんが、タップで上下するところやスワイプでスタート画面に行けるところなどかなり拘っていて好きですｗ

そんな感じ。

【KLWP】Xperia Walkman(Music) Trace Home

Xperiaの「ミュージック」アプリのUIをトレースしたホーム画面を作ってみました。

2画面＋グローバルスイッチを用いたギミックで実質3画面構成になっています。

KLWPとは：
トムとロイド: KLWPカスタム

目測でトレースしているので配置やバランス、サイズ、フォントは必ずしも一致しません。

フェードインアニメはもうちょっと改良の必要がありそう。「グローバルスイッチONの場合」「OFFの場合」で別々のアニメを挿入できれば良いのですが…。

そんな感じ。