何かやってみるブログ

興味をもったことに関して書いています。技術系の記事が多いです。

expo(ReactNative)でバーコードから本を検索する(前編) 〜BarCodeScannerを試すまで〜

最近、Expoのドキュメントを見ていたらバーコードスキャンのライブラリを発見しました。 ただバーコードをスキャンしても面白くないので今回は楽天ブックス総合検索APIを使用して本の検索機能を実装してみます。

docs.expo.io

まず、Expoで今回は試したいだけなので、Managed workflowblankモードでリポジトリを作成します。 また、シュミレーターはiOSを使います。 ※カメラを使用するので、実機(iPhone)も使います。

環境構築

% expo init barcode-sandbox
? Choose a template: expo-template-blank
Using Yarn to install packages. You can pass --npm to use npm instead.
Extracting project files...
Customizing project...
Initialized a git repository.
Installing dependencies...
> yarn install
・
・
To get started, you can type:

  cd barcode-sandbox
  yarn start

% cd barcode-sandbox
% yarn start --ios 

以下のようにシュミレーターがたちあがれば環境構築は終わりです。

f:id:s-takaya1027:20200322093216p:plain

バーコード機能を試してみる。

さっそく、今回試すライブラリであるexpo-barcode-scannerをインストールしていきます。

% expo install expo-barcode-scanner

ドキュメントをざっくり読むと、ユーザーのカメラを使用する許可を求めるライブラリが必要なので、Permission APIをインストールしていきます。

% expo install expo-permissions

サンプルコードがあるのでとりあえず、コピペして使ってみます。 https://docs.expo.io/versions/latest/sdk/bar-code-scanner/#usage

カメラを使うとシュミレーターで確認できないようなので、シュミレーターで確認してみます。

f:id:s-takaya1027:20200322100010p:plain

左下のバーコードを読み取ってexpo clientを使用して実機で確認してます。 Permissionを許可をすると、カメラが起動します。

今回は本の検索機能を実装したいので、本のバーコードを読み取ってみます。 読み取る本はこれです。

蛇足ですが、この本は自炊初心者にピッタリの本だと思うので自炊にチャレンジしてみたい方におすすめです。後でレビュー記事を書きます。

本の上下にバーコードがありますが、本の上の方のバーコードを読み取るとISBNコードが読み取れるそうなので上のバーコードが読み取ってみます。

bloodandsugar.hatenablog.com

f:id:s-takaya1027:20200322110244p:plain

アラートが成功です。

後半はこちらです。

www.takayasugiyama.com