見出し画像

ChatGPTと一緒にCarPlayアプリを作りたい！！（完結編）

ChatGPT部 Produced by NOB DATA

はじめに

こんにちは！ChatGPT部の原田です！
CarPlayアプリは作れる
ということを知った前回…

ChatGPTに作り方を聞いて色々とした準備をしていきました！
その中でひとつ気になる点が、
Apple Developer Programの登録: CarPlayアプリを開発およびテストするためにはApple Developer Programに登録する必要があります。
↑このApple Developer Program
有料なのでできればなしでなんとかしたいなと思っていたので、

と聞いてみたところ、、
以下ChatGPTからの回答です、

はい、Apple Developer Programへの登録は、以下の理由から必須です：

シミュレーションでの動作確認

  • プロビジョニングプロファイル：シミュレータでアプリを実行するだけであれば必ずしもApple Developer Programに登録する必要はありませんが、CarPlayの機能をテストする場合、適切なプロビジョニングプロファイルが必要です。

実機へのインストール

  • アドホック配布または開発用配布：実機にアプリをインストールしてテストする場合、Apple Developer Programに登録していないとプロビジョニングプロファイルを作成できず、iPhoneにアプリをインストールすることができません。

  • 証明書と署名：アプリを実機にインストールする際には、アプリを適切に署名する必要があります。これにはApple Developer Programの証明書が必要です。

IPAファイルの生成とインストール

  • プロビジョニングプロファイルと証明書：IPAファイルを生成して実機にインストールするためには、Apple Developer Programに登録してプロビジョニングプロファイルと開発者証明書を取得する必要があります。

結論

シミュレーションのみであればApple Developer Programに登録せずにテストできますが、実機テストやIPAファイルの生成とインストールを行う場合は、Apple Developer Programへの登録が必須です。したがって、CarPlay対応のアプリを実機でテストするためには、Apple Developer Programに登録することを強くお勧めします。

はい、必須です。iOSアプリとしてはテストできますが、CarPlayのテストはできません…　このシリーズは終了になります。
けどせっかくだからできるとこまではしてみよう、、
iOSアプリとしてテストまでは、、
ということで、進めていきます！

1. 作成開始

早速作っていきます！前回の記事で作り方は聞いているので、それ通りやって行くと、、、

2. プロジェクトにCarPlayのターゲットを追加

  1. プロジェクトナビゲーターでプロジェクト名を選択します。

  2. 上部の「＋」ボタンをクリックして、「New Target」を選択します。

  3. テンプレートから「CarPlay Audio App」を選びます（これは音声アプリのテンプレートですが、カスタマイズしてChatGPTアプリに利用できます）。

↑で詰みます。

Apple Developer Programへの登録ができていないので、XcodeではCarPlayに関する設定項目が出てきません。なので、

回答は、、

Xcodeのターゲット追加の画面で「CarPlay Audio App」が表示されないようですが、これはXcodeのバージョンや設定によるものかもしれません。代替として、CarPlayアプリを構成するために以下の手順を試してみてください。

1. 新しいターゲットを追加

  1. プロジェクトナビゲーターでプロジェクト名を選択し、上部の「＋」ボタンをクリックして「New Target」を選択します。

  2. 「iOS」タブを選択し、「Application Extension」を選びます。

  3. 「App Intents Extension」などの拡張機能を選択して次に進みます。

2. Info.plistの設定変更

  1. 新しいターゲットが作成されたら、そのターゲットのInfo.plistを開きます。

  2. `NSSupportedExternalAccessoryProtocols`キーを追加し、値に「com.apple.externalaccessory.protocol.carplay」を設定します。

  3. `UIBackgroundModes`キーに「audio」を追加します。

3. CarPlayサポートのコード追加

  1. `AppDelegate.swift`にCarPlayの設定を追加します。

import UIKit
import CarPlay

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // CarPlayのサポートを追加
        let sceneConfig = CPTemplateApplicationSceneConfiguration()
        sceneConfig.delegateClass = CarPlaySceneDelegate.self
        UIApplication.shared.requestSceneSessionActivation(nil, userActivity: nil, options: nil, errorHandler: nil)
        return true
    }

    // 他の必要なメソッドを追加
}

  1. `CarPlaySceneDelegate.swift`を追加します。

import CarPlay

class CarPlaySceneDelegate: UIResponder, CPTemplateApplicationSceneDelegate {
    func templateApplicationScene(_ templateApplicationScene: CPTemplateApplicationScene, didConnect interfaceController: CPInterfaceController) {
        let controller = CarPlayWebViewController()
        let window = UIWindow(frame: UIScreen.main.bounds)
        window.rootViewController = controller
        window.makeKeyAndVisible()
        templateApplicationScene.interfaceController = interfaceController
        templateApplicationScene.delegate = controller
    }
}

  1. `CarPlayWebViewController.swift`を追加します。

import UIKit
import WebKit

class CarPlayWebViewController: UIViewController, WKNavigationDelegate {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.navigationDelegate = self
        view.addSubview(webView)

        // レイアウト設定
        webView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            webView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            webView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            webView.topAnchor.constraint(equalTo: view.topAnchor),
            webView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])

        // ChatGPTのサイトをロード
        let url = URL(string: "https://chat.openai.com")!
        let request = URLRequest(url: url)
        webView.load(request)
    }

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // ログイン情報の保持を行うための設定
        webView.evaluateJavaScript("document.cookie") { (result, error) in
            if let cookies = result as? String {
                print("Cookies: \(cookies)")
                // 必要なら保存処理
            }
        }
    }
}

この手順でCarPlay対応のアプリを構成することができます。ターゲットに関しては、「CarPlay Audio App」という明確なテンプレートがない場合でも、CarPlayの設定を適用することで同様の機能を実現できます。

と代替案を教えてくれました！

そしてなんとか完成したので、

2. シミュレーション

完成したアプリを起動！

Googleでのログインで問題発生。
エラーメッセージ「403: disallowed_useragent」は、Googleがアクセスをブロックしているために発生しています。これは、WKWebViewやUIWebViewが使用されている場合に、Googleがそれらを「安全でないブラウザ」とみなすことが原因だそうです。

このあとも色々と手を変え品を変えやってみましたが解決しませんでした、、、シミュレーター特有の問題なのかな？

試しにAppleアカウントでログインしてみると、、、

まさかの問題なく動きました！！！

ちょっと嬉しかったです笑

まとめ

Apple Developer Programに登録という大前提で詰んだこのシリーズですが、最後なんだかんだでiOSアプリとしては動かすことができました！

今回はCarPlayアプリはできませんでしたが、今後Apple Developer Programに登録した際は必ずリベンジします！！それまでお楽しみに！！

ということで、「ChatGPTと一緒にCarPlayアプリを作りたい！！」シリーズ、一旦完結です！！


この記事が気に入ったらサポートをしてみませんか？