2013年4月26日

Zooper Widget 自作スキン作成 / 配布


Androidの魅力の一つに携帯の画面を自分流に独自にデザイン、アレンジできる事。

iphoneはUI的に誰もが直感で分かるように、ミニマム且つ導入したアイコンを並べるだけで、これが良いという人ももいれば、僕にとっては詰まらないの極み。みんなおんなじ画面。いい方変えると皆おんなじだから誰もが使える。

Androidにはホームウィジットというものが存在し、携帯のインターフェースのカスタマイズに大きな幅があって使う人の個性を引き出す事が可能なんです。
デザインの遊びが出来るってこと。

ここで今回はAndroidウィジットアプリ「Zooper Widget」の紹介と自作スキンの提供です。


Zooper Widget(無料/有料パッチあり):
https://play.google.com/store/apps/details?id=org.zooper.zwfree&feature=more_from_developer#?t=W251bGwsMSwxLDEwMiwib3JnLnpvb3Blci56d2ZyZWUiXQ..

「Zooper Widget」はデフォルトでもスキンが色々あるのですぐに使えますが、やっぱり醍醐味は自分流のカスタマイズ。

僕のHTC EVO 3Dで使用しているホームは基本「Nova Launcher」+「Nova Launcher Prime」。そのホーム画面を「5行 4列」に指定での環境になってます。


Nova Launcher(無料/有料パッチあり):
https://play.google.com/store/apps/details?id=com.teslacoilsw.launcher&feature=nav_result#?t=W251bGwsMSwyLDNd

また、ロック画面は「WidgetLocker Lockscreen」でロック画面でも自由にウィジットを配置できます。

WidgetLocker Lockscreen(有料):
https://play.google.com/store/apps/details?id=com.teslacoilsw.widgetlocker&feature=search_result#?t=W251bGwsMSwyLDEsImNvbS50ZXNsYWNvaWxzdy53aWRnZXRsb2NrZXIiXQ..

Zooper Widgetの自作スキンを配布します。興味ある方はどうぞ使ってみてください。
環境によっては自分で調整しないとレイアウト崩れてしまうかも。自作ウィジットの説明をちょっと。

ホームに置いてある時計が下記の写真の「Zooper Widget Pro 2 x 4」サイズです。
自作ウィジェット名:MainClock



>左上から
● 現在の場所(都市, 国)
● 現在地の下は時刻、日付

>日時表示の右
● 明日の天気予報で、天気アイコン
● アイコンの下が明日の天気状況
● 天気状況の下が明日の最高気温と最低気温

>時計/天気の下
● RAMメモリー使用状況
※HTC EVO 3D はRAM領域1gbでシステム上常時使用している部分を除き最大797mbが使用RAMらしいので XXXmb / 797mbとしています。

>RAM表示の下
● 内部記憶容量
● 外部記憶容量(SD)

の表示になっています。

ロック画面に置いてある時計が下記写真で「Zooper Widget Pro 2 x 2」サイズです。
デフォルトのライブラリーに入ってるのを少しアレンジしました。
自作ウィジェット名:CircleClock



>外側の円
● 時間ゲージ

>2番目の円
● 分ゲージ

>中心円の中の上から
● 現在地
● 時刻
● 日付
● バッテリー表示 %
● バッテリーゲージ

の表示になっています。

これらのスキンを下記URLよりダウンロードして、指定ファイルをご自分の端末の保存領域(SDカード内なり内部記憶領域)の以下の指定場所保存すれば、画面へのウィジット配置で使用できると思います。

Zooper Widget 自作スキンDL先:
http://www.mediafire.com/?wjr1sk14jl7dda1

ZooperWidget_Voodoo.zipというファイルを解凍すると「SDカード内」というフォルダが出てきますのでその中の
「fonts」
「ZooperWidget」
の2つをそのまま端末の保存領域に入れれば良いかと思います。

通常、外部記憶メディアを搭載出来る携帯の場合だと
/sdcard/
以下の階層になってきます。

NEXUS7だとSDカードの概念無いので
 /storaget/emulated/0/
以下の階層かと思います。

<ファイル構成>
/sdcard/
 ┣ fonts/
   ┣ imagine_font.ttf
    TECHNOID.TTF
  ZooperWidget/
   ┣  Circle Clock.zw
   ┣  Circle Clock.zw.png
   ┣  MainClock.zw
     MainClock.zw.png

興味あったら使ってみてください。
端末によってはサイズ、レイアウト等崩れるかもしれないのでその時はご自分で調整お願いします。そして、自分流カスタマイズもしてみてくださいね。





3 件のコメント:

  1. スキン頂きました。

    Googleカレンダーのスケジュール表示の自作に苦戦してるのですが

    10日 月曜日
    10:00~ ○○株式会社
    12:00~ 会議

    11日 火曜日 代休
    10:00~ デート



    12日 水曜日
    予定なし

    って感じに表示出来ないのでしょうか??

    返信削除
  2. 記事読んでくださってありがとうございます。
    久しぶりの投稿ありがとうございます。

    スケジュールを日にち毎でのスペース開けるには、レイアウトのアレンジで行間開けるしかないですね。

    基本スケジュール表記を「Text」で作成し
    表示内容を
    「#C0SM/dd# #C0SEEE hh:mma# 〜 #C0TITLE#」

    「8/13 12:00AM 〜 スケジュール内容」
    という表記ができます。
    「#C_S...」の_の数字を、0、1、2、3… と変えると目先のスケジュールから順に表記させるパラメーターです。

    0は近々のスケジュール
    1はその次

    と言った感じです。

    この基本表記を
    「#C0SM/dd# #C0SEEE hh:mma# 〜 #C0TITLE#」
    「#C1SM/dd# #C1SEEE hh:mma# 〜 #C1TITLE#」
    「#C2SM/dd# #C2SEEE hh:mma# 〜 #C2TITLE#」
    と表記すると向こう3個分のスケジュールが表記されます。
    この3行をレイアウトする時に、お互い行間を開けるように配置してあげれば良いと思います。

    匿名様の様な
    10日 月曜日
    10:00~ ○○株式会社
    12:00~ 会議

    とするなら
    「#C0SM/dd# #C0SEEE#」
    「#C0SHH:mm# 〜 #C0TITLE#」
    「#C1SM/dd# #C1SEEE#」
    「#C1SHH:mm# 〜 #C1TITLE#」
    という具合でしょうか。

    僕は表記を常に英語にしたいので、日付曜日は英語表記になるようにしているのですが、最初に述べた
    「#C0SM/dd# #C0SEEE hh:mma# 〜 #C0TITLE#」
    のサンプルを作りました。
    イメージがこんなじゃないんだよ…かもしれませんが。

    プレビュー:http://goo.gl/CBgBWg
    データ:http://goo.gl/itLoaC

    ここからバックアップデータどうぞ。
    このScedule Sample.zwというファイルをこの記事でも紹介していますが、ご自分のZooperWidgetフォルダーに入れてみてください。

    4x2サイズでScedule Sampleというウィジットです。

    返信削除
  3. はじめまして。
    最近Zooper始めてスケジュールを自分の思うようにレイアウトしたいと色々探してここに辿り着きました。
    分かりやすく丁寧な解説のおかげで無事カスタマイズする事が出来ました。
    ジョルテが便利でしたが、レイアウトのカスタマイズはいまいち制限があるのでZooperでやる方がいいですね。
    本当にありがとうございました。

    返信削除