この記事の役割

iOS版ReactNativeアプリをビルドするために必要なこと全般的に纏めるものとなっております。
また、通知機能とAd-hocリリースのために必要な情報も纏めております。
というwikiを作ろうとしたとっかかりがアドカレだったというオチです。はい。
ここに一応置いといておきます。更新するかもしれません。

愚痴

第一としてRocket.Chatの説明が酷すぎるしAppleのプロセスの複雑さも酷すぎる。開発者に寄り添うプラットフォームを目指すのなら一番に治すべきところだろう。そもそもとしてこのマルチプラットフォーム時代に特定の端末のためのビルドに特定の端末が必要とか頭わるわるだしもう少し現実見たらどうなん？林檎さん？

前提条件

次の処理は既に済ませておくものとする。
- Apple開発者アカウントを登録する
- Apple住民税を支払う(Apple開発者アカウント / 年1万円)
- Apple固定資産税を支払う(macOSのなにか。MacBookでも現実的に8万以上するよね)
- Gitは登録済みで一通り使える
- これは既にやっているものと仮定する(一部重複あり)

また、これらを一度もセットアップ試行していないことを前提としておく。(ゴミが残っていると間違いなく途中で証明書とかでエラーを吐くこととなる)

そもそも動かすために

ここからは基本的には公式のios-app-white-labellingに従う。
(どうせこのリンクも数カ月後には死ぬんだろ？そういう奴らだよ)

ソースの用意

Open RocketChatRN.xcworkspace on Xcode (11.7 or newer)

というわけで、まずはXcodeのインストールから。

なお、このページでのスクショは公式からのコピーなのでXcode12以下であると推測されるが、現在のXcode最新である13系統ではUIデザインがかなり変更されており拡張子がデフォルトでは非表示となっている。画像を用意するのが大変なのでここでは12系統で書くが、もし公式が更新する気になったらその時は差し替え予定である。

macのApp Storeからダウンロード。
そして次はgitリポジトリのクローン。
shell
git clone https://github.com/RocketChat/Rocket.Chat.ReactNative


そして忘れがちなのが、ブランチを[single-server]にしておくこと。これ、絶対。

クローンした中身にiOSってフォルダがあるので、その中身のRocketChatRN.xcworkspaceをダブルクリックなりして開く。

まずApple的に別アプリ化する

Identityを書き換える

On General tab, select “RocketChatRN” and change Display Name, Bundle Identifier, Version and Build
Note: as explained on Important section, we have two targets and we're going to cover the default one on this doc, which is the Experimental app.

左のファイル一覧の一番上、“RocketChatRN”を選択し、Generalのタブを開く。
タブの中の左にPROJECTとTARGETSがあるが、それぞれは次のような役割をもっている。

• RocketChatRN → Experiment版（GooglePlayやAppStoreでも見られる青色アイコンの方）
• ShareRocketChatRN → 共有画面の機能を司っているっぽい？(未確認)
• NotificationService → プッシュ通知のコアサービス？
• Rocket.Chat → リリース版（GooglePlayやAppStoreでは赤色アイコンの方）

そして、それぞれのTargetsをクリックして表示されるIdentity欄、
- Display Name　(アプリ名)
- Bundle Identifier　(アプリID)
- Version　(バージョン番号)
- Build　(ビルド番号/毎回変える)

を自分のものに書き換える。

この「自分のもの」というのは、ほげほげあぷりとhogehoge.app.harukinとかなんでもいい。ただ、IDは既存のものと競合してはならないとされているので、ドメインのリバースなどがいいとされている。
下にはRocket.Chatの他にRocket.chat ExperimentalやらRocket.chat Notification Service, Rocket.Chat Share Serviceなどあるが、全部同じ名前をベースにやるとよい。

Display Name and Bundle Identifier are different from the previous target
Version and Build must be the same on all targets

と書いてあるように、Display NameとBundle Identifierは完全ユニークにし、VersionとBuildは必ず同じ値にしなければならない。

「hogeApps」「hoge.haruk.in」を基準に構築する例

Q: RocketChatRNは弄る必要なくない？
Q: 名前関係あるのかな？
A: ないと思うけど責任取りたくないので私はこうやったら成功しましたとだけ言っておきます。

以下、次のデータをこのアプリ固有のキーとして定義する。このコードはそれぞれの環境で変えるものなので適宜読み替えてもらえればと。
hoge.haruk.in Stableビルド
hoge.haruk.in.experimental Experimentalビルド
hoge.haruk.in.ShareExtension ShareExtension
hoge.haruk.in.NotificationService NotificationService
group.hoge.haruk.in AppGroup
hoge.haruk.in keychainGroup

アプリをビルドするための証明書設定

On Signing and Capabilities, check “Automatically manage signing”, select your app group and add a keychain group

Signing and Capabilitiesのタブを開き、
- Signing欄を見ると”Automatically manage signing”というチェックボタンがあるので、そこをチェックしてやると確認されるので"Enable Automatic"。
Teamが赤いかもしれないので、自分を選んで黒くなればOK。
- App Groups欄から一度全てのApp Groupsのチェックを外した上で、左下+ボタンを押し group.hoge.haruk.inを入力。
- Keychain Sharing欄から一度全てのKeychain Groupsを-を押して消去した後、hoge.haruk.inを入力。

それを全てのTARGETSに行う(以下略)

設定したデータをplistにもセット

RocketChatRNの中に上でそれぞれ設定した名前のフォルダがあるので、その中のInfo.plistを開く。

RocketChatRN/RocketChatRN /Info.plist
/ShareRocketChatRN /Info.plist
/NotificationService /Info.plist


Set the same app group on RocketChatRN/Info.plist, ShareRocketChatRN/Info.plist and NotificationService/Info.plist

それぞれの中身の"AppGroup"にgroup.hoge.haruk.inを入力

Set the same keychain group on RocketChatRN/Info.plist, ShareRocketChatRN/Info.plist and NotificationService/Info.plist

それぞれの中身の"KeyChainGroup"に元のPrefix変数を残したままhoge.haruk.inを入力
（要するに$(AppIdentifierPrefix)hoge.haruk.inになればいいというわけ。入力時にも選択範囲が絞られているはず。）

Set your Bugsnag API key on RocketChatRN/Info.plist

Bugsnag APIキーを登録する必要がある。

https://www.bugsnag.com/
Bugsnagはエラー情報収集なので必須ではないと思いたいのだが、私の環境では登録しないとダメだった。
かなり有料臭い表記をしているが、GET STARTEDからアカウントを作ってFREE TRIALとして運用すればOK。
アカウントを作成したら、右上のNEW PROJECTからMobile→ReactNative→ReactNative→名前入力→でアプリを登録できる。
アプリができたら、右上の設定アイコンからProject Settings→Notifier API keyでAPIキーを取得できるのでこの値を登録しておこう。

設定したデータをentitlementsにもセット

今度はそれぞれのフォルダ名のファイルがあるのでそれを開く。

RocketChatRN/RocketChatRN /RocketChatRN.entitlements
/ShareRocketChatRN /ShareRocketChatRN.entitlements
/NotificationService /NotificationService.entitlements


It needs to be the same on all entitlements

それぞれ同じようにhoge.haruk.inを入力
（この時は何故か配列のitem0に格納されているので左の三角をクリックして出そう。ついでにAppGroupsも正常か確認しておこう。）

アイコンを設定しよう

Change the app icon on Experimental.xcassets/App Icon

RocketChatRN/RocketChatRN/Official.xcassets

ここにアクセスすると左のメニューからAppIcon / Launch Screen Icon / splashBackgroundColorとあるので、それぞれを好きに弄ってもらいたい。因みに、OfficialはStableビルド、ExperimentalはExperimentalビルド、Imagesはアプリ内の一部描写(具体的には、空のチャットルームに表示されるアイコンやオーディオコンテンツを表示する時のサムネイル)なのでOfficial以外はあまり気にしなくてもよい。

Firebase関連の設定

ぶっちゃけこれ意味あるのかはよくわからなかった.................

Firebase登録した？

Visit the p
roject overview on https://console.firebase.google.com
Click on the gear icon and then “Project settings”
On “General” tab, click on “iOS” button under “Your apps” section
Enter your bundle ID and then “Register app”

とりあえずFirebaseに行ってみよう。もしAndroidもビルドしていないようであれば新規でプロジェクトを作成しなければならない。

iOSアプリを登録

そして、左上のプロジェクトの設定を開き

全般のタブが開かれているはずなので、そのまま下に行くと↑のようなマイアプリという画面がある。
ここでiOSのアイコンを押すと、

新規追加画面になるのでappleバンドルIDにhoge.haruk.inと入力。これはStableビルドのIDになる。

そして"アプリを登録"を押すと、設定ファイルをダウンロードできる。

Xcodeへコピペ

ダウンロードされたGoogleService-Info.plistを

RocketChatRN/RocketChatRN

の中にドラッグドロップ。そうすると、

こんな画面が出るのでCopy items if neededにチェックマーク、Create folder referencesにチェック、全部のtargetsにチェックが入っているのを確認しFinish。

ビルド、動作の開始

公式に書いてない落とし穴

Execute the following on project terminal
- yarn
- npx pod-install
- yarn ios

公式にはこのように書いてあるが、これをそのまま実行しても動かない。嘘ではないのかもしれないが、かなりのトラップを越えた上でのコマンドだ。

• yarn動かすためにnodeを入れる
• nodeを入れるためにhomebrewを入れる
• npxも入れる必要ある

globalにこれらを入れることはまぁ、ある程度は把握していたのだが、npx pod-installをしてもどうやっても入らない。
原因は「pod-installに必要なXcodeが入ってない」こと
実はXcodeは入れただけではコマンド関連全く関係無しに動作する。

Xcode Command Line Tools の有効化

1. Xcodeを開いて
2. 左上の「Xcode」から「Preferences...」
3. 出てきた画面で「Locations」を選択
4. 下のCommand Line ToolsでXcodeを選択

これでXcodeのコマンド機能が使えるようになるので、改めてnpx pod-install。

ビルドスキームの選択

yarn iosの方は、明確にわかるエラーが出ないかもしれない。だが、ビルドは失敗し起動もしなかった。
これにはiOSビルド時固有のビルドスキームを弄る必要があるようだ。
1. Xcodeを開いて
2. 上の「Product」→「Scheme」→「Edit Scheme...」
3. 左のRunを開きExecutableがRocket.Chat.appであることを確認した上でBuild ConfigurationがDebugになっていればReleaseに変更
4. Archiveでも同じようにReleaseに

謎に壊れるmain.jsbundle

ここまでやっても動かない時もある。何故か、時々main.jsbundleというファイルが壊れているのだ。原因はまったくわからないのだが、とりあえずXcodeの画面上で赤くなっているのですぐわかるのはわかる。
とりあえずターミナルでReactNativeプロジェクトのトップ階層に行き、次のコマンドを使うことでmain.jsbundleが復活することは認識した。
shell
npx react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --assets-dest='ios'

ただ、これに関してはいまいち情報が足りていないのでこれでもダメかもしれない。

これらを乗り越え、ついにアプリは動くのである。

私の動作

コマンドにはyarn iosを実行しろと書いてはいるが、私はXcodeに実機を繋いで直接Xcodeからrunをした。それで大丈夫なようだし私も考えるのめんどくさいしGUIの方が間違えないかもだし。

通知を動かすために

概略

Rocket.ChatアプリはReactNativeなので、基本的には通知の機能はネイティブの実装に即して行うことになる。
Androidの場合はFCMプッシュ通知を利用。
iOSの場合はAPNを利用することとなる。
ややこしいのは、FCMにもAPN通知機能が含まれておりバイパスする機能があることなのだが、何故か使わないらしい。
わからん。全然わからん。とりあえずiOSの場合にはFirebaseはまず無関係であるだろうと考えられる。

1. ”AppIdentifier”を作成

Visit https://developer.apple.com/account/resources/identifiers/list
Click to add Identifier
Select App IDs and Continue

と書いてあるが、よくよくサイトを見るとXCという頭がついた名前のIdentifiersが既にあるんではないかと思う。
この状況で作成をすることはできない。
ここでは「スキップ」が正解だ。
因みに、以下に本家の情報を参考程度に保存しておくが、XCの設定をチェックしてもらえればそれぞれの設定が反映されているっぽいということはわかると思う。

Add description and Bundle ID

On Capabilities, select App Groups and Push notifications
Click “Continue” and then “Register”

AppIDを選んで右上のContinue、次の画面でもDescriptionはなんでもいいけどBundle IDはExplicitであることを確認した上でhoge.haruk.inを追加する。でその下のCapabilitiesは「App Groups」と「Push Notifications」にチェックマークを入れてOK。
{.is-info}

Creating an App Identifier for our Share Extension
Share Extension is a version of the app that opens when you share data from another app to Rocket.Chat. For example, share a photo from the gallery.
Visit https://developer.apple.com/account/resources/identifiers/list
Click to add Identifier
Select App IDs and Continue

Add description and Bundle ID

This time, select only App Groups under Capabilities
Click “Continue” and then “Register”

同じ要領で登録するのだが、Bundle IDがhoge.haruk.in.ShareExtensionでその下のCapabilitiesは「App Groups」のみ
{.is-info}

notificationもApp Groupsのみ。pushも要るのかと思うが、実は不要だ。
{.is-info}

2. "App Group"を作成

Visit https://developer.apple.com/account/resources/identifiers/list
Click to add Identifier
Select App Groups and Continue

と書いてはいるが、これも既にあるかもしれない。確認した上であるならスキップだ。
Identifiersの右上にある「App IDs↓」っていうところを押すと、App Groupsがリストアップされるので一通り確認しておこう。

+を押して出てくるいつもの画面で今度はApp Groupsを選択。

Identifierにグループ名group.hoge.haruk.inを追加して終了
{.is-info}

3. "App Group"の適用

Visit https://developer.apple.com/account/resources/identifiers/list
Click on the first identifier you created
On “App Groups”, click “Configure”
Select the App Group you created and click “Continue”
Click “Save”
Repeat these steps for the second identifier you created for the Share Extension and NotificationService
Visit https://developer.apple.com/account/resources/identifiers/list​
Click on the first identifier you created
On “App Groups”, click “Configure”
Select the App Group you created and click “Continue”
Click “Save”
Repeat these steps for the second identifier you created for the Share Extension and NotificationService

1で作ったそれぞれのAppID(hoge.haruk.in hoge.haruk.in.ShareExtension hoge.haruk.in.NotificationService)を開き、App GroupsのとなりのEditを開いて2で作ったApp Groupを選択してcontinueをする。
{.is-info}

4. "Push Notifications certificates" を作成

ここからは必ずやるはず。

第一の落とし穴

Visit https://developer.apple.com/account/resources/identifiers/list
Click on the first identifier you created
On “Push Notifications”, click “Configure”

この画面では、プッシュ通知のための証明書を作成する作業なのだが、これをするためにまず「認証局への証明書要求」を作る必要がある。もうこれから書いてない。
1. Launchpad→キーチェーンアクセスを起動
2. 左上の「キーチェーンアクセス」から「証明書アシスタント」→「認証局に証明書を要求」
3. メールアドレスを二箇所に記入し、チェックボックスを「ディスクに保存」にして続ける
4. ファイル保存画面が出るので任意の場所に保存する(.certSigningRequest)
以降この証明書要求を「要求ファイル1」と表現する。
これをもって、さぁ証明書登録だ。

certificatesを作成(俺のやりかた)

1. Certificates Listを開き、左上の+を押す
2. Apple Push Notification service SSL (Sandbox & Production)を選択し、Continue
3. App IDを選択するように言われるので、作っているロケチャのID(hoge.haruk.in)を探して選択
4. Signing Requestを要求されるので要求ファイル1をアップロード
5. ファイルをダウンロードして完了。これがProduction/Develop両方に使えるAPNの通知証明書となる。

certificatesを作成(ほんけのやりかた)

1. Identifier Listを開き、hoge.haruk.inを開き、下の方にある前設定したPush Notificationsの右にあるConfigureを開く。

2. Development SSLの方のCreate Certificateをまず開く

   Development SSL Certificate
   On “Development SSL Certificate”, click “Create Certificate”
   Follow Apple’s tutorial to generate a Certificate Signing Request: https://help.apple.com/developer-account/#/devbfa00fef7
   Select the certificate you created an click “Continue”

3. Create New Certificateと表示されるので、プラットフォームがiOSであることを確認した上で下のアップローダに要求ファイル1をアップロードする
   

4. ファイルをダウンロードして完了。これがDevelopのみのAPN証明書となる。

5. 同じことをProductionにもしてやる。

以降ここで生えたProduction証明書を「本番通知証明書」と表現する。
以降ここで生えたDevelop証明書を「開発通知証明書」と表現する。

証明書を端末にインポートし、証明書をエクスポート

1. ダウンロードしたそれぞれの証明書をダブルクリックすると、キーチェーンアクセスが開きインポートされる。 > After installing it, “Keychain Access” should have opened automatically on your Mac Export the certificate to generate a .p12 file

2. 追加された証明書は、
本番通知証明書が "Apple Push Services: hoge.haruk.in"
開発通知証明書が"Apple Development IOS Push Services: hoge.haruk.in"
という名前になってキーチェーンに保存されている。
これの左の▼を開いて、中に開発者(自分)の名前があると思うのでそれを右クリックしてExport(書き出す)を選ぶ。

3. 出てくる画面ではフォーマットを.p12にして保存。
4. もう一回押してフォーマットを.cerにして保存。

以降ここで生えた.p12の証明書を「本番p12通知証明書」「開発p12通知証明書」と表現する。
以降ここで生えた.cerの証明書を「本番cer通知証明書」「開発cer通知証明書」と表現する。

証明書を証明書に変換して証明書を証明書に変換する

In your terminal, go to the folder which contains your push files (CSR, .cer, .p12).
Generating PEM files (Development)
Execute
openssl x509 -in aps_development.cer -inform der -out DevPushCert.pem
openssl pkcs12 -nocerts -out DevPushKey.pem -in yourP12File.p12
You must set a password for your PEM file
Generating PEM files (Production)
Execute
openssl x509 -in aps.cer -inform der -out PushCert.pem
openssl pkcs12 -nocerts -out PushKey.pem -in yourP12File.p12
You must set a password for your PEM file

1. 上で作成された4つの証明書は同じディレクトリに保存しておくことをオススメするが、そのうえでターミナルを起動しファイルが保存されているディレクトリに移動する
2. 次のコマンドを叩いてcerをpemに変換する (**cer→pem通知証明書は出力ファイル名になるので.pemで書き出し) shell openssl x509 -in 本番cer通知証明書 -inform der -out 本番cer→pem通知証明書 shell openssl x509 -in 開発cer通知証明書 -inform der -out 開発cer→pem通知証明書
3. 次のコマンドを叩いてp12をpemに変換する (**p12→pem通知証明書も出力ファイル名になるので.pemで書き出し) shell openssl pkcs12 -nocerts -out 本番p12→pem通知証明書 -in 本番p12通知証明書 shell openssl pkcs12 -nocerts -out 開発p12→pem通知証明書 -in 開発p12通知証明書

それぞれのpemファイルには同じパスワードが必須である。

ロケチャにpemファイルをコピペして完了(←はぁ？

気が狂ってる

Copying PEM files to Rocket.Chat
Copy the contents of your development PEM files and password into APN Dev Key, APN Dev Cert and APN Dev Passphrase
Copy the contents of your production PEM files and password into APN Key, APN Cert and APN Passphrase
You can use cat on terminal to get the content of your PEM files
cat PushKey.pem
Save and restart your server
Log into the server as the same user on your mobile device and close it (it won’t receive push notification, if it’s open)
Open Push settings on admin from desktop and click “Send a test push to my user”

管理ページに鍵を置く場所があるらしいのだが、見てみるとこれである↓

ふむ、なるほど。まずここに入力するテキストを表示する方法は、
shell
cat 何か.pem

これで出てくる文字列をそのままコピペすればいいらしい。
先程の作成した段階のterminalでそのまま確認をしよう。
1. APNパスフレーズ： 本番cer→pem通知証明書の時に設定したパスワード
2. APNキー : 本番cer→pem通知証明書
3. APN証明書 : 本番p12→pem通知証明書

1. APN開発者パスフレーズ： 開発cer→pem通知証明書の時に設定したパスワード
2. APN開発者キー : 開発cer→pem通知証明書
3. APN開発者証明書 : 開発p12→pem通知証明書

以上、これで全ての設定が完了したらしい。多分、これを一度読んだだけでも理解はできないと思うが。
Rocket.Chatを再起動すると一応起動するようだが、これの動作テストはキー設定画面の上にテストボタンがあるのでそれを押すことで実行は可能だ。