スタッフブログ

STAFF BLOG

アプリ開発日誌

2018.02.27

【Swift】初心者でも簡単にできるARKitを使ってみよう

初めまして松田翔大です。
入社してもうすぐ半年になりますが、最近一人で開発を任されるようになってきて色々試行錯誤しながら奮闘しています。
今回は、XcodeでARKitを使って3Dオブジェクトを表示してみる機会があったので、振り返りとして整理してみました。。

Unity では少しやったことはあったのですが、Xcodeでは初だったのでサンプル程度に作ってみました。

# 開発環境

  • Xcode9.1

#事前準備

まず、Xcodeを立ち上げて新規のプロジェクトを作成しましょう。
スクリーンショット 2018-02-20 12.21.04 スクリーンショット 2018-02-20 12.21.26

今回は、ARKitを使用するので、Augmented Reality Appを選択しましょう。Content TechnologyはSceneKitを設定してください。

作成されたプロジェクトを起動するとデフォルトで飛行機が固定の位置に表示されている状態のAR画面が見ることができるので確認したことがない方は見てみると良いと思います。

#実装

<ViewController.swift>

import UIKit
import SceneKit
import ARKit

class ViewController: UIViewController, ARSCNViewDelegate {
    @IBOutlet var sceneView: ARSCNView!
    override func viewDidLoad() {
        super.viewDidLoad()

        self.sceneView = ARSCNView(frame: self.view.frame)
        self.view.addSubview(self.sceneView)

        // デリゲートをセット
        sceneView.delegate = self

        // FPSなどの統計情報を表示
        sceneView.showsStatistics = true

        // 新しいシーンの作成
        let scene = SCNScene() //AR画面に表示するシーンの作成

        // シーンに表示する立方体のオブジェクトの設計図?(みたいなもの)を作成(width,height,lengthで指定した大きさの立方体が作成される)
        let box = SCNBox(width: 0.2, height: 0.2, length: 0.2, chamferRadius: 0) 
        let material = SCNMaterial() //マテリアルの作成

        material.diffuse.contents = UIColor.blue  //作成したマテリアルの色を指定

        let node = SCNNode() //ノード(オブジェクトを構成する点)の作成

        node.geometry = box //先ほど作成した立方体の設計図に合わせて点を構成して立方体を形成

        node.geometry?.materials = [material] //形成した立方体にマテリアルをつける(立方体の色を変更)

        node.position = SCNVector3Make(0, 0.2, -0.5) //立方体の表示する位置を指定

        scene.rootNode.addChildNode(node) //作成したシーンに立方体を追加

        // Viewにシーンをセット
        sceneView.scene = scene
    }<br>
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        // セッションの作成
        let configuration = ARWorldTrackingConfiguration()<br>
        // Viewのセッションを実行
        sceneView.session.run(configuration)
    }

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)<br>
        // Viewのセッションを一時停止
        sceneView.session.pause()
    }
}

上記のように、ViewController.swiftを変更するとデフォルトであった飛行機が青い立方体に変化します。(以下の画像)

sample

このようにコードで簡単なオブジェクトを作成して表示させることは簡単にできました。

これを応用させれば自分の好きな3DモデルをARで表示させたりすることも可能です。
皆さんも是非自分の好きなものをARで見てみてはどうでしょうか。

次回は、表示した3Dモデルを今回みたいに指定した位置に表示するのではなく、平面を認識してそこに表示させることを書けたらなと思います。

BACK

お問合せ

イーディーエーに興味をお持ちいただいて
ありがとうございます!
スマホアプリに関するご相談、
お見積りや弊社へのご質問など、
お気軽にお問い合わせください。
担当者より折り返しご連絡させていただきます。

    お名前必須
    会社名
    メールアドレス必須
    電話番号必須
    お問合わせ種別必須
    お問合わせ内容必須

    アンケートにご協力ください。
    弊社サイトへはどのようにしてアクセスされましたか?

    個人情報のお取扱いに関する同意事項

    1.事業者の氏名又は名称

    株式会社イーディーエー

    2.個人情報保護管理者の氏名又は職名、所属及び連絡先

    個人情報保護管理者 小宮 保人
    Mail:[email protected]

    3.取得した個人情報の利用目的

    当フォームで取得した個人情報は、お問い合わせに関する回答のために利用し、目的外利用はいたしません。

    4.弊社が取得した個人情報の第三者への委託、提供について

    弊社は、ご本人に関する情報をご本人の同意なしに第三者に委託または提供することはありません。

    5.個人情報保護のための安全管理

    弊社は、ご本人の個人情報を保護するための規程類を定め、従業者全員に周知・徹底と啓発・教育を図るとともに、その遵守状況の監査を定期的に実施いたします。
    また、ご本人の個人情報を保護するために必要な安全管理措置の維持・向上に努めてまいります。

    6.個人情報の開示・訂正・利用停止等の手続

    ご本人が、弊社が保有するご自身の個人情報の、利用目的の通知、開示、内容の訂正、追加又は削除、利用の停止、消去及び第三者への提供の停止を求める場合には、下記に連絡を頂くことで、対応致します。

    株式会社イーディーエー 個人情報お問合せ窓口
    〒106-0032 東京都港区六本木7丁目14番23 ラウンドクロス六本木4F
    TEL:03-5422-7524 FAX:03-5422-7534
    Mail:[email protected]

    7.ご提供いただく情報の任意性

    個人情報のご提供は任意ですが、同意を頂けない場合には、第3項にあります利用目的が達成できない事をご了承いただくこととなります。

    8.弊社Webサイトの運営について

    弊社サイトでは、ご本人が弊社Webサイトを再度訪問されたときなどに、より便利に閲覧して頂けるよう「クッキー(Cookie)」という技術を使用することがあります。これは、ご本人のコンピュータが弊社Webサイトのどのページに訪れたかを記録しますが、ご本人が弊社Webサイトにおいてご自身の個人情報を入力されない限りご本人ご自身を特定、識別することはできません。
    クッキーの使用を希望されない場合は、ご本人のブラウザの設定を変更することにより、クッキーの使用を拒否することができます。その場合、一部または全部のサービスがご利用できなくなることがあります。