Build your first app in Swift Playgrounds

ハイライト

Swift Playgrounds 4 を使用すると、iPad と Mac の両方で完全なアプリを最初から作成できます。 Collett と Connor は、空のテンプレートから開始し、SwiftUI でインターフェイスを構築し、Swift Package Manager でサードパーティ ライブラリを導入し、プレビュー デバッグ、コンソール デバッグ、TestFlight への直接送信という完全なプロセスをお茶を飲みながら実演しました。

主要内容

以前は、iPad でアプリを作成したい場合は、プレイグラウンド スニペットを作成するか、Mac で Xcode を開く必要がありました。 Swift Playgrounds 4 の変更点: iPad および Mac で作成、編集、プレビュー、デバッグできる完全なアプリ テンプレートをサポートするようになり、App Store Connect に直接送信することもできます。 (00:21)

Collett は Mac 側から始めました。彼女は Swift Playgrounds を開き、空のアプリ テンプレートを選択すると、すぐにライブ プレビューが右側に表示されました。まずアプリの設定を変更します。名前を「ティータイム」に変更し、アクセントカラーを茶色に変更し、アイコンをカップに変更します。これらの設定はコーディングの必要がなく、数回クリックするだけで完了します。 (01:50)

次にインターフェースを書きます。彼女はライブラリ (コード スニペット ライブラリ) からリスト ビューを挿入し、手動でテキスト ビューを追加します。入力するとコード補完パネルに候補がポップアップ表示され、Enter キーを押すことで候補を挿入できます。すぐに彼女は問題を発見しました。ジャスミン グリーンが繰り返し追加されたのです。重複を避けるために、彼女は OrderedSet を使用して茶葉のリストを保存することにしました。 (03:42)

OrderedSet は、Apple の swift-collections オープン ソース パッケージから来ています。彼女は、[ファイル] > [パッケージの追加] を使用してパッケージを追加しました。 GitHub URL を入力すると、Swift Playgrounds が自動的に依存関係を取得して解析し、サイドバーに表示します。しかし、インポート後、コンパイラは「スコープ内に型 OrderedSet が見つかりません」というエラーを報告しました。彼女は Collections モジュールをインポートするのを忘れていました。インポートを追加すると問題は解決します。 (04:47)

コナーは仕事を引き継ぐ際に iPad に切り替えます。プロジェクトは iCloud 共有フォルダーを通じて同期されます。 iPad で同じプロジェクトを開くと、すべての変更がリアルタイムで同期されます。 Collett は、ティー リストとアシスタントの 2 つのタブを含む TabView を追加しました。 Connor は、[Assistant] タブには単純な推奨ボタンしかないことに気づき、Collett が作成した TeaWheelView をそこに追加したいと考えました。 (07:20)

Connor は最初にプレビュー プロバイダーを TeaWheelView に追加しました。ファイルの最後にプレビュー プロバイダーを入力すると、コード補完がテンプレートとしてポップアップ表示されます。彼はプレビューにいくつかのテスト データを追加し、「Hello, world!」を置き換えました。 TeaWheelView を使用し、少しパディングを追加しました。右側のプレビューはすぐにインタラクティブなカルーセルになります。プレビューでホイールを直接回転させて、選択されているさまざまな茶葉を確認できます。 (08:45)

TeaWheelView をアシスタント タブに追加した後、Connor はテストして問題を発見しました。ターンテーブルがどこで停止していても、結果は常に「Byte’s Oolong」になります。彼は、TeaWheelView 自体に問題があるのではないかと考え、プレビュー プロバイダーに print ステートメントを追加しました。ターンテーブルを回転させると、コンソールにメッセージ 1 が表示されます: アイテム 1… アイテム 1… アイテム 1。これは、問題が TeaWheelView 内にあることを示しています。 (11:55)

彼はプロジェクトのグローバル検索を使用して「最初」を検索し、結果が常に最初の要素を返すように、Collett が TeaWheelView にデバッグ コードの行を残していることを発見しました。このコード行を削除すると、ターンテーブルは正常に動作するようになります。 Connor は、[実行] ボタンを使用して別のウィンドウでアプリを実行し、リストとカルーセルが正常であることを確認します。 (12:50)

最後のステップ: TestFlight に送信します。 Connor は [アプリ設定] を開き、一番下までスクロールして、[App Store Connect にアップロード] をクリックしました。 Swift Playgrounds は、アプリのレコードを自動的に作成し、ビルドをアップロードします。次に、App Store Connect にアクセスして、ベータ版アプリのレビューを送信しました。合格後、彼はそれを TestFlight アプリにインストールし、iPhone でも実行しました。 (13:56)

詳細

空のテンプレートから最初のインターフェースまで

(01:37) Swift Playgrounds 4 の空のアプリ テンプレートを開くと、右側にリアルタイム プレビューが自動的に表示されます。最初のコードには、「Hello, world!」を表示する ContentView のみがあります。

Collett はライブラリを使用してリスト ビューを挿入します。

List {
    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("Vanilla Rooibos")
}

キーポイント:

• ツールバーの + ボタンからライブラリを開きます。ビュー、モディファイア、SF シンボル、カラーなどのカテゴリが含まれます。
• 入力中にコード補完がポップアップ表示されます。Enter キーを押して提案を受け入れます。
• リアルタイム プレビューは、コードが変更されるとすぐに更新されます。

Swift Package Manager を使用してサードパーティ ライブラリを導入する

(03:56) 茶葉の重複を避けるために、Collett は配列の代わりに OrderedSet を使用します。 OrderedSet は swift-collections パッケージに含まれており、Swift Package Manager を介して追加する必要があります。

操作手順:

1. File > Add Package
2. 入力https://github.com/apple/swift-collections
3. Collections 製品を選択し、「プロジェクトに追加」をクリックします。
4. コードの先頭に追加しますimport Collections

import Collections

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

次に、ForEach を使用してコレクションを List にバインドします。

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

キーポイント:

• OrderedSet は、挿入順序を維持しながら要素の一意性を保証します
• id: \.self文字列自体を識別子として使用する
• Swift Playgroundsの依存関係管理インターフェースはXcodeに似ていますが、操作はより簡単です

プレビューのデバッグとコンソールのトラブルシューティング

(08:37) Connor は、Swift Playgrounds 4 の新機能であるプレビュー プロバイダーを 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()
    }
}

キーポイント:

• ファイルの最後に PreviewProvider が記述されており、Swift Playgrounds が自動的に認識します。
• プレビュー領域の下部にページ ドットが表示され、複数のプレビューが利用できることを示します
• 右矢印をクリックして、アプリ プレビュー (アプリ全体を表示) ではなくビュー プレビュー (現在のビューのみを表示) に切り替えます。
• プレビューはインタラクティブです: ホイールを回転させ、ボタンをクリックします

バグが発見されたとき、Connor はプレビューに print ステートメントを追加して確認しました。

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()
    }
}

キーポイント:

• 印刷出力は、ソース コード エディターの左下隅にあるコンソールに表示されます。
• コンソール メッセージは、ポップアップ時に短時間表示されます。クリックして展開し、完全なログを表示します。
• サイドバーの上部にプロジェクトのグローバル検索を表示して、ファイル全体のシンボルを検索します

Swift Playground から直接 TestFlight を送信する

(13:56) Swift Playgrounds 4 は、Xcode を開かずに App Store Connect にビルドを直接アップロードすることをサポートしています。

ステップ： 1.アプリ設定を開きます 2.下にスライドさせます 3.「App Store Connectにアップロード」をクリックします。 4. Apple 開発者アカウントにログインします。 5. Swift Playgrounds はアプリのレコード、署名、アップロードを自動的に作成します

アップロード後、App Store Connect に移動してベータ版アプリのレビューを送信します。 TestFlight が通過すると自動的に配布されます。ユーザーは、iPhone、iPad、Mac をサポートする TestFlight アプリにインストールできます。

キーポイント:

• アップロードする前に、バンドル ID、バージョン番号、ビルド番号を設定する必要があります
• Apple Developer アカウントが必要です (個人または組織)
• アップロードプロセスは、Xcode の [アーカイブ] > [配布] に相当します。

重要ポイント

• やるべきこと: Swift Playgrounds を使用して、iPad 上でアプリのアイデアをすばやく検証します。 実行する価値がある理由: Mac も Xcode も必要なく、iPad でプロトタイプから TestFlight までの完全なプロセスを完了できます。コレットとコナーのデモンストレーションは、午後のうちにインタラクティブなアプリを作成し、それをテストのために友人と共有できることを証明しました。 開始方法: iPad で Swift Playgrounds を開き、空のアプリ テンプレートを選択し、SwiftUI を使用してインターフェイスを構築し、ライブラリを使用してコード スニペットを挿入し、検証効果をリアルタイムでプレビューします。

• やるべきこと: プレビュー プロバイダーをカスタム ビューに追加し、プレビュー主導の開発の習慣を身に付けます。 実行する価値がある理由: Connor はプレビュー プロバイダーを使用して、TeaWheelView のバグを数秒で特定しました。プレビューがなければ、問題を見つけるためにアプリ全体をコンパイルして実行する必要があります。プレビューにより、デバッグ サイクルが数分から数秒に短縮されます。 開始方法: 各カスタム ビュー ファイルの下部にstruct XXX_Previews: PreviewProvider、テストデータを渡し、使用します.padding()他の修飾子は実際のレイアウト環境をシミュレートします。

• やるべきこと: Swift Package Manager を使用してオープンソース ライブラリを導入し、アプリの機能を拡張します。 実行する価値がある理由: Collett は swift-collections の OrderedSet を使用してデータ重複排除の問題を解決したため、それを再実装する必要はありませんでした。 Swift Playgrounds のパッケージ追加インターフェイスにより、Xcode と同じくらい専門的な依存関係管理が可能になりますが、操作はより簡単になります。 開始方法: [ファイル] > [パッケージの追加] を選択し、GitHub ウェアハウスの URL を入力し、必要な製品モジュールを選択して、[追加] をクリックします。コードで覚えておいてくださいimport対応するモジュール名。

• 内容: iCloud 共有フォルダーを介して Mac と iPad 間でシームレスに開発します。 実行する価値がある理由: Collett は Mac でインフラストラクチャを作成し、Connor は iPad でインフラストラクチャを改良し続けます。二人とも Git や AirDrop を一度も使用したことがありません。 iCloud 同期により、デバイスの切り替えが完全に透過的に行われます。 開始方法: Swift Playgrounds プロジェクトを iCloud Drive の共有フォルダーに保存し、コラボレーターを招待します。他の人は、[場所] > [共有フォルダー] を選択して iPad 上でプロジェクトを開きます。

関連セッション

• Create engaging content for Swift Playgrounds — learn how you can build guided instructional content designed for swift playgrounds.
• What’s new in SwiftUI — learn about the latest updates to swiftui, including new apis and features for building great apps.
• Swift packages: Resources and localization — learn how to add resources and localization to your swift packages.