目次

1. 機能説明
 2. Xcode でプロジェクトを作成
 3. コード全文
 4. 動作確認
 5. コード解説
 6. おわりに

1.機能説明

・Reset ボタン(赤いボタン): タイマー値をリセットして 0 秒にする
・Start/Stop ボタン(青いボタン): タイマーをスタートする。既にタイマーが動作している場合に押すと、タイマーがストップする。
・Adjust ボタン: タイマーの3Dオブジェクトの位置を調整する。(画面中央に移動させる)

2. プロジェクトを作成

Xcode で SceneKit 用のプロジェクトを新規作成します。

手順と異なる方法で作成した場合、コードが動作しない可能性があります。

手順 1 : Xcode を開き、Create New Project を選択。

手順 2 : Augmented Reality App を選択し、画面右下部の Next ボタンを押下。

手順 3 : Product Name、Organization Identifier 欄にて、任意のプロジェクト名を入力。
Interface 欄は SwiftUI、
Language 欄は Swift、
Content Technology 欄は Scenekit をそれぞれ選択。
その後、画面右下部の Next ボタンを押下。

手順 4 : プロジェクトを作成するフォルダを選択して、画面右下部の Create ボタンを押下。

手順 5 : プロジェクト画面が開いたら画面左上部のプロジェクト名が表示されている箇所を選択する。
すると、下記のようなプロジェクト情報画面が表示される為、Minimum Deployments に表示されている iOS のバージョンが、動作確認に使用する端末のバージョン以下になるように変更する。
(端末のバージョンが iOS 16.0 の場合は、Minimum Deployments を 16.0 かそれ以下のバージョンに変更する。)

設定完了！プロジェクトフォルダ内が下記画像と同じならOK。

足りないファイル等がある場合は手順と作成方法が同じか確認してみてください。

3. コード全文

ViewController.swift ファイルのコードを下記コードに変更してください。

Github でコードを確認する場合はこちらをクリック

ViewController.swift

import UIKit
import SceneKit
import ARKit

// UIViewControllerを継承したクラス ViewController
class ViewController: UIViewController, ARSCNViewDelegate, ARSessionDelegate {
    // ARSCNViewのIBOutlet
    @IBOutlet var sceneView: ARSCNView!
    // AR上のタイマーのノード
    var timerNode: SCNNode?
    // タイマー開始時刻
    var startTime: Date?
    // タイマーが実行中かどうかを示すフラグ
    var isTimerRunning = false
    // タイマーの状態変化が発生したかどうかを示すフラグ
    var isStatusChanged = false
    // タイマーの値を保持するためのプロパティ
    var timerBaseValue: TimeInterval = 0
    
    // ボタンの追加とレイアウト制約の設定
    let startStopButton: UIButton = {
        let button = UIButton()
        button.setTitle("Start", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = .blue
        button.layer.cornerRadius = 8
        //button.addTarget(ViewController.self, action: #selector(startStopButtonTapped), for: .touchUpInside) // クラッシュする
        button.addTarget(self, action: #selector(startStopButtonTapped), for: .touchUpInside)
        return button
    }()
    
    // リセットボタンの追加とレイアウト制約の設定
    let resetButton: UIButton = {
        let button = UIButton()
        button.setTitle("Reset", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = .red
        button.layer.cornerRadius = 8
        button.addTarget(self, action: #selector(resetButtonTapped), for: .touchUpInside)
        return button
    }()
    
    // Adjustボタンの追加とレイアウト制約の設定
    let adjustButton: UIButton = {
        let button = UIButton()
        button.setTitle("Adjust", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = .green
        button.layer.cornerRadius = 8
        button.addTarget(self, action: #selector(adjustButtonTapped), for: .touchUpInside)
        return button
    }()
    
    // UIViewControllerのライフサイクルメソッド viewDidLoad
    override func viewDidLoad() {
        super.viewDidLoad()
        // ARSessionのデリゲートをViewController自体に設定
        self.sceneView.session.delegate = self
        // ARSCNViewのデリゲートをViewController自体に設定
        sceneView.delegate = self
        // fpsやタイミング情報を表示
        sceneView.showsStatistics = true
        // 新しいシーンを作成
        let scene = SCNScene()
        sceneView.scene = scene
        // Start/Stopボタンをビューに追加
        view.addSubview(startStopButton)
        setupConstraints()
        // Resetボタンをビューに追加
        view.addSubview(resetButton)
        setupResetButtonConstraints()
        // Adjustボタンをビューに追加
        view.addSubview(adjustButton)
        setupAdjustButtonConstraints()
    }
    
    // UIViewControllerのライフサイクルメソッド viewWillAppear
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        // ARセッションの設定
        let configuration = ARWorldTrackingConfiguration()
        // ARSCNViewのセッションを開始
        sceneView.session.run(configuration)
        // タイマーを配置
        placeTimer()
    }
    
    // UIViewControllerのライフサイクルメソッド viewWillDisappear
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        // ARSCNViewのセッションを一時停止
        sceneView.session.pause()
    }
    
    // MARK: - ARSCNViewDelegate
    
    // ARSCNViewのデリゲートメソッド renderer -
    func renderer(_ renderer: SCNSceneRenderer, updateAtTime time: TimeInterval) {
        //print("rendering")
        if isTimerRunning { // タイマーが実行中の場合にのみ時間を更新する
            if let startTime = startTime {
                let elapsedTime: Double
                if timerBaseValue != 0 {
                    elapsedTime = Date().timeIntervalSince(startTime) + timerBaseValue
                    print(Date().timeIntervalSince(startTime), elapsedTime)
                } else {
                    print(Date().timeIntervalSince(startTime))
                    elapsedTime = Date().timeIntervalSince(startTime)
                }
                let StringTime = formatTime(seconds: elapsedTime)
                DispatchQueue.main.async {
                    self.updateTextNode(text: StringTime)
                }
            }
        } else {
            if isStatusChanged { // stop ボタン、または reset ボタン押下時の処理
                isStatusChanged = false
                if let startTime = startTime {
                    readTextNode()
                    updateTextNode(text: formatTime(seconds: timerBaseValue))
                } else {
                    DispatchQueue.main.async {
                        self.updateTextNode(text: "00:00.00")
                    }
                }
            }
        }
    }
        
    // MARK: - Timer Methods
    
    // Start / Stop ボタン押下時の処理
    @objc func startStopButtonTapped() {
        if isTimerRunning { // Stop 処理
            stopTimer()
            startStopButton.setTitle("Start", for: .normal)
        } else { // Start 処理
            startTimer()
            startStopButton.setTitle("Stop", for: .normal)
        }
    }
    
    // Reset ボタン押下時の処理
    @objc func resetButtonTapped() {
        resetTimer() // タイマーを停止
        //updateTextNode(text: "00:00.00") // テキストノードをリセット
        startStopButton.setTitle("Start", for: .normal) // Start/Stopボタンのテキストをリセット
    }
    
    // Adjust ボタン押下時の処理
    @objc func adjustButtonTapped() {
        adjustTimer()
    }
    
    // タイマーを描画するメソッド
    func placeTimer() {
        updateTextNode(text: "00:00.00")
    }
    
    // タイマーを開始するメソッド
    func startTimer() {
        if !isTimerRunning {
            startTime = Date()
            isTimerRunning = true
        }
    }
    
    // タイマーを停止するメソッド
    func stopTimer() {
        if isTimerRunning {
            isTimerRunning = false
            isStatusChanged = true
        }
    }
    
    // タイマーをリセットするメソッド
    func resetTimer() {
        startTime = nil
        timerBaseValue = 0
        isTimerRunning = false
        isStatusChanged = true
    }
    
    // MARK: - ARSessionDelegate
    
    // タイマーを画面中央に再配置するメソッド
    func adjustTimer() {
        //print(sceneView.pointOfView!)
        if let camera = sceneView.pointOfView {
            let position = SCNVector3(x: -0.2, y: -0.1, z: -0.5) // Set the position relative to the camera
            let convertedPosition = camera.convertPosition(position, to: nil)
            timerNode?.position = convertedPosition
            timerNode?.eulerAngles = camera.eulerAngles // Set the node's orientation to match the camera's orientation
        }
    }
    
    // MARK: - UI Updates
    
    // テキストノードを更新するメソッド
    func updateTextNode(text: String) {
        // テキストノードがまだ作成されていない場合は作成する
        if timerNode == nil {
            print("timerNode created.")
            timerNode = createTextNode(text: text)
            sceneView.scene.rootNode.addChildNode(timerNode!)
        } else {
            // テキストノードが既に存在する場合は、テキストを更新する
            if let textGeometry = timerNode?.geometry as? SCNText {
                textGeometry.string = text
            }
        }
    }
    
    // テキストノードに表示された経過時間を読み取るメソッド
    func readTextNode(){
        // テキストノードが既に存在する場合は経過時間を読み取る
        if timerNode != nil {
            if let textGeometry = timerNode?.geometry as? SCNText {
                let timerString: String = textGeometry.string as! String
                print("timerString: \(timerString)")
                // 経過時間を型変換して、timerBaseValue に代入する
                if let convertedTime = convertTime(timeString: timerString) {
                    timerBaseValue = convertedTime
                }
            }
        }
    }
    
    // テキストノードを作成するメソッド
    func createTextNode(text: String) -> SCNNode {
        let textGeometry = SCNText(string: text, extrusionDepth: 1.5)
        textGeometry.firstMaterial?.diffuse.contents = UIColor.red
        let textNode = SCNNode(geometry: textGeometry)
        textNode.scale = SCNVector3(0.01, 0.01, 0.01) // 適切なスケールを設定してください
        textNode.position = SCNVector3(-0.2, -0.2, -0.5) // 適切な位置を設定してください
        return textNode
    }
    
    // 経過時間をフォーマットするメソッド
    private func formatTime(seconds: TimeInterval) -> String {
        let minutes = Int(seconds) / 60
        let remainingSeconds = Int(seconds) % 60
        let milliseconds = Int((seconds.truncatingRemainder(dividingBy: 1)) * 100)
        return String(format: "%02d:%02d.%02d", minutes, remainingSeconds, milliseconds)
    }
    
    // 経過時間を TimeInterval 型に型変換するメソッド
    private func convertTime(timeString: String) -> TimeInterval? {
        let timeComponents = timeString.components(separatedBy: ":")
        // timeString の形式が想定通り、"xx:yy" の場合にのみ処理を実行する
        if timeComponents.count == 2,
           let minutes = Double(timeComponents[0]),
           let secondsAndMillis = Double(timeComponents[1]) {
            let totalSeconds = (minutes * 60) + secondsAndMillis
            return TimeInterval(totalSeconds)
        }
        return nil
    }
    
    // レイアウト制約の設定
    // Resetボタンのレイアウト制約の設定
    func setupResetButtonConstraints() {
        resetButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            resetButton.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: -180), // 画面の中央線から-180の位置に配置
            resetButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -50), // 下から-16の位置に配置
            resetButton.widthAnchor.constraint(equalToConstant: 100),
            resetButton.heightAnchor.constraint(equalToConstant: 40)
        ])
    }
    
    // Startボタンのレイアウト制約の設定
    func setupConstraints() {
        startStopButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            startStopButton.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0), // 画面の中央に配置
            startStopButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -50), // 下から-16の位置に配置
            startStopButton.widthAnchor.constraint(equalToConstant: 100),
            startStopButton.heightAnchor.constraint(equalToConstant: 40)
        ])
    }
    
    // Adjustボタンのレイアウト制約の設定
    func setupAdjustButtonConstraints() {
        adjustButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            adjustButton.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 180), // 画面の中央線から+180の位置に配置
            adjustButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -50), // 下から-16の位置に配置
            adjustButton.widthAnchor.constraint(equalToConstant: 100),
            adjustButton.heightAnchor.constraint(equalToConstant: 40)
        ])
    }
}

4. 動作確認

動作確認に使用する端末と Mac を接続した後、画像右上部の箇所を選択し、端末を選択してください。

動作確認に使用する端末が選択されている状態で、画面左上部の ▶️ ボタンを押下することで、アプリケーションのビルドが完了して動作確認ができます。

(端末が表示されない、ビルドするとエラーが出る、初めてでよくわからない等あれば検索してみてください)

正常に動作確認できたら成功！

カメラを動かしたり、ボタンを押したりして動作を確認してみてください。

5. コード解説

※随時更新します。解説が必要な箇所があればコメントしてください。

6. おわりに

不明点等あればお気軽に質問ください

Github でコードを確認する場合はこちらをクリック