Upload
shintaro-kaneko
View
862
Download
2
Embed Size (px)
Citation preview
自己紹介
金子 慎太郎 (Shintaro Kaneko) iOS/Android/Webエンジニア 株式会社エウレカでマッチングアプリ「pairs」の開発
「Couples」というアプリも開発していました(pairsメイン)
趣味 コーヒー, カメラ, 数学
shintaro.kaneko @kaneshinth @kaneshin @kaneshinth @kaneshinth
Facebook: Twitter: GitHub:
Qiita: Instagram:
Agenda
InstagramのAPIを使ってSwiftで簡単なビューワーアプリの開発 これからAPIから情報を取得したい人向けです
0. 作ったアプリ(1時間) 1. 開発準備
• Instagram APIについて • 使用するフレームワークの導入
2. 実装 • Instagramから情報を取得
3. まとめ
Instagram APIについて
今回使用するエンドポイント https://api.instagram.com/v1/media/popular?client_id=CLIENT-ID
CLIENT-IDの発行 => InstagramへClient登録 http://instagram.com/developer/clients/register/
※注: 1時間につき5000リクエスト 詳細:Instagram API Endpoints http://instagram.com/developer/endpoints/
Instagram APIについて
今回使用するエンドポイント https://api.instagram.com/v1/media/popular?client_id=CLIENT-ID
人気のメディア(写真/動画)データが返却される 画像についての情報取得は下記のように行える
responseJSON["data"][i]["images"]["standard_resolution"] /* { "url": "http://s.cdninstagram.com/hphotos-xap1/a.jpg", "width": 640, "height": 640 } */
使用するフレームワークの導入
今回使用するフレームワーク
Alamofire (https://github.com/Alamofire/Alamofire) ネットワーク通信を手軽にする
SwiftyJSON (https://github.com/SwiftyJSON/SwiftyJSON) JSONデータを構造体で扱える
この2つをダウンロードかGit-Submoduleでプロジェクトフォルダへ ※今回、ライブラリ管理ツールは使用しません
使用するフレームワークの導入
ターゲットにフレームワークを追加 →ターゲット選択 →General選択 →Embedded Binariesの「+」 →追加したいフレームワーク選択
最近のXcodeならここへ追加するとBuild Phasesへ適切に設定される
Instagramから情報を取得
流れ
1. Alamofire.Requestクラスを使用してInstagram APIへリクエスト 2. レスポンスのデータをSwiftJSON.JSON構造体へ 3. Media構造体に必要な情報をJSON構造体から取得
Instagramから情報を取得
1. Alamofire.Requestクラスを使用してInstagram APIへリクエスト → requestメソッドが用意されているので、それを使用する
let urlString = "https://api.instagram.com/v1/media/popular" let param = ["client_id": "<#CLIENT-ID#>"] let req = request(.GET, urlString, parameters: param)
Instagramから情報を取得
2. レスポンスのデータをSwiftJSON.JSON構造体へ → Requestの拡張にresponseメソッドがあるのでこれを使用する
let urlString = "https://api.instagram.com/v1/media/popular" let param = ["client_id": "<#CLIENT-ID#>"] let req = request(.GET, urlString, parameters: param) req.response { (request, response, responseData, error) -> Void in if error == nil { if let data = responseData as? NSData { let json = JSON(data: data) // …… } } }
SwiftyJSON.JSON
Instagramから情報を取得
3. Media構造体に必要な情報をJSON構造体から取得 → まず、Media構造体を作成
struct Caption { var username: String? var text: String? }
struct Media { var thumbnailURL: NSURL? var imageURL: NSURL? var caption: Caption? }
Instagramから情報を取得
3. Media構造体に必要な情報をJSON構造体から取得 → JSON構造体からMedia構造体へ let json = JSON(data: data) if let array = json["data"].array { for d in array { var caption = Caption( username: d["caption"]["from"]["username"].string, text: d["caption"]["text"].string) var media = Media( thumbnailURL: d["images"]["thumbnail"]["url"].URL, imageURL: d["images"]["standard_resolution"]["url"].URL, caption: caption) self.mediaList.append(media) } }
Instagramから情報を取得
req.responseJSON { (request, response, jsonData, error) -> Void in if error == nil { if let json = jsonData as? NSDictionary { self.mediaList = [] if let array = json["data"] as? NSArray { for d in array { if let dict = d as? NSDictionary { var caption = Caption( username: ((dict["caption"] as? NSDictionary)?["from"] as? NSDictionary)?["username"] as? NSString, text: (dict["caption"] as? NSDictionary)?["text"] as NSString ) var media = Media( thumbnailURL: NSURL(string: ((dict["images"] as? NSDictionary)?["thumbnail"] as? NSDictionary)?["url"] as NSString)!, imageURL: NSURL(string: ((dict["images"] as? NSDictionary)?["standard_resolution"] as? NSDictionary)?["url"] as NSString)!, caption: caption ) }}}}}}
まとめ
ネットワーク通信関連はAlamofire JSONの扱いはSwiftyJSON
サンプルプロジェクトのリポジトリ: https://github.com/kaneshin/EasyInstagramViewer-Swift
来週、社内でこれをさらに内容を盛り込んで勉強会を行います
本日、聞きたいことがありましたら、何でもお聞きください 「GitHubのシールくれ!」でも構いません