暮らしtop»Web制作»iPhoneアプリ開発»鳴き声足し算ゲームiPhoneアプリを作成してみよう(Part1)鳴き声足し算ゲームiPhoneアプリを作成してみよう(Part1)公開日:2016/03/27更新日:2016/03/29|iPhoneアプリ開発ツイートみなさんこんにちは。Fujii(@HofuCamera)です。今回から数回に渡って「鳴き声足し算ゲームiPhoneアプリ」を作成していきたいと思います。このアプリは、ある数字が表示されたあと、何と何を足したらその数字になるか考えるゲームです。数字を選択するときにかわいい音もならしてみたいと思います。この音をイヌやネコにすることでキッズ向けアプリケーションにもなります。アプリを新しく開始する際にみるイントロダクション部分も作成していきたいと思います。Podsを使用してみよう今回のアプリでは、アプリがよりリッチになる便利なツールを使いながら進めていきたいと思います。以下のURLを見ていきましょう。Controlsとは、便利なツールを検索したり、自分のプロジェクトに取り込むためにはどうしたらよいのかなどが書かれてあります。それでは、イントロダクション(アプリのはじめに出てくる説明)をこれを用いてつくっていきたいと思います。検索窓にintroと入れます。すると、たくさんイントロダクションに関するサンプルが出てきます。今回は、EAIntroViewを使ってみたいと思います。EAIntroViewと書かれた場所をクリックしてください。すると、詳細ページに飛びます。Sourceと書かれたところをクリックします。すると、このようなページが出てきます。下部へ行くとCocoaPodsと書かれた書かれた箇所があるかと思います。使い方を順に説明していきます。CocoaPodsをインストールするそれでは、プロジェクトを作成していきます。projectをクリックします。以下のように進めていきます。名前はnumberGameとします。ターミナルを使ってみる続いて右上赤い部分の検索マークをクリックして、「ターミナル」検索してエンターを押します。すると、このような画面が出てきます。cocoapodsと入力してエンターを押します。setupと入力してエンターを押します。すると、CocoaPodsを使う準備が完了します。Xcodeに戻り、赤い部分を選択した状態で、File→New→Fileを選択していきます。今回はOtherを選択します。Emptyを選択し、Nextをクリックします。ファイル名をPodfileとします。(ここの名前が重要です)そしてCreateを押します。すると、Podfileというファイルが作成されます。今は何も記述されていません。ここで、先ほどのサイトへ戻ります。赤い部分に注目してください。ここがこのイントロダクションパーツの使い方になります。それでは何が書かれているか順に説明していきます。1行目に先ほど作成したPodfileへ記述しなければならない項目が書かれています。2.8.0’がそれにあたります。これを先ほど作成したPodfileへ記述します。installと書かれた部分があります。これは先ほどのターミナルで実行するものになります。詳しい記述方法は後ほど説明します。3行目にはファイルにインポートする際にどう書くべきかが記述されています。最後はデリゲートを指定する際の書き方が説明されてあります。それではターミナルに戻りましょう。これはチェンジディレクトリの略で、今から次のファイルある所まで移動しますという意味になります。このcdのあとに続いて、numberGameというファイルをドラッグ&ドロップします。すると以下のようになります。ここでエンターを押します。するとプロジェクトファイルのある位置まで移動することができました。installと記述してエンターを押します。最後まで終わったらexitと記述してターミナルを終了します。すると、numberGameのプロジェクトを開こうとした際に白いnumberGame.xcworkspaceというものが出来上がっているのがわかります。これをダブルクリックしてプロジェクトを開始します。赤い部分をクリックしてファイル郡を開きます。あとはいつも通りMain.stroyboardをクリックして、iPhone4.7-inchを選択してプログラムファイルを開きます。ここで、以前のサイトへまた戻ります。これで先ほどのイントロダクションを使用する準備が整いました。デリゲートも記述して、ここをコピー&ペーストします。100;すると、エラーがでました。ここは、descと書かれてあります。ディスクリプション(文章)のことだと思うので、こんな感じで変更します。続いてイントロダクションの背景になる画像を取り込みます。ドラッグ&ドロップして、Finishします。全体的に以下のように変更します。ここでエラーが出ています。page4がありませんということです。するとエラーが消えました。サイトを参考に、以下を加えます。全体的に以下のように変更します。(必要なところだけ記述します。)さらに、全てをviewDidLoad内に書くのは見づらいので、showIntroというメソッドを新しくつくってみます。このメソッドの中に先ほど書いたコードをそのままコピー&ペーストして、viewDidLoad内のコードは消去します。この新しく作成したshowIntroをviewDidLoad内で呼び出してあげます。シミュレーターで確認してみようそれではシミュレーターで確認してみましょう。左上の▶ボタンをクリックしてシミュレーターを立ち上げます。すると、このようにイントロダクションが出るようになりました。シミュレーターの画面を横にスライドさせると次のページへと進んでいきます。何もパーツを載せていない画面が現れます。最後にどうでしたか?このようにCocoapodsを使用できるようになると、簡単にリッチな画面や機能をアプリに取り込むことができます。現在このイントロダクションはアプリが立ち上がるたびに表示されてしまいます。これを1回見たら後は表示しないという形にコードを付け加え、次回はゲームの内容を実装していきたいと思います。Uscreive(クリーブ)は、クリエイターのための情報を発信しているメディアです。クリエイティブなことをするにあたり、少しでも皆様に役立つような情報をアーカイブしています。