Swift：超初心者向け！iosアプリ開発の始め方（２）｜プログラミング初心者のプロへの道

iosアプリ開発の始め方第2回です。

前回はプロジェクトを立ち上げるところまで進めましたね。

前回がまだの方はこちら

今回は、
アプリの開発を進めて行きます！

さて、今回作るのは

ボタンをタップすると、画面の色が変わるアプリです！！

シンプルですが、始めにはぴったりだと思います。

まずは前回のプロジェクトを開いてください。

そして、
『Main.storyboard』を開いてください。

Contents

1 Interface builderを使う！！
- 1.1 UIButtonを使う！
  - 1.1.1 attributes inspector
  - 1.1.2 Assistant Editor
2 共有:

Interface builderを使う！！

interface builderとは見た目を作る機能のことです。

StoryBoardをぎょぎょっといじって行きます。

さて、
Main.storyboardを開くと
このような画面が出てくると思います。
f:id:jumprails3303:20161125231246p:plain

UIButtonを使う！

『UIButton』とは
簡単に言うとボタンのことです！
UIButtonについてはこちらをどうぞ！
やや難しめです！

アプリについていて、
タップするとなんらかの動きがあるものの多くがUIButtonです。
ちなみに、『UI』とはUser Interfaceのことです。

つまり、
アプリに必須のパーツです！！

iosアプリの見た目の開発では
四角い画面にパーツをくっつけて行います。

まずは、
UIButtonを貼る準備をします。

①のマークをクリックしてください。

②に『button』と入力してください。

するとUIButtonが出てきます。
f:id:jumprails3303:20161125232631p:plain

そしていよいよ、UIButtonをくっつけます！
ドラッグ＆ドロップで画面の真ん中あたりにいい感じに置きます。
f:id:jumprails3303:20161125233515p:plain

ドラッグ＆ドロップをご存じない方はこちら！！

https://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cad=rja&uact=8&sqi=2&ved=0ahUKEwi_vuLgj8TQAhXFVbwKHYdWCeoQFggjMAI&url=https%3A%2F%2Fja.wikipedia.org%2Fwiki%2F%25E3%2583%2589%25E3%2583%25A9%25E3%2583%2583%25E3%2582%25B0%25E3%2583%25BB%25E3%2582%25A2%25E3%2583%25B3%25E3%2583%2589%25E3%2583%25BB%25E3%2583%2589%25E3%2583%25AD%25E3%2583%2583%25E3%2583%2597&usg=AFQjCNEfoaN2YiA5I3uniQirCTdRkiQPDQ&sig2=j9EmcoNRQZsAKgvVrne4cQ&bvm=bv.139782543,d.dGc

次に、おいたUIButtonに色をつけましょう。
色をつけると華やかになりますし、何より楽しいです！

attributes inspector

attributes inspectorとは見た目をカスタマイズすることができる機能が詰まったところです。

①配置したUIButtonをクリックして、選択状態にしましょう。

②右上のホームベースのようなマークをクリックしましょう。

③少し下にスクロールすると、Backgroundというところがあるので、そこでお好きな色を選択してください。

f:id:jumprails3303:20161125234112p:plain

次に、実際コードを書いて行きます。

Assistant Editor

今まで、コードについて全く触れてきませんでしたが、
ここでようやくコードを書きます。プログラミングです！

次にやることは、
UIButtonをタップした時の動きを書くことです。
今回は画面の色を変化させます。

そのためには、
storyboard上にあるUIButtonをコードと紐付けます！

まずは右上の輪っかが二つ重なっているボタンをクリックしてください。
f:id:jumprails3303:20161125235632p:plain

すると、画面が大きく変化したと思います。
このように、画面が二つに割れたはずです。（始めたばかりの方は、エディターの色は白いと思います。）
f:id:jumprails3303:20161125235757p:plain

ここで、UIButtonを選択した状態で
『control + ドラッグ』
で画像と同じような位置でドロップしてください。

するとグレーの小さい画面が出てくるので、
そこを編集します。

『Connection』を　outlet　から　action　に変更してください。

『name』を button　としてください。

そして最後に『connect』をクリック！
f:id:jumprails3303:20161126000313p:plain

@IBAction func button(_ sender: Any) {
    }

1 2	@IBAction func button(_ sender: Any) { }

このようなものが新しく出てくれば成功です。

ここで少しコードに
触れて行きます。

現在、このようになっているかと思います。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func button(_ sender: Any) {
    }
    
}

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {

super.viewDidLoad()

// Do any additional setup after loading the view, typically from a nib.

}

override func didReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

// Dispose of any resources that can be recreated.

}

@IBAction func button(_ sender: Any) {

}

実はこのコード
さっきまでいじっていた
Main.storyboardの
画面とつながっております！！

f:id:jumprails3303:20161126001535p:plain

実はこの画面、
『UIViewController』というかっこいい名前がついています。
正確には画面というより
窓枠です。

そこに『UIView』という画面がくっついているのですが、
詳しい話はまた今度。

今回はUIViewControllerについてです。
再度コードを見てください。
上の方に

class ViewController: UIViewController

1	class ViewController: UIViewController

と記述されてますよね！
これが先ほどの窓枠とつながっている証拠です。

少し下の方に、

viewDidLoad

1	viewDidLoad

と書かれた場所があります
。
これはアプリを起動し、画面が表示される直前に処理が行われる場所です。

ここを少し編集しましょう。

override func viewDidLoad() {
        super.viewDidLoad()
        
        self.view.backgroundColor = UIColor.red
        
    }

override func viewDidLoad() {

super.viewDidLoad()

self.view.backgroundColor = UIColor.red

}

これを足しました。

 self.view.backgroundColor = UIColor.red

1	self.view.backgroundColor = UIColor.red

これはViewControllerのviewのbackgroundColorをred（赤）に変える！
という処理です。

それでは、実際に見て見ましょう！
ここの再生ボタンをクリックしてください。
この再生ボタンを押すことで実際にアプリを動かすことができます。
f:id:jumprails3303:20161126002753p:plain

そうすると自動で新しい画面が動き出すはずです。
このようにUIButton以外が真っ赤な画面が出てくれば成功です。
f:id:jumprails3303:20161126002926p:plain

では、Main.storyboardを見てみましょう。
あれ？？
画面が白いですね。

それで問題ないんです。
コードで書いたものは、再生ボタンを押すまでUIViewControllerに反映されません。

それでは最後にスーパー写経タイム！(許してください)
先ほど、UIButtonとコードを紐付けた際に
出てきたコードの内側に4行追加してください。

@IBAction func button(_ sender: Any) {     
        let red = arc4random() % 255
        let green = arc4random() % 255
        let blue = arc4random() % 255   
        self.view.backgroundColor = UIColor(red: CGFloat(red) / 255, green: CGFloat(green) / 255, blue: CGFloat(blue) / 255, alpha: 1.0)
    }

@IBAction func button(_ sender: Any) {

let red = arc4random() % 255

let green = arc4random() % 255

let blue = arc4random() % 255

self.view.backgroundColor = UIColor(red: CGFloat(red) / 255, green: CGFloat(green) / 255, blue: CGFloat(blue) / 255, alpha: 1.0)

}

そして、
再生ボタンを押して、
画面真ん中にあるボタンを連打して遊んでください。
画面の色は変わりましたか？

最終的なコード

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.view.backgroundColor = UIColor.red
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()

    }

    @IBAction func button(_ sender: Any) {
        
        
        let red = arc4random() % 255
        let green = arc4random() % 255
        let blue = arc4random() % 255
        
        
        self.view.backgroundColor = UIColor(red: CGFloat(red) / 255, green: CGFloat(green) / 255, blue: CGFloat(blue) / 255, alpha: 1.0)
    }
    
}