Guide for Swift and Viewer app

#kaneshin

© 2014 Shintaro Kaneko

Guide for Swift

and Viewer App

Shintaro Kaneko iOS/Android/Web Developer

Agenda

Guide for Swift Viewer App

Guide for Swift

Guide for Swift

Variables & Constants Printing Optional Switch Tuple Function Protocol

Variables & Constants

Use `let` for constants and `var` for variables in Swift.

var str1 = "Hello" // Variable str1 = "Test"

let str2 = "World" // Constant str2 = "Test" // Compile error

var arr1: [Int] = [] // Mutable array arr1.append(1)

let arr2: [Int] = [] // Immutable array arr2.append(1) // Compile error

Printing

Use `println()` method. It’s very similar to `NSLog()`.

Values of variables are expandable inside String using `\()` like below.

let hello = "Hello" let world = "世界" println("\(hello), \(world)") // Hello, 世界

Optional

To indicate it might be `nil`. Use Òptional<T>` to declare a variable, method as optional. var str3: Optional<String> = nil var str4: String? = nil // Syntax Sugar

Optional

Òptional<T>` is kind of ènum`. enum Optional<T> : Reflectable, NilLiteralConvertible { case None case Some(T) /// Construct a `nil` instance. init() /// Construct a non-\ `nil` instance that stores `some`. init(_ some: T)

So, it is able to express them. var str5: Optional<String> = Optional<String>() // nil var str6: Optional<String> = Optional<String>("Hello") // {Some "Hello"}

Optional

Use `!` mark after an optional value to force the unwrapping of its value. var str6: Optional<String> = Optional<String>("Hello") var str7: String = str6 // Compile error var str8: String = str6! // "Hello"

An optional value fails when the optional is `nil` var str5: Optional<String> = Optional<String>() var str9: String = str5! // Runtime error

Switch

The `Switch` statement is like other languages.

Different points in Swift Not only Integers. Coverage case, all possible values. `break` statement is NOT required. Use `fallthrough` to go through explicitly

Adding other conditional statement

Switch

let country: String = "Canada" switch country { case "USA": println("USA") case "Canada": println("Canada") case "Japan": fallthrough default: println("Other") }

Tuple

var p: (x: Float, y: Float) = (1.0, 2.0) println("x: \(p.0), y: \(p.1)") println("x: \(p.x), y: \(p.y)")

Tuple with Switch

var p: (x: Float, y: Float) = (1.0, 2.0) println("x: \(p.0), y: \(p.1)") println("x: \(p.x), y: \(p.y)")

switch p { case (0, 0): println("Point is on origin.") case (_, 0): println("Point is on X-axes.") case (0, _): println("Point is on Y-axes.") case (-2...2, -2...2): println("Point is inside the box") default: println("Point is outside the box") }

Function

Use `func` keyword to declare. func myPow(x: Int, e: Int) -> Int { var d = 1 for _ in 1...e { d *= x } return d } myPow(3, 4)

``` func [Name](arg1: Type1,..) -> [Return Type] { // Procedure } ```

Protocol

protocol AProtocol { func behaviour() -> Void }

@objc protocol SomeProtocol { func behaviour() -> Void optional func optBehaviour() -> Void }

class Foo: NSObject, AProtocol { func behaviour() { } }

Protocolの詳しくは

後ほど話します

Viewer App

Viewer App

InstagramのAPIを使った簡単なViewerアプリ開発

0. アプリモック 1. 開発準備 2. 実装 3. おわりに

0. アプリモック

Specification

テーブルビューにInstagramの情報を並べる →InstagramAPI連携が必要

あるセルをタップすると、詳細のビューへ遷移する →GoogleAnalyticsを使ってViewのトラッキングをしたい

1. 開発準備

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/

https://api.instagram.com/v1/media/popular?client_id=CLIENT-ID

http://instagram.com/developer/clients/register/

http://instagram.com/developer/endpoints/


今回使用するエンドポイント 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 } */

https://api.instagram.com/v1/media/popular?client_id=CLIENT-ID

フレームワーク/ライブラリの導入

Alamofire SwiftyJSON GoogleAnalytics

フレームワークの導入

今回使用するフレームワーク

Alamofire (https://github.com/Alamofire/Alamofire) ネットワーク通信を手軽にする

SwiftyJSON (https://github.com/SwiftyJSON/SwiftyJSON) JSONデータを構造体で扱える

この２つをダウンロードかGit-Submoduleでプロジェクトフォルダへ ※今回、ライブラリ管理ツールは使用しません

https://github.com/Alamofire/Alamofire

https://github.com/SwiftyJSON/SwiftyJSON

プロジェクトへ追加

フレームワークのプロジェクトを作成しているプロジェクトへ追加

ターゲットへ追加

ターゲットにフレームワークを追加 →ターゲット選択 →General選択 →Embedded Binariesの「＋」 →追加したいフレームワーク選択

最近のXcodeならここへ追加するとBuild Phasesへ適切に設定される

フレームワークの導入

フレームワークの準備は完了

あとは使用するコードにimportするだけです

import Alamofire import SwiftyJSON

ライブラリの導入

今回使用するライブラリ（Non-フレームワーク形式）

GoogleAnalytics https://developers.google.com/analytics/devguides/collection/ios/v3/

CocoaPodsを使って導入します gemからcocoapodsをインストール（最新は0.35.0）

https://developers.google.com/analytics/devguides/collection/ios/v3/

CocoaPods - Podfile

CocoaPodsの管理ファイル<Podfile>を作成する

source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '8.0' inhibit_all_warnings!

xcodeproj 'InstagramViewer'

link_with 'InstagramViewer' pod 'GoogleAnalytics-iOS-SDK', '3.0.9'

pod install -> xcworkspace

ターミナル上で`pod install`を行いライブラリを取得する pod install

`pod install`後からはxcworkspaceファイルを開く CocoaPods側でPodsプロジェクトが作成されるため\

xcodeproj: プロジェクト単体を管理 xcworkspace: xcodeprojプロジェクトを複数管理

ブリッジングヘッダー

SwiftでObjective-Cクラスを使用するにはブリッジングが必要ブリッジングヘッダーファイルを定義する

#ifndef InstagramViewer_Objective_C_Bridging_Header #define InstagramViewer_Objective_C_Bridging_Header #import <GoogleAnalytics-iOS-SDK/GAI.h> #import <GoogleAnalytics-iOS-SDK/GAIFields.h> #import <GoogleAnalytics-iOS-SDK/GAILogger.h> #import <GoogleAnalytics-iOS-SDK/GAIDictionaryBuilder.h> #endif /* InstagramViewer_Objective_C_Bridging_Header */

※参考：http://qiita.com/kaneshinth/items/71f1c19d094e87e30a07

http://qiita.com/kaneshinth/items/71f1c19d094e87e30a07

ブリッジングヘッダー

2. 実装

実装パターン Storyboard Instagram API → データ → TableView Google Analytics

実装パターン

実装パターン（一例）

├── InstagramViewer │ ├── AppDelegate.swift │ ├── Application │ │ ├── Controllers // ViewController │ │ │ ├── DetailViewController.swift │ │ │ └── MediaListController.swift │ │ ├── Models // Logic layer │ │ │ └── MediaModel.swift │ │ ├── Requests // API Request │ │ │ └── MediaRequest.swift │ │ ├── Utilities // Utility │ │ │ └── AnalyticsUtils.swift │ │ └── Views // View, Cell │ │ └── MediaListCell.swift │ └── Objective-C-Bridging-Header.h

実装パターン

実装パターン（グループ構成）アプリケーションの規模使用するデザインパターン Observer Pattern, Reactive Pattern, MVVM, …

Storyboard

Main.storyboard

Initial View Controller

UINavigationController ViewControllerをチェーンで管理

MediaListController

UITableViewController Cellはデフォルトで使用する CellにDetailViewControllerへのSegueを設定している　

DetailViewController

UIViewController UIImageViewを設置

Segue

Segueをフックしたい場合 Segue Identifier

Segueの遷移元、遷移先を設定するときに指定

Instagram API → データ

Instagram API → データ

データ取得の流れ

1. Alamofire.Requestクラスを使用してInstagram APIへリクエスト →MediaRequestクラス

2. レスポンスのデータをSwiftJSON.JSON構造体へ →MediaRequestクラス

3. Media構造体に必要な情報をJSON構造体から取得 →MediaModelクラス

Instagram APIとの連携

JSONMedia

Media

Media

Instagram APIApp

Swifty JSON

Swifty JSON

Alamofire

MediaRequestクラス

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 APIApp

JSONMedia

Media

Media

Swifty JSON

Swifty JSON

Alamofire


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

MediaModelクラス

Media

Media

MediaSwifty JSON

Instagram APIApp

JSON

Swifty JSON

Alamofire

MediaModelクラス

3. Media構造体に必要な情報をJSON構造体から取得 → まず、Media構造体を作成

struct Caption { var username: String? var text: String? }

struct Media { var thumbnailURL: NSURL? var imageURL: NSURL? var caption: Caption? }

MediaModelクラス

Media

Media

Media

Instagram APIApp

Swifty JSON

JSON

Swifty JSON

Alamofire


3. Media構造体に必要な情報をJSON構造体から取得 → JSON構造体からMedia構造体へ let json = JSON(data: data) if let array = json["data"].array { array.map({ (elm: JSON) -> Void in var caption = Caption( username: elm["caption"]["from"]["username"].string, text: elm["caption"]["text"].string) var media = Media( thumbnailURL: elm["images"]["thumbnail"]["url"].URL, imageURL: elm["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を

多用する必要がある

(foo as? Type)

データ → UITableView

UITableView

UITableViewにて、テーブルを表示させる

UITableViewDataSource Protocol テーブル表示の構成に必要なデータを取得する UITableViewDelegate Protocol テーブルのビューやアクションをフックする

UITableViewDataSourceとUITableViewDelegateを混在しないように

UITableViewDataSource

下記は必ず実装する必要がある

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell

UITableViewDelegate

セルの高さセルの表示やタップ時の挙動セルの編集挙動セクションヘッダー/フッタービューの高さセクションヘッダー/フッタービューのビュー

MediaをUITableViewへ

Mediaを表示するには… セルの数 →MediaListの中にあるmediaの数

セルの高さ（不変？可変？） →可変ならばmediaから計算

セルの中身 →mediaから必要な情報を取得

今回のプロジェクトではInstagram APIから取得したデータはMediaModelが内部で保持している

UITableView - セルの数

MediaModelが保持している配列の中身の数

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return MediaModel.sharedInstance.mediaList.count }

UITableView - セルの高さ

可変のときを考えて、MediaListCellクラスからセルの高さを取得する

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { let media = MediaModel.sharedInstance.mediaList[indexPath.row] return MediaListCell.heightForRow(media) }

// === // MediaListCell.swift内部 class func heightForRow(media: Media) -> CGFloat { return 100.0 }

UITableView - セルの中身

"疎"にするため、MediaListCellのインスタンスへmediaを渡す

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as MediaListCell let media = MediaModel.sharedInstance.mediaList[indexPath.row] return cell.configure(media) }

MediaListCell - configure

画像データは非同期の別スレッドで取得する取得完了したら、同期でメインスレッドに戻る func configure(media: Media) -> MediaListCell { self.textLabel?.text = media.caption?.text dispatch_async( dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), { let data = NSData(contentsOfURL: media.thumbnailURL!) dispatch_sync(dispatch_get_main_queue(), { self.imageView!.image = UIImage(data: data!, scale: UIScreen.mainScreen().scale) self.setNeedsLayout() }) }) return self }

Google Analytics

Google Analytics の初期化

初期化はGAIインスタンスから`GAITracker`を取得する

var tracker: GAITracker? class func setupGoogleAnalytics() { GAI.sharedInstance().trackUncaughtExceptions = true; GAI.sharedInstance().dispatchInterval = 20 GAI.sharedInstance().logger.logLevel = .Verbose AnalyticsUtils.sharedInstance.tracker = GAI.sharedInstance().trackerWithTrackingId("UA-XXXXXXXX-X") }

Google Analytics へ送信

GoogleAnalyticsへ情報を送信 `GAITracker`の`send`メソッド

class func trackView(screenName: String) { if let tracker = AnalyticsUtils.sharedInstance.tracker { let build = GAIDictionaryBuilder.createAppView() .set(screenName, forKey: kGAIScreenName).build() AnalyticsUtils.sharedInstance.tracker?.send(build) } }

ViewWillAppearでトラッキング

作った`trackView`メソッドを必要なときに使用する

override func viewWillAppear(animated: Bool) { super.viewWillAppear(animated) let screenName = reflect(self).summary AnalyticsUtils.trackView(screenName) }

おわりに

時間があれば

聞きたいことをライブコーディングします - Delegateとか

Guide for Swift and Viewer app

Engineering