Swift instagram viewer

#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のシールくれ！」でも構いません