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を使用しています。

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

スポンサードリンク

関連コンテンツ

オススメ記事

scratch

小学生から始めるScratch入門。シューティングゲームを作ろう!

小学生から始めるScratch入門です。 前回、ゲーム開発に必要な知識を学びました。 第3回目の今回は、これまでに学んだ知識を活用し、実際にシューティングゲームを作ってみようと思います。

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

迷路やRPGで使えるマップを作ってみよ!

小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう!

小学生からのプログラミング講座(こうざ)、第13弾です。 前回はHTML5とCanvasを使って、キャラクターがキーボードの入力(にゅうりょく)で移動(いどう)するところまで、紹介(しょうかい)

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

CSS Button

サイト制作に!!CSSでマウスオーバーボタンの作り方。

新年初の記事です。とりあえず、あけましておめでとうございます。@It_is_Rです。 お正月……おそーがつ……おそまつ……おそ松さん。新年早々くだらないこと言ってないで早く記事を書けって話ですね。

Ameba customize

アメーバのOwndで、無料で超簡単にホームページ作ってやろうぜ!!

どうも、@It_is_Rです。 ホームページを作成するには、まずHTMLを使う能力、若しくはソフトが必要になります。 さらにサーバーを借りなくてはなりません。するとお金がかかったりします。 では

【Bootstrap 4】ボタン(btn)の作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボ

carousel

【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

Bootstrap4の使い方、第8回目です。 サイトをみていると、画像を横並びにしてくるくると回転するカルーセル機能を実装しているサイトがありますよね。 Bootstrap4には、カルーセルを

VCCW

VCCW で、超簡単に WordPress のローカル開発環境を整える方法。

考えすぎて間違った方向へ進む、@It_is_Rです。 WordPress のローカル開発環境を作りたい時、 VCCW を使うと便利です。 今回は、 その方法を紹介します。 VCC

コメントをどうぞ!

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




オリジナルゲーム.com