Xperia Theme Creatorを使ってみました

先日、Xperiaのテーマを自分で作れるツールXperia Theme Creator(Beta)」が発表されました。


Sony Mobile、Xperia用のテーマパックを自作できるPC用ソフトウェア「Theme Creator BETA」を無料で一般公開 | ガジェット通信


Androidでの「テーマ」とは、以下の紹介記事に記載のように、画面の外観全体を変えられる仕組みです。



オススメのXperiaテーマ20選 | orefolder.net


今回のXperia Theme Creatorの公開によって、Xperia向けのテーマ作成の敷居がかなり下がったようです。


実は最近Xperiaに変えたばかりでしたので、ちょっと試してみました。


入手先、基本的な使い方は以下の記事に詳しく書かれているため省略します。


Xperiaのテーマを自作できる「Theme Creator BETA」を使って世界に1つだけのmy Xperiaを作ろう! | オクトバ


私はPhotoshopを今回初めて使ったので、Photoshopの使い方を中心に説明します。


[補足]

Xperia Theme CreatorはPhotoshopでの編集を前提としているので、テーマ作成にはPhotoshopが必須です。

未入手の方は、Creative Cloudへの登録が必要です。

しかし、30日の無料体験版があるので、まずはこれでよいと思います。


では使い方です。

作業手順

1. Xperia Theme Creatorが自動生成するTempleteをPhotoshopで開く

2. PhotoshopでTempleteを編集し、スライスありで「Webで保存」してpng画像を出力する

3. Xperia Theme Creatorが出力画像を読み込み、テーマプレビューを生成する

4. Xperia Theme Creatorからapeビルドし、SDカードまたはadbコマンド経由で実機に転送する

作業手順を説明

1. Xperia Theme Creatorが自動生成するTempleteをPhotoshopで開く

Templeteは以下のように多数あります。

f:id:Takyu:20150309075550p:plain

それぞれにテーマ部品や背景画像が含まれており、カテゴリ別に別ファイルになっています。

たとえば、「SystemUI-NavBar(v1.0).psd」をPhotoshopで開いてみます。


すると、Sonyロゴが表示された画面が開きます。

f:id:Takyu:20150309214209p:plain

2. PhotoshopでTempleteを編集し、スライスありで「Webで保存」してpng画像を出力する

最初、どのpsdファイルを開いてもSonyロゴしか表示されなかったので困りましたが、レイヤー一覧?(呼び方合ってるか不明です)のhideme before starting の目のアイコンを選択して非表示にすると画面部品が見えるようになります。

f:id:Takyu:20150309214528p:plain

この一枚の絵に書かれた画面部品を変更すれば、Xpreiaのアイコンを変更できます。


たとえば、Androidでおなじみのホームアイコンを変更してみます。


f:id:Takyu:20150310221407p:plain

①まず、表示範囲を移動させます。手のひらアイコンを選択すれば、ドラッグで移動できます。

②xxhdpi / drawable-xxhdpi / xxhdpi_ic_sysbar_homeを選択します。ここだけ反転します。

③アイコンの選択ツール(名称合ってるか不明です)を選択し、④ホームアイコンを移動させます。

画像では見づらいですが、灰色の枠内から移動させています。


次に、任意の画像をPhotoshopにドラッグします。とりあえず水色の四角形を準備しました。

⑤灰色の枠に入るように大きさを調整後、Enterキーを押します。Enterキーを押さないとうまく移動できないようです。

続けて、先ほどと同じようにして、四角形を灰色の枠に移動させます。

f:id:Takyu:20150310221758p:plain


ここで、Hide me before exporting を選択して、目のアイコンを消します。

すると、このようにアイコン以外の表示が非表示になります。この状態でexportします。



f:id:Takyu:20150310221959p:plain


ちなみに、もし
Hide me before exportingを選ばないでexportすると、最終的にXperia
灰色の枠が残って表示されてしまいます。


f:id:Takyu:20150310221852p:plain


あとは、画面の指示に従ってpngを作ります。

Webで保存を選びます。

f:id:Takyu:20150310222038p:plain

アイコンが多いためか、MacBook Late2013では10秒ほどかかりました。

f:id:Takyu:20150310223022p:plain

exportの設定はとくに変更せず、OKを押します。

png画像の保存場所を聞かれますが、提示された保存場所をそのまま指定すればOKなはずです。

この結果、SystemUI-NavBarというフォルダに多数のpng画像が作られます。

3. Xperia Theme Creatorが出力画像を読み込み、テーマプレビューを生成する


creatorを開いておけば、先ほど作ったpng画像が自動的に反映されて表示されます。

f:id:Takyu:20150310223108p:plain

4. Xperia Theme Creatorからapeビルドし、SDカードまたはadbコマンド経由で実機に転送する

Theme CreatorからBuild->Export Test APK を選ぶとapkファイルが出力されます。


f:id:Takyu:20150310224413p:plain


あとは、コマンドプロンプト(Windows)かターミナル(Mac)を開いて、当該ディレクトリに移動し、

adb install <テーマのapkファイル名>

とすれば、インストールできます。

※開発者モードかつ正体不明のアプリをインストールする、を許可していることが前提です。



とにかくパーツが多いので把握が大変ですが、たとえばホーム画面を変えたり、

f:id:Takyu:20150310223610p:plain


リスト表示を半透過させることもできます。

f:id:Takyu:20150310223736p:plain


ちなみに、ホーム画面は2/25のVRからあげ祭りで出展したUnbounded Space Ver Metaの画面です。

アイコンをそろえて配色に気をつければ、けっこうかっこよい感じのテーマが作れそうです。