AppCode 2023.1 ヘルプ

AppCode で SwiftUI アプリケーションを作成する

このチュートリアルでは、iOS 会議のリストを表示する簡単な SwiftUI アプリケーションを作成します。アプリケーションは 2 つのビューで構成されます。

  • ローカル JSON ファイルからのデータを表す会議のリスト。

  • 各会議の詳細。

Final app

その過程で、AppCode 機能に慣れ、対話的な SwiftUI プレビューを有効にする方法を学びます。

ビデオチュートリアルを見て、以下のステップバイステップの手順に従ってください。

ステップ 1. プロジェクトの作成

AppCode で作成されたプロジェクトは、Xcode と完全に互換性があり、同じプロジェクトモデルを使用します。AppCode でプロジェクトを作成した後、Xcode でプロジェクトを開いて編集したり、その逆を行ったりすると、すべてが同期されます。

  1. AppCode を起動し、ウェルカム画面で新しいプロジェクトをクリックします。

    Welcome Screen

    現在、AppCode で別のプロジェクトを開いている場合は、メインメニューからファイル | 新規プロジェクトを選択します。

  2. 開いたダイアログに、Xcode プロジェクトテンプレートのリストが表示されます。iOS | アプリケーション | アプリを選択し、次へをクリックします。

    Create a new project: project templates
  3. 次のページで、一般的なプロジェクト設定を調整します。

    Create a new project: project settings
    • 製品名 : アプリケーションの名前でもあるプロジェクト名。iOSConferences と入力します。

    • 組織識別子 : com.mycompany などの逆引き DNS 形式のあなたまたはあなたの会社の識別子。

    • プログラミング言語として Swift が選択され、ユーザーインターフェースとして SwiftUI が選択されていることを確認してください。

    • すべてのチェックボックスの選択を解除したままにします。

  4. 開いた Finder ウィンドウで、プロジェクトを配置するディレクトリを選択します。

新しい Swift プロジェクトが作成され、すぐに AppCode で開かれます。

New project

ステップ 2. SwiftUI プレビューを有効にする

AppCode で SwiftUI プレビューを有効にするには、HotReloading(英語) Swift パッケージまたは InjectionIII(英語) アプリケーションをインストールする必要があります。

プロジェクトを準備する

  1. Xcode からプロジェクトに HotReloading(英語) パッケージを追加します。

    Adding the HotReloading Swift package

    または、InjectionIII(英語) アプリケーションをインストールして実行します。

  2. プロジェクトビルド設定 Ctrl+Alt+Shift+Sその他のリンカーフラグセクションに -Xlinker -interposable フラグを追加します。

    Add a new flag in the project settings
  3. iOSConferencesApp.swift ファイルを開き、iOSConferencesApp 構造体に、InjectionIII バンドルをロードするコードを使用して init() メソッドを追加します。

    import SwiftUI @main struct iOSConferencesApp: App { // Add this method init() { #if DEBUG var injectionBundlePath = "/Applications/InjectionIII.app/Contents/Resources" #if targetEnvironment(macCatalyst) injectionBundlePath = "\(injectionBundlePath)/macOSInjection.bundle" #elseif os(iOS) injectionBundlePath = "\(injectionBundlePath)/iOSInjection.bundle" #endif Bundle(path: injectionBundlePath)?.load() #endif } var body: some Scene { WindowGroup { ContentView() } } }
  4. ContentView.swift ファイルに移動します。ContentView_Previews で、injected() メソッドを含む #if DEBUG ブロックを追加し、structclass に変換します。

    class ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } #if DEBUG @objc class func injected() { let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene windowScene?.windows.first?.rootViewController = UIHostingController(rootView: ContentView()) } #endif }

プレビュー付きでアプリケーションを実行する

  1. ツールバーでデバイスまたはシミュレーターを選択します。

    Select device
  2. Shift+F10 を押すか、the Run button をクリックします。

    HotReloading パッケージがプロジェクトに追加された場合、次のメッセージが表示されます。

    Hot Reload available

    デフォルトでは、インタラクティブプレビューはホームディレクトリのファイルに対して機能します。INJECTION_DIRECTORIES 環境変数で他のディレクトリを (コンマで区切って) 指定できます。

    InjectionIII を使用している場合、アプリケーションが接続されると、次のメッセージが表示されます。

    Injection connected
  3. Text コントロールを複製し、ファイル(Ctrl+S)を保存して、シミュレーターまたはデバイス画面で変更を確認します。

    SwiftUI preview
  4. プレビューを更新するために変更を手動で保存したくない場合は、環境設定 | 外観 & 振る舞い | システム設定 | 自動保存に移動し、アプリケーションが…秒間アイドル状態の場合、ファイルを自動的に保存するチェックボックスを選択し、その値を 1 に設定します。

ステップ 3. リストを作成する

List コントロールを追加して、その外観を調整してみましょう。

1. ビューの名前を変更する

  1. キャレットを ContentView に置き、Shift+F6 を押し、ハイライトされた領域に ConferenceList と入力して、Enter を押します。

  2. the Rename in comments button をクリックし、コメントと文字列チェックボックスを選択します。

  3. 開いた検索ツールウィンドウで、リファクタリング実行をクリックします。AppCode は、ファイル名やコメントを含め、あらゆる場所でこのシンボルの使用箇所を変更します。

    Rename refactoring
  4. 同様に、ContentView_Previews の名前を ConferenceList_Previews に変更します。

2. SwiftUI 要素のサラウンドライブテンプレートを作成する

  1. Text コントロールを List でラップします。

    struct ConferenceList: View { var body: some View { List { Text("Hello, world!") .padding() Text("Hello, world!") .padding() } } }

    プレビューには次の変更が表示されます。

    The simple SwiftUI list
  2. エディターで List コントロールを選択し、Ctrl+Shift+A を押して、「ライブテンプレートとして保存…」アクションを見つけます。

    Create a template from selection
  3. 開いたダイアログで、テンプレートテキストを変更します。

    $ELEMENT$ {$SELECTION$}
  4. テンプレートを Swift 宣言およびステートメントに適用できるようにします(ダイアログの左下隅にある変更リンクをクリックします)。

  5. テンプレートの略語(たとえば、sut)を追加し、カスタムテンプレートグループの名前を SwiftUI に変更して、OK をクリックします。

    Modified custom surround template for SwiftUI
  6. これで、このテンプレートを使用して、コードを SwiftUI 要素で囲むことができます。囲む必要のあるコード行を選択し、Ctrl+Alt+T を押して、リストから新しいテンプレートを選択します。

    Surround code with a custom template

3. リストの外観を変更する

  1. リストにタイトルを追加します。これを行うにはリストを NavigationViewラップし、navigationBarTitle(_:) メソッドを呼び出します。

    struct ConferenceList: View { var body: some View { NavigationView { List { Text("Hello, world!") .padding() Text("Hello, world!") .padding() }.navigationBarTitle("Conferences") } } }
  2. 2 つのリスト項目の代わりに、タイトルとサブタイトルで構成される 1 つを作成します。タイトルに会議名を表示し、サブタイトルに場所を表示します。これを行うには、2 つの Text コントロールを VStack コンテナーにラップし、それらの値を変更して、対応するフォントスタイルを適用します。

    struct ConferenceList: View { var body: some View { NavigationView { List { VStack { Text("Conference").font(.headline) Text("Location").font(.subheadline) } }.navigationBarTitle("Conferences") } } }
  3. VStack コンテナーの alignment パラメーターを使用して、両方の Text コントロールを左揃えにします。

    VStack(alignment: .leading) { // … }

最終的に、リストは次のようになります。

Redesigned list

ステップ 4. JSON からデータをロードする

次に、会議データを含む JSON ファイルをプロジェクトに追加し、このデータを ConferenceList ビューに表示します。

1. JSON ファイルをプロジェクトに追加する

  1. リポジトリから conferencesData.json(英語) ファイルをダウンロードします。

  2. プロジェクトツールウィンドウで iOSConferences グループを選択し、Alt+Insert を押して、グループを選択します。

  3. 開いたダイアログで、Resources と入力し、フォルダーの作成チェックボックスが選択されていることを確認して、OK をクリックします。

    Create a new group
  4. Resources グループを右クリックし、追加 | ファイルを選択して、ダウンロードした JSON を Finder で見つけます。

2. JSON ファイルを解析する

JSON データを Decodable オブジェクトの配列に解析する関数を追加し、これらのオブジェクトのデータモデルを作成してみましょう。

  1. iOSConferences グループで、Model というグループを作成します

  2. そこで新しい Swift ファイル(新規 | Swift ファイル)を作成し、それを Data と呼びます。

    Create a new Swift file
  3. 新しく作成したファイルに、JSON ファイルのデコードに使用する loadFile() 関数を追加します。

    func loadFile<T: Decodable>(_ filename: String) -> T { let data: Data guard let file = Bundle.main.url(forResource: filename, withExtension: nil) else { fatalError("Cannot find \(filename)") } do { data = try Data(contentsOf: file) } catch { fatalError("Cannot load \(filename):\n\(error)") } do { let decoder = JSONDecoder() let format = DateFormatter() format.dateFormat = "yyyy-mm-dd" decoder.dateDecodingStrategy = .formatted(format) return try decoder.decode(T.self, from: data) } catch { fatalError("Cannot parse \(filename): \(T.self):\n\(error)") } }
  4. Model グループで、Conference Swift クラス(新規 | Swift 型)を作成します。

    Add a new Swift type
  5. Conference クラスは、Codable および Identifiable プロトコルに準拠し、解析された JSON データに対応するセットフィールドを含む必要があります。

    class Conference: Codable,Identifiable { var name: String var location: String var start: Date var end: Date? var link: String }
  6. Data.swift で、JSON ファイルから解析された Conference オブジェクトの配列を格納する conferencesData 変数を導入します。

    let conferencesData: [Conference] = loadFile("conferencesData.json")

3. リストに会議を表示する

これで、会議の配列が conferencesData 変数に保存されたら、それを ConferenceList に渡すことができます。

  1. ConferenceList.swift ファイルに移動し、conferencesDataList 初期化子に渡します。

    List(conferencesData) {conference in … }.navigationBarTitle("Conferences")

    これで、conferencesData 配列に含まれるアイテムと同じ数のアイテムがリストに表示されます。

    The updated list

  2. 最後に、Conference および Location 文字列を実際のデータに置き換えます。

    List(conferencesData) {conference in VStack(alignment: .leading) { Text(conference.name).font(.headline) Text(conference.location).font(.subheadline) } }.navigationBarTitle("Conferences")

更新されたリストは次のようになります。

Conferences list

ステップ 5. 詳細ビューを追加

アプリケーションの 2 番目のビューには、各会議の詳細情報が表示されます。

1. 新しい SwiftUI ファイルを作成する

  1. プロジェクトツールウィンドウで、iOSConferences グループを選択し、Alt+Insert を押して、Xcode テンプレートからファイル…を選択します。

  2. 開いたダイアログで、iOS | ユーザーインターフェース | SwiftUI ビューを選択し、次へをクリックします。

    Create a new SwiftUI file
  3. 次のページで、ファイル名 ConferenceDetails を入力し、iOSConferences グループと場所が選択されていることを確認して、完了をクリックします。

  4. ConferenceList_Previews の場合と同じ方法で、ConferenceDetails_Previews の新しいビューのインタラクティブプレビューを有効にします。

    class ConferenceDetails_Previews: PreviewProvider { static var previews: some View { ConferenceDetails() } #if DEBUG @objc class func injected() { let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene windowScene?.windows.first?.rootViewController = UIHostingController(rootView: ConferenceDetails()) } #endif }

2. ビュー間のナビゲーションを設定する

ビュー間の接続を設定するには、NavigationLink(英語) 機能を使用します。

  1. ConferenceList.swift ファイルで、VStack コンテナーを NavigationLinkラップします。

    NavigationLink { VStack(alignment: .leading) { Text(conference.name).font(.headline) Text(conference.location).font(.subheadline) } }
  2. ConferenceDetails ビューを NavigationLinkdestination パラメーターに渡します。

    NavigationLink(destination: ConferenceDetails()) { VStack(alignment: .leading) { Text(conference.name).font(.headline) Text(conference.location).font(.subheadline) } }

    リスト項目がクリック可能になり、それぞれをタップすると詳細ビューが開きます。

    Navigation between the list and details

3. 会議データを詳細ビューに渡す

ConferenceDetails ビューには、リストで選択された会議の詳細情報が表示されます。

  1. ConferenceDetails ビューに移動し、デフォルトの Hello, World! テキストを会議の場所に置き換えます。

    struct ConferenceDetails: View { var body: some View { Text(conference.location) } }
  2. conference フィールドはまだ追加されていないため、その使用箇所は赤でハイライトされています。プロパティ '会議' を作成します インテンションアクション (Alt+Enter) を適用してフィールドを作成します。

    Create a property from its usage

    結果として、次のコードが必要になります。

    struct ConferenceDetails: View { var conference: Conference var body: some View { Text(conference.location) } }
  3. 新しいフィールドを追加した後、それをすべての ConferenceDetails() 初期化子呼び出しにパラメーターとして渡す必要があります。F2 を押してエラーの原因となるコードに移動し、キャレットを ConferenceDetails() に配置し、Alt+F7 を押してこの初期化子のすべての使用箇所を検索します。

    検索ツールウィンドウに、修正が必要なすべての呼び出しが表示されます。ハイライトされたコードにキャレットを置き、Alt+Enter を押して、Fix-it を適用するを選択します。

    Find usages

    ConferenceDetails.swift ファイルで、両方の使用箇所で Conference()conference パラメーターとして渡します。

    class ConferenceDetails_Previews: PreviewProvider { static var previews: some View { ConferenceDetails(conference: Conference()) } #if DEBUG @objc class func injected() { let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene windowScene?.windows.first?.rootViewController = UIHostingController(rootView: ConferenceDetails(conference: Conference())) } #endif }

    ConferenceList.swift で、イニシャライザー呼び出しを次のように変更します。

    NavigationLink(destination: ConferenceDetails(conference: conference)) { … }
  4. Conference クラスには初期化子がないため、Conference() は引き続きハイライトされます。1 つ追加するには、キャレットを Conference() に配置し、Alt+Enter を押して、初期化子を作成するを選択します。

    Create an initializer

    空の init() メソッドが Conference クラスに追加されます。そこにあるすべてのプロパティの初期値を設定します。例:

    init() { name = "Conference Name" location = "Location" start = Date() end = Date() link = "https://www.google.com" }

次に、プレビューを参照してください。ConferenceDetails ビューには、ConferenceList ビューから選択された会議の場所が表示されます。

Conference location
  1. Ctrl+D Text(conference.location) 行を 2 回複製します。

    struct ConferenceDetails: View { var conference: Conference var body: some View { Text(conference.location) Text(conference.location) Text(conference.location) } }
  2. 会議の開始日と終了日は、MMMM dd, yyyy - MMMM dd, yyyy の形式で表示する必要があります。これを行うには、DateString に変換する必要があります。この目的のために新しい textDates() メソッドを使用して、2 番目の Text コントロールに対してそれを呼び出しましょう。

    struct ConferenceDetails: View { var conference: Conference var body: some View { Text(conference.location) Text(conference.textDates()) Text(conference.location) } }

    ハイライトされたコードにキャレットを置き、Alt+Enter を押して、メソッド 'textDates' を作成しますを選択します。

    Create a method from usage

    空の textDates() メソッドが Conference クラスに作成されます。そこに次のコードを追加します。

    func textDates() -> String { var result = start.dateToString() if let end = self.end { result = "\(result) - \(end.dateToString())" } return result }

    このメソッドは、Date クラスに追加する dateToString() ユーティリティ関数を使用します。Data.swift に移動し、そこに次のコードを追加します。

    extension Date { func dateToString() -> String { let format = DateFormatter() format.dateFormat = "MMM dd, yyyy" return format.string(from: self) } }

    会議の日付が詳細ビューに表示されます。

    Conference date displayed
  3. 会議の Web サイトへのクリック可能なリンクを表示する LinkButton コントロールを実装します。ConferenceDetails.swift で、次のコードを追加します。

    struct LinkButton: View { var link = "" var body: some View { Button(action: { UIApplication.shared.open(URL(string: self.link)!) }) { Text("Go to official website") } } }

    次に、3 番目の Text コントロールを LinkButton に置き換えます。

    struct ConferenceDetails: View { var conference: Conference var body: some View { Text(conference.location) Text(conference.textDates()) LinkButton(link: conference.link) } }

    新しいコントロールはすぐにプレビューに表示されます。

    Link preview

5. 詳細ビューの外観を調整する

現在残っているのは、詳細ビューのレイアウトを強化することだけです。

  1. ConferenceDetails ビューで、Text コントロールと LinkButtonVStack コンテナーにラップし、フレームの幅、高さ、配置を調整して画面の左上隅に移動します。

    struct ConferenceDetails: View { var conference: Conference var body: some View { VStack { Text(conference.location) Text(conference.textDates()) LinkButton(link: conference.link) }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading) } }
  2. VStack コンテンツを左に揃えます。

    VStack(alignment: .leading) { // … }
  3. VStack コンテナーのデフォルトのパディングを追加します。

    VStack(alignment: .leading) { // … }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading) .padding()
  4. VStack コンテナー内の要素の下部パディングを追加します。

    VStack(alignment: .leading) { Text(conference.location).padding(.bottom) Text(conference.textDates()).padding(.bottom) LinkButton(link: conference.link).padding(.bottom) }
  5. navigationBarTitle(_:) メソッドを使用して、ビュータイトルに会議名を表示します。

    VStack(alignment: .leading) { // … }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading) .padding() .navigationBarTitle(conference.name)

    最後に、ConferenceDetails ビューは次のようになります。

    Adjust the details view appearance

次は

このアプリケーションを作成するには、iOS/macOS 会議の最新リストを含むリモート YAML ファイル(英語)からデータをロードします。データの解析には、CocoaPods(英語) 依存関係マネージャーを使用してプロジェクトに追加された Yams(英語) ライブラリを使用できます。詳細については、プロジェクトで CocoaPods を使用するチュートリアルを参照してください。

関連ページ:

環境変数とプログラム引数

プログラムの引数と環境変数を実行 / デバッグ構成に追加することで、アプリのランタイム動作に影響を与えることができます。プログラム引数を追加するメインメニューから、を選択するか、ツールバーの実行 / デバッグ構成セレクターから実行構成の編集を選択します。開いた実行 / デバッグ構成ダイアログで、引数を渡す構成を選択します。プログラム引数フィールドに引数を入力します。引数はスペースで区切る必要があります。をクリックしてテキストフィールドを展開すると、引数のリスト全体を表示および編集できます。をクリ...

コードリファレンス情報

パラメーター情報:パラメーター情報ポップアップには、メソッドおよび関数呼び出しのパラメーターの名前が表示されます。AppCode は、エディターで左括弧を入力するか、候補リストからメソッドを選択してから 1 秒(1000 ミリ秒)以内に、使用可能なすべてのメソッドシグネチャーを含むポップアップを自動的に表示します。ポップアップが閉じている場合、または IDE がポップアップを自動的に表示しないように構成されている場合は、ポップアップを明示的に呼び出すことができます。これを行うには、を押する...

ライブテンプレート

ライブテンプレートを使用して、ループ、条件、宣言、print ステートメントなどの一般的な構造をコードに挿入します。コードスニペットを展開するには、対応するテンプレートの省略形を入力してを押します。を押し続けると、テンプレート内の 1 つの変数から次の変数に移動します。を押して、前の変数に移動します。必要な略語がわからない場合は、を押して、現在のコンテキストで使用可能なテンプレートのリストを開きます。ライブテンプレートの種類:次のタイプのライブテンプレートが区別されます。シンプルなテン

プロジェクトで CocoaPods を使用する

このチュートリアルでは、cocoaconferences.comWeb サイトで使用されているリモート YAML ファイルから最新の会議リストをロードすることにより、iOSConferences アプリケーション(AppCode で SwiftUI アプリケーションを作成するを参照)について詳しく説明します。YAML ファイルを解析するには、CocoaPods 依存関係マネージャーを使用してプロジェクトに追加される Yams ライブラリを使用します。ステップ 1. CocoaPods をインストールする...

パフォーマンスを向上させる

この記事では、大規模プロジェクトで AppCode のパフォーマンスを向上させるために使用できる有用な手法の概要を説明します。メモリヒープを増やす:メモリインジケータを有効にするパフォーマンスの低下がヒープメモリの不足によって引き起こされているかどうかを確認するには、メモリインジケーターを有効にします。ステータスバーを右クリックして、メモリインジケータを選択します。右下隅にメモリインジケータが表示されます。メモリヒープを増やすメインメニューからを選択します。開いたダイアログで、最大ヒープサイズ...