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

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

Swift Playgrounds用に作成されたガイド付きのインストラクションコンテンツを作成する方法について解説します。完成したサンプルコードプロジェクトに対し、ガイドを追加する方法についても解説しますので、是非ご覧ください。研修センターにタスクを追加して、関連コードやオプションの実験タスクがわかるようにし、学習者が自分のコードでプロジェクトを拡張できるようにする方法を紹介します。

リソース
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC22
- Swift Playgroundsで最初のAppを構築する
- WWDC22（2日目）のまとめ
ダウンロード

♪ ♪
こんにちはStephanie Anguloです Marcus Jacksonです Swift Playgroundsチームのエンジニアです今日はこのSwift Playgrounds 4が創り出す魅力あるツールについてお伝えしますこれはiPadとMacのApp開発で紹介されました App StoreのApp構築を学ぶのに最適な方法です当チームはApp開発の基礎を学ぶのに役立つ指導書およびサンプル製品を多数発表しました観察できるデータモデルを使い動的なSwiftUIAppの構築アニメと図形を使用したカスタマイズビュー非同期データの取得など高度なトピックについて取り上げています今日のセッションでは新教育システム概要を説明しプロジェクトのモジュールを使ってコンテンツを書きウォークスルーや実験タスクで実体感のある学習体験を作り上げますさあ始めましょう「Appを使い続ける」を学習者が完了したとします最後に「絵文字」というAppが表示されますここにお気に入りの動物全てを登録し色とサイズを変更して動物をタップすると「クリーチャーダンス」で経過を追うことができます
これは楽しいですが実際のパーティーの雰囲気にしたいと思っていますまず先に紹介できる追加機能を説明しましょう
「クリーチャーダンス」にコードを追加しましたパーティーにはダンスフロアが必要です 10x10 グリッドをビューの背景に設定しました
グリッド内の各タイルはカスタムビュー修飾子を使いランダムに色を更新しますほら格好いいでしょ？
またお気に入りの動物が私たちの手助けなしに踊れるように動物の大きさ位置補正回転をアニメ化するためのカスタム修飾子を作りました
アニメはこれらの修飾子で永久に繰り返し設定されますrepeatForever, つまり動物は新しいフロアで一晩中ダンスできます
最後にダンスフロアを本格的に明るくするため視点の上部にアニメのミラーボールを追加しました
最終調整を加えることで最高のダンスパーティーを実現しています私はこのプロジェクトをかなり変更をしましたがカスタムビュー修飾子の詳細はみていませんでした学習者にどう説明したらよいでしょうか？ Appleのドキュメントを教えることもできますが Swift Playgroundsのプロジェクトコードと一緒にこれらの考えを教えることもできます私たちのチームは学習者が魅力的なApp内体験の作成を手助けできるようにこの新しい教育システムを作りました Swift Playgrounds 4で学習内容を構築する方法について説明をします使用する前に少しご紹介しましょう学習者がSwift Playgroundsでコンテンツをまず開いたときオプションのウェルカムメッセージを使いフレンドバイトからプロジェクトに紹介できますウェルカムメッセージは画面左側にあるソースエディタの上部に表示されラーニングセンターが画面右側に表示されます
ラーニングセンターはコンテンツを説明する画像や説明文を追加できる指定領域です
ウェルカムメッセージとラーニングセンターでは SwiftUIの色形アニメを使いジャムを解消することを学習者に知らせます
ラーニングセンターにはタスクのセクションもあり学習者を支援するための目標をコード化しますこれらはコンテンツの基本的な構成要素です
ラーニングセンターのタスクボタンをタップすると教育システムがSwiftファイルを開き先頭に学習資料が記載されたカードが表示されますこのカードはテキスト画像コードスニペットを含みます次にMarcusがウォークスルーと実験の 2つのタスクタイプについて説明します
当社教育システムが提供する高いレベルのものです適切な説明とタスクを使うことで学習者に魅力的な教育体験を作り上げますさて独自のコンテンツ作成を始めるにはガイドモジュールについて説明する必要がありますデフォルトではswiftpmプロジェクトは全てのソースコードをルートに保持します教育システムを活用するためプロジェクトをアップグレードするにはファイル構造の変更が必要ですまず Appモジュールを作成する必要があり作成したらプロジェクトのソースコードとアセットをそこに移動しますプロジェクトルートに swiftパッケージは残します
次にガイドモジュールを作成しますこれはモジュールファイルと同じレベルの必要がありますガイドモジュールの中にガイドファイルが必要でラーニングコンテンツの全要素がここに含まれます私はガイドファイルをすでに始めていますではこれまでの内容をチェックしてみましょう
これにはディレクティブとマークダウンが含まれますディレクティブはマークダウンの拡張で文字列などのプリミティブ型マークダウン要素その他のより複雑な型を取り込むことができます
ディレクティブは他のそれのコンテナとして機能しますが教育システムでUI要素を表すこともできますガイドファイルの初めに必要な指示を追加しましたこれはファイル全体に適用されていますこれはすべての指示のメインコンテナとしなりますこの引数にはタイトルアイコン背景画像最初に開くファイルが含まれますウェルカムメッセージをガイドブックの指示で追加しましたこれはオプションでプロジェクトを開いたときに最初に受講者に表示されますその下にステップディレクティブに囲まれたガイドディレクティブを追加しましたガイドディレクティブはステップのコンテナとして機能しラーニングセンターとタスクに表示されるコンテンツにマッピングされますラーニングセンターで画像や説明文の追加を始めるには ContentAndMediaディレクティブが必要です
それでダンスフロア素敵なウェルカムメッセージラーニングセンターの紹介を追加しパーティーをしました Marcusパーティーに行きたくない？もちろん創造動物のパーティーになんて良いフロアでしょうこの効果は本当に素晴らしいもですがまだ学習中の人には難しいかもしれませんウォークスルータスクをコードの説明に使います完全攻略ガイドの1ページから始めましょう後から残りの入力方法を説明します Stephanieがガイドブックの最初の部分とウェルカムメッセージをすでに見せていますタスクを作成に必要な最初のディレクティブのステップディレクティブはすでにありますここはウォークスルーの内容が保存される場所ですステップ作成には2つのディレクティブが必要ですコンテンツとメディアディレクティブを追加しますこの指示には右側のラーニングセンターに入るマークダウンが含まれます本文には任意のマークダウンを含めることができますより長い文章やより大きいイメージであなたのテーマを取り上げる助けになるかもしれませんここはコンテンツやメディアディレクティブを表示しますこの例では領域は小さく見えますがこのビューは下に広がりスクロールビューがありますこれで文章の長い部分の記述や図形など複雑なコンテンツの表示にも適しますコンテンツとメディアを作成した時点で次に必要なディレクティブのタスクを追加できますタスクグループにある別のディレクティブに追加しますタスクグループはタスクをまとめる場合にステップ内に配置できる任意のディレクティブです複数のファイルやさまざまな種類のタスクで同テーマを扱うコンテンツがある場合を考えてくださいタスクグループ内に短いテキストを追加できますこれはラーニングセンターでサブタイトルで表示されます
プレイグラウンドにそれを表示する方法を説明します
タスクグループとサブタイトルが表示されたらタスクディレクティブの追加を開始できますタスクにはいくつかの引数があり最初の引数はtypeですこれで教育システムはこのタスクを表示するときに生成する UI を知ることができますすべてのタスクにはIDが必要です IDの文字列は任意に指定できますガイド内の各IDは固有のものである必要がありますタイトル引数も文字列ですこれは固有のものである必要もありませんこれはタスクカードUIにより与えられます最後にラーニングセンターに学習者がタスク開始時に開くプロジェクト内のファイルを通知しますプレイグラウンドにタスクがどう表示されるか説明しますタイトルはボタンの内側にありウォークスルーファイルがその上に表示されますウォークスルータスクが書かれました最初のページを加えましょうページディレクティブはタスクの本文内にあり次の必須引数を持ちます ID引数はタスクのIDと同様に動くためガイドファイル全体で固有である必要がありますタイトル引数はタスク引数と動きがよく似ていますがページ上でタイトル文字列を空白にしておくと指示システムがページを表示するときにタスクのタイトルを使用することができますページ内ではcontentやmedia ディレクティブと同様にマークダウンテキストを追加できますがタスクビューはラーニングセンターよりはるかに小さくなります学習者には難しい場合があるので複雑な画像は使わずテキストを短くしてください Swift Playgroundsによるウォークスルーの最初です最初のウォークスルーはほぼ完了していますが最後のスクリーンショットに示すようにコードを強調する方法の説明が必要ですクリーチャーダンスSwiftにマーカーの追加が必要ですウォークスルーが表示されたら最初のカスタム修飾子である AnimatedScalingEffectを強調しますコードの前後にコメントを追加し行を強調しますまず複数行のコメント構文のスラッシュスターで始めますコメントにはシャープダッシュコードダッシュウォークスルーの後に括弧がきます括弧内に強調するページディレクティブの IDを入力しますこの場合は 1.modifierです
ではプレイグラウンドで試してみましょう絵文字Appプロジェクトを開きます
プロジェクトを開くと左側にソースエディタ右側にプレビューが表示されますウェルカムメッセージがソースエディタ上に表示されバイトバディがコンテンツの概要を示します詳細ボタンをタップします
ラーニングセンターに右プレビューが切替わります ContentAndMedia directiveに書いた文章が一番上です下はタスクグループですウォークスルーのタイトルボタンもありますラーニングセンターではウォークスルーは他のバイトバディである Expertの画像ボタンです
これをタップするといくつか操作が実行されます最初にラーニングセンターが再びプレビューに替わります次に開いていない場合はタスクのfile引数で指定されたファイルがソースエディタで開きます 3つ目にソースエディタの上にタスクビューが表示されます最後にコードウォークスルーコメントでマークされたコードがソースエディタで強調されますコンテンツが画面に表示されていないと強調が必要な行までスクロールします Swift Playgroundsでウォークスルーを書く方法で複数のページを持つウォークスルーがどうかおそらく気になると思います Xcodeでプロジェクトを開き残りを完成させます
Xcodeでガイドファイルを開いてウォークスルーにページを追加しますビュー修飾子について少し説明しましたがカスタムビュー修飾子を作る方法を詳しく説明します先にページを追加します
素晴らしいカスタムビュー修飾子のウォークスルーができました
ViewModifierプロトコルの説明もして良いと思いますこれで必要に応じて独自の ViewModifiersを作れますタスクグループに別のウォークスルーを追加します
これで2つのウォークスルーを全て紹介しました iPadに切り替えてどう見えるか確認します
プロジェクトを開くとラーニングセンターに2つのウォークスルーがあります最初のほうをタップします
前と同様ビュー修飾子を持つ行が強調されタスクがドロップダウンしこのコードが何かを示しますこれで次のボタンをタップできます
ソースエディタが下の修飾子構造体に移動しこれについて説明します
次へを再びタップすると最終ページに移動しますここでは修飾子構造体内のメソッドの詳細を説明します下にウォークスルーというボタンが表示され
タップするとタスクが自動的に開始されますこの機能は別のタスクが発達する限り指導システムにより無料で提供されますここでウォークスルーの残りの部分をタップします
Swift Playgroundsで作成する方法もあります次に学習者がコードを追加し何が起こるか確認できるよう別の種類のタスクを作成する方法を説明します現時点でよいパーティーをしています創造動物は踊っていて背景には光がありますナイトクラブのように見えますもう少し良くできると思います創造動物に色を加えると素敵だと思います小さなクラブのライトの下で踊っているようです私のだけですあなたはどうしますか？ここに実験タスクへの入口が表示されます実験は学習者が興味を持っていたり Appを独自のものにしたい場合に追加できるオプションのコードですガイドファイルに戻りすでに作業したステップに実験タスクを追加できます「実験」という名前の新しい「実験」という名前の新しいサブタイトルと実験タスクの始まりを入力しました
実験タスクとウォークスルーの違いは type引数の入力するものです他はウォークスルータスクと同じ規則に従いますページディレクティブはそれと同様に機能します実験では1つのオプション引数 isAdableだけを追加します isAdable引数の使用で実験タスクでコードをソースエディタに直接追加できます isAdableが正確に設定されている場合ボタンがコードスニペット横の学習タスクに表示されますトリプルバックティックマークダウン構文を使ってページディレクティブ内にコードブロックを包みますコードブロックは10行以下にすることをお勧めしますスクロールの必要がない場合必要であればタスクにより長いコードスニペットを表示できますコードがPlaygroundsにどう表示されるか確認します isAdable引数が適正に設定されているためコードスニペットの右側に追加ボタンがありますこれが実験タスクを書くのに必要なほぼすべてです isAdable引数を覚えていますか？実験タスクでソースエディタにコードを追加できますがスニペット追加場所を指定する必要がありますクリーチャーダンスSwiftに戻ります不透明度修飾子のすぐ下に色修飾子を追加しますここで実験タスクコメントを追加します実験タスクコメントは1行でダブルスラッシュで始まり次にダッシュラーニングダッシュタスクを記述します次に括弧がきて中に実験タスクのIDを記述します実験タスクをテストするのに必要なもの全てです Stephanieと私はもう一度既に書いた swiftpmプロジェクトに取り組んでいますちょっと見てみましょう再びラーニングセンターに戻ります今回最初の実験を行うボトムタスクのグループに焦点を当てたいと思います実験結果は他のバイトバディブルーによって教育システムに記録されています実験タスクをタップしてみましょう
次に起こることは見覚えがあるでしょうタスクビューがドロップダウンしますこの時点ではタスクビューにコードビューが含まれますコードビューの右側に追加ボタンがありタップしてソースエディタにコード権限が追加されます
コードが追加されたのでクリーチャーダンスビューの変更を確認しますパーティーを始めましょう！
かわいい創造動物に当たっている光を確認することができますこれだけで素晴らしいですがもう一段階タイマーを使って数秒毎に不規則に色を変えることもできますそれには別の実験を追加する必要がありますそれではこれをXcodeに戻し新しいタスクを追加します 2つ目の実験に追加する前に既存の実験にページを追加することをお勧めします学習者が一連のコードを追加するのは複雑でその理由や機能がわからない場合がありますそのためコードページの前にテキストページを追加します
これで2つ目のタスク追加の準備ができました再び学習者のプロジェクトにコードを追加してほしいので説明ページを追加後にコードスニペットを加えます
カスタムビュー修飾子を使いできることについて学習者に教えるため新しいコンテンツが作られました作ったものを見せる準備はいい？ええやってみましょう
iPadでコンテンツの最終版を開き私とMarcusの変更がどう結合するか確認します最初にプロジェクトを開くとウェルカムメッセージがでて創造動物パーティーが紹介されますウェルカムメッセージの詳細をタップするとラーニングセンターが開きますすごいラーニングセンターの上部に私の説明があり Marcusは4つのタスクを追加しました最初のウォークスルーをタップしてみましょう
Animated Scaling修飾子をMarcusは例に使いカスタムビュー修飾子の使い方を説明しました
次のボタンをタップすると2つ目が表示されます
ビュー修飾子のプロトコルを例に使い動作を説明しました第2のウォークスルーが終わり完了をタップすると最初の実験タスクに移行されます
ストロボライトのダンスタスクでは colorMultiply修飾子を含むコードスニペットの追加で創造動物に色を加えることができるとわかりますコードスニペットが追加される前のダンスパーティーがどうか思い出してみましょう
確かにクールだ追加をタップしてコードスニペットを追加しパーティー開始を再びタップし変更を確認します
創造動物が素敵な色に変わりました実験タスクを終了し最後のタスクに移行します
実験切り替えタスクではジェスチャーとタイマーで創造動物の色をカスタマイズできますコードスニペットを追加し再びパーティーを始めます
動物をタップすると色が変わります素晴らしい最後のタスクを完了してラーニングセンターヘ戻って
これですべてのタスクが「完了」と表示されましたつまりサンプルが完成しました
Swift Playgrounds 4で新しいコンテンツ機能を活用する方法を紹介しました今日のセッションが楽しめたらよかったですどんな学習体験を構築するか楽しみにしています Swift Playgroundsセッションを忘れずにチェックし最初のAppを構築してください他のWWDCもお楽しみくださいでは失礼しますこれからパーティーなので

let numOfTiles = 100
let squareLength = 150.0

    // Dance floor
    ForEach(0 ..< numOfTiles, id: \.self) { index in
        let i: CGFloat = CGFloat(index / 10)
        let j: CGFloat = CGFloat(index % 10)

        let x = (squareLength * i) - (squareLength)
        let y = (squareLength * j) - (squareLength * 2)

        Rectangle()
            .frame(width: squareLength, height: squareLength)
            .border(.black, width: 3)
            .position(x: x, y: y)
            .randomizedColorEffect(startAnimation: startParty)
    }
    .blur(radius: 15)
    .opacity(startParty ? 1.0 : 0.0)

1:47 - Dance

ForEach(data.creatures) { creature in
    Text(creature.emoji)
        .resizableFont()
        .animatedScalingEffect(startAnimation: startParty)
        .randomizedOffsetEffect(startAnimation: startParty,
                                x: midX * 0.6,
                                y: midY * 0.6)
        .animatedRotationEffect(startAnimation: startParty)
        .opacity(startParty ? 1.0 : 0.0)
}

2:08 - Disco Ball

Text("🪩")
    .resizableFont()
    .animatedRotationEffect(startAnimation: startParty)
    .opacity(startParty ? 1 : 0)

5:12 - Guidebook Directive

@GuideBook(title: "Creature Party!", icon: icon.png, background: background.png, firstFile: CreatureDance.swift) {
    
}

5:28 - Welcome Message

@WelcomeMessage(title: "Welcome to Creature Party!") {
		In Creature Party, you'll take this app of dancing creatures to the next level with the help of colors, shapes, animations, and plenty of emoji!
}

5:37 - Guide and Step Directives

@Guide {
        @Step(title: "Pump up the jams") {
            
        }
    }
}

5:53 - Content and Media Directive

@ContentAndMedia {
  	Tonight, the creatures are gonna party like it's 2022. 🐙💃🦝🕺🦦 
}

7:15 - Task Group Directive

@TaskGroup(title: "Walkthroughs") {
		Here are the walkthroughs! These will help explain all of the new code.                 
}

7:57 - First Walkthrough Task

@Task(type: walkthrough, id: "partyMode", title: "Setting up the Party", file: CreatureDance.swift) {
}

8:44 - First Walkthrough Page

@Page(id: "1.modifier", title: "") {
  	This is a [view modifier](https://developer.apple.com/documentation/swiftui/viewmodifier). Modifiers let you create unique versions of a view in SwiftUI. 
}

9:48 - Walkthrough Highlight

ForEach(data.creatures) { creature in
		Text(creature.emoji)
			.resizableFont()
			/*#-code-walkthrough(1.modifier)*/
			.animatedScalingEffect(startAnimation: startParty)
			/*#-code-walkthrough(1.modifier)*/
      .randomizedOffsetEffect(startAnimation: startParty,
      												x: midX * 0.6,
				                      y: midY * 0.6)
      .animatedRotationEffect(startAnimation: startParty)
      .opacity(startParty ? 1.0 : 0.0)
}

11:56 - First Walkthrough extra pages

@Page(id: "1.struct", title: "") {
  	Custom view modifiers are structures that contain code for explaining how to modify whatever view the given modifier is attached to.  
}
@Page(id: "1.body", title: "") {
  	The body method allows you to add custom view modifications. For example, here you're adding a scaling animation that grows and shrinks the `Creature` over a certain period of time. 
}

12:18 - Second Walkthrough Task

@Task(type: walkthrough, id: "protocol", title: "A Little More on Protocols", file: CreatureDance.swift) {
    @Page(id: "2.protocol", title: "") {
      All custom view modifiers implement the `ViewModifier` protocol. 
    }
    @Page(id: "2.body", title: "") {
      The `ViewModifier` protocol requires all structures that implement it to write the `body(content:)` method.   
    }
    @Page(id: "2.usage", title: "") {
      After you've written content for your `body(content:)` method, you can use it on any view you want. Here you'll use it on each `Creature` to add a rotation animation.
    }
}

14:21 - First Experiment Task

@TaskGroup(title: "Experiments") {
    Time to set this party off! You can use experiments to add some extra pazazz to the dance floor.
    @Task(type: experiment, id: "colors", title: "Dancing in the Strobe Light", file: CreatureDance.swift) {

    }
}

14:48 - First Experiment Page

@Page(id: "3.code", title: "", isAddable: true) {
    ```
    .colorMultiply(creatureColor)
    ``` 
}

15:55 - Experiment Task Comment

ForEach(data.creatures) { creature in
		Text(creature.emoji)
    		.resizableFont()
        /*#-code-walkthrough(1.modifier)*/
        .animatedScalingEffect(startAnimation: startParty)
        /*#-code-walkthrough(1.modifier)*/
        .randomizedOffsetEffect(startAnimation: startParty,
        												x: midX * 0.6,
        												y: midY * 0.6)
        /*#-code-walkthrough(2.usage)*/
        .animatedRotationEffect(startAnimation: startParty)
        /*#-code-walkthrough(2.usage)*/
        .opacity(startParty ? 1.0 : 0.0)
        //#-learning-task(colors)
}

17:42 - Experiment Text

@Page(id: "3.lights", title: "") {
  	Next, add some colors to the creatures so it looks like they're dancing under the lights! 
}

17:55 - Second Experiment Task

@Task(type: experiment, id: "timer", title: "Switch it Up", file: CreatureDance.swift) {
    @Page(id: "4.lights", title: "") {
      	Now that you have some colors, you can add some code to change the color of the creatures using a timer. Let's add one!
    }
    @Page(id: "4.code", title: "", isAddable: true) {
        ```
        .onTapGesture {
          if let timer = timer {
            timer.invalidate()
            self.timer = nil
          } else {
            creatureColor = Color.randomColor
            timer = Timer.scheduledTimer(withTimeInterval: 2.0, repeats: true, block: { timer in
                                                                                       creatureColor = Color.randomColor
                                                                                      })
          }
        }
        ``` 
    }
}

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

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

リソース

関連ビデオ

WWDC22