ちょっと話題の記事

iOSアプリ開発でZXing2.1を使ってQRコードを読み取る

2013.03.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

今回は、iOSアプリ開発で ZXing ライブラリを使い、URLの QRコード を読み取り、ブラウザで表示するサンプルを作ってみたいと思います。
ちなみに ZXing の概要とAndroid版については、「Android Tips #41 ZXing ライブラリ (2.1) を使って QR コードを読み取る」 を参考にしてください。

環境構築

今回は、以下の環境を使用します。

  • ZXing 2.1
  • Xcode 4.6
  • iOS SDK 6.1
  • iPod touch 5th

まず、サンプル用のプロジェクトを作成します。
「MyProject」フォルダを作成し、その中に「SampleZXing」プロジェクトを作成します
(「Single View Application」テンプレート、ストーリーボード使用、ARC使用)。

次にライブラリをダウンロードします。
http://code.google.com/p/zxing/downloads/list から ZXing-2.1.zip をダウンロードしましょう。
ダウンロードしたら、同じく「MyProject」フォルダに入れておきます。
この中の「iphone」フォルダに「README」ファイルがあり、詳しく構築手順が載っているので(英語ですが、、)、
これに沿って構築していきます。

ios_zxing_01

Xcodeのバージョンの違いからか、はまったところがいくつかあったので、スクリーンショットを多めに載せていこうと思います。

1. プロジェクトにZXingWidgetを追加する

ドラッグ&ドロップで ZXingWidget.xcodeproj をSampleZXingプロジェクトに追加します。

ios_zxing_02

2. ZXingWidgetライブラリをリンクする

下の画面の順に操作していき、ライブラリ追加ウィンドウを表示します。

ios_zxing_03

ライブラリ追加ウィンドウが表示されたら、libZXingWidget.a を追加します。

ios_zxing_04

3. Target DependenciesにZXingWidgetを追加する

これも下の画面の順に操作していき、追加ウィンドウを表示します。

ios_zxing_05

追加ウィンドウが表示されたら、ZXingWidget を追加します。

ios_zxing_06

4. Header search path を追加する その1

下の画面の順に操作していき、Header search paths../zxing-2.1/iphone/ZXingWidget/Classesrecursive で追加します。

ios_zxing_07

5. Header search path を追加する その2

同じように Header search paths../zxing-2.1/cpp/core/srcnon-recursive で追加します。

ios_zxing_08

6. フレームワークを追加する

以下のフレームワークを追加します。

  • AVFoundation
  • AudioToolbox
  • CoreVideo
  • CoreMedia
  • libiconv
  • AddressBook
  • AddressBookUI

ios_zxing_09

追加後は以下の画面のようになります。

ios_zxing_10

7. 環境構築完了

これで実装する準備がほぼ整いました。(原文は、7. You're almost ready to go ..)
とありますが、ビルドするとこんな感じに。。。

ios_zxing_11

エラーをなくすために、Other Warning Flags から -Werror を削除します。

ios_zxing_12

今度こそ、ほぼ構築完了です。

サンプルの実装

サンプルの画面を作っていきます。シンプルに読み取り画面を表示するボタンだけ配置します。

ios_zxing_13_1

次にヘッダーファイルを作成します。

ViewController.h

#import <UIKit/UIKit.h>
#import <ZXingWidgetController.h>
#import <QRCodeReader.h>

@interface ViewController : UIViewController
<ZXingDelegate>

- (IBAction)showReadViewPressed:(id)sender;

@end

インポート文、デリゲート、ハンドラを追加しましたが、ビルドするとエラーが出ました。。。

ios_zxing_14

これを直すには、ViewController.mファイルの拡張子を mm に変更し、
ViewController.mm にしてあげる必要があるようです(C++を使用しているため)。
拡張子を変更したら、処理を実装します。

ViewController.mm

#import "ViewController.h"

@interface ViewController ()
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}

- (IBAction)showReadViewPressed:(id)sender
{
    // 読み取り画面を生成します。
    ZXingWidgetController *zxingWidgetController = [[ZXingWidgetController alloc]
                                                    initWithDelegate:self
                                                    showCancel:YES
                                                    OneDMode:NO];
    QRCodeReader *qrcodeReader = [[QRCodeReader alloc] init];
    zxingWidgetController.readers = [[NSSet alloc] initWithObjects:qrcodeReader, nil];
    
    // 読み取り画面を表示します。
    [self presentViewController:zxingWidgetController animated:NO completion:nil];
}

- (void)zxingController:(ZXingWidgetController*)controller
          didScanResult:(NSString *)result
{
    // 読み取り画面を閉じます。
    [self dismissViewControllerAnimated:NO completion:nil];
    
    // ブラウザを起動します。
    [[UIApplication sharedApplication] openURL:[NSURL URLWithString:result]];
}

- (void)zxingControllerDidCancel:(ZXingWidgetController*)controller
{
    // 読み取り画面を閉じます。
    [self dismissViewControllerAnimated:NO completion:nil];
}
@end

「読み取り画面表示」ボタンタップ時には読み取り画面を表示します。
読み取り画面で、読み取り成功時には読み取り画面を閉じて、ブザウザを起動させ、
「キャンセル」ボタンタップ時には読み取り画面を閉じています。

これで、サンプル完成! と思いきや、そうはいきませんでした。
ビルドすると、またしてもエラーが出ました。今度は31個。。。

ios_zxing_15

これを直すには、Apple LLVM compiler 4.2 - LanguageC++ Language DialectC++ Standard LibraryCompiler Default にしてあげる必要があります。
下の画面の順に操作していき、修正します。

ios_zxing_16

修正するとこのようになります。

ios_zxing_17

今度こそ、サンプルの実装は完了です。

動作確認

まず、QRコードを用意します。このコードは文字列にすると http://classmethod.jp になります。

ios_zxing_18

アプリを起動します。

ios_zxing_19_1

「読み取り画面表示」ボタンをタップして、読み取り画面を表示して、QRコードを認識させます。

ios_zxing_20

ios_zxing_21

QRコードを認識した直後に、ブラウザが起動しました!

少し設定に手間がかかりましたが、なんとかできました。
ちなみに、設定周りについては、付属のサンプル(zxing-2.1/iphone/Barcodes/Barcodes.xcodeproj)が参考になります。
ZXingWidget.xcodeprojOther Warning Flags から -Werror を削除するだけで動きました。

ではでは。