| この記事の要点 |
|
Storyboard で作る(UIKit)
1. ボタンを配置する
1. Main.storyboard を開く
2. 右上の「+」(Library / Cmd + Shift + L)から Button を探す
3. View Controller の画面上へドラッグする
4. ダブルクリックしてラベルを「送信」に変える
5. 画面下の Add New Constraints で位置の制約を付ける
制約(Auto Layout)を付けないと、実機の画面サイズによってはボタンが画面外に出ます。シミュレーターでは見えているのに実機で押せない、という症状の原因になります。
2. コードとつなぐ
1. 右上の「Adjust Editor Options」→ Assistant を選び、Storyboard と
ViewController.swift を左右に並べる
2. ボタンを Control キーを押しながらコード側へドラッグする
3. 出てきたダイアログで
Connection: Action … タップされたときの処理
Name: tapSend
Type: UIButton … sender をボタンとして受け取れる
Event: Touch Up Inside
4. Connect を押す
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var messageLabel: UILabel! // 表示を変えたい部品
@IBOutlet weak var sendButton: UIButton! // ボタン自身を操作したいとき
@IBAction func tapSend(_ sender: UIButton) {
messageLabel.text = "送信しました"
sender.isEnabled = false // 押したボタンを無効にする
}
}
| 役割 | 作るとき | |
|---|---|---|
@IBOutlet | 部品をコードから操作する | Connection: Outlet |
@IBAction | 部品の操作を受け取る | Connection: Action |
コードだけで作る
override func viewDidLoad() {
super.viewDidLoad()
let button = UIButton(type: .system)
button.setTitle("送信", for: .normal)
button.translatesAutoresizingMaskIntoConstraints = false // 制約を自分で付ける
view.addSubview(button)
NSLayoutConstraint.activate([
button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
button.centerYAnchor.constraint(equalTo: view.centerYAnchor),
button.heightAnchor.constraint(equalToConstant: 44),
])
// 押されたときの処理をつなぐ
button.addTarget(self, action: #selector(tapSend), for: .touchUpInside)
// クロージャで書く(iOS 14 以降)
button.addAction(UIAction { _ in print("押された") }, for: .touchUpInside)
}
@objc private func tapSend() {
print("押された")
}
#selector で指定するメソッドには @objc が必要です。付け忘れるとビルドは通り、実行時に unrecognized selector sent to instance でクラッシュします。
見た目を整える
// iOS 15 以降: Configuration で指定する
var config = UIButton.Configuration.filled()
config.title = "送信"
config.image = UIImage(systemName: "paperplane")
config.imagePadding = 8
config.baseBackgroundColor = .systemBlue
config.cornerStyle = .medium
config.contentInsets = NSDirectionalEdgeInsets(top: 12, leading: 20,
bottom: 12, trailing: 20)
let button = UIButton(configuration: config)
// 従来の書き方(iOS 14 以前)
button.setTitle("送信", for: .normal)
button.setTitleColor(.white, for: .normal)
button.backgroundColor = .systemBlue
button.layer.cornerRadius = 8
// 状態ごとに変える
button.setTitle("送信中…", for: .disabled)
button.isEnabled = false
タップできる領域は 44×44 ポイント以上にするのが Apple のヒューマンインターフェースガイドラインの推奨です。小さいと押しづらく、審査で指摘されることもあります。
SwiftUI の場合
import SwiftUI
struct ContentView: View {
@State private var message = ""
@State private var isSending = false
var body: some View {
VStack(spacing: 16) {
Text(message)
Button("送信") {
message = "送信しました"
}
.buttonStyle(.borderedProminent)
.disabled(isSending)
// アイコン付き
Button {
isSending = true
} label: {
Label("送信", systemImage: "paperplane")
}
// 削除など取り消せない操作
Button("削除", role: .destructive) { }
}
.padding()
}
}
SwiftUI では接続の作業そのものが不要です。Storyboard のような「線がつながっていない」問題が起きません。
反応しないときの確認順
| 症状 | 原因 |
|---|---|
| 押しても何も起きない | 接続が切れている。コード左端の丸が白い(黒く塗られていれば接続済み) |
unrecognized selector sent to instance | メソッド名を変えたのに Storyboard 側の接続が古いまま。接続を消して繋ぎ直す |
Unexpectedly found nil while unwrapping | @IBOutlet が繋がっていない/viewDidLoad より前に触っている |
| ボタンが見えない・押せない | 制約が無い/他のビューに隠れている/親の isUserInteractionEnabled が false |
| 2 回反応する | 同じメソッドに接続が二重に張られている |
接続の状態は、Storyboard でボタンを右クリックすると一覧で確認できます。不要な接続は x を押して外してください。
関連
子ページ
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript で base URL を取得する方法|window.location.origin
- 4 YouTube Data API v3 エラー一覧|403・400・404 の原因と対処
- 5 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 6 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 7 Spring Frameworkのアノテーション一覧
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- Git pushした変更の取消し|revert・履歴変更と保護の注意点 2026-10-15 23:49:01
- Gitでローカルを戻す前に|reset・restoreの違いと退避範囲 2026-10-15 23:49:01
- Git rebaseの使い方|対象範囲・競合解決・pushの判断 2026-10-15 22:50:59
- Git pullの使い方|取込み先・ff-only・競合とstashの注意点 2026-10-15 22:50:59
- Git pushの使い方|送信先・タグ・force-with-leaseの条件 2026-10-15 22:12:47
- Git remoteの設定・確認・削除|SSH URLとfetch/pushの違い 2026-10-15 22:12:47
- Gitリモートリポジトリの作成|初回push・既存履歴・mirrorの注意 2026-10-15 15:48:16
- Gitのuser.name・user.email設定|local/global・確認と過去履歴の注意 2026-10-15 15:30:07
- LinuxにGitをインストール|配布元・初期設定・TLSと認証の確認 2026-10-15 15:30:06
- Git導入と初回push|Linuxサーバー・Windows/macOS・SSH設定 2026-10-15 14:51:54
- Db2のCREATE INDEX|索引定義・INCLUDEと実行計画の確認 2026-10-15 14:10:22
- Db2の自動採番|IDENTITY・ID取得とRESTARTの注意点 2026-10-15 14:10:22
- 【DB2】特定スキーマの全テーブルの全カラム情報を取得する方法 2026-10-15 13:53:15
- Db2のシーケンスとIDENTITYの違い|採番とカタログの確認SQL 2026-10-15 13:53:15
- Db2で複数カラムをUPDATEする方法|SET・WHEREと更新前の値 2026-10-15 13:53:15