Corredor

ウェブ、プログラミングの勉強メモ。

iOS10 以降で動画撮影時の許可が上手く得られなかった時の対処法

絶対に挫折しないiPhoneアプリ開発「超」入門 増補第6版【Swift 4 & iOS 11】完全対応 (Informatics&IDEA)

絶対に挫折しないiPhoneアプリ開発「超」入門 増補第6版【Swift 4 & iOS 11】完全対応 (Informatics&IDEA)

プラグインを利用して動画撮影機能を設けた Cordova アプリを、iOS10 以降の端末で動かそうとした。しかし、動画撮影開始時に上手くユーザに許可が得られず、強制終了してしまった。

iOS では、アプリからカメラや写真などにアクセスする際にユーザに許可を求める。この許可を得るためのキーとして、NS***UsageDescription (*** 部分は Camera とか) というモノを Info.plist に指定する必要がある。

Cordova アプリの場合、XCode 上でこの設定をしなくて済むように、対象のプラグインが許可を求めるための設定を予め持っていて、config.xmlvariable 要素を追記してくれる。


ここまでのことは知っていて、以前まではちゃんと動いていたのだが、iOS をバージョンアップしたら動かなくなった。

色々調べてみると、動画撮影時は以下の3つの許可を求めないといけないようだった。

  • NSCameraUsageDescription … CAMERA_USAGE_DESCRIPTION
  • NSMicrophoneUsageDescription … MICROPHONE_USAGE_DESCRIPTION
  • NSPhotoLibraryUsageDescription … PHOTOLIBRARY_USAGE_DESCRIPTION

手前に書いたものが Info.plist に記載されるキーで、後ろに書いたものが config.xml で指定する文言。

プラグインによってはこの3つの許可を得る指定になっていないものがあり、Info.plist に正しく許可設定が記せていない場合があるようだった。

そんな時は XCode 上で上述のキーを追加し、適当な説明文を付与してあげれば OK。Cordova プラグインが該当する機能にアクセスしようとした時に正しく許可が得られるようになる。

Array-Like Object で forEach する

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター! 速習シリーズ

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター! 速習シリーズ

速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ! 速習シリーズ

速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ! 速習シリーズ

Js.next: Ecmascript 6

Js.next: Ecmascript 6

document.querySelectorAll() の結果は、配列チックに length プロパティがあったり、[2] などと添字を指定して要素が取得できたりするのだが、forEach() メソッドを持っていない。

こうした配列っぽいけど Array ではないオブジェクトを Array-Like Object と呼ぶ。

この Array-Like Object で Array の関数を使うには、call() を使って欲しい関数を拝借してやれば良い。

Array.prototype.forEach.call(document.querySelectorAll('div'), (elem) => {
  // ...
});

よくこの書き方を忘れてしまうので書いておく。

Bootstrap でテーブルのセル幅を指定する時に Grid System の col-* が使える

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

UIまで手の回らないプログラマのためのBootstrap 3実用ガイド

UIまで手の回らないプログラマのためのBootstrap 3実用ガイド

Bootstrap 3 系で確認。Bootstrap 4 系でも大丈夫そう。

Bootstrap でテーブルを作る時、セル幅を指定するために .col-xs-6 などの Grid System のクラスが使えることを知った。

Grid System はネガティブマージンと float を利用しているので、.row のないところで使えないだろう、と思っていたが、table 向けにスタイルがリセットされていた。

つまり、以下のように指定できる。

<table class="table">
  <thead>
    <tr>
      <th class="col-xs-2">No.</th>
      <th class="col-xs-7">Name</th>
      <th class="col-xs-3">Age</th>
    </tr>
  ...
</table>

tdth 要素に .col-* クラスを付与した場合は、各種スタイルがリセットされており、残るは width 指定のみとなるので、幅指定ができるようだ。

もし12カラムを超えるようなクラスを指定した場合は、floatdisplay などは影響してこないので、単純にブラウザが width をどう解釈するかに任される。

自分で width 指定だけのクラスを作ったりするよりは .col-* を使う方が Bootstrap っぽくて良いかも。