WWDC Quick Look 💓 By SwiftGGTeam
Explore Packages and Projects with Xcode Playgrounds

Explore Packages and Projects with Xcode Playgrounds

元の動画を見る

ハイライト

Xcode Playgrounds は常に Swift コードを素早く実験するための優れたツールですが、以前は実際のプロジェクトとの間にギャップがあり、プレイグラウンド内のプロジェクト内のコードを直接参照できませんでした。Xcode 12 はこのギャップを埋めます。


主要内容

遊び場は簡単な実験に最適です。開発者が API を試し、Swift コードの一部を検証し、実用的なチュートリアルを作成したい場合、最初に完全なサンプル アプリを構築することは望ましくありません。問題は、古い Xcode Playground が分離されたドラフトのままになりやすいことです。実際のプロジェクトのフレームワーク、パッケージの依存関係、アセット カタログ、および Core ML モデルは、直接実行できない可能性があります。

Xcode 12 の変更は、最新のビルド システムによるものです。プレイグラウンドが同じビルド機能セットに接続されると、Xcode は Swift パッケージ、プロジェクト ターゲット、およびプレイグラウンド独自のソース/リソースをビルドする方法を認識し、これらのモジュールをプレイグラウンド コードに公開します。セッションでは、まず NutritionFacts パッケージを使用して実行可能なドキュメントを表示します。ドキュメントはプレイグラウンドに書き込まれ、サンプル コードが実行され、右側にライブ ビューが表示されます。

2 番目のシナリオは日常のプロジェクトに近いものです。Fruta プロジェクトには、NutritionFacts パッケージの依存関係と UtilityViews フレームワークがあります。SmoothieLab プレイグラウンドが開かれた後、Xcode は新しい Build Active Scheme オプションを通じて現在のスキームでターゲットをビルドし、プレイグラウンドが同じワークスペースにフレームワークとパッケージをインポートできるようにします。このようにして、チームは、特にレシピ、チャート、またはその他のビジネス ロジックを実験するためのプレイグラウンドをプロジェクトに組み込むことができます。

最後のデモではリソースの問題に対処します。Xcode 12 プレイグラウンドは、ビルド ステップを必要とするアセット カタログや ML モデルなどのリソースを処理できます。講演者は、Fruta の材料アセット カタログをプレイグラウンド リソースと YOLOv3 モデルにドラッグしました。 Xcode はモデルを自動的にコンパイルして生成しました。YOLOv3スイフトクラス。次に、Vision を使用してオブジェクト検出を実行し、SwiftUI ライブ ビューを使用して検出結果を表示します。

詳細

Swift パッケージのドキュメントは直接実行できます

(00:30) Xcode 12 は、Playground を最新のビルド システムに接続します。この統合により、Xcode で Swift パッケージを構築し、パッケージ モジュールをプレイグラウンド コードに公開できるようになります。NutritionFacts のドキュメントはパッケージの Playgrounds フォルダーに配置されており、ユーザーはそれを開きますPackage.swiftその後、ドキュメント内のサンプル コードを直接実行できます。

(03:36) 同じパッケージが Fruta プロジェクトの依存関係として使用されている場合でも、パッケージ内のプレイグラウンドを開いて実行できます。(04:03) 違いは、依存関係内のファイルが他のパッケージ ファイルと同様に読み取り専用であることです。この制限は非常に重要です。この制限は、依存関係の使用法を参照して学習するのには適していますが、依存関係のコピー内のドキュメントを直接変更するのには適していません。

アクティブ スキームを構築して、プレイグラウンドでプロジェクト ターゲットを使用できるようにする

(04:35) SmoothieLab プレイグラウンドが開かれると、ビルドがトリガーされます。その理由は、Xcode 12 に Build Active Scheme オプションが追加されたためです。オンにすると、Xcode は現在のスキーム内のすべてのターゲットを自動的に構築し、これらのターゲットのモジュールを同じワークスペース内のプレイグラウンドに提供します。

この設定は、プロジェクト内のツール プレイグラウンドに直接影響します。セッション中の SmoothieLab は、UtilityViews フレームワークを使用して栄養チャートを描画し、NutritionFacts パッケージにもアクセスできます。プレイグラウンドのようなものが適切に動作するには、ターゲット モジュールがアクティブ スキーム内にあるか、アクティブ スキーム ビルド ターゲットの依存関係であるという 2 つの条件が満たされていることを確認する必要があります。

(06:27) Xcode 12 では、プレイグラウンドの完全なビルド ログもレポート ナビゲーターに配置されます。ビルドが失敗すると、どのターゲットがアクティブなスキームによってビルドされたか、どのソースとリソースがプレイグラウンド サポート モジュールによってコンパイルされたかを確認できます。これは、「このインポートがプレイグラウンドに表示されない理由」のトラブルシューティングに役立ちます。

Playground リソースのサポート アセット カタログ

(08:42) Fruta プロジェクトから成分アセット カタログをコピーし、プレイグラウンドのリソース フォルダーにドラッグする方法を示します。Xcode はアセット カタログをコンパイルし、コードは標準の UIKit エントリを使用して画像を読み込みます。

import UIKit
let image = UIImage(named: "ingredient/orange")

キーポイント:

  • UIImage(named:)アセット カタログ内のリソース名を使用すると、ファイル パスを手動で解析する必要はありません。
  • "ingredient/orange"アセット カタログ内のフォルダー名と画像名に対応します。
  • Xcode 12 は最初にアセット カタログをプレイグラウンド サポート モジュールにコンパイルするため、このコードは機能します。

Playground リソースは Core ML モデルをサポートします

(10:18) スピーカーは、YOLOv3 モデルをプレイグラウンド リソースにドラッグします。Xcode はモデルを自動的にコンパイルし、モデルに基づいて Swift クラスを生成します。プレイグラウンド コードは、プロジェクト コードと同じようにこのモデルをインスタンス化できます。

import CoreML
let yoloModel = try YOLOv3(configuration: MLModelConfiguration()).model

キーポイント:

  • import CoreMLCore ML フレームワークの紹介。
  • YOLOv3これはモデルのコンパイル後に生成される Swift クラスであり、その名前はモデルの詳細にあるモデル クラスに由来しています。
  • MLModelConfiguration()デフォルトのモデル構成を使用します。
  • .model後で Vision がラップする Core ML モデル オブジェクトを取り出します。

Vision を使用してモデルを物体検出リクエストに変換する

(10:54) モデルとサンプル画像を取得した後、セッションは Vision を使用して 2 つを接続します。VNCoreMLModelCore ML モデルのラッピング、VNCoreMLRequest画像上でオブジェクト検出を実行します。

import UIKit
import CoreML
import Vision

let ingredientNames = [
    "banana",
    "orange",
    "almond-milk",
]

let yoloModel = try YOLOv3(configuration: MLModelConfiguration()).model
let model = try VNCoreMLModel(for: yoloModel)

let request = VNCoreMLRequest(model: model) {_,_ in }

キーポイント:

  • ingredientNamesこのプレイグラウンドでテストするサンプル画像を 3 つに制限します。
  • VNCoreMLModel(for:)Core ML モデルを Vision が実行できるモデルに変換します。
  • VNCoreMLRequest再利用可能な Vision リクエストを作成します。
  • デモでは完了ハンドラーは最初は空のままであり、結果は後で取得されます。request.results読む。

サンプル画像をバッチで実行し、認識結果を整理する

(11:48) 次のコード部分は、以下を使用してサンプル画像を走査します。VNImageRequestHandlerリクエストを実行してから、VNRecognizedObjectObservationSwiftUI表示用のデータ構造に変換します。

let results = ingredientNames.compactMap { ingredient -> ObjectDetectionResult? in

    guard let image = UIImage(named: "ingredient/\(ingredient)") else { return nil }

    let handler = VNImageRequestHandler(cgImage: image.cgImage!)
    try? handler.perform([request])
    let observations = request.results as! [VNRecognizedObjectObservation]

    let detectedObjects = observations.enumerated().map { (index, observation) -> RecognizedObject in

        // Select only the label with the highest confidence.
        let topLabelObservation = observation.labels[0]
        let objectBounds = VNImageRectForNormalizedRect(observation.boundingBox, Int(image.size.width), Int(image.size.height))

        return RecognizedObject(id: index, label: topLabelObservation.identifier, confidence: Double(topLabelObservation.confidence), boundingBox: objectBounds)
    }

    return ObjectDetectionResult(name: ingredient, image: image, id: ingredient, objects: detectedObjects)
}

results

キーポイント:

  • compactMap画像の読み込みに失敗した場合に戻ることができますnil、成功したサンプルは引き続き結果配列に入ります。
  • VNImageRequestHandler(cgImage:)現在のイメージを使用して Vision リクエスト エグゼキュータを作成します。
  • handler.perform([request])画像上で物体検出を実行します。
  • request.resultsに変換されます[VNRecognizedObjectObservation]、各観測値は検出オブジェクトを表します。
  • observation.labels[0]最大限の自信を持ってラベルを取得してください。
  • VNImageRectForNormalizedRectVision の正規化されたバウンディング ボックスを画像座標に変換します。

ライブビューを使用してテスト結果を直接表示します

(12:33) 最後に、プレイグラウンドは SwiftUI ビジュアライザーをライブビューに設定します。右側の結果領域には、画像、赤い境界ボックス、およびラベルの信頼度が表示されます。デモンストレーションでは、バナナが 100% の信頼度で識別され、オレンジ 3 個も正しくフレーム化され、アーモンド ミルクが瓶として識別されました。

import PlaygroundSupport

PlaygroundPage.current.setLiveView(
    RecognizedObjectVisualizer(withResults: results)
        .frame(width: 500, height: 800)
)

キーポイント:

  • PlaygroundSupport供給PlaygroundPage
  • setLiveViewSwiftUI ビューをプレイグラウンドのライブビュー領域に配置します。
  • RecognizedObjectVisualizer(withResults:)前の手順でコンパイルしたテスト結果を使用します。
  • .frame(width: 500, height: 800)視覚化結果の表示サイズを修正しました。

重要ポイント

  • やるべきこと: Swift パッケージを追加するPlaygroundsフォルダを開き、実行可能チュートリアルを配置します。実行する価値がある理由: Xcode 12 はパッケージでプレイグラウンドを実行できます。ドキュメントを読んだ人は、すぐにサンプル コードを実行して、実際の結果を確認できます。開始方法: 最も一般的に使用される 2 ~ 3 個の API 呼び出しをプレイグラウンド ページとして記述し、例がパッケージ自体のパブリック インターフェイスのみに依存するようにします。

  • 作業内容: ビジネス ルールや設計パラメーターをデバッグするために、アプリ プロジェクトにツール プレイグラウンドを作成します。実行する価値がある理由: Build Active Scheme は、同じワークスペースのフレームワークとパッケージの依存関係をプレイグラウンドに公開できます。開始方法: 新規Playgroundsフォルダーを開き、プレイグラウンドを作成し、インスペクターを開いて「アクティブ スキームの構築」がオンになっていることを確認してから、フレームワークをプロジェクトにインポートします。

  • 対処方法: プレイグラウンドを使用して、リソースの名前とアセット カタログの読み込みパスをすばやく確認します。実行する価値がある理由: Xcode 12 はプレイグラウンド リソースをコンパイルします。UIImage(named:)アセット カタログ内のイメージを予期した名前でロードできるかどうかを直接確認できます。開始方法: ターゲット アセット カタログをプレイグラウンド リソースにドラッグし、最初に 1 行を書き込みますUIImage(named:)をクリックし、クイック ルックを使用して画像を調べます。

  • やるべきこと: Core ML または Vision 機能用のオフライン サンプル プレイグラウンドを作成します。実行する価値がある理由: セッションがそれを示しています.mlmodel、アセット カタログ、Vision リクエスト、SwiftUI ライブ ビューを同じプレイグラウンドに配置して、モデルの効果を検証します。開始方法: 少数の固定テスト画像を用意し、モデル リソースをドラッグして使用します。VNCoreMLRequestテストを実行し、ライブ ビューを使用して結果を表示します。

関連セッション

コメント

GitHub Issues · utterances