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

本連載では、これからプログラミングやiPhoneアプリ開発を始めてみたい方を対象に、開発に必要な知識を基礎から解説していきます。最終回は、これまでの連載で紹介したSwiftの文法を使ってプログラミングをし、「動く絵本」のiPhoneアプリを完成させます。

[諏訪悠紀，アンダースコア]

「動く絵本」のiPhoneアプリを完成させよう

今回の主な内容

• 「動く絵本」のプログラムはどう作る？
  • 複数の画像データを使ってコマ送りさせる
  • 複数のページを進めたり、戻したりして、切り替える
• 複数の画像ファイルを「画像セット」で管理できる「アセットカタログ」の使い方
• Storyboardでボタンに画像を設定する
• 絵を動かすプログラムをSwiftで書いてみよう
  • UIコンポーネントをプログラムから制御する
  • UIコンポーネントをViewControllerクラスのプロパティにする「アウトレット」
  • エディタ領域に表示する2つ目の編集画面「アシスタントエディタ」
  • 「UIコンポーネントを、どのように接続するか」を設定
  • 値が空っぽかもしれないことを示すSwiftの「オプショナル」
  • UIコンポーネントを「イメージ」というプロパティで扱えるようになった
  • オプショナルの使い方
  • 絵を動かすプログラムの実行結果を動画でチェック
• ボタンを押したときの動きをSwiftで書いてみよう
  • UIコンポーネントに何かが起こったときにメソッドを呼び出す「アクション」
  • アクションに欠かせない「@IBAction」キーワード
  • if文で現在のページ番号を制御する
  • switch文でページを切り替える
  • メソッドからメソッドを呼び出す
  • 完成したアプリの実行結果を動画でチェック
• サンプルアプリのファイルをダウンロード
• 一番大切なことは「自分が一体、何を作りたいのか」

　これからプログラミングやiPhoneアプリ作成を始めてみたい方を対象に、必要な知識を基礎から解説していく本連載「初心者のためのSwiftで始めるプログラミング入門」。前々回の「初心者でも絶対に始められるiPhoneアプリの作り方＆Xcode・シミュレーターの使い方」からは「動く絵本アプリ」を作ることを目標に、Xcodeを使ったiPhoneアプリ作成について解説しています。

　前回の「初めてiPhoneアプリをデザインするには、どうすればいい？――すぐ分かるInterface Builder、Storyboard、Auto Layoutの使い方」の中では、作り始めたiPhoneアプリを「動く絵本アプリ」として作り上げるには、次のような作業が必要であると説明しました。

• 画面に部品を配置し、レイアウトする
• 画面に応じたプログラムを記述する

　このうち、前回は「画面に部品を配置し、レイアウトする」を行いました。動く絵本に必要な「戻るボタン」「進むボタン」「絵を表示する部品」が用意できたので、後はこれらに応じたプログラムを書けば「動く絵本アプリ」として動かすことができます。

画面に応じたプログラムの記述

　なお「動く絵本アプリ」を完成させるには、そもそも絵本として表示する「絵」が必要ですよね。この「絵」を表す画像データも、プログラミングに関わってきます。ということで、今回は「動く絵本アプリとしての動きのプログラミング」に加えて、画像の追加も行います。

「動く絵本」のプログラムはどう作る？

　さて、これからiPhoneアプリの動きを作っていくわけですが、作り始める前に「どのように作っていけばいいか」を考えてみましょう。

　まず「動く絵本アプリ」に必要な動きは、次の3つです。

• 絵を動かす
• 「進むボタン」を押したときに、ページを進める
• 「戻るボタン」を押したときに、ページを戻す

複数の画像データを使ってコマ送りさせる

　「動く絵本アプリ」で最も重要な動きが「動く絵」の部分です。「動く絵」をプログラムで書く方法は幾つかありますが、本連載では複数の画像データを使ってコマ送りさせる方法を使います。

　コマ送りとは、複数枚の絵を順番に表示させることで、動いているように見せる手法です。パラパラ漫画のような感じで、絵を変えていきます。

コマ送り

　プログラムでは、複数の画像データを取り込み、順番に表示させるような処理を書いていきます。

複数のページを進めたり、戻したりして、切り替える

　1つのコマ送りのプログラムを書くことで、絵本の中の1ページを作ることができますが、これだけでは絵本とは呼べません。絵本には、複数のページが必要です。

　ページ数に応じてコマ送りさせる絵を切り替えていくことによって、1ページごとに異なる絵が動くような「動く絵本」を作ることができます。このようなプログラムも書いていきます。

コマ送りとページ

　また、ページを進めたり、戻したりといったようなページを変更する処理も必要になります。「『戻るボタン』をタップしたとき」または「『進むボタン』をタップしたとき」といったタイミングで、ページを変更する処理が行われるようにプログラムを書いていきます。

ページを変更する処理