AndroidアプリをつくってGoogle Playストアに公開しよう！

目的

Androidアプリ作成のひと通り、開発環境構築からGoogle Playストアへのアプリリリースまでの手順を示すこと。
Androidアプリ作成に興味があるが、手順がわからない、なんか面倒そう、そんな人達の背中を押して、0から一気にGoogle Playストアへのアプリリリースまで一通り行い、その後のアプリ作成の下地をつくる。そして、つくる楽しさを共有したい。

注釈

本資料は【祭り！】AndroidアプリをつくってGoogle Playに公開しよう！【MPS世田谷】 - Morning Project Samuraiのイベント当日の説明資料として書かれた資料である。

以下64bitのWindowsでの手順になるが大きな流れはMacやLinuxでも同じ。

JDKのインストール

Androidアプリの開発にはJava言語を使う。そのこともあって、Androidアプリの開発にはJDK(Java Development Kit)が必要となる。

1. Java SE Development Kit 7 - Downloads | Oracle Technology Network | Oracle
   へアクセス

2. 「Java SE Development Kit 7u79」にある
   「Accept License Agreement」にチェックを入れて
   「jdk-7u79-windows-x64.exe」をクリックすると
   「jdk-7u79-windows-x64.exe」がダウンロードされる。
   (32bitOSの場合は「jdk-7u79-windows-i586.exe」をダウンロードする。)

3. ダウンロードされた「jdk-7u79-windows-x64.exe」を実行しウィザードに従ってJDKをインストールする。

Android Studio のインストール

JDKのインストールを行ったら、Google公式の統合開発環境であるAndroid Studioをインストールする。

1. Download Android Studio and SDK Tools | Android Developers
   へアクセス

2. 「DOWNLOAD ANDROID STUDIO FOR WINDOWS」をクリックする

3. 「I have read and agree with the above terms and conditions」にチェックを入れて
   「DOWNLOAD ANDROID STUDIO FOR WINDOWS」をクリックする

4. ダウンロードされた「android-studio-bundle-141.2456560-windows.exe」を実行する

5. ウィザード2画面目の「Choose Comonents」にて
   「Select components to install:」を「Android Studio」を除いてチェックを外し
   「Next >」をクリックする

6. ウィザード3画面目の「Android SDK Settings」にて
   「Install the latest Android SDK」をチェックし
   「Next >」をクリックする

7. 後はそのままインストールすると最後にAndroidStudioが起動する。

8. 「Android Studio Setup Wizard」のウィンドウから「Configure」「Settings」をクリック

9. 「Appearance & Behavior > System Settings > Android SDK」を開く
   右下の「Show Package Details」にチェックを入れる

10. 「Android 6.0 Platform」がインストールされていることを確認する

11. 右上の閉じるボタンで終了。

Genymotionのインストール

Androidアプリを実行するにはAndroid端末かPC上で動作するAndroidのエミュレーターが必要となる。
ここではAndroidのエミュレーターであるGenymotionをインストールする。
GenymotionはGoogleのものより動作が軽くパーソナルユースであればフリーミアムバージョンが使える。

1. Genymotionへアクセス

2. 「Get started with Genymotion」の下の方にある
   「If you want Genymotion for personal use only, please download it here」のリンクをクリック

3. 「Get Genymotion (143.44 MB)」のリンクをクリック

4. ダウンロードにはアカウントの作成が必要になるので作成を行う。

5. 「genymotion-2.6.0-vbox.exe」をダウンロードする。

6. ダウンロードされた「genymotion-2.6.0-vbox.exe」を実行しウィザードに従ってGenymotionをインストールする。

7. 「Usage notice」のダイアログが表示されるので「Accept」をクリック

8. 「Add a first virtual device」のダイアログが表示されるので「Yes」をクリック

9. 「Available virtual devices」の中から「Google Nexus S - 4.1.1 - API16 - 480x800」を選択し、「Next」をクリック

10. 「Virtual device name」はそのまま「Next」をクリックするとファイルのダウンロードがはじまる(147MBほどのダウンロード)

11. ダウンロードが完了したら「Finish」をクリック

12. 「Your virtual devices」に「Google Nexus S - 4.1.1 - API16 - 480x800」が追加されているので
    「Your virtual devices」の「Google Nexus S - 4.1.1 - API16 - 480x800」をダブルクリックするとバーチャルデバイスが起動する

Android StudioでのAndroidアプリの作成

Android Studioでアプリを作成してみる。Android Studioではアプリ作成に必要なファイル一式をプロジェクトとして管理するので、アプリ作成にあたってはプロジェクトを作成する。

1. スタートメニューなどから「AndroidStudio」を起動

2. 一度他のプロジェクトを開いた等でプロジェクトが開いており
   「Welcome to Android Studio」のダイアログが表示されていない場合は
   「File」メニューから「Close Project」をクリックしてプロジェクトを閉じると
   「Welcome to Android Studio」のダイアログが表示される

3. 「Welcome to Android Studio」のダイアログで
   「Start a new Android Studio project」をクリック

4. 「Apprication name」(例:DroidJump)「Company Domain」(例:kurima.sakura.ne.jp)を入力
   ※これらを組み合わせた結果が「Package name」として表示される。独自のものとなるようにすること。これが他人と同じだとGoogle Playストアへの登録に失敗する可能性があるので注意。
   ※「Company Domain」に「example.com」を使うとGoogle Playストアへの登録に失敗するので注意。

5. 「Next」をクリック

6. 「Phone and Tablet」にのみチェック
   その下の「Minimum SDK」で「API 15」を選択
   「Next」をクリック

7. 「Empty Activity」を選択

8. 「Next」をクリック

9. デフォルトのまま「Finish」をクリック

10. プロジェクトがつくられる。
    (次回の「AndroidStudio」起動時はこのプロジェクトが開かれた状態で起動する。)

Android StudioでのAndroidアプリの実行

上記の手順でプロジェクトを作成した段階で、既に空のアプリが実行できる状態になっているので実行してみる。

1. プロジェクトが開いた状態で
   右端上方の「Project」タブをクリックするとプロジェクトの階層構造が開く

2. プロジェクトの階層構造の右上にあるコンボボックスを「Android」から「Project Files」に変えるとディレクトリツリーの表示形式となる

3. プロジェクトの階層構造から「app」を選ぶと
   メニューバーの実行ボタン(緑色の横にした三角形のボタン)が押せる状態になる

4. 実行の前にGenymotion等のバーチャルデバイスを起動しておく。あるいはPCにAndroid端末を接続し、USBデバッグを有効にしておく

5. 実行ボタンをクリックする

6. 「Device Chooser」のダイアログが表示される

7. バーチャルデバイスを起動しているとそのバーチャルデバイスが「Choose a running device」の中に表示されているので
   バーチャルデバイスを選択して「OK」をクリック

8. アプリがバーチャルデバイス上で実行される

WebViewを使ったアプリの作成

WebViewコントロールとは、ボタンコントロールなどと同様、Androidアプリの画面部品の1つで、Webサイトを表示する機能を持つ、Webブラウザのような画面部品である。
WebViewコントロールを1つ、画面いっぱいのサイズで貼った、特定のWebサイトを表示するだけの単純なアプリを作成する。ただこれだけのアプリだが表示するサイトの内容次第でどんなアプリにでもなる。
今回はHTML5なゲームをプレイできるサイト(DROID JUMP (ソースコード))を表示させることでゲームアプリに仕立てる。
ちなみにこのゲームの作成にはenchant.jsというJavaScriptゲームライブラリーを使っている。

はじめに「Android StudioでのAndroidアプリの作成」を行う。

レイアウトファイルを編集する。

%PROJECT_ROOT%/app/src/main/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="jp.ne.sakura.kurima.webviewapp.MainActivity">
    <!-- 編集 RelativeLayoutタグ属性の「android:padding」ではじまる4行を削除 -->


    <!-- 編集 ここから -->
    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- 編集 ここまで -->

</RelativeLayout>

Activityのソースファイルを編集する。

%PROJECT_ROOT%/app/src/main/java/jp/ne/sakura/kurima/webviewapp/MainActivity.java

package jp.ne.sakura.kurima.webviewapp;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;

// 追加 次の1行を追加
import android.webkit.WebView;

public class MainActivity extends ActionBarActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 追加 ここから
        WebView webView = (WebView)findViewById(R.id.webView1);
        webView.clearCache(true);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("http://kurima.sakura.ne.jp/droidjump/", null);
        // 追加 ここまで
    }
}

AndroidManifest.xmlを編集する。

%PROJECT_ROOT%/app/src/main/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="jp.ne.sakura.kurima.webviewapp">

    <!-- 追加 次の1行を追加 -->
    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:screenOrientation="landscape">
            <!-- 追加 activityタグ属性として上記「android:screenOrientation」を追加 -->

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

styles.xmlを編集する

%PROJECT_ROOT%/app/src/main/res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat">
        <!-- Customize your theme here. -->
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    </style>

</resources>

Android StudioでのAPKファイルの作成

アプリをGoogle Playストアに登録する場合、アプリを1ファイルにパッケージングしたAPKファイルというファイルを作成し、そのファイルをもって登録することとなる。
ちなみにAndroid端末でAPKファイルを開くとAPKファイルにパッケージングされたアプリをインストールすることができる。

1. Android Studioで APK ファイルを作成する - Android Studioでアプリ開発！の手順にしたがってAPKファイルを作成する

Key Store作成時のCertificateの各値

項目名	内容
First and Last Name	名前と苗字(例: Kurima Yoshida)
Organization Unit	組織単位、部門名(例: Development)
Organization	組織、会社名(例: Kurima)
City or Locality	都市名(例: Kawasaki)
State or Province	県名(例: Kanagawa)
Country Code (XX)	国コード(例: JP)

標準のAPKファイルの出力先
%PROJECT_ROOT%/app/app-release.apk

Googleアカウントの取得

Google Playストアへのアプリ登録にはデベロッパーアカウント取得が必要となり、デベロッパーアカウント取得にはGoogleアカウント取得が必要となる。

1. Google アカウントの作成へアクセスしGoogleアカウントを取得する

デベロッパーアカウントの取得

Google Playストアへのアプリ登録にはデベロッパーアカウント取得が必要となる。登録料がかかるがはじめの一回だけ。更新料などはない。

1. Google play（アンドロイドマーケット） デベロッパーアカウントの取得 方法～Android 開発局～の手順にしたがってデベロッパーアカウントを取得する

Google Playストアへのアプリ登録

Google Playストアへアプリを登録する。

1. Google play（アンドロイドマーケット） アプリケーションのアップロード･公開～Android 開発局～の手順にしたがってGoogle Playストアへアプリを登録する

メモ

• 告知すべきこと

• PC必須(Win or Mac)

• Android端末が無くても大丈夫なこと

• Google Playストアでの公開まで行う場合はデベロッパー登録にあたり＄25.00 クレジットカードで支払う必要あり。なのでクレジットカードが必要。一度払えば以降かからない。

• 準備

• ポケットwifi(レンタル)

• USBメモリ

• 電源タップ

• プロジェクター

• インストール用ファイル一式
  (「jdk-7u79-windows-x64.exe」
  「android-studio-bundle-141.2456560-windows.exe」
  「genymotion-2.6.0-vbox.exe」
  「jdk-7u79-macosx-x64.dmg」
  「android-studio-ide-141.2456560-mac.dmg」
  「genymotion-2.6.0.dmg」)

• ストア登録用画像

• 説明すべきこと

• Webアプリ部分は1ヶ月を目安に停止するので、自身で用意したものに差し替えるか、APKの公開を止めるかしてください。

• WebViewを使ったアプリの作成 までが前半

• アプリ名:「<名前>+Jump」、ドメイン名:「<名前>.yattemita_festa.org」で

• わかりやすさのためにはじめは google(http://www.google.com/) を表示

• 素材差し替えを促す。素材提供サイトを提示する。

• 所要時間目安

項目	所要時間(経験者)(Win)	所要時間(初心者)(Mac)
(USBメモリーからのファイル一式コピー)	?	00:30
JDKのインストール	01:45(DLなしで)	00:45(DLなしで)
Android Studio のインストール	25:00(EXEのDLなしで)	15:00(DMGのDLなしで)
Genymotionのインストール	08:30(登録・EXEのDLなしで)	11:30(DMGのDLなしで)
Android StudioでのAndroidアプリの作成	03:45	06:00
Android StudioでのAndroidアプリの実行	01:00	05:00
WebViewを使ったアプリの作成	10:00	20:00
Android StudioでのAPKファイルの作成	05:30	12:00
Googleアカウントの取得	?	?
デベロッパーアカウントの取得	?	10:00
Google Playストアへのアプリ登録	?	32:00