Programming

(事前予習編)XMLFeedSampleを作成しました。

 Author:fumiyasac

スクリーンショット 2015-03-04 23.42.10

3/7にSwiftビギナーズ倶楽部でXMLでデータを読みこんでUITableViewで一覧表示→UIWebViewで詳細表示するサンプルにつきまして解説をする予定です。
その際に使うサンプルに関して、事前に押さえておきたいポイントを解説できればと思います。今回はXMLに関係ない部分ですけど、実務でもよく使うポイントになりますので、事前に準備しておくと良いかと思います。

1. まずは準備

今回で作成するGithubはこちらになります。
https://github.com/fumiyasac/XMLFeedSample

※1 Githubのソースの中に事前準備用のコメントや注意事項なども掲載していますので、ぜひとも参考にして頂ければと思います。

※2 Xibやセグエ等は自分で作成する必要がありますが、その他のViewController以外のクラスに関しては、コピー&ペーストで取り込んで頂いて問題ありません。

※3 今回のソースはAutoLayoutについてはキャンセルしておりますので、その点はご了承ください。

XMLのパース処理に関しては3/7までにご用意をする形にしますので、今回は事前に気をつけるべきこと等を解説しようと思います。

まずは、2つのViewControllerをそれぞれStoryBoardに配置し、対応する下記のViewControllerとの関連付けを行ってください。

  1. ViewController.swift
  2. DetailViewController.swift

ViewControllerの配置

↑上記のようにViewControllerの配置をしてあげて下さい。

2. ViewControllerで行う作業

◆ Interface Builderにて忘れずにする事前作業:

  1. ViewControllerにUITableViewを配置
  2. TableViewからDetailViewControllerへセグエを張る(segue identifierは”toDetail”)

◆ 使用API:
このサンプルでは「お菓子の虜」APIを利用しています。
http://www.sysbird.jp/toriko/webapi/

◆ 画面仕様:
ViewControllerの概要

  1. 上記APIを使用してランダムでデータを30件取得
  2. セルをタップすると詳細画面へ遷移

◆ 簡単な解説:
読み込んだXMLのデータをテーブルビューに読み込ませて表示させる部分を作っています。
読み込ませるxibファイルに関しては「5. ApiDataTableViewCell.swiftで行う作業」に記載してありますので、そちらを参考にして頂ければと思います。

3. DetailViewControllerで行う作業

◆ Interface Builderにて忘れずにする事前作業:

  1. ボタンとUIWebViewを配置する
  2. @IBActionを作った後にgoBackButtonを選択して、Touch Up Insideから線をDetail View Controllerへつなげる
  3. goback:と出たらそいつをクリックする

◆ 画面仕様:
DetailViewControllerの概要

  1. ViewControllerから渡ってきたAPIに記載されているURLを表示
  2. 戻るボタンを押すと一覧に戻ります。

◆ 簡単な解説:
前のテーブルビューから渡されたURLをWebViewで表示する部分になります。この部分に関してはよくあるサンプルかもしれませんが、良く使う部分になりますので、是非とも覚えておくと良いかと思います。

4. DeviseSize.swiftで行う作業

本コードは下記のURLのものを使用しています。
http://swift-salaryman.com/uiscreenutil.php

◆ 簡単な解説:
これはAutoLayoutをキャンセルしていますので、端末ごとのサイズ等を微調整する為に用いるクラスです。(本来はAutoLayoutを使用するのがベストだとは思うのですが、このあたりはまた別に機会があれば解説したいと思います。)

5. ApiDataTableViewCell.swiftで行う作業

◆ Interface Builderにて忘れずにする作業:

  1. ApiDataTableViewCell.xibより各ラベルのプロパティを設定
  2. xibを選択して、Custom Classを”ApiDataTableViewCell” identifierは”apiDataCell”にする

◆ 画面仕様:
ApiDataTableViewCellの概要

  1. ViewControllerのTableViewへ読み込むセルになります

※ラベルの配色やフォントの変更も可能です

◆ 簡単な解説:
xibを作成し、Stroryboard同様に追加を行っていきます。
xibとは簡単に言ってしまうと「アプリの画面を構成するパーツの配置や大きさなどを記録したファイル」でこいつを使うことによってテーブルビューのセルを少しデザインにもこだわった感じにカスタマイズをします。

xibファイルとそれに対応するクラスの追加の方法は、

  1. 右クリックで「New Flie」>「Cocoa Touch Class」と選んで下さい。
  2. 下記に示すような形で設定を行ってOK!

Xibの設定

↑Also Use XiB Flieの部分にチェックを入れてあげて下さい。

6. ViewController内の事前準備

今回はViewControllerの中にUITableViewのインスタンスを配置して、そこにXMLデータを表示していくような形になります。
ですので、このコントローラーにUITableView関連のデリゲートとNSXMLParser(XMLの処理関連)のデリゲートを設定してあげます。

ViewController.swift

  1. class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, NSXMLParserDelegate {
  2.     ...(クラス内に処理いっぱい)
  3. }

そして、TableView関連の表示で必要なものを定数・変数に設定するのとともに、XMLのデータの変数を設定します。

ViewController.swift

  1. let feedUrl : NSURL = NSURL(string:"http://www.sysbird.jp/webapi/?apikey=guest&max=30&order=r")!

クラス内に以下のXMLから取得した値を保持するクラスも一緒に設定してあげます。

ViewController.swift

  1. //XMLから取得した値を保持するだけのクラス
  2. class Item {
  3.     var name: String! //item要素の下のname要素を入れる
  4.     var maker: String! //item要素の下のmaker要素を入れる
  5.     var price: String! //item要素の下のprice要素を入れる
  6.     var type: String! //item要素の下のtype要素を入れる
  7.     var url: String! //item要素の下のurl要素を入れる
  8.     var thumb: String! //item要素の下のimage要素を入れる
  9. }

ViewDidLoad内にはUITableViewDelegate, UITableViewDataSource, NSXMLParserDelegateに関する記述とXMLのパースに関する記述をしてあげます。XMLの処理に関する記述は以下になります。

  1. //NSXMLParserクラスのインスタンスを準備
  2. var parser : NSXMLParser = NSXMLParser(contentsOfURL: feedUrl)!
  3. //XMLパーサのデリゲート
  4. parser.delegate = self
  5. //XMLパースの実行
  6. parser.parse()

ViewDidLoad内はここまでになります。
残りの記述は3/7までにご用意いたします。

※要望または加筆・修正は加えていきますので宜しくお願いします。