Tech Blog

グローバルな家族アプリFammを運営するTimers inc (タイマーズ) の公式Tech Blogです。弊社のエンジニアリングを支える記事を随時公開。エンジニア絶賛採用中！→ https://timers-inc.com/engineering

ARKitを利用した機能をFammに入れた時に苦労した事 #arkit #fammmeasure

Apple ARKit iOS Famm

f:id:bboykk:20171102193325p:plain

先週のイベントレポートに引き続き、この頃は寒くてこたつから脱出出来ないかっくん(@fromkk)です。
また、千吉良君のARKitの記事に引き続きARKitに関連した記事となりますがご容赦下さい🙇🏻‍♂️

Timersでは2017年度下期も9月から始まっており、これまでとチーム編成も変更になりました。
僕はこれまでのFammとは一線を画した機能を作るチーム配属になり、ここ1ヶ月ぐらいは ARKit と格闘していました。
この記事では既に運用されているFammというアプリに ARKit を利用した機能を入れてリリースするまでに苦労した事を書いていきたいと思います。

前提

前提条件として僕はWWDCに行って直接 ARKit のセッションを見たり、勉強会で ARKit について発表 した事がある程度の基礎知識は持っていました。
また、 @shu223 さんの ARKit-Sampler には非常に助けて頂きました。ありがとうございました🙇🏻‍

対応している端末

ARKit はiOS 11、A9以上に対応している端末で動作します。
今のFammはiOS 9以上をサポートしているので、OSのハンドリングが必要です。

if #available(iOS 11.0, *) {
    // do something...
} else {
    // 使えないよー
}

今回の機能はARの特徴点の取得が必須なので ARWorldTrackingConfiguration が利用出来る事が必要です。

if ARWorldTrackingConfiguration.isSupported {
    // do something
} else {
    // サポートしてないよー
}

これをやっておかないとA9未満のCPUを搭載している端末では画面は開くのに動作しないという事が起こり得るので注意が必要です。

また、忘れてはいけないのが Info.Plist にカメラを利用する旨を書いておく( NSCameraUsageDescription )のは忘れがちなので、既に運用しているアプリに後で ARKit を導入しようと思った時には注意が必要です。

画像の合成

SCNView には snapshot() -> UIImage という関数があり、カメラから受け取っている画像を取得する事が出来るんですが、今回はこの上に UIKit で作成した画像を合成する必要がありました。（もっとも、今回 ARKit で配置した物体は撮影画面には表示されないので ARKit じゃなくても良かったのですが今回はこのまま進めました）

/// `base: UIImage` の上に `composeImage: UIImage` を `rect: CGRect` の場所に合成する
///
/// - Parameters:
///   - base: UIImage
///   - composeImage: UIImage
///   - rect: CGRect
/// - Returns: UIImage?
func compose(_ base: UIImage, and composeImage: UIImage, with rect: CGRect) -> UIImage? {
    UIGraphicsBeginImageContextWithOptions(base.size, false, base.scale)
    defer { UIGraphicsEndImageContext() }
    
    base.draw(in: CGRect(origin: .zero, size: base.size))
    
    composeImage.draw(in: rect)
    
    return UIGraphicsGetImageFromCurrentImageContext()
}

この様な関数を作って画像合成を実現しました。

iPhone X対応

iPhone Xの対応はUIKitベースのアプリならシミュレーターで最低限の確認は可能でした。
しかしARKitとなると話は別で、前述した ARWorldTrackingConfiguration.isSupported が false となってしまいます。
iPhone Xのシミュレーターで見るときだけこのフラグを見ない様に修正すれば良いのですが、毎回それをやるのは面倒だったので段々と確認しなくなっていきました。
僕はiPhone Xを発売当日に入手する事が出来たので、入手してすぐに一番気になっていた実機での動作を確認してみた所、 見事 に崩れており、正常に動作しない部分がありました😱 開発中はなるべく早くリリースしたいなと思っていましたが、この時ばかりはリリースが発売後でよかったなと思った瞬間でした。

計測のずれ

今回リリースした機能はお子様日々の身長を記録していくという物なのですが、机の角など特徴点が分かりやすいものを測る時は高い精度が出るんですが、人物を計測しようとした時に実際より小さく出てしまうという問題が発生しました。
頭頂部やかかとに正確にマーカーを配置する事は慣れた僕でも難しく、最終的には計測した値にとある値を掛けて少し割増する様にしています。
リリースした今でも多少のずれは発生しているのですが、今後のアップデートで少しずつ改善していけたらと思います。

社内ヒアリングによる大幅な作り直し

TimersではFammのターゲット層に当たる子育て世代のママさん達がCSチームで活躍してくれています。
僕の所属しているチームではFammに新機能を追加する際には彼女たちに真っ先にヒアリングする様にしています。
ある程度機能が出来た段階で早速今回作った機能を使ってもらった所、物凄く使い辛そうにしていました。
普段使っているUIとは違い、画面に表示されているのはカメラから映し出される映像と謎の画像達、、なんとか使い始めるものの最後までいきついた人は 一人も いませんでした。
一旦UIを見直し、それまではなるべく画面には文字を出さない様にしていたのですが、何をする画面なのかを説明を入れたり、後どれくらいのステップが必要なのかをUI的に表現する様にしました。
この変更がなかなか大幅な変更になり、急いで対応した結果大きなPRを投げてしまう事になりました😱
この辺りでつぶやいた内容を見ていただければなんとなく察して頂ける気がします。

その後、何度か改良を重ねながら「これならユーザーは理解出来る！」という所まで落ち着いたのでこの度のリリースとなりました🎉

まとめ

今回の開発で悔しい所としてはiOS 11がリリースされた後に開発がスタートした事です。
せっかくWWDCに行って、事前に情報を仕入れて勉強していたのに、iOS 11に合わせて機能をリリース出来なかった点は少し悔しかったです。
それでも社内的には新しい試みをリリースする事が出来、今後更にARを利用した機能は計画していますので、皆さまには楽しみにして頂ければと思います😋
良かったら使ってみてください❗️更に良かったらInstagram等にシェアしてくれたら嬉しいです😄

積極採用中!!

子育て家族アプリFamm、カップル専用アプリPairyを運営するTimers inc. では、現在エンジニアを積極採用中！ 急成長中のサービスの技術の話を少しでも聞いてみたい方、スタートアップで働きたい方など、是非お気軽にご連絡ください！ 採用HP : http://timers-inc.com/engineerings

Timersでは各職種を積極採用中！

急成長スタートアップで、最高のものづくりをしよう。

募集の詳細をみる