1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Swift
  6. »
  7. 【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

喧嘩するほど仲がいいとは言いますが、喧嘩する相手がいません。友達がいないということでしょうか。@It_is_Rです。

前回、StoryboardでMacのウィンドウに文字を表示しました。しかし、これではただ文字が表示されただけで何も面白くありません。
そこで、今回はボタンを作り、ボタンを押すことによってその文字列が変化するプログラムを作ってみたいと思います。今回もStoryboardを使うので、視覚的に、分かりやすく作っていくことができます。

開発環境はMac OS X El Capitan、Xcode7を使用しています。

目次
  1. Storyboardでボタンを作る
  2. ボタンに文字列を反応させる

Storyboardでボタンを作る

eyecatch_dog
まずは前回同様にプロジェクトを作成します。

Labelを貼る

では、前回とかさなりますが、ウィンドウに文字を表示させる所から始めてみましょう。
ウィンドウ右下のライブラリでLabelと検索してドラッグするんでしたよね。
Xcode23

Buttonを貼る

次に、Labelの下にButtonを貼ります。Labelを貼る時と同様に、ライブラリでButtonと検索し、「Push Button」をウィンドウへドラッグします。
Xcode24

一度実行してみる

では、一度実行してみましょう。
▶︎ボタンをクリックすれば実行です。
Xcode25

しかし、まだボタンをクリックしても、何の反応もありません。
「返事が無い、ただのマグロの様だ。」

文字を変更し、大きさやレイアウトを整える

ButtonやLabelに表示されている文字列を変更し、大きさやレイアウトを揃えてみましょう。
ButtonやLabelの文字列は、Storyboard上のものをダブルクリックして変更。
また、下の画像の様に、中央揃えしたいパーツを選択し、上2つの◯が選択されていることを確認。一番下の◯をクリックすると、文字を中央に揃えることができます。
Xcode26

ボタンに文字列を反応させる

それでは、ボタンを押すことで文字列が変更されるプログラムを作っていきます。

ソースを表示する

まずはソースが書かれたファイルを、右側に表示させます。◯の部分をクリックするとソースが表示されます。もう一度クリックするとソースの表示方法を選択できます。
Xcode28

パーツをソースに繋ぐ

なんと、これぐらいのプログラムならば、殆どコードを書かずに作ることができます。
ではウィンドウに置いたLabelを「controlキー」を押しながら、ViewControllerクラスの中の、一番上にドラッグします。すると下の画像の様なものが表示されるので、Nameのところに、「label1」と入力し、「Connect」ます。
Xcode29

同じ様にbuttonを「controlキー」を押しながら、ViewControllerクラスの中の、今度は一番下にドラッグします。Connectionを「Action」に切り替え、Nameのところに「pushButton」と入力し、「Connect」ます。
Xcode32

作られたpushButtonクラスに書いた命令が、ボタンが押された時に実行されます。

文字を変更する命令を加える

では最後に、文字を変更する命令をpushButtonクラス内に入力します。

label1.stringValue = "押すなよは押せって意味だろ!"

つまり、この全体のプログラムはこうなっています。

import Cocoa

class ViewController: NSViewController {
    @IBOutlet weak var label1: NSTextField!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    override var representedObject: AnyObject? {
        didSet {
        // Update the view, if already loaded.
        }
    }
    @IBAction func pushButton(sender: AnyObject) {
        label1.stringValue = "押すなよは押せって意味だろ!"
    }
}

最後に実行してみる

では、最後に実行して確認してみましょう。
Xcode33

押します。
Xcode34

スポンサードリンク

関連コンテンツ

オススメ記事

ファイルを分けるべよ!

小学生からのJavaScript入門。ファイルを分けて管理してみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第5弾です。 前回はりこちゃんを方向キーで操作(そうさ)することができるようになりました。 しかしプログラムを作ってくと、コンピュ

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

3Dゲームに酔ってしまう@It_is_Rです。 今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていきます。 gulp について gulpは、sas

オブジェクトを使ってみよう!

小学生からのJavaScript入門。オブジェクトを使ってみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第6弾です。 前回の講座(こうざ)では、HTMLやCSS、JavaScriptを分けて管理(かんり)する方法を紹介しました。 今回

【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。

サイズは大きいほど、押しがいがあります。@It_is_Rです。 スマホのボタンの話ですよ。何を考えてたんですか? Androidアプリ開発、8回目となりました。 今回はこれまでに学習した T

【Gitの使い方 – その5】リモートリポジトリ(GitHub)へPushしてみよう!

現在、新曲熱意制作中の@It_is_Rです。 さて、Gitの使い方5回目の今回は、GitHubのリモートリポジトリを作成し、そこにローカルリポジトリをPushする方法を紹介します。 [se

リセットCSS は何を使う? まとめ8選と2019年版ランキング

Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあります。 しかし、何を使っていいのかと感じている人もいると思います。 今回はこの リセットCSS につい

enchant.js100行未満!!本格シューティングゲーム作り方。

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしま

キャラを決まった間隔ずつ動かすよ!

小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第8弾です。 前回は、キャラクターの画像(がぞう)をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔(かんかく)を短く

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。 前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボ

コメントをどうぞ!

メールアドレスが公開されることはありません。