Swift Playgroundsで最初のAppを構築する

Swift Playgroundsを使用して、プロトタイプの作成やAppの構築を簡単に行う方法をご覧ください。空のプロジェクトからAppを作成したり、SwiftUIでインターフェイスを構築したり、Swift Package Managerを使用してオープンソースパッケージから機能を追加したりする方法を紹介します。また、プレビューやコンソールを使用して問題をデバッグする方法や、AppをApp Store Connectに送信してTestFlight経由で配信を行う方法も紹介します。

リソース

- HDビデオ
- SDビデオ

関連ビデオ

WWDC22

Swift Playgrounds用の魅力的なコンテンツを作成する

ようこそ「Swift Playgroundsで最初のAppを構築する」へ Swift Playgroundsチームの Collett Charltonです Connor Wakamoです Swift Playgroundsチームのエンジニアです Swift Playgroundsは Swiftのコード学習ツールでこの度 Appを作れるようにもなりました今日はSwift Playgroundsで Appを作成する過程を１からお見せしますそしてプレビューとコンソールでデバッグし TestFlightに Appを提出します

私たちのチームはお茶が大好きですですのでお茶のAppを作ってみたいと思います Connorと共にお茶の時間にお茶のリストでお茶を選んでくれるAppを作成したいと思います Swift Playgroundsは MacとiPadに最適です今日はMacがあるので MacでAppを作成したいと思います

コーディングが初めてでも経験あるデベロッパでも Swift Playgroundsには数々のテンプレートや学習資料がありますこのAppの作成はスクリーン左下の空白テンプレートから始めます

テンプレートがでてきましたダブルクリックで開きます

右側にライブのインタラクティブなプレビューがあります

まず最初にApp Settingsで少しカスタマイズしましょうサイドバーの左上の App Settingsボタンで Settingsを開きます

ここでApp名やアクセントカラーなどカスタマイズできますまたカスタムアイコンまたはプレイスホルダーアイコンや機能やBundleIDも設定できます名前は「Tea Time」にします

アクセントカラーは茶色に

プレースホルダーアイコンにマグを選びます

重要な部分は済みましたのでテンプレートテキスト選びライブラリからビューを置き換えコーディングを始めましょうライブラリはプロジェクトツールバーの＋でアクセスできますここには簡単に使えるビューや修飾子 SF Symbolsやカラーなどのスニペットがありますリストビューでお茶のリストを作るためリストを検索しクリックして挿入します

それではリストビューにお茶を足しましょう

Textとタイプし returnキーでインラインコードのコンプリーションパネルのコード補完を完了させます

リストビューにお茶を１つ足しましたさらに足しましょう

あら Jasmine Greenを２度入力してしまいました重複を避けるため orderedSetを使うべきです幸運にもSwiftコレクションパッケージにその機能があります Swiftコレクションパッケージを追加しましょう

「File」メニューから「Add Package」を選びます

SwiftコレクションパッケージのURLをタイプし returnキーを押します

パッケージが呼び込まれそのバージョンと追加できるプロダクトが表示されますここでは「Collections」を選び「Add to Project」をクリック

サイドバーのPackagesに追加されました OrderedSetを作りお茶のリストを格納します

あら問題があるようです「Issue」アイコンで問題を見ます

「Cannot find type ordered set in scope.」なるほどわかりました Collectionsモジュールを忘れていました取り込めば問題はなくなるはずです

問題が解決しましたリストビューを更新し Collectionを使いますこれには ForEachビューを使います

さあできましたお茶のコレクションからお茶のリストが表示されますプロジェクトを進めるにつれさらに機能のアイデアが出てきましたお湯が沸いた音を Appが聞いて教えてくれたら便利ですね今は追加しませんがなぜマイクの使用が必要かユーザーに説明する手順をお見せしましょう

これを追加するには App Settingsに戻り「Capabilities」を選びます

右上の＋ボタンでリストから必要なものを選びます「Microphone」を選びクリックして追加します Purpose stringに書きます「Tea Timeは湯沸かしの― 音を聞くためにマイクを使用します」「Add」をクリックし App Settingsを閉じます

今日はたくさん達成しましたプロジェクトとアイデアを Connorと共有しましょう

共有「iCloud」フォルダーに足して共有できますがその前に「My App」以外の名前をつけましょう

そして共有「iCloud」フォルダーにドラッグします

この後はConnorが Appを完成させますありがとう Collett ここからはiPadで作業します iCloud共有フォルダーで共有しているのでメインリストには表示されませんですが「Locations」をタップすれば iCloudや第三者サービスのどこにもアクセスできます共有フォルダーをすでに開いているので「Tea Time」をタップしプロジェクトを開きます変更を加えれば自動的に共有プロジェクトに反映されます Collettは素晴らしいエンジニアで iCloudへのアップロードで機能が追加されました TabViewの実装でお茶のリストだけでなくアシスタントもありますアシスタントをタップすると今は簡素ですが役目は果たしますお勧めを尋ねれば答えが返ってきます

今日はJasmine Greenがお勧めのようです Collettはさらに新しい楽しいお茶の選び方を考えていましたサイドバーで見つけましょう

TeaWheelViewかもしれませんタップして開けましょう

ビューにデータが収集されますビュープレビューを足して Appの機能になる前に TeaWheelViewを試してみましょう一番下にスクロールし

「Preview Provider」とタイプします

コード補完を returnキーで選び TeaWheelView_Previewsと名付けます

App Previewの下にドットが現れました Swift Playgroundsがプレビュー感知したということです App Previewの下の右矢印をタップすると Appプレビューではなくビュープレビューを使用できます今は「Hello, world!」だけですが TeaWheelViewを作るためコードを足しましょうまずプレビューで使えるよう静的プロパティとして配列をいくつか足します

角括弧の間に挿入位置を置き括弧閉じをドラッグしてプレースホルダを作ります

次にプレースホルダを文字列と置き換えます

それではTeaWheelViewに足しましょう Hello, world!を選び TeaWheelViewと置き換えます

パディングも足します

ビュープレビューにルーレットが現れました素敵ですねスピンさせると違うアイテムを選びますアシスタントタブに戻りこれを足しましょうサイドバーでAssistantTab Swiftファイルを開き Buttonを TeaWheelViewと入れ替えます

回転が止まった時に呼び出される action closureがオプションにあります

最後に選んだお茶を選ばれたお茶にセットし showPickAlertをtrueにして SwiftUIにアラートさせます

これで準備できました試してみましょうスピンするとByte's Oolong を勧めてきましたもう一度スピンします

またByte's Oolongですねもう一度

何か変ですね違う箇所で止まっても Byte's Oolongを勧めてきますいいお茶ですがもう少し種類が欲しいですね Wheel Viewで原因を探りましょう

ルーレット自体は作動してるので原因は明らかではありませんビュープレビューに Printを足しプレビューも変か確かめます

回転させると

ソースエディタの左下にコンソールメッセージが出ましたアイテム１アイテム１...　アイテム１どのスピンもアイテム１が返ってきました設定がおかしいようです毎回１番目のアイテムなのでプロジェクト全体の検索で firstを探しますスクリーン左側のサイドバーの上にある検索バーをタップし firstとタイプし returnキーを押します

可能性がある結果なのでタップします

どうやらCollettがデバッグコードを置き忘れ毎回１つ目のアイテムに戻っていたようですではこれを正しましょう

アイテム２アイテム４直ったようですねプレビューの下の左矢印をタップして Appプレビューに戻り実際のAppで試してみますスピンすると English Breakfastですアシスタントが正常に動いていますではどのサイズでもAppが作動するのを確認するため左上の実行ボタンで独自のウインドウで作動させてみます

問題ないようですねお茶のリストもアシスタントもありルーレットもあります Swift Playgroundsのプロジェクトに戻るためステータスバーにある Swiftアイコンをタップし「Show Project」ボタンを選択します

友人や家族とこのAppをテストする準備ができました Swift Playgroundsから直接TestFlightに提出し簡単にテストできます App Settingsシートを開き一番下にスクロールすると「Upload to App Store Connect」ボタンがありますタップすると自動的に Appレコードの作成や App Store Connectへのアップロードが行われ TestFlightそして後に App Storeから配信されます

アップロードが完了し App Store Connectでベータ版App Reviewに提出できますしばらく待った後 TestFlight Appでインストールできます iPhoneでもです！

InstallでTea Timeをインストールします

それが終わると Openで開きます Test Noteをタップしフィードバックの提出の仕方もタップします

これでiPhone上で Appが開きました今日はどのお茶がいいでしょう？

Matt P's Tea Partyですね本日はSwift Playgroundsを使って MacとiPadでの Appの作り方をご紹介しましたライブラリとコード補完を使ったコード入力方をお見せし iCloud共有フォルダでプロジェクトを共有しビュープレビューとコンソールでデバッグしましたそしてiPadから TestFlightに提出しましたお役に立てたことを願い Swift Playgroundsのご活用を期待していますありがとうございました WWDCをお楽しみください

3:31 - First Tea Item
```
Text("Jasmine Green")
```

3:39 - List Of Teas

Text("Jasmine Green")
Text("English Breakfast")
Text("Byte's Oolong")
Text("Golden Tippy Assam")
Text("Matt P's Tea Party")
Text("Darjeeling")
Text("Genmaicha")
Text("Jasmine Green")
Text("Vanilla Rooibos")

4:45 - OrderedSet of Teas

let teas: OrderedSet<String> = ["Byte's Oolong", "Golden Tippy Assam", "English Breakfast", "Matt P's Tea Party", "Darjeeling", "Genmaicha", "Jasmine Green", "Vanilla Rooibos"]

5:28 - ForEach View

ForEach(teas, id: \.self) { tea in
     Text(tea)
}

8:45 - Initial Preview Provider

struct TeaWheelView_Previews: PreviewProvider {
    static let items: [String] = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
    static var previews: some View {
        Text("Hello, world!")
    }
}

9:22 - Preview Provider with TeaWheelView

struct TeaWheelView_Previews: PreviewProvider {
    static let items: [String] = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
    static var previews: some View {
        TeaWheelView(items, id: \.self)
            .padding()
    }
}

10:40 - TeaWheelView in Assistant Tab

TeaWheelView(dataSource.teas, action: { tea in
    lastPickedTea = tea
    showPickAlert = true
})

11:55 - Preview Provider with Print Statement

struct TeaWheelView_Previews: PreviewProvider {
    static let items: [String] = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
    static var previews: some View {
        TeaWheelView(items, id: \.self) {
            print($0)
        }
            .padding()
    }
}