📸

【Monaca/iOS】<input type="file" accept="image/*">でカメラがクラッシュする原因

2021/10/08に公開

問題:input type="file" accept="image/*"で画像を取得するとき、カメラを起動しようとするとクラッシュする

状況:monacaでマークアップ言語とJavaScriptで開発 Cordovaバージョン10.0.0

結論:クラッシュするのは、monacaのカメラプラグインを有効にしていなかったから。


Monacaでハイブリッドアプリを作ったのですが、App Store Connectに申請したところ

Apple『カメラを起動した時にクラッシュするぞ』

とリジェクトされてしまいました。該当箇所は

<input type="file" accept="image/*">

PCだとFinder、モバイルだとこの画面が出て3つのオプションから選べるという仕様になっています。

フォトライブラリから画像を選ぶという使い方を想定していたので実機確認でも「写真を撮る」についてはスルーしてしまっていました(アホ)

Appleに指摘されたのは、「写真を撮る」をタップするとクラッシュする、ということについて。

確かに、「写真をとる」を押した瞬間クラッシュします。「フォトライブラリ」と「ブラウズ」はちゃんと動くので、カメラを呼び出すプロセスに何か問題があると推測できます。

1. カメラ操作プラグインを有効にし忘れている

クラッシュの原因は 「カメラ操作のプラグインを有効にしていなかったから」 でした。そりゃクラッシュしますね。monacaの「設定」=>「Cordovaプラグインの管理」=>「camera」を有効にすることで、カメラを使えるようになります。

2. カメラ操作プラグインを使う際に気をつけること

カメラプラグインをオンにしただけでは、別の問題で審査に通らなくなります。

Guideline 4.0 - DesignとGuideline 5.1.1 - Legal - Privacy - Data Collection and Storageに引っかかるためです。

どういうことかというと、カメラプラグインをONにしただけの状態だと、

こんな風に、モーダルの表示が「need camera access to take pictures」と、デフォルトの文章になっています。このモーダルの文章はユーザーがアクセスの許可を判断するにあたって非常に大切な情報でして、デフォルトのままだと、大事な情報を英語で書くなというのと、ユーザーがデータがどのように使用されるか知ることができないという理由で却下されます。

つまりこのモーダルの文章を書き換える必要があります。

どうやるかというと、config.xmlファイルの <edit-config></edit-config>に以下のような記述があるので、これを書き換えます。

config.xml
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
    <string>need camera access to take pictures</string>
</edit-config>

この<string></string>の部分です。

ただし、文章はなんでもいいわけではなくて、カメラを必要とする機能を明記し、ユーザーのデータ(ここでは撮影した画像)をどのように使用するかの例を含める必要があります。

わかりにくいと思うので私のアプリの例を出すと、こんな感じに書いておけばOKです。

もっといい感じの書き方があるだろ!と思われるかもしれませんが、とりあえずこれで審査は通ります。

3. まとめ

・カメラを使おうとするとクラッシュするのは、カメラプラグインがOFFになっているから。
・カメラを使う場合はconfig.xmlにてデータの必要性とその使用目的を明記する必要がある。
・例に使用したアプリ:禁欲エボリューション
kinyoku-100px-icon.png

Discussion