暮らしtop»Web制作»iPhoneアプリ開発»【超かんたん!】写真集アプリを開発してみよう【超かんたん!】写真集アプリを開発してみよう2016/03/14|iPhoneアプリ開発ツイートみなさんこんにちは。Fujii(@HofuCamera)です。今回は「写真集iPhoneアプリ」を開発していきたいと思います。レッドカードiPhoneアプリを開発してみよう・【Xcode】プログラムなしで、カラフルカードアプリを開発してみよう・【Xcode】お気に入りのサイト集アプリを開発してみよう・【Xcode】ノートメールアプリを開発してみよう(Part1)・【Xcode】ノートメールアプリを開発してみよう(Part2)「次へボタン」と「戻るボタン」をタップすると、写真が入れ替わるシンプルなアプリです。今回は、配列の使い方や条件分岐などを使って開発していきたいと思います!このアプリを作成できるようになると、配列について、配列へものを入れること、配列の中身を外に出す方法を学べます。実際に自分でオリジナルアプリに変更していろいろな応用アプリを作れるようになるかと思いますので、それでは作っていきましょう。最後にプロジェクトを作成するプロジェクトの作成方法はこちらに記載されています。今回は「book」としてプロジェクト名を決めてあげます。Orientation」と書かれた箇所があるかと思います。これはiPhoneやiPadアプリを作る際に、画面を「縦だけに対応されたアプリなのか、横だけか、それとも両方か」などを設定する箇所になります。今回は縦のみに対応したいと思うので、下の2つのチェックを外します。「Portrait」のみにチェックが入っている状態を確認してください。画面を整える画面デザインするそれでは、画面を整えていきたいと思います。赤い部分をクリックして、画面のサイズを変更したいとおもいます。「Size」と書かれたところで「iPhone4.7-inch」と設定してください。右側にSizeと書かれた場所がない場合は以下の赤い箇所をクリックすると出現します。それでは、画面がiPhone6用に変わったところで、Buttonを画面へ配置していきたいと思います。以下のようにButtonをドラッグ&ドロップして配置してください。このボタンは「次へ」と名前を変更します。(変更はボタンの上でダブルクリックをすると変更できます。)次に、戻るボタンも同時に作っていきたいと思います。さきほどと同じ要領で戻るボタンを設置してみてください。今回は写真集アプリ、つまり画像を表示することになります。その画像を表示するためのImageViewを画面へ設置します。下記のようにドラッグ&ドロップしてImageViewのサイズを整えてください。それでは、画面の上にのったパーツをプログラムとつないでいきたいと思います。画面を選択した状態で、右上の赤いマークをクリックしてください。すると、画面に対応したプログラム(この場合はViewController.m)が表示されたかと思います。パーツをこのプログラムとつないでいきます。さきほど画面へのせたImageViewを選択した状態でcontrolを押しながらプログラムの方へドラッグ&ドロップをしてください。ViewControllerと書かれた下に{}をつくって、その中にドラッグ&ドロップします。)そしてこの名前をbookImageViewとします。connectを押して完成です。「次へ」ボタンと「戻る」ボタンもプログラムへつなげていきます。同じようにドラッグ&ドロップしてみてください。それぞれ「next」と「back」という名前をつけました。続いて今回表示する画像をプロジェクトへ挿入していきたいと思います。画像を準備して、それぞれ「0.jpg」~「9.jpg」と命名して下記のようにドラッグ&ドロップで挿入します。チェックが以下のように入っているか確認してFinishをクリックします。このようにプロジェクトへ挿入されたら準備完了です。配列とは基本的な考え方それでは、次に配列という概念を見ていきたいと思います。配列とはいわゆるタンスです。タンスには引き出しがありその引き出しに物をいれて(今回の場合画像)、取り出したりするときに使用します。iPhoneではその箱のことをNSArrayといいます。このNSArrayに名前(変数名)をつけて、プログラムで使用していくことになります。配列へものを入れてみるそれでは、実際に画像をこの配列にいれてみたいと思います。配列の名前を「imageArray」とします。以下のようにviewDidLoadの括弧内へ記述してみてください。arrayWithObjects:の後に入れたいものをカンマで区切っていれていきます。今回は画像なので、画像の名前を書いていれていきます。名前を書く際は@””内に書きます。これで終わりですよということを宣言するために最後にnilをつけます。これが定型文としてのルールとなります。このままでは画面が表示された時に画像が表示されていないことになります。viewDidLoad内にその旨を記述しなければなりません。以下を記述してみてください。imageNamed:@”0.jpg”];これは、日本語に訳すと「画面の上にあるbookImageViewの画像を0.jpgという名前の画像にしてください。」という命令になります。imageNamed:@“0.jpg”];です。画像を指定するときに使用します。ここで、さきほどのimageArrayを下のnextという場所(括弧内)とbackという場所(括弧内)でも使用していきたいと思います。*imageArrayだけコピーして、上のbookImageViewのある箇所にもっていきます。imageArrayは残しておきます。「配列の何番目を出したいのですか」というところを指定していかなければなりません。そのため数字を入れる箱が必要になってきます。i;と同じ場所へ宣言しておきます。これはあとで使用します。配列からものを出してみるそれでは実際に、配列から画像を出して、bookImageViewへ反映していきたいと思います。この処理をしたいのは、「次へボタン」を押したときか「戻るボタン」を押したときになります。nextと準備した箇所の括弧内と、backと準備した箇所の括弧内へ記述することになります。iの中身)を0にします。続いて、nextボタンを押したときにiの値が増えるという記述をします。1;という記述は右から左へ作用し、「左から右へ、iに1を足したのを左のiへ挿入してください」という意味になります。「箱の中のiという番号の順番にある画像を取り出す」ということをして、「その画像をbookImageViewへ反映する」ということをしなければなりません。objectAtIndex:i]];となります。ここも右から左へプログラムが流れます。imageNamed:とかかれた箇所に画像の名前を記述したと思います。objectAtIndex:i]と記述しています。これは、imageArrayというタンスのiという順番にある画像の名前という意味になります。objectAtIndex:というのはタンスの中にある番号を指定するときにつかいます。その前に、画面が表示された時の画像をしてしなければ画像が表示されないということになるので、下記のように記述します。これは、画面が表示されたときに0.jpgという画像を反映してくださいということを意味します。これをnext、back両方に記述します。このままでは、iはnextボタンを押したときにずっと増え続け、逆は減り続けます。するとタンスには100番目というところはないよということになります。「もしiが9を含まないで以上になったら」、「iを0に戻す」ということと、「もしiが0未満になったら」、「iを0に戻す」ということを行います。下記のように記述してください。シミュレーターで確認してみよう左上にある▶ボタンをクリックしてください。以下のようにシミュレーターが立ち上がったら成功です。ボタンを押すと画像が変わっていくことがわかります。実際にご自身のiPhone(実機)で試す場合は、Appleの有償プログラムへ登録する必要があります。この方法に関しても後日の記事で詳細に説明します。?ボタンを押せば押すほど画像が変化していくことがわかるかと思います。最後にいかがでしたか?今回は配列の仕組みを見ていきました。この配列が自由に使えるようになると、さまざまなことがプログラムを書くことで効率的に処理することができるようになります。次回は今回のアプリを踏まえて【超かんたん!】1秒ジャストで止めるゲーム、ジャストタイムアプリを開発してみよう1を実践してみたいと思います。Uscreive(クリーブ)は、クリエイターのための情報を発信しているメディアです。クリエイティブなことをするにあたり、少しでも皆様に役立つような情報をアーカイブしています。