Xcode PlaygroundにおけるPackageとProject

Xcode PlaygroundにおけるPackageとProject

Xcode Playgroundがあれば、デベロッパはSwiftとフレームワークAPIをより調査しやすくなり、迅速な実験のためのscratchpadとしても使用できます。Xcode PlaygroundにおけるXcodeのモダンなビルドシステムの活用、リソースへの改善されたサポートの提供、プロジェクト、フレームワーク、Swiftパッケージの統合など、ドキュメントや開発ワークフローをどのように改善できるかをお伝えします。

リソース
- Fruta: Building a Feature-Rich App with SwiftUI
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
- Xcode Playgroundsでプロトタイプを作成
WWDC20
- Swiftパッケージ：リソースとローカリゼーション
WWDC19
- Create MLでオブジェクト検出モデルをトレーニングする
ダウンロード

こんにちは WWDCへようこそ “Xcode Playgroundsで PackagesとProjectsを深める” 本セッションへようこそお越しくださいました私はクリス･マイルズ XcodeチームのエンジニアマネージャですデベロッパはXcode Playgroundsを使って APIとフレームワークの新しいアイディアをいろいろと試してみたりすることが大好きです今日はXcode 12が最適化や改善を通じて Playgroudsがシームレスに Swiftパッケージおよびフレームワークと連動可能になったことをお話しします Xcode 12ではPlaygroudsは最新の構築システムに完全に統合そして連携されていますこの統合で多くの改善がなされパッケージやプロジェクトやリソースとうまく実行できるように強化されていますまずSwiftパッケージでこのPlaygroudsがいかに相性よく動作し実行可能なコードを含むパッケージドキュメントを作るのにすばらしい選択肢となりえるかお見せいたしますそしてフレームワークやパッケージ依存性などのプロジェクトターゲットの改善されたPlaygroudsのインポート機能をデモでお見せしますそしてプレゼンテーションの最後に構築のサポートが必要なリソースとの連携例えばMLモデルやアセットカタログなどを Playgroudsで実行するデモをお見せしますでは始めますまずXcode PlaygroudsとSwiftパッケージの相性の良さから見ていきましょうここでNutritionFactsと呼ばれる Swiftパッケージをダウンロードして準備します “package.swift”をダブルクリックし Xcodeで開きます NutritionFactsは主な食品について正確な栄養成分表を提供してくれますレシピや食品アプリケーションの中ではとても使い勝手のよいパッケージです NutritionFactsのすばらしいところは作成者が盛り込んだ豊富なドキュメンテーションには APIの使い方も説明されておりさらにプレイグラウンドとして書かれているのです Playgroudsはドキュメンテーションと非常に相性が良く― シームレスにXcode 12のパッケージと連携していますそれでは早速見てみましょう
ナビゲーターに入り Playgroudsフォルダを開きますそしてNutritionFacts プレイグラウンドを選びますここではパッケージの記述が表示されその次に詳しいAPIの使い方がドキュメンテーションで示されておりそしてスニペットコードが例示されますプレイグラウンドなのでそのコードを実行できますではツールバーの“実行”を押してやってみましょうプレイグラウンドが実行され右側ではライブビューが見られますこのビューはパッケージが提供していますお馴染みのフォーマットで栄養成分が表示されています
エディターでは識別子ごとのアイテムを検索し該当する栄養成分を読み出しますプレイグラウンドは右側の結果バーにステートメントの結果を表示するのでコードが何なのかも理解できます
このようにXcode 12内でPlaygroudsはパッケージとシームレスに連携しますこれが可能になったのは最新の構築システムと Playgroudsが統合されたからですこれによりプレイグラウンドコードにパッケージがインポートできるようになりましたドキュメンテーションを書かなければならない時や Swiftパッケージのチュートリアルを作成しなくてはならない時にはプレイグラウンドをお使いくださいユーザーが例コードを実行しプレイグラウンドでライブで結果を見られるという利点がありますでは次にXcode 12のおかげでいかに簡単にPlaygroudsがプロジェクトからのフレームワークやパッケージ依存を使うかをお見せします
ここではFrutaというプロジェクトを使います Xcode内で開けてシミュレーターでプロジェクトを実行しましょう Frutaはスムージーのブラウジングと注文のできるiOSとMacのアプリケーションです Apple Payでレシピの購入もできご自宅で自分だけのスムージーを作ることもできますではシミュレーターでアプリケーションを見てみましょう今オーダーできるスムージーのリストが出てきますもし１つを選ぶと Apple Payで購入するオプションが出てきますスクロールするとスムージーの成分が出てきます１つ選んで詳しく写真を見てみましょう “I”ボタンをタップして成分の栄養情報を見てみましょうここでNutritionFactsパッケージから表示されるビューであることにお気づきかもしれませんこのプロジェクトはパッケージに依存性があるからです左側のナビゲーターでもご覧になれます
プロジェクト依存性があるもののパッケージ内のどのプレイグラウンドでも使うことができますではパッケージを開封して先ほど開封した NutritionFactsプレイグラウンドを開きましょうここではコンテンツは同じですそして前と同様プレイグラウンドを実行して結果を見ることができます
なのでパッケージの中のプレイグラウンドは先ほどやったように直接開封しようとプロジェクトの一部でパッケージ依存であろうといずれでも使うことができますパッケージ依存性のあるすべてのファイルと同様プレイグラウンドはリードオンリーですこのプロジェクトにはUtility Viewsと呼ばれるフレームワークも入っていますプロジェクトエディターを見ましょうここではUtility Viewのフレームワークターゲットが見られますフレームワークが同じワークスペースにある限りそれをPlaygroudsの中で使うことが以前と比べて簡単になっています１つの例をお見せしましょうナビゲーターでPlaygroudsフォルダを開封しますそしてSmoothieLabと呼ばれるプレイグラウンドを見ることにしますではSmoothieLabを開けましょう上部にビルドアクティビティがあることに注目してくださいこれはBuild Active Schemeと呼ばれるXcode 12の新しいプレイグラウンドオプションですではインスペクターを開いて見てみましょうここにプレイグラウンドの設定があります設定の下部に新規オプションとして追加されました “Build Active Scheme”を有効にすると Xcodeにその時点で選択されているスキームの中で自動ですべてのターゲットを構築しどのモジュールでもプレイグラウンドへインポート可能にするよう指示しますこれがプレイグラウンドを開封した時に Xcodeがその時点で選択されているスキームのターゲットをすべて構築しプレイグラウンドが Utility Viewsフレームワークと NutritionFactsパッケージをインポートできる理由なのです SmoothieLabは新しいスムージー作りのためのユーティリティプレイグラウンドなのですここで原材料を選ぶことができまたさまざまな量でそれらを組み合わせ栄養価を精査することができますカロリー成分分けチャートも作成できますがそれにはUtility Viewsフレームワークのチャートビューを使いますではこのスムージーのカロリー成分を見るためプレイグラウンドを実行しましょう
ライブビューではカロリー分布チャートが見れますここで脂肪分は25％未満に抑えたいものですではチャートをタップして脂肪の割合を見てみましょうこの場合は33％ですピーナッツバターの量を減らせばいいかもしれません後にしましょう見ての通りプレイグラウンドはとても使いやすいツールで栄養バランスのとれたスムージーを作る際素材の組み合わせをしやすくしてくれますまだ味がどれほど良いのかを計算するアルゴリズムは設計できていませんが味見は大好きなので良いことにしましょう Playgroudsはフレームワークやパッケージのようなプロジェクトターゲットとシームレスに運用できるのです Xcodeはこれらのターゲット構築をしてくれるのでプレイグラウンドコードへインポートができるのです忘れずに“Buid Active Scheme”を有効にしてくださいしかもうれしいことにデフォルトでこのオプションは有効化されていますまたインポートしたいモジュールはアクティブスキームの一部であるかそのスキームが構築した別のターゲットに依存性を持っているかのいずれかにしてください Xcode 12の強化された点はまだありますそれはプレイグラウンドのためのフル構築ログが使えるようになったことです SmoothieLabの構築ログを見てみましょうレポートナビゲーターへスイッチします上部にSmoothieLabプレイグラウンドの構築ログがあるでしょうではそれを選んで構築ログを開けてみましょうここにはアクティブスキームの一部として構築されたターゲットの構築の詳細とサポートするために構築されたモジュールの詳細を見ることができプレイグラウンド内でコンパイルされたソースとリソースも含まれています構築ログは構築の問題がある時の診断には欠かせませんプレイグラウンドでも使えるということはとてもうれしいことです更にこのPlaygroudsとXcodeのモダンビルドシステムの統合がもたらした恩恵はビルドシステムにサポートされている全てのリソースタイプが Playgroudsでサポートされている点ですそれではプレイグラウンドの中でいくつかのリソースを使った例をお見せしましょうこれらはビルドシステムサポートが必要です
Frutaプロジェクトへ戻りフィーチャーを追加したいと思いますユーザーが自分のiPhoneのカメラを好みの果物に向けると Frutaはまるで魔法のようにその果物に合ったスムージーを提案しますこれをするためには機械学習を使い物体検出と画像分類を実行したいと思いますここでは多数の分類子が使えますのでサンプル画像が数枚あるこれを使ってタスクにフィットするか見てみようと思いますがそれをするためにXcodeにあるプレイグラウンドを使おうと思いますまず果物の画像を数枚選びテストしてみますがたまたまこのプロジェクトには使える画像があるようですではここでシミュレーターにスイッチしナビゲートして戻りましょうこのオレンジの画像は見ましたよね？ここでそれを無視するとそれ以外の成分の画像が出てきますではプロジェクトの中でこれらを見つけましょうシミュレーターはここでは必要ないので隠して共有フォルダを拡大しましょうそしてアセットカタログを見てみましょうアプリケーションのアイコンと色が見えますし成分フォルダの中ではスムージーに入れる材料を表示した画像が見えますこれは我々の機械学習モデルをテストする良いサンプルだと思いますではデスクトップへドラッグしてコピーを作りましょう
もうプロジェクトを開いておく必要はないので閉じましょうその代わりに“File”と“New Playground”で新しいプレイグラウンドを作りましょう
iOSのブランクプレイグラウンドを使います
これをML Frutaと名前をつけてデスクトップに格納しましょう
ここでウインドウのサイズを大きくして作業スペースを作りますアセットカタログをドラッグしてリソースフォルダへ持っていきましょうここでPlaygroudがアセットカタログファイルをコンパイルしその結果コードからリソースへアクセスができるようになったことに着目してください UIImage(named を使ってもできます
アセットカタログ内のフォルダ名と画像の名前を指定してくださいではここでプレイグラウンドを実行して結果を見ましょう結果の欄には画像の幅が表示されており QuickLookで画像を見る時はプレビューを見ます今このアセットカタログから画像へのアクセスがあるということですここでは機械学習モデルだけが必要ですではずっとブラウジングをしている Safariへスイッチします SafariはApple Developerウエブサイトの機械学習セクションでブラウジングをしています CoreMLModelのページの中では数多くの画像分類モデルや物体検出モデルを見ることができますここではYOLOv3モデルを試してみます１つのシーン内で複数の物体を検出でき各々の物体を分類できますこれは果物の入ったボウルにカメラを向けシーン内にある全ての果物を特定させるのに最適だと思いますでは“View models”をクリックするとトップに最高精度モデルをダウンロードできます時間が限られているため省略しますので Safariを最小化します
デスクトップのモデルをドラッグしてプレイグラウンドのリソースセクションへと持っていきます Xcodeが自動でモデルをコンパイルしてくれますので私たちはその間にモデルを選んでエディターの詳細を見てみましょうトップの近くにあるモデルクラスが重要な詳細情報となりますこれはクラスの名前を表示してくれて私たちのSwiftコードで使うビルドシステムにより自動で生成されますではそれを使ってみましょうプレイグラウンドへ戻って CoreMLをインポートするためにコードを追加しましょうそれから可変yoloModelを呼び出しますそして自動で生成されたクラスYOLOv3を使用してデフォルトコンフィギュレーションで新しいインスタンスを生成しますそれからモデルプロパティを呼び出しますではプレイグラウンドを実行し結果を見ましょう
プレビューが見れるモデル記述へ戻りインプットアウトプットやその他プロパティの詳細を見ます機械学習モデルとテスト用画像が手元にあるのであとはこれを組み合わせるだけです Visionフレームワークを使うと簡単ですこのコードを入れ替えその代わりに Visionフレームワークをインポートします３つの成分でアレイを定義しテストを開始しますそうすると選んだyoloModelが使えるようになりその結果VisionフレームワークのCoreMLModelのインスタンスを作ることができますそしてようやくCore MLリクエストを作成することができますこのCoreMLRequestを使い画像にする機械学習リクエストを作成することができますではリクエストの結果を可視化し画像をお見せしましょうそして画像の中で検出された物体の周りに四角の箱を描きましょう過去使ったコードを用意しました QuickLookでざっとお見せしましょうこれは私たちが行った物体検出の結果を保持するストラクト数個と私たちの画像を表示するために使う SwiftUIビューを定義し画像の中で検出した物体を四角の箱を描いて囲みますこのコードについての詳細はセッションのウェブサイトで見られるようにしますサポートコードをプレイグラウンドのソースセクションへドラッグしたら Xcodeがコンパイルしてくれますのでコードが使えるようになります
成分の名前を反復しアセットカタログからその各々に対し画像を呼び出しますそしてその画像で画像リクエストハンドラーを作りますこれを使い機械学習リクエストを実行することができますそこからは結果をパスするだけです各結果は RecognizedObjectObservation です各観察例を数値化し最も信頼度の高い該当するラベルと画像内の囲みボックスのついた物体とを呼び出しそれらを RecognizedObject として返します最後に各画像に対し結果を ObjectDetectionResult として返しますそして下の部分に表示される結果を見てみましょう Xcodeは３枚の画像を反復しておりその結果を見ることができます確かに各画像の結果が出ているのでそれを可視化してみましょうこれはプレイグラウンドのLiveViewを RecognizedObjectVisualizer に設定しそして結果をパスしますさて実行を継続しましょう
右側には物体検出の結果が見れます最初にパスした画像はバナナですオレンジ色はバナナが100％の正確さで検出されたことを示していますかなり良い結果ですね次の画像は３個のオレンジですが３つとも高い信頼度をもって検出されていますうまく実行できたということです
３番目の画像はアーモンドミルク入りのボトルです機械学習モデルは高い信頼度でボトルを検出したことがわかりますがそれがミルクかアーモンドミルクかのレベルまでの特定した分類はできませんでしたこのモデルはボトルを検出する学習はしましたがそれがミルクかアーモンドミルクかを検出し特定する学習はしていないからです学習をしたものに対してはとても良いパフォーマンスをしています私たちのアプリケーションに使えるでしょう次のステップではモデルをさらに学習させ― 栄養成分のタイプを検出できるようにします MLモデルの学習についての情報は WWDC 2019の“Training Object Detection Models in Create ML”をご覧ください
Playgroudｓ内でビルドシステムサポートが必要なリソースの使用例でしたではプレゼンテーションをまとめましょう Xcode 12では最新のビルドシステムと完全に統合連携されていますそして“Build Active Scheme”を有効にすると選択されたスキーム内の全ターゲットは自動で構築され同じワークスペースにあるプレイグラウンドへインポート可能になりますどんなフレームワークやSwiftパッケージでも関係ありません
ビルドシステムが認識できる全リソースタイプは Playgroudsにて使えるようになっています例えば私がデモをお見せしたアセットカタログやMLモデルがその例です
フルプレイグラウンドビルドログはレポートナビゲーターでご活用になれますプレイグラウンドのビルドの時に起こる問題の診断にとても便利です
Playgroudsはパッケージやフレームワークのドキュメント化をする際に役に立ちますそしてさらにプレイグラウンドはコーディングしたりユーティリティコードを書く時にも便利ですプレイグラウンドが皆さんにどう役立っているかぜひともお聞かせくださいありがとうございました

8:53 - Playgrounds and resources Demo: Part 1

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

10:18 - Playgrounds and resources Demo: Part 2

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

10:54 - Playgrounds and resources Demo: Part 3

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 }

11:24 - Recognized Object Visualizer

import Foundation
import SwiftUI
import UIKit

// MARK: Model

/// The result of object detection on an image.
public struct ObjectDetectionResult : Identifiable {
    public var name: String
    public var image: UIImage
    public var id: String
    public var objects: [RecognizedObject]

    public init(name: String, image: UIImage, id: String, objects: [RecognizedObject]) {
        self.id = id
        self.name = name
        self.image = image
        self.objects = objects
    }
}

/// An object recognized by an image classifier.
public struct RecognizedObject : Identifiable {
    public var id: Int
    public var label: String
    public var confidence: Double
    public var boundingBox: CGRect

    public init(id: Int, label: String, confidence: Double, boundingBox: CGRect) {
        self.id = id
        self.label = label
        self.confidence = confidence
        self.boundingBox = boundingBox
    }
}

// MARK: Views

public struct RecognizedObjectVisualizer : View {
    public var results: [ObjectDetectionResult]
    public var imageSize: CGFloat = 400

    public init(withResults results: [ObjectDetectionResult]) {
        self.results = results
    }

    public var body: some View {
        List(results) { result in
            Spacer()

            VStack(alignment: .center) {
                RecognizedObjectsView(
                    image: result.image,
                    objects: result.objects
                )
                .frame(width: imageSize, height: imageSize)

                Text(result.name.capitalized)

                Spacer(minLength: 20)
            }

            Spacer()
        }
    }
}

struct RecognizedObjectsView : View {
    var image: UIImage
    var objects: [RecognizedObject]

    var body: some View {
        GeometryReader { geometry in
            Image(uiImage: image)
                .resizable()
                .overlay(
                    ZStack {
                        ForEach(objects) { object in
                            Rectangle()
                                .stroke(Color.red)
                                .shadow(radius: 2.0)
                                .frame(
                                    width: object.boundingBox.width * geometry.size.width / image.size.width,
                                    height: object.boundingBox.height * geometry.size.height / image.size.height
                                )
                                .position(
                                    x: (object.boundingBox.origin.x + object.boundingBox.size.width / 2.0) * geometry.size.width / image.size.width,
                                    y: geometry.size.height - (object.boundingBox.origin.y + object.boundingBox.size.height / 2.0) * geometry.size.height / image.size.height
                                )
                                .overlay(
                                    Text("\(object.label.capitalized) (\(String(format: "%0.0f", object.confidence * 100.0))%)")
                                        .foregroundColor(Color.red)
                                        .position(
                                            x: (object.boundingBox.origin.x + object.boundingBox.size.width / 2.0) * geometry.size.width / image.size.width,
                                            y: geometry.size.height - (object.boundingBox.origin.y - 20.0) * geometry.size.height / image.size.height
                                        )
                                )
                        }
                    }
                )
        }
    }
}

11:48 - Playgrounds and resources Demo: Part 4

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

12:33 - Playgrounds and resources Demo: Part 5

import PlaygroundSupport

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

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC23

WWDC20

WWDC19