連載
» 2016年05月11日 05時00分 UPDATE

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

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

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

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

今回の主な内容


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

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

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

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

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

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

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

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

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

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


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

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

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

コマ送り コマ送り

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

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

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

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

コマ送りとページ コマ送りとページ

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

ページを変更する処理 ページを変更する処理
       1|2|3|4|5|6 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

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

メールマガジン登録

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