１ 楽天デベロッパーIDの取得
２ 戦士情報画面の表示
３ リクエストURLの生成→XMLの取得
４ XMLパーサーの実装
５ 結果（画像とテキスト）の表示
前回はバーコードリーダを実装して、バーコードからJANコードを取得するところまでやりました。今回はJANコードから商品情報を取得する部分まで実装します。
どうやってJANコードから商品情報を取得するのか？
※JANコードってバーコードの下に書いてある数字のことね
それはショッピングサイトのAPIを利用します。
楽天、ヤフー、アマゾン何でもいいのですが、ECサイトが提供している商品検索APIをもちいてJANコード検索を行います。
では楽天、ヤフー、アマゾンどれを使うのが一番いいのでしょうか？
アマゾンは書籍がメインで、しかも商品マスタを持っており、ほぼすべての商品がJANコードを持っています。普通に考えたらアマゾンでしょう。
が、しかしアマゾンAPIはアプリには利用できません。
規約により、アマゾンAPIのモバイル端末での利用は、書面での許可なしでは利用してはいけないことになっています。アマゾンに顧客を誘導するなどメリットを与えるなら別ですが、バーコードバトラーアプリでは全くもって論外ですね。
ちなみにこの規約によって話題のアプリが消え去ったケースもあります。
Amazonが、同社のデータを使うモバイルアプリを抹殺しようとしている
じゃあヤフーか楽天ですね。
「jan」で検索して見ましょう
ヤフー：約1,268,298件
楽天 ：全 5,243,555件
楽天のが多そうですね。とりあえず楽天のAPIを利用することにしましょう。一番いいのは、楽天で検索したあとに商品が見つからなかった場合のみ、再度ヤフー検索を実施するのがいいとは思うのですが、今回は楽天のみに絞ります。
１ 楽天デベロッパーIDの取得
楽天のAPIの利用方法についてはここを参照して下さい。
楽天商品検索APIとは
デベロッパーIDが必要のようです。ここはなんの問題もないと思います。
楽天に登録すればメールでデベロッパーIDを送信してくれます。
早速リクエストURLを生成してみましょう。
以下のURLの赤文字部分を自分自身のユーザーIDにして、ウェブブラウザで見てみましょう！
http://api.rakuten.co.jp/rws/3.0/rest?developerId=[あなたのdeveloperID]&operation=ItemSearch&version=2010-09-15&keyword=9784344016897
こんな感じでXMLが表示されればオーケーです。
このXMLのなかからタグ＜itemName＞と＜smallImageUrl＞の要素を取得します。
本来検索キーワードを使用する場合、日本語をエンコードしたりしなければならないのですが、JANコードは半角数字なので、そのまま検索可能です！！これはらくちんでありがたいですな。
２ 戦士情報画面の表示
取得した商品（戦士）情報を表示するために、商品（戦士）表示画面を実装します。
編集画面とかで下からニュ〜って出てくるあの画面のことです。
全体的な流れは以下の通り。
商品（戦士）表示画面にJANコードを渡す
↓
リクエストURLの生成
↓
xmlのパース
↓
商品情報表示
↓
戦闘力の算出（次回）
↓
戦士の端末への登録処理（次回以降）
商品情報表示までを今回やります。
ではでは早速、商品（戦士）表示画面の実装を始めます。
適当にUIViewControllerのサブクラスを作成して下さい。クラス名は適当にMonsterShowViewControllerとでもしましょうか。
前回の「４つのtabに対するビューコントローラーを作成する」と全く一緒です。今回は折角ですのでXibファイルも一緒につくりましょう。
File→New→New File→UIViewController subclassを選択→NEXTをクリック→UIViewControllerを選択してWith Xib〜チェックボックスにチェック→名前をMonsterShowViewControllerにして保存
こんな感じになればオーケー。
次にMonsterShowViewController.xibファイルを編集します。
まあこんな感じで、商品名表示用のlabelと、画像表示用のUIImageViewを貼付ければオーケー
MonsterShowViewController.xib
次にMonsterShowViewController.hで使用する変数やらを宣言します。
MonsterShowViewController.h
---------------------------------------------------------------
@interface MonsterShowViewController : UIViewController {
IBOutlet UIImageView *imageView;
IBOutlet UILabel *itemName;
NSString *requestUrl;
}
@property(nonatomic,retain)UIImageView *imageView;
@property(nonatomic,retain)NSString *jancode;
@property(nonatomic,retain)UILabel *itemName;
@end
---------------------------------------------------------------
リクエスト用のURLも一緒に宣言しておきます。ちなみにIBOutletはInterfaceBuilderで使用してまっせという意味です。
.mファイル側の@synthesizeも忘れずに。まあ注意出るから言わんでもわかると思うけど。
MonsterShowViewController.h
---------------------------------------------------------------
#import "MonsterShowViewController.h"
@implementation MonsterShowViewController
@synthesize imageView;
@synthesize itemName;
@synthesize jancode;
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}
---------------------------------------------------------------
そしたら次にIB(InterfaceBuilder)を使用して、nibファイルとつなぎます。
MonsterShowViewController.xibを開いて、File's Ownerを右クリック。
imageViewとImage View
itemNameとLavel
の二つを接続。
↓
これでオーケー！！
次にこのモンスター表示画面（戦士とか呼ぶよりモンスターのがしっくりきたので）をバーコード撮影後に呼び出します。
まず呼び出し側（BarcodeScanViewController）で呼び出される側（MonsterShowViewController）のクラスをインポートします。
そしたらBarcodeScanViewControllerの撮影完了後に呼び出されるメソッド内で、MonsterShowViewControllerを呼び出してみましょう。
以下のようにします。
BarcodeScanViewController.m （didFinishPickingMediaWithInfoメソッド内）
---------------------------------------------------------------
- (void)imagePickerController:(UIImagePickerController *)reader
didFinishPickingMediaWithInfo:(NSDictionary *)info
{
id results = [info objectForKey:ZBarReaderControllerResults];
ZBarSymbol *symbol = nil;
for (symbol in results)
break;
[reader dismissModalViewControllerAnimated:YES];
NSLog(@"%@",symbol.data);
MonsterShowViewController *monsterShow = [[MonsterShowViewController alloc]initWithNibName:@"MonsterShowViewController" bundle:nil];
[self.view addSubview:monsterShow.view];
[monsterShow release];
}
---------------------------------------------------------------
これでバーコード撮影後に商品（モンスター）表示画面が表示されると思います。一応テストしてみて下さい。
３ リクエストURLの生成→XMLの取得
リクエストURLを作成して、楽天からxmlを取得してみましょう。
まず、モンスター表示クラス（MonsterShowViewController）に取得したJANコードを渡します。BarcodeScanViewController.m のdidFinishPickingMediaWithInfoメソッド内に以下のコードを付け足します。
BarcodeScanViewController.m （didFinishPickingMediaWithInfoメソッド内）
---------------------------------------------------------------
- (void)imagePickerController:(UIImagePickerController *)reader
didFinishPickingMediaWithInfo:(NSDictionary *)info
{
id results = [info objectForKey:ZBarReaderControllerResults];
ZBarSymbol *symbol = nil;
for (symbol in results)
break;
[reader dismissModalViewControllerAnimated:YES];
NSLog(@"%@",symbol.data);
MonsterShowViewController *monsterShow = [[MonsterShowViewController alloc]initWithNibName:@"MonsterShowViewController" bundle:nil];
monsterShow.jancode = symbol.data;
[self.view addSubview:monsterShow.view];
[monsterShow release];
}
---------------------------------------------------------------
これでオーケー。
次に、取得したJANコードからURLを生成するメソッドを追加します。
http://api.rakuten.co.jp/rws/3.0/rest?developerId=[あなたのdeveloperID]&operation=ItemSearch&version=2010-09-15&keyword=
の末尾にjanコードをつけ足せばいいだけですね。以下のようにします。
MonsterShowViewController.m viewDidLoadメソッド
---------------------------------------------------------------
- (void)viewDidLoad
{
[super viewDidLoad];
NSLog(@"monsterShowに渡されたjancode %@",jancode);
NSString *requestUrl;
requestUrl = [@"http://api.rakuten.co.jp/rws/3.0/rest?developerId=[あなたのdeveloperID]&operation=ItemSearch&version=2010-09-15&keyword="stringByAppendingString:jancode];
}
---------------------------------------------------------------
こんなんでオーケーなんですな。
それではリクエストを投げてみましょう。ここからは面倒ですぜ兄さん。
まず、ヘッダーファイル（MonsterShowViewController.h）で色々宣言しましょう。
MonsterShowViewController.h
---------------------------------------------------------------
@interface MonsterShowViewController : UIViewController {
IBOutlet UIImageView *imageView;
IBOutlet UILabel *itemNameLabel;
NSString *jancode;
NSMutableData *webData;
NSURLConnection *conn;
}
@property(nonatomic,retain)UIImageView *imageView;
@property(nonatomic,retain)NSString *jancode;
@property(nonatomic,retain)UILabel *itemNameLabel;
-(void) parseTag:(NSString*)requestUrl;
@end
---------------------------------------------------------------
あたらしく二つのインスタンス変数と、一つのメソッドが宣言されました。
次に実装です。以下のコードをぐばっとコピー＆ペーストしちゃって下さい。
MonsterShowViewController.m
---------------------------------------------------------------
-(void) parseTag:(NSString*)requestUrl;
{
NSURL *url = [NSURL URLWithString:requestUrl];
NSMutableURLRequest *req = [NSMutableURLRequest requestWithURL:url];
[req addValue:@"text/xml; charset=utf-8" forHTTPHeaderField:@"Content-Type"];
[req addValue:0 forHTTPHeaderField:@"Content-Length"];
[req setHTTPMethod:@"GET"];
conn = [[NSURLConnection alloc] initWithRequest:req delegate:self];
if (conn)
{
webData = [[NSMutableData data] retain];
}
}
-(void) connection:(NSURLConnection *) connection
didReceiveResponse:(NSURLResponse *) response
{
[webData setLength: 0];
}
-(void) connection:(NSURLConnection *) connection
didReceiveData:(NSData *) data
{
[webData appendData:data];
}
-(void) connection:(NSURLConnection *) connection
didFailWithError:(NSError *) error
{
//伝送中にエラーが生じた場合
[webData release];
[connection release];
}
-(void) connectionDidFinishLoading:(NSURLConnection *) connection
{
//接続が終了し、レスポンスのダウンロードに成功すると、次のconnectionDidFinishLoading:メソッドが呼び出される。
NSString *theXML = [[NSString alloc] initWithBytes: [webData mutableBytes]
length:[webData length]
encoding:NSUTF8StringEncoding];
//---shows the XML---
NSLog(@"%@",theXML);
[theXML release];
}
---------------------------------------------------------------
んで、呼び出しはこんな感じ。
MonsterShowViewController.m viewDidLoadメソッド
---------------------------------------------------------------
- (void)viewDidLoad
{
[super viewDidLoad];
NSLog(@"monsterShowに渡されたjancode %@",jancode);
NSString *requestUrl;
requestUrl = [@"http://api.rakuten.co.jp/rws/3.0/rest?developerId=[あなたのdeveloperID]&operation=ItemSearch&version=2010-09-15&keyword="stringByAppendingString:jancode];
[self parseTag:requestUrl];
}
---------------------------------------------------------------
これで完了です。（あれ意外と一瞬で終わってもうたぞ）
早速実行してみましょう。
カメラでの撮影が終了すると、コンソール上にxmlの内容が大量に表示されるはずです。
コンソールってどこー？？って人は、xcodeの右上にある
の真ん中をクリックしてみて下さい。
これでXML情報を取得するところまでは実装できました。
当初の予定ではXML内容を解析するところまでやる予定だったのですが、字数がやたら多くなってしまったので、XMLの解析は次回にまわします。
ではでは。
