【Android】「Zooper Widget」で作ったテンプレートをAPKにしてパッケージ化してみよう！

photo credit: Flооd via photopin cc

最近、読もうと思ってて読めていない本が溜まってキテマス。こんにちはえんぞーです。

本日発売のホリエモンの新刊もAmazonにて注文してますが、そろそろ発送だろうか・・・近場の店で買えば良かったかな。

さて今回は以前から紹介しているZooperWidgetのテンプレートをAPKのパッケージにしようというお話し。

相変わらずニッチな部分を攻めています「えんぞーどっとねっと」ｗｗ

PRO版オンリーの機能

このAPKにパッケージするっていうのはPRO版だけの機能になります。APKテーマを使用出来るのもPRO版のみ。

とは言ってもですね・・・アプリ単体でAPKを作ってくれるという訳ではないので・・・ちょっと敷居が高い気がします。

基本的には公式ページに載ってる通りの事をやるわけですが・・・。

必要な物

• Zooper Widget PRO v2.38 or better (uh Yeah)
  zooper wedgwt PRO版のVer2.38以上
• Android Market developer account
  デベロッパーアカウント・・・これはGoogle Playに掲載するときに。
• The Android SDK available here
  アンドロイドSDK必要
• Android Studio (you can also use Eclipse, but for this example i will use the studio)
  エクリプスでも可能だけど、ここではアンドロイドスタジオ使うよ！
• A proper Java JDK
  Java のJDKも必要

と、ZooperのAPKパッケージ作りたいだけなのにAndroidアプリを開発できる環境を構築しなければなりません。

全部言われるがままにインストールすれば良いだけとも言えますが。

APKを作るまでの手順

上記の必要な物は全部インストールしたと言うことで話を進めます。

※個人的にAirDroidを用意した方が捗るかと思いますので入れておいて下さい。

まずはZooperWidgetからテンプレートデータを書き出す

公式ページにもあるように「Create APK～」にチェックを付けて名前も付けて保存します。

で、その保存したファイルなんですが「SD CARD/ZooperWidget/APKZips」にあります。

この中に・・・。（ちなみにこの作業はAirdroidで行ってます）

これ、ありました。

このファイルはパソコン上の自分で分かるところに保存しておいて下さい。

サンプルプロジェクトファイルをダウンロードする

次に公式で用意してくれているサンプルプロジェクトをダウンロードします。

場所はここになります。

Gitが使える環境ならばGitでCloneしても良いですし、そうで無ければダウンロードボタンからダウンロードします。

ダウンロードしたファイルを解凍して合体

ダウンロードしたサンプルプロジェクトを解凍してその中に先ほどZooperWidgetから保存して解凍した物を放り込みます。

 アイコン変える

Android Asset StudioでAPKのアイコン作った場合はダウンロードしたZipファイルを解凍して出てくる「res」フォルダを上記と同じように放り込んでおいて下さい。

今回の作業はこんなアイコンでパッケージしてみます。

Android Studioを立ち上げてプロジェクトをインポート

立ち上げて～・・・。

この画面で「Import Project」を選択。

ここはそのまま「Create～」で良いので次へ。

ここでサンプルプロジェクトのフォルダを選択して「OK」を押します。

他に何かウィンドウ出てきた気もしますが構わず進むとインポートが完了します。

この状態になったらインポート完了です。

修正する箇所

APKの名前やらを変更しなければなりませんので「resvalues」にある「string.xml」と「zooper.xml」を編集します。

「string.xml」でアプリ（APK）の名前を入力。

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<string name="app_name">えんぞーどっとねっとさんぷる</string>
</resources>

「zooper.xml」で

<?xml version="1.0" encoding="utf-8"?>
<resources>

  <!-- These info will be used in the available skins list -->
  <string name="zooper_pack_name">@string/app_name</string>#ここに先ほどのアプリ名きます
  <string name="zooper_pack_desc">ここにパッケージの説明</string>
  <string name="zooper_pack_author">ここに作者名</string>

  <!-- If set to 0 user will not be allowed to save this template -->
  <integer name="zooper_pack_allowsave">1</integer>

  <!-- This is the icon that will be shown in the plugin list, by default the app one is used -->
  <drawable name="zooper_pack_icon">@drawable/ic_launcher</drawable>
</resources>

ここまでやったら後は保存してビルドします。

「Build」→「Make Project」を選択。

で、↓この様なエラーが出た場合は矢印のリンクをクリックして設定画面に飛びます。

で「Use external build」にチェックをいれて再度ビルドして下さい。

成功すると、「outproductionZooperWidgetSampleSkin-master」の中にZooperWidgetSampleSkin-master.apkが出来ています。
※サンプルファイルそのまま作っていったのでファイル名がまんまですね・・。

早速テスト

さて、出来たAPKファイルを端末に送ったりして早速実行してみましょう。
※セキュリティの設定で「提供元不明のアプリ」にチェック入れておかないとダメかも。

インストールして新たにZooperWidgetを貼り付けてテンプレート選択画面を見てみると・・・。

あった。自分でビルドしたテンプレートだ。

中身を見ると↓こんな感じに。

このように「assets」フォルダに入れたテンプレートがビルドされます。（複数のテンプレートを入れる事が可能）

複数入れ込む場合はZooperWidgetから保存して「assets」フォルダにコピーする部分を入れたいテンプレートの数だけ行う事になります。