DocCを使ったインタラクティブなチュートリアルの製作

DocCを使ったインタラクティブなチュートリアルの製作

DocCで没入感の高いチュートリアルを一から作る方法を紹介します。Swiftフレームワークの動作を表現するために、DocC構文を使って豊富な説明、サンプルコード、画像をまとめる方法について説明します。また、インタラクティブな学習機会を提供し、フレームワークのユースケースの理解を深めることができるプログレッシブトレーニングの作成方法についても説明します。

リソース
関連ビデオ

WWDC23
- Swift-DocCで充実したドキュメントを作成
WWDC21
ダウンロード

[音楽］
こんにちは私の名前はWillです Appleでデザインマネージャーをしています今日は同僚のHannahと一緒に DocCを使ってインタラクティブな開発者向けチュートリアルを紹介します Swiftのフレームワークやパッケージがどう機能するか APIを使って実際にAppを作る為のステップバイステップの説明と共に開発者に教える為の素晴らしい方法です我々がAppleで書いたいくつかのチュートリアルをご存じかもしれません我々は SwiftUI とMac Catalyst を紹介するチュートリアルを作成しましたこの入門チュートリアルではフレームワークの基本を学びステップバイステップのコード例に従う事でスキルを身につけていきますフレームワークの採用者は紹介した新しいアイデアをすぐ使える事ができる点が気に入ってると分かりましたこのようなチュートリアルを書くために DocC というドキュメントコンパイラを作りました DocCはマークダウンを活用しプレーンテキストをリッチでインタラクティブなシステムに変換し今年私達は DocC をXcodeに導入したのであなたもSwiftパッケージやSwiftフレームワークのチュートリアルを書くことができます DocCは開発者向けチュートリアルだけではありません DocCはソースコメントからプロジェクト内のSwiftフレームワークやパッケージのドキュメントを作成する事もできますつまり App開発者にとって依存関係にあるプラットフォームライブラリと一緒にドキュメントを開発者用ドキュメントウインドウに表示することができるのです
また SwiftフレームワークやSwiftパッケージを作成した場合採用者の為のドキュメントをソース内に書けるのでAPIの作成や変更に合わせ最新情報を簡単に得る事ができますドキュメントウインドウにフォーマットを提供しながらソースの読みやすさを維持する為にマークダウンでドキュメントのコメントを書きますまた Documentation Catalogを追加する事で記事を書いたりフレームワークやパッケージ内の全てのAPIを整理する事ができます
DocC の使用方法や Documentation Catalogの設定についてはこちらのセッションで詳しく説明しています
今回はチュートリアルの書き方に焦点を当てます
チュートリアルは非常にインタラクティブなー形式のドキュメントでありそのオーサリングを容易にする為にマークダウンを拡張して指示できるようになりましたディレクティブはコンテンツの様なチュートリアルをオーサリングする為の構造を提供するので既に慣れ親しんだMarkdown 構文を使ってコンテンツを書く事に集中することができます
開発者向けチュートリアルは実際のプロジェクト理想的にはAppの構築を中心としていますチュートリアルAppは現実的な方法でフレームワークのAPIを使用する必要があります
例えば SwiftUIのチュートリアルでは初心者が SwiftUI を始める為に理解する必要のあるコア機能を探求するLandmarksというAppの作り方を紹介しています
Mac CatalystではiPad と Mac のナビゲーションイディオムの違いを探る Recipe Appの作り方を教えています
そして今私と同僚は iPhone上で可愛いデジタルナマケモノを作成しカタログ化し世話をする為の新しいフレームワークに取り組んでいます
同僚はすでに素晴らしいリファレンス・ドキュメントまた記事作成をしていますがフレームワーク採用者は実際にAppを作ってみる事でフレームワークの様々な側面がどう作用するかをすぐに理解できる様になると思いますこのセッションでは同僚のHannahと私がこのフレームワーク採用者に基礎知識を説明しますまずチュートリアルの主な構成要素の概要を説明します次にどう企画に取り組んでいるかを説明します最後に Hannahに引き継いでチュートリアルのコレクションを作成するデモをしてもらいますそれでは始めましょう先に述べたようにチュートリアルは非常にインタラクティブな学習方法です記事やリファレンスドキュメントと同様にチュートリアルのテキストはマークダウンで作成ーされますがチュートリアルは特別な構文を使用しマークダウンをディレクティブで囲み DocC がチュートリアルで紹介されている複雑なレイアウトやインタラクションを構築できる様な構造を提供します
テキストがチュートリアルの１ステップである事を DocC に伝える基本的なディレクティブですこの例では指示文に加えてステップを達成する為にどうコードを書けば良いかを読者に正確に示すために DocCが表示するSwiftファイルへのリンクが含まれています
また DocCの指示文はネストする事ができますこの例ではコード指示文に画像指示文が含まれ読者にステップの文脈を提供しています
チュートリアルのページは先ほどのように様々なステップがあります目次には個々のチュートリアルへのリンクと構成が記載されています目次を構成する各ディレクティブについて見ていきましょう
目次ファイルはページの全ての要素を含むチュートリアル指示文から始まります
チュートリアル指示文の中にイントロ指示文がありタイトルとフレームワーク採用者がチュートリアルを通して構築するものの簡単な説明が含まれています
DocCはチュートリアルへのリンクを提供する際に「Get Started」ボタンやタイミング計算などイントロダクションの一部の要素を自動的に生成します
イメージディレクティブも含まれています画像の保存はドキュメントカタログのリソースフォルダにできますページ下にはチャプターディレクティブがありますチュートリアルを意味のあるグループにまとめる為にチャプターを使用しますチャプターを使う事でフレームワークの導入者は進捗状況を明確に把握する事ができフレームワークを理解できます
チャプターの中にはチュートリアルへの個別のリンクがありますこのページで設定されている全ての文脈はチュートリアルのページに移動する前にフレームワークとは何かそれを使って何を作るのかを十分に理解する必要があります
目次のようにチュートリアルページはページの内容を含む１つのディレクティブで始まりますこの場合チュートリアルディレクティブが１つある DocCは目次ページの情報をチュートリアルの導入部で使用しそのチャプターを参照する事でこのチュートリアルの全体的なテーマを人々に伝えます
チュートリアルの導入部にはタイトルと説明が含まれフレームワーク採用者がどの部分を使い何を作るのかを教えてくれます構築の道筋を明確にする為にチュートリアルはセクションに分かれていますセクション紹介はチュートリアル紹介と似ていますがフレームワークの採用者が次のセクションに進む前に行う作業を具体的に説明しています
セクションにはステップが含まれており採用者が次のステップに進む為に何をすべきかを指示しますステップは短く理解しやすく簡単に実行できるものでなければなりません
フレームワーク採用者は学んでいるフレームワークをすぐに使える様に一貫性のある明確なチュートリアルステップを頼りにしています最初に明確な計画を立てれば一連のチュートリアルの中で一貫したステップを作れます新しいフレームワーク「Sloth」（ナマケモノ）開発者向けチュートリアルの概要を説明する事でどのように計画を立てるのか紹介しますフレームワークの概要を理解するためにはそのフレームワークがどう機能し実際にどう使用されているか考えましょう開発したフレームワークはナマケモノをテーマにしたもので多くの優れた機能を備えています
このフレームワークの主な機能の概要は次の通りチュートリアルの概要を説明する為に重要なAPIを抜き出しチュートリアルでどうやって説明すれば良いかを考えます APIにはナマケモノタイプや Food Generator PowerPicker があることがわかりますこれらを一度に考えるとどんな順番で教えればいいのかがわからなくなってしまいますそこで機能別に分類してみましょう
このフレームワークを採用する人にとってナマケモノのタイプを理解することは重要ですからナマケモノのタイプの作成や編集に関連するものをまとめますナマケモノを生成するためのAPI 名前をつけるためのAPI能力を編集するためのAPI これらがナマケモノを作るためのコアAPIです
フードジェネレーターケアスケジュールハビタット等残り全てのAPI も関連していますこれらはナマケモノのお世話をする為のAPIです
つまりナマケモノを作る為のAPI ナマケモノの世話をする為のAPIというフレームワークを構成する2つの主要な API があるという事です好調なスタートですこのフレームワークを上手に使うには採用者がこれらのAPIを理解する必要があります
またこのようにグループ化しておけば簡単に説明する事ができますしかしこのフレームワーク採用者は自分のAppでもっと複雑な事をやりたいと思っているでしょうね
なので新しいグループを追加しますこの新しいフレームワークはナマケモノを作って世話をする為のものですがこのフレームワークに含まれているAPIを超えた使い方ができるように準備したいので相互運用性についての情報も入れておきますナマケモノが他の動物と交流したり場所を移動したりナマケモノのグループでたむろしたりするのに使うのではないかと考えているでしょう私は全ての使用例を想像しようとはしていませんただこのフレームワークを自分のAppで使う方法を紹介できるバリエーションが欲しいのです
この３つのグループのお陰で私はチュートリアルの整理を始める事ができました今のところこれらのグループをチャプターにしてフレームワークの採用者に実際のAppで API使用方法を教える為にAppのアイデアをブレインストーミングするのに使います
チュートリアルの為に３つの分野それぞれの機能を持つAppをデザインしました「作成」にはユーザーが新しいナマケモノを生成し色とパワーを割り当てるシンプルなビューを作ってみます「世話」ではナマケモノの一般的な活動レベル食欲気分を見れる機能をユーザーに提供しますそして「ふれあい」では世界中を移動するナマケモノを見つけて他の動物とふれあえるような機能を作りたいと思います
Appのアイデアが描けたら次はどうやってAppを作るかどうやって人に教えるかを考えようと思います各章のチュートリアルのリストは私がAppを作る時の手順にほぼ沿って書いていきますまずナマケモノを作るためのビューを作ります次にナマケモノの世話をする為の複雑な機能を作ります最後に他のフレームワークに使う部分を作ります
このような計画を立てた結果フレームワーク採用者がナマケモノを作り世話をするのに役立つと確信できるチュートリアルのリストが完成しました書いるうちに変わるかもしれませんが今は自分の考えを整理し重要なAPIを全て簡単にかつ冗長にならない様にカバーしている事を確認するのに役立ちますここまでディレクティブの構文と構成するコンポーネントを説明しましたまたチュートリアルのまとめ方の基本についても説明しましたここから同僚のHannahに引き継いで Xcode 13でDocCを使ってチュートリアルを書く方法を紹介してもらいますありがとう Will私の名前はHannahです AppleのHuman Interfaceデザイナーです Xcode 13の全く新しいDocC機能を使った SlothCreator チュートリアルの概要が分かった所でチュートリアルの書き方を一緒に見ていきましょう
セッション「XcodeにおけるDocCドキュメントのレベルの向上」ドキュメントファイルを整理するための Documentation Catalogの作成方法を取り上げました彼らがSlothCreator用に作成したのと同じ Documentation Catalogに私のチュートリアルを追加します Willが言ったようにチュートリアルを括るには目次ファイルが必要ですそこで既にチュートリアルフォルダと SlothCreator Tutorials用の Table of Contentsファイルを作成しました
早速最初のチュートリアルを作ってみましょう！
まずチュートリアルフォルダを右クリックし「新規ファイル」を選択テンプレートセレクタを表示「チュートリアルファイル」を選択「次へ」をクリック
「Creating Custom Sloths」と名付けます
DocCは私が始める為のテンプレートを提供しますチュートリアルファイルのテンプレートにはイントロセクションセクション内のステップのセットがあります
必要に応じて完成予定時間を表示できます約20分かかるとします
続けてこのチュートリアルのタイトルを決めましょうここに「Creating Custom Sloths」と名付けます
そしてこのチュートリアルの概要を書き加えます
チュートリアルをより魅力的に見せたいのでイントロセクションのイントロステップ用のアートファイルを用意しました私のアートファイルフォルダを開いて用意した画像をすべて選択しドキュメントカタログのリソースフォルダにドラッグ・アンド・ドロップします
私がデザインしたイントロの画像をお見せしましょうこれはフレームワーク採用者がこのチュートリアルで構築するものを視覚的に説明するものです
イントロ画像を追加するには sourceの後に画像ファイル名を入れます
またその画像にアクセス可能な説明文を追加します
全てのSlothCreator採用者がチュートリアルを読んだり聞いたりする事で素晴らしい学習体験ができる様に私のチュートリアルを誰でもアクセスできるようにしたいと考えています
アクセシブルな説明とは画像を見ている人が自明の事を説明するものです例えばイントロの画像を「ナマケモノの輪郭とその下に4つのボタンを配置したー Appのインターフェースのワイヤーフレーム」と表現しますボタンには左から氷火風雷のマークが表示されていますコードに記述を加えてみましょう
さてこのチュートリアルのイントロが完成したので最初のセクションに進みましょう
これは初心者向けのチュートリアルになりますなので最初のセクションはフレームワーク採用者が Slothy Appの基本的な設定を行うことから始めますセクションタイトルを入れてセクション説明を追加します
またこのセクションのタスクフローを視覚的に表現する為に用意したセクションイメージを追加します
イントロ画像を追加したのと同様に画像ファイル名とアクセス可能な説明文を入れます
次のステップに移りましょう
このセクションの最初のステップはフレームワーク採用者は iOS Appのテンプレを使って新しい Xcodeプロジェクトを作成しますそれをインストラクションに書いておきます
このステップのメディアは採用者がどのようにすればいいのかより多くのコンテキストを与える必要があるのでXcodeのテンプレートセレクタのスクショを撮り対話する必要がある部分をハイライトしました
留意点としてはフレームワーク採用者がこのチュートリアルを見ている時セクションやステップの背景が Xcodeの設定に応じて明るくなったり暗くなったりする可能性がありますそこでダークモードに対応した画像を作成するかそれぞれの外観に合わせて別の画像を用意します
この画像をステップに追加してみます
これで最初のステップが追加されたので先にセクション１の残りのステップを追加してみます
はい最初のセクションのステップを完了しましたそれではどう進んでいるか見ましょう Xcode 13では Product Build documentationに移動して Developer Documentationでチュートリアルをプレビューするかショートカットを使った方法がありますキーボードでcontrol+shift+command+D
いいですね！チュートリアルのコンパイル完了ですそして今ポップアップしたドキュメントウインドウで書いたものをプレビューできるようになりました目次のページを見てみましょう左側のナビゲーターでは私のチュートリアルが SlothCreatorプロジェクトの下に整理されていて私の同僚が SlothCreatorのために書いた他のドキュメントと一緒になっているのがわかります右側には「目次」のページがありますチュートリアル集の概要とイントロ部分には目を引く画像があります
イントロの下には私の最初のチャプターと今書いたばかりのチュートリアルへのリンクがあります見てみましょう
チュートリアルページの上部にはチュートリアルイントロダクションがありフレームワーク採用者には SlothCreationビューを構築し約20分かかることが伝えられていますその下には最初のセクションがありますこのセクションでは４つの簡単なステップを経てプロジェクトを立ち上げます
ステップをスクロールしていくと画像が更新されていくのがわかります今のところすべて順調です２つ目のセクションではフレームワーク採用者が SlothCreatorでコーディングを開始しますどうコードステップで誘導するのか見ましょう
セクション２のイントロと最初のステップはすでに完了していますフレームワーク採用者が前のステップで作成した SwiftファイルにSlothCreatorのパッケージをインポートしている第２ステップを見ましょうその前にいくつか指摘しておきたいことがありますコードステップではトップに表示名が表示され採用者にどのファイルを操作すべきかを伝えます
DocCはこのステップで追加する Swiftファイルを画面の右側表示名の下に表示します
また DocCは現在のコードファイルと前のステップのコードファイルを自動的に比較して新しい部分をハイライト表示することができます
このコードファイルはプレビューを生成しますスクリーンショットをこのステップに追加して採用者が指示にうまく従ったかどうかを確認できるようにしています
Xcodeに戻ってこのステップを完成させましょうまず最初に表示名を追加し次にコードのファイル名を追加し最後にプレビュー画像を追加します
これでコードステップの追加方法を確認したので先にセクション２の残りのステップを追加していきます
これまでチュートリアルのイントロセクション様々な種類のステップの書き方を説明しましたそれでは私がSlothCreatorに書いた全てのチュートリアルを追加してみましょう
Finderを開いて用意したチュートリアルファイルをすべて選択しチュートリアルフォルダにドラッグ・アンド・ドロップをして下さい次に目次ファイルを開いてチャプター１の他の２つのチュートリアルをリンクしチャプター２と３を追加します
これで「SlothCreator Tutorials」が完成しました一緒に見てみましょう Table of Contentsページからこのチュートリアル集には８つのチュートリアルが３つのチャプターに分かれて構成されていることがわかりますまた左のナビゲーターからもこの構成がわかりますこのページはフレームワーク採用者にチュートリアルの概要を提供するのに最適な方法ですまた先ほど書いたチュートリアルのページも見ましょうイントロと最初のセクションを見ましたがフレームワーク採用者にプロジェクトの設定方法を案内しています
その下の２つ目のセクションでは採用者にナマケモノのカスタマイズビューを作る為の明確なコーディング方法を説明しています
いいですね！チュートリアルの内容がとてもいいですねフレームワークの採用者は私のチュートリアルを見てきっとSlothCreatorの事を知りたくなると思います
このセッションではチュートリアルとは何か良いチュートリアルとは何かチュートリアルのアウトライン化の方法そしてプレビューする方法を説明しました
DocC はXcode 13の強力な新ドキュメント機能ですこれを使えばリファレンス記事チュートリアル等フレームワークの総合的なドキュメントを書けます
DocCを使ったドキュメントの書き方作り方整理の仕方についてもっと知りたい方は今年のWWDCで行われた他のDocCセッションをご覧になることをお勧めします
Xcode 13で皆さんがDocCを使って何を作ろうとしているのか私達はワクワクしています [音楽］

11:26 - Tutorial Table of Contents File Content

@Tutorials(name: "SlothCreator") {
    @Intro(title: "Meet SlothCreator") {
        Create, catalog, and care for sloths using SlothCreator. Get started with SlothCreator by building the demo app _Slothy_.
        
        @Image(source: slothcreator-intro.png, alt: "An illustration of 3 iPhones in portrait mode, displaying the UI of finding, creating, and taking care of a sloth in Slothy — the sample app that you build in this collection of tutorials.")
    }
    
    @Chapter(name: "SlothCreator Essentials") {
        @Image(source: chapter1-slothcreatorEssentials.png, alt: "A wireframe of an app interface that has an outline of a sloth and four buttons below the sloth. The buttons display the following symbols, from left to right: snowflake, fire, wind, and lightning.")
        
        Create custom sloths and edit their attributes and powers using SlothCreator.
        
        @TutorialReference(tutorial: "doc:Creating-Custom-Sloths")
    }
}

11:47 - Tutorial File Name
```
Creating Custom Sloths
```
12:21 - Tutorial Title
```
Creating Custom Sloths
```

12:27 - Tutorial Overview

This tutorial guides you through building _Slothy_ — an app for creating and caring for custom sloths. You'll start by building the sloth creation view.

13:04 - Tutorial Intro Image File Name
```
creating-intro.png
```
14:22 - Section 1 Title
```
Create a new project and add SlothCreator
```
14:43 - Section 1 Image File Name
```
01-creating-section1.png
```

14:44 - Section 1 Image Accessible Description

An arrow pointing from the SlothCreator framework icon to the Xcode app project icon.

15:43 - Section 1 Step 1 Image File Name
```
creating-01-01.png
```

15:45 - Section 1 Step 1 Image Accessible Description

A screenshot of the template selector in Xcode. In the top row, iOS is selected as the platform. In the Application section, App is selected as the template; there's a highlight placed over the Next button at the lower-right of the sheet.

15:57 - Section 1 Step 2 to Step 4

@Step {
    Enter "Slothy" as the Product Name. 
                
    @Image(source: creating-01-02.png, alt: "A screenshot of the project sheet, which shows the Product Name for the app being built as Slothy. The Interface is set to SwiftUI, and the Life Cycle is set to SwiftUI App.")
}
            
@Step {
    Select "SwiftUI" from the Interface pop-up menu and "SwiftUI App" from the Life Cycle pop-up menu, then click Next. Choose a location to save the Slothy project on your Mac.
                
    @Image(source: creating-01-03.png, alt: "A screenshot of the project sheet, which shows the Interface is set to SwiftUI and the Life Cycle is set to SwiftUI App.")
}
            
@Step {
    Add `SlothCreator` as a dependency to the project.
                
    @Image(source: creating-01-04.png, alt:"A screenshot shows the SlothCreator package in Xcode's navigator.")
}

17:58 - Section 2 Intro and Step 1 & 2

@Section(title: "Add a customization view") {
    @ContentAndMedia(layout: horizontal) {
        Add the ability for users to customize sloths and select their powers.
            
        @Image(source: 01-creating-section2.png, alt: "An outline of a sloth surrounded by four power type icons. The power type icons are arranged in the following order, clockwise from the top: fire, wind, lightning, and ice.")
    }
        
    @Steps {
        @Step {
            Create a new SwiftUI View file named `CustomizedSlothView.swift`.
                
            @Code(name: "CustomizedSlothView.swift", file: 01-creating-code-02-01.swift) {
                @Image(source: preview-01-creating-code-02-01.png, alt: "A screenshot from the Xcode preview as it would appear on iPhone, with the text, Hello, World!, centered in the middle of the display.")
            }
        }    
            
        @Step {
            Import the `SlothCreator` package.
                
            @Code(name: "<#display name#>", file: <#filename.swift#>)
        }    
    }
}

19:05 - Section 2 Step 2 Display Name
```
CustomizedSlothView.swift
```
19:08 - Section 2 Step 2 Code File Name
```
01-creating-code-02-02.swift
```

19:10 - Section 2 Step 2 Code File Preview Image

{
                    @Image(source: preview-01-creating-code-02-01.png, alt: "A screenshot from the Xcode preview as it would appear on iPhone, with the text, Hello, World!, centered in the middle of the display.")
                }

19:25 - Section 2 Remaining Steps

@Step {
    Create a ``Sloth`` state variable called `sloth`.
                
    @Code(name: "CustomizedSlothView.swift", file: 01-creating-code-02-03.swift) {
         @Image(source: preview-01-creating-code-02-01.png, alt: "A screenshot from the Xcode preview as it would appear on iPhone, with the text, Hello, World!, centered in the middle of the display.")
    }
}    
            
@Step {
    Delete the template `Text` view, then add a new `VStack` with trailing padding.
                
    This adds space around and between any views inside.
                
    @Code(name: "CustomizedSlothView.swift", file: 01-creating-code-02-04.swift) {
         @Image(source: preview-01-creating-code-02-04.png, alt: "A screenshot of a blank preview canvas.")
    }
}    
            
@Step {
    Add a `SlothView`. Specify the `sloth` state variable for the view's `sloth` binding.
                
    @Code(name: "CustomizedSlothView.swift", file: 01-creating-code-02-05.swift) {
         @Image(source: preview-01-creating-code-02-04.png, alt: "A screenshot of a blank preview canvas.")
    }
}    
            
@Step {
    Add a `PowerPicker`. Specify the `sloth`'s `power` for the picker view's `power` binding.
                
    @Code(name: "CustomizedSlothView.swift", file: 01-creating-code-02-06.swift) {
         @Image(source: preview-01-creating-code-02-04.png, alt: "A screenshot of a blank preview canvas.")
    }
}    
            
The following steps display your customized sloth view in the SwiftUI preview.
            
@Step {
    Add the `sloth` parameter to initialize the `CustomizedSlothView` in the preview provider, and pass a new `Sloth` instance for the value.
                
    @Code(name: "CustomizedSlothView.swift", file: 01-creating-code-02-07.swift) {
         @Image(source: preview-01-creating-code-02-07.png, alt: "A portrait of a generic sloth displayed in the center of the canvas.")
    }
}
            
@Step {
    Set the preview provider sloth's `name` to `"Super Sloth"`, `color` to `.blue`, and `power` to `.ice`.
                
    @Code(name: "CustomizedSlothView.swift", file: 01-creating-code-02-08.swift) {
         @Image(source: preview-01-creating-code-02-08.png, alt: "A portrait of an ice sloth on top, followed by four power icons below. The power icons, clockwise from top left, include: ice, fire, wind, and lightning. The ice icon is selected.")
    }
}

20:03 - Chapter 1 Tutorial 2 & 3

@TutorialReference(tutorial: "doc:Editing-Sloth")
@TutorialReference(tutorial: "doc:Adding-Accessories")

20:10 - Chapter 2 & 3

@Chapter(name: "Sloth Health & Happiness") {
    @Image(source: chapter2-healthAndHappiness.png, alt: "A popover window pointing at a button with a leaf symbol on it. To the right of the leaf button, there is a button with a smiley face and a button with a dumbbell.")
        
    Discover how to track sloth's activity levels, measure their overall happiness, and feed them their favorite foods.

    @TutorialReference(tutorial: "doc:Feeding-Sloths")
    @TutorialReference(tutorial: "doc:Tracking-Sloth-Activity")
    @TutorialReference(tutorial: "doc:Measuring-Sloth-Happiness")
}
    
@Chapter(name: "Finding Hidden Sloths") {
    @Image(source: chapter3-findingHiddenSloths.png, alt: "An illustration of a radar scanning over a map. The map displays a pin with a smiley sloth face in the upper left quadrant.")
        
    Find sloths as they move around their neighborhoods and make friends.

    @TutorialReference(tutorial: "doc:Locating-Sloths")
    @TutorialReference(tutorial: "doc:Finding-Sloth-Habitats")
}

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

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

リソース

関連ビデオ

WWDC23

WWDC21