読者です 読者をやめる 読者になる 読者になる

アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

アプリカンでアプリをビルドしよう(iOS編)

アプリカンは通常のアプリのようにローカルではなく、クラウド上でビルドを行います。これには大きな利点があります。

利点1) ローカルに証明書がなくてもビルドできる

管理画面にて証明書などを登録しますので、一度登録してしまえば後はどこからでもビルドができます。

利点2) WindowsからでもiOSアプリのビルドができる

コンパイルはクラウドで行いますので、iOSアプリであってもWindowsからビルドが可能です。証明書の登録やアプリの申請においてはMac OSXが必要ですが、実際の開発時においてはWindows機が利用できます。

それではアプリカンでのiOSアプリビルドについて順を追って説明します。なお前提条件として、iOS Developer登録済みであることとします。

1. iOS Dev Centerでの設定

最初にiOS Dev Centerでの設定を行います。ここでは主に3つのファイルが作成されます。

証明書要求(CSR)ファイル

現在、iOS Dev Centerでは開発者用の証明書は一つしか作れないようになっていますので、キーチェーンアクセスで作成しましょう(プロダクションは複数作成できます)。

キーチェーンアクセスを立ち上げて、 キーチェーンアクセス証明書アシスタント認証局に証明書を要求 を選択します。

f:id:moongift:20141127172201p:plain

出てきた証明書アシスタントを順番に進めていきます。ユーザのメールアドレス、通称(名前)をiOS Developerとして登録されているものを入力します。要求の処理はディスクに保存とし、鍵ペア情報を指定にチェックを入れます。

f:id:moongift:20141127172216p:plain

そして適当な保存先を選びます。

f:id:moongift:20141127172227p:plain

鍵のサイズは2048ビット、アルゴリズムはRSAとします(おそらくデフォルトまま)。

f:id:moongift:20141127172239p:plain

そして少し待つと保存が完了します。これが証明書要求(CSR)ファイルです。

f:id:moongift:20141127172251p:plain

証明書

証明書要求ファイルが作成されたら、それを使って証明書を作成します。iOS Dev Centerの Certificates, Identifiers & Profiles にアクセスします。

f:id:moongift:20141127172304p:plain

さらに Certificates をクリックします。

f:id:moongift:20141127172320p:plain

Certificatesの+ボタンをクリックして、証明書を作成します。

f:id:moongift:20141127172341p:plain

途中、先ほど作成した証明書要求ファイルが求められますので、アップロードしてください。

f:id:moongift:20141127172355p:plain

登録が終わると証明書がダウンロードできます。cerという拡張子のファイルでダウンロードされますので、ダブルクリックしてキーチェーンに登録してください。

p12ファイルの作成

証明書がキーチェーンに登録されたら、それを右クリックして書き出すを選択します。

f:id:moongift:20141127172413p:plain

次に保存先を指定します。

f:id:moongift:20141127172425p:plain

書き出す際に適当なパスワードを入力してください。これは後ほど使いますので忘れないようにしてください。

f:id:moongift:20141127172437p:plain

最後に自分のMac OSXのパスワードを入力します。

f:id:moongift:20141127172450p:plain

プロビジョニングプロファイルの作成

再度iOS Dev Centerにアクセスして、Identifiersタブを開きます。そして+ボタンを押して、Bundle IDを設定します。例えば jp.co.newphoria.HelloWorld といった具合です。この設定は後ほど使いますので覚えておいてください。

f:id:moongift:20141127172505p:plain

その後、Provisioning Profilesのタブを開いて先ほど設定したApp IDを指定してプロビジョニングプロファイルを作成、ダウンロードしてください。こちらもダウンロード後、ファイルを開いてキーチェーンに登録しておきます。

2. iOSアプリ設定

次にビルド設定としてiOSアプリ設定を行う必要があります。ビルド設定ページを開いて、iOSアプリ設定の設定ボタンをクリックします。

f:id:moongift:20141127172530p:plain

開いたページのiOSアプリ設定を行います。

  • プロダクト名
  • Bundle identifier
  • Bundle versions string, short

を設定します。注意点として、 Bundle identifier は先ほど iOS Dev Centerでプロビジョニングプロファイルを作成する際に用いた文字列を使います。

f:id:moongift:20141127172545p:plain

また、コンテンツ更新(新しいコンテンツがあればダウンロードする機能)を使う場合はコンテンツ更新ありにチェックを入れてください。

入力が終わったら保存しましょう。

3. iOSビルド設定

iOSビルド設定のタブに切り替えて、設定を行います。まず、STEP1の秘密キーと証明書要求ファイルの設定です。

ここは先ほど作成したp12ファイルを使います。 ※p12ファイルからのインポートはこちらから行ってください をクリックします。

f:id:moongift:20141127172603p:plain

そうするとp12ファイルをアップロードするフォームが出ますので、先ほど作成したp12ファイルの指定と、作成時に設定したパスワードを入力します。

f:id:moongift:20141127172620p:plain

無事保存されれば問題ありません。

f:id:moongift:20141127172632p:plain

次にSTEP3に進みます。証明書は先ほどiOS Dev Centerでダウンロードした *.cer を使います。アップロードがうまくいくと、次のように証明書の情報が表示されます。

f:id:moongift:20141127172644p:plain

最後にプロビジョニングプロファイルを登録します。STEP6にて先ほどダウンロードした *.mobileprovision ファイルを指定します。今回はDevelopmentを選んだ状態で保存ボタンを押します。こちらも問題なく保存されるとプロビジョニングプロファイルの内容が表示されます。

f:id:moongift:20141127172659p:plain

これでiOSビルド設定が完了です。ここまで行うとビルド設定を見た時にiOSアプリ設定とiOSビルド設定が設定済みになっているのが確認できるはずです。

f:id:moongift:20141127172710p:plain

4. コンテンツの公開

アプリをビルドする際にはまず作成したコンテンツを公開する必要があります(既にweb.zipをアップロード済みとします)。コンテンツの公開をクリックして、その中にあるコンテンツの公開ボタンをクリックします。

f:id:moongift:20141127172721p:plain

f:id:moongift:20141127172737p:plain

そうするとメモとしての入力がありますので、必要であれば入力して公開ボタンをクリックします。

f:id:moongift:20141127172749p:plain

無事公開されるとその旨表示されます。

f:id:moongift:20141127172802p:plain

一覧に戻ると、ステータスが公開済みになっているのが確認できるはずです。

f:id:moongift:20141127172823p:plain

5. iOSアプリのビルド

それではiOSアプリをビルドします。ビルドメニューをクリックします。

f:id:moongift:20141127172836p:plain

今回は iOS Universalビルドボタンが有効になっています。ここでボタンが押せない状態になっているという場合は、上記手順のいずれかが行われていない可能性がありますので確認してください。ボタンを押すとビルドが開始します。

f:id:moongift:20141127172852p:plain

無事ビルドが終わるとビルド履歴に完了が表示され、ダウンロードボタンが押せるようになります。

f:id:moongift:20141127172907p:plain

今回はここでダウンロードはせず、上の方に出ているQRコードからアプリインストールを行います。iOSデバイスにてQRコードリーダーアプリを立ち上げ、QRコードを読み取ります(ない場合は https://user.applican.com/Login/ にアクセスしてください)。

f:id:moongift:20141127172921p:plain

iOSで開く

iOSで上記QRコードを読み取るとアプリカンのログインが表示されます。

f:id:moongift:20141127172942p:plain

ログインするとプロジェクト一覧が表示されます。ここに先ほどビルドしたアプリが出ているはずです。

f:id:moongift:20141127172959p:plain

インストールする種別をタップすると、ビルド履歴が表示されますのでインストールボタンをタップします。

f:id:moongift:20141127173014p:plain

確認のダイアログが出ますのでインストールボタンをタップします。

f:id:moongift:20141127173027p:plain

そうするとアプリのインストールがはじまります。

f:id:moongift:20141127173043p:plain

インストールが終わるとアプリカンのアプリが使えるようになります。

f:id:moongift:20141127173055p:plain


ここまでがアプリカンのiOSビルドに関する一連の流れになります。一度ビルド設定を行ってしまえば次回以降はコンテンツを公開してビルドするだけですし、コンテンツ更新に対応させれば公開して立ち上げるだけで更新を確認してアプリの内容を差し替えてくれるようになります。アプリのビルドすら不要になります。

ローカルのビルド方法とは異なりますので最初は戸惑うことがあるかも知れません。この手順を参考に設定してください。

アプリカン | アプリ開発支援プラットフォーム