クリエイティブ業界の注目情報や求人情報などを発信する、クリエイターのための総合情報サイトです。
main02

アプリ開発初心者がiPhoneアプリ自作に挑戦「ジャンケンアプリ編」

こんにちは!株式会社クリーク・アンド・リバー社の青木(@woodblu)です。2016年7月某日。チーム会議で、このような発言をしました。

「せっかくの夏休みシーズンなので、子どもの頃のように自由研究をしたい!」

そんな発言から始まった夏の自由研究連載企画。自由研究をしていた頃から、うん十年が経とうしていますが・・・今回、自由研究として選んだテーマはiPhoneアプリ開発です。日本にiPhoneが上陸してから8年程経った今、ネットや書籍で「初心者でもできるiPhoneアプリ開発」という文言を見かけることが多くなりました。非エンジニアである私も手を動かしてみたら案外できるのでは?という、ふとした思いであり、将来のサイドワークのために経験しておこうと…おっと誰か来たようです。

・・・

もちろん、現在担っている他の業務に支障が出てはなりません。他の業務を止めて、1日中iPhoneアプリ開発することは不可能です。そこで、このiPhoneアプリ開発に使える日数を30日間とし、その中でも1日に使える時間は1時間だけというスケジュールで進めていくことにしました。ど素人な私はこんな思いつきのスケジュールで進行しようと決めたのです。コミットしてしまったのです。頭の中ではライザップのCMが既に流れています。

引くにひけなくなった私は、知人であるエンジニアに「勢いでiPhoneアプリを作るなんて言ってしまった!引くに引けない状況!助けて欲しい!!」とLINEで呼びかけました。優しい友人は、スプレッドシートのURLとともに、こう返信してくれました。

「スプレッドシートを参考に提案依頼書(RFP)をご用意ください。内容を基に概算見積りを送付いたします(ゝω・)vキャピ」

これぞ、本来あるべき友人の姿です。

というわけで、友人価格(無料や割引でやってもらうの意)という誘惑から目を覚ました私は、自由研究らしく独学をしていこうと改めて心に誓ったのです。そもそも、商用アプリ開発者の友人がいる人は少数派です。自由研究と言いつつ、友人の力を借りる(丸投げ)をしてはいけません。本やインターネットで情報を収集し手を動かしていきます。前置きが長くなりましたが、ここからが本題です。

自由研究での登場人物紹介

青木青木
Web/IT業界に属してそろそろ10年選手。企画・マーケティング領域を主に担っている非エンジニア。こう見えてWeb制作関連の学校を卒業しているため、プログラミングへの抵抗は少ない。自分の顔写真出しに抵抗があるためイラストで進行。

大河内さん大河内さん
合いの手担当。某医療ドラマの教授とは無関係です。

★自由研究のルール★

・iPhoneアプリを作る
・1日1時間を開発時間とし合計30営業日間で完成まで進める

iPhoneアプリ開発前の事前準備

開発プログラミング言語

今回、事前準備として教材となる書籍探しから始めました。メインで使用する教材はプログラミングの世界へようこそSwiftではじめるiPhoneアプリ開発の教科書 Swift2&Xcode7対応の2冊です。プログラミング関連の教育をされている恩師経由のコネを利用した参考情報を基にこの2冊を選択しました。

iPhoneアプリ含め、コンピューター上で動くアプリケーションは、プログラミング言語を基に作られています。iPhoneアプリ開発で使用するプログラミング言語はSwift(スウィフト)やObjective-C(オブジェクトシー)です。2016年時点ではSwiftを使った開発が一般的になっているようです。その他の主要プログラミング言語は以下の通りです。

  • C言語
  • C++
  • C#
  • Java
  • Perl
  • Ruby
  • PHP
  • Python
  • JavaScript
  • VisualBasic

各プログラミング言語の特徴はプログラミングの世界へようこそに書かれているので、そちらを参考にしていただければと思います。

大河内さん
「JavaScriptとJavaは全くの別物だからJavaScriptのことを略してJavaと呼ぶと混乱を招くわよ」

青木泣き顔
「若い頃、略して呼んだ結果、何度白い目で見られたことか・・・」

泣き顔大河内さん
「きっと、何でも略して呼びたい年頃だったのよ」

■開発環境準備

一般的に、iPhoneアプリはXcodeという、アプリケーションを利用して開発をします。XcodeはMacOSの環境でなければインストールできません。つまりiPhoneアプリ開発をしたければ、開発環境はMac一択となります。iPhoneはアップル社の製品ですので、当然とも言えます。では、Androidはどうなんだという話は、ここでは割愛させていただきます。では、インストールしていきましょう。

Xcodeダウンロード
AppStoreを起動し、右上の検索窓で「xcode」を入力し検索します。検索結果で表示されたXcodeのアイコンの下にある「入手」をクリックします。

OSバージョン不足
私のようにOSのバージョン不足の場合はこのようなアラートが表示されます。アラートが表示された方は、MacOSのバージョンアップから作業し直しとなります。
Launchpad
インストールが完了したら、Launchpadやアプリケーションに、このXcodeアイコンが表示されクリックするとXcodeが起動します。なお、Spotlight検索にXcodeと入力してもXcodeが起動できますので、やりやすい方法で起動しましょう。
Xcode起動画面
はじめてXcodeを起動するとこの画面が表示されます。これでXcodeの事前準備は完了です。

青木泣き顔
「開発環境準備だけで1時間以上が経ち、早くも企画が揺らいでいるのですが・・・」

大河内さん
「某3分クッキングだって、仕込みの時間を入れたら決して3分で収まらないでしょ。」

Xcodeはアプリケーションのデータサイズが非常に大きいため、ダウンロードとインストールには、時間、バッテリー、ディスク容量に余裕をもって行いましょう。

Xcodeに慣れる

Xcodeを使って”hello,world”を表示させる

青木
「どうしてプログラミングの勉強で多くの人が最初に”hello,world”を表示させようとするのかな。」

大河内さん
「C言語の教科書で使われたのが起源らしく、深い意味はないけどプログラミング勉強時の慣例らしいわよ。」
青木
「慣例ってことは、新人から質問を受けたら、とりあえずGoogleのURLを送り返すのと同じようなものだね。」
大河内さん
「あなたの後輩にはなりたくないわ・・・」

 

まずはXcodeに慣れるための演習です。Xcodeを起動しCreate a new Xcode projectをクリックします。
Xcode新規プロジェクト

 

テンプレートを選択する画面が表示されますので、今回はSingle View Applicationを選択します。
Single View Application

 

新規プロジェクトの基本情報を入力する画面が出てきます。今回はこのように入力しました。
Xcode新規プロジェクト基本設定

 

プロジェクトの保存先を決めます。まずは動けば良いので、深く考えずこのようなフォルダをデスクトップに設置しました。
Xcodeプロジェクト保存先

 

プロジェクトが作成されました。Xcode左側のファイル一覧からMain.storyboardをクリック。View Controller Sceneというのが、画面中央に表示されるので、View Controller>Viewと選択していくと青い画面が表示されます。
Main.storyboardの画面

 

デフォルトでは右下のスクロールができるところ(ライブラリペインと呼ばれています)にある、丸いアイコンを選択し、スクロールをすると「Label」があるのでそれを画面中央の青枠左上に設置します。設置した「Label」をダブルクリックするとテキストを修正できるようになりますので、Hello,worldと入力します。配置できたら左上のRunボタンをクリックします。
Xcode Runボタン

 

アラートが出でくる場合もありますが、「Enable」をクリックしPCのパスワードを入力します。そうするとSimulatorが起動しアプリ画面が表示されます。表示された結果…やってしまいました。
Simulator

 

気をとり直して、ラベル位置を調整します。画面をダブルクリックしてもうまくつかめず、View Controller Sceneの下にリストされているLabelを画面にドラッグしたところ位置調整できました。もっとスマートな位置調整方法がきっとあると思いますが、操作方法は自宅で復習ということで今回はスルーしましょう(仕事が溜まるパターン)。改めてRunボタンをクリックし、Simulator上で無事に”hello,World”と表示されました。
Simulator
Simulatorを止める場合はRunボタンの隣にあるStopボタンをクリックすればOKです。

 

ボタンアクションを試す

次はボタンをタップしたらテキストが切り替わるアクションを試してみましょう。まずは前回と同じように新規プロジェクトを作ります。ボタンテストとわかるようなプロジェクト名を付け、テンプレートや基本情報も同じようにして作成しましょう。

 

ラベルを配置し、その下にライブラリペイン内にあるButtonを配置します。ボタンとわかるように「ここをタップ」と記載しておきます。
Main.storyboard

ここで、いよいよプログラミングの登場です。パーツとプログラミングを繋げるためXcodeのアシスタントエディター機能を使用します。右上にShow the Assistant Editorボタンがあり、クリックするとプログラムソースが表示されます。

 

この画面でパーツとプログラムを接続します。配置したラベルを右クリックしプログラムソースの画面までドラッグします。そうすると線が延び接続パネルが表示されます。
Assistant Editor

 

「このラベルはLabel01です」というように定義しました。
IBOutlet接続

 

ソースに、このように追加されました。
IBOutlet接続

 

この、プログラムを使ってコントロールする部品に定義することをIBOutlet接続と呼びます。続いてパーツを操作したときに、アクションをするパーツに対してIBAction接続をします。今回はボタンがアクションをするパーツに該当しますので、ラベルと同じようにプログラムと接続します。Connectionを「Action」、Nameに「kokotap」Atgumentsを「none」に切り替えてconnectします。これで接続は完了です。

 

接続が終わったらプログラムを直接記述していきます。左側に表示されているViewController.swiftを選択すると、新規でプロジェクトを作る際に選んだテンプレートと、先ほど接続した内容がソースに記載されています。ボタンをタップしたら1日目と同じようにhello,worldと表示するようにしました。
ViewController.swift

 

 

青木
「いよいよプログラミングらしくなってきた!早速タップしてみよう!」

Simulator

 

 

Simulator(hell...)

 

 

青木
「hell…(地獄)」

 

私はプログラミングを黙々としていたつもりでしたが、いつの間にかダークサイドに落ちて黒魔術を書いていたのでしょうか。演習はここらで終わりにして自由研究で作るアプリを考えていきましょう。(ちなみに、ラベルをhello,wrorldが全部表示ぐらいの幅で配置すれば全文表示されました。)

 

自由研究で作るアプリを考える

大河内さん

「ここまでXcode触ってきたけど、自由研究で作るアプリは決まったの?」
青木

「世界的なヒットになっている例のゲームのような、現実世界を舞台にARを使った壮大なアプリを作ってみようかなって。」
大河内さん

「そ、そっか!頑張ってね!!(…素人のくせに何言っているんだろ。ほんとhellに落ちればいいのに。)」

 

1か月でできそう、かつ、参考になりそうな情報が多くあるアプリにしようと考えた結果、ジャンケンアプリを作ることにしました。日本人なら誰もが知っているゲームで、勝敗判定や画像の切り替わりなど、プログラミングの勉強になりそうというのが理由です。

 

ジャンケンで必要な画面とプログラミングとは

ジャンケンのルールは非常にシンプルですが、いざ、アプリに落とし込むとなると奥が深いです。以下、私が想像できるジャンケンのインターフェイスや演出例を出しますと・・・

例1:「グー」「チョキ」「パー」のテキストボタンだけ用意し、タップしたら勝ち負けあいこの結果が表示される。

例2:開始ボタンと共に「グー」「チョキ」「パー」の画像が高速で入れ替わる。プレイヤーは「グー」「チョキ」「パー」のボタンを押下することで勝敗が決まる。プレイヤーが負けると「ズコー」とプレイヤーに向かって言い放ちプレイヤーを煽る。

例3:ディスプレイの向こう側で「来週も見てくださいね」の掛け声と共にジャンケンをスタンバイ。ジャンケンポンの掛け声の後「グー」「チョキ」「パー」が表示される。ユーザーは画面に向かって勝負をするが勝敗判定はプレイヤーに委ねられる。

例4:プレイヤーには「グー」「チョキ」「パー」が描かれたカードを各4枚、合計12枚が配られる。カードを使ってジャンケンをし、使ったカードは次回勝負以降使用することができない。なお、対戦相手に負け続けると船で遠くへ連れてかれる。

例5:男女のプレイヤーがジャンケンをし、負けた方が身につけている服を(以下自粛)。

このように「ジャンケン」だけでも様々な例が考えられます。そこで、当たり前のルールですが念のため細かく洗い出しをしました。

  • 1対1のジャンケン
  • 1回勝負
  • 片手を使う
  • グーはチョキに勝つ
  • チョキはパーに勝つ
  • パーはグーに勝つ
  • グーとグーは引き分け(あいこ)
  • チョキとチョキは引き分け(あいこ)
  • パーとパーは引き分け(あいこ)

画像素材を読み込む

といったわけで、Xcode上でシャキシャキ組んでいきましょう。まずは新規プロジェクトを作成します。前に作ったようにCreate a new Xcode projectから、iOSのテンプレートSingle View Applicationを選択します。続いて基本情報設定>使用言語でSwiftを選択します。

ジャンケンで使用する画像をXcodeに取り込みます。今回は大河内さんの画像と「グー」「チョキ」「パー」の画像をそれぞれ使用します。このように画像をプロジェクトナビゲーターと呼ばれている場所にドラッグして読み込みます。

今回使用する画像を取り込んだら、storyboardに画像を配置していきます。ライブラリペインにあるImage Viewをドラッグして配置していきます。そして、Image Viewに表示させる画像を選択していきます。ImageViewを選択し、アトリビュート・インスペクタのImageから表示する画像ファイルを選択します。「グー」「チョキ」「パー」はボタンにする必要があるのでUI Buttonにて配置。TypeをImageにして、それぞれ画像に切り替えます。このように配置しました。

janken_01
janken_02

AutoLayoutで表示位置を調整していく

レイアウトを調整していきます。AutoLayoutという機能を使用して設定をしていきます。

まずは、大河内さんの画像を中央寄せします。大河内さんのImageViewを選択。Alignボタンから、Horizontally in Containerにチェックを入れます。Add 1 Constraintと表示されますのでクリックします。ご覧ください。いかにも中央寄せなラインが表示されました。

janken_03

あとは、画面上部との位置を設定します。Pinボタンをクリックし、画面上部からの表示位置を設定します。今回は大河内さんを上部から75の位置に表示するように設定しました。設定完了後にRunボタンをクリックしてプレビューをします。ちゃんと中央、画面上部から75の位置に表示されるのが確認できました。

janken_04

大河内さん
「なんで、私の画像ぼやけているのよ。」

青木
「つ、次の工程にいきましょう。」

今度は「グー」「チョキ」「パー」のアイコン位置を設定します。Stack Viewという機能を使用して、レイアウトを整えます。まず「グー」「チョキ」「パー」のボタン画像をShiftキー押しながら選択し、Stackボタンをクリックすると、ひとつにまとまります。3つの「グー」「チョキ」「パー」のどれかをShiftキーとcontrolキーを押したままクリックするとメニューが出てくるので、Stack Viewを選びます。
janken_05

janken_06

青木
「すごく・・・大きいです・・・」

大きいのは無視して位置調整と一緒にサイズも調整していきましょう。大河内さんの画像位置を調整したように、これらも位置とサイズを調整していきます。3つのボタンの隙間が無いのもカッコ悪いので、均等に幅を入れていきます。Stack Viewの各画像のPinで適度な幅を調整。Stack Viewの状態でクリックして、アトリビュート・インスペクタのDistributionをFillからEqual Spacingに変更します。これで、位置調整が完了しました。Runボタンをクリックして表示を確認しましょう。
janken_07

ここで肝心な要素を忘れていました。ジャンケン勝ち負けを表示するテキストと、大河内さん側の「グー」「チョキ」「パー」が抜けています。こういうことがあるので、プロトタイプは大事なのですね。このように配置しました。

janken_08

パーツとプログラムをつなげる

現在、storyboardには以下のパーツが設置されています。

  • 「大河内さんとじゃんけん」のラベル
  • 大河内さんのイラスト
  • 大河内さんの手
  • グーボタン
  • チョキボタン
  • パーボタン

この中で、大河内さんのイラスト以外は全て動的な制御をいれるパーツのため、それぞれアウトレット接続をしていきます。ここでつける名前はプログラミングでも使用するので、管理しやすい名前にするのが良いと思います。

ジャンケンアプリで、「ViewController.swift」に書いたプログラミングコードは以下の通りです。

import UIKit
import GameplayKit

class ViewController: UIViewController {
    let randomJanken = GKARC4RandomSource()
    @IBOutlet weak var cHand: UIImageView!
    @IBOutlet weak var jankenLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func pRock() {
        jankenComputer(0);
    }

    @IBAction func pScissors() {
        jankenComputer(1);
    }

    @IBAction func pPaper() {
        jankenComputer(2);
    }

    func jankenComputer(player:Int) {
        let comp = randomJanken.nextIntWithUpperBound(3)
        var msg = ""
        switch comp {
        case 0:
            cHand.image = UIImage(named: "1_rock.png")
            switch player{
            case 0:
                msg = "あいこ"
            case 1:
                msg = "あなたの負け"
            case 2:
                msg = "あなたの勝ち"
            default:
                break
            }         
        case 1:
            cHand.image = UIImage(named: "1_scissors.png")
            switch player {
            case 0:
                msg = "あなたの勝ち"
            case 1:
                msg = "あいこ"
            case 2:
                msg = "あなたの負け"
            default:
                break
            }
        case 2:
            cHand.image = UIImage(named: "1_paper.png")
            switch player{
            case 0:
                msg = "あなたの負け"
            case 1:
                msg = "あなたの勝ち"
            case 2:
                msg = "あいこ"
            default:
                break
            }
        default:
            break
        }  
    jankenLabel.text = msg
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}
    

変数・定数とは

青木
「var・letが何回か出てきているけど、どういう意味があるの?」
大河内さん
「きっとそう言われると思ってメモを書いてきたわ」
変数・定数の紹介

大河内さん
「varは変数。今回のジャンケンだと、空っぽの変数を用意しておいて、勝ち負けに合わせてラベルを表示させているのよ。そして、letは定数。変数と違って、後から変更することはできないから注意が必要よ。」

関数とは

青木
「funcというのも多く登場しているね。ソウルミュージックのこと?」

大河内さん
「ソウルミュージックはfunk!ここで使われるfuncはfunctionの略で、日本語では関数と言われているわ。繰り返し実行するプログラミングを、ひとまとめにすることができるのが関数よ!」

関数の説明

大河内さん
「例えば、クレジットカードで“利用明細を全部足す”“足した金額を指定口座から引き落とす”ことは毎月同じことをしているよね?これら同じことを繰り返してプログラミングを1行目から書いていたら時間の無駄よね?このような決まったことを関数化しておくことで効率的になるのよ。」

他にも、switchやbreakなどありますが、ド素人の私は華麗にスルーさせていただきます。

フレームワークを利用

今回はGameplayKitというフレームワークを使っています。ゲームでよく使用されるロジックを簡単に書きやすくしてくれる代物とのことで、ジャンケンをランダムにするべく使用しました。アプリ開発に限ったことではないですが、フレームワークやライブラリなど、プログラミングの世界は効率的な仕組みが多くありますね!

Xcodeシミュレータで動きを確認

いよいよジャンケンの時間です。ちゃんとジャンケンらしい動きをしてくれるのでしょうか?

青木
「ランダムのはずなのに全く勝てない・・・」
大河内さん
「私の画像を荒いままにしておくからよ!」
※なお、GameplayKitを使ってしっかり乱数抽出しています。

青木
「でもこれで、アプリ開発者としてデビューができたわけで、これからアプリ開発でブイブイ言わせるぞー」

大河内さん
「何言っているの?さんざんつまづいていたけど、参考書によれば、ジャンケンアプリは難易度5段階評価で下から2番目の評価になっているわよ。」

青木
「ひー」

大河内さん
「それに、シミュレータじゃなく、いつになったら実機で確認できるの?」

青木
「いろいろとアカウントの申請が・・・それに別の業務がありまして・・・」

大河内さん
「そんなこと言っているから、いつまで経ってもタイムマネジメントが下手って言われるのよ!」

m_02
「はーん」

といったわけで、ものすごく簡素ではありますが、無事にジャンケンのアプリプログラミングを組み立てることができました。

やればやるほどプログラミングが楽しくなる

いかがでしたでしょうか?思いつきから始まったアプリ自作企画ですが、今回の学びをここで振り返ってみたいと思います。

iPhoneアプリの場合はプログラミング以前にXcodeに慣れるまでが、ちょっとしたハードルになります。ただ、今回のように教科書片手に、まずはシンプルなアプリを作ることで、プログラミングの楽しさを覚えることができると思います。

今回は自分の実力不足や、タイムマネジメント不足といった点から、UIや演出面などで、非常に簡素なものになっているものの、エラー無く動くのは嬉しいものです。「幼い頃からプログラミング教育を!」という声も、チラホラ出ているなか、ますます身近になるプログラミングを、みなさんも挑戦してみてはいかがでしょうか?
ジャンケンアプリで使用予定だったアイコン

初心者向けiPhoneアプリの参考書籍

今回参考にさせていただいた書籍は以下の2冊です。ありがとうございました!
プログラミングの世界へようこそ
SwiftではじめるiPhoneアプリ開発の教科書 Swift2&Xcode7対応

青木マサヒロ

青木 マサヒロ

株式会社クリーク・アンド・リバー社 プロデューサー
神奈川県出身。専門学校のWebデザイン科にてWebに関する基礎を学び、広告代理店系のインタラクティブコンテンツの制作会社、飲食系Webメディアを経て2014年より現職。オウンドメディアを通じてのリード獲得最大化をミッションに企画設計から、プロモーション、運用型広告に関する一連業務を担う。得意技はデータの根性マイニング。

Twitter : @woodblu
Facebook: https://www.facebook.com/masahiloaoki
Blog:http://woodblu.me/

関連記事