ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
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=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページ
子ページはありません
人気ページ
- 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アノテーションとは
最近更新/作成されたページ
- 【django】ログイン 認証機能 2026-09-08 03:22:09
- MySQL ERROR 1063 Incorrect column specifier for column|原因と直し方 2026-09-08 03:11:09
- 【PHPエラー】Object of class stdClass could not be converted to string 2026-09-07 07:46:04
- Julia Genie ローカル開発サーバ起動完全ガイド 2026-09-07 07:46:04
- Wi-Fi とは|規格と世代(Wi-Fi 4〜7)・周波数帯・CSMA/CA・WPA3 NEW 2026-09-07 07:45:13
- set コマンドでシェルオプションと位置パラメータを操作 | bash 2026-09-07 07:45:13
- JPEG(.jpg/.jpeg)画像形式の完全ガイド — 仕様・マジックナンバー・他形式との比較・EXIF 2026-09-07 07:45:13
- UE5 Get Overlapping Actorsで特定クラスだけ処理|Class Filter・Cast To 2026-09-07 07:45:13
- Linuxで特定拡張子のファイルを再帰削除|find -deleteの安全手順 2026-09-07 07:45:13
- Django CBVでテンプレートに値を渡す|get_context_data・extra_context 2026-09-07 07:45:13
- Linuxで複数ファイルの文字列を一括置換|find・sed・xargsの安全手順 2026-09-07 07:45:13
- Laravelルートグループ|prefix・middleware・nameで一括管理 2026-09-07 07:45:13
- Linux whichコマンドの使い方|絶対パス取得とtype・command -vの違い 2026-09-07 07:45:13
- Linux catコマンドの使い方|行番号表示・複数ファイル連結 2026-09-07 07:45:13
- unable to execute 'gcc': No such file or directory 2026-09-07 07:45:13
コメントを削除してもよろしいでしょうか?