【超かんたん!】写真集アプリを開発してみよう

iPhoneアプリ開発

Startup Stock Photo

みなさんこんにちは。Yuta Fujii(@HofuCamera)です。

今回は「写真集iPhoneアプリ」を開発していきたいと思います。

Xcodeの環境構築がまだの方はこちら

前回までの続きはこちら

【Xcode】iPhoneアプリ開発に必要なこと
【超かんたん!】初心者がxcodeでドッキリiPhoneアプリを開発するまで
【Xcode】プログラムなしで、 レッドカードiPhoneアプリを開発してみよう
【Xcode】プログラムなしで、カラフルカードアプリを開発してみよう
【Xcode】お気に入りのサイト集アプリを開発してみよう
【Xcode】ノートメールアプリを開発してみよう(Part1)
【Xcode】ノートメールアプリを開発してみよう(Part2)

「次へボタン」と「戻るボタン」をタップすると、写真が入れ替わるシンプルなアプリです。

今回は、配列の使い方条件分岐などを使って開発していきたいと思います!

このアプリを作成できるようになると、配列について、配列へものを入れること、配列の中身を外に出す方法を学べます。

また、実際に自分でオリジナルアプリに変更していろいろな応用アプリを作れるようになるかと思いますので、それでは作っていきましょう。

プロジェクトを作成する

プロジェクトの作成方法はこちらに記載されています。

今回は「book」としてプロジェクト名を決めてあげます。

まずはじめに画面中央赤い部分、「Device Orientation」と書かれた箇所があるかと思います。
これはiPhoneやiPadアプリを作る際に、画面を「縦だけに対応されたアプリなのか、横だけか、それとも両方か」などを設定する箇所になります。

今回は縦のみに対応したいと思うので、下の2つのチェックを外します。

「Portrait」のみにチェックが入っている状態を確認してください。
Xcode_book3
Xcode_book4

画面を整える

画面デザインする

それでは、画面を整えていきたいと思います。まず、赤い部分をクリックして、画面のサイズを変更したいとおもいます。

「Size」と書かれたところで「iPhone4.7-inch」と設定してください。
Xcode_book5
Xcode_book6
もし右側にSizeと書かれた場所がない場合は以下の赤い箇所をクリックすると出現します。
Xcode_book7
それでは、画面がiPhone6用に変わったところで、Buttonを画面へ配置していきたいと思います。
以下のようにButtonをドラッグ&ドロップして配置してください。
Xcode_book10

また、このボタンは「次へ」と名前を変更します。(変更はボタンの上でダブルクリックをすると変更できます。)

次に、戻るボタンも同時に作っていきたいと思います。さきほどと同じ要領で戻るボタンを設置してみてください。

Xcode_book11

今回は写真集アプリ、つまり画像を表示することになります。その画像を表示するためのImageViewを画面へ設置します。

下記のようにドラッグ&ドロップしてImageViewのサイズを整えてください。
Xcode_book12

それでは、画面の上にのったパーツをプログラムとつないでいきたいと思います。

画面を選択した状態で、右上の赤いマークをクリックしてください。
Xcode_book13

すると、画面に対応したプログラム(この場合はViewController.m)が表示されたかと思います。
パーツをこのプログラムとつないでいきます。

まず、さきほど画面へのせたImageViewを選択した状態でcontrolを押しながらプログラムの方へドラッグ&ドロップをしてください。(@implementation ViewControllerと書かれた下に{}をつくって、その中にドラッグ&ドロップします。)

そしてこの名前をbookImageViewとします。connectを押して完成です。

Xcode_book14
Xcode_book15

さらに「次へ」ボタンと「戻る」ボタンもプログラムへつなげていきます。

同じようにドラッグ&ドロップしてみてください。

Xcode_book17
Xcode_book18
Xcode_book19

それぞれ「next」と「back」という名前をつけました。

続いて今回表示する画像をプロジェクトへ挿入していきたいと思います。画像を準備して、それぞれ「0.jpg」~「9.jpg」と命名して下記のようにドラッグ&ドロップで挿入します。

Xcode_book20
Xcode_book21
チェックが以下のように入っているか確認してFinishをクリックします。
Xcode_book22
このようにプロジェクトへ挿入されたら準備完了です。
Xcode_book23

配列とは

基本的な考え方

それでは、次に配列という概念を見ていきたいと思います。

配列とはいわゆるタンスです。タンスには引き出しがありその引き出しに物をいれて(今回の場合画像)、取り出したりするときに使用します。

iPhoneではその箱のことをNSArrayといいます。
このNSArrayに名前(変数名)をつけて、プログラムで使用していくことになります。

配列へものを入れてみる

それでは、実際に画像をこの配列にいれてみたいと思います。

配列の名前を「imageArray」とします。以下のようにviewDidLoadの括弧内へ記述してみてください。

NSArray *imageArray = 
[NSArray arrayWithObjects:@"0.jpg",@"1.jpg",@"2.jpg",@"3.jpg",
@"4.jpg",@"5.jpg",@"6.jpg",@"7.jpg",@"8.jpg",@"9.jpg", nil];

Xcode_book24

基本的な使い方として、

[NSArray arrayWithObjects:

の後に入れたいものをカンマで区切っていれていきます。今回は画像なので、画像の名前を書いていれていきます。

名前を書く際は@””内に書きます。そしてこれで終わりですよということを宣言するために最後にnilをつけます。

これが定型文としてのルールとなります。

しかし、このままでは画面が表示された時に画像が表示されていないことになります。

なのでviewDidLoad内にその旨を記述しなければなりません。

以下を記述してみてください。
bookImageView.image = [UIImage imageNamed:@”0.jpg”];
Xcode_book25

これは、日本語に訳すと「画面の上にあるbookImageViewの画像を0.jpgという名前の画像にしてください。」という命令になります。

重要なのは、右の[UIImage imageNamed:@“0.jpg”];です。

画像を指定するときに使用します。
ここで、さきほどのimageArrayを下のnextという場所(括弧内)とbackという場所(括弧内)
でも使用していきたいと思います。

下記のように、
NSArray *imageArrayだけコピーして、上のbookImageViewのある箇所にもっていきます。
Xcode_book26
ただし、imageArrayは残しておきます。

さらに「配列の何番目を出したいのですか」というところを指定していかなければなりません。
そのため数字を入れる箱が必要になってきます。

int i;

と同じ場所へ宣言しておきます。これはあとで使用します。

Xcode_book27

配列からものを出してみる

それでは実際に、配列から画像を出して、bookImageViewへ反映していきたいと思います。
この処理をしたいのは、「次へボタン」を押したときか「戻るボタン」を押したときになります。なので、nextと準備した箇所の括弧内と、backと準備した箇所の括弧内へ記述することになります。
まず、画面がはじめに表示された時の箱の中身(int iの中身)を0にします。
Xcode_book28

続いて、nextボタンを押したときにiの値が増えるという記述をします。

i = i + 1;

という記述は右から左へ作用し、「左から右へ、iに1を足したのを左のiへ挿入してください」
という意味になります。

Xcode_book29
反対にbackのときは減らしていきたいので、

i = i - 1;

と記述します。

Xcode_book31

そして、「箱の中のiという番号の順番にある画像を取り出す」ということをして、「その画像をbookImageViewへ反映する」ということをしなければなりません。

この日本語をプログラムに変換すると

bookImageView.image = [UIImage imageNamed:[imageArray objectAtIndex:i]];

となります。
ここも右から左へプログラムが流れます。
さきほど

[UIImage imageNamed:

とかかれた箇所に画像の名前を記述したと思います。ここでは、

[imageArray objectAtIndex:i]

と記述しています。

これは、imageArrayというタンスのiという順番にある画像の名前という意味になります。

objectAtIndex:

というのはタンスの中にある番号を指定するときにつかいます。
その前に、画面が表示された時の画像をしてしなければ画像が表示されないということになるので、下記のように記述します。
Xcode_book33

これは、画面が表示されたときに0.jpgという画像を反映してくださいということを意味します。

これをnext、back両方に記述します。

ただこのままでは、iはnextボタンを押したときにずっと増え続け、逆は減り続けます。

するとタンスには100番目というところはないよということになります。

なので、「もしiが9を含まないで以上になったら」、「iを0に戻す」ということと、「もしiが0未満になったら」、「iを0に戻す」ということを行います。下記のように記述してください。
Xcode_book37
Xcode_book38
これで全て完了です。

シミュレーターで確認してみよう

左上にある▶ボタンをクリックしてください。

以下のようにシミュレーターが立ち上がったら成功です。

Xcode_book39

ボタンを押すと画像が変わっていくことがわかります。

Xcode_book40

実際にご自身のiPhone(実機)で試す場合は、Appleの有償プログラムへ登録する必要があります。
この方法に関しても後日の記事で詳細に説明します。

どうですか?ボタンを押せば押すほど画像が変化していくことがわかるかと思います。

また、シミュレーターを止める場合は、左上の■ボタンをクリックするか、command + Q
で止まります。

最後に

いかがでしたか?

今回は配列の仕組みを見ていきました。この配列が自由に使えるようになると、さまざまなことがプログラムを書くことで効率的に処理することができるようになります。

次回は今回のアプリを踏まえて【超かんたん!】1秒ジャストで止めるゲーム、ジャストタイムアプリを開発してみよう1を実践してみたいと思います。

この記事が気に入ったら
いいね!しよう

creiveの最新情報をお届けします

この記事を書いた人

yuta
知識ゼロからプロのInstagram風画像加工iPhoneアプリを作る 特別クーポン配布中! 詳しくはこちらから! エンジニアでプロデューサー ピーターティールが大好きです! Twitter:Yuta Fujii 質問はお気軽にどうぞ!