アイフラッグラボ
iFLAG Labs is a technical information site which iFLAG offers.
iFLAG Labs provides you with the opportunity to experience and evaluate new and emerging innovations, technologies, and service from iFLAG.

トップページ»  超簡単スマートフォンアプリ開発手順

超簡単スマートフォンアプリ開発手順

 

はじめに


スマートフォンアプリは通常JavaやObjective-Cと言った開発言語を使って開発しますが、PhoneGapフレームワークを使えばホームページを制作する知識だけで簡単にスマートフォンアプリを開発することが可能です。

しかし、アプリをGoogle PlayやApp Storeに登録するのは意外に面倒で複雑な手続きが必要なんです。また、開発環境もEclipseやXCodeと言った開発用フレームワークをインストールして使いこなす必要があったりして大変です。

そこで、開発用フレームワークなど一切使わずに、Windows環境のみで、アプリ開発からアプリをGoogle PlayやApp Storeに登録するところまでに挑戦してみたいと思います。そんなことできるのかな?(笑)

■アプリ作成手順

<ユーザー登録>
0.Goole Play デベロッパー登録(初回のみ)→管理アカウント(1つのみ)で招待する
1.iOS Dev Center にユーザー登録(初回のみ)→既にアカウントがある人が追加する人を招待する
2.Adobe PhoneGap Build にユーザー登録(初回のみ)→自分で登録する

<アプリ作成~ビルド>
3.iOS App IDs の登録
4.iOS Provisioning Profiles (Distribution) のダウンロード
5.Adobe PhoneGap Build でビルド
6.iOS検証用の実機iphoneの登録

<App Store 登録>
7.iTunes Connect にアプリ情報の登録
8.Application Loaderでアップロード(Mac環境が必要)

< Google Play 登録>
9.Google Play アプリアップロード

<付録>
・Android署名(iflag.keystore)の作成
・iOS配布証明書(iphone_dev.p12)の作成

以上


2013-06-19


iOS App IDs の登録


まずはiOS Dev Centerにアクセスして開発するアプリを登録します。iOS App IDs の登録になります。

手順は以下になります。

・iOS Dev Centerにアクセスし、Sign inをクリックする
・Apple IDとPasswordを入力し、Sign inをクリックする
・Certificates, Identifiers & Profilesをクリックする
・Identifiersをクリックする
・+をクリックする
・Name(アプリ名)と、Bundle ID(com.アプリ名.アプリ名)を入力して、Continueをクリックする
・Submitをクリックする
・Doneをクリックする
・iOS App IDsの登録に成功した

次は、iOS Provisioning Profiles (Distribution) のダウンロードです。

アイフラッグ担当:KN

2013-06-20


iOS Provisioning Profiles (Distribution) のダウンロード


次に、先ほど登録したApp IDのProvisioning Profileをダウンロードします。このファイルを使って次のビルド作業を行うのです。

手順は以下になります。

・iOS Dev Centerにアクセスし、Sign inをクリックする
 https://docs.google.com/a/sbr-inc.co.jp/file/d/0B2Y0iID1-FJ8cUUyaGtmWFBfa2c/edit
・Apple IDとPasswordを入力し、Sign inをクリックする
・Certificates, Identifiers & Profilesをクリックする
・Provisioning Profilesをクリックする
・+をクリックする
・App Storeにチェックし、Continueをクリックする
・App IDを先ほど登録したものを選択して、Continueをクリックする
・IFLAG CO., LTDにチェックして、Continueをクリックする
・Profile Nameにアプリ名を入力し、Continueをクリックする
・Downloadをクリックする
・プロビジョニングファイルのダウンロードに成功した

さあ、次はいよいよビルドです。

アイフラッグ担当:KN

2013-06-21


iOSアプリとAndroidアプリのビルド


今回はAdobe Phonegap Buildというクラウドサービスを使って、iOSとAndroidアプリのビルド作業を行う方法を説明します。FREEのIDを登録してプライベートアプリを1つビルドすることが可能です。2つ以上ビルドしたい場合も以下の方法で可能ですので参考にしてください。

手順は以下になります。

・以下のURLにアクセス、Sign inをクリックする
 https://build.phonegap.com/
・AdobeIDとPasswordを入力し、Sign inをクリックする
・privateタブのUpload a .zip fileをクリックする
・ROOKのスマホアプリ作成機能で作成したZIPファイルを選択し、開くをクリックする
・Ready to buildをクリックする
・アイコンやアプリ名称付近をクリックする

iOSのアプリをビルドします。

・iOS No key selectedをクリックし、add a key…に変更する
・titleにアプリ名を入力し、certificate(p12)fileの「ファイルを選択」をクリックする
・provisioning profileの「ファイルを選択」をクリックする
・submit keyをクリックする
・iOSのRebuildをクリックする
・青色に変わってビルドが成功し、iOSの実行ファイルipaをクリックしてダウンロードする
・二次元バーコードを使って実機にインストールが可能となる(iphoneの場合はiOS Dev Centerにデバイスの登録が必要)

Androidのアプリをビルドします。

・Androidに署名を設定するためNo key selectredをクリックしAdd keyにし、titleにiflag、Aliasにiflagdevを入力し、Keystore fileのファイルを選択をクリックする
・最初にダウンロードしたiflag.keystoreを選択して、submit keyをクリックする
・南京錠マークをクリックして、certificate passwordにandroid、keystore passwordにandroidを入力し、submit keyをクリックする
・AndroidのRebuildをクリックする
・青色に変わってビルドが成功し、Androidの実行ファイルapkをクリックしてダウンロードする

2つ以上ビルドする場合

・無償版はプライベートアプリを1件しか登録できないため、次のアプリをビルドするには登録したデータを削除する必要がある。Settingsをクリックする
・ページ最下部のDanger ZoneにあるDelete this appをクリックし、その後OKボタンをクリックする
・リロードするとアプリが削除されているのが確認でき、次のアプリがビルド可能となる

手順は以上となります。

次回は、ここで出てきた、iOSのcertificate(p12)file、AndroidのKeystore file、そして、iOS Dev Centerに検証用の実機デバイスの登録方法を説明します。

アイフラッグ担当:KN

2013-06-24