Xcode Playgroundsでプロトタイプを作成

Xcode Playgroundsでプロトタイプを作成

Xcode Playgroundsで新しいコードのプロトタイプを作成することにより、機能開発を加速し、変更を検証するためにプロジェクトをやり直す必要がなくなります。プロジェクトやパッケージでプレイグラウンドを使うことで、様々なシナリオでコードを試したり、複雑な構造やユーザインターフェイス要素を含む返された値の詳細を見たりすることができます。このため、プロジェクトに組み込む前に、機能改善のイテレーションを行えます。

関連する章
- 3:00 - Exploring the data model and inspecting UI snapshots
- 14:26 - Becoming familiar with a new package
- 18:07 - Using the Live View
- 22:03 - Running the updated project
リソース
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC20
- Xcode PlaygroundにおけるPackageとProject
ダウンロード

♪ ♪
こんにちは Xcode Playgroundsチームのエンジニア Dariuszです今日はXcode Playgroundsの機能向上についてご紹介しますプロジェクトで新機能のプロトタイプを作成しやすくなりました Xcode Playgroundsを利用してワークフローを改善できるシナリオが数多くありますまず第一に新機能のプロトタイプを作成したりコードに小さな変更を試したりする際にプロジェクトの再構築や再起動を省略できますショッピングアプリで注文概要を生成するロジックなどこれまで非常に困難だったコードの実行もずっと簡単になりますもちろんこのようなコードはテストで検証可能でまた検証されるべきですしかし Playgroundsは開発の素晴らしい出発点になるでしょうプロジェクトに新しい依存関係を導入する前にコードを試すのに最適な環境です
Xcode Playgroundsがプロジェクトでどのように役立っているか説明しましょう私は野生動物の写真を扱う小さなアプリの開発に取り組んでいます現時点ではアプリはすでに見つけて写真を撮った動物種を記録するのに役立っていますさてこのアプリに野生動物の写真撮影のかなり重要な一面を手伝ってもらいたいと思っていますそれは実際にまず動物を見つけることです
チェックリスト表示に新しいタブを導入したいと思います
すでに表示の実装を始めていますがこのユーザーインターフェイスにはとても満足していますそれぞれの鳥にはチェックボックスがあり進捗状況をトラッキングできますしかし 2,000羽以上の鳥がリストにあるので多分あまり進歩しているとは感じられないでしょうこのリストをもう少し絞り込めたら最高でしょう
そのためにはカスタムChecklistViewで birdToShowの算出プロパティを調整する必要があります現時点では単に北米用に構成された BirdProviderタイプを作成するだけですそして北米大陸で見られるすべての鳥類を返しますプロジェクトの頻繁な再構築と再起動を避けるため ChecklistViewに移動して変更を確認しますこのコードを Xcode Playgroundで調整してみます
まずプロジェクトに新しいPlaygroundを追加します
これはiOSアプリなので iOSテンプレートをそのまま使いますフィルタバーに「playground」と入力して空白のPlaygroundを選択します
この場合多分このPlaygroundを後から削除することになるでしょういくつか試した後にデフォルトの「MyPlayground」名を残すためです
Playgroundのデフォルトのコンテンツを削除します
さらに速いイテレーションのためにメニューで「自動実行」に切り替えます下部バーの実行ボタンを長押しすると表示されます
これにより Playgroundが自動的に実行され変更を中止するたびにコード全体が実行されます注意事項としてプロジェクトに追加された Playgroundには2つの設定がありますデフォルトで有効になっているBuild Active SchemeとImport App Typesです各Playgroundの実行前にアクティブなスキームが確実にビルドされアプリのターゲットモジュールが自動的にインポートされることを確認しますこれによりプロジェクト内で定義されたタイプの作業がはるかに簡単になりますインスペクタを閉じて Playgroundにもう少し余裕を与えることができます
BirdProviderインスタンスを宣言して始めましょう ChecklistViewのbirdsToShow プロパティで見たのと同様です
エディタの右側にある結果サイドバーにこの宣言によりPlayground結果が生成されたことが表示されますインライン結果トグルで詳細を確認できます
インライン結果にはこのBirdProvider インスタンスの詳細が表示されそこに鳥の配列と該当地域の 2つのプロパティも表示されます Xcode 15では各行にタイプ情報ラベルも含まれタイプの簡単な概要を伝えます各行のツールチップで詳細を見ることができます
例えばツールチップでは次のように示されています BirdProviderタイプはアプリモジュールからのもので地域列挙型の値はその構造体の中で定義されています配列の行を展開して鳥の詳細を見てみましょう
Xcode 15ではインライン結果表示の操作を開始すると結果を生成したソースコードが強調表示されますこの場合 birdProvider定数に割り当てられた値が表示されますこれにより表示された値が非常に理解しやすくなります
配列要素を詳しく見てみましょう
地域と鳥の配列のプロパティに関する素晴らしい概要を見ましたしかしデフォルトでは各鳥を表す行は配列のインデックスしか表示されませんこれはカスタムBirdタイプに説明が定義されていないためです
これを改善するには Birdタイプを CustomStringConvertibleプロトコルに適合させることです拡張機能をPlaygroundにまたはそのSourcesディレクトリに追加しますこのオプションは両方ともPlaygroundのスコープ内のBirdタイプにのみ影響しますデバッガなどに依存している他の場所では素晴らしい新しい説明は得られないでしょうこのため Birdタイプを定義するファイルに拡張子を追加します
新しい説明定義で各行には鳥の一般名と学名が表示されるはずです Playgroundに戻って新しい説明が実際に動作しているのを見てみましょう
Playground実行の自動モードでは Playgroundは再度開くと自動的に再実行されます鳥の配列行を再度展開して説明を確認してみましょう
これはずっと良くなりましたこれで行を展開しなくても行が何を表しているかが明確になりましたしかし Birdタイプの他のプロパティを見てみましょう
すでに鳥を見つけてその何羽かを写真に撮りましたがその中の一部はすでに写真のプロパティを持っていることがわかりますこのニシツノメドリのように
この行をクリックすると写真が表示されます新しい分割表示ベースのユーザーインターフェイスでプレビューと一緒にオブジェクトの構造を見ることができます
デフォルトではカスタムBirdタイプの行をクリックしてもこのようなプレビューはありません私はすべての種の名前に詳しいわけではないのでここで写真がすぐに見れると助かりますこれを可能にするには CustomPlaygroundDisplayConvertible プロトコルを使いますプロトコルの名前が示すようにこの適合性は Playgroundの表現にのみ影響しますそこで今回は Playgroundのソースディレクトリに拡張子を追加します
Birdタイプにアクセスするためにアプリモジュールをインポートします playgroundDescriptionとして写真のプロパティを返す簡単な拡張子を追加します
return文で明示的に写真をAnyをキャストしていることにご注意くださいこれがないとコンパイラは値がオプションであるという重要な情報の一部を失うことを警告します Xcode Playgroundはオプションを扱うのでこの場合は問題ありませんオブジェクトのカスタム説明を作成するだけで playgroundDescriptionプロパティで nilを返しませんもう一度Playgroundに戻って新しい説明を確認してみましょう
Xcode 15では playgroundDescriptionは CustomPlaygroundDisplayConvertibleに適合するタイプによって返されオブジェクトの構造に沿って分割表示で示されます
さてすでに写真がある鳥は行を展開しなくてもクリックするとすぐに表示されますこれによりこのカスタムタイプの大規模なコレクションの扱いがより簡単になります
しかし今日はまだ写真のない鳥に焦点を当てますこのインライン結果を閉じてすでに写真があるすべての鳥を除外しましょう
この2つのサイドバーの注釈が少し違って見えますそれは新しい行に複数の式があるためです新しいコントロールをクリックすると各表現に見慣れた概要が表示されます
インライン結果トグルにカーソルを乗せるとソースコードの範囲が強調表示されます
これにより配列はBirdsToFind定数に割り当てられた結果であることが明らかです trueは最新の値でフィルター関数に渡されるクロージャによって生成されました
結果のサイドバーにはすべての鳥の数が表示されまだ撮影していないのは 1,800羽を超えていますがこれはかなり大きな数ですこれは最終的な目標かもしれませんが例えばフクロウなどより小さなグループに焦点を当てることで数をより低くしたいです 6月はフクロウ観察に最適な月ですでもその話題は別のセッションにしましょう他の科の鳥を除外しましょう
現在配列には5つの要素のみですがこれなら取り組めそうです鳥のこの小さなグループでカスタムChecklistViewを試してみましょうそのために ChecklistViewインスタンスを作成しますそして鳥を一羽ずつ追加します
ChecklistViewのインライン結果を開いてみましょう
UIViewのサブクラスとしてスナップ写真と共にプロパティも表示され値ヒストリーモードに切り替えることができますまた新しい分割表示ベースのユーザーインターフェイスを使用しています
これで各ループ反復でChecklistViewがどのように見えるか確認できます
実際これは表示の問題点を見つけるのに役立ちました 1羽の鳥に対しヘッダーに「birds」と誤って書かれています文字列を調整することで修正できるはずです新しい文字列カタログで定義されています
最初の行は ChecklistViewのヘッダーで使われている行のようですコンテキストメニューを出して「複数形で異なる」を選択します
そうすると影響を受ける行の状態が「再調査が必要」に変わりますこの文字列の単数形を調整します
新しい文字列カタログについて詳細は「Discover String Catalogs」のセッションをご覧ください Playgroundに戻ってチェックリストがこの変更でどのようになっているか見てみましょう
ヘッダーは各ループ反復で正しく見えますこれでこのインライン結果を閉じることができます
ChecklistViewを使う準備ができました早速使用したコードを持ってきます鳥のリストを絞り込みプロジェクトに持ってきます
この3行をChecklistViewの birdsToShowプロパティにコピーします
また新しくはるかに小さな鳥の配列で return文も追加します
プロジェクトを再実行する前にもう一つの機能のプロトタイプを作りたいと思いますカスタムチェックリスト表示の各行に開示インジケータがあることがわかりますリストの行を選択すると簡単な地図表示が開きますまだそれほど便利ではありませんがデータを取り出したいと思います選択した鳥の最新の目撃情報についてそれを地図上に表示しますそのためには ChecklistViewの sightingsToShow(for bird:)関数を調整する必要がありますそのためにプロジェクトに依存関係を1つ追加しました BirdSightingsパッケージを使うと簡単にデータを取り出せます人々が目撃情報を報告する市民科学サイトからです
そのパッケージはまだ使ったことがないのでそのAPIはまだよく知りません幸いなことにパッケージにはドキュメントが含まれていて Playgroundの形式でいくつかの例を示しています
これはパッケージのクライアントが提供されたAPIを試すことができる優れた方法です fetchSightings関数に 2つの引数を指定する必要があるようです探す鳥のコードと探す場所のコードですこのPlaygroundを実行すると期待される結果について
詳しく知ることができます
Playgroundに戻って使ってみましょう
ナビゲータを閉じるとエディタ領域にさらに余裕ができます
関数を呼び出す前に 2つのimport文を追加する必要があります座標を扱えるように CoreLocation フレームワークをインポートしそしてそのAPIを使用するBirdSighting フレームワークをインポートします
関数の引数についてはリストの最初の鳥から始めれば簡単に開始できます
コミミズクを探すことになりそうですここでは強制的アンラップを使用していることにご注意くださいエラー処理については Playgroundの環境ではそれほど心配する必要はありませんがコードをプロジェクトに取り込む時は心に留めておくことが重要です
場所についてはおそらく現在地を使うことが多いでしょうしかし具体的な座標を提供する技量は素晴らしいことでコードのテストとドライブ旅行の計画を立てることです Apple Parkの周りに何があるか見てみましょう
ネットワーク通話を導入する前に手動モードに切り替えて不必要な呼び出しを確実に避けるために Playgroundの実行を切り替えますこのようなリクエストは時間がかかるため新しい機能についてはできるだけ早く繰り返し処理したいと考えていますそのためにはもう一度メニューを表示し下部のバーにある「手動で実行」を選択します
これでコードの実行部分を完全にコントロールできるようになりましたフェッチコードを追加してみましょう
ソースエディタのガターのコントロールはこの2行を実行しても上ですでに実行したすべての行は再実行されないことを示しています新しい行を実行してデータを取得できるか見てみましょう
幸運にも目撃情報があります最初のものを見てみましょう最新のものです
コミミズクが最近目撃されたようです Changmen Cliffs保護区ですこの地域のバードウォッチングのホットスポットにまだ詳しくないので SightingMapViewで目撃情報のデータを確認できるのは素晴らしいことです取り出した目撃情報データを使って初期化しましょう
地図表示のような複雑なユーザーインターフェイス要素の場合 Playgroundのライブ表示を使い大きくて完全に相互作用のプレビューを見ることができますこれを使うにはまずPlaygroundSupport フレームワークをインポートします
これでライブ表示を設定して Playgroundを実行する準備ができました
Playgroundのすでに実行されている部分をファイルの先頭に import文を追加することで変更しましたソースエディタのガターのコントロールはファイル全体を再実行する必要があることを教えてくれます前回の実行結果は失われますがこの場合それは問題ではありませんそれでは Playgroundを実行してみます
Apple Park周辺には島はないはずですライブ表示は完全に相互作用なので少しズームアウトできます iPhoneシミュレータのように現在地を確認できます
どうも東に行き過ぎたようですエディタオプションでライブ表示を閉じましょうそしてどこで問題が発生したのか見てみましょう
SightingMapViewは mostRecentSighting定数で初期化されたのでその値を確認してみましょうインライン結果を開く代わりに値をざっと見ることができますサイドバーの目のアイコンをクリックします
Xcode 15では Playgroundの結果を改善しました MapKitの一部とCoreLocationタイプです CLLocationCoordinate2Dのプレビューが Playgroundで表示可能になりましたそれでは locationプロパティを見てみましょう
これは同じ場所を指しているように見えますが SightingMapViewが原因ではないようです BirdSightingsパッケージから間違った場所を取得しましたしたがってパッケージの問題が原因である可能性がありますあるいは最初から間違った場所を渡したのかもしれません後者を検証してみましょう
（音声なし）
ここもApple Parkの近くではないようです東に行き過ぎたのでこれは単に西と東を混ぜただけの問題かもしれません経度の前にマイナス記号を追加してこれを修正してみましょうそして Playgroundを再実行しましょう
（音声なし）
さてここは間違いなくApple Parkです Playgroundの残りの部分を実行しましょう更新された場所でエディタオプションのライブ表示を再度開きます
（音声なし）
この方が良いですね今では Coyote Hillsが新種を撮影するのに最高の場所だとわかりました早速フェッチコードをChecklistViewに取り込んでみましょう
この3行を sightingsToShow関数にコピーします
（音声なし）
ここでは常にハードコードされた Apple Parkの場所を使う代わりにこれを lastCurrentLocationに置き換えます CLLocationManagerから取得したものです
また新しいmostRecentSightingの return文も追加します
いよいよ変更を加えてプロジェクトを実行します
（音声なし）
鳥の小さなグループに焦点を絞ったことでチェックリストがより現実的に見えますでは行をクリックすると何が起こるのか見てみましょう
素晴らしいですアプリは選択した鳥の最新の目撃情報を表示できるようになりましたもちろん改善の余地はまだたくさんあります例えば進捗状況インジケータを表示する必要があります目撃情報はバックグラウンドで取り出せますがこれは素晴らしい出発点ですこのアプリはすでにとても役立ちそうです Xcode Playgroundsではこの改善が行われたのでとても作業しやすくなりましたこのセッションでは Xcode Playgroundsを使用したのでプロジェクトの新機能のプロトタイプを迅速に作成できます CustomStringConvertibleと CustomPlaygroundDisplayConvertible プロトコルを使用しましたカスタムタイプの表現をカスタマイズすることができます Playgroundの実行モードを調整することでワークフローを高速化できます値ヒストリーモードを使うことで複数の入力に対してクラスがどのように反応するかすぐに確認できるようになりました最後に Playgroundのライブ表示を使い複雑なユーザーインターフェイス要素を詳しく見てきましたご視聴ありがとうございました

2:04 - birdsToShow computed property before the required changes

var birdsToShow: [Bird] {
    // TODO: Narrow down the list of birds to find.
    let birdProvider = BirdProvider(region: .northAmerica)
    return birdProvider.birds
}

4:15 - birdProvider instance

let birdProvider = BirdProvider(region: .northAmerica)

6:31 - CustomStringConvertible

extension Bird: CustomStringConvertible {
    
    public var description: String {
        return "\(commonName) (\(scientificName))"
    }
    
}

8:17 - CustomPlaygroundDisplayConvertible

extension Bird: CustomPlaygroundDisplayConvertible {
    
    public var playgroundDescription: Any {
        return photo as Any
    }
    
}

9:45 - Birds without a photo

let birdsToFind = birdProvider.birds.filter { $0.photo == nil }

10:52 - Owls without a photo

let owlsToFind = birdsToFind.filter { $0.family == .owls }

11:15 - Verifying the ChecklistView

let checklist = ChecklistView()
for bird in owlsToFind {
    checklist.add(bird)
}

13:41 - birdsToShow computed property with the required changes

var birdsToShow: [Bird] {
    let birdProvider = BirdProvider(region: .northAmerica)
    let birdsToFind = birdProvider.birds.filter { $0.photo == nil }
    let owlsToFind = birdsToFind.filter { $0.family == .owls }
    return owlsToFind
}

14:21 - sightingToShow function before the required changes

func sightingToShow(for bird: Bird) -> Sighting? {
    // TODO: Use BirdSightings package to fetch the most recent sighting.
    return nil
}

15:04 - BirdSightings package example

let barnOwlCode = "BNOW"
let centralParkLocation = CLLocationCoordinate2D(latitude:  40.785091, longitude: -73.968285)

let sightingsProvider = SightingsProvider()
sightingsProvider.fetchSightings(of: barnOwlCode, around: centralParkLocation)

16:08 - Parameters for sightings fetching

let bird = owlsToFind.first!
let appleParkLocation = CLLocationCoordinate2D(latitude: 37.3348655, longitude: 122.0089409)

17:31 - Sightings fetching

let sightingsProvider = SightingsProvider()
let sightings = sightingsProvider.fetchSightings(of: bird.speciesCode, around: appleParkLocation)

18:23 - Initializing the SightingMapView

let mostRecentSighting = sightings.first
let sightingMapView = SightingMapView(sighting: mostRecentSighting)

18:55 - Setting up the playground's live view

import PlaygroundSupport
PlaygroundPage.current.liveView = sightingMapView

22:20 - sightingToShow function with the required changes

func sightingToShow(for bird: Bird) -> Sighting? {
    let sightingsProvider = SightingsProvider()
    let sightings = sightingsProvider.fetchSightings(of: bird.speciesCode, around: lastCurrentLocation)
    let mostRecentSighting = sightings.first
    return mostRecentSighting
}

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

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

関連する章

リソース

関連ビデオ

WWDC20