[Swift]xcode6.1で確認済み！SwiftyJSONで超簡単にHotpapper APIのレスポンス(JSON)を出力する

## 今回のゴール

![スクリーンショット 2014-08-26 20.11.23.png](https://qiita-image-store.s3.amazonaws.com/0/15812/cb78613d-7be3-acf0-a6c4-9af807e50726.png)

![スクリーンショット 2014-08-26 20.11.31.png](https://qiita-image-store.s3.amazonaws.com/0/15812/b6905bbb-110f-a00a-bd17-6d3f521c68cc.png)


* クーポンで使用している画像
* クーポンで使用しているcaption

が表示されていることが確認できます！


## 対象データ(Hotpapper APIのレスポンス結果)

```json
{
  "results":{
    "results_available":269,
    "api_version":"1.01",
    "salon":[
      {
        "last_update":"2014-07-25T08:17:37",
        "equipment":"12席",
        "mood":[
          {
            "caption":"写真はハンド&フットでオフ込9900円♪ウォーターバス無料☆",
            "photo":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/89/94/C002068994/C002068994_219-164.jpg"
          },
          {
            "caption":"大好評☆ウォーターバス&オフ無料☆オフ込6700円(税込)デザイン",
            "photo":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/79/91/C001977991/C001977991_219-164.jpg"
          },
          {
            "caption":"大好評デザイン☆『リゾートシェル』オフ込5200円（税込）",
            "photo":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/90/10/C002069010/C002069010_219-164.jpg"
          }
        ],
        "name_kana":"エービーシーネイル　ギンザテン",
        "catch_copy":"【何度でもオフ無料】駅徒歩1分♪1カラーorラメグラ3980円☆表示価格すべて税込！平日昼割はオフ込4200円♪",
        "lng":"139.7677283349",
        "lat":"35.6730461059",
        "urls":{
          "qr":"http://webservice.recruit.co.jp/common/qr?url=http%3A%2F%2Fb.hpr.jp%2Fkr%2FH000253802%2F%3Fvos%3Dnhpkapis00001%26uid%3DNULLGWDOCOMO",
          "pc":"http://beauty.hotpepper.jp/kr/slnH000253802/?vos=nhpkapis00001",
          "mobile":"http://b.hpr.jp/kr/H000253802/?vos=nhpkapis00001&uid=NULLGWDOCOMO"
        },
        "address":"東京都中央区銀座２－７－７GINZA2ndAve.1-A 5F",
        "description":"いつでもオフ代無料♪表示価格はすべて税込♪1カラーorラメグラがオフ代込みでお値段変わらずいつでも3980円☆次回予約で2回目10％オフ！銀座線・丸ノ内線「銀座駅」徒歩2分、有楽町線「銀座一丁目駅」徒歩1分の好立地！夜22時迄営業で通いやすさ抜群☆経験豊富なネイリストが貴方の指先を大人ネイルに仕上げますっ♪",
        "feature":[
          {
            "code":"C023",
            "name":"ペディキュアコレクション",
            "caption":"デザイン多数♪全てオフ代込＆税込！次回予約10％オフ♪駅徒歩1分で『3980円』から！当日予約もＯＫ☆",
            "g_code":"SO01",
            "g_name":"注目特集",
            "photo":{
              "s":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/71/46/C002027146/C002027146_89-119.jpg",
              "l":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/71/46/C002027146/C002027146_262-349.jpg",
              "m":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/71/46/C002027146/C002027146_164-219.jpg"
            },
            "description":"大人気!!フットはウォーターバス無料でオフ込5700円～☆フット＆ハンドで更に1000円引と断然お得！【写真はクーポン【8】オフ込6700円】次回予約で２回目１０％オフ♪平日昼割オフ込4200円（ハンド）♪"
          },
          {
            "code":"L026",
            "name":"シンプル系（オフィス・日常）",
            "caption":"【いつでもオフ無料3980円（税込）～】全メニュー税込表示!当日予約ＯＫ♪次回予約で2回目さらに10％オフ☆",
            "g_code":"SP41",
            "g_name":"デザインやプランから探す",
            "photo":{
              "s":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/70/97/C002027097/C002027097_89-119.jpg",
              "l":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/70/97/C002027097/C002027097_262-349.jpg",
              "m":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/70/97/C002027097/C002027097_164-219.jpg"
            },
            "description":"新作☆夏ホロ♪『トロピカルドロップ』【写真はクーポン【4】利用でオフ込4200円】全メニューオフ無料♪当日予約もちろんＯＫ！ＡＢＣは低価格・好立地・短時間！フット＆ハンド同時ならお会計から更に1000円引き♪"
          },
          {
            "code":"L031",
            "name":"初めての方にオススメ",
            "caption":"【いつでもオフ無料3980円（税込）～】全て税込のお値段!駅徒歩1分～♪ワンカラーorラメグラがオフ込3980円",
            "g_code":"SP42",
            "g_name":"サロンの特徴から探す",
            "photo":{
              "s":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/70/98/C002027098/C002027098_89-119.jpg",
              "l":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/70/98/C002027098/C002027098_262-349.jpg",
              "m":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/70/98/C002027098/C002027098_164-219.jpg"
            },
            "description":"今月の新作♪シェルスワロ満載☆『大人サマージュエリー』【写真はクーポン【5】利用でオフ込4700円】次回予約で次回のお会計から10％オフと断然お得☆〔新規＆全員〕ワンカラー・ラメグラ・ラメ1色オフ込3980円♪"
          },
          {
            "code":"L027",
            "name":"モテ可愛系（デート・合コン）",
            "caption":"【いつでもオフ無料3980円（税込）～】表示価格はすべて税込み♪次回予約で2回目10％オフ♪当日予約ＯＫ！",
            "g_code":"SP41",
            "g_name":"デザインやプランから探す",
            "photo":{
              "s":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/71/05/C002027105/C002027105_89-119.jpg",
              "l":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/71/05/C002027105/C002027105_262-349.jpg",
              "m":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/71/05/C002027105/C002027105_164-219.jpg"
            },
            "description":"新作☆お待たせしました!!人気の縦グラデ☆『ジュエリーミックス』【写真はクーポン【6】利用でオフ込5200円】全メニューオフ代込＆税込♪毎月のキャンペーンネイルに4200円コース誕生★5200円・5700円コースもお得!"
          },
          {
            "code":"L077",
            "name":"定額プランのあるサロン",
            "caption":"【いつでもオフ無料3980円（税込）～】税込表示でわかりやすい!オフ無料で安心♪当日予約OK!駅徒歩1分～",
            "g_code":"SP41",
            "g_name":"デザインやプランから探す",
            "photo":{
              "s":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/71/08/C002027108/C002027108_89-119.jpg",
              "l":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/71/08/C002027108/C002027108_262-349.jpg",
              "m":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/71/08/C002027108/C002027108_164-219.jpg"
            },
            "description":"新作デザイン♪大人レディなシェルネイル『ジャスミンサマー』【写真はクーポン【7】利用でオフ込5700円】すべてオフ代込で安心定額制☆お友達との同時もOK☆フットも嬉しいウォーターバス無料でオフ代込5700円～♪"
          },
          {
            "code":"L075",
            "name":"長さ出しのできるサロン",
            "caption":"【いつでもオフ無料3980円（税込）～】表示価格は全て税込み♪駅徒歩1分～☆次回予約で2回目さらに10％オフ",
            "g_code":"SP41",
            "g_name":"デザインやプランから探す",
            "photo":{
              "s":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/71/18/C002027118/C002027118_89-119.jpg",
              "l":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/71/18/C002027118/C002027118_262-349.jpg",
              "m":"http://imgbp.hotp.jp/CSP/IMG_SRC_K/71/18/C002027118/C002027118_164-219.jpg"
            },
            "description":"新作★夏デザイン☆『アンダー・ザ・シー』【写真はクーポン【6】利用でオフ込5200円】22時迄営業で仕事後でも通える♪銀座駅2分・銀座一丁目駅1分と好立地♪フットも嬉しいウォーターバス無料+オフ代込で5700円～♪"
          }
      }
...
}

```
*見やすいように整形しています。APIを叩いて表示される内容とは異なりますのでご了承ください。

<br>
## プロジェクトの作成
### 1・Single View Applicationにてプロジェクトを作成

写真の手順で作成していきます。
僕の場合、名前を「swiftyAPI」にしました。
お好きなプロジェクト名を指定してください。

* Product Name : swiftyAPI
* Organization Name : 任意
* Organization Identifier : 任意
* Bundle Identifier : 任意
* Language : Swift
* Devices : iPhone
* Use Core Data : チェックなし

![スクリーンショット 2014-08-26 19.43.27.png](https://qiita-image-store.s3.amazonaws.com/0/15812/22094621-0932-da31-ddd3-f86a7580e534.png)

![スクリーンショット 2014-08-26 19.43.44.png](https://qiita-image-store.s3.amazonaws.com/0/15812/340a4abb-de87-a482-d861-ce7e358f2b7c.png)

![スクリーンショット 2014-08-26 19.44.11.png](https://qiita-image-store.s3.amazonaws.com/0/15812/51e80b50-c572-983d-3b7f-f9ce315cee53.png)

<br>

### ２・view controllerを追加して画面遷移が出来ることを確認する。

Simulated Metricsは後々のことを考えて

* size : 「iphone 4-inch」
* Orientaion : 「Portrait」

が良いかと思います。

![スクリーンショット 2014-08-26 19.46.44.png](https://qiita-image-store.s3.amazonaws.com/0/15812/f7eb0672-7fa1-e0b8-4a89-2325a7a2eb53.png)

![スクリーンショット 2014-08-26 19.47.02.png](https://qiita-image-store.s3.amazonaws.com/0/15812/8e82a5f4-9b7b-b502-0f5c-c13668506559.png)

![スクリーンショット 2014-08-26 19.47.12.png](https://qiita-image-store.s3.amazonaws.com/0/15812/68200ea0-6bb3-92e5-d519-2a3c683b6df9.png)

![スクリーンショット 2014-08-26 19.48.53.png](https://qiita-image-store.s3.amazonaws.com/0/15812/dfe9c405-7fd6-8585-1760-9d8d594ca7e1.png)

<br>

### ３・cocoaファイルを追加し、諸設定を行う
内容は以下の通り

* Class : ViewController2
* Subclass of : UIViewController
* Also create XIB file : チェックなし
* Language : Swift

![スクリーンショット 2014-08-26 19.50.42.png](https://qiita-image-store.s3.amazonaws.com/0/15812/0f3e64e0-ff3f-425a-3b61-745d98ae23f9.png)

![スクリーンショット 2014-08-26 19.50.49.png](https://qiita-image-store.s3.amazonaws.com/0/15812/aa68d970-e25e-72cb-07ac-ffdb654bc6e3.png)

![スクリーンショット 2014-08-26 19.51.09.png](https://qiita-image-store.s3.amazonaws.com/0/15812/b6120b18-53ff-e553-a217-5ebf5c3700f9.png)

![スクリーンショット 2014-08-26 19.53.16.png](https://qiita-image-store.s3.amazonaws.com/0/15812/9982cf76-32b4-5dae-ece3-3603bf16238a.png)


ついでにIdentity欄のStoryboard IDを
「view2」などと名付けておくと、
後からプロゴラム上でこのViewControllerを指定するのが楽になります。

<br>

### ４・最初にあったViewControllerがNavigation Controllerに内包される形にする

初期のViewController（起動時にすぐ表示されるView Controller）の方を選択して、Editor＞Embed In＞Navigation Controllerを選択。
これにより、初期のViewControllerがNavigation Controllerに内包される形になります。


![スクリーンショット 2014-08-26 19.54.33.png](https://qiita-image-store.s3.amazonaws.com/0/15812/b3fc949a-fe31-cfc9-0237-2250b3bd1da4.png)

![スクリーンショット 2014-08-26 19.57.43.png](https://qiita-image-store.s3.amazonaws.com/0/15812/befa2fa1-0860-0a8f-5bb6-098001e2dc36.png)

二つのビューがどちらのビューなのか確認しやすくするために、
ビューのタイトルを表示するようにしておくと便利です。
初期のViewControllerのナビゲーションバーあたりを選択して、
右上のアトリビュートインスペクタ（左から４番目のアイコン）を選択。Title欄に「View1」と入力すると、
ストーリーボード上のViewControllerの上部に「View1」が表示されます。


![スクリーンショット 2014-08-26 19.58.02.png](https://qiita-image-store.s3.amazonaws.com/0/15812/2523b96a-f0f6-f04a-93cb-836b36329170.png)

![スクリーンショット 2014-08-26 19.58.43.png](https://qiita-image-store.s3.amazonaws.com/0/15812/0dcda312-7b01-3a27-459d-f93c8c303b0a.png)

追加した方のView Controllerを選択して、アイデンティティインスペクタ（右上の左から３番目のアイコン）でCunstom Class欄のClassリストから上記で作成した「ViewController2」を選択。


![スクリーンショット 2014-08-26 19.53.44.png](https://qiita-image-store.s3.amazonaws.com/0/15812/9709bbb4-3233-f71e-7943-aee6b1c40a7b.png)


追加したViewControllerにもナビゲーションバーあたりを選択し、アトリビュートインスペクターからNavigation Item欄のTitleに「View2」と入力すると初期のViewControllerと区別がつきやすくなります。

![スクリーンショット 2014-08-26 19.54.01.png](https://qiita-image-store.s3.amazonaws.com/0/15812/75a1b1f9-9a7b-1923-d612-2f91ef9b3a5c.png)



<br>
### ５・初期のViewControllerと追加したViewControllerを繋げて、両方ともNavigation Controllerに内包される形にする

View1に「Button」を配置。
ボタンタイトルを「API叩くよ」としました。

![スクリーンショット 2014-08-26 19.59.09.png](https://qiita-image-store.s3.amazonaws.com/0/15812/9a11c312-73b5-6979-0386-b546f285b57b.png)


![スクリーンショット 2014-08-26 19.59.14.png](https://qiita-image-store.s3.amazonaws.com/0/15812/5f63111e-bac4-5e9d-4c72-86be6d4dc37c.png)

そのボタンの上部から、Contorolキーを押しながらドラッグし、二つ目のViewControllerへドラッグ＆ドロップ。


![スクリーンショット 2014-08-26 19.59.21.png](https://qiita-image-store.s3.amazonaws.com/0/15812/53b081a3-e352-089b-4e9f-99faac7e04a0.png)

ドロップした地点に小さなメニューが出てきますので、
そこで「Push」を選択。
この操作により、初期のViewControllerと
追加したViewControllerがつながり、
両方ともNavigation Controllerに内包されます。

![スクリーンショット 2014-08-26 19.59.31.png](https://qiita-image-store.s3.amazonaws.com/0/15812/e511db5e-a124-eaba-1a34-b4ea720d310d.png)


### ６・SwiftyJSONのセットアップ

以下のサイトからコードを取得します。
私はzipファイルをダウンロード後、解凍し、開いたxcode6 beta5を開き、
作成済みのプロジェクトにdrag & dropで投げ込みました。
コマンドベースでやりたい方は、作成済みのプロジェクトに移動して、
git cloneで取得する方法でも良いかと思います。

[SwiftyJSON](https://github.com/lingoer/SwiftyJSON)
https://github.com/lingoer/SwiftyJSON

### ７・ViewController2でAPIのパースと出力を行う

```swift
//
//  ViewController2.swift
//  test2
//
//  Created by g08m11 on 2014/08/24.
//  Copyright (c) 2014年 Bloc. All rights reserved.
//

import UIKit

class ViewController2: UIViewController {
    
    override func viewDidLoad() {
      super.viewDidLoad()
      
      // API先指定
      var url = "http://webservice.recruit.co.jp/relax/salon/v1?response_reserve=1&count=15&order=3&address=%E9%8A%80%E5%BA%A7&key=d80cc5011c92e61d&format=json"
      
      var reqest = NSURLRequest(URL: NSURL(string: url)!)
      NSURLConnection.sendAsynchronousRequest(reqest,queue:NSOperationQueue.mainQueue(),completionHandler:{
        (res: NSURLResponse!, data: NSData!, error: NSError!) in
        let json = JSON(data)
        
        if let image = json["results"]["salon"][0]["mood"][0]["photo"].string{
          println(image)
          
          let imageUrl : NSURL = NSURL(string: image)!
          
          let imageDate = NSData(contentsOfURL: imageUrl)
          let image = UIImage(data: imageDate!)
          
          let iv:UIImageView = UIImageView(image:image)
          iv.frame = CGRectMake(50, 50, 200, 200)
          self.view.addSubview(iv)
          
          
        }
        if let caption = json["results"]["salon"][0]["mood"][0]["caption"].string{
          println(caption)
          
          var label = UILabel(frame : CGRectMake(50, 200, 200, 200))
          label.text = caption
          self.view.addSubview(label)
          
          
        }
      })        
        
        // Do any additional setup after loading the view.
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    
    /*
    // MARK: - Navigation
    
    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepareForSegue(segue: UIStoryboardSegue!, sender: AnyObject!) {
    // Get the new view controller using segue.destinationViewController.
    // Pass the selected object to the new view controller.
    }
    */
    
}

```
<br>

## 参考資料

[SwiftyJSONを使ってみよう！超簡単にSwiftでHotpapper APIのレスポンス(JSON)をパースする(Xcode6 beta5, API)](http://qiita.com/g08m11/items/c3746cbdbdb4c7b71607)