【連載】

実践! iPhoneアプリ開発

【第26回】ARアプリの作り方 (1) - カメラオーバーレイビューを表示する

[2010/02/26 15:37]木下誠 ブックマーク ブックマーク

開発ソフトウェア

ARとは

iPhoneで盛り上がっているアプリケーションの分野に、AR (Augmented Reality)がある。日本語だと拡張現実感と呼ばれるもので、コンピュータの様々なセンサを使って現実の世界に情報を付加するものだ。iPhoneアプリの場合、カメラで取り込んだ映像に対して、店舗の情報などをオーバーレイ表示するものが多い。

ARアプリを実現するために必要な技術を考えてみる。ざっとこれだけの要素技術があるだろう。

  • カメラ画像のライブプレビュー
  • その映像へのオーバーレイ表示
  • 表示されているものを知るための画像認識
  • 位置情報を取得するためのGPS
  • デバイスの傾きを知るための加速度センサ
  • 現在向いている方位を知るための電子コンパス
  • 3D空間の表示

ハードウェアとして必要なものと、ソフトウェアで対応しないといけないものとがある。iPhoneは、ハードウェアとしては発売当初から、カメラ、GPS、加速度センサを装備している。またiPhone 3GSからは電子コンパスも備えている。ソフトウェアとしては、3D空間の表示は問題なく、ライブプレビューのオーバーレイもiPhone OS 3.1からは行なえるようになった。ARを行なうための環境は整ってきたと言えるだろう。

要素技術として挙げたものの中で、難しいのが画像認識だ。本来であれば、取り込んだ画像を解析して、そこで認識されたものに対して情報を付加して表示するべきだろう。だが、画像認識の技術がまだこなれていないこと、iPhoneのCPUではリアルタイムで認識処理を行うにはパワー不足であることなどから、なかなか組み込むことは難しい。現時点でリリースされているARアプリでは、GPSと電子コンパスのみを使って、情報を表示しているものが多い。これだと、ライブプレビューの画像とぴったりあわせることは難しい。また、建物の裏にあって見えないものに対しても情報を表示してしまう。厳密な意味ではARというよりは、ARの雰囲気を味わうアプリということになるだろう。

この連載でも、現在のiPhoneの機能でできるARアプリを作成してみよう。

カメラオーバーレイビュー

まずカメラのライブプレビューを表示し、その上に情報を表示するためのオーバーレイビューを重ねるところを説明しよう。

カメラからの映像を表示するには、UIImagePickerControllerクラスを使う。このクラスの使い方については、この連載の2回目で詳しく説明しているのでそちらを参照してほしい。

このクラスは、iPhone OS 3.1で大きく機能が拡張された。その内容は、AR向けの拡張と言えるだろう。

まず、ライブプレビューの上にビューを重ねる手段が提供された。cameraOverlayuViewという名前のプロパティを使う。このプロパティに任意のビューを設定することで、オーバーレイ表示が実現できる。

List 1.

@property(nonatomic,retain) UIView *cameraOverlayView;

カメラを起動すると、通常は下部に写真を撮るためのボタンが表示される。ARアプリではこのボタンは消しておきたい。そのために使うのは、showsCameraControlsプロパティだ。ここにNOを設定すると、コントロールが消えることになる。

List 2.

@property(nonatomic) BOOL showsCameraControls;

また、今回作成するアプリとはあまり関係はないが、ライブプレビューにアフィン変換を適用することもできる。cameraViewTransformプロパティを使う。これを利用すると、デジタルズームなどを実現することができる。

List 3.

@property(nonatomic) CGAffineTransform cameraViewTransform;

これらがiPhone OS 3.1で拡張されたイメージピッカーの機能だ。

オーバーレイの実装

ではこれらを使って、オーバーレイを実装してみよう。ソースコードは非常に簡単だ。

 List 4.

    // カメラが使用可能かどうかチェックする
    if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]) {
        // イメージピッカーを作る
        pickerController = [[UIImagePickerController alloc] init];
        pickerController.sourceType = UIImagePickerControllerSourceTypeCamera;

        // カメラコントローラを隠す
        pickerController.showsCameraControls = NO;

        // カメラオーバーレイビューを追加する
        pickerController.cameraOverlayView = arView;

        // イメージピッカーを表示する
        [viewController presentModalViewController:pickerController animated:NO];
    }

まずカメラが使用可能かどうかチェックする。可能であれば、UIImagePickerControllerのインスタンスを作成し、タイプとしてカメラを表すUIImagePickerControllerSourceTypeCameraを設定する。

そして、iPhone OS 3.1で追加されたプロパティを使い、カメラコントローラを隠し、オバーレイビューを設定する。あとは、いつも通りにイメージピッカーを表示すればいい。これで、カメラのライブプレビュー上に、様々なコントローラを追加できる。

このビューが、ARアプリの基本となるのだ。

ここまでのソースコード: AR-1.zip

※ 本記事は掲載時点の情報であり、最新のものとは異なる場合がございます。予めご了承ください。

この記事に興味を持ったら"いいね!"を Click
Facebook で IT Search+ の人気記事をお届けします
1203
2
【連載】実践! iPhoneアプリ開発 [26] ARアプリの作り方 (1) - カメラオーバーレイビューを表示する
iPhoneで盛り上がっているアプリケーションの分野に、AR (Augmented Reality)がある。日本語だと拡張現実感と呼ばれるもので、コンピュータの様々なセンサを使って現実の世界に情報を付加するものだ。今回からは、そのARアプリを作ってみる。
https://news.mynavi.jp/itsearch/2016/02/22/iphone_apps/index_26.jpg
iPhoneで盛り上がっているアプリケーションの分野に、AR (Augmented Reality)がある。日本語だと拡張現実感と呼ばれるもので、コンピュータの様々なセンサを使って現実の世界に情報を付加するものだ。今回からは、そのARアプリを作ってみる。

会員登録(無料)

セキュリティ・キャンプ2017 - 精彩を放つ若き人材の『今』に迫る
ぼくらのディープラーニング戦争
クラウドアンケート
マイナビニュース スペシャルセミナー 講演レポート/当日講演資料 まとめ
人事・経理・総務で役立つ! バックオフィス系ソリューション&解説/事例記事まとめ

一覧はこちら

今注目のIT用語の意味を事典でチェック!

一覧はこちら

ページの先頭に戻る