Swift-DocCで充実したドキュメントを作成

Swift-DocCで充実したドキュメントを作成

アプリやフレームワークのための豊富で詳細なドキュメントを作成するために、Swift-DocCの最新の機能を活用する方法を学びます。Xcode 15ドキュメンテーションプレビューエディタを使用して、既存のプロジェクトのドキュメントを効率的に反復する方法を紹介し、グリッドベースのレイアウト、ビデオサポート、カスタムテーマのような拡張されたオーサリング機能を探ります。このセッションを最大限に活用するためには、Swift-DocCドキュメンテーションの基本的な知識を持っている必要があります。

関連する章
- 0:00 - Introduction and overview of Swift-DocC
- 3:33 - Building and browsing documentation in Xcode
- 6:21 - Documenting Swift extensions
- 8:05 - Activating the Documentation Preview editor
- 9:44 - Adding an image to your documentation
- 12:06 - Organizing documentation pages into Topic Groups
- 13:53 - Using Swift-DocC directives to create rich documentation pages
- 25:12 - Theming the online version of your documentation
- 28:29 - Publishing and browsing documentation on the web
- 31:02 - Quick navigation
リソース
- DocC
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
- Xcode 15の新機能
WWDC22
- Swift-DocCの最新情報
- Swift-DocCコンテンツを見つけやすくする
WWDC21
ダウンロード

♪ ♪
こんにちは「Swift-DocCで充実したドキュメントを作成」へようこそ Swift-DocCチーム　エンジニアの Ethanです Xcode 15はSwift-DocCに際立たせるだけでなく読者にあなたのアプリやフレームワークを通知するためのより効果的なツールも提供します Xcode 15の新機能のドキュメンテーションプレビューそしてエディタで原稿の画面から離れる事なくドキュメントを推敲することが可能になりましたお見せするのが待ちきれないですまずは簡単な概要から Swift-DocCは Xcodeに直接組み込まれたドキュメント編集プログラムでプロジェクトのための豊富なドキュメントを作成しソースコードと共に公開することができますドキュメントの様々なコメントをソースに直接書かれたコメントと単独のMarkdown形式を組み合わせて使用します高レベルの概念的コンテンツと詳細な技術文書の両方が書けますこのドキュメントには静的ウェブ・ホスティング・ソリューションと互換性があり GitHub PagesやNetlifyなど GitHubページやNetlifyのようなサービスに直接公開することができますもちろん　ドキュメントはXcodeの組み込みドキュメントウィンドウにも表示されヘルプ付きでXcodeのソースエディタに統合されますつまり書かれた文書は書き手側で何も手を加える必要なしにソースコードにアクセスできる人なら誰でも自動的に利用できます Xcode13でSwift-DocCがリリースされて以来 Swift-DocCプロジェクトはオープンソースとなりオープンで開発されています我々はSwiftコミュニティと協力し全プロジェクトを文書化するためのサポートを追加しSwift　Objective-C またはそのミックスで書かれたものでもプロジェクトのすべてを文書化するためのサポートを追加しました、 Xcode 15 はSwift-DocC ドキュメントを書く体験を全くの別次元のものにしますドキュメント・プレビュー・エディタはリアルタイムビューにより入力中にレンダリングされた状態を表示してキーを入力するたびにフィードバックが表示されますグリッドベースレイアウトやビデオサポートカスタムページアイコンと完全カスタムテーマなどのオーダーメイドのドキュメントを作成できますこのセッションではSwift-DocCの高度な機能に焦点を当てていきますもしSwift-DocCについて学ぶのが初めてなら最初に「Meet DocC documentation in Xcode」と「Elevate your DocC documentation in Xcode」を見てくださいこの2つのセッションでは今日のドキュメントを改善するための枠組みを紹介し新しいプロジェクトに最初のドキュメントを追加するプロセスを説明します
今日はまずXcode 15の文書プレビュー・エディタを使用した新しい文書作成に取り組んでいきます新しいエデイタを使ってSwift-DocCの新しい機能を利用して既存文書の向上を図っていきましょうウェブバージョンが既存のウェブサイトにぴったりするようにカスタムテーマを作成します最後に文書をウェブに公開した後 Xcode 15ですべてのSwift-DocC ウェブサイトに追加された新しいナビゲーション機能を紹介しますさっそく見てみましょう
ここ数年私とチームは SlothCreatorと呼ばれる Swiftパッケージに取り組んでいます SlothCreatorは iOSアプリにインポートして小さなナマケモノのカタログ化やカスタマイズ表示に使用できます SlothCreator をもっとたくさんの iOSアプリに使ってもらいたい一心でドキュメントの改善に取り組んでいます SlothCreator Swiftパッケージを Xcode 15 で開きました文書の現状評価から始めましょうまずはマウスをProductメニューに移動し文書作成を選択します
Xcodeは私のプロジェクトを文書と共に構築し文書ウィンドウを開きますあなたがSwift-DocCのための特別なドキュメントを書いたことがなくてもプロジェクトで試すことができるのです Swift-DocCは自動的にあなたが書いた文書コメントを含む関連APIページを自動的に作成します文書がいかに充実しているかに驚かれるかもしれませんさらに良いことにビルドドキュメンテーションを選択するとXcodeはプロジェクトの依存関係の全ての文書も作成します例えばSlothCreatorのようなサードパーティのライブラリに依存している場合それらも表示されます SlothCreatorのトップのドキュメントページです要約文から始まり枠組みについて概要が説明されますページを少しスクロールしてトピックスのセクションに移動しますトピックは論理的なグループに編成するために使用されますまず初めてこの枠組みを使う人のための入門的な文書が含まれた基本情報がありますナマケモノの創造やナマケモノの餌付けと世話などに役立つシンボルを含んだグループがありますよく整理されたトピック・グループは発見しやすくアクセスしやすい文書を作成する鍵となります読者が文書を閲覧しやすくなるための高度なテクニックを学ぶために「Improve the discoverability of your Swift-DocC content」を見ることをおすすめしますナマケモノ構造のドキュメントを開いてみましょうクリックしてみます
Slothは本当によく文書化されています直リンクを含む関連するページへの直リンク優れた概要と始めるためのコード例よく整理されたトピックグループがあり関連するシンボルを見つけるのに役立っています「戻る」ボタンを使って SlothCreatorのトップに戻りますページをスクロールしていく物事が整理されていることにとても満足しているしかしページの一番下に実はSwiftUIモジュールを使用した今までみたことのないシンボルがありますこのシンボルはXcode 15の新しいSwift-DocC拡張機能のための表示であることがわかります Xcode 15 では他の枠組みで作成した型に加えた拡張を文書化できるようになりました拡張機能は Swift言語の強力な機能で元のソースコードに接することができないタイプの機能を追加することができます例えばSwiftUIの Viewプロトコルを拡張してアプリの追加機能を拡張できるかもしれませんこれらのアプリや枠組みの残りの部分と共に拡張シンボルの文書化ができますこの新機能は完全にコミュニティからの貢献によって実現され Swift-DocCとSwiftコンパイラの両方で調整された変更が行われました SlothCreatorのドキュメントを活用する方法をみていきましょう SwiftUI extended moduleをクリックします
SlothCreatorは SwiftUIのImage構造を拡張したので拡張機能としてここに表示されています Imageページを開くとinitializerが追加されているのがわかりますこのinitializerのドキュメントは基本的な部分は正しいのですが Sloth 構造体までの品質レベル4には達していませんここを改善したいですプロジェクトナビゲータにマウスを移動して画像拡張ファイルを選択します
プロジェクトナビゲーターを閉じます
Slothベースの画像 initializerの宣言です
宣言の上にはシンボルが記述されていて先頭の3つのスラッシュで定義されますこのinitializerに追加のドキュメントを追加したいのです Xcode 15を使った文書の最良の方法は新しい文書プレビューエディタの利用です文書プレビュー補助エディタを有効にするにはまず編集設定メニューを選択します
次に補助項目を選択します補助エディタのジャンプバーをクリックして補助モードを選択します最後に文書プレビューを選択しますこうするだけです文書プレビューはSwiftのソースファイル間を移動しても有効なままです Objective-Cのヘッダーファイルと文書のマークダウンファイル SlothCreatorで試してみましょう
楽しみですまずはディスカッションセクションの作成から始めましょう Swift-DocCは概要として文書コメントの最初の行またはページの要約文として使用します次の段落はディスカッションセクションとして使用されこのinitializerを使って「指定されたナマケモノの画像表現を表示するためにこのinitializerを使いましょう」と書いてみます文字を入力している間文書プレビューがリアルタイムで更新されレンダリングされたシンボルのドキュメントが表示されます次にこのinitializerが実際にどのように使われるかを示すコード例を追加します Markdownのフェンス付きコードブロック構文を使ってコードブロックを作ってみます
「swift」をソース言語として指定しシンタックスハイライトに使用し私のコード例を貼り付けます
この例は氷のナマケモノの画像をレンダリングするSwiftUIビューを作成する方法を示しますこの例にはUIが含まれているのでここにスクリーンショットを載せるのが良いと思いますデスクトップにはすでに用意してあります
実際にスクリーンショットを文書に使うにはまず画像を SlothCreatorの文書カタログに追加する必要があります文書カタログはSwiftパッケージに追加できるファイルのディレクトリですまたはXcodeプロジェクトに Markdownファイルの形で画像やビデオで追加の文書コンテンツを提供します長い形式の記事やチュートリアルを置く場所です追加した画像や動画は文書コメントから参照できます。プロジェクトナビゲーターを開くと SlothCreatorにはすでに文書カタログがあるのがわかりますスクリーンショットのダークモード版とライトモード版両方をドラッグします
画像を好きな場所に配置でき Swift-DocCは画像を見つけ出しますこれでどのようにカタログを構成するか自由に決めることができ私達に最も理にかなった方法で構成できますページに画像を入れたいときは画像のファイル名で参照するだけです画像やその他のファイルにも注意する必要があります画像をアプリに入れたい場合アセットカタログを使うことになりますこれで文書にスクリーンショットを追加する準備が整いました Markdownの画像構文を使用しテキストとしての説明文と画像のファイル名の両方を指定しますここでは基本ファイル名を使っていることに留意してください DocCは自動的に適切なライトとダークモードのバージョンを判断します最後に締めくくりの文で終えたいと思います
なかなかよさそうです文書プレビュー・エディターによってこのシンボルに関する豊富な文書を簡単に楽しく作成できるようになりました次にこれをトピック・グループに入れてより整理しておきたいですプロジェクト・ナビゲーターを有効にし文書カタログのなかから SlothCreatorのMarkdownファイルを選択します文書プレビューエディターは SlothCreator先頭ページのレンダリングされたコンテンツを表示しますプレビュー・エディターを使って DocCの構文がいかに機能するかを実感できますトピック・グループは第2レベルの「トピックス」見出しの下にある第3レベルの見出しで定義されていることがわかりますトピックグループにページを配置するには第3レベルの見出しの下にリスト項目を作成ページにリンクします SwiftUI Imageの拡張タイプのために今これを実行しますナマケモノの表示トピックグループに含まれるシンボルだと思いますそこにリンクしておきましょうタイプの参照を提示してくれるコード補完機能を使うと便利です
これでSlothCreatorの画像拡張機能の文書がまとまって充実していますす最初にSlothCreatorのドキュメントを公開して以来サンプル・コード・枠組みの基礎といえるプロジェクトへの要望フィードバックを頂きました対処として我々は SlothyというSlothCreatorの次代版を作り出すことにしました私の同僚はすでに下書きをしています SlothCreatorのメイン・ドキュメントに新しいSlothyサンプルへのリンクを記載したいと思います確認してみましょう SlothCreatorの文書カタログに記事の草稿を付け加えることから始めます
ここのコンテンツはすでに本当に充実していますサンプル・アプリの様々な機能を説明しアプリのスクリーンショットまで掲載されていますリポジトリへのリンクもありますでも改善できるはずです幸いなことにSwift-DocCの新機能があるので可能です Swift-DocCのオーサリング構文は Markdownの上に構築されています Markdownに慣れ親しんでいるならリンク　画像　太字や斜体のテキスト、そして表さえもすぐに使いこなせるはずです Swift-DocCはあなたのドキュメント用に作られた機能を利用可能にするディレクティブでMarkdownの基本構文を拡張します
これからこれらのディレクティブの一部を使用してSlothyのサンプル・コードに磨きをかけたいと思いますしかしこれらのディレクティブはクリエイティブに使うということです正しい使い方はひとつではないしどのようなページに使うのが正しいということもありませんこれらのディレクティブをどう使ってプロジェクトの文書をよりわかりやすくより魅力的で興味深くするにはどう使うかを考えてみてください急いで記事のレイアウトを編集しようとする前にまず具体的な問題点を明らかにすることから始めますそうすることで新しいリクエストのいくつかを採用しながら実際に改善していることを確認できますまず目につくのは目立ったことがないことですこのページは読者が特に興味を持つであろうサンプル・コードがあるにもかかわらず他の記事と同じ型ですその点でこの記事で最も重要なのはこの記事で行っている最も重要なことはサンプルコードのソース・リポジトリへのリンクですところがサンプルコードのリンクは特定・発見するのが非常に難しくなってます記事の本文にうつりましょうこのコンテンツは2つの画像と段落のペアで構成されてます各段落には関連する画像がありますここには2つの問題があります第一に画像と段落が明確に関連付けられていませんそして2つ目は画像がスペースを取りすぎているここに掲載した画像はそれぞれの段落にアクセントをつけるためのものですこれ単独ではあまり面白みがないです
最後にページの一番下は SlothCreatorのローカリゼーション・サポートの説明となっていますここに3つの異なる言語のスクリーンショットがありますただ縦に重ねただけなのでローカライゼーションの段落との関連性が失われ視覚的にスペースを視覚的にスペースを取りすぎている Swift-DocCでこれら4つの問題の解決法を説明していきます記事の本文から入っていきましょう画像と段落のペアはグリッドに配置するのが正しい解決策だと思いますこうすれば画像よりも段落の重要性を強調し画像をそれぞれのパラグラフに添付することができます Swift-DocCのグリッドはフレキシブルな行と列として定義することから始めますまず2つの列を含む行を定義することから始めます
その段落を最初の列において 2列目の画像も
画像が関連する段落に添付される方法は良いのだがパラグラフが画像より優先されるべきだと思います段落を含む行のサイズを拡大してみましょう最初の列にサイズを設定してより大きい値をデフォルト指定にしますサイズ・パラメーターは指定したコラムの範囲を設定しますサイズ3を試してみます
最初のコラムは4コラムグリッドの 3コラムにまたがってますちょっと大きすぎますサイズ2はどうでしょうか
テキストと画像のバランスが取れてますなかなかです 2番目の段落と画像のペアで同じ設定で試してみます
間違いなく進歩してますがページのバランスがあまり良くないです画像とパラグラフを反転させてみましょう
良くなりましたこの記事は本当にまとまってます我々が認識したローカライズセクションの問題点は画像が縦方向のスペースを取りすぎて縦方向のスペースが大きすぎるため文脈が失われてしまいますタブ・ナビゲーターは複数の要素を 1つにまとめることができる最適な解決策ですそれを試してみよう
3つのタブを持つタブ・ナビゲーターの初期構造を作成します
タブナビゲータは任意の数の子タブディレクティブを含んだタブナビゲータディレクティブで定義されます各タブはパラメータとして名前を提示します 3つの画像をそれぞれのタブの中に配置します
読者は各タブをクリックして興味のあるスクリーンショットにアクセスできます
もう一歩進めるために読者を惹きつけサンプルを見てわくわくさせるような簡単なビデオを付けたいと思います Swift-DocCにはビデオディレクティブがあるのでこれから入れて
ビデオそのものと説明文を提供するポスター画像がビデオ再生前に表示されます
良い感じです紹介のセクションに移ります最初に気づいた問題のひとつはサンプルのリポジトリへのアクセスリンクを特定するのが難しいという点です Swift-DocCにはこのために作られた行動を促す呼び出し方がありますまずメタデータ・コンテナディレクティブを追加しますメタデータディレクティブはページに直接レンダリングされない付加的な情報を指定するために使用されますこの場合ページにアクションを促すものを備え付けたいです
リンク先のURLと行動喚起の目的を提示しましたリンク目的としている所に留意してくださいダウンロードをすることもできるけれど今回はソース・リポジトリへリンクしたいので「リンク」がふさわしいです最終的にはこの記事を SlothCreatorのドキュメントの他の記事よりも際立つものにしたいですこのページにサンプル・コードが掲載されていることを認識してほしいです Swift-DocCはサンプルコードを含む記事に対応していることがわかりましたこのページの種類はサンプルコードであることを示すためにサンプルコードでPageKind ディレクティブを指定しますレンダリングされたページには「Sample Code」というタイトルの見出しと中かっこをつけたページアイコンが追加され目立つものになりました Swift-DocCは「article」と「Sample Code」の2つの値をディレクティブで支持しています他のデフォルトページの種類についてぜひお聞かせくださいオープンソースプロジェクトですので SwiftフォーラムはDocCが文書化ニーズをどのように満たすのかについてお持ちかもしれないフィールバックやご意見を議論するのにうってつけの場所です
アプリでSlothCreatorを使うことに興味があるデベロッパはこの記事を読んで本当にわくわくすると思います興味深くて思慮深く楽しめる絶対に読んでもらいたいですそれではSlothCreatorのページトップへ戻って目立つ場所を見つけてリンクを張ります
まず新しい記事をトピック・グループにまとめていきます今回は、必需品グループが最も適切だと思います SlothCreatorフレームワークを初めて使う人がSlothyサンプルに興味を持ってくれるのを期待しているからです
良いスタートを切ったといえるけどさらに一歩進みこの記事をページの一般的なトピック欄の上に掲載したいです Linksディレクティブはこれに最適です特集セクションを作成し Linksディレクティブを挿入します
リンクはページのハイライトに最適ですカード画像とページの説明をより高度に入れるのに適していますリンクディレクティブはビジュアルスタイルパラメータを受け付けますリンクはレンダリング方法を定義しトピックグループのようにリンクのリストを記述します Slothyのサンプルにリンクしておきます
Linksはデフォルトのトピックセクションのように表示される基本的なリストから詳細なグリッドまで様々なビジュアルをサポートしています
グリッド・スタイルはいいと思うがここにSlothyサンプルを表すカスタム画像を入れたいです SlothyのMarkdownに戻ってみましょうナマケモノ記事を作るためにグリッド・ベースのリンク・セクションでのプレゼンに最適ですメタデータに画像を提供する必要がありますそれでは始めましょう
目的を「カード」に指定して Slothy画像がカードとしレンダリングされるときに altテキストとして画像のソースと説明文を指定します Slothyクリエイターのページに戻ると
Slothyがカスタム画像でレンダリングされるようになりました「Getting Started with Sloths」の記事も紹介します
仕上げとしてトップのページにもメタデータを追加するつもりです前と同様にメタデータディレクティブを作りますそしてページ画像を提示します
今回は「カード」ではなく「アイコン」を指定していますしたがって　ナビゲーション・サイドバーやページの紹介セクションを含むページのアイコンがレンダリングされるあらゆる場所で使用されます最後にカスタムページカラーを設定します
デフォルトでトップページは青色を使用しますが Swift-DocCは黄色やパープルとオレンジなどの多くの標準色を備えています SlothCreatorは通常緑をアクセントカラーとして使うのでそれを使うことでよりまとまりのある体験を作ることができると思います
わあ SlothCreatorのドキュメントがわずかな時間でずいぶん進歩しました行と列　タブナビゲータービデオタブナビゲーターのようなレイアウト・ディレクティブを使うことでビデオはこのサンプルコードの記事の流れを良くして読者を惹きつけることができましたメタデータディレクティブを使用して CallToActionとPagekindtoはさらに洗練されたレベルになりました Linksディレクティブで注目のコンテンツを高め PageColorとPageImageディレクティブでトップレベルページにブランディングを追加しています更新されたSlothCreatorの文書を共有できてとても嬉しいですその新しいリリースをウェブに公開する前にカスタムテーマを使って SlothCreatorのドキュメントのオンラインプレゼンテーションを最適化します SlothCreatorの文書は大きな製品のウェブサイトの一部として公開されていますドキュメントサイトと製品サイトが同じカラーパレットとフォントセットで統一されていることを確認する必要がありますではSwift-DocCでカスタムテーマを使って見てみましょう色　ボーダー　アイコン　フォントのような視覚的なスタイルがドキュメントサイトでレンダリングされる方法を完全にカスタマイズすることができますこれらのカスタマイズは文書カタログに含まれる特別なJSONファイルで行われ文書サイトと他のオンラインでの存在をよりよく統合することができます Swift-DocCのテーマツールを使用すると特定の企業スタイルに合わせたり　マーケティングサイトや個人のブログにフィットできますしかしテーマ設定はすべての文書カスタマイズに適したツールではありません特定のページの外見をカスタマイズしたい場合はカスタムテーマではなくそのページでディレクティブを使うべきですテーマのカスタマイズはサイト全体でページに対するものではありませんまたSwift-DocCのテーマは意図的に配置に特化したことも重要です Xcodeで文書を開くとあなたの文書は Xcodeのテーマでレンダリングされ続けそこに表示される他のすべての文書と一緒に美しく表示されます Xcodeでの読書体験にどのような影響を与えるかを心配することなくカスタムテーマをサイトの存在に集中させることができますしかしXcodeとウェブの両方にカスタマイズを表示させたい場合はディレクティブを使う方が良いです SlothCreatorのカスタムテーマを見てみましょう Swift-DocC のテーマは特定の名前のプロジェクトのドキュメントカタログに置く JSONファイルによって定義されますテーマ設定ファイルで行うカスタマイズには様々な種類があります SlothCreatorのサイトの色とフォントをカスタマイズしますこれらのカスタマイズはそれぞれタイプグラフィのセクションに配置されます
SlothCreatorはマーケティング資料の中で特定の緑色の色合いを使用しています私はすでにSlothCreatorのページカラーディレクティブを使用してページ先頭の色を緑に設定しました「標準緑」の色変数を使うことで特定の緑色を設定することができます SlothCreatorは本格的なSloth のプロをターゲットにした本格的なフレームワークだからですオンライン・ドキュメントで Serifフォントを使おうと思いますそれはHTML-font タイポグラフィ変数でできますもちろんこれはSwift-DocCテーマで可能なことの一部にしか過ぎません Swift-DocCのドキュメントを読むことをおすすめしますこれで「theme-settings.json」ファイルを設定します文書カタログに追加しておきます
SlothCreatorのソース管理リポジトリは「xcodebuild」コマンドラインツールを使用し新しくコミットをプッシュしたときいつでも継続的なインテグレーションで SlothCreatorを構築しデプロイします文書は常にフレームワークの最新の変更に対応していて素晴らしい流れになっています同様のワークフローの Xcodeのドキュメントの Swift-DocCセクションを参照してみてくださいこれらの変更点を発表できることをとても楽しみにしています今すぐプッシュしウェブサイトの新しいデプロイをしましょう Xcodeウィンドウの左上隅にマウスを移動しソース・コントロール・ナビゲーターをすべての変更をステージングしコミットメッセージを
追加しますそしてコミットとプッシュします
ではSlothCreatorのウェブサイトを開いてみましょう SlothCreator製品サイトのトップページです SlothCreatorのブランドと一致する特定のフォントと色を使用しています「Read Documentation」ボタンをクリックしてみましょう
こちらがSlothCreatorのドキュメントですウェブサイト版は私たちが適用したカスタム・テーマでフォントとグリーンの濃淡が特徴的です私たちが設定したカスタム・アイコンと注目セクションに最新のSlothyのサンプルコード記事も掲載されています「View sample code」のリンクから開くことができますこの記事の仕上がりには本当に満足してます Swift-DocCのウェブサイトも素晴らしいナビゲーション・サイドバーのトピックスセクションで整理したページをナビゲートしてくれます一番上はEssentialsグループで Slothyのサンプル・コードの記事と「入門」の記事が並んで Sloth構造体もそこにあります Sloth構造体を拡大するにはその左側にある三角マークをクリックすることで構造体の子セクションを参照できこれらの記号はトピック・グループでもよく整理されています先ほど説明した画像initializerを確認してみましょうスクロールダウンしてSloth Viewsのセクションに移動します画像拡張のシンボルを展開しイニシャライザをクリックしますさあ　いよいよデベロッパが直感的に閲覧できナビゲーションのサイドバーを使ってドキュメントの著者として自分のプロジェクトのAPIをガイドすることができることを光栄に思います時にはドキュメントの一読者として自分が探しているページが何なのかがはっきりわかっていることもあって簡単にそこへ移動できる方法があればいいと思うこともあります Xcode 15で構築された Swift-DocCウェブサイトには新機能の迅速なナビゲーション機能があり Swift-DocCクイックナビゲーションは私たちが本当に楽しみにしている別のコミュニティ主導の取り組みです Xcodeの素早く開く機能に似ていてキーボード・ショートカットを有効にしてその名前を入力するだけでそのページにジャンプできるのですではさっそく始めましょう Shift-Command-O を押しクイックナビゲーションを起動します
すぐにSlothCreatorのドキュメントのすべてのページでフィルタリングを開始できます例えばスタートアップの記事を探しているなら「start」と入力するでしょう
これです右側にはドキュメントのプレビューまで表示されます
Enterキーを押してページに移動
たぶんナマケモノの力の違いとは何かを思い出す必要があるでしょうもう一度Shift-Command-Oを押し「power」と入力します
これがパワーピッカーで次に「power」プロパティああこれだ　パワー列挙型今回は「View more」のリンクからページを開きます
そうして私はナマケモノの力について知ることができます新しいクイックナビゲーションポップオーバーと既存のナビゲーションサイドバーの両方で Swift-DocCはあなたのドキュメントを閲覧することを本当にやりがいのある体験にしてくれる事でしょう Xcode 15のSwift-DocCは真にユニークなドキュメントウェブサイトを作成する強力な新しいツールを備えています最新ドキュメント・プレビュー・エディタをお試しください様々なページレイアウトを探索しそれらがどうリアルタイムでレンダリングされるかが体験できます新しいディレクティブLinksや PageImageのような最新ディレクティブを使用してあなたならではのプロジェクトを強く主張するドキュメントを作成できますまたカスタムテーマを追加してウェブ版のドキュメントをプロジェクトのブランディングや既存のオンライン・レゼンスと統合させるべきかも検討してください Swift-DocCの最新情報は WWDC22の「What's new in Swift-DocC」セッションをご覧くださいこのセッションではXcode 14 に搭載された新しい公開ワークフローについて詳しく説明しGitHubページのような静的ホスティングサービスに公開する方法を紹介しますさらにステップ・バイ・ステップのチュートリアルであなたの文書をさらに進化させたいと思うなら「Build interactive tutorials using DocC」をご覧くださいあなたがSwift-DocCとXcode 15を使用してデザインしたドキュメントを見るのがとても楽しみですご視聴ありがとうございました ♪ ♪

import SwiftUI

/// An extension that facilitates the display of sloths in user interfaces.
public extension Image {
    /// Create an image from the given sloth.
    ///
    /// Use this initializer to display an image representation of a
    /// given sloth.
    ///
    /// ```swift
    /// let iceSloth = Sloth(name: "Super Sloth", color: .blue, power: .ice)
    ///
    /// var body: some View {
    ///     Image(iceSloth)
    ///         .resizable()
    ///         .aspectRatio(contentMode: .fit)
    ///     Text(iceSloth.name)
    /// }
    /// ```
    ///
    /// ![A screenshot of an ice sloth, with the text Super Sloth underneath.](iceSloth)
    ///
    /// This initializer is useful for displaying static sloth images.
    /// To create an interactive view containing a sloth, use ``SlothView``.
    init(_ sloth: Sloth) {
        self.init("\(sloth.power)-sloth")
    }
}

16:31 - Creating a grid-based layout

@Row {
    @Column(size: 2) {
        First, you customize your sloth by picking its 
        ``Sloth/power-swift.property``. The power of your sloth influences
        its abilities and how well they cope in their environment. The app
        displays a picker view that showcases the available powers and
        previews your sloth for the selected power.
    }
    
    @Column {
        ![A screenshot of the power picker user interface with four powers displayed – ice, fire, wind, and lightning](slothy-powerPicker)
    }
}

@Row {
    @Column {
        ![A screenshot of the sloth status user interface that indicates the the amount of sleep, fun, and exercise a given sloth is in need of.](slothy-status)
    }
    
    @Column(size: 2) {
        Once you've customized your sloth, it's ready to ready to thrive.
        You'll find that sloths will happily munch on a leaf, but may not be as 
        receptive to working out. Use the activity picker to send some
        encouragement.
    }
}

18:16 - Creating a tab navigator

@TabNavigator {
    @Tab("English") {
        ![Two screenshots showing the Slothy app rendering with English language content. The first screenshot shows a sloth map and the second screenshot shows a sloth power picker.](slothy-localization_eng)
    }
    
    @Tab("Chinese") {
        ![Two screenshots showing the Slothy app rendering with Chinese language content. The first screenshot shows a sloth map and the second screenshot shows a sloth power picker.](slothy-localization_zh)
    }
    
    @Tab("Spanish") {
        ![Two screenshots showing the Slothy app rendering with Spanish language content. The first screenshot shows a sloth map and the second screenshot shows a sloth power picker.](slothy-localization_es)
    }
}

19:07 - Adding a video

@Video(poster: "slothy-hero-poster", source: "slothy-hero", alt: "An animated video showing two screens in the Slothy app. The first screenshot shows a sloth map and the second screenshot shows a sloth power picker.")

19:50 - Specifying a page's "Call to Action" link

@Metadata {
    @CallToAction(purpose: link, url: "https://example.com/slothy-repository")
}

20:29 - Specifying a page's kind as "Sample Code"

@Metadata {
    @CallToAction(purpose: link, url: "https://example.com/slothy-repository")
    @PageKind(sampleCode)
}

21:55 - Using the "Links" directive to feature content

@Links(visualStyle: detailedGrid) {
    - <doc:GettingStarted>
    - <doc:SlothySample>
}

22:55 - Specifying a page's card image

@Metadata {
    @PageImage(
        purpose: card, 
        source: "slothy-card", 
        alt: "Two screenshots showing the Slothy app. The first screenshot shows a sloth map and the second screenshot shows a sloth power picker.")
}

23:41 - Specifying a page's icon image

@Metadata {
    @PageImage(
        purpose: icon, 
        source: "slothCreator-icon", 
        alt: "A technology icon representing the SlothCreator framework.")
}

23:42 - Specifying a page's color
```
@Metadata {
    @PageColor(green)
}
```

27:04 - theme-settings.json

{
    "theme": {
        "color": {
            "standard-green": "#83ac38"
        },
        "typography": {
            "html-font": "serif"
        }
    }
}

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

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

関連する章

リソース

関連ビデオ

WWDC23

WWDC22

WWDC21