iTunes APIとは

登録不要で使えて、例えば、

https://itunes.apple.com/search?term=beatles&country=JP&lang=ja_jp&media=music

で、「beatles」を検索すると、

{
  "resultCount":50,
  "results": [
    {
      "wrapperType":"track", 
      "kind":"song", 
      "artistId":136975, 
      "collectionId":458032395, 
      "trackId":458032429, 
      "artistName":"ビートルズ", 
      "collectionName":"1", 
      "trackName":"Let It Be", 
      "collectionCensoredName":"1", 
      "trackCensoredName":"Let It Be", 
      "artistViewUrl":"https://itunes.apple.com/jp/artist/bitoruzu/id136975?uo=4", 
      "collectionViewUrl":"https://itunes.apple.com/jp/album/let-it-be/id458032395?i=458032429&uo=4", 
      "trackViewUrl":"https://itunes.apple.com/jp/album/let-it-be/id458032395?i=458032429&uo=4", 
      "previewUrl":"http://a1770.phobos.apple.com/us/r1000/059/Music4/v4/cf/b4/36/cfb43624-f3e0-269f-f81a-911f9876732c/mzaf_4722855266064184302.plus.aac.p.m4a", 
      "artworkUrl30":"http://is5.mzstatic.com/image/pf/us/r30/Features/85/fe/95/dj.kfrgxzbp.30x30-50.jpg", 
      "artworkUrl60":"http://is4.mzstatic.com/image/pf/us/r30/Features/85/fe/95/dj.kfrgxzbp.60x60-50.jpg", 
      "artworkUrl100":"http://is1.mzstatic.com/image/pf/us/r30/Features/85/fe/95/dj.kfrgxzbp.100x100-75.jpg", 
      "collectionPrice":2000.00, 
      "trackPrice":250.00, 
      "releaseDate":"2000-11-13T08:00:00Z", 
      "collectionExplicitness":"notExplicit", 
      "trackExplicitness":"notExplicit", 
      "discCount":2, 
      "discNumber":1, 
      "trackCount":27, 
      "trackNumber":26, 
      "trackTimeMillis":230773, 
      "country":"JPN", 
      "currency":"JPY", 
      "primaryGenreName":"ロック"
    }, {
      ...
    }, {
      ...
    }
  ]
}

が返ってきます。

今回は、

trackName（曲や動画のタイトル）
artistName（アーティスト名）
artworkUrl100（アートワーク画像URL）
previewUrl（曲や動画の試聴用データURL）

あたりを使って、iOSアプリを作ってみます。

CocoaPodsをインストールする

CocoaPodsは、Objective-CやSwiftで書かれたライブラリを管理するために広く使われているツールです。AFNetworkingのインストールもこれを使います。すでにインストールされている場合は飛ばしてください。
https://cocoapods.org

$ sudo gem install cocoapods

プロジェクトを作成する

Xcodeを開きます。以下のWelcome to Xcodeな画面が表示される場合はCreate a new Xcode Project、表示されない場合はメニューバーからFile > New > Project...。

Product Nameはアプリ名です。Organization Nameは個人名や会社名です。Organization Identifierは、世界でユニークな識別子を書く必要があり、普通は会社やサービスのドメインの逆順ですが、サンプルなので適当でOKです。Languageは今回はSwiftを使います。Devicesは今回はiPhoneを使いますが、Universalを使うとiPhoneとiPadを両方対応したアプリになります。Core DataはローカルDBの一種で今回は使いません。

適当な場所に保存してください。後でターミナルやFinderでプロジェクトディレクトリまで移動しますので、場所を覚えておいてください。

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

xcworkspaceファイルからプロジェクトを開き直す

Xcodeを閉じます。Finderでプロジェクトディレクトリに移動して、xcworkspaceファイルを開きます。
プロジェクトを作成するとxcodeprojファイルが作成され、pod installするとxcworkspaceファイルが作成されます。CocoaPodsでライブラリ管理しているプロジェクトは、xcodeprojファイルではなく、xcworkspaceファイルから開きます。

AFNetworkingを設定する

Objective-Cのクラスを使うために、bridge headerを設定する

File > New > File... > iOS Source > Objective-C Fileから、適当なObjective-Cのファイルを作ると、bridge headerを自動設定できます（Yesを選択）。自分で名付けたファイルの他に、プロジェクト名-Bridging-Header.hが作成されて、これがbridge headerです。作ったObjective-Cのファイル（hファイルとmファイル）は不要なので、fn + deleteで消しちゃっていいです（Move to Trashを選択）。手動でやってもいいけど、やり方を忘れるので、この方法が楽です。

bridge headerにimportを書く

プロジェクト名-Bridging-Header.hを開いて、以下を書きます。

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

ログを出力する設定を書く

AppDelegate.swiftを開いて、以下を書きます。application:didFinishLaunchingWithOptions:は、アプリの起動が終わったら呼ばれるところです。

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

iTunes APIと通信して、結果を一覧画面に表示する

StoryboardにUINavigationControllerとUITableViewControllerを追加する

Main.storyboardを開きます。もともと書かれているViewControllerは消しちゃってください（放置しててもいいですけど）。

NavigationControllerを選択して、Initial View Controllerに設定します。Initial View Controllerは、このStoryboardにおける最初のViewControllerになります。左端に、切れた矢印が付いているのがInitial View Controllerです。

UITableViewControllerにUISearchBarを追加する

ListViewControllerを作る

File > New > File... > iOS Source > Cocoa Touch Classから作成します。

Main.storyboardを開いて、ListViewControllerをUITableViewControllerのCustom Classに設定します。

CellのreuseIdentifierを設定する

ListViewControllerにUISearchBarのoutletを繋ぐ

これを押して、Editorを2ペイン表示にします。左ペインにStoryboardを表示しているときは、右ペインに対応するViewController or Viewのソースファイルが表示されます。

黒ポチにマウスオーバーすると、outletしてるViewがハイライトします。

ListViewControllerに検索結果を覚えておくプロパティを追加する

ListViewController.swiftを開いて、以下を追加します。

class ListViewController: UITableViewController {

    private var results: [NSDictionary]?
}

UISearchBarDelegateを使って、検索の処理を実装する

ListViewController.swiftの一番下に以下を追加します。

extension ListViewController: UISearchBarDelegate {

    // searchBarのSearchボタンをタップしたときの処理
    func searchBarSearchButtonClicked(searchBar: UISearchBar) {
        searchBar.resignFirstResponder() // キーボードを閉じる

        // url encode　例. スピッツ > %83X%83s%83b%83c
        let text = searchBar.text.stringByAddingPercentEncodingWithAllowedCharacters(NSCharacterSet.URLQueryAllowedCharacterSet())
        if let text = text {
            AFHTTPSessionManager().GET(
                "https://itunes.apple.com/search?term=\(text)&country=JP&lang=ja_jp&media=music",
                parameters: nil,
                success: { (task: NSURLSessionDataTask!, response: AnyObject!) -> Void in
                    if let data = response as? NSDictionary, results = data["results"] as? [NSDictionary] {
                        self.results = results
                        self.tableView.reloadData() // 再描画
                    }
                },
                failure: nil)
        }
    }
}

ListViewControllerをUISearchBarのdelegateに設定する

検索結果を表示する処理（UITableViewDetaSource）を実装する

ListViewController.swiftには、同じメソッドがすでに書かれていますので、そこに追加してください。コメントアウトされている場合は、コメントを外して書きます（「/*」と「*/」を消します）。

セクション数（Contactでいうところの「あ」「か」「さ」などにあたる部分）は1つだけ使います。

   override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        // #warning Potentially incomplete method implementation.
        // Return the number of sections.
        return 1
    }

行数は検索結果の個数です。検索結果がない場合（まだ検索していない場合）は0です。

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete method implementation.
        // Return the number of rows in the section.
        return results?.count ?? 0
    }

行に表示するセルを準備します。

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! UITableViewCell
        if let result = results?[indexPath.row] {
            cell.textLabel?.text = result["trackName"] as? String
        }
        return cell
    }

実行してみましょう

シミュレータが大きくて画面からはみ出す場合は、command + 2〜command + 5で小さくなります。command + 1で原寸に戻ります。

一覧画面のセルをカスタマイズする、画像も表示する

UIImageViewやUILabelをUITableViewCellに配置する

ListCellを作成する

ListViewController.swiftを開いて、一番下に追加します。新しいswiftファイルを作ってもいいです。

class ListCell: UITableViewCell {
}

Main.storyboardを開いて、ListCellをUITableViewCellのCustom Classに設定します。

ListCellにUIImageViewやUILabelのoutletを繋ぐ

残り2つも同様に。

セルを準備する処理も変更する

ListViewController.swiftを開いて、先ほど書いた処理のセルを準備する部分（tableView:cellForRowAtIndexPath:）を、以下の様に書き換えます。

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! ListCell
        if let result = results?[indexPath.row] {
            if let artworkUrl = result["artworkUrl100"] as? String {
                cell.artworkImageView.setImageWithURL(NSURL(string: artworkUrl))
            } else {
                cell.artworkImageView.image = nil
            }
            cell.trackLabel.text = result["trackName"] as? String
            cell.artistLabel.text = result["artistName"] as? String
        }
        return cell
    }

Auto Layoutを設定する

Auto Layoutを設定すると、デバイス（3.5 inch, 4 inch, 4.7 inch, 5.5 inch, iPad...）や縦横によって変わる画面サイズに合わせて、その制約に基づいて配置してくれます。

今回、設定するAuto Layoutのイメージはこんな感じです。加えて、UIImageViewの上下左は0 pxです。それ以外の記載のないところはフリーになっています。UIImageViewの位置やサイズは常に固定で、2つのUILabelの幅が伸び縮みするようになります。

UIImageViewの上下左をCellから0 pxの距離に固定、幅と高さを44 pxに固定します。

上のUILabelの上をCellから4 pxの距離に固定、右を8 pxの距離に固定します。

UIImageViewと上のUILabelの間の水平距離を8 pxに固定します。

下のUILabelの下をCellから4 pxの距離に固定、右を8 pxの距離に固定します。

UIImageViewと下のUILabelの間の水平距離を8 pxに固定します。

Auto Layoutとプレビューに矛盾があるため、警告（黄色の矢印）が表示されています。警告をクリックして、Auto Layoutに合わせてプレビューを自動修正します。

Update Frameは、Auto Layoutに合わせてプレビューを自動修正します。Update Constraintsは、プレビューに合わせてAuto Layoutを自動修正します。Update ConstraintsでAuto Layoutの方を自動修正されるとわけがわからなくなるので、自分でAuto Layoutを正しく設定した後でUpdate Frameでプレビューを自動修正させた方がいいです。

Auto Layoutが不足している、重複しているAuto Layoutがある、Auto Layout同士が矛盾している、などの場合は、警告（黄色の矢印）ではなく、エラー（赤色のバツ）が表示されます。エラーの状態によっては、Xcodeが修正案を提案してくれますが、どこが自動修正されたのかよくわからず、正しく動かない場合もあるので、自分で全て設定した方がいいです。わけがわからなくなった場合は、面倒くさいですが、一度Auto Layoutを削除して、設定し直します。

実行してみましょう

command + ←とcommand + →でシミュレータが回転します。標準設定では、逆さ位置は無効になっているので、回転して逆さにすると、直前の横のままの画面が表示されます（4方向のうち、どこを有効するかは設定可能）。

詳細画面に遷移して、試聴する

StoryboardにAVPlayerViewControllerを追加する

Main.storyboardを開きます。

UITableViewCellからAVPlayerViewControllerへsegue（show）をつなぐ

矢印をクリックしてハイライトしてるときに、同時にCell全体がハイライトされていれば正しく接続されています。UILabelなど、Cellの一部がハイライトしている場合は、矢印をdeleteで消してやり直し。

Cellが掴みづらいときは、こっちの方法でもOK。

DetailViewControllerを作る

File > New > File... > iOS Source > Cocoa Touch Classから作成します。

DetailViewController.swiftを開いて、AVFoundationとAVKitのimportを追加します。

import UIKit
import AVFoundation
import AVKit

class DetailViewController: AVPlayerViewController {

}

Main.storyboardを開いて、DetailViewControllerをAVPlayerViewControllerのCustom Classに設定します。

DetailViewControllerにデータを渡す

DetailViewController.swiftを開いて、以下のプロパティを追加します。

class DetailViewController: AVPlayerViewController {

    var trackName: String!
    var previewUrl: String?
}

ListViewController.swiftを開いて、ListViewControllerからDetailViewControllerのプロパティを設定します。prepareForSegue:sender:は、segue（≒ 画面遷移）が実行される前に呼ばれるところです。おそらく下の方に、もともとコメントアウトされて書かれてますので、コメントを外して書いてください（「/*」と「*/」を消します）。

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
    if let vc = segue.destinationViewController as? DetailViewController {
        if let indexPath = tableView.indexPathForSelectedRow(), result = results?[indexPath.row] {
            vc.trackName = result["trackName"] as! String
            vc.previewUrl = result["previewUrl"] as? String
        }
    }
}

AVPlayerを使って再生する

DetailViewController.swiftを開いて、以下を追加します。viewDidLoadは、ViewControllerの準備ができたら呼ばれるところです。

class DetailViewController: AVPlayerViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        title = trackName // title設定

        if let previewUrl = previewUrl {
            player = AVPlayer(URL: NSURL(string: previewUrl))
            player.play() // 自動再生
        }
    }
}

実行してみましょう

おわり。お疲れさまでした。

完成品はここにあります

https://codebreak.com/git/kenchan1837/iTunesMusicSearch/
CocoaPodsをインストールして、ターミナルでプロジェクトディレクトリに移動してpod installして、Finderでプロジェクトディレクトリに移動してxcworkspaceファイルからXcodeを起動して、再生ボタンを押したら動きます。

iTunes APIを使ったiOSアプリハンズオン（Swift）

iTunes APIとは

CocoaPodsをインストールする

プロジェクトを作成する

AFNetworkingをインストールする

Podfileを作成する

Podfileに設定を書く

インストールする

xcworkspaceファイルからプロジェクトを開き直す

AFNetworkingを設定する

Objective-Cのクラスを使うために、bridge headerを設定する

bridge headerにimportを書く

ログを出力する設定を書く

iTunes APIと通信して、結果を一覧画面に表示する

StoryboardにUINavigationControllerとUITableViewControllerを追加する

UITableViewControllerにUISearchBarを追加する

ListViewControllerを作る

CellのreuseIdentifierを設定する

ListViewControllerにUISearchBarのoutletを繋ぐ

ListViewControllerに検索結果を覚えておくプロパティを追加する

UISearchBarDelegateを使って、検索の処理を実装する

ListViewControllerをUISearchBarのdelegateに設定する

検索結果を表示する処理（UITableViewDetaSource）を実装する

実行してみましょう

一覧画面のセルをカスタマイズする、画像も表示する

UIImageViewやUILabelをUITableViewCellに配置する

ListCellを作成する

ListCellにUIImageViewやUILabelのoutletを繋ぐ

セルを準備する処理も変更する

Auto Layoutを設定する

実行してみましょう

詳細画面に遷移して、試聴する

StoryboardにAVPlayerViewControllerを追加する

UITableViewCellからAVPlayerViewControllerへsegue（show）をつなぐ

DetailViewControllerを作る

DetailViewControllerにデータを渡す

AVPlayerを使って再生する

実行してみましょう

完成品はここにあります