❷ PlaygroundsでApp教材を動かす
Playgrounds 4 をダウンロードし、さっそく使ってみましょう。
Appプロジェクト画面を詳しく説明し、App教材（チュートリアル）の進め方を『Appの作成を始めよう』を例に、ライブラリを使ったキー入力不要な使い方などを含め順にじっくり解説します。
【2022年2月20日 🟢 5.3 サイドバー App設定 機能 に説明を追加しました】
ここでの App教材 とは Playgrounds で無料でダウンロードできる Apple が提供する教材（説明・課題付きサンプル）のうち App 構築用プロジェクトのことです。
この記事は『Playgroundsでアプリデビュー』マガジンで読むことができます。
『Playgroundsでアプリデビュー』マガジンの構成 ➡️このnote
⓪ iPadでアプリを作ろう【無料記事】
❶ App Store からアプリをリリースする準備
➡️❷ PlaygroundsでApp教材を動かす
❸ Playgrounds App教材のすべて 前編
❹ Playgrounds App教材のすべて 後編
❺ Playgournds でアプリの作り方
❻ Playgrounds で作ったアプリを公開する
🟩 1 前提
iPad版 Swift Playgrounds 4 を説明します。
iPadOS は 15.2 です。
アプリが作成可能なのは 15.2 以降です。
必ず 15.2（またはそれ以降）にアップデートしてください。
（画面キャプチャーは12.9インチです）
1. 1 プログラミング未経験の場合
プログラミングの経験が全くない場合は、最初に「コードを学ぼう」1 と 2 をやってください。
コードを学ぼう 1 と 2 はページ数も多くすべてやるには時間が必要ですが、プログラミングを自然に体験できます。
できるだけすべてやってください。
「コードを学ぼう」に取り組む場合の参考記事として下記を参照してください：
1. 2 Swift言語未経験の場合
ほかのプログラミング言語の経験がある場合は「コーディングを始めよう」に取り組んでください。
「コーディングを始めよう」は「コードを学ぼう1」のダイジェスト版です。
何かのプログラミング言語を経験済みの場合、「コーディングを始めよう」をやることによって Swift の特徴と Playgrounds の操作を把握できます。
1. 3 用語
Playgrounds のバージョン4 で追加になった App プロジェクト関連の用語が不明なため、この記事では独自の用語を使っている部分があります。
ボタンの名称などは日本語環境の VoiceOver の読みで確認しました。
App教材
Playgrounds の Apple 製のアプリ用プロジェクトを『App 教材』と表記します。
一般には「サンプルプロジェクト」に相当します。
内容は、解説を読みながら順に操作する「チュートリアル」です。
🟩 2 Playgrounds 4 について
ホームでは「Playgrounds」と表示されます。
正式名称は「Swift Playgrounds」のバージョン 4 です。
Apple製の無料アプリです。
iPadOS用と macOS用があります。
ここでは iPadOS用を使います。
⚠️macOS用はバージョン 4 でも App を作成できません。
App教材をダウンロードしたり、開くこともできません。
Playgrounds アプリは 2021年12月16日のアップデートでバージョン4になりました。
🟩 3 インストール
Playgrounds のインストールは上記リンクか、iPadOS の App Store で「playgrounds」を検索してください。
「Swift Playgrounds」を選んでください。
（ダウンロード済みなので「開く」となっています）
「入手」（またはアップデート）してください。
Swiftのアイコンの通常の iPadOS 用アプリです。
🟩 4 起動
タップで起動します。
アップデートした場合はこれまで使っていた書類がそのまま表示されるはずです。
この画面では古いプレイグラウンド書類はすべて削除した状態です。
一番下の「プレイグラウンドを取得」には主なプレイグラウンド書類が並びます。
『Appの作成を始めよう』を選ぶとダウンロードされます。
タップして開きます。
Playgrounds 4 の Appプロジェクト画面はバージョン3.4（ブック書類）の画面と少し違います。
Playgroundsのマイプレイグラウンドの内容は iCloud Drive の Playgrounds フォルダーにあります。
「ファイル」アプリで確認できます。
ファイルアプリでも教材ファイルの削除や移動ができます。
🟩 5 画面説明
『Appの作成を始めよう』は Apple が提供する App 教材（プレイグラウンド書類）です。
App教材はサンプル Appプロジェクト の中に日本語チュートリアルが組み込まれています。
🟢 5.1 App プロジェクト画面
この書類を開いた状態でAppプロジェクトの画面各部を説明します。
5.1 1 閉じるボタン（× ボタン）
マイプレイグラウンド画面に戻ります。
5.1 2 サイドバー切り替えボタン
サイドバー内の説明は『🟢 5.3 サイドバー』に書きます。
サイドバーの開閉状態を切り替えます。
5.1 3 Appを実行ボタン
実行すると画面が Playgrounds App ウインドウに切り替わります。
詳しくは『🟢 5.4 実行画面』に書きます。
5.1 4 Appプロジェクト名
マイプレイグラウンド画面で表示される書類名です。
アプリの名前とは別です。
5.1 5 ライブラリから追加ボタン（＋ボタン）
ポップアップするリストを選ぶだけで、必要な入力ができます。
挿入位置で表示内容が変わるようです。
検索フィールド
ライブラリを検索（絞り込み）します。
日本語でもSwiftUIの用語でも検索できます。
ビューボタン
ビューなどの一覧です。
タップで挿入できます。
エディター内の挿入ポイントがどこにあるかで表示する内容が絞り込まれるようです。
分類：新規、コントロール、レイアウト、ペイント、その他 があります。
項目名はすべて日本語です、個人的には SwiftUI のキーワードそのまままたは併記が良いように思います。
モディファイアーボタン
「モディファイアー」は SwiftUI の用語です。
ビューのメソッドで色などを指定したり、機能を追加するなどいろいろあります。
分類：コントロール、エフェクト、レイアウト、テキスト、イメージ、リスト、ナビゲーションバー、スタイル、アクセシビリティ、イベント、ジェスチャ、図形、その他 があります。
シンボル
SF Symbols のイメージを表示します。
イメージを選ぶと、挿入位置にそのシンボルを表示するコード Image(systemName:... を挿入します。
分類：All、What's New、Multicolor、Communication、Weatherなど macOS の SF Symbols アプリと同じ分類を英語表記しています。
分類は横スクロールできます。
Xcode にもまだない、とても便利な機能です。
（macOS の SF Symbols アプリは日本語環境では分類も日本語で表示します）
シンボルを探す時は検索フィールドで絞り込むのが便利です。
カラー
色を指定します。
分類：ダイナミック、階層、グレイスケール
5.1 6 その他ボタン （⋯⃝ ボタン）
Appプロジェクト特有のボタンです。
ヘルプ
iPadOS用の Swift Playgrounds ユーザーガイド を表示します。
ヘルプの表示はオンラインで、Playgroundsのアップデートとは独立して更新されます。
ネットワークに接続していない場合は「インターネットに接続していません。」と表示されます。
ドキュメント
英文のフレームワークドキュメントを表示します。
ドキュメントの本文は web のドキュメントと同じです。
web ブラウザーで表示すると翻訳機能を使えるので便利です。
ドキュメントウインドウは独立したウインドウです。
このため上部のマルチタスクコントロール（三つの点部分）をタップして、表示を切り替えることができます。
文字サイズ
ぁ 100% あ がそれぞれボタンになっていて、コードの文字サイズを調整します。
中央のパーセント表示をタップすると 100% に戻ります。
テキスト選択（コメント行）
コードの選択行をコメントにします。
選択部分がコメントの場合はコメントを解除します。
行番号を表示
行番号の表示／非表示を切り替えます。
メニューは「行番号を表示」と「行番号を非表示」がトグルします。
プロジェクトを共有
編集中のプロジェクトを共有します。
プロジェクト名とサイズ（容量）が確認できます。
詳細
デベロッパー登録済みの Apple ID を設定します。
Apple の App教材をダウンロードして実行する場合は、何も設定しなくても大丈夫です。
フィードバックを送信
Playgroundsアプリでの不具合などを Apple に連絡するメニューです。
使用許諾契約
Playgroundsアプリとプロジェクトの使用許諾契約を表示します。
スクロールすると、日本語部分も読むことができます。
5.1 7 目次ボタン 【ガイド表示中】
ガイド（Apple の App 教材だけの機能）表示中に利用可能なボタンです。
課題の目次を表示し、課題を完了するとチェックマークが付きます。
ダウンロードしたばかりの状態
すべて完了した表示
ガイドを表示ボタン
Apple の App 教材だけの機能です。
教材の説明を表示します。
ガイド表示中にタップすると、ガイド（右側のサイドバー）を閉じます。
説明は日本語に翻訳済みです。
タスクはタップ可能で、タップするとそのタスクを開始します。
タスクにより関連するコードのソースファイルに（タブが）切り替わります。
コード上部にも説明や課題が表示されます。
プレビュー表示
表示中のコードに対応するプレビューを表示します。
コードを修正するとプレビューも更新されます。
プレビュー表示中にプレビューボタンをタップすると、プレビューが閉じエディターを広く使えます。
キャンバスを拡大ボタン 【プレビュー表示中】
プレビューを全画面に切り替えます。
全画面表示中は キャンバスを縮小 ボタンに切り替わります
キャンバスを縮小ボタン
プレビューをソースコードの横に表示します。
プレビューを閉じると表示が変わる
プレビュー（右側のサイドバー）の幅はエディターとの境界ドラッグで変更できます。
プレビューを閉じるとボタンのレイアウトが変わり、同じ間隔に並びます。
説明のリンク部分
説明文の青い部分は用語説明（詳細）にリンクしています。
Swift や SwiftUI ドキュメントの内容を表示する場合は英文で表示されます。
日本語での用語解説もあります。
コンソールを開くボタン
コンソール開くボタンをタップすると画面下からコンソール画面が迫り出します。
コンソール画面はコードの print 文で出力した文字を確認できます。
コンソールを開いた状態でこのボタンをタップすると閉じます。
🟢 5.2 エディター画面
エディター（コーディング領域）はコードを学ぼうなど Playgrounds のブック形式教材とは変わっています。
下に候補を表示しない
App 教材のエディターには画面下に「ショートカットバー」はありません。
コードを学ぼうなどの教材（ブック形式教材）では「ショートカットバー」からコマンドを選ぶことができました。
🟢 5.3 サイドバー
サイドバーは App を構成するファイル一覧リストでエディターに表示するファイルを選択します。
ファイル追加ボタン
（VoiceOverでは「新しい持ち物を追加」ボタンと読みます）
Swiftファイル、フォルダ、写真、挿入元...、Swiftパッケージ などを追加します。
挿入元は iPad または iCloud Drive からファイルを挿入する場合に選択します。
検索フィールド
App 教材独自の機能です。
すべてのファイル内のコードを検索します。
検索フィールドを選ぶと 検索オプションボタン と キャンセルボタン を表示します。
サイドバーは検索結果または検索履歴表示に切り替わります。
検索する文字列を入力しリターンキーで検索結果を表示します。
検索結果の //# 部分は教材特有のコマンドのためのコメントです。
このコマンド部分はエディターには表示されません。
検索オプションボタン
「大文字小文字を区別」と「大文字/小文字を無視」を切り替えます。
履歴を表示している場合は「履歴を消去」項目が追加されます。
キャンセルボタン
検索をキャンセルしサイドバーは通常表示に戻ります。
App設定ボタン
アプリの名前、アクセントカラー、アイコン、機能 を設定します。
App設定 名前
App の名前で、ホーム画面でアイコンの下に表示します。
App設定 アクセントカラー
ボタンなどコントロールの色です。
Playgrounds アプリのアクセントカラーは青です。
App設定 カスタム（アイコン）
"ファイル"から読み込む…、"写真"から読み込む…、クリップボードからペースト でカスタムアイコンにする画像を設定します。
App設定 プレースホルダ（アイコン）
複数のアイコンから選びます。
ダウンロードした App教材で、プレースホルダに切り替えるとカスタムアイコンは消えてしまいます。
復元はできないようです。
App設定 機能
英語表示では App Capability です。
「機能」をタップすると画面がかわります。
機能を追加をタップすると「機能を追加」画面を表示します。
すべての機能のリスト（合成画面）
プライバシー関連のデータにアクセスする場合は、このリストから機能を選び許可を求めるメッセージ（目的説明の文字列）の入力が必要です。
⚠️この設定はアプリを提出する場合に使われます。
連絡先を選ぶ例
説明と「目的説明文字列」入力欄を表示します。
入力し追加ボタンをタップします。（例として「連絡先の氏名を表示します【動作確認】」と入力しました）
App設定に戻ると「連絡先」が設定済みと確認できます。
⚠️ Playgrounds 4 で実行している場合は入力した「目的説明文字列」は使われません。
アプリをアップロードする場合はこの画面にさらにボタンが追加されます。
実際の使い方や注意点は『❻ Playgrounds で作ったアプリを公開する』の『🟩 4 Playgroundsでアップロード前に入力が必要な項目』を参照してください。
完成したアプリをアップロードする場合も App設定画面を利用します。
コード
Swiftファイル名（またはフォルダー）のリストです。
ファイル名に拡張子は表示されません。
選択すると内容を表示します。
App フォルダー内に4つのソースコードがあり、App フォルダーと同じレベルに License.txt を持っています。
アセット
このアプリが内蔵する画像ファルなどのリストです。
ここに表示されている名前でコードからアクセスします。
選択すると内容をエディターに表示します。
「App の作成をはじめよう」の画像は コードを学ぼう のキャラクターが使われています。
アセットに4つの画像を持つことを確認できます。
🟢 5.4 実行画面
実行すると画面が Playgrounds App ウインドウに切り替わります。
実行画面は Playgrounds アプリの独立したウインドウとして開きます。
アプリとして実行するので Playgrounds で最後に表示していたプレビュー画面ではなく、アプリ開始時に指定されたビューを開きます。
最初に短時間画面上部中央からアプリ名表示が下がってきます。
右側は 再起動ボタン です。
Playgrounds > をタップすると実行を管理するパネルを表示します。
アプリが想定通り動作しない場合などでもこの方法でプロジェクトに戻ることができます。
アプリが正常に動作すると Swift マークの赤い Swift ボタンを表示します。
実行を停止するにはこのボタンをタップします。
【⚠️VoiceOverではこのボタンを認識しません】
停止のほか再起動とプロジェクトを表示などが選べます。
正式名称不明ですがここでは実行管理パネルとします。
5.4 1 実行管理パネル【正式名称不明】
再起動や停止はこのパネルを使います。
アプリ名
App設定画面で設定した名前です。
（日本語でも表示可能です）
再起動ボタン
アプリを再起動します。
停止ボタン
アプリを終了し、プロジェクト表示に戻ります。
プロジェクトを表示ボタン
アプリを実行した状態で、プロジェクト表示に戻ります。
コードの表示や修正ができます。
実行中は実行ボタンのアイコンが変わります
ボタンをタップすると「Appをアップデートして表示」と「Appを停止」が選べます。
コードを追加・修正した場合は「Appをアップデートして表示」してください。
コンソールを表示
アプリの実行画面左下にコンソール開くボタンを表示します。
コンソール開くボタンをタップすると画面下からコンソール画面が迫り出します。
コンソール画面はコードの print 文で出力した文字を確認できます。
Appのデータを削除して再起動
アプリの内部に設定や直前の状態などを保存する場合があります。
このデータを削除して再起動します。
状態の保存などに問題がある場合に、初期状態に戻して再起動できます。
（設定や状態を保存していない場合は、通常の再起動と同じです）
5.4 2 クラッシュなど
App を実行してクラッシュした場合などに特別な画面を表示するそうです。
🟩 6 App教材実行
Appleが提供する App教材（プレイグラウンドAppプロジェクト書類の一種）はコードとは別に課題・説明を表示するガイドを持っています。
ガイド（説明）に従って操作してください。
ガイド説明文の青い部分は 詳しい説明 にリンクしています。
すべての用語説明を表示して確認し、どんどん SwiftUI を吸収し、プログラミング言語 Swift に詳しくなってください。
説明の中にもリンクがあります、これらの説明ももちろん表示できます。
最初はだれもがわからないことだらけです、用語はたくさんありますが焦らず行きましょう。
完了するとチェックマークを表示し、次にすすめます。
コード入力の注意
コード入力の一般的な注意点の一つにまぎらわしい英数字があります。
正しく入力しないとエラーになります。
見ただけでは違いに気づかないことも多いので、入力時に注意してください。
小文字のエルと数字のイチ l はエル 1 はイチです。
小文字のエルと大文字のアイ l はエル I はアイです。
大文字のオーと数字のゼロ O はオー 0 はゼロです。
エディター（コーディング領域）では区別しやすい書体で表示します。
l はエル 1 はイチです。
l はエル I はアイです。
O はオー 0 はゼロです。🟩 7 じっくり取り組む「Appの作成を始めよう」
「Appの作成を始めよう」は SwiftUI を使ったアプリの最初に取り組む教材です。
説明の指示通り操作し、タスクを完了してください。
エディターの操作に慣れるためにもじっくり取り組みましょう。
基本的には難しいことはありません。
でも、説明どおりにしたつもりでも先にすすめない事もあります。（私はありました😅）
説明をよく確認し、エディターの入力と比較して問題を解決してください。
リセットはできないので、最初からやり直すには削除してダウンロードしなおすのが確実です。
さっそくダウンロードした状態からはじめましょう。
🟢 7.1 Appの作成を始めよう
次画面のようにガイドを表示するはずです。
「Appの作成を始めよう」を表示していない場合は、ガイドを表示ボタン
をタップしてください。
今後も記事を増やすつもりです。 サポートしていただけると大変はげみになります。