Xcodeの概要

(音楽)

(拍手) 今回のテーマはXcodeの始め方です 私はXcodeエンジニアのプラチです 今日はホリーとホンザと一緒に Xcodeを使ったiOSアプリケーションの 構築方法をご紹介します 統合開発環境であるXcodeでは SwiftやObjective-Cなどの 言語を使いソフトウェア開発ができます

今日 お話しするのは― Xcodeにおける 新規プロジェクトの作成方法 ソースエディタ内での ソースコードの書き方とナビゲート方法 コードの実行方法とコードベースに あり得る問題のデバッグ方法 パッケージやフレームワークを使い 機能を拡張する方法 そしてアプリケーションのテストと App Storeへの配布方法です

まずは新規プロジェクトの作成方法から 見ていきましょう

こちらがXcodeのウインドウです ４つの領域に分けてご説明します

中央のソースエディタでは ファイルの閲覧や編集ができます ソースエディタが開いていれば すべてのソースコードの ナビゲートや編集が可能です そしてプロジェクトエディタもあります ここではプロジェクトの 設定変更が可能です アプリケーションのターゲットも 確認できます 各ターゲットに含まれるのは １つのプロダクトを作るための インストラクションです プロダクトとは ライブラリやフレームワーク テストバンドルや アプリケーションを指します

左側にあるナビゲータからは プロジェクトのすべてのコンテンツに 素早く簡単にアクセスできます ナビゲータには種類があり ナビゲータ選択バーから選べます 現在 選択されている プロジェクトナビゲータでは グループの追加や削除ができます プロジェクトに含まれる すべてのファイルの管理も可能です 右側にあるインスペクタからは エディタ内のコンテンツの 文脈的なデータを得られます ソースエディタが開いているので そこに表示されている ファイル名やパスなどを確認できます

そして上部はツールバーです 実行ボタンを押せば プロダクトのビルドと実行ができます

停止ボタンを押せば 実行中のアクションを停止できます

隣にあるドロップダウンのメニューは スキームと実行先です スキームは共有可能なファイルで アプリケーションのビルドや実行 テストに関するルールを含んでいます 実行先は アプリケーションを 実行する場所です 今回はiPhone XRのシミュレータで アプリケーションを実行します Macでも実行できますし 接続したiPhoneやiPadなどの デバイスでも実行できます

表示／非表示ボタンでは 各領域の表示の有無を選べます これは便利な機能です コード記述中にスペースが足りなければ 右のマウスのボタンを押してください インスペクタが閉じて その分 エディタ領域が広くなります

また“Help”からは 豊富なリソースにアクセスが可能です 開発者向けドキュメントや Xcode Helpなどを確認できます Xcode Helpは多くを学べる 最高のリソースです ぜひ目を通してみてください

ここまでは Xcodeの各領域をご紹介しました 次は実際にプロジェクトを 作ってみましょう

こちらはXcodeの起動画面です 左側に新規プロジェクトを作成する オプションがあり アプリケーションのすべての ファイルとリソースが保存されます GitHubなどの既存プロジェクトを 複製することも可能です さらに ここから起動できる プレイグラウンドは 作成したSwiftのコードの結果を リアルタイムで確認できるものです 右側には最近のプロジェクトが表示され 簡単にアクセスできます 今回は新規プロジェクトを作成します テンプレート選択画面が開きます テンプレートは作業の出発点です 様々な種類の中から 選ぶことができます

まずは開発対象のプラットフォームを 確認しましょう 今回はiOSアプリケーションなので iOSのタブを選びます テンプレートには ２つのカテゴリがありますね “Application”と “Framework & Library”です 今回は“Application”から テンプレートを選びます この“Single View App”が 最もシンプルです そして“Next”をクリック 今回 作るのは 瞑想用アプリケーションです 名称は“Mind”なので これを“Product Name”に入力します 私は通常“Organization Name”には 組織名を入れますが 今回は“Example Team”と しておきましょう “Organization Identifier”は 逆DNS形式となります 今回のケースでは “com.exampleteam”です 自動入力される “Bundle Identifier”は Appleのエコシステム内で アプリケーションを識別するIDです “Organization Identifier”と “Product Name”の組み合わせです Swiftで記述したいので “Language”はSwiftのままとします UIテストのターゲットを作成するため チェックを入れます 常にコードのテストを行う癖を つけておくことが大事です ユニットテストの追加方法は後ほど

“Next”のクリック後 保存シートが下りてきます ここで保存先を決められます 今回はデフォルトの デスクトップのままとします 大事なのはソースコントロールを 最初から可能にしておくことです 開発段階における変更を― 管理そして追跡し バックアップすることができます ですので“Create Git Repository on my Mac”にチェックを入れます そして“Create”をクリック

テンプレートが準備できたので アプリケーションアイコンを設定します これはユーザがアプリケーションを 起動する際に選択する画像です アプリケーションアイコンは 画像や色などと同じくアセットです アセットはAsset Catalogで 管理され分類されます Asset Catalogには ナビゲータからアクセスできます “AppIcon”をクリックして カタログを開きましょう

これらのアセットが使用可能なのは 通知 設定 Spotlight そしてアプリケーション自体です アプリケーションアイコンは 今回 デスクトップにあります 私は 2xの解像度に対応した デバイスを持っています これらのアセットが使用できるのは 1x 2x そして3xの解像度に 対応したデバイスです では このアプリケーションアイコンを “iPhone App”の2xの解像度の所へ ドラッグします

問題がないかどうかテストしましょう iPhone XRのシミュレータで 実行してみます 実行先をiPhone XRに変更し 実行ボタンをクリックします

シミュレータが起動します

そしてすぐにアプリケーションが起動し テンプレートの“Hello World”が 表示されました アプリケーションアイコンが ホーム画面にあるか確認します “Hardware”から “Home”を選択しましょう

ホーム画面にアイコンがありました クリックでフォアグラウンドに戻ります 問題なさそうなので シミュレータの実行を停止します 変更を保存するタイミングですね そうすれば同僚のホリーとホンザが このプロジェクトの開発を続行できます それにはまず GitHubアカウントが必要です “Xcode”から“Preferences”を選び プリファレンスを開きましょう ここからXcodeをカスタマイズできます アカウントの追加は“Accounts”へ進み プラスボタンを押します 選択可能なアカウントが 複数出てきました 今回は“GitHub”を選択し “Continue”をクリックします するとアカウント情報を求められるので 入力していきます アカウント名とパスワードです サインインできたので プリファレンスは閉じましょう

実際にコミットするには “Source Control”から “Commit”を選びます

表示されたCommit Sheetを使って 同僚に変更点を知らせる コミットメッセージを追加できます メッセージには“アイコンを追加”と 記しておきます

“Commit”をクリックして シートを閉じます ここまでのデモでは まず― 新規プロジェクトの 作成方法をお見せしました 次にプラットフォームに合わせた テンプレートを選びました

そしてアイコンを Asset Catalogに追加 最後にソースコントロールを使い 変更をコミットし 同僚が作業を続けられるようにしました

ソースコントロールの詳しい情報は 去年のセッション“Source Control Workflows in Xcode”をご覧ください 次はいよいよ瞑想に関する機能を 実際に追加していきます 説明してくれるのは同僚のホリーです それでは (拍手と喝采) プラチ ありがとう

Xcodeソースエディタチームの ホリーです こちらがソースエディタです アプリケーションのコードを 記述する場所です

ソースコードの左側には行番号があり 右側にはエディタ内のファイルの 概要を示すミニマップがあります

上部にはジャンプバーがあります エディタ内のファイルに ポップアップでナビゲートしてくれます

オプションメニューや分割メニューで レイアウトの変更も可能です

瞑想用アプリケーションの構築が 進んでいますね 今後の作業の確認です

このアプリケーションは ユーザが瞑想時間を選択できるものです 終了後 その瞑想時間を ヘルスケアデータとして保存します これには多くのSwiftコードを 追加する必要があります ですが 私が書いたコードを読むのではなく Xcodeが提供する編集処理の 支援ツールに注目してください ようこそSwiftの世界へ Swiftが初めての場合は オンラインのガイドツアー “A Swift Tour”をご覧ください またはプレイグラウンドで Swiftコードを試してみてください

ガイドツアーには ご覧のURLからアクセスできます それでは始めましょう

プラチが紹介してくれたテンプレートに 瞑想時間と背景に関する コードを追加しました 瞑想時間の選択と開始のためのUIは まだ実装されていません HealthKitと連携するための クラスも必要です 現時点でのHealthStoreは仮のもので HealthKitと連携しません あとで本物を実装します テンプレートで “ContentView.swift”を見ています 私がタイトルと背景を加えました UIの構築中には― インタラクティブなキャンバスで プレビューしてみることも可能です キャンバスの表示は“Editor”から “Editor and Canvas”を選びます

キャンバスは編集しながら コードのビルドと実行ができるので コードの結果が リアルタイムで分かります プレビューにはウェルカムタイトルと 心安らぐ背景が表示されました 次にMeditationViewを追加するため 新規ファイルを作成します

テンプレートは“SwiftUI View”です

名前は“MeditationView”とします

プレビューはデバイス全体を 表示していますが 今回の作業に必要なのは 画面の一部だけです キャンバスにビューを描画する “PreviewProvider”を修正し “previewLayout”修飾子で ビューを変更します

修飾子の記述を始めると コード補完ウインドウが開きます 途中まで記述したものや 周辺のコードから 候補のシンボルを表示してくれます リストの一番上の候補が該当するので Enterキーで決定します シンボルと 残りのコードを記述する プレースホルダが挿入されました “.sizeThatFits”と記述します

“MeditationView”は― “MeditationController”と 連携させます “propertyWrapper”を加え “MeditationController”をラップし プレビューします

APIがどう動くのか分からない時は そのAPIのドキュメントを確認します Optionキーを押しながら 該当のシンボルをクリックすると― クイックヘルプが現れシンボルの宣言や ドキュメントを確認できます 次に進む前に― “environmentObject”を使い “MeditationController”を加えます

ではビューを作っていきます 今は“Hello World”と 表示されていますが これを瞑想の残り時間に変更しましょう “MeditationController”にあります

コードに加えた変更が プレビューにも反映されました ですがテキストが小さいので インスペクタを使って大きくします ツールバーから インスペクタを表示します 属性アイコンをクリックし 確認するビューをクリックします このビューの修飾子の値が 見られるようになりました フォントをクリックし “inherited”から “Large Title”に変えます プレビューも変わり― ソースエディタのコードにも 変更が反映されました

(拍手) 次は一時停止と再開ができるボタンを テキストの上に配置します すぐに使えるライブラリのリソースを 組み込むことも可能です ライブラリはツールバーの プラスボタンで開けます

オブジェクトのカテゴリは複数あります ビュー 修飾子 コードスニペットなどです コードスニペットを見てみましょう 既存のコードスニペットもありますが 独自のスニペットも作成できます 素早くコードを追加できるスニペットを デモ用に加えておきました ここでビューのカテゴリに戻り 探しているビューをタイプします このボタンをソースエディタか 直接プレビューにドラッグします するとキャンバスが― ボタンが新たなVertical Stackに 追加されることを知らせてくれます ボタンをドロップします するとコードには ボタンとテキストを Vertical Stackに埋め込むために VStackが追加されます プレースホルダを埋めましょう このボタンは切り替えの機能を持ちます そしてテキストではなくアイコンで 一時停止と再生が分かるようにします

瞑想の進行中は残り時間のみを表示し それ以外の場合は プリセットされた瞑想時間を ピッカーで表示します Xcodeは記述されたコードの構造を 深く理解し コードの変換やリファクタリングを 手助けしてくれます Commandキーを押しながら Textなどの構造体をクリックすると アクションメニューが現れます 構造体を変換するためのアクションを 示したものです 定義にジャンプしたり クイックヘルプを参照したりできます 特定の場合のみテキストを出したいので “Make Conditional”を選び―

再びプレースホルダを埋めます 条件は“meditation.isActive” 下部にあるプレースホルダには Controlキーと ／キーで ジャンプできます マウスに触れずに 足りないコードを素早く書き込めます 思い描いていたビューになりました “ContentView”に追加しましょう

“MeditationView”と“Spacer”を VStackの下に追加します

ウェルカムタイトルとボタンが プレビュー上で更新されました 瞑想時間を選ぶピッカーもあります UIを作り終わったので キャンバスを閉じ インスペクタも閉じます

ここで デバッグを容易にするために “MeditationController”を修正します ミニマップを活用し― “Meditation Timer State”の セクションに飛びます ミニマップはファイル内の“Mark:”の テキストラベルを表示します ミニマップ上のラベルをクリックすれば ナビゲートされます

このMark:は特別なコメントで コード内のセクションを ジャンプバーやミニマップに表示します このセクションには状態を示す 計算型プロパティがあります 状態を容易に調べるために “State”という 格納型プロパティを追加します “stopped”“paused”“running”の いずれかの値を保持します デフォルトは“stopped”です “MeditationTimer”更新時は タイマーの状態を確認し switch文で コントローラの状態を更新します

タイマーの状態が取り得る値は “nil”“paused”“running” Swiftにおいて switch文の網羅性は必須です でないとコンパイラエラーを返されます ビルドすらしていないのに コンパイラエラーが出ていますね これはLive Issueという機能で タイプすると表示されます クリックするとFix-it機能に ケースを追加するか聞かれます する場合は“Fix”をクリック

おっと

タイマーがnilの場合は 状態を“stopped”にします 取り得るすべての値のために catch-allケースを定義するより 明示的なケースの方が有用でしょう ですので アンダースコアを “.running”に変えます これによりswitch文の網羅性が 失われました ほかのFix-it機能のLive Issueを 取得し 残りのケースを追加します この関連値は不要なので削除しましょう

この“.running”と“.paused”は 上にある 状態の列挙型と同じですね マルチカーソル編集を使い プレースホルダを埋めます 現在 挿入位置は１ヵ所ですが ControlキーとShiftキーを押し 次の挿入位置をクリックします

すると挿入位置が増え すべての挿入位置で どんなコマンドも実行可能となりました 実行できるコマンドは プリファレンスの “Key Bindings”で見られます コマンドとそのキーバインドが確認でき キーバインドの変更もできます 見てみましょう ２つをコピーして 次のプレースホルダに飛び タイプしてペーストします できましたね (拍手と喝采) 以上がアプリケーションに実装する 基本機能のコードです ではソースエディタの おさらいをしましょう

インタラクティブなキャンバスで UIをプレビューしたり ビューの見た目を編集したりしました コード補完は 開発プロセスを加速させます そして変換や 構造体への機能の追加には アクションメニューが役立ちました 最後に Live IssueとFix-it機能により ビルド前にエラーを修正できました

今回見てきた新たなSwiftの機能や SwiftUIフレームワークに関する映像は “What's New in Swift”と “Introducing SwiftUI”です それではホンザに 実行とデバッグをお願いしましょう (拍手と喝采) ホリー ありがとう Xcodeエンジニアのホンザです プロジェクトが作成され コードも記述されました 次はビルドと実行 そしてデバッグを シミュレータとデバイス上で行います そのあとSwiftパッケージの依存性を 追加していきます 始めましょう

実行ボタンでのビルドと実行の方法を プラチが教えてくれましたね その他の方法としては “Product”からも 実行やテスト アーカイブやビルドなどが選べます ではシミュレータで実行してみましょう

アプリケーションがビルドされ インストールと起動が終わり フォアグラウンドに表示されます これが現時点での見た目です 時間がないので 今回は短い瞑想を行いましょう プレイボタンをクリックすれば ３分間の瞑想が開始します

瞑想は始まりましたが プレイアイコンがそのままです 音楽アプリケーションと同様 一時停止時はプレイアイコンが必要で 瞑想中にはポーズアイコンが必要です Xcodeの統合デバッガで バグを見つけて修正しましょう

デバッガをアタッチしての アプリケーションの実行も簡単です 実行すればXcodeが自動的に デバッガをアタッチします

一旦シミュレータを離れ Xcodeに戻りましょう “MeditationView”を見ていきます ジャンプバーが使えますね

“MeditationView”はプレイアイコンや 残り時間の表示を担います 確認したところ“displayedIcon”から この画像が設定されているようです Commandキーを押しながらクリックし “Jump to Definition”を選びます “MeditationController”に飛びました 行番号をクリックし “displayedIcon”のゲッターの ２行目にブレークポイントを追加します

シミュレータが続行中で タイマーも進んでいるので ブレークポイントがヒットし 行がハイライトされました

通常ブレークポイントがヒットすると 実行は中断されます

ですから現在 ウインドウの下部には デバッグエリアがあります デバッグバーには デバッガを制御するボタンや ビューデバッガなどの機能を 有効にするボタンがあります 下部の左側は変数ビューで 右側はコンソールです ウインドウ左側の デバッグナビゲータが示すのは アプリケーションの負荷状況や メモリの使用状況です その下にあるコールスタックは コードがどう呼び出されたかを 示しています 各フレームを選択すると ソースエディタとデバッガ 変数までもが切り替わります 今回は最初のフレームを選択し 瞑想開始後もアイコンが変わらない バグの修正を試みます

現在使われているアイコンを確認します それには変数を選択し 下のQuick Lookアイコンを クリックします プレビューが現れました

プレビューしている変数が画像のため ここには レンダリングされた画像があります Quick Lookがサポートするのは 画像や色 ビューなどで デバッグQuickLookObjectメソッドを 実装するカスタムオブジェクトです

プレビューにおいても 瞑想開始後にプレイアイコンが 出てしまっています MeditationControllerが 問題なのでしょうか？ その確認は― MeditationControllerを参照する self変数を広げてプロパティを見ます するとStateプロパティの状態が “running”であることが分かります 予想はしていました “displayedIcon”のゲッターは 表示する画像の選択時に MeditationControllerの状態を 取得していないのです 修正するにはMeditationControllerが “running”かをチェックし “running”なら ポーズアイコンを表示します

そうでなければプレイアイコンです 不要になったブレークポイントは ドラッグして消します コードに変更を加えたので アプリケーションを実行し直します するとシミュレータでの 再インストールと再起動が行われます 瞑想を開始すると ポーズアイコンに変わりました バグは修正されましたね (拍手) アプリケーションを停止し デバッグエリアを隠します

コード上で素早く反復する際は シミュレータが役立ちますが 瞑想をすぐに始められるよう デバイスにインストールしてみます 接続したデバイスにアプリケーションを インストールする際は Apple IDで Xcodeにサインインします プリファレンスを開き―

“Accounts”から アカウントを追加します “Apple ID”を選び ユーザ名とパスワードを入れます

サインインが成功しました 次にプロジェクトナビゲータから プロジェクトを選択します ターゲットを選び― コード署名やCapabilityを管理する “Signing & Capabilities”に入ります Capabilityでは 必要な許可を宣言できます 今回はHealthKitデータにアクセスし 瞑想時間を書き込むことが必要です さらに他のアプリケーションでの 瞑想時間も含め 統計データを示します Capabilityを追加します

“health”を検索し “HealthKit”を選択

このMacには iPhoneを接続しているので 実行先をこのiPhoneにします

そして実行ボタンをクリック ビルドされ デバイス側で起動しました 状況を分かりやすくするため QuickTimeを使って iPhoneの画面をMacに映し出します

iPhoneで動作していますね 接続を解除すれば瞑想が始められます ではアプリケーションを停止し― 実行先をシミュレータに戻します デバイスの詳細は“Window”から “Devices and Simulators”に入れば デバイス名や OSバージョンなどが見られます インストールされた アプリケーションも確認できます さらにWi-Fiを使って Macと接続することも可能です USBケーブルで 物理的に接続しなくても ビルドや実行 デバッグができます

シミュレータとデバイスの両方で アプリケーションが動きました またバグも修正したので さらなる機能を追加しましょう

瞑想の統計データを 提供したいと思います 瞑想を行った回数や平均時間などです 統計情報の計算は 簡単なものではありません そこで私たちはQuickStatsという Swiftパッケージを作りました

Swiftパッケージとは― 基本的に マニフェストファイルなどを 含むフォルダです このQuickStatsは プロダクトのビルドに使えます パッケージを追加するには プロジェクトエディタから “Swift Packages”を選びます パッケージを プロジェクトに追加できます 先ほどGitHubにサインインしたため アカウントのお気に入りの リポジトリが見られます “QuickStats”を選択しましょう そして“Next”をクリック バージョン１を使います

QuickStatsのライブラリが Mindとリンクします そして“Finish”をクリック Xcodeはバックグラウンドで パッケージを取得中です “Swift Package Dependencies” からは パッケージのソースを閲覧できます パッケージの動作を 理解するのに役立ちます

パッケージをプロジェクトに 追加する前に おさらいをしましょう

シミュレータでアプリケーションを 実行しデバッグしました 実際のデバイスでも動かしました そしてSwiftパッケージを追加し 機能を増やせるようにしました

こちらが関連するセッションです それではホリーを呼びましょう (拍手と喝采) ホンザ ありがとう

まずはQuickStatsパッケージの 使い方をご説明し 次にモデルコードをフレームワークに 移動する方法について見ていきます Xcodeに戻りましょう

QuickStatsパッケージを 追加したので コードにインポートすれば パブリックAPIを使えます ユーザに提供する瞑想の統計データは ContentViewに表示します “Open Quickly”から “ContentView.swift”に飛びましょう

Open Quicklyでは型名やメソッド名 ファイル名から検索できます “contentview”とタイプし 決定 まずQuickStatsをインポートします

これでパッケージのAPIが 使用可能です コードスニペットを使い 下部にコードを加えます 瞑想のセッションの配列を取得する StatisticsViewを実装し QuickStatsのAPIを使って 統計データを示すコードです パッケージのソースコードが 閲覧できるので 実装のソースコードに飛び 理解を深めます “QuickStats.averageDuration”を Command+ クリックし “Jump to Definition”を選択 これが このメソッドの実際の実装です “Reveal in Project Navigator”を クリックすれば プロジェクトナビゲータに ファイルを出せます ソースコードの中に見えますね ジャンプバーのエディタ履歴ボタンで 前のファイルに戻れます

ではStatisticsViewを ContentViewに追加します その前にキャンバスを見てください

デバイス全体を表示します

“StatisticsView”は “Spacer”の下に加え “MeditationController”から セッションの配列を取得します

“ContentView”の下部に “StatisticsView”が入りました UIは以上なのでキャンバスを閉じます

次はモデルのユニットテストを書きます ユニットテスト可能なフレームワークに モデルコードを移動します Swiftパッケージも選べますが コードはチームだけで共有したいので フレームワークを選びます 新規ターゲットを作ります

フィルタバーからフレームワークを検索

名前は“MindKit”とします

“Include Unit Test”の チェックは大事です フレームワーク作成時に ユニットテストのターゲットも 作成されます

コードを移動する前に 必要なファイルに MindKitをインポートします 移動する“HealthStore.swift”には プロジェクト全体で使われている パブリック型が２つあります ファインドナビゲータで これらの場所を突き止めます ファインドナビゲータの検索範囲は プロジェクト全体です テキストやシンボル参照 正規表現なども探せます 今回 検索したいのは正規表現です “HealthSession”か “HealthStore”です Enterキーを押します MindKitフレームワークに移動する この２つのファイルは ディスクロージャートライアングルで 隠せます

次に 各ファイルに “import”を追加します

ファイルの上部に飛び 追加していきます 最後は“ContentView.swift”です

ファイルを移動する準備ができました “HealthStore.swift”だけでなく “HealthStoreFactory.swift”も 移動します Commandキーを押しながら 次のファイルをクリックすれば ファイルを複数 選択できます これらのファイルを “MindKit”グループにドラッグします するとターゲットメンバーシップが 自動で更新されます インスペクタで確認できます “HealthStore.swift”の ターゲットメンバーシップを見ると ターゲットがMindKit フレームワークになっています

HealthKitと連携する HealthStoreの実装も 忘れずに行いましょう 実用的なヘルスケアデータを 提供できます まずはHealthKitをインポート

HealthKitを使うのは初めてなので ドキュメントを確認します “Developer Documentation”を “Help”から選択しましょう

このウインドウからは SDKのフレームワークや特定のAPI プログラミングトピックなども 検索できます 今回はHealthKitを検索

フレームワーク全体のドキュメントを 確認できます オフラインでも可能です 必要なすべてのコードの スニペットがあるので ファイル下部に追加します

ユニットテストを書く前に MindKitフレームワークのAPIに ドキュメントを加えます まずはHealthStoreです 使う機能は “ドキュメントコメント”です その宣言に対するものを Xcodeが生成します この機能は アクションメニューから使えます Commandキーを押しながら “requestAccess”をクリックし “Add Documentation”を選択

そうするとメソッドとパラメータの 説明を入力するための プレースホルダが挿入されます “このメソッドはユーザに―”

“瞑想関連のセッションへ アクセスする許可を要求する”

補完パラメータは“要求が行われたら 実行するクロージャ”

このメソッドは非同期的に実行できます それを注釈として ドキュメントに記しておきます 使うのは特別な箇条書きです “Note:”で加えます

ではクイックヘルプから見てみましょう Optionキーを押しながらのクリックで クイックヘルプが現れます 先ほど書いた説明が確認できますね 注釈もパラメータの説明も 書かれています requestAccessの どの呼び出しサイトでも見られます

APIへの ドキュメントコメントの詳細は swift.org内の“API Design Guidelines”をご覧ください

このデモではSwiftパッケージの コードの使い方を確認しました 新たなフレームワークターゲットを作り そのフレームワークに コードを移しました 開発者向けのドキュメントの確認や ドキュメントコメントを 自分で書く方法にも触れました 次はホンザから テストと配布についてのお話です (拍手) ありがとう これから見ていくのは Xcodeでのコードのテスト方法と アプリケーションの配布方法です

アプリケーションの動作は順調なので これを継続しなければなりません アプリケーションの質を上げるには 自動テストが役立ちます

今回 書いていくテストの 上位カテゴリは２つ ユニットとUIです

ユニットテストは単一コンポーネントが 問題なく動作するよう 特定のインプットに対する アウトプットが想定通りかを評価します

一方のUIテストはコンポーネントが 正しく統合されるようにし アプリケーションを使いやすくします

Xcodeで見ていきましょう

すでにMindKitTestsという ユニットテストのターゲットがあるので テストプランに追加します テストプランとは テストのビルド方法と 実行方法を示すリポジトリです スキームが使っているテストプランは “Edit Scheme”を選択し “Test”をクリックすることで 確認ができます デフォルトでは１つです 名前の横の矢印から テストプランに飛べます

テストプランエディタは 使用中のテストターゲットを示します これからコードを書く UIテストのターゲットが見えますが ユニットテストがありません 追加するにはプラスボタンをクリックし “MindKitTests”を選びます

ではユニットテストのコードを書きます

書くのはHealthStoreの ユニットテストです Controlキーを押しながら “MindKitTests”グループをクリックし “New File”を選択 ファイルテンプレートを使います

名前は“Test HealthStore”とします

いいですね

まずはコードがあるMindKitを インポートします

MindKitフレームワークの 内部インターフェイスもテストするため “import”に“@testable”と加えます 次に２つのテストをクラスに追加します １つ目は 保存した瞑想を 再びロードできるかのテスト ２つ目はデータの読み書きへの アクセス要求ができるかのテストです “Product”から“Test”に入り テストします

テストがビルドされ iPhone XRの シミュレータで実行中です

テストが完了したようです テスト名の横のひし形マークは テストの成功を表しています いいですね また テスト階層は テストナビゲータで確認できます HealthStoreのユニットテストを 行いましたが UIテストも必要です コードを書いていきましょう テストナビゲータ上で “MindUITests”をクリックします ここにUIテストのコードを追加します アプリケーションを起動し 瞑想を開始して数秒後に 一時停止を行うようにします そこで表示された残り時間が 正しいかどうかをテストします

テストを実行しましょう

今回はシミュレータでのテストの動きが 見えるようにします 起動し 瞑想が開始されました 一時停止し アプリケーションが終了しました そして一瞬だけ またアプリケーションが起動しました テストが失敗した理由を探るために 一番右のナビゲータボタンから レポートナビゲータを開きます 一番上にある 直近のテストアクションを選び テストレポートを確認します 新たに追加したUIテストに 失敗の赤いマークがついています 原因を探るためにこのテストを開き 失敗したアクティビティを確認します “02:56は2:56と異なる”という アサーションエラーが出ています 納得がいきますね ですが 画面上で起きたエラーを より理解するために このエラーを開き 自動スクリーンショットを確認します アイコンをプレビューするものです この通り 残り時間の表示が “02:56”となっていますが テストアサーションは“2:56”です プレビューを閉じ テスト名の横の矢印をクリックし テストソースに飛びます そして“０”を加え アサーションを修正します では このテストのみを再実行するため テスト名の横の ひし形マークをクリックします

再びアプリケーションが起動し 瞑想が開始されました 数秒後に一時停止し アプリケーションが終了しました テスト名の横のひし形マークは 成功を示していますね 一安心です (拍手) きちんと動作するようになったので 他の人たちにも使ってもらいましょう

App StoreまたはTestFlightのために アプリケーションをビルドする場合 アーカイブが必要です そのためには実行先を “Generic iOS Device”にしてから “Product”の“Archive”を選択します するとアプリケーションが リリース構成でビルドされ アーカイブが行われます

終了するとオーガナイザが開くので アーカイブを選択し “Distribute App”をクリックします この手順を踏めばアプリケーションを 直接 XcodeからAppleへ提出できます

TestFlightやApp Storeに デプロイするには Apple IDを使った デベロッパアカウントの登録が必要です

アプリケーションをアップロードすれば App Store Connectで管理できます TestFlightを使って周りの人に ダウンロードを依頼することもでき 最終的には App Storeでの配布が可能です

今回のデモでは まず ユニットテストとUIテストを作り 次にテストプランの編集も行いました そしてテストレポートを活用し エラーを診断しました さらにTestFlightやApp Storeへの アップロード方法にも触れました

関連セッションもご視聴ください

では今回のセッション全体の おさらいです 今回はアプリケーションを ゼロから作りました プラチがプロジェクトの作成 およびXcode UIの紹介を行い ホリーがソースエディタの機能を活用し スムーズにコードを追加しました そして私がシミュレータでの 実行とデバッグをお見せし Swiftパッケージを追加しました 次にホリーがパッケージを取り込み フレームワークにコードを移しました 最後にXcodeにおける テストの方法を確認し App StoreやTestFlightへの 配布方法も学びました

より詳しい情報は こちらでどうぞ ご質問があれば このあとのラボにご参加ください

ありがとうございました (拍手と喝采)