Interface Builder を使用してインターフェースを作成

Interface Builder のワークフロー


Interface Builder を使用して、アプリのユーザーインターフェースを視覚的にレイアウトし、コードに接続します。


注意:Swift アプリの場合、オプションで SwiftUI を使用してインターフェースをレイアウトし、インタラクティブなプレビューを表示できます。SwiftUI を使用する iOS アプリには、Interface Builder を使用して編集する LaunchScreen.storyboard ファイルも含まれています。


ステップ 1:ストーリーボードまたは XIB プロジェクトの作成


Interface Builder を使用するには、テンプレートからプロジェクトを作成する ときに、ユーザーインターフェイスとしてストーリーボードまたは XIB (macOS) を選択します。すると、プロジェクトには、アプリが最初に起動したときに表示されるビューコントローラーとビューを含むメインユーザーインターフェイスファイル (Main.storyboard、Interface.storyboard、または MainMenu.xib ファイル) が含まれます。iOS アプリの場合、アプリの起動中に表示されるビューには、LaunchScreen.storyboard ファイルもあります。


ステップ 2:ユーザーインターフェイスファイルを開く


プロジェクトナビゲータ で、ユーザーインターフェイスファイル を選択すると、エディタエリア 内の Interface Builder でファイルが開きます。ビューがキャンバスエリア内に表示され、下にあるオブジェクトの構造体がアウトラインビューに表示されます。アウトラインビューが折りたたまれている場合は、キャンバスの下のトグル (LLeftCu098) をクリックして展開します。ストーリーボードファイルを初めて開くと、レイアウトはデフォルトのデバイス構成で表示され、後で変更できます。


別のウィンドウで Interface Builder を開くには、ユーザーインターフェイスファイルを Control + クリックし、ポップアップメニューから [新しいウィンドウで開く(Open in New Window)] を選択します。


ib_overview


ステップ 3:コントロール、画像、その他の UI オブジェクトを追加


ユーザーインターフェイスで必要なすべてのオブジェクトをライブラリからキャンバスにドラッグします。ライブラリ を開くには、ツールバーの[ライブラリ] ボタン (+) をクリックしてから、オブジェクト(Object )、画像(Graphic)、またはカラーライブラリ(CoPi ) をクリックして、ドラッグするオブジェクトを見つけます。


キャンバスでは、グリッド線を使用してオブジェクトを整列および中央揃えでき、目的の場所にオブジェクトをドラッグすることで、オブジェクトを再配置できます。テキストを変更するには (たとえば、ボタンのタイトルを編集するには) 、オブジェクトをダブルクリックして、テキストを入力します。


また、インスペクタを使用してオブジェクトを編集することもできます。キャンバス上でオブジェクトを選択し、属性インスペクタ (Atin) をクリックします。ビューのサイズと位置に関する情報を取得するには、サイズインスペクター (Jgin) をクリックします。


ib_add_view


macOS アプリの場合、項目をタッチバーに追加します。NSTouchBar オブジェクトをオブジェクトライブラリからウィンドウまたはカスタムビューにドラッグします。NSTouchBarItem オブジェクトをタッチバーにドラッグし、項目をコードに接続します。次に、NSTouchBar オブジェクトの項目をプレビュー し、Mac 上で実際のタッチバーを使用して項目をテストします。タッチバーがない場合は、タッチバーシミュレータ を使用してテストできます。


ステップ 4:ビューとコントロールをコードに接続する


ユーザーインターフェイスにオブジェクトを追加するときに、ソースエディタ でその動作を実装するコードを記述できます。ビューコントローラの実装ファイルを開くには、[自動(Automatic)] を選択してから、ジャンプバーのクラス実装ファイル名を選択します。次に、インターフェイスビルダーを使用して、ユーザーインターフェイスオブジェクトをコードに視覚的に接続します。


コード内のインターフェースオブジェクトを参照したい場合は、キャンバス上のオブジェクトからプロパティ宣言が許可されているソースエディタのコードに Control + ドラッグして、アウトレット接続を追加 します。ユーザーがコントロールと相互作用したときに呼び出される アクションメソッドを追加する には、コントロールから実装ファイルのメソッド実装セクションに Control + ドラッグします。


接続を削除したり変更する には、オブジェクトを選択して、Control + クリックして接続パネルを開くか、[表示(View)] > [インスペクタ(Inspectors)] > [接続インスペクタを表示(Show Connections Inspector)] を選択して 接続インスペクタ (Cnin)を開きます。


gs_connection_drag


ステップ 5 :さまざまなデバイス構成を使用して UI を表示し、必要に応じてバリエーションを作成


まず、キャンバスの下にある [表示(View as)] ボタンを使用して、アプリを実行しているほとんどのユーザに想定する さまざまなデバイス構成を使用してユーザーインターフェイスを表示します。次に、必要に応じて ユーザーインターフェイスのバリエーションを作成 します。


dce_select_device_config


ステップ 6:アプリのユーザーインターフェイスのレイアウト制約を定義


デバイス構成を変更したときに、キャンバス内のオブジェクトが予期した場所に表示されない場合は、[自動レイアウト(Auto Layout)] 制約を使用して、オブジェクトのスケーリングと再配置の方法に関するルールを設定します。距離と配置サイズと位置 の制約を追加できます。次に、ツールを使用して、自動レイアウトのエラーと警告を見つけて解決 します。


gs_ib_align_tool


ステップ 7:ストーリーボードを使用してアプリのユーザーインターフェイスを設計


シーンを接続するセグエ、およびセグエをトリガーするコントロール、シーンで構成されるストーリーボードで、アプリ内のユーザパスをグラフィカルにレイアウトします。最初に シーンとビューを追加 し、次に それらの間にセグエを追加 します。


SB_storyboard


ステップ 8:レイアウトのプレビュー


アシスタントエディタを使用して、さまざまなデバイス構成でレイアウトをプレビュー できます。iOS アプリの場合、ポートレートモードとランドスケープモードを切り替えてから、別のデバイスファミリーを選択できます。macOS アプリの場合、レイアウトをダークアピアランスとライトアピアランスでプレビューできます (ダークモードのサポート (macOS) を参照の事)。アプリにローカリゼーションを追加すると、ポップアップメニューから言語を選択できます。ローカライズをまだ行っていないが、レイアウトがさまざまな文字列の長さをどのように処理するかを確認したい場合は、メニューから[倍長の疑似言語(Double-Length Pseudolanguage)] を選択します。


gs_preview





以下も見よ

キャンバスにユーザーインターフェイスオブジェクトを追加

アウトレット接続を追加してメッセージを UI オブジェクトに送信

アクション接続を追加して UI オブジェクトからメッセージを受信

さまざまなデバイス構成を使用してユーザーインターフェイスを表示

自動レイアウトとレイアウト制約について

ストーリーボード、シーン、接続について

さまざまなデバイス構成でレイアウトをプレビュー





































目次
Xcode 11 の新機能

  • ようこそ

  • Xcode Help 全メニュー(作成中)

  • 始めましょう

  • プロジェクトの作成
  • メインウインドウについて
  • プロジェクトファイルの管理
  • プロジェクトファイルをナビゲート
  • ファイルとフォルダを追加
  • ファイルをグループに整理
  • コンテンツを検索して置き換え
  • 関連プロジェクトにワークスペースを使用
  • 別のプロジェクトからの参照
  • エディタエリアの構成
  • デベロッパ向け文書を検索
  • プロジェクトやアプリの名前を変更

  • Swift UI インターフェースの作成
  • プレビューの表示
  • ビューと修飾子を追加
  • UI 要素の属性を編集
  • Action メニューでコードを埋め込む

  • Interface Builder を使用してインターフェースを作成
  • Interface Builder のワークフロー

  • オブジェクトとイメージの追加
  • ユーザインターフェースオブジェクトの追加
  • ユーザーインターフェイスに画像を追加
  • カスタムオブジェクトの追加
  • カスタムビューのレンダリング
  • カスタムビューのデバッグ
  • 整列した長方形を切り替え
  • ガイドを使用してビューを配置
  • ユーザ定義の実行時属性の追加<
  • ファイルの所有者の設定

  • オブジェクトの自動サイズ変更と配置
  • 自動レイアウトについて
  • 距離と配置の制約を指定
  • サイズと位置を指定
  • 制約を Control + ドラッグ
  • 制約を表示および管理
  • 自動レイアウトの問題を見つけて解決
  • 制約の編集
  • 固有のサイズを設定
  • ダークモードをサポート (macOS)

  • デバイス固有のバリエーションを追加
  • デバイス構成の表示
  • UI のバリエーションを作成 (iOS、tvOS、watchOS)
  • プロパティ値のバリエーションを編集 (iOS、tvOS、watchOS)

  • オブジェクトをコードに接続
  • UI オブジェクトにメッセージを送信
  • UI オブジェクトからメッセージを受信
  • 接続の管理
  • Cocoa 結束の追加、削除、編集

  • オブジェクトとストーリーボードの編集
  • ストーリーボード、シーン、接続
  • シーンとビューの追加
  • セグエの追加
  • セグエの構成
  • ストーリーボード参照の追加
  • オブジェクト属性を構成
  • レイヤービュー
  • 最初のシーンを設定
  • ストーリーボードをリファクタリング
  • さまざまなデバイス構成でレイアウトをプレビュー
  • Touch Bar 項目のプレビュー
  • シミュレートされたバーの追加
  • シミュレートされたスクリーンサイズの設定
  • プレースホルダ背景の切り替え

  • コードを記述
  • ソースエディタについて
  • コードの入力
  • コード入力中に問題の修正
  • コード補完を使用して構文エラーを回避
  • 括弧、中括弧、および角括弧を一致
  • スニペットの作成と使用
  • ソースファイル内のテキストを検索して置換
  • コードを折りたたむ

  • コードをリファクタリング
  • すべてのシンボルの出現場所を編集
  • 複数のカーソルを使用して編集
  • プロパティ、メソッド、または構造を追加
  • コードから変数、関数、メソッドを作成

  • コードをナビゲート
  • シンボル宣言と参照ドキュメントを表示
  • シンボルをナビゲート
  • ファイルとシンボルにジャンプ
  • シンボルを含むファイルを開く
  • ジャンプバーにコード注釈を追加
  • コードの分析
  • 構文カラーのスタイルを切り替える
  • アプリの実行
  • アプリのビルドと実行
  • シミュレートされたデバイスで実行
  • 署名のワークフロー
  • デバイス上でアプリを実行
  • ワイヤレスデバイスをペアリング
  • ワイヤレスデバイス上で実行
  • ワイヤレスデバイスのトラブルシューティング
  • Watch アプリ開発高速化には Wi-Fi を使用
  • 署名レポートを表示

  • アセットの操作
  • アセットカタログについて
  • App Store アイコンの追加
  • 起動画面のアセットカタログを使用 (iPhone)
  • 特性ベースのアセットバリエーションを作成
  • ダークアピアランス(macOS)の提供
  • AR 画像とオブジェクトの追加
  • テクスチャアトラスの作成
  • SceneKit シーンエディタについて
  • 3D シーンのプレビュー
  • 画像にサイズ変更可能なエリアを追加

  • SpriteKit パーティクルエミッタエディタ
  • パーティクルエミッタをプロジェクトに追加
  • パーティクルエミッタをシーンに追加
  • 背景とテクスチャの変更
  • 粒子のライフサイクルを管理する
  • 動きと物理反応の制御
  • サイズと回転の調整
  • 粒子の色の変更
  • カスタムシェーダの作成

  • コードのデバッグ
  • デバッグエリアについて
  • 実行中のアプリの実行を制御
  • 実行中のアプリまたはプロセスをデバッグ
  • 診断と共にアプリを実行

  • 変数とスレッドを調べる
  • 変数の表示
  • 実行時に変数値を確認
  • スレッドとスタックを確認
  • スレッドの表示
  • スレッドの一時停止と再開

  • ブレークポイントの設定
  • コードにブレークポイントの追加
  • ナビゲータを使用してブレークポイントの管理
  • イベント発生時に実行を一時停止

  • ビューの確認
  • ビュー階層デバッガ
  • ビュー階層の確認
  • ビュー階層のフィルタリング
  • 階層に焦点を当てる
  • ビューと制約の検査
  • ソースコードを開く

  • パフォーマンスの最適化
  • ゲージを使用してアプリの監視
  • エネルギー使用の監視(iOS,Mac)
  • アプリのプロファイリング
  • デバイス条件とは何ですか?(iOS)
  • デバイス条件を可能にする(iOS)
  • デバイスの悪条件下でのテスト(iOS)
  • デバッガ内の環境設定の上書き
  • 場所のシミュレーション
  • TouchBar シミュレータの表示
  • ログとレポートの表示
  • 問題を表示し対処

  • アプリのテスト
  • テストのワークフロー
  • UI テストとユニットテストの実行
  • コードの範囲を有効にする
  • テストの実行オプションを選択

  • テストの管理
  • テストクラスの追加
  • テストターゲットの追加
  • テストレポートの表示
  • テストの失敗の表示
  • テストの結果の表示と共有
  • パフォーマンステストの管理

  • テストプランの使用
  • テストプランとは何ですか?
  • スキームを変換してテストプランを使用する
  • テストプランの編集

  • ターゲットとビルドの構成
  • プロジェクトエディタについて

  • 一般設定を編集

  • ID 設定を編集

  • バンドル ID とは何ですか?
  • バンドル ID の設定
  • アプリカテゴリの設定 (macOS)
  • バージョンとビルドの設定

  • 展開情報を編集

  • 複数のウインドウを可能に (iPad)
  • 起動スクリーンの作成
  • フレームワークとライブラリへのリンク

  • サイン設定の編集
  • チームにプロジェクトを割り当てる
  • 手動でアプリにサインする

  • 情報設定の編集

  • 情報プロパティリストの編集
  • エクスポートコンプライアンスキーの追加
  • 著作権キーの設定 (macOS)
  • サポートされているドキュメントの型を設定

  • ビルド設定の編集
  • ビルド設定とは何ですか?
  • ビルド設定の構成
  • ビルド設定を学ぶ
  • 異なるプラットフォームでのビルドバリエーション
  • ビルド設定の継承を評価する
  • ビルドの状況を監視
  • ビルド構成ファイルを追加
  • ビルドフェーズの構成
  • ビルドフェーズとは何ですか?
  • ターゲットの依存関係を作成
  • シェルスクリプトの実行
  • ビルドフェーズスクリプトの記述
  • ターゲットにヘッダの追加
  • Swift シンボルの除去

  • スキームの管理
  • スキームの構成
  • スキームの追加、削除、名前変更、共有
  • 複数のターゲットのビルド
  • ターゲットを並行してビルド
  • 実行時引数と環境変数を指定
  • 実行時の場所をシミュレートする
  • スキームと宛先の切り替え

  • 機能を構成する
  • 機能の追加
  • アプリグループの構成
  • アプリサンドボックスの構成(macOS)
  • Apple Pay の構成
  • 関連ドメインを構成する (iOS、tvOS、watchOS)
  • バックグラウンドモードの構成 (iOS、tvOS、watchOS)
  • ユーザフォントの構成
  • ゲームコントローラの構成
  • 強化された実行時環境を有効にする (macOS)
  • HealthKit の構成 (iOS,watchOS)
  • HomeKit の構成 (iOS,tvOS,watchOS)

  • iCloud サービスの構成
  • iCloud サービスを有効にする
  • iCloud コンテナの管理
  • CloudKit の概要とレコードの管理
  • キーチェーン共有の構成

  • マップの構成
  • マップとモード選択を有効にする
  • ルーティングアプリの構成
  • ネットワーク拡張機能の構成
  • プッシュ通知を有効にする
  • Apple でのサインインを有効にする
  • Siri の構成 (iOS,watchOS)
  • Wallet の構成

  • Swift パッケージでの操作
  • Swift パッケージとは何ですか?
  • 既存の Swift パッケージを開く
  • ターゲットをパッケージ製品にリンク
  • Swift パッケージの作成
  • Swift パッケージの公開

  • iPad アプリの Mac バージョンを作成
  • Mac Catalyst でビルドされた Mac アプリを作成
  • Mac Catalyst バンドル ID でビルドされた Mac アプリについて
  • Mac Catalyst でビルドされた Mac アプリの配布
  • watch だけのアプリの作成と配布

  • アプリのローカライズ
  • ローカライズとは何ですか?
  • 言語の追加
  • リソースをローカライズ可能にする
  • 言語に複数の異形を追加する
  • 翻訳のためローカル化をエクスポート
  • ローカル化をインポート
  • ビューをロックする
  • ローカル化をテストする
  • Xcode のローカル化カタログ
  • Stringsdict ファイル形式

  • デバイスの管理
  • デバイス ID を見つける
  • アプリのインストールとアンインストール
  • ベータ版の OS のインストール
  • デバイスのログの表示とインポート
  • クラッシュとエネルギーのログを見つける
  • アプリコンテナの管理
  • スクリーンショットを撮る
  • シミュレータの作成
  • Apple Watch シミュレータとペアリング
  • ペアリングした Apple Watch の表示

  • 署名アセットの維持
  • アプリ署名とは何ですか?
  • 開発者アカウントのエクスポート
  • 署名証明書の管理
  • プロビジョンプロファイルのダウンロード
  • デバイス上でのプロファイルの管理
  • 署名証明書の表示・削除

  • 署名のトラブルシューティング
  • 署名証明書がなかったら
  • 中間証明書権限がない場合
  • コード署名エラーが起こったら
  • ビルドに資格エラーがある場合

  • ソースコントロールの使用
  • ソースコントロールのワークフロー
  • ローカルレポジトリの作成
  • 変更をプル、コミット、プッシュする
  • ソースエディタで変更を表示
  • ファイルの修正を比較する
  • コミットの履歴を表示
  • リモートリポジトリアカウントの追加
  • ローカルレポジトリからリモートを作成する
  • レポジトリからプロジェクトを複製する
  • ローカルレポジトリにリモートを追加する
  • 共同編集者を追加してリポジトリを共有
  • 分岐の管理
  • タグの使用
  • README ファイルの追加

  • アプリの配布
  • 配布の概要
  • アーカイブオーガナイザーについて
  • アプリ配布の準備
  • アーカイブの作成

  • ベータバージョンのテスト
  • TestFlight を使用してアプリを配布 (iOS,tvOS,watchOS)
  • 登録したデバイスに配布 (iOS,tvOS,watchOS)
  • アプリのエクスポート (iOS,tvOS,watchOS)
  • 手動で配布署名の管理
  • 登録したコンピュータへの配布 (macOS)
  • アプリのエクスポート (macOS)
  • Mac のインストーラパッケージのテスト

  • Mac アプリストアの外での配布
  • 公証または開発者 ID のアプリを配布する
  • 公証を受ける macOS アプリをアップロードする
  • 開発者 ID のアプリをテスト
  • Gatekeeper を有効・無効にする
  • 開発者 ID インストーラパッケージの作成

  • エンタープライズアプリの作成
  • エンタープライズアプリの開発・配布
  • iOS で開発者を手動で信頼する

  • バイナリフレームワークの配布
  • XVFramework とは何ですか?
  • XVFramework の作成

  • アプリストアにアプリの提出
  • アプリの軽量化とは何ですか?
  • アプリストアを通じて配布
  • アプリを検証
  • アプリをアップロード
  • アプリ内購入コンテンツのアップロード
  • ビルド設定を確認

  • クラッシュ、エネルギー、メトリックのレポートを表示
  • クラッシュオーガナイザ
  • エネルギーオーガナイザ
  • メトリックオーガナイザ
  • どのようにレポートは作成されるのですか?
  • クラッシュまたはエネルギーレポートの選択
  • メトリックレポートのカテゴリを選択
  • クラッシュまたはエネルギーレポートの表示
  • クラッシュまたはエネルギーレポートの検査
  • クラッシュまたはエネルギーレポートの統計を表示
  • メトリックレポートデータについて

  • クラッシュとエネルギーのログを象徴化する
  • 象徴化とは何ですか?
  • デバッグシンボルのダウンロード
  • ログが象徴化されていなかったら?
  • 開発者とクラッシュデータと統計を共有する
  • オーガナイザにレポートが表示されなかったら
  • サポートされているクラッシュレポート
  • サポートされているエネルギーレポート
  • サポートされているメトリックレポート

  • 継続的統合を実行
  • 継続的統合の概要

  • Xcode サーバの構成
  • Xcode サーバの設定
  • Xcode サーバの開始・停止
  • Xcode サーバへの接続
  • Xcode サーバとスキームの共有
  • ボットの作成

  • ボットの構成
  • ボットのスキームとアクション設定
  • Xcode サーバを署名管理出来るようにする
  • ボットトリガーの作成
  • ボットを複数のデバイスでアプリを実行するように構成
  • ボットを iOS アプリファイルを作成するように構成
  • Xcode サーバ環境変数
  • ボットを複製、編集、削除する
  • 統合を実行、キャンセル、削除する
  • ボットの統合結果を表示

  • ビルド失敗のトラブルシューティング
  • プロジェクトにターゲット依存循環がある場合
  • 複数のコマンドが同じ出力を生成する場合
  • 旧式の Always Search User Paths ビルド設定を使用する場合

  • プレイグラウンドの作成
  • 作成、編集、及び実行
  • 補助コードを追加
  • リソースの追加
  • リッチコメントの使用
  • ページの追加、移動、名前変更
  • プレイグラウンド間でページのコピー
  • 文の結果の表示
  • ライブビューの追加
  • プレイグラウンドにリテラルを追加

  • Xcode のカスタマイズ
  • 一般的な環境設定を管理
  • アカウント、サーバ、及びリポジトリの追加
  • Apple ID の追加
  • イベントのアクションを構成
  • どのファイルが表示されるかを構成
  • フォントとカラーの管理
  • コード編集とインデントの構成
  • キーボードショートカットのカスタマイズ
  • Touch Bar コントロールのカスタマイズ
  • ソースコントロールの構成
  • テキストマクロのカスタマイズ
  • 新規ファイルヘッダのカスタマイズ

  • シミュレータとツールチェーンの管理
  • シミュレータの実行時環境のインストール
  • ツールチェーンの切り替え
  • ツールチェーンを確認、表示、削除する
  • プロジェクトファイルの場所を指定
  • ビルドシステムの選択

  • リファレンス
  • エクスポートファイルの整理
  • ビルド設定
  • 設定ファイルの構成

  • テキストマクロ

  • テキストマクロの書式
  • テキストマクロ



  • ツールバーについて
  • ナビゲータエリアについて
  • インスペクタエリアについて
  • プロパティリストの編集












  • トップへ(Xcode Help)












    トップへ(Xcode Help)












    トップへ(Xcode Help)












    トップへ(Xcode Help)












    トップへ(Xcode Help)












    トップへ(Xcode Help)












    トップへ(Xcode Help)












    トップへ(Xcode Help)












    トップへ(Xcode Help)












    トップへ(Xcode Help)












    トップへ(Xcode Help)












    トップへ(Xcode Help)












    トップへ(Xcode Help)