2015年6月24日

すぐに出来るSwift iOSアプリ開発 外部API連携編

〜為替レート確認アプリを作ってみよう〜

萩野 泰士

今回作るアプリは・・・

2

コンセプト

3

① Xcode(Swift)を利用したネイティブアプリ

②外部APIを呼出(通信を利用)

そして・・・

③誰でも作れる！！(アプリ開発に飛込もう！)

iOS

アプリ構成（全体イメージ）

4

Swift実行環境

Native App

外部API

www

REST (XML、json、etc…)

完成画面イメージ

5

利用API

6

クジラ 外国 為替 確認 API ( 為替 RSS )を利用します

参考URL： http://api.aoikujira.com/kawase/

APIの引数： フォーマット: xml, rss, ini, json, jsonp, jsonp2, csv 基本となる通貨(例): 米ドル、日本円、豪ドル、中国元、マレーシアリンギット...など その他主要な通貨はだいたいOK

APIのアドレス例： URI(XML形式): http://api.aoikujira.com/kawase/xml/usd URI(JSON形式): http://api.aoikujira.com/kawase/json/usd URI(INI形式): http://api.aoikujira.com/kawase/ini/usd URI(CSV形式): http://api.aoikujira.com/kawase/csv/usd

7

前準備

8

Xcodeを起動したら「Create a new Xcode project」を選択します。 プロジェクトテンプレート選択画面で「Single View Application」を選択します。

9

プロジェクトオプション選択画面で図の通り設定します。 プロジェクトを任意の場所に保存。今回はSource ControlはチェックOFFにします。

アプリ内にデータをストアしておきたい場合は Use Core Dataにチェックを入れる事で アプリ内の簡易DBが利用可能になります！

Product Name：Kawasekun（任意の名称でもOK） Organization Name：ご自身の名称 Organization Identifier：com.sample（任意の文字列でもOK） Language：Swift Device：iPhone Use Core Data：チェックを外す

ソース管理をGit Hubで行いたい場合は Source Controlにチェックを入れることで Git リポジトリへの同期が可能になります！

10

プロジェクト > TARGETSエリア > Deployment Target デプロイ対象とするOSバージョンを指定します。

11

CocoaPodsをインストールします。

CocoaPodsは、Objective-CやSwiftで書かれたライブラリを管理するために広く使われているツールです。AFNetworkingのインストールもこれを使います。

12

CocoaPodsは、phpで言うところのComposerに似ています。豊富で便利なライブラリがそろっているので、積極的に利用しましょう！

CocoaPodsサイト： https://cocoapods.org

$ sudo gem install cocoapods

Terminalから、右の通りコマンドを打ちます。 少し時間がかかりますがCocoaPodsのインストールが 始まります。

AFNetworkingをインストールします。

Podfileの作成 File > New > File... > iOS Other > Emptyから、プロジェクトディレクトリ直下にファイル名「Podfile」でCreate。

Podfileに設定を記載

platform :ios, "8.0" pod 'AFNetworking', '~> 2.0' pod 'AFNetworkActivityLogger', '~> 2.0'

インストール

$ cd プロジェクトディレクトリ $ pod install

AFNetworkingはObjective-Cのライブラリ HTTPネットワークライブラリで、JSONや XMLの取得解析まで行えます！

13

プロジェクトを一旦閉じて、新たに作成されたxcworkspaceファイルを開きます。

cocoa podで管理されるライブラリをインストールすると、ワークスペース内に適用されます。今回はAFNetworkライブラリが配置されました。

14

Objective-Cのクラスを使うために、bridge headerを設定します。 bridge headerは、適当なObjective-Cファイルを作成すると、（オプションで）自動で作成してくれるのでこれを利用します。

Objective-Cファイルの作成 File > New > File... > iOS Source > Objective-C Fileを、プロジェクトディレクトリ直下にCreate。

bridge headerが欲しいために作るファイルなので、ファイル名はなんでもOK（あとで削除します）

15

GroupとTargetsに注意してObjective-Cファイルを作成。

Objective-Cのbridge headerを作成するか聞かれるので「はい」（Yes）を選択。

ウィザードに従い操作を進めます。

16

Bridging-Header.hを開いて、以下を書きます

#import <AFNetworking.h> #import <UIImageView+AFNetworking.h> #import <AFNetworkActivityLogger.h>

生成されたbridge headerファイルを編集します。

bridge headerを生成するために作成したObjective-Cファイルは不要なので削除します。（残しておいても悪さはしません）

17

ログ出力の設定をします。 AppDelegate.swiftを開いて、以下を記述します。application:didFinishLaunchingWithOptions:は、アプリ起動後に呼ばれるところです。

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { AFNetworkActivityLogger.sharedLogger().level = .AFLoggerLevelDebug AFNetworkActivityLogger.sharedLogger().startLogging() return true }

18

画面

19

起動画面はここで設定できます。今回はそのままにしておきましょう。

20

メイン画面にコントロールを配置していきます。今回必要なのは次の6つです。 1. 入力テキストボックス ：為替レート変換前の通貨額入力用 2. 出力テキストボックス ：為替レート変換後の通貨額出力用 3. 入力ラベル ：上記1の説明用 4. 出力ラベル ：上記2の説明用 5. 通貨変換方向選択ボタン ：JPY→USD / USD→JPY の選択用 6. ボタン ：API呼出用

1

2

3

4

5

6

21

Segmented Controlを画面に配置します。今は場所はだいたいで構いません。

22

Labelをそれぞれ画面に配置します。こちらも場所は適当でOKです。

23

同様にText Fieldをそれぞれ画面に配置します。

24

最後にButtonを画面右下に配置します。

25

各コントロールのラベル文字を編集します。Attributes Inspectorから編集できます。

Segmented ControlはSegmentで区分を選択し、Tittleでラベル文言を設定します。

26

だいたいこんな感じになっていればOKです。

27

次に画面の大きさ、解像度に合わせてコントロールレイアウトが崩れないよう、Auto Layoutを設定していきます。 以下のイメージを頭のなかに描いて置いて下さい。

28

Segmented Controlを選択し、PinをクリックしConstrainsの設定パネルを表示します。 上マージン、左マージン、右マージンを図の通り設定しAdd 3 Constraintsを押下します。

コントロールが選択しづらい場合は、Document Outlineパネルを表示し、ツリーから選択すると良いです！

29

Auto Layoutを設定していくと図のような警告マークが出る場合があります。 その場合は、警告マークをクリックして、Update FrameによりFixしてあげます。

Auto Layoutを上手に使うコツは、手で配置する際にある程度意識した配置の仕方をする事です。 また、警告に対しUpdate FrameでFixすると、たまに意図しない場所へ自動Fixしてしまう事があります。このような場合には、一旦Constraintsを削除し、最初から設定しなおしましょう。

30

続いて他のコントロールについてもConstrainsを設定していきます。

コントロール 設定項目 設定値

変換前通貨額ラベル Spacing to nearest neighbor 左40、上65

Constrain to margins チェックを外す

Height 21

Width 140

変換後通貨額ラベル Spacing to nearest neighbor 左40、上43

Constrain to margins チェックを外す

Height 21

Width 140

警告マークに対するFrame Updateはコントロールごとに行うのが吉です！ 最後にまとめて、とやろうとすると、しばしば滅茶苦茶なレイアウトにアジャストされてしまいます。 エラーマーク（赤色）が出る場合は、同一のマージン箇所に複数の制約（Constrains）が設定されている場合がほとんどです。良く確認し、不要な方を削除してあげましょう。

31

続いて他のコントロールについてもConstrainsを設定していきます。

コントロール 設定項目 設定値

変換前通貨額テキスト Spacing to nearest neighbor 右40、上61

Constrain to margins チェックを外す

Height 30

Width 150

変換後通貨額テキスト Spacing to nearest neighbor 右40、上34

Constrain to margins チェックを外す

Height 30

Width 150

変換ボタン Spacing to nearest neighbor 右40、上50

Constrain to margins チェックを外す

Height 30

Width 50

32

ここまでで一旦ビルドしてレイアウトを確認しましょう。

ここでレイアウトが崩れるようであれば、何度か繰り返しConstraintsの設定を行います。ハマると全然決まらない場合も多々あるので、そんな時は一度Constraintsを全て削除し、最初から行うと良いでしょう。

33

オブジェクトへのアクセス

34

次に、Storyboard上に配置したオブジェクトをプログラムで制御できるよう設定していきます。 Storyboardを選択した状態でAssistant Editorを開きます。

右上のアイコンをクリックすると、Storyboardに対応したViewControllerのSwiftファイルが開きます。

35

画面(Storyboard)には、それを制御する為のViewControllerが紐付きます。ここでは、「Main.storyboard」に対し「ViewController.swift」がそうです。

Segment Controlを「control」キーを押しながら、ViewControllerのソースコード上へドロップします。

Nameには「rateSegment」と入力します。

図のように1行追加されます。

36

同様にそれぞれテキストとボタンを接続設定します。

コントロール 設定項目 設定値

変換前通貨額テキスト Name beforeText

変換後通貨額テキスト Name afterText

変換ボタン Name execButton

このようになります

今回はラベル項目は静的なのでOutlet設定しませんでしたが、動的に利用する場合他のコントロール同様Outlet設定を行って下さい。

37

ボタンはクリック（タップ）イベントが発生するのでActionの設定を行います。 Outlet同様、「control」キーを押しながら、ViewControllerのソースコード上へドロップします。（Class内、Function外の場所へ）

図のように関数が追加されます。

Nameには「execButtonTapped」、Typeには「UIButton」と入力します。

38

処理の実装

39

40

一気に行きます！以下を実装します。 ① テキストフォーカス時に数値入力キーボードを表示 ※デフォルトはqwertyキーボード ② 変換ボタンタップ時にキーボードを閉じる ※デフォルトでは表示されたまま ③ API呼出関数の作成 全てViewControllerに実装していきます。Viewには必ずControllerと呼ばれる実装クラスが紐付きます。設計次第ですが、複数Viewを作成する場合は、ViewごとにControllerを分けた方がソースの可読性、メンテナンス性が高くなると思います。

override func viewDidLoad() { super.viewDidLoad() // 数値キーボードを指定する self.beforeText.keyboardType = UIKeyboardType.NumberPad self.afterText.keyboardType = UIKeyboardType.NumberPad } 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 @IBAction func execButtonTapped(sender: UIButton) { // キーボードを閉じる beforeText.resignFirstResponder() afterText.resignFirstResponder() }

では先ずキーボード関連から。 ViewControllerのviewDidLoadに数値キーボード指定と、ボタンタップ時のキーボード非表示処理を下記の通りコーディングします。

41

続いて、API呼出関数の実装です。 ViewControllerのClass内最下部に、下記の通りコーディングします。

func getExchangeRate(){ if rateSegment.selectedSegmentIndex == 0 { // 為替レートAPIの呼出(JPY=>USD) AFHTTPSessionManager().GET( "http://api.aoikujira.com/kawase/json/jpy", parameters: nil, success: { (task: NSURLSessionDataTask!, response: AnyObject!) -> Void in if let data = response as? NSDictionary { // Dictionary型のデータから”JPY"の値を取得 let txtRate = data["USD"] as! NSString // 各値をDouble型へキャストし計算 let dblRate = txtRate.doubleValue let bfrVal = (self.beforeText.text as NSString).doubleValue // レート換算後の数値を出力 self.afterText.text = toString(dblRate * bfrVal) } }, failure: nil ) --- 右へ続く

--- 左からの続き } else if rateSegment.selectedSegmentIndex == 1 { // 為替レートAPIの呼出(USD=>JPY) AFHTTPSessionManager().GET( "http://api.aoikujira.com/kawase/json/usd", parameters: nil, success: { (task: NSURLSessionDataTask!, response: AnyObject!) -> Void in if let data = response as? NSDictionary { // Dictionary型のデータから”JPY"の値を取得 let txtRate = data["JPY"] as! NSString // 各値をDouble型へキャストし計算 let dblRate = txtRate.doubleValue let bfrVal = (self.beforeText.text as NSString).doubleValue // レート換算後の数値を出力 self.afterText.text = toString(dblRate * bfrVal) } }, failure: nil ) } else { // 今回はなにもしない } }

42

SwiftではStringには文字列を整数に変換する

「toInt」という関数はあっても、小数に変換する「toDouble」という関数がありません。 そのため、今回は文字列をObj-CのNSStringにし、txt.doubleValue使えるようにします。

42

43

最後に、ボタンタップ時に先ほど実装したAPI呼出関数をコールします。 ViewControllerのexecButtonTapped内に、下記の通りコーディングします。

@IBAction func execButtonTapped(sender: UIButton) { // キーボードを閉じる beforeText.resignFirstResponder() afterText.resignFirstResponder() // 為替レートAPIの呼出 getExchangeRate() }

動作確認

44

45

ではビルド、エミュレータで実行してみましょう！ 今回はiPhoneアプリなので、ビルドターゲットがiPhone6になっていることを確認し、runボタンをクリックします。

今回のポイント

46

47

Nativeアプリである理由

・2015年現在、スマホ利用者の7〜8割がWebよりAppを利用 ・利用可能なデバイス連携APIの多さ ・UI/UXの自由度の高さ ・処理速度の速さ ・ハイブリッドも結局Nativeアプリの上で動いている

48

技術ポイント

・外部API（JSON）の呼出、取得、パース ・Objective-Cのライブラリ利用（Bridge Headerとか） ・Auto Layoutの活用 ・OutletとDelegate ※今回はDelegateは未使用 ・Swiftが未対応な処理へのObjective-Cメソッドの活用

49

Good Luck C

50

PROFILE

萩野 泰士 （HAGINO Taiji） 三井情報株式会社 R&D部 担当：モバイル、フロントエンド、Web モバイルに主軸を置いたフルスタックエンジニアを目指し日々奔走中！

taipon.rock

@taipon_rock