cre8cre8
AskMe♥

「もうswift3でAPIを使ったiOSアプリを作れない」なんて言わせない!swift3でWebAPIリクエストをするアプリを作りながら解説するよ

ふぇぇ…swift2でAPI飛ばしてたプログラムをswift3に移行したらエラーでて飛ばせないよぉぉ…
とお困りの皆さん(主に私)。うp主のたくみです。
今回はxcode8/swift3で、前記事のスマホアプリを作るために5分でWebAPIを作る方法を全力で超親切に解説する
作成したWebAPIに接続してお問い合わせを送信するiOSアプリを作成します。
iOSアプリを作ったことのない初心者さんもできるように解説してますので、リラックスしてチャレンジしてください♪

プロジェクトを作成する

それでは早速xcodeを起動しましょう!
もし、xcodeがない場合はApp Storeからxcodeをダウンロードしてください。

xcode起動画面
起動後はこのような画面が最初に現れます。
(右側のi_can_make_api_appはない場合もありますので気にしないでください)
Create a new Xcode project を押して新規プロジェクトを作成しましょう!

テンプレートの選択
Create a new Xcode project を押すとこのような画面が表示されます。
今回はWebAPIを飛ばすだけのシンプルなアプリケーションなので、Single View Application を選択し、Nextを押します。

プロジェクト名の入力
この画面ではプロジェクトの情報を入力します。
ここでObjective-Cやswiftを選択したり、iPhone/iPad/両方で動くなどを設定したりします。
Product Name/Organization Name/Organization Identifi.../はサンプルアプリなのでお好きな名前をいれてください。
サンプルでは、
Product Name: i_can_make_api_app
Organization Name: takumi
Organization Identifi...: io.takumi
と入力しています。完了しましたらNextボタンを押しましょう。

Storyboardを使って入力エリアとボタンを配置する

それでは、一番左のペインにあるMain.storyboardを押してStoryboardに必要なパーツを配置していきます。
配置方法は、右側下部にあるパーツ一覧から必要なパーツを選んでStoryboardへドラッグアンドドロップするだけです。

テキストフィールドの配置
テキストフィールド(Text Field)をドラッグアンドドロップしながらStoryboardの上部へ配置します。

テキストビューの配置
テキストビュー(Text View)をドラッグアンドドロップしながらStoryboardのテキストフィールド下に配置します。

ボタンの配置
ボタン(Button)をドラッグアンドドロップしながらStoryboardのテキストビューの下に配置します。
配置後、ボタンをダブルクリックするとボタンのラベル(中身)を変更できます。
「API送信」とわかりやすい名前をつけましょう。

WebAPIを飛ばすプログラムを作成する

Storyboardに配置したパーツをswift3から動かせるようにします。

アシスタントエディタを有効
xcode上部にある丸が重なっているボタンを押してください。

StoryboardとViewControllerの紐付け
画面がふたつに分かれましたか??(ちなみに、アシスタントエディタといいます)
ふたつに分かれましたら、パーツをswiftで動かせるようにするため、右側のViewControllerと紐付けます。

テキストビューとViewControllerの紐付け
テキストフィールドをctrlキーを押しながら、右側のViewControllerにドラッグアンドドロップします。
ドラッグアンドドロップすると小さいウィンドウがでてくるので、Nameの欄にnameと入力します。
また、同様の操作でテキストビューもViewControllerに紐付けてください。
テキストビューの小さいウィンドウのNameの欄にはcontactと入力します。

ボタンのタッチイベントとViewControllerの紐付け
ボタンはテキストフィールド/テキストビューと異なる方法でViewControllerに紐付けします。
まず、ボタンの上で右クリックして黒いウィンドウを出します。
この黒いウィンドウの項目の中にTouch Downというものがありますので、このTouch Downの横にある○を 押しながら、
ViewControllerにドラッグアンドドロップします。
NameにはSendApiと入力します。

紐付け後の画像
上記の操作が完了した後、xcode上部にあるアシスタントエディタにするために押したボタンの左にあるボタンを押して、画面を1画面に戻します。
左側のメニューからViewController.swiftを選択すると、画像のように1画面全部にコードが表示されます。

それではswift3でWebAPIを飛ばすコードを作っていきましょう。

ViewController.swift
1//
2//  ViewController.swift
3//  i_can_make_api_app
4//
5//  Created by takumi on 9/28/16.
6//  Copyright © 2016 takumi. All rights reserved.
7//
8
9import UIKit
10
11class ViewController: UIViewController {
12
13
14    @IBOutlet weak var name: UITextField!
15    @IBOutlet weak var contact: UITextView!
16
17    override func viewDidLoad() {
18        super.viewDidLoad()
19        // Do any additional setup after loading the view, typically from a nib.
20    }
21
22    override func didReceiveMemoryWarning() {
23        super.didReceiveMemoryWarning()
24        // Dispose of any resources that can be recreated.
25    }
26
27    @IBAction func sendApi(_ sender: AnyObject) {
28
29        // APIへ飛ばすデータをJSONに変換する
30        let nameText:String = self.name.text! // 終端に!が必要
31        let contactText:String = self.contact.text
32
33        let sendData = String(format: "{ \"contact\": { \"name\":\"%@\", \"contact\":\"%@\" } }", nameText, contactText).data(using: String.Encoding.utf8)
34
35        // APIへ接続するための設定
36        let apiUrl = URL(string: "http://localhost:3000/contacts.json")!
37        var request = URLRequest(url: apiUrl)
38        request.addValue("application/json", forHTTPHeaderField: "Content-type")
39        request.addValue("application/json", forHTTPHeaderField: "Accept")
40        request.httpMethod = "POST"
41        request.httpBody = sendData
42
43
44        // APIに接続
45        URLSession.shared.dataTask(with: request) {data, response, err in
46            if (err == nil) {
47                // API通信成功
48                print("success")
49            } else {
50                // API通信失敗
51                print("error")
52            }
53        }.resume()
54
55    }
56}

主に @IBAction func sendApi(_ sender: AnyObject) の中身を作ります。
30行目から33行目にはテキストフィールドに入力されたデータを
APIに飛ばすための準備をしています。(APIはJSONデータを受け取るためJSONに変換しています)

36行目から41行目はAPIへ接続するための設定です。
ここでは、接続先のURL設定、HTTPヘッダーの設定、HTTPメソッドの設定、送信するデータの設定をしています。
接続するAPIによって設定するデータが変わりますので、前記事の問い合わせAPIでない場合は、
そのAPIが受け付ける設定に変更してください。

45行目から53行目でAPIにリクエストを飛ばします。
46行目から52行目はAPI通信が完了後に走る処理を記述でき、ここに成功時/失敗時や取ってきたデータを表示する処理などを記述します。
今回はAPIにリクエストを飛ばすのがメインの解説ですので、ログを出力するだけにします。

ATSを無効にする

iOSアプリはデフォルトの設定だとhttpsによる安全な通信しかできないように設定されています。
今回はサンプルアプリなので、この設定をオフにし平文のhttpで接続できるように設定を変更します。
左のファイル一覧にあるinfo.plistを開いてください。

info.plistにApp Transport Security Settingsを追加
一番上のInformation Property Listにカーソルを合わせると+マークが現れるのでクリックします。
すると新しいレコードが作成され、名前を入力できるようになるので、そこにApp Transport Security Settingsと入力します。
また、TypeはDictonaryに設定してください。

info.plistにAllow Arbitrary Loadsを追加
作ったApp Transport Security Settingsの右側にある+マークをクリックし、新しいレコードを作成します。
名前をAllow Arbitrary Loadsに設定しTypeをBoolean、ValueをYESにします。

上記操作でATSを無効にでき、平文のhttpでリクエストを送ることができます。

以上でswift3でリクエストを飛ばせるようになりました。
xcode上部のメニューの▶ボタンを押してiOSシミュレータデバッグをしてみましょう!
各テキストフィールドに適当な値を入力し、ボタンを押すとAPIが飛びます。
前記事のAPIを飛ばす場合は、$ rails sでサーバの起動を忘れないようにしてくださいね。
API送信ボタン押下後に管理画面にアクセスするとデータが増えているのが確認できます。

次回はAndroidでAPIリクエストを送信する記事を書きますので楽しみに待っていてくださいね。

[おまけ] iOSシミュレータが大きくて画面からはみ出す時の対策

プログラムを走らせたらiOSシミュレータが大きくて作業ができなくて困ったときは、Command+1〜5のキーを押すと
シミュレータを拡大/縮小できます。
iOSシミュレータが大きい時
上部画像のように画面はみ出てるiOSシミュレータがCommand+4を押すとちょうどいいサイズに変更されます。
大きくて困っているときはぜひお試しくださいな♪

≪ 前の記事
スマホアプリを作るために5分でWebAPIを作る方法を全力で超親切に解説する
次の記事 ≫
脱Androidアプリ初心者!AsyncTaskとHttpURLConnectionを使って優雅にWebAPIを送信するでござる。

いいねやコメントを送っていただけると中の人がしっぽ振って大喜びします♪

あなたへのおすすめの記事