Embed Size (px)
Citation preview
#swift
© 2014 Shintaro Kaneko
Instagram Viewer (Swift)
Shintaro Kaneko iOS/Android/Web Developer
自己紹介
金子 慎太郎 (Shintaro Kaneko) iOS/Android/Webエンジニア 株式会社エウレカでマッチングアプリ「pairs」の開発
「Couples」というアプリも開発していました（pairsメイン）
趣味 コーヒー, カメラ, 数学
shintaro.kaneko @kaneshinth @kaneshin @kaneshinth @kaneshinth
Facebook: Twitter: GitHub:
Qiita: Instagram:
ちょっと自慢
WWDC2014に参加したので
Swiftの発表は会場で聞いていました
GitHub Sticker
欲しい方いたら差しあげます
Agenda
InstagramのAPIを使ってSwiftで簡単なビューワーアプリの開発 これからAPIから情報を取得したい人向けです
0. 作ったアプリ（1時間） 1. 開発準備
• Instagram APIについて • 使用するフレームワークの導入
2. 実装 • Instagramから情報を取得
3. まとめ
0. 作ったアプリ（1時間）
1. 開発準備
Instagram APIについて 使用するフレームワークの導入
Instagram APIについて
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 … ネットワーク通信 SwiftyJSON … JSONデータを扱う
使用するフレームワークの導入
今回使用するフレームワーク
Alamofire (https://github.com/Alamofire/Alamofire) ネットワーク通信を手軽にする
SwiftyJSON (https://github.com/SwiftyJSON/SwiftyJSON) JSONデータを構造体で扱える
この２つをダウンロードかGit-Submoduleでプロジェクトフォルダへ ※今回、ライブラリ管理ツールは使用しません
使用するフレームワークの導入
プロジェクトに追加 フレームワークのプロジェクトを作成しているプロジェクトへ追加
使用するフレームワークの導入
ターゲットにフレームワークを追加 →ターゲット選択 →General選択 →Embedded Binariesの「＋」 →追加したいフレームワーク選択
最近のXcodeならここへ追加するとBuild Phasesへ適切に設定される
使用するフレームワークの導入
フレームワークの準備は完了
あとは使用するコードにimportするだけです
import Alamofire import SwiftyJSON
2. 実装
Instagramから情報を取得
Instagramから情報を取得
Instagramから情報を取得
流れ
1. Alamofire.Requestクラスを使用してInstagram APIへリクエスト 2. レスポンスのデータをSwiftJSON.JSON構造体へ 3. Media構造体に必要な情報をJSON構造体から取得
Instagramから情報を取得
JSONMedia
Media
Media
Instagram APIApp
Swifty JSON
Swifty JSON
Alamofire
Instagramから情報を取得
Instagram APIApp
JSONMedia
Media
Media
Swifty JSON
Swifty JSON
Alamofire
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から情報を取得
Instagram APIApp
JSONMedia
Media
Media
Swifty JSON
Swifty JSON
Alamofire
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から情報を取得
Media
Media
MediaSwifty JSON
Instagram APIApp
JSON
Swifty JSON
Alamofire
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から情報を取得
Media
Media
Media
Instagram APIApp
Swifty JSON
JSON
Swifty JSON
Alamofire
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) } }
SwiftyJSONを
使わない場合
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 ) }}}}}}
Downcastを
多用する必要がある
まとめ
ネットワーク通信関連はAlamofire JSONの扱いはSwiftyJSON
サンプルプロジェクトのリポジトリ： https://github.com/kaneshin/EasyInstagramViewer-Swift
来週、社内でこれをさらに内容を盛り込んで勉強会を行います
本日、聞きたいことがありましたら、何でもお聞きください 「GitHubのシールくれ！」でも構いません
