この記事を書いた人:

鳴き声足し算ゲームiPhoneアプリを作成してみよう(Part1)

公開日:2016/03/27
更新日:
iPhoneアプリ開発

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

今回から数回に渡って「鳴き声足し算ゲームiPhoneアプリ」を作成していきたいと思います。このアプリは、ある数字が表示されたあと、何と何を足したらその数字になるか考えるゲームです。また、数字を選択するときにかわいい音もならしてみたいと思います。この音をイヌやネコにすることでキッズ向けアプリケーションにもなります。

そして、よくアプリを新しく開始する際にみるイントロダクション部分も作成していきたいと思います。

それでははじめていきましょう!

《前回までの講座》


iPhoneアプリ開発の環境を整えよう
iPhoneアプリ開発に必要なこと
プログラムなしで、 レッドカードiPhoneアプリを開発してみよう
プログラムなしで、カラフルカードアプリを開発してみよう
お気に入りのサイト集アプリを開発してみよう
ノートメールアプリを開発してみよう(Part1)
ノートメールアプリを開発してみよう(Part2)
10秒で止める「ジャストタイムiPhoneアプリ」を開発してみよう(Part1)
10秒ジャストで止めるゲーム、ジャストタイムアプリを開発してみよう(Part2)
嘘電話アプリを開発してみよう
パスワードiPhoneアプリ作成してみよう(Part1)
パスワードiPhoneアプリ作成してみよう(Part2)
パスワードiPhoneアプリ作成してみよう(Part3)
パスワードiPhoneアプリ作成してみよう(Part4)
ToDoリストiPhoneアプリを作成してみよう(Part1)
ToDoリストiPhoneアプリを作成してみよう(Part2)
ToDoリストiPhoneアプリを作成してみよう(Part3)
パスワードiPhoneアプリ作成してみよう(Part4)


Cocoa Podsを使用してみよう

今回のアプリでは、アプリがよりリッチになる便利なツールを使いながら進めていきたいと思います。
まず、以下のURLを見ていきましょう。

xcode_game2
cocoacontrols.com

このCocoa Controlsとは、便利なツールを検索したり、自分のプロジェクトに取り込むためにはどうしたらよいのかなどが書かれてあります。それでは、イントロダクション(アプリのはじめに出てくる説明)をこれを用いてつくっていきたいと思います。まず、検索窓にintroと入れます。
xcode_game3

すると、たくさんイントロダクションに関するサンプルが出てきます。
今回は、EAIntroViewを使ってみたいと思います。EAIntroViewと書かれた場所をクリックしてください。すると、詳細ページに飛びます。
xcode_game3

右上のDownload Sourceと書かれたところをクリックします。
xcode_game5
すると、このようなページが出てきます。
xcode_game6

下部へ行くとCocoaPodsと書かれた書かれた箇所があるかと思います。
xcode_game7
使い方を順に説明していきます。

CocoaPodsをインストールする

それでは、プロジェクトを作成していきます。
Xcodeを立ち上げ、Create a New Xcode projectをクリックします。
xcode_game9

以下のように進めていきます。
xcode_game10

名前はnumberGameとします。
xcode_game11

xcode_game12

ターミナルを使ってみる

続いて右上赤い部分の検索マークをクリックして、「ターミナル」検索してエンターを押します。
xcode_game13

すると、このような画面が出てきます。
続いて、sudo gem install cocoapodsと入力してエンターを押します。次に、pod setupと入力してエンターを押します。すると、CocoaPodsを使う準備が完了します。
xcode_game15

Xcodeに戻り、赤い部分を選択した状態で、File→New→Fileを選択していきます。
xcode_game16

普段であれば、左側にあるようにSourceという箇所を使用しますが、
xcode_game17

今回はOtherを選択します。
xcode_game18

Emptyを選択し、Nextをクリックします。
xcode_game19

ファイル名をPodfileとします。(ここの名前が重要です)
xcode_game20

そしてCreateを押します。
xcode_game21

すると、Podfileというファイルが作成されます。今は何も記述されていません。
xcode_game22

ここで、先ほどのサイトへ戻ります。赤い部分に注目してください。
xcode_game24a

ここがこのイントロダクションパーツの使い方になります。
それでは何が書かれているか順に説明していきます。
まず、1行目に先ほど作成したPodfileへ記述しなければならない項目が書かれています。
ここでは、pod ‘EAIntroView’, ‘~> 2.8.0’がそれにあたります。
これを先ほど作成したPodfileへ記述します。
xcode_game23

2行目、pod installと書かれた部分があります。これは先ほどのターミナルで実行するものになります。詳しい記述方法は後ほど説明します。
3行目にはファイルにインポートする際にどう書くべきかが記述されています。
最後はデリゲートを指定する際の書き方が説明されてあります。

それではターミナルに戻りましょう。
ここで、cd とまず記入します。これはチェンジディレクトリの略で、今から次のファイルある所まで移動しますという意味になります。
xcode_game25

このcdのあとに続いて、numberGameというファイルをドラッグ&ドロップします。
xcode_game26

すると以下のようになります。
xcode_game27

ここでエンターを押します。
するとプロジェクトファイルのある位置まで移動することができました。
ここでpod installと記述してエンターを押します。
xcode_game28

次々と処理が進みます。
xcode_game29

最後まで終わったらexitと記述してターミナルを終了します。
xcode_game31

すると、numberGameのプロジェクトを開こうとした際に白いnumberGame.xcworkspaceというものが出来上がっているのがわかります。
xcode_game33
これをダブルクリックしてプロジェクトを開始します。
赤い部分をクリックしてファイル郡を開きます。
xcode_game34

あとはいつも通りMain.stroyboardをクリックして、iPhone4.7-inchを選択してプログラムファイルを開きます。
xcode_game37

xcode_game38

ここで、以前のサイトへまた戻ります。
xcode_game39

下記のマニュアル通り

#import "EAIntroView.h" 

と記述します。
xcode_game40

これで先ほどのイントロダクションを使用する準備が整いました。

デリゲートも記述して、
xcode_game41

ここをコピー&ペーストします。
xcode_game42

// custom
EAIntroPage *page2 = [EAIntroPage page];
page2.title = @"This is page 2";
page2.titleFont = [UIFont fontWithName:@"Georgia-BoldItalic" size:20];
page2.titlePositionY = 220;
page2.desc = sampleDescription2;
page2.descFont = [UIFont fontWithName:@"Georgia-Italic" size:18];
page2.descPositionY = 200;
page2.titleIconView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"title2"]];
page2.titleIconPositionY = 100;

すると、エラーがでました。
xcode_game43
ここは、descと書かれてあります。おそらくディスクリプション(文章)のことだと思うので、

こんな感じで変更します。
xcode_game44

続いてイントロダクションの背景になる画像を取り込みます。
ドラッグ&ドロップして、Finishします。
xcode_game46

xcode_game47

全体的に以下のように変更します。
xcode_game48

    // custom
    EAIntroPage *page1 = [EAIntroPage page];
    page1.title = @"このようにつかいます1";
    page1.titleFont = [UIFont fontWithName:@"Georgia-BoldItalic" size:20];
    page1.desc = @"これは使い方1のページです";
    page1.descFont = [UIFont fontWithName:@"Georgia-Italic" size:18];
    page1.bgImage = [UIImage imageNamed:@"intro1.jpg"];
    
    
    
    // custom
    EAIntroPage *page2 = [EAIntroPage page];
    page2.title = @"このようにつかいます2";
    page2.titleFont = [UIFont fontWithName:@"Georgia-BoldItalic" size:20];
    page2.desc = @"これは使い方2のページです";
    page2.descFont = [UIFont fontWithName:@"Georgia-Italic" size:18];
    page2.bgImage = [UIImage imageNamed:@"intro2.jpg"];
    
    
    
    
    // custom
    EAIntroPage *page3 = [EAIntroPage page];
    page3.title = @"このようにつかいます3";
    page3.titleFont = [UIFont fontWithName:@"Georgia-BoldItalic" size:20];
    page3.desc = @"これは使い方3のページです";
    page3.descFont = [UIFont fontWithName:@"Georgia-Italic" size:18];
    page3.bgImage = [UIImage imageNamed:@"intro3.jpg"];
    
    
    
    
    // custom
    EAIntroPage *page4 = [EAIntroPage page];
    page4.title = @"このようにつかいます4";
    page4.titleFont = [UIFont fontWithName:@"Georgia-BoldItalic" size:20];
    page4.desc = @"これは使い方4のページです";
    page4.descFont = [UIFont fontWithName:@"Georgia-Italic" size:18];
    page4.bgImage = [UIImage imageNamed:@"intro4.jpg"];
    
    
    EAIntroView *intro = [[EAIntroView alloc] initWithFrame:self.view.bounds andPages:@[page1,page2,page3,page4]];
    
    
    [intro setDelegate:self];
    
    
    [intro showInView:self.view animateDuration:0.0];

続いてサイトを参考に、
xcode_game49

記述します。
xcode_game50

ここでエラーが出ています。
page2、page3 、page4がありませんということです。
なので作ります。
xcode_game51
するとエラーが消えました。
xcode_game52

またサイトを参考に、以下を加えます。
xcode_game53

そして、全体的に以下のように変更します。(必要なところだけ記述します。)
xcode_game54

さらに、全てをviewDidLoad内に書くのは見づらいので、showIntroというメソッドを新しくつくってみます。
xcode_game55

このメソッドの中に先ほど書いたコードをそのままコピー&ペーストして、viewDidLoad内のコードは消去します。
xcode_game56

そして、この新しく作成したshowIntroをviewDidLoad内で呼び出してあげます。
xcode_game57

xcode_game59

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

それではシミュレーターで確認してみましょう。
左上の▶ボタンをクリックしてシミュレーターを立ち上げます。
すると、このようにイントロダクションが出るようになりました。
xcode_game60

シミュレーターの画面を横にスライドさせると次のページへと進んでいきます。
xcode_game61

さらに、右下のSkipボタンをクリックすると、
xcode_game62

何もパーツを載せていない画面が現れます。
xcode_game63

最後に

どうでしたか?
このようにCocoapodsを使用できるようになると、簡単にリッチな画面や機能をアプリに取り込むことができます。
現在このイントロダクションはアプリが立ち上がるたびに表示されてしまいます。
これを1回見たら後は表示しないという形にコードを付け加え、次回はゲームの内容を実装していきたいと思います。
次回もお楽しみに。

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

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

この記事を書いた人

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

関連する記事

Recommended by