動く絵本のiPhoneアプリ作成で学ぶSwift文法総まとめ初心者のためのSwiftで始めるプログラミング入門(終)(5/6 ページ)

» 2016年05月11日 05時00分 公開
[諏訪悠紀アンダースコア]

ボタンを押したときの動きをSwiftで書いてみよう

 「動く絵本アプリ」で最も重要な「絵を動かす」部分の作り方が分かったところで、次は「『進むボタン』や『戻るボタン』を押したときに、ページを変更する」という動きを作っていきましょう。

UIコンポーネントに何かが起こったときにメソッドを呼び出す「アクション」

 絵を動かすプログラムを書くことと違う点は、「ボタンをタップしたとき」というタイミングで処理を行わせる必要がある点です。これには「アクション」機能を使います。アクションを設定すると、UIコンポーネントに何かが起こったときに、メソッドを呼び出すように連携させることができます。

アクション アクション

 このアクションの機能を使って、「『進むボタン』を押したとき」に呼び出されるメソッドと「『戻るボタン』を押したとき」に呼び出されるメソッドを作ります。そして、それぞれのメソッドの中でページを変更するプログラムを書くことで、「動く絵本アプリ」として必要な動きを作り上げることができます。

 それでは、ボタンを押したときに呼び出されるメソッドを作りましょう。ここでも、アウトレットのときと同じく「アシスタントエディタ」を使います。

 プロジェクトナビゲーターから「Main.storyboard」を選び、エディタ領域に「Main.storyboard」が表示されている状態で、プロジェクトナビゲーターの中にある「ViewController.swift」をキーボードの「Option」キーを押しながらクリックします。

 まずは「進むボタン」からです。シーンの右下に配置している「進むボタン」を、キーボードの「Control」キーを押しながら、ViewControllerクラスの「{」と「}」の間にドラッグ&ドロップします。

UIコンポーネントのドラッグ&ドロップ UIコンポーネントのドラッグ&ドロップ

 ドラッグ&ドロップを終えると、接続の設定画面がポップアップで表示されます。次のように設定してください。

項目名 説明 設定する値
Connection 接続の種類 Action
Object 接続する対象 View Controller(固定)
Name メソッド名 進むボタンをタップしたとき
Type 引数の型 AnyObject
Event 何をしたときか Touch Up Inside(タップと同じような意味)
Arguments 引数 None

アクションに欠かせない「@IBAction」キーワード

 最後に「Connect」をクリックします。すると、ViewControllerクラスに次のようなメソッドが追加されます。

@IBAction func 進むボタンをタップしたとき() {
}

 アクションを使ってUIコンポーネントと接続するメソッドには「@IBAction」というキーワードを付けます。これで「進むボタン」をタップしたときに「進むボタンをタップしたとき」メソッドが呼び出されるようになります。

 同じ手順で、「戻るボタン」をタップしたときに呼び出されるメソッドも作りましょう。シーンの左下に配置している「戻るボタン」を、キーボードの「Control」キーを押しながら、ViewControllerクラスの「{」と「}」の間にドラッグ&ドロップします。接続の設定は、次のように設定してください。

項目名 説明 設定する値
Type 接続の種類 Action
Object 接続する対象 View Controller(固定)
Name メソッド名 戻るボタンをタップしたとき
Type 引数の型 AnyObject
Event 何をしたときか Touch Up Inside(タップと同じような意味)
Arguments 引数 None

 最後に「Connect」をクリックします。「戻るボタンをタップしたとき」メソッドが追加されました。

@IBAction func 戻るボタンをタップしたとき() {
}

 これで「戻るボタン」を押したときに「戻るボタンをタップしたとき」メソッドが呼び出されるようになりました。

if文で現在のページ番号を制御する

 次に「進むボタンをタップしたとき」メソッドと「戻るボタンをタップしたとき」メソッドの中に、ページを変更する処理を書きましょう。

 初めに、ページを変更する処理の仕組みを考えましょう。まず「現在のページ番号のデータを保持する」ことが必要です。このデータは、Int型のプロパティとしてクラスの中で保持します。

 「進むボタン」がタップされたときには「現在のページ番号の次のページを表示する」処理を行います。このときに、現在のページ番号のデータが必要になります。「次のページ番号が何番であるか」は、現在のページ番号に1加えることで算出できます。また反対に、前のページ番号が何番であるかは、現在のページ番号から1減らすことで算出できます。

現在のページ番号の保持 現在のページ番号の保持

 ページを変更するときには、現在のページ番号に次のページ番号を代入します。こうしておくことで、また「進むボタン」がタップされたときに、さらに次のページに進むことができます。

 ページの仕組みが理解できたところで、実際にプログラムを書いてみましょう。まず、「現在のページ番号」のプロパティを定義しましょう。ViewControllerクラスの中に、次のようなプロパティを書いてみてください。

var 現在のページ番号 = 1

 新しく「現在のページ番号」というプロパティを定義しました。このプロパティの値は変更することがあるので、変数「var」として定義しています。また、初めに1ページ目を表示したいので「1」を代入しています。

 次に「進むボタンをタップしたとき」メソッドの中に「現在のページ番号」プロパティの値を変更するプログラムを書いてみましょう。次のプログラムを書いてみてください。

@IBAction func 進むボタンをタップしたとき() {
    現在のページ番号 += 1
    print("\(現在のページ番号)ページ目")
}

 「+=」は左辺の値に右辺の値を加えた値を代入できる演算子です(連載第3回で登場)。これで「進むボタンをタップしたとき」メソッドが呼ばれるたびに、「現在のページ番号」の値に「1」が加わるようになります。最後の行では「print」関数を使って、「現在のページ番号」の値を出力するようにしています。

「進むボタン」をタップしたときの動き 「進むボタン」をタップしたときの動き

 しかし、このままでは「進むボタン」をタップし続けると「現在のページ番号」の値が増え続けてしまいます。「ページ総数は4ページとしたい」ので、次のようなプログラムを加えましょう。

@IBAction func 進むボタンをタップしたとき() {
    if 現在のページ番号 < 4 {
        現在のページ番号 += 1
    }
    print("\(現在のページ番号)ページ目")
}

 if文を使って「もし『現在のページ番号』が『4』より小さいとき」という条件を作っています(連載第4回で登場)。これで「現在のページ番号」が「4」より小さいときだけ変更されるようになりました。

 「戻るボタン」を押したときのプログラムも、同じような感じで書きます。ページ番号を戻すには「現在のページ番号」プロパティの値を「1」減らすようにします。絵本は1ページ目から始まるため、「現在のページ番号」が「1」より大きいときにページ番号を減らすようにします。

 「戻るボタンをタップしたとき」メソッドの中に、次のプログラムを書いてみてください。

@IBAction func 戻るボタンを押したとき() {
    if 現在のページ番号 > 1 {
        現在のページ番号 -= 1
    }
    print("\(現在のページ番号)ページ目")
}

 ここまでに作ったアプリを実行してみましょう。「進むボタン」または「戻るボタン」をタップすると、Xcodeワークスペースの下部にあるコンソール画面で現在のページ番号が出力されます。

ボタンをタップしたときの処理の結果 ボタンをタップしたときの処理の結果

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。