❺ Playgrounds でアプリの作り方
Playgrounds 4 では実際に iPad だけで iPad と iPhone で実行可能なアプリを作ることができます。
できるのですが、説明や資料が少なく、開発経験者でなければなかなか使いこなすことができません。
アプリに仕上げるための情報をまとめました。
今回はデベロッパー登録なしで試せる範囲です。
ホーム画面にアイコンで保存する方法と App Store にアップロードは次回です。
サンプルとして 1 画面のみのデジタル時計アプリを作ります。
【2022年2月12日 4.1.3 サンプルの全体構成 を追加しました。そのほか若干加筆しました。】
【2022年2月20日 🟢 6.1 プロパティリストの設定不要【設定ができない】に機能の説明を追加しました】
この記事は『Playgroundsでアプリデビュー』マガジンで読むことができます。
マガジンは複数の有料記事をリーズナブルに読めます。
『Playgroundsでアプリデビュー』マガジンで6つの有料記事が読めます。
『Playgroundsでアプリデビュー』マガジンの構成 ➡️このnote
⓪ iPadでアプリを作ろう【無料記事】
❶ App Store からアプリをリリースする準備
❷ PlaygroundsでApp教材を動かす
❸ Playgrounds App教材のすべて前編
❹ Playgrounds App教材のすべて後編
➡️❺ Playgournds でアプリの作り方
❻ Playgrounds で作ったアプリを公開する
iPadOS 用 Playgrounds アプリが2月1日 4.0.1にアップデートされました（変更点非公表です）
この記事では『Playgrounds 4』と表記します。
Mac用の Playgrounds アプリはアップデートはありません。
アプリの正式名称は『Swift Playgrounds』ですが、この記事ではホーム画面上の名称である『Playgrounds』と表記しています。
🟩 1 iPad用アプリ Playgrounds でアプリを作る
無料アプリ Playgrounds の使い方だけマスターしてもアプリは作れません。
アプリを作るにはプログラミング言語 Swift と SwiftUI プログラミングのある程度のスキルは必要です。
🟢 1.1 SwiftUI を使う
アプリの画面レイアウトやデータ表示や結果保存を SwiftUI フレームワークのやり方で処理します。
SwiftUI は（従来の）手続き型プログラミングとはかなり違っているので、（プログラミング経験者ほど）戸惑うことも多いかもしれません。
名前からもわかるように SwiftUI は Swift 言語専用です。
1 画面が最もシンプルなアプリです。（例えば摂氏と華氏の温度変換や通貨の円ドル計算それに時計など）
画面の切り替えなども SwiftUI は独特です、少しづつ経験を積みプログラミングに慣れましょう。
サンプルを入力したり変更したりしながらスキルを獲得してください。
いろいろ試して身につける戦略がおすすめです。
1.1.1 最初に勉強してそれから試すはあまりおすすめできない
必要な情報が広範囲なので勉強（情報収集）を先に済ませようとすると挫折しがちです。
最初はサンプルを動かし、少し変更しながら SwiftUI を覚えましょう。
Playgrounds 4 のサンプル（App教材）はいろいろなバリエーションがありますが、難しいものも多いので「❹ Playgrounds App教材のすべて後編」を参考に取り組む順番に注意してください。
アプリ作りに王道はありません、時間はかかります。
それから Swift も SwiftUI も毎年機能が強化されます（6月ごろ発表があり秋にリリースされます）。
一部は使われなくなり（別の新しいやり方が登場するなど）最新環境では修正が必要になることもあります。
🟢 1.2 Playgrounds 4 で作るアプリは iPadOSとiOS共用
Playgrounds 4 で作ったアプリは iPad だけでなく iPhone でも実行できます。
次回「❻ Playgrounds で作ったアプリを公開する」で説明する方法で TestFlight または App Store で配布するアプリは iOS 15.2 以降であれば iPhone でもダウンロード可能です。
🟩 2 App テンプレート
Playgrounds の App テンプレートはアプリの最小構成です。
実行するとシンボルと文字列を表示する 1 画面だけのアプリです。
表示内容を切り替えるとすぐに独自アプリになるので、シンプルなアプリの土台に最適です。
🟢 2.1 テンプレートを使う
「マイプレイグラウンド」画面の下にあるリストの左端にある「App」をタップすると保存できます。
名称は「マイApp」でアイコンと色はランダムにかわります。
プロジェクトの名称は「マイプレイグラウンド」画面で変更できます。
サムネイル長押しで名前を変更や複製が可能です。
保存した「マイApp」プロジェクトを開くと ContentView のコードとAppのプレビューを表示します。
2.1.1 ファイル構成
ファイル構成を説明します。
サイドバーを開くとプロジェクトのファイルを確認できます。
サイドバーのファイル名には拡張子は表示されません。
「マイApp」の部分が「App設定」を開くボタンになっています。
「App設定」でアイコンやアプリ名はいつでも変更できます。
2.1.2 ContentView
プロジェクトを開くと、最初に表示するファイルです。（ファイル名は「ContentView.swift」です）
アプリが起動時に表示するビュー（最上位ビュー）のコードです。
// ContentView のコード
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}
}
}このコードの内容をプレビューに表示します。
Playgrounds 4 では、コードの修正はただちにプレビューの表示にも反映されます。
表示されているのはアプリのプレビューです。
App テンプレートの ContentView にはプレビューを表示するコードは付いていません。
詳しくは「🟩 7 プレビューと実行の違い」で説明します。
2.1.3 MyApp
アプリの実行開始部分のコードです。（ファイル名は「MyApp.swift」です）
// MyApp のコード
import SwiftUI
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}コードはシンプルで行数も少ないですが重要なキーワードがたくさんあります。
詳しくは「SwiftUIアプリのの構造」にまとめて書きます。
🟩 3 SwiftUI アプリ
Playgrounds 4 では SwiftUI フレームワークを使ってアプリを作ります。
🟢 3.1 Playgrounds のサンプル（App教材）
すぐに実行できるサンプルコードで、日本語の説明がありますが解説は最小限です。
詳細は「❸ Playgrounds App教材のすべて 前編」「❹ Playgrounds App教材のすべて 後編」を参照してください。
コードを理解するにはSwiftUIのドキュメントや解説記事などの参照が不可欠です。
英語のドキュメントも参照してみよう！
🟢 3.2 余談 ドキュメントの翻訳を見る
Appleのドキュメントの大部分は英文です。
一部日本語に翻訳されていますが、対応する英文がアップデートしていることもあります。
英文は iPad の Safari なら翻訳機能を利用できます。
3.2.1 iPad の Safari で翻訳を使う
翻訳手順を説明します。（iPadOS 15.3 の Safari ）
まず英文のページを開きます。
次に「ぁあ」をタップしてポップアップを表示し、「日本語に翻訳」を選びます。
日本語で表示されます。
翻訳されない部分は、選択しメニューの「翻訳」を選びます。
選択部分の翻訳がポップアップに表示されます。
翻訳中に「A文」をタップすると「原文を表示」があり、タップすると原文表示に戻せます。
ほぼ意味の通じる翻訳を手軽に読むことができます。
気軽に使って、公式ドキュメントに親しんでください。
🟢 3.3 SwiftUIアプリの構造
3.3.1 プロジェクト名とアプリ名
日本語ではテンプレートのデフォルトは「マイApp」でファイル名は「マイApp.swiftpm」です。
App設定の名前（完成したアプリの名称）は「マイApp」ですが、メインのコードは「MyApp」で型の名称も「struct MyApp: App」と MyApp です。
プロジェクト名は「マイプレイグラウンド」に表示されています。
長押しで修正可能です。
App設定の名前はプロジェクトを開き、サイドバーの一番上に表示されるボタンで確認できます。
3.3.2 アプリのメインのコード
アプリのメインのコードはファイル名「〜App」です。
通常はアプリ名とプロジェクト名を同じにし「〜App」の「〜」の部分をアプリ名にします。
「MyApp.swift」ファイルのコードです。
// MyApp のコード
import SwiftUI
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}import SwiftUI は SwiftUI フレームワークを使うために必要です。
細かく見ていきましょう。
3.3.3 @main
@main は Swift 言語の属性指定で、このファイルからアプリの実行を開始する目印です。
SwiftUI アプリの場合は App プロトコルに準拠した型の body を表示します。
3.3.4 App プロトコル
struct MyApp: App { は App プロトコルに準拠した struct 型の「MyApp」の定義です。
「MyApp」の部分は自由に命名することができます。
アプリの内容を反映したユニークな名前を考えてください。
ただしホーム画面や App Store でのアプリ名とはまた別です。
App Structure and Behavior も参照してください。
App プロトコルや Scene・WindowGroup については WWDC20の『SwiftUIにおけるAppの重要事項（App essentials in SwiftUI）』ビデオを参照してください。
iOS だけでなく macOS などの説明も含むためちょっと情報量が多いですが日本語字幕付きです。
3.3.5 Scene プロトコル
Scene もプロトコルです。
基本的に Scene のインスタンスはビューを表示するウインドウに対応します。
SwiftUI のビューも body がありますが、アプリの場合は
// MyApp の body
var body: some Scene {
WindowGroup {
ContentView()
}
}と some Scene 型です。
シーンのライフサイクルなどについては Scenes を参照してください。
シーン内またはそのビューの1つから scenePhase 環境値を読み込んで、シーンがアクティブであるか、他の状態にあるかを確認します。
Environment 属性を使用して、ScenePhase 列挙型の値の 1 つであるシーンフェーズを含むプロパティを作成できます。
scenePhase
scenePhase を確認することでシーンが active か inactive か background かがわかります。
シーンの onChange(of:perform:) モディファイアーで scenePhase の変化に対応するアクションを記述できます。
Protocol Scene のサンプルコードを確認してください。
外部キーボードのコマンドショートカット対応を commands(content:) モディファイアーで追加します。
メニューは CommandMenu で指定します。
3.3.6 WindowGroup
WindowGroup は同じ構造のウィンドウのグループを表示するシーンです。
アプリによって提示されたビュー階層のコンテナとして WindowGroup を使用してください。
init(content: () -> Content) イニシャライザー
イニシャライザーの引数に最上位ビューを渡します。
// WindowGroup イニシャライザーの使用例
var body: some Scene {
WindowGroup {
ContentView()
}
}上記コードの ContentView() は ContentView 型のイニシャライザーです。
App教材のコードでは「予定表」のメインは比較的込み入っています。
// 「予定表」のメイン
struct DatePlannerApp: App {
@StateObject private var eventData = EventData()
var body: some Scene {
WindowGroup {
NavigationView {
EventList()
Text("Select an Event")
.foregroundStyle(.secondary)
}
.environmentObject(eventData)
}
}
}「予定表」のWindowGroup のコンテンツは NavigationView です。
オブザーバブルオブジェクトを .environmentObject(_:) モディファイアー（修飾子）でビューに渡しています。
3.3.7 State and Data Flow【重要】
State and Data Flow は SwiftUI アプリを構築するうえでとても重要なドキュメントです。
「SwiftUI初級脱出パッケージ」マガジンで読める「SwiftUIデータフロー入門」「SwiftUIのデータフローその2」「SwiftUIのデータフローその3」を参照してください。
重要かつ SwiftUI 独自でなじみがないので三つの記事にわけています。
今後も記事を増やすつもりです。 サポートしていただけると大変はげみになります。