バーコードバトラーアプリ制作過程〜バーコードリーダー実装〜

バーコードバトラーアプリ制作過程三回目です。（第二回はこちら）
今回はバーコードリーダーを実装したいと思います。

バーコードリーダーの実装にはZbar bar code readerを使用します。
以下のサイトを参考にしました。
「ZBar SDK」を使ってみる　ーI Lib Keep

ではでは始めましょう。全体的な流れは以下の通りです。
１　ZBarSDKダウンロード
２　ダウンロードしたSDKフォルダのプロジェクトへの追加
３　その他Frameworkのプロジェクトへの追加
４　スキャン処理の実装
５　シミュレータによるテスト

１　ZBarSDKダウンロード
まずはZbar 公式サイトの「Download the ZBar iPhone SDK 1.1」よりZbarSDKをダウンロードします。以上！

２　ダウンロードしたSDKフォルダのプロジェクトへの追加
ダウンロードしたZBarSDK-1.1.dmgファイルを選択すると以下のウィンドウが表示されると思います。

そしたら指示取りにZBarSDKフォルダをXcodeのプロジェクトにドラッグします。

ここにぶち込みます

そうすると以下のように聞かれますので、

グループフォルダにコピーをチェック

グループを作成にチェック

ダーゲットにCodeFighterを設定

してFinishを選択します。どーん！

３　その他Frameworkのプロジェクトへの追加

つぎに必要なFrameworkを追加します。

■AVFoundation.framework (weak)

■CoreMedia.framework (weak)

■CoreVideo.framework (weak)

■QuartzCore.framework

■libiconv.dylib

この５つですね。Read this Firstにもこいつら入れろって書いてありますね。

左のグループ内、一番上の青いアイコンCodeFighterをクリックします
次にTARGETS内のCodeFighterをクリックします。
んでBuilds Phasesを選択
Link Binary With Librariesを選択
ここでフレームワーク追加できます。

ここにある＋をクリックすると追加できるフレームワークの一覧が表示されます。

ここで先ほどの５つ

■AVFoundation.framework (weak)

■CoreMedia.framework (weak)

■CoreVideo.framework (weak)

■QuartzCore.framework

■libiconv.dylib

をバンバンaddしちゃってください。

これでZbarを使用する準備が整いました。


４　スキャン処理の実装
まずはBarcodeScanViewControllerにスキャン用のボタンを設置します。
前回ラベルを作成した部分、viewDidLoadメソッドにボタン設置のコードを書きます。

BarcodeScanViewController.m
--------------------------------------------------------------

- (void)viewDidLoad
{
    [super viewDidLoad];
    UILabel *namelabel = [[UILabel alloc] init];
    namelabel.frame = CGRectMake(80, 10, 200, 50);
    namelabel.text = @"僕はbarcodeScanViewControllerだよ";
    namelabel.textColor = [UIColor blueColor];
    namelabel.font = [UIFont fontWithName:@"AppleGothic" size:12];
    [self.view addSubview:namelabel];
}

--------------------------------------------------------------

こうなっている部分を以下のように書き換えます。
前回記述したラベルの表示部分は消してしまいましょう。

BarcodeScanViewController.m

--------------------------------------------------------------

- (void)viewDidLoad
{
    [super viewDidLoad];
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    btn.frame = CGRectMake(10, 200, 300, 30);
    [btn setTitle:@"バーコードスキャン" forState:UIControlStateNormal];
    // ボタンがタッチダウンされた時にscanButtonTappedメソッドを呼び出す
    [btn addTarget:self action:@selector(scanButtonTapped:)forControlEvents:UIControlEventTouchDown];
    [self.view addSubview:btn];
}
--------------------------------------------------------------

これでボタンを押したときに、scanButtonTappedメソッドが呼ばれることになります。
scanButtonTappedは自身で記述する必要があります。
記述する場所はどこでもかまわないのですが、viewDidLoadメソッドの真下にでも書いちゃいましょう。

スキャンボタンが押されたときのアクションを以下のように記述します。

BarcodeScanViewController.m

--------------------------------------------------------------

-(void)scanButtonTapped:(UIButton*)button
{
    UIAlertView *alert =[[UIAlertView alloc] initWithTitle:@"確認"
                                                   message:@"スキャンボタンがタップされました"
                                                  delegate:self
                                         cancelButtonTitle:@"確認"
                                         otherButtonTitles:nil];
    [alert show];
}

--------------------------------------------------------------

これでボタンが押されたときに、アラートが表示されるようになっていると思います。

これでボタンが実装できました。

それではいよいよ本題であるバーコード読み取り部分を実装してみましょう。

なにをするのか？？

「ZBar SDK」を使ってみる　ーI Lib Keep

に記載のあるコードをそのまま使っちゃいましょう！！

必殺コピペです！！

先ほどボタンがタップされたときに呼ばれるメソッド、scanButtonTappedでアラートが表示されるようにしましたが、ここを書き換えます。（そんなすぐ書き換えるなら始めからやれよって？？まあそうなんですけど…）

BarcodeScanViewController.m

--------------------------------------------------------------

-(void)scanButtonTapped:(UIButton*)button

{

    ZBarReaderViewController *reader = [[ZBarReaderViewController alloc] init];

    reader.readerDelegate = self;

    

    ZBarImageScanner *scanner = reader.scanner;

    

    [scanner setSymbology:ZBAR_I25

                   config:ZBAR_CFG_ENABLE

                       to:0];

    

    [self presentModalViewController:reader

                            animated:YES];

    

    [reader release];

}

--------------------------------------------------------------

このように書き換えます。

コピー＆ペースト素晴らしいですね！

しかしこいつを貼付けた直後に大量にエラーが表示されたと思います。

なぜ？？

これはZbarを使えるようにimportしてないからなんですね。

そういうわけで、ZBarSDK.hをインポートします。

わざわざ説明するまでもないですが、こんな感じで。

BarcodeScanViewController.h

--------------------------------------------------------------

#import 

#import "ZBarSDK.h"

@interface BarcodeScanViewController : UIViewController

{

}

@end

--------------------------------------------------------------
※UIKitのインポートがなぜか消える…

すると赤いエラーがつらつら消えます。気持ちいいですね。
と思いきやまだ
reader.readerDelegate = self;
あたりに黄色くエラーが出とります。
デリゲートがなんちゃら言うとりますね。


BarcodeScanViewController.h
--------------------------------------------------------------
#importarSDK.h"

@interface BarcodeScanViewController : UIViewController

＜ZBarReaderDelegate＞

{

}

@end

#import "ZB

--------------------------------------------------------------

※UIKitのインポートがなぜか消える…
※＜＞が大文字になっています。コピペの際はご注意を

これで解決です。
これでカメラが起動してバーコードを勝手に取ってくれるカメラ機能の実装が完了しました。
次に、撮影が完了したあとのメソッドを実装します。
これも
「ZBar SDK」を使ってみる　ーI Lib Keep
のコードをコピペしちゃいましょう。
結果表示の部分は先ほど使用したアラート表示を使用しています。

またまた適当なところ（scanButtonTappedメソッドの真下あたりにでも）以下のコードをコピペします。

BarcodeScanViewController.m

--------------------------------------------------------------

- (void)imagePickerController:(UIImagePickerController *)reader
didFinishPickingMediaWithInfo:(NSDictionary *)info
{
    id results = [info objectForKey:ZBarReaderControllerResults];
    ZBarSymbol *symbol = nil;
    
    for (symbol in results)
        break;
    
    UIAlertView *alert =[[UIAlertView alloc] initWithTitle:@"スキャン完了" 
                                                   message:symbol.data
                                                  delegate:self 
                                         cancelButtonTitle:@"確認" 
                                         otherButtonTitles:nil];
    [alert show];
    
    [reader dismissModalViewControllerAnimated:YES];
}
--------------------------------------------------------------

スキャンの結果のJANコードがsymbol.dataで取れていることがわかりますね。
早速シミュレーターを起動してみましょう。

５　シミュレータによるテスト
スキャンボタンを押してみると…

げげっなんじゃこりゃあ！！
となったと思います。

大丈夫ミスってはおりませぬ。

この画面になったらaltキーを押しながら画面を長押しして見て下さい。

つぎのようにカメラロールから画像を選択する画面に切り替わったと思います。
もちろんシミュレータのカメラロールに画像なんて入っていませんね。

次の画像をデスクトップにでも保存して起動中のシミュレーターにドラック＆ドロップして下さい。

そしたらブラウザが立ち上がりますので、画像を長押ししてください。保存するかどうか聞かれますので、ここで保存。これでシミュレーターに画像が保存されました。（一回でなぜか保存されない場合があるので、そのときは何度か挑戦してみてください）

そしたら再度CodeFighterアプリを起動して、スキャンボタンをタップして、alt+左クリック長押しでカメラロールを起動。保存したバーコードを選択してみてください。

つぎのように表示されればオーケーです。
これでバーコードからJANコードを取得するところまで実装できました。

感無量ですな。

JANコードが取れるとそれだけで色々できることがあるので、いろいろと活用していただけたらと思います。

すこしつかれたお。

続き「バーコードバトラーアプリ制作過程〜第4回楽天APIの利用、XMLパーサーとか〜」