Monaca+HTML+JS(Canvas)で早押しアプリを作る! – part3 –

前回、前々回の記事でアプリが一通り完成したので、今回は作成したアプリをPlayストアに公開するまでをまとめてみたいと思います。

 

アプリ公開のための準備

アイコンの作成

Inkscapeなどで正方形のアイコン画像を作成します。

logo

このアプリでは、ず〜っと前に作成したwindowsストア版のアイコンを発見したので、それを利用したいと思います。

アイコンはどんなソフトウェアで作成してもいいとおもいますが、上のアイコンはInkscapeで作成しました。アイコン画像は正方形なものを作成します。

作成したアイコンを大きめのpng画像として出力し、それを複数のアイコンのサイズに合わせてImageMagicのコマンドでリサイズを行います。

# convert -resize 36x <入力ファイル> <出力ファイル名>
convert -resize 36x icon_defo.png icon_36.png

こんな感じで、必要なアイコンサイズ(36×36,  48×48, 72×72, 96×96, 144×144, 192×192)を作成します。

後述しますが、Monacaから1枚の画像を一括で登録できました。(汗

 

作成したアイコンの登録とAndroidアプリ設定

アプリケーションに先程作成したアイコンの設定とその他アプリの設定を行います。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-06-8-36-52

Monacaの開発画面のメニューバーにある[設定] -> [Androidアプリ設定]と選択します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-06-8-47-52

アプリケーション名 アプリにつけたい名前
パッケージ名 自分のサイトのURLを逆からつけるのが通常らしい
(持ってない人どうするんだ…)
バージョン 更新するさいには、ここの値を増加させる必要があります。
フルスクリーン 戻るボタンとかステータスバーを常に表示するかの設定

(Canvasが崩れたので、あとでチェックを外しました。)

自分のアプリに合った設定にしてください^^

 

アイコンの設定

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-06-8-57-31

 

[一括で設定する]のアップロードからアイコン画像を1枚アップロードすると、すべてのアイコン画像が設定されました。便利〜…。

また、スプラッシュスクリーン(起動時に現れる画面)を設定することができるのですが、自分はいらないかな〜と思って画像はいじらずに表示時間を0秒にしています。

 

パーミッション、その他の設定

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-06-9-00-32

パーミッションはmonacaが自動で設定してくれるそうなので、触りません。(触れません

その他の許可する外部URLはアプリケーションがネットワーク通信を行う際に通信を許可するURLを設定します。このアプリでは通信は行わないので、何も書いていません。

バックグラウンド時のアプリ実行は必要無いのでチェックを外して…

オーバースクロール…? スクロールで画面の端っこまで行った時に「ビヨーン」って感じになるやつです。

画面の向き

  • Default(端末の設定で縦にも横にもなる)
  • Landscape: 横画面固定
  • Portrait  : 縦画面固定

一通り設定が終わったら[保存する]で終了。

 

キーストアの登録

※Monacaの無料アカウントでは、24時間のうちにビルドできる回数が3回までと制限されています。(ビルドエラーは数に含まれないらしい。)気をつけてビルドしましょう。参照: 1. 概要 – Monaca Docs (1.15. Basic プランを使用した場合、ビルド回数に制限はありますか?)

 

まずは、[設定] -> [Androidキーストア設定] で 「キーストアとエイリアスの管理」画面を開きます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-06-9-11-09

続いて、新たにエイリアスとキーを設定します。エイリアスはアプリケーションの名前で問題ないと思います。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-06-9-11-18

(既に他のアプリを作成する際に登録したキーがありました…。)

エイリアスエイリアスのパスワードを登録するのですが、この際にこれらを忘れてしまうと、後々困るので、忘れないようにしましょう。追加を押して、「キーストアに登録されているエイリアスの一覧:」に追加されればOK。

 

ビルド

やっとこさ、ビルドしたいと思います。上のメニューから[ビルド] -> [Androidアプリのビルド]を選択します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-06-9-18-53

Androidアプリケーションのビルド画面で「リリースビルド」を選択します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-06-9-23-12

次の画面で先程作成したエイリアスを選択し、先程入力したエイリアスのパスワードを入力します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-06-9-23-31

ビルドが始まり、無事にビルドに成功すると以下のような画面が表示されるので、出来上がったパッケージをダウンロードします。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-06-9-26-09 %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-06-9-26-17

<ビルド実行時間>-android-release.apkみたいなファイルがダウンロードされます。

このapkを端末に移動して直接インストールすることもできます。

 

Playストアに公開する

アプリが完成したので、playストアに公開しようと思います。

前提条件として、

  • Google Play のデベロッパーに登録している(登録料2000円で複数のアプリの公開が可能。年会費などは無し)
    (iosのストアに公開する際には年間約10000円、毎年支払う必要があるらしいです。)

な状況を想定しています。

 

Google Play Developer Consoleで新しいアプリを登録

こちらのURLにアクセスし、google Play Developer Consoleにログインします。Androidの開発者登録のやりかたなどは、他にわかりやすく解説してくれているサイトが多数あるので、省略します。

ログインすると、すべてのアプリに自分が過去に登録したアプリが…懐かしいですねw

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-06-9-34-49

この画面の右上の[+新しいアプリを追加]からアプリのタイトルを入力、APKファイルのアップロードでアプリを登録します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-06-9-37-01

すると、アプリの設定を行う画面に移動します。この画面で左側のタブのチェックが全て緑色になるとアプリを公開することができるようになります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-06-9-40-22

正直…すべての項目の設定方法を解説するのは大変で、見ればわかると思うので…自分がハマりそうになったところのみ解説していきたいと思います。

の付いているところは空欄は許されないので何か埋めましょう。

[APKのアップロード]

先程作成したリリースビルドで作成したパッケージを選択する。

[ストアの掲載情報]
  • タイトル、簡単な説明、詳しい説明
    空欄にしておくことはできません。
  • 画像及び映像
    最低2つのスクリーンショットと高解像度アイコンヘッダー画像が必要です。なんとか作成しましょうw
    また、画像サイズが異なったりするとうまくいかないので、InkscapeやImageMagicを駆使していい感じの画像にしましょう!
  • 分類
    いろいろ選ぶ必要があります。一通り選んだら、一度「未公開版を保存」で保存してから
    [新しいコンテンツのレーティング]
  • プライバシーポリシー
    ヘルプを見ると、(https://support.google.com/googleplay/android-developer/answer/113469?rd=1#privacy)
    機密性の高い権限やデータへのアクセスをリクエストするアプリやDesigned for Familiesプログラムに参加しているアプリ
    でなければ、プライバシーポリシーの記載は必須ではありませんとあります。
    どちらにも該当しないので、プライバシーポリシーを省略するにチェックを入れました。
[コンテンツのレーティング]

詳細にレーティングでの注意点が書かれています。しっかり読んで答えましょう。今回、自分が作成したアプリでは、レーティング評価の結果以下のような結果になりました。多分、一番ゆるいレーティングです。%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-06-10-24-04

[価格と販売/配布地域]

海外のユーザーにダウンロードしてもらえるとはあまり思っていませんが…制限する理由も無いので、「すべての国を選択」にチェックを入れました。

最後の同意事項もしっかり読んでチェックを入れます。この時、「マーケッティングの除外」は必須の項目では無いので注意。

 

一通り設定が終わると、左側の灰色だったチェックがすべて緑色に変わっています。すると、右上にある「アプリを公開」がクリックできるようになるので、いよいよ公開です!

公開ボタンをクリックすると、上部のバーに「アップデート処理をしています」と表示され、公開のための準備が始まります。%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-06-10-29-46

 

自分の場合は、30分程でアプリが公開されました!

 

関連記事

① ブログを書きながらアプリを3時間で作ろうとした。 Monaca+HTML+JS(Canvas)で早押しアプリを作る!

② アプリを仕上げる: Monaca+HTML+JS(Canvas)で早押しアプリを作る! – part2 –

③ アプリをストアに公開する(この記事) : Monaca+HTML+JS(Canvas)で早押しアプリを作る! – part3 –

2 thoughts on “Monaca+HTML+JS(Canvas)で早押しアプリを作る! – part3 –

  1. Pingback: Monaca+HTML+JS(Canvas)で早押しアプリを作る! | たくのこ Web

  2. Pingback: Monaca+HTML+JS(Canvas)で早押しアプリを作る! – part2 – | たくのこ Web

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください