ブラウザでバーコード/QRコードリーダー【環境構築編】

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/76058/90847234-4290-13fc-50c5-f863245c5048.png)


## やりたいこと

- WebCodeCamJSというライブラリをベースにバーコードリーダーを実装する。
- クライアントサイドで動作するため、サーバに余計な負荷をかけない。
- Dockerとdocker-composeを使って手軽な動作テスト環境を作る。

- WebCodeCamJSをカスタマイズさせて、より使いやすくする。
- チェックデジットを自前で実装して、より誤検出をへらす。
- 手軽にテスト動作させてみたい。

## 環境

MacOS 10.13.6
Docker for Mac 18.06.0
docker-compose version 1.22.0

Macを使ってますが、windows用も記載しています。

## HTTPSでアクセス出来る環境を使う

WebRTCを利用するので、localhostもしくはHTTPSでの接続が出来るようにします。
iOSでも使ってみたいので、プロキシを立てる方向で。
下記の環境をベースに使わせてもらいました。

> [Dockerでlocalhostにhttpsアクセスできるプロキシを立てる](https://esplo.net/2017/09/docker-local-ssl/)

### ベースの環境から使いやすいように書き換える

まず、以下をダウンロードするなりgitを使ったりしてローカルに展開しておきます。

[GitHub - esplo/docker-local-ssl-termination-proxy: A simple SSL Termination Proxy for localhost](https://github.com/esplo/docker-local-ssl-termination-proxy)

### フォルダの作成

ベースの環境を適当なところに展開したらディレクトリを作成
多分Mac、Win共通のコマンド

```bash:command
# 展開したフォルダ内へ移動
cd 作業用フォルダ
# フォルダ作成
# nginxの設定を入れておくフォルダ
mkdir web
# htmlとか入れておくフォルダ
mkdir htdocs
```

### 各ファイルを書き換え

#### docker-composeを書き換え

docker-compose.ymlを以下に置き換え。
ちなみに、PHPと書いてますが、別にPHPがないと動作しないわけではなく、単に自分の環境で使いたかっただけです。

```yaml:docker-compose.yml
version: "3"
services:

  proxy:
    build: .
    ports:
      - ${ACCESS_PORT}:443
    expose:
      - ${ACCESS_PORT}
    environment:
      - PORT=${PORT}
      - HOST_IP=${HOST_IP}
    
  web:
    image: nginx:1.13.5-alpine
    depends_on:
    - app
    ports:
    - "${PORT}:80"
    volumes:
    - ./web/default.conf:/etc/nginx/conf.d/default.conf
    - ./htdocs:/var/www/html

  app:
    image: php:7.1.9-fpm-alpine
    volumes:
    - ./htdocs:/var/www/html
```

#### config

先程作成した`./web`フォルダに`default.conf`という名前で以下の内容を保存。

```config:default.conf
server {
    listen 80;
    server_name _;
    root  /var/www/html;
    index index.php;

    access_log /var/log/nginx/access.log;
    error_log  /var/log/nginx/error.log;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(\.+)$;
        fastcgi_pass app:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}
```

#### dockerを動作させるコマンドファイル

docker-composeを動作させるコマンドを予め書いておいて、ダブルクリックで動作させます。
ちなみに、このコマンドファイルを本番環境で使うのは奨められません。あくまでテスト用として使用してください。

##### Mac用

ファイル名は何でも良いのですが、とりあえず`docker-start.command`というファイル名で以下を追加。

```bash:docker-start.command
#!/bin/sh

# このファイルの場所に移動
cd `dirname $0`

set -eu

CMDNAME=`basename $0`

export PORT=8080
export HOST_IP=`ipconfig getifaddr en0`
export ACCESS_PORT=4433
echo "access here ----------------------------"
echo "https://$HOST_IP:$ACCESS_PORT/index.html"
echo "----------------------------------------"

docker-compose up -d
read -p 'return keyで終了します' a
docker-compose stop
```

追加したら、ターミナルを開いて以下を実行してファイルに実行権限を与えます。

```bash:command
cd 作業ディレクトリ
# 作業
chmod u+x docker-start.command
```

##### 試しに実行

`docker-start.command`をダブルクリックするとターミナルで実行されます。
Mac版の場合ターミナルに表示されている通り、リターンなどを押すと`docker-stop`が実行されて終了します。

<img width="1021" alt="scan.png" src="https://qiita-image-store.s3.amazonaws.com/0/76058/e78797ed-5d13-77f8-1a31-2e1431964290.png">

##### Windows用

https://qiita.com/friedaji/items/c1894821a2c49395cfd7

https://teratail.com/questions/28728

手動で実行させます。
環境変数を`.env`というファイル名で`docker-compose.yml`と同じ階層で以下を保存する必要があります。（HOST_IPは動作するように設定）

```text:.env
PORT=8080
HOST_IP=192.168.XXX.XXX
ACCESS_PORT=4433
```

このとき、エクスプローラーではピリオドで始まるファイルに名前変更できないので、例えば以下のようにコマンドプロンプト上で名前変更する。

```bash:command
# ファイル名変更
rename text.txt .env
```

コマンドプロンプトで以下を実行するとサイトが立ち上がります。

```bash:command
docker-compose up -d
# ２回め以降は下記でもOK
# docker-compose start
# 停止するときは以下
# docker-compose stop
```

##### カスタマイズ

`export PORT=8080`は、htdocsへのアクセスポート、`export ACCESS_PORT=4433`は`https://192.168.XXX.XXX:4433/index.html`のように実際にアクセスするための直接アクセス先のポートです。
必要に応じて書き換えてください。

#### HelloWorld!

を`index.html`という名前で`./htdocs`に保存します。

```html:index.html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
Hello World!
</body>
</html>
```

##### ブラウザ

ターミナルに`https://192.168.XXX.XXX:4433/index.html`のようなアクセス先のURLが出ますので、それをブラウザで開きます。
Macのsafariの場合、証明書関係の表示が出ると思いますので「詳細表を示」ボタンから、「このwebサイトを閲覧」をクリック、アラートの「webサイトを閲覧」ボタンクリックしてパスワード入力後、閲覧出来るようになります。

![キャプチャ2.PNG](https://qiita-image-store.s3.amazonaws.com/0/76058/a5a2983e-ca04-3989-b09d-16a4607a2939.png)

## WebCodeCamJS

[GitHub - andrastoth/webcodecamjs: Demo page](https://github.com/andrastoth/webcodecamjs)

ライセンスはMIT。
後ほどいろいろ変更して使いやすくしてみます。

### とりあえずテスト動作

WebCodeCamJSを`htdocs`フォルダに展開して、`https://192.168.XXX.XXX:4433/index.html`にアクセスしてみましょう。
アクセスしたら下にスクロールすると、再生ボタンとか停止ボタンがついたところがあるので、再生ボタンを押すと接続されているカメラが起動してスキャンされます。

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/76058/90847234-4290-13fc-50c5-f863245c5048.png)

<img width="302" alt="screen.png" src="https://qiita-image-store.s3.amazonaws.com/0/76058/bb4fe323-efea-f4ad-f6a3-df8a95ee4e10.png">


### カスタマイズと構成ファイル

こちらに記載しました。
https://qiita.com/mm_sys/items/6e5e927ef75ab82fa8d3