no-image

アプリ作成、リリースのためのメモ

これからアプリを3つくらいリリースする予定なので、そのたびに毎回同じ手順を踏むので、
monacaでプロジェクトを作成するときと、それをりりーする時のメモ

monacaでプロジェクトを作成する

コレに関しては、僕が使う環境を構築する手順ですので、あまり人のためにならなそうなので、自分が理解できる最低限の情報量で描きます。

monacaCLIでプロジェクトを作成

・react
・react-dom
・onsenui
・react-onsenui
の4つを入れる。
$ npm init
$ npm install onsenui react-onsenui --save-dev
$ npm install react react-dom --save-dev
参考:MonacaでReactを使う

 

Reduxの導入

・redux
・react-redux
の2つを入れる。
$ npm install --save redux
$ npm install --save react-redux

 

redux-formの導入

・redux-form
$ npm isntall --save redux-form

 

デザイン系の導入

・styled-components
$ npm install --save-dev styled-components

・react-materialize
npm install react-materialize --save

その後、src/public/index.html.ejsを編集する。
参考:React Materialize

 

外部サービスの導入

LocalKitの「サービス連携」からncmbをインストールする。
ちなみに「js/cssコンポーネント」からインストールすると上手く使えなかった。

 

ESLintの導入

ココを参考にして導入する。

 

公開の為の手順-iOS-

iOSアプリを公開するための手順です。

AppleDevelopperProgramは登録していることを前提とします。
またこれは2個目以降を作るときのためのメモです。初回でも使えるかもしれないけど。

iOS アプリのビルド
大まかにはこのサイトの流れで進めるのですが、手順が飛び飛びで見にくかったりするので、この記事で補足していきます。基本的にこの記事の流れに沿って進めれば問題無いと思います。

また、以下の手順の中には初回リリースだけで使う行程と、アップデートする時にも使う行程とあるので、それを識別するために、アップデートのときも使う行程には前に「★」を付けたいと思います。

また、以下のmonacaの作業は全てLocalKit上で行います。

 

monacaでの設定

1.「アプリの設定」を編集します。具体的には「パッケージ名」を入力します。
デフォルトでは「com.example.アプリ名」になっているのでこのままで良いです。iosとandroidで別のものをつけると後々面倒くさくなります。
【追記】ここAndroidの登録してる時に気付いたんだけど「com.example」はAdnroidの方には使えないみたい。
2.ビルド/ビルド設定 > iOS > リリース向けビルド > リリースビルド > ビルド設定の管理 > 秘密鍵とCSRの生成
3.ユーザー名、メールアドレスを入力して秘密鍵とCSRの生成をする。ここでダウンロードするファイルの名前は「ios.certSigningRequest」

 

App IDの作成

ここまできてから一度monacaから離れます。
monacaは後でスグ使うので消したりせずそのままの状態にしておいたほうが良いです。
1.ここを参考にする
2.Identifies > App IDs > 右上の'+'
3.Nameにアプリ名、BundleIDに先ほどの「com.example.アプリ名」を入力する
4.App Services を選択する。一応使う可能性があるのは Push Notificationくらいかな。
5.Continue → Register → Done

 

iOS Dev Center上での設定

1.Apple Developer ページにアクセス
2.Certificates > Development > '+'
3.「App Store and Ad Hoc」を選択
4.ここで先程ダウンロードした「ios.certSigningRequest」をアップロードする
5.すると証明書をダウンロードできる。この証明書の名前は「ios_distribution.cer」

 

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

1.上記サイトでProvisioning Profiles > Development > '+'
2.App Storeを選択し、continueする
3.さっきつくったAppIDを選択する → continue
4.さっき作った証明書を選択してcontinue
5.プロファイルの名前はアプリ名にした
6.これでプロビジョニングプロファイルをダウンロードできる。名前は「アプリ名.mobileprovision」

 

monacaで証明書をアップロード

ここでLocalKitに戻ってきます。
1.さっきの設定のウィンドウで「証明書のアップロード」から「ios_distribution.cer」をアップロードする。
2.プロファイルのアップロードから先程の「アプリ名.mobileprovision」をアップロードする
3.以上で長い手続きは終了。戻るとビルドができるようになっている。

今回ダウンロードした3つのファイルは、後々も使う可能性があり、なくなると大分面倒なのでわかりやすい場所に保存しておくようにします。

 

iTunesConnectの設定

ここでまたmonacaから離れて次はitunes connectの設定をします。
1.iTunes Connectにアクセス
2.マイApp
3.左上の「+」から「新規App」
4.フィールドを入力する。最後の「SKU」はデベロッパーアカウントのなかでユニークであれば良いらしいのでバンドルIDと全く同じものにした。

アプリの型番。売上などの内部管理用に使われるものでユーザーには一切表示されない。Numberと言っても数字である必要はなく、UTF-8の英数字でアプリを区別できるようなIDを設定すればよい。デベロッパーのアカウント上でユニークであればよい。

iTunes Connectでアプリを登録する際に気をつけたいこと

 

★monaca上のリリース手続きをする

ここからはリリースの手続きに移る。LocalKit上で
1.ビルド > iOS > リリース向けビルド > リリースビルドからビルドを開始できる。この時にプロビジョニングファイルを選択できるが、複数アプリがある場合はここを間違えないように注意する。
2.ビルド開始
3.ビルドが終わればローカル環境にダウンロードする。名前は「日付-アプリ名.ipa」。

4.Application Loaderを使ってアップロードする。
5.Application Loaderを起動し、「Appをデリバリ」から先程の「日付-アプリ名.ipa」をアップロード。
6.進めていけば終わる。10分ほど経ったあとにitunes connectを見れば反映されている。(メールも届く)

 

スクリーンショットについて

後でこれでエラーでまくってダルいので先に画像を作成しておきます。
1.スクショはmonacaのデバッガーなどで3枚撮影しておく
2.この画像リサイズサイトを使用してさきほどの画像を
幅:1242px
高さ:2208px
でリサイズしておく。
3.ipad用のスクショも1枚必要なのでリサイズしておく。
幅:2048px
高さ:2732px

4.アイコンの画像についてですが、1024*1024の画像が必要です。角は丸くなくて良く、正方形です。

 

アプリの基本情報の設定

以下の行程で一つでも抜けると警告が出る。
アプリの基本情報を設定していく。iTunesConnectで
1.マイApp > アプリ選択 > 提出準備中
2.まずスクリーンショットについてですが、先程のiPhone用のスクショ3枚と、iPad用のスクショを1枚アップロードします。
3.プロモーション用テキスト←書いても書かなくても良い
4.概要。アプリの概要を書く(必須)
5.キーワード、サポートURL、マーケティングURLがあるなら書く。(多分必須)
★6.「ビルド」欄。先程のApplication Loaderの操作が終わっていると「ビルド」の文字の右側に「+」が現れるので、そこからリリースするアプリを選択する。
7.AppStoreアイコンを設定する(1024*1024)
★8.バージョンを設定する
9.アイコンの下にある「年齢制限指定」の編集をクリックして編集する
10.Copyrightを入力する。適当に 2017名前 とかにした。
11.自分の名前などを入力する。電話番号は「+81」から書く必要がある。
12.App Review に関する情報を入力する。連絡先情報の4つのフォームを入力し、「サインインが必要です」のチェックを外す

13.次に「App情報」を編集します。左側のサイドバーのメニューの一つ。
14.カテゴリを選択する。(2つ)

15.「価格および配信状況」を編集します。

★16.保存して「審査に提出」をクリックして少しの質問に答えると見事提出できる。あとは審査の結果を待つだけ。2日くらい。

 

公開の為の手順-Android-

ここまで結構大変でしたが、まだAndroidのアプリ公開の手順があります。iOSよりは楽なのであとひと踏ん張りです。

 

monaca上の設定

1.設定>Android>ビルド/ビルド設定>新しいキーストアを作成
2.「クリアして新規作成」
3.エイリアスはアプリ名にした。パスワードはここで作成なので何でも良いけど覚えておく必要がある。
4.キーストアとエイリアスを作成する
5.リリース向けビルド>ビルドを開始する>ローカルに保存する。コレの名前は「日付-android-release.apk」
6.最後に

 

アプリの登録

1.Google Play Developer Consoleに行って「アプリの作成」
2.必須項目を全部入力する
3.アプリのリリース>リリースを編集>APKをアップロード
4.コンテンツのレーティングから必須項目を入力
5.価格と販売/配布地域から必須項目を入力
6.あとあと面倒なことになるのを避けるためにも今のうちに、キーストアのバックアップをとっておく。
ビルド/ビルド設定>リリース向けビルド>キーストアとエイリアスを管理する>キーストアのインポートとエクスポート>エクスポートで「AndroidKeyStoreBackUp」などのわかりやすい名前を付けて保管しておく。