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

今回のゴール

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

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

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

{
  "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を叩いて表示される内容とは異なりますのでご了承ください。

プロジェクトの作成

1・Single View Applicationにてプロジェクトを作成

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

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

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

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

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

が良いかと思います。

３・cocoaファイルを追加し、諸設定を行う

内容は以下の通り

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

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

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

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

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

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

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

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

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

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

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

６・SwiftyJSONのセットアップ

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

SwiftyJSON
https://github.com/lingoer/SwiftyJSON

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

//
//  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.
    }
    */

}

参考資料

SwiftyJSONを使ってみよう！超簡単にSwiftでHotpapper APIのレスポンス(JSON)をパースする(Xcode6 beta5, API)