mcpField
I
ios-uikit

ios-uikit

github.com/alphaonedev開発43 回インストール
リポジトリ

ios-uikit について

ios-uikitスキルは、SwiftとUIKitでiOSインターフェースを開発するエンジニアを支援します。コードによるレイアウト、リスト表示、ビューコントローラーのライフサイクルに加え、UIHostingControllerでSwiftUIビューを組み込む方法を扱います。

主な機能

  1. 01UIViewControllerのライフサイクル管理
  2. 02UITableViewとCollectionViewによるリスト構築
  3. 03Auto Layoutによるレイアウト定義
  4. 04コードによるインターフェース作成
  5. 05UIHostingControllerによるSwiftUIビューの埋め込み

活用シーン

  1. 01ストーリーボードを使わないUIKit画面の構築
  2. 02テーブルビューでの動的コンテンツ表示
  3. 031つのアプリでのUIKitとSwiftUIの併用

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/alphaonedev/openclaw-graph --skill ios-uikit

インストール後、Claude Code で/ios-uikitを入力して読み込まれたか確認します。

詳細

ios-uikit

目的

このスキルは、UIViewController、UITableView/CollectionView、Auto Layout、プログラムによる UI の作成、UIHostingController を介した SwiftUI とのブリッジに重点を置き、UIKit を使用した iOS アプリ開発を AI が支援できるようにします。

使用する場面

ストーリーボードを使わずにカスタムビュー、リスト、レイアウトを作成する必要がある iOS プロジェクトで使用します。Swift アプリでのプログラムによる UI 作成、UIKit と SwiftUI の統合、UITableView での動的コンテンツの処理に適しています。SwiftUI のみを使用する場合や、iOS 以外のプラットフォームでは使用しないでください。

主な機能

  • UIViewController のライフサイクルを管理する:viewDidLoad、viewWillAppear を実装して、セットアップや更新を行います。
  • UITableView/CollectionView を扱う:データソース、デリゲート、セルの再利用を設定して、効率よくリストを表示します。
  • Auto Layout をプログラムで適用する:NSLayoutConstraint を使用して動的にレイアウトを定義し、デバイスサイズに適応させます。
  • プログラムで UI を作成する:UIView のサブクラスを使用してビューを構築し、コードからサブビューを追加することで、Interface Builder を使わずに作成します。
  • SwiftUI とブリッジする:UIHostingController を使用して UIKit アプリに SwiftUI ビューを埋め込み、混在アーキテクチャをサポートします。

使用パターン

UIViewController のサブクラスを作成するには、UIViewController を継承する新しいクラスを定義し、主要なメソッドをオーバーライドします。たとえば、新しいファイルに次のように記述します。

import UIKit

class MyViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
    }
}

UITableView を使用する場合は、UITableViewDataSource を実装します。データソースを設定し、numberOfRowsInSection と cellForRowAt を定義して、次のようにセルクラスを登録します。

let tableView = UITableView(frame: view.bounds)
tableView.dataSource = self
tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")

Auto Layout を使用する場合は、制約をプログラムで追加します。アンカーを使用して位置を決めます。たとえば、ボタンを中央に配置します。

let button = UIButton()
view.addSubview(button)
button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true

UIHostingController とのブリッジでは、SwiftUI ビューを埋め込みます。インスタンスを作成し、ルートビューコントローラーとして設定します。

let hostingController = UIHostingController(rootView: MySwiftUIView())
present(hostingController, animated: true)

保持サイクルを避けるため、デリゲートでは常に弱参照を使用し、レイアウトの応答性を確認するため、さまざまなデバイスでテストしてください。

主なコマンド/API

主な API には、初期セットアップに使う viewDidLoad() などの UIViewController メソッドがあります。UITableView では、コンテンツを更新するために tableView.reloadData() を使用します。Auto Layout の制約を追加するには、NSLayoutConstraint.activate() に配列を渡します。Xcode でビルドする CLI の例:xcodebuild -scheme MyApp -configuration Debug。プログラムによる UI 作成では、UIView.addSubview() を使用し、フレームまたは制約を設定します。Info.plist の設定形式には、デバイスを確認するための UIRequiredDeviceCapabilities などがあります。認証は直接必要ありませんが、サービスと統合する場合は、ビルドスクリプトで $API_KEY などの環境変数を使用します。一般的なパターンとして、xcodebuild を実行する前に export API_KEY=your_key でエクスポートします。一般的なエンドポイントは該当しませんが、UIKit でネットワーク通信を行う場合は、デリゲートとともに URLSession を使用します。基本的な URLSession のコード例:

let session = URLSession.shared
let task = session.dataTask(with: URL(string: "https://example.com")!) { data, response, error in
    // Handle response
}
task.resume()

Auto Layout のエラーを防ぐため、更新後は必ず layoutIfNeeded() を呼び出してください。

統合に関する注意

このスキルを統合するには、Swift ファイルで UIKit をインポートします。SwiftUI とのブリッジを使う場合は、SwiftUI もインポートしてください。他のフレームワークと組み合わせる場合は、UIHostingController で SwiftUI ビューをラップし、子ビューコントローラーとして追加します。設定は AppDelegate または SceneDelegate で行います。たとえば、application(_:didFinishLaunchingWithOptions:) でビューコントローラーをインスタンス化して表示します。Pods を使用する場合は、Podfile に pod 'SomeUIKitLib' を追加して、pod install を実行します。デバイスを起動するには、xcrun simctl boot "iPhone 14" を使い、シミュレーターで統合をテストします。環境変数は、コード内で let key = ProcessInfo.processInfo.environment["API_KEY"] のように参照します。制約を適用する前に、すべてのビューがビュー階層に追加されていることを確認してください。

エラー処理

Auto Layout の競合などの一般的なエラーは、ビジュアルフォーマット言語またはアンカーを正しく使用して対処し、Xcode の Debug View Hierarchy でデバッグします。UITableView では、didSelectRowAt を実装してインデックスを確認し、データソースのエラーを捕捉します。実行時の問題には try-catch を使用します。たとえば、URLSession のコールバックではエラーを確認します。

if let error = error {
    print("Error: \(error.localizedDescription)")
    return
}

UIViewController では、didReceiveMemoryWarning をオーバーライドしてリソースを解放します。デバッグには os_log または print でエラーを記録し、デリゲート内の nil チェックには guard 文を使用します。

グラフ上の関連性

  • クラスター mobile に関連しています(例:クロスプラットフォームの UI パターンで android-jetpack とタグを共有しています)。
  • タグを介して接続されています:uikit(ブリッジのために swiftui とリンク)、ios(開発ワークフローのために xcode-build と接続)、viewcontroller(アプリのフローのために navigation-stack と関連)、autolayout(アダプティブ UI のために responsive-design と結び付いています)。

コメント