
# はじめに
Always Freeプロダクト枠を使用し、決算書による財務分析&株価分析Webアプリを作ってみる  
第四弾。  
今回はキーワードを入力すると該当銘柄を教えてくれるチャットボット用のサーバを実装してみます。

## 設計
フロントのチャット部分はチャットライブラリ(https://github.com/riversun/chatux)を使用し、  
バックエンドはここまでGCE,GAEと使ってきたのと、そこまで大きな処理を実装するわけでは  
ないので、今回はコンテナをデプロイできるサーバレスサービスのCloud Runを使用します。  
ローカルのコンテナ環境で動作テストをし、問題なければCloud Buildでコンテナをビルドし、  
Cloud Runにデプロイします。  
フローとしては、下記になります。

![chatbot](/images/feye/chatbot.PNG)

## Docker
コンテナで実行するために、Dockerfileをしたためます。  
適宜必要なモジュールをインストールする記述を記載します。

```text
# Use the official lightweight Python image.
# https://hub.docker.com/_/python
FROM python:3.7-slim

# Copy local code to the container image.
ENV APP_HOME /app
WORKDIR $APP_HOME
COPY . ./

# Install production dependencies.
RUN pip install Flask gunicorn flask_cors google-cloud-storage pandas

# Run the web service on container startup. Here we use the gunicorn
# webserver, with one worker process and 8 threads.
# For environments with multiple CPU cores, increase the number of workers
# to be equal to the cores available.
CMD exec gunicorn --bind :$PORT --workers 1 --threads 8 --timeout 0 app:app
```

またCloud Buildに投げるときはDockerfileだけでも問題ないですが、  
ローカルでテストしよすいようにdocker-composeも使用します。  
ということでyamlファイルは以下。

```text
version: '3'
services:

  backend:
    build: ./backend
    image: backend-image
    container_name: backend1
    restart: always
    ports:
      - 8000:8000
    environment:
      PORT: 8000
```

## フロントエンド
フロントのチャット部分はチャットライブラリ(https://github.com/riversun/chatux)を使用し、  
htmlファイルに埋め込む形で記載します。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>銘柄検索ボット</title>
</head>
<body>
<script src="https://riversun.github.io/chatux/chatux.min.js"></script>
<script>
    const chatux = new ChatUx();

 const initParam =
        {
            renderMode: 'auto',
            api: {
                //echo chat server
                endpoint: 'http://localhost:8080/chat',
                method: 'GET',
                dataType: 'json'
            },
            bot: {
                botPhoto: 'https://1.bp.blogspot.com/-U-God4u2s7Q/VdLsEO8pS9I/AAAAAAAAw2w/CucJpIwog34/s400/vegetable_kyouyasai_syougoin_daikon.png',
                humanPhoto: null,
                widget: {
                    sendLabel: '検索',
                    placeHolder: 'キーワードを入力してください'
                }
            },
            window: {
                title: '銘柄検索ボット',
                infoUrl: 'https://github.com/RuBisCO28/KabuChatServer'
            }
        };
    chatux.init(initParam);
    chatux.start(true);

</script>
</body>
</html>
```

起動すると下記のようなbotが画面右下に出現します。

![chatbot2](/images/feye/chatbot2.PNG)

## 検索対象のデータ
今回、検索対象のデータは[edinetコードリスト](https://disclosure.edinet-fsa.go.jp/E01EW/BLMainController.jsp?uji.verb=W1E62071InitDisplay&uji.bean=ee.bean.W1E62071.EEW1E62071Bean&TID=W1E62071&PID=currentPage&SESSIONKEY=1600570094419&kbn=2&ken=0&res=0&idx=0&start=null&end=null&spf1=1&spf2=1&spf5=1&psr=1&pid=0&row=100&str=&flg=&lgKbn=2&pkbn=0&skbn=1&dskb=&askb=&dflg=0&iflg=0&preId=1)に
企業説明を加えた下記のようなデータとなります。

```text
8801, 3月31日,三井不動産株式会社,不動産業,東証1部,三菱地所と並ぶ総合不動産の双璧。ビル賃貸主力。マンション分譲、非保有不動産事業を拡大
4519,12月31日,中外製薬株式会社,医薬品,東証1部,ロシュ傘下で成長続ける異色の医薬品大手。抗体・バイオで先行、抗がん剤、骨・関節領域に強い```
```

## チャットサーバ
言語はPython、フレームワークはFlaskで構築してみます。  
ローカルでサーバをたてて、csv形式のedinetデータを読み込み、dataframeに流します。    
肝心のチャットUIとチャットサーバのやり取りはjson形式で行います。  
/chat以降のパラメーターでキーワードとなるテキストを受け取り、  
該当するテキストがないかをcsv形式のedinetデータの企業説明欄から検索して、  
ヒットすればその企業のyahooファイナンスのページのリンクを記載したメッセージを  
返すという流れになります。

![chatbot3](/images/feye/chatbot3.PNG)

コードは以下
```python
from flask import Flask, jsonify, abort, make_response, request
from flask_cors import CORS
import os
from google.cloud import storage
from io import BytesIO
import pandas as pd

app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False
CORS(app)

@app.route('/chat',methods=['GET'])
def answer():
    text = request.args.get("text","")
    
    # for local
    df=pd.read_csv("all_edinetcodeinfo.csv",header=None)
    
    # for GCP
    #storage_client = storage.Client()
    #bucket = storage_client.get_bucket('edinetcodeinfo')
    #blob = bucket.get_blob('all_edinetcodeinfo')
    #df = pd.read_csv(BytesIO(blob.download_as_string()),header=None)
    
    dfc=df[df[5].str.contains(text)]
    if(len(dfc)==0):
        result={"output":[{"type":"text","value":"見つかりませんでした"}]}
        return make_response(jsonify(result))
    else:
        ft=str(len(dfc))+"件見つかりました"
        html=""
        for i in range(len(dfc)):
            code=dfc.iloc[i,0]
            company=dfc.iloc[i,2]
            value=str(code)+": "+"<a href=\"https://stocks.finance.yahoo.co.jp/stocks/chart/?code="+str(code)+"\" target=\"_blank\" >"+str(company)+"</a><br>"
            html+=value
        result={"output":[{"type":"text","value":ft,"delayMs": 300},{"type":"html","value":html}]}
        return make_response(jsonify(result))

@app.errorhandler(404)
def not_found (error):
    return make_response(jsonify({"error","Not found"}),404)

if __name__ == "__main__":
    app.run(debug=True,host='0.0.0.0',port=int(os.environ.get('PORT', 8080)))
```

## テスト
docker-compose.ymlを使用して、コンテナを起動してみます。

```bash
# cd <docker-compose.ymlが置かれているディレクトリ>
# docker-compose up -d
```

あとはindex.htmlを開き、単語を入力すると検索結果が返されます。

![chatbot4](/images/feye/chatbot4.PNG)

## Cloud Buildでのビルド
さてコンテナでのテストが完了したので、Dockerfile を含むディレクトリから次のコマンドを実行し、  
Cloud Build を使用してコンテナイメージをビルドします。

```bash
gcloud builds submit --tag gcr.io/PROJECT-ID/application_name
```

PROJECT-IDは、GCP のプロジェクトID です。gcloud config get-value project を実行すると取得できます。  
またアプリ名はデプロイするapplication_nameです。  
成功すると、イメージ名（gcr.io/PROJECT-ID/application_name）を含むSUCCESSメッセージが表示されます。  
イメージはContainer Registryに保存され、必要に応じて再利用できます。

## Cloud Run へのデプロイ
コンテナ イメージをデプロイするには次のコマンドを使用してデプロイします。 

```bash
gcloud run deploy --image gcr.io/PROJECT-ID/application_name --platform managed
```

サービス名の入力を求められます。Enter キーを押してデフォルト名を受け入れることができます。
またリージョンを指定するよう求められます。選択したリージョン（us-central1 など）を選択します。
最後に未認証の呼び出しを許可する場合は、[y] と返信します。
デプロイが完了し成功すると、コマンドラインにサービスURL が表示されるので、  
ブラウザでこのサービスURL を開き、デプロイしたコンテナにアクセスできます。
さきほどローカル環境でテストしたときのようにキーワードをパラメータで指定し、jsonが返ってくれば成功です。

```text
https://URL/chat?text=キーワード
```

## Code
恒例のGithubにサンプル公開。

https://github.com/RuBisCO28/KabuChatServer

#  最後に一言
今回のように大きな処理を伴わず、必要な時必要な分だけ使う場合はCloud Functionsなどでもよいですが、
コンテナで管理デプロイできるCloud Runはまた違った魅力があるように思いました。  



Develop Japan Financial & Stock app with GCP Free Tier Part4

Develop Japan Financial & Stock app with GCP Free Tier Part3

# はじめに
Always Freeプロダクト枠を使用し、決算書による財務分析&株価分析Webアプリを作ってみる  
第二弾。  
今回は株価推移をロウソク足チャートで表示する部分の実装をしてみます。

## まずはLocalで
いきなりGCPを使う前にまずはローカルでということでDBにSQLiteを採用します。  
今回言語はPython、フレームワークはFlaskで構築してみます。  
ローカルでAPIサーバをたてて、json形式の株価データをフロントで受け取り、ロウソク足チャートで表示します。  
ということで下記モジュールをインストールします

```bash
pip3 install Flask flask_cors sqlalchemy
```

## ディレクトリ構成

```text
(any directory)
 ├models/
 │　├models.py
 │　├database.py
 │　└stocks.db
 └main.py
```

## エントリーポイント
サーバ起動およびエントリーポイントは下記。  
/apiStockData/codeのcode部分で銘柄コードを指定し、該当codeの株価情報をDBから取得、  
json形式に変換・出力します。

```python
from flask import Flask, jsonify, abort, make_response, request
from flask_cors import CORS
from models.models import Stocks
import json

app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False
CORS(app)

@app.route("/apiStockData/<code>")
def stock(code):
    all_stocks = Stocks.query.filter(Stocks.code==code).all()
    result = []
    for stocks in all_stocks:
        result.append(dict(date=stocks.date, open=stocks.open, close=stocks.close, high=stocks.high, low=stocks.low, volume=stocks.volume))
    return make_response(jsonify(result))

@app.errorhandler(404)
def not_found(error):
    return make_response(jsonify({'error': 'Not found'}), 404)

if __name__ == '__main__':
    app.run(host='127.0.0.1', port=8080)
```

## DB
キー/日付/始値/高値/安値/終値/出来高/銘柄コードの情報がSQLiteに格納してあり、  

```text
1301_2018-01-04|2018-01-04|4270|4335|4220|4320|61500|1301
1301_2018-01-05|2018-01-05|4330|4360|4285|4340|55300|1301
1301_2018-01-09|2018-01-09|4340|4360|4325|4340|26100|1301
1301_2018-01-10|2018-01-10|4340|4460|4340|4430|91300|1301
1301_2018-01-11|2018-01-11|4430|4430|4340|4350|48200|1301
```

事前にdatabase.pyでSQLiteの接続情報、model.pyでDBのSchemeは定義しておきます。  
これにより、main.pyでimportすることでDBの情報を呼び出せます。  

database.py
```python
from sqlalchemy import create_engine
from sqlalchemy.orm import scoped_session, sessionmaker
from sqlalchemy.ext.declarative import declarative_base
import os

databese_file = os.path.join(os.path.abspath(os.path.dirname(__file__)), 'stocks.db')
engine = create_engine('sqlite:///' + databese_file, convert_unicode=True)
db_session = scoped_session(sessionmaker(autocommit=False,autoflush=False,bind=engine))
Base = declarative_base()
Base.query = db_session.query_property()

def init_db():
    import models.models
    Base.metadata.create_all(bind=engine)
```

models.py
```python
from sqlalchemy import Column, Integer, String, Text, DateTime
from models.database import Base
from datetime import datetime

class Stocks(Base):
    __tablename__ = 'stocks'
    pkey = Column(String(128), primary_key=True)
    date = Column(String(128))
    open = Column(Integer)
    high = Column(Integer)
    low = Column(Integer)
    close = Column(Integer)
    volume = Column(Integer)
    code = Column(Integer)

    def __init__(self, date=None):
        self.pkey = pkey
        self.date = date
        self.open = open
        self.high = high
        self.low = low
        self.close = close
        self.volume = volume
        self.code = code
```

## ロウソク足チャート
ロウソク足チャートを表示するライブラリとして、今回は[Apache ECharts](https://echarts.apache.org/en/index.html)を使用します。  
ajaxでAPIサーバからjson形式で株価情報を受け取り、各変数にそれぞれ株価と出来高のデータを格納。25日、75日平均移動線も計算して表示します。  
以下、htmlファイル。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Stock Chart</title>
    
    <script src="echarts.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
    
    <div id="main" style="width: 100%;height:700px;"></div>
    <script type="text/javascript">
	var myChart = echarts.init(document.getElementById('main'));
    var upColor = '#00da3c';
	var downColor = '#ec0000';

function splitData(rawData) {
    var categoryData = [];
    var values = [];
    var volumes = [];
    for (var i = 0; i < rawData.length; i++) {
		categoryData.push(rawData[i].date);
		values.push([rawData[i]['open'],rawData[i]['close'],rawData[i]['high'],rawData[i]['low'],rawData[i]['volume'],]);
		volumes.push([i, rawData[i]['volume'], rawData[i]['open'] > rawData[i]['close'] ? 1 : -1]);
    }

    return {
        categoryData: categoryData,
        values: values,
        volumes: volumes
    };
}

function calculateMA(dayCount, data) {
    var result = [];
    for (var i = 0, len = data.values.length; i < len; i++) {
        if (i < dayCount) {
            result.push('-');
            continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
            sum += data.values[i - j][1];
        }
        result.push(+(sum / dayCount).toFixed(3));
    }
    return result;
}

$.get('http://localhost:8080/apiStockData/1301', function (rawData) {
    var data = splitData(rawData);

    myChart.setOption(option = {
        backgroundColor: '#fff',
        animation: false,
        legend: {
            bottom: 10,
            left: 'center',
            data: ['株価', 'MA25', 'MA75']
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            backgroundColor: 'rgba(245, 245, 245, 0.8)',
            borderWidth: 1,
            borderColor: '#ccc',
            padding: 10,
            textStyle: {
                color: '#000'
            },
            position: function (pos, params, el, elRect, size) {
                var obj = {top: 10};
                obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                return obj;
            }
            // extraCssText: 'width: 170px'
        },
        axisPointer: {
            link: {xAxisIndex: 'all'},
            label: {
                backgroundColor: '#777'
            }
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: false
                },
                brush: {
                    type: ['lineX', 'clear']
                }
            }
        },
        brush: {
            xAxisIndex: 'all',
            brushLink: 'all',
            outOfBrush: {
                colorAlpha: 0.1
            }
        },
        visualMap: {
            show: false,
            seriesIndex: 5,
            dimension: 2,
            pieces: [{
                value: 1,
                color: downColor
            }, {
                value: -1,
                color: upColor
            }]
        },
        grid: [
            {
                left: '10%',
                right: '8%',
                height: '50%'
            },
            {
                left: '10%',
                right: '8%',
                top: '63%',
                height: '16%'
            }
        ],
        xAxis: [
            {
                type: 'category',
                data: data.categoryData,
                scale: true,
                boundaryGap: false,
                axisLine: {onZero: false},
                splitLine: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax',
                axisPointer: {
                    z: 100
                }
            },
            {
                type: 'category',
                gridIndex: 1,
                data: data.categoryData,
                scale: true,
                boundaryGap: false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
            }
        ],
        yAxis: [
            {
                scale: true,
                splitArea: {
                    show: true
                }
            },
            {
                scale: true,
                gridIndex: 1,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
            }
        ],
        dataZoom: [
            {
                type: 'inside',
                xAxisIndex: [0, 1],
                start: 98,
                end: 100
            },
            {
                show: true,
                xAxisIndex: [0, 1],
                type: 'slider',
                top: '85%',
                start: 98,
                end: 100
            }
        ],
        series: [
            {
                name: '株価',
                type: 'candlestick',
                data: data.values,
                itemStyle: {
                    color: upColor,
                    color0: downColor,
                    borderColor: null,
                    borderColor0: null
                },
                tooltip: {
                    formatter: function (param) {
                        param = param[0];
                        return [
                            'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
                            'Open: ' + param.data[0] + '<br/>',
                            'Close: ' + param.data[1] + '<br/>',
                            'Lowest: ' + param.data[2] + '<br/>',
                            'Highest: ' + param.data[3] + '<br/>'
                        ].join('');
                    }
                }
            },
            {
                name: 'MA25',
                type: 'line',
                data: calculateMA(25, data),
                smooth: true,
                lineStyle: {
                    opacity: 0.5
                }
            },
            {
                name: 'MA75',
                type: 'line',
                data: calculateMA(75, data),
                smooth: true,
                lineStyle: {
                    opacity: 0.5
                }
            },
            {
                name: 'Volume',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: data.volumes
            }
        ]
    }, true);

    myChart.dispatchAction({
        type: 'brush',
        areas: [
            {
                brushType: 'lineX',
                coordRange: ['2020-06-10', '2020-07-10'],
                xAxisIndex: 0
            }
        ]
    });
});
    </script>
</body>
</html>
```

ということで下記でサーバを起動し、
```bash
python main.py
```

作成したindex.htmlを開くと株価ローソクチャート+出来高グラフ+移動平均線が確認できます。(テストで銘柄コード1301を表示)

![ec](/images/feye/echart.PNG)

## Cloud DataStore
さてこの株価&出来高情報をGAEから取得し、表示するためにデータの永続化が必要になります。  
そこで今回はGCPの無料枠の中で、DBとしてCloud DataStoreを使用してみます。  
Cloud DataStoreは水平スケーリングNoSQLデータベースで、格納形式はRDBのようにカラムがないので、
今回はjson形式で保存します。  

```text
sample:
[{"high":"3045","date":"2019-08-01","low":"3010","open":"3040","close":"3045","volume":"14800"},
{"low":"2985","high":"3045","volume":"28100","close":"3015","date":"2019-08-02","open":"3025"}]
```

さて、株価や出来高は毎日更新されるので、データを定期的にDataStoreに格納する必要があります。  
ローカルから環境から更新する方法もありますが、米国リージョンを使うこともあるので、GCEからアップデートをかけることにします。  
これのメリットとしては、DataStoreもGCEも同じリージョンなのでコストを抑えられるのとGCE上でcronを仕込んどくことで
自動でデータをアップデートできます。  

GCEからDataStoreにデータを挿入するため、下記モジュールをインストールしておきます。

```bash
pip3 install google-cloud-datastore
```

また同じVPC内のデータのやり取りの場合、下記GCEインスタンスのオプションのDataStore用APIを有効にしておくことで、キーなど設定する必要なく、データの更新ができます。

![ds](/images/feye/datastore.PNG)

今回、KindとEntityは下記のようにします。
idは一意な値が必要なので、銘柄コードを指定。  
各銘柄ごとに約1年分の株価情報をjson形式でstocksエンティティに保存します。

```text
Kind: Stocks
Entity : id, stocks
```

また更新するデータ用の実際に更新するためのコードは以下。  
事前にSQLiteに仕込んでおいた株価データを取得・整形し、DataStoreへ挿入しています。  
挿入する際は更新対象のProjectIDを指定が必要になります。

```python
from google.auth import compute_engine
from google.cloud import datastore
from models import Stocks
import json
import time
import pandas as pd

credentials = compute_engine.Credentials()
project="ProjectIDを記入"
datastore_client = datastore.Client(credentials=credentials, project=project)

def insert_datastore(code):
    try:
        all_stocks = Stocks.query.filter(Stocks.code==code).all()
        result = []
        for stocks in all_stocks:
            result.append(dict(date=stocks.date, open=stocks.open, high=stocks.high, low=stocks.low, close=stocks.close, volume=stocks.volume))

        key = datastore_client.key('Stock',code)
        task = datastore.Entity(key=key)
        task.update({
            'stock': result
        })
        datastore_client.put(task)
    except:
        print("Fail: "+str(code))

if __name__ == '__main__':
    edn=pd.read_csv('edinetcodeinfo.csv',header=None)
    codes=edn.iloc[:][4]
    for code in codes:
        insert_datastore(code)
        time.sleep(1)
```

## GAEからDataStoreのデータ取得
DataStoreへのデータの格納が終わったので、GAEからDataStoreのデータ取得部分について実装します。 
GCEのように特にAPI有効にせずとも、同じProject内であればデータを取得できます。  
Kindを指定し、データを取得後、フロントに流しグラフ表示とさきほどと同じフローになるため、  
今回は、取得の関数のみ下記に記載します。

```python
@app.route('/stocks/<code>')
def get_stocks(code):

    datastore_client = datastore.Client()
    key = datastore_client.key('Stock',int(code))
    entity = datastore_client.get(key)
    result=entity.get("stock")
    all_stocks=result
    return render_template("stock.html",code=code, all_stocks=all_stocks)
```

## Cloud DataStoreの無料枠
今回使用したCloud DataStoreの無料枠の制限として、米国ロサンゼルスでは1GBのストレージという記載があります。 

![cost](/images/feye/cost.PNG)

ただし、注意点としてこのストレージサイズは自動で作成される組み込みインデックスも含むサイズとなります。  
このためSQLiteのDBのサイズが1年分で200MBだったので、数年分は格納できると思ったのですが、  
実際は組み込みインデックスがデータ挿入時に自動で作成され、下記のように約1年分でも1GBを超えることになります。

![index](/images/feye/index.PNG)

そして超過分だけ、毎月課金されるので、データ容量を減らすなど注意が必要です。

## Code
恒例のGithubにサンプル公開。

https://github.com/RuBisCO28/StockVoice

#  最後に一言
1GBのストレージ制限があるので、次章で説明するCloud Storageの方を使えばよかったなと思いつつ、DataStoreを使う勉強になったのでヨシとしたいと思います。

Develop Japan Financial & Stock app with GCP Free Tier Part2


# はじめに
Always Freeプロダクトと呼ばれる一部のGCPサービスで制限はあるものの  
常時無料で使用できる(太っ腹)枠があるので、この枠を使用し、決算書による財務分析&株価分析Webアプリを作ってみる。

## 動機
このコロナ禍もあってか株をはじめた人が増えたらしい（私もそのうちの一人）。  
とはいえなんとなく買っているのもあるので、情報を集約して見れるサイトがそろそろ欲しいなぁ  
ということで作成してみました。

## 今回実装する機能
株を買う前にそもそもどういう企業なのかからはじまり、現在の株価やトレンドなどを見たいので下記情報を実装

```text
企業概要
財務三表
株価推移
銘柄探索bot
```

## Always Freeプロダクトと構成
Webアプリを作るにあたって下記Always Freeプロダクト対象サービスを確認すると  
https://cloud.google.com/free?hl=ja  

使用できそうなのは下記4つ
```text
Google Compute Engine(GCE)
Google App Engine(GAE)
Cloud DataStore
Cloud Storage
```

無料で使う上での気にすべき具体的な制約は下記

```text
> GCE
f1-micro インスタンス（1 か月あたり、北バージニア [us-east4] を除く米国リージョンのみ）
30 GB-月の HDD
5 GB-月のスナップショット（一部のリージョン）
1 GB の北米から全リージョン宛ての下り（外向き）ネットワーク（1 か月あたり、中国とオーストラリアを除く）

> GAE
1 日あたり28 時間分の「F」インスタンス
1 日あたり下り1GB
スタンダード環境の場合のみ、この無料の使用量上限をご利用になれます。

> Cloud DataStore
1GB のストレージ
1日あたり 50,000 回の読み取りオペレーション、20,000 回の書き込みオペレーション、20,000 回の削除オペレーション

> Cloud Storage
5 GB-月の Regional Storage（1 か月あたり、北バージニア [us-east4] を除く米国リージョンのみ）
5,000 回のクラス A オペレーション（1 か月あたり）
50,000 回のクラス B オペレーション（1 か月あたり）
1 GB の北米から全リージョン宛ての下り（外向き）ネットワーク（1 か月あたり、中国とオーストラリアを除く）
```

このため、必然的にリージョンは北米かつゾーンは日本に近いwestを指定  
システムフローとしては、GAEでフロント兼バックエンドをこなし、DBとしてはDataStoreとStorageを採用  
DBの定期的な更新はGCEで行うという下記フローに決定

![feye6](/images/feye/feye.png)

DB周りは本当はCloudSQLを使いたいが、無料ではない。  
NoSQLのCloud DataStoreが無料枠に入っているが、実は組み込みindexなるものが自動で生成され、  
容量をくうという罠があり、Cloud Storageも併用という流れになった。

#  最後に一言
今回は概要だけというところで次回から実装する機能それぞれについて詳しく見ていきます。


Develop Japan Financial & Stock app with GCP Free Tier Part1


## はじめに
最近FXのデモトレードができるアプリ「FXなび」で何回か取引をしていく中で、  
資金管理と投資ルールが重要だなと感じたので、ナウザー・バルサラという数学者が、  
破産確立について考えたトレードルールの安全性と期待値の高さが分かる表について  
今回はデモトレードのデータも交えて紹介します。　

## データセット
今回扱う下記データは、計62回に渡ってデモトレードしたときの損益データ(手入力)です。  

https://github.com/RuBisCO28/Balsara/blob/master/trade.csv

```text
データセットの詳細
レコード数 	62
カラム数 	2

各カラムの構成
order        取引順番 	
profit(円)   損益(マイナスは損)
```

## 破産確率
下記3つの数値(勝率、損益率、リスクにさらす資金比率)から、トレードを続けたときの破産確率をバルサラの破産確率表と合わせて導き出します。  
なお、口座資金は1325153円と仮定します。

```python
import pandas as pd

df = pd.read_csv('trade.csv')

# 勝率（％） ＝ 勝ちトレード数 ÷ 総トレード数 × 100
win = (len(df[df["Profit"]>0]) / len(df)) * 100

# 損益率（倍） ＝ トレードの平均利益額 ÷ トレードの平均損失額
risk_reward = df[df["Profit"]>0]["Profit"].mean() / ((df[df["Profit"]<0]["Profit"].mean())*-1.0)

# リスクにさらす資金比率（％） ＝ 1トレードの許容損失額 ÷ 口座資金 × 100
# 自分が設定している最大損失額を決めていないので、今までの最大ロスカットの金額
risk_rate = (-1.0 * df[df["Profit"]<0]["Profit"].min()) / 1325153
print("勝率: " + str(win) + "%")
print("損益率: " + str(risk_reward))
print("リスク資金比率: " + str(risk_rate*100) + "%")
```

```text
勝率(%): 75.80645161290323%
損益率（倍）: 1.4789110090933166
リスク資金比率(%): 1.092704012291411%
```

最後にリスク資金比率1%の下記バルサラの破産確立表から、破産確率は0%とわかる。

![2](/img/balusara/table.png)

## バルサラの破産確率表の導出方法
さて破産確率0%なので安心。。。とはなりません。  
そもそもこの表どこから出てきたのか、そして必ずしも同じリスク比率でトレードするとは限らないなど疑問が出てくるはず。
そこで実際にこの表を作成していきます。  
資金がn円のときの破産確率をQ(n)とします。
勝ったらW円もらえるとし、負けたらL円失うような取引を1回行った後は、
資金は n + W円か、n – L円になっています。

```text
資金: n円
勝ち: n + W円
負け: n - L円
```

ここで勝つ確率をpとすると破産確率は

```text
取引前: Q(n)
勝ったことにより、n+W円を持ち破産していない確率： pQ(n+W)
負けたことにより、n-L円になったが破産していない確率： (1-p)Q(n-L)
```

取引前の破産確率と、取引後の全ての事象の破産確率の和は等しいので、以下の確率変数の式が成立します。

```text
Q(n) = pQ(n+W) + (1-p)Q(n-L)
```

ここで勝ったらWもらえ、負けたらL失うということは、数学的には、
勝ったらW/Lもらえ、負けたら1失うということと等しい
以上よりW/Lをkとおくと

```text
Q(n) = pQ(n+k) + (1-p)Q(n-1)
```

この漸化式の一般項Q(n)を解くには、以下の特性方程式を解きます。

```text
x = px^(k+1) + (1-p)
```

この方程式の0<x<1での解をrとすると、破産確率Q(n)は

```text
Q(n) = x^(n/L)
```

この式をもとに
なお、xは0.000～1.000まで0.001刻みで計算し、x>=0の条件でもっとも0に近い値を算出する。
なお、先ほどの表はリスク資金比率0.01で出力したものである

```python
import argparse
import io

# 特性方程式(x = px^(k+1) + (1-p))のxの値を取得する。
def getX(incomeRate, winningRate):
    k = incomeRate
    p = winningRate
    
    resultX = 0.00
    memory = -0.01
    for i in range(1, 1000, 1):
        x = i/1000
        check = p * pow(x, k+1) + (1 - p) - x
        if check < 0:
            check *= -1

        if memory == -0.01 or memory > check:
            memory = check
            resultX = x

    return resultX
    
# バルサラの破産確率を取得
def getBankruptcyPercent(costRate, incomePercent, winningPercent):
    if winningPercent == 100:
        return 0.0

    incomeRate = incomePercent / 100
    winningRate = winningPercent / 100
    
    # p≦b/(a + b)の場合は必ず破産。
    # b/(a+b) = 1/(incomeRate+1)
    # b: 損失額 、 a: 利益額
    if winningRate <= 1/(incomeRate+1):
        return 1.0
    
    return pow(getX(incomeRate,winningRate),1/costRate)

if __name__ == '__main__':
    argParser = argparse.ArgumentParser()
    # 資金に対する損失率
    argParser.add_argument("costRate")
    args = argParser.parse_args()
    
    costRate    = float(args.costRate) # 資金に対する最大損失の割合
    winningPercent = 10         # 勝率[%]
    incomePercent  = 10         # 損益率[%]

    # 損益率は10%ずつ増やしていく
    incomeInterval = 10
    winInterval = 10
    
    print("," , end='')
    for i in range(9):
        print(str(winningPercent) + "," , end='')
        winningPercent += winInterval
    print()
    winningPercent = 20
    
    for i in range(20):
        winningPercent = 20
        bankruptcyPercentList = []
        # 勝率は10%ずつ増やしていく
        for j in range(9):
            bankruptcyPercentList.append(getBankruptcyPercent(costRate, incomePercent, winningPercent))
            winningPercent += winInterval
        
        print(str(incomePercent) + "," , end='')
        for k in bankruptcyPercentList:
            print( "{0:.2f}".format(k*100) + "," , end='')
        
        print()
        
        incomePercent += incomeInterval
```

##  最後に一言
さて、バルサラの破産確率の導き出しから、定額での破産確率を表にまとめたものだということがわかりました。  
FXなびのデモトレードは、Lvがあがらないとlot数が増やせないやスプレッドなどがあるLvまでないなどあるので、
実際の取引データとは言い難く、また実際のトレードでも必ずしも同じリスク比率でトレードするとは限らないです。  
ただし、この表から破産のリスクは勝率が高くなるにつれて低下し、低下の大きさはリスクにさらす資本の割合に依存するということがわかると思います。  
ついついレバレッジや取引量を増やし、勝負に出たいところですが、
一度の取引において大きな額をリスクにさらさないことを徹底するルールを設け、退場しないようにすることも大切なことに気づきます。(戒め)


Balsara's Bankruptcy Prediction


## はじめに
前回の続き。 
章が進むにつれ、都度忘れるのでメモとして残していく。

## Matplotlib
グラフライブラリ。plt.plotでx軸,y軸のデータをセットし、plt.show()でグラフ表示。
傾向がみられる場合、グラフから予測可能
```python
# Import matplotlib.pyplot as plt
import matplotlib.pyplot as plt

# Make a line plot: year on the x-axis, pop on the y-axis
plt.plot(year,pop)

# Display the plot with plt.show()
plt.show()
```

散布図はscatter。xscaleでlogで対数プロットにできる
相関性があるかなど見るときに使用。  
(You want to visually assess if longer answers on exam questions lead to higher grades)

```python
# Change the line plot below to a scatter plot
plt.scatter(gdp_cap, life_exp)

# Put the x-axis on a logarithmic scale
plt.xscale('log')

# Show plot
plt.show()
```

ヒストグラム。  
binsをうまくセットすることで分布の傾向をbig pictureで見れる。  
(You want to visually assess if the grades on your exam follow a particular distribution)

```python
# Build histogram with 5 bins
plt.hist(life_exp,bins=5)

# Show and clean up plot
plt.show()
plt.clf()

# Build histogram with 20 bins
plt.hist(life_exp,bins=20)

# Show and clean up again
plt.show()
plt.clf()
```

グラフにタイトル、ラベルを付ける方法

```python
# Add axis labels
plt.xlabel('xlab')
plt.ylabel('ylab')

# Add title
plt.title('title')
```

グラフの目盛を変える

```python
# Definition of tick_val and tick_lab
tick_val = [1000, 10000, 100000]
tick_lab = ['1k', '10k', '100k']

# Adapt the ticks on the x-axis
plt.xticks(tick_val,tick_lab)
```

散布図のサイズや透明度を変えたり、テキストやグリッドの追加

```python
# Specify c and alpha inside plt.scatter()
plt.scatter(x = gdp_cap, y = life_exp, s = np.array(pop) * 2, c = col, alpha=0.8)

# Additional customizations
plt.text(1550, 71, 'India')
plt.text(5700, 80, 'China')

# Add grid() call
plt.grid(True)
```

## Dictionaries & Pandas
Listだとindexで場所を特定し、違うリストで指定できるが、あまり直感的な方法ではない

```python
# List
# Definition of countries and capital
countries = ['spain', 'france', 'germany', 'norway']
capitals = ['madrid', 'paris', 'berlin', 'oslo']

# Get index of 'germany': ind_ger
ind_ger = countries.index('germany')

# Use ind_ger to print out capital of Germany
print(capitals[ind_ger])
```

そこでDictionaly型を使うことで、スマートにデータを取り扱える
具体的には、KeyとValueで辞書型を作成し、keyで値をとる方法である
参照だけでなく、追加・削除も可能

```python
# Definition of dictionary
europe = {'spain':'madrid', 'france':'paris', 'germany':'berlin', 'norway':'oslo' }

# Print out value that belongs to key 'norway'
print(europe['norway'])

# Add italy to europe
europe['italy'] = 'rome'

# Print out italy in europe
print('italy' in europe)

# Remove italy
europe.pop('italy')
```

複雑になるが、辞書の中に辞書をもてる

```python
# Dictionary of dictionaries
europe = { 'spain': { 'capital':'madrid', 'population':46.77 },
           'france': { 'capital':'paris', 'population':66.03 },
           'germany': { 'capital':'berlin', 'population':80.62 },
           'norway': { 'capital':'oslo', 'population':5.084 } }


# Print out the capital of France
print(europe['france']['population'])

# Create sub-dictionary data
data = { 'capital':'rome', 'population':59.83 }

# Add data to europe under key 'italy'
europe['italy'] = data
```

さて実際にデータを扱うときは行列形式のテーブルデータを取り扱うことが多いので
Pandasライブラリを使用してデータ処理を行うことができる

```python
# Pre-defined lists
names = ['United States', 'Australia', 'Japan', 'India', 'Russia', 'Morocco', 'Egypt']
dr =  [True, False, False, False, True, True, True]
cpc = [809, 731, 588, 18, 200, 70, 45]

# Import pandas as pd
import pandas as pd

# Create dictionary my_dict with three key:value pairs: my_dict
my_dict = {'country': names, 'drives_right': dr, 'cars_per_cap': cpc}

# Build a DataFrame cars from my_dict: cars
cars = pd.DataFrame(my_dict)

# Definition of row_labels
row_labels = ['US', 'AUS', 'JPN', 'IN', 'RU', 'MOR', 'EG']

# Specify row labels of cars
cars.index = row_labels

# Result(cars)
     cars_per_cap        country  drives_right
US            809  United States          True
AUS           731      Australia         False
JPN           588          Japan         False
IN             18          India         False
RU            200         Russia          True
MOR            70        Morocco          True
EG             45          Egypt          True
```

pandasを使用する利点としてcsvファイルの読み込み関数が備わっている点にある  
先ほどのデータを読み込んだものでindex_colで行のラベルをどれにするか指定できる

```python
# Fix import by including index_col
cars = pd.read_csv('cars.csv',index_col=0)
```

それぞれの値にアクセスする際の注意点として、Dataframeでとる場合は[]が二重にする必要がある。  
また行指定も可能

```python
# Print out country column as Pandas Series
print(cars['country'])

US     United States
AUS        Australia
JPN            Japan
IN             India
RU            Russia
MOR          Morocco
EG             Egypt
Name: country, dtype: object

# Print out country column as Pandas DataFrame
print(cars[['country']])

           country
US   United States
AUS      Australia
JPN          Japan
IN           India
RU          Russia
MOR        Morocco
EG           Egypt

# Print out DataFrame with country and drives_right columns
print(cars[['country','drives_right']])

           country  drives_right
US   United States          True
AUS      Australia         False
JPN          Japan         False
IN           India         False
RU          Russia          True
MOR        Morocco          True
EG           Egypt          True

# Print out first 3 observations
print(cars[0:3])

     cars_per_cap        country  drives_right
US            809  United States          True
AUS           731      Australia         False
JPN           588          Japan         False

```

ここでlabelベースのアクセス方法であるlocとindexベースのアクセス方法であるilocを紹介する

```python
# Print out observation for Japan
print(cars.loc['JPN'])
print(cars.iloc[2])

cars_per_cap      588
country         Japan
drives_right    False
Name: JPN, dtype: object

# Print out observations for Australia and Egypt
print(cars.loc[['AUS','EG']])
print(cars.iloc[[1, 6]])

     cars_per_cap    country  drives_right
AUS           731  Australia         False
EG             45      Egypt          True

# Print out drives_right value of Morocco
print(cars.loc['MOR','drives_right'])
print(cars.iloc[5,2])

True

# Print sub-DataFrame
print(cars.loc[['RU','MOR'],['country','drives_right']])
print(cars.iloc[[4,5],[1,2]])

     country  drives_right
RU    Russia          True
MOR  Morocco          True

# Print out drives_right column as DataFrame
print(cars.loc[:,['drives_right']])
print(cars.loc[:,1)

     drives_right
US           True
AUS         False
JPN         False
IN          False
RU           True
MOR          True
EG           True

# Print out cars_per_cap and drives_right as DataFrame
print(cars.loc[:,['cars_per_cap','drives_right']])
print(cars.iloc[:,[0,2]])

     cars_per_cap  drives_right
US            809          True
AUS           731         False
JPN           588         False
IN             18         False
RU            200          True
MOR            70          True
EG             45          True
```

## Logic, Control Flow and Filtering


##  最後に一言


DataCamp Part2: Intermediate Python


## はじめに
データサイエンスを学びつつ、Pythonでのデータ処理方法を学びたいということで  
Data Campの「Data Scientist with Python」を受講していきます。  
https://www.datacamp.com/  
章が進むにつれ、都度忘れるのでメモとして残していく。

## Python Basics
文字列にかけて2回出力はできる
```python
In [1]: "I said " + ("Hey " * 2) + "Hey!"
Out[1]: 'I said Hey Hey Hey!'
```

ただし、strとintのように方が違うものを一緒にそのままは表示できないので
```python
In [2]"The correct answer is " + 2
Out[2] Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
    "The correct answer is " + 2
TypeError: must be str, not int
```

str()で数字を囲う必要がある
```python
In [3]: "The correct answer is "+str(2)
Out[3]: 'The correct answer is 2'
```

## Python Lists
listは異なるタイプの要素を混同させることができる
```python
areas = ["hallway",hall, "kitchen", kit, "living room", liv, "bedroom", bed, "bathroom", bath]
```

もちろんlist自身も内包できる。また内包してもlistとして扱い続けれれる
```python
>>> num_array = [[1, 2, 3], [4, 5, 7]]
>>> type(num_array)
<class 'list'>
```

配列の要素を指定するとき負の値を使える
```python
x = ["a", "b", "c", "d"]
x[1]
x[-3] # same result!
```

listの要素の範囲指定の仕方として例えば下記のリストの場合、1と2になる
配列の要素は0,1,2,3で指定した末尾の要素(3)は呼ばれないので1の"b"から2の"c"まで
```python
>>> x = ["a", "b", "c", "d"]
>>> x[1:3]
['b', 'c']
```

また指定しない場合、先頭からもしくは末尾までになる
```python
>>> x = ["a", "b", "c", "d"]
>>> x[:2]
['a', 'b']
>>> x[2:]
['c', 'd']
>>> x[:]
['a', 'b', 'c', 'd']
```

そして先程リスト内包ができると記述した通り、リストの中の要素のを指定するときにも
下記のような指定の仕方ができる
```python
>>> x = [["a", "b", "c"],
...      ["d", "e", "f"],
...      ["g", "h", "i"]]
>>> x[2][0]
'g'
>>> x[2][:2]
['g', 'h']
```

リストの結合は+で結び、
```python
>>> x = ["a", "b", "c", "d"]
>>> y = x + ["e", "f"]
>>> y
['a', 'b', 'c', 'd', 'e', 'f']
```

リスト内の要素はdel()で指定して削除する
```python
>>> x = ["a", "b", "c", "d"]
>>> del(x[1])
>>> x
['a', 'c', 'd']
```

## Functions and Packages
maxという関数の使い方見たいときは下記のように指定する参照できる
```python
help(max)
?max
```

関数によってはsortedのようにoptionつきのものもある
reverseで並び替え方向を降順に変える
```python
>>> first = [11.25, 18.0, 20.0]
>>> second = [10.75, 9.50]
>>> full = first + second
>>> full_sorted = sorted(full,reverse=True)
>>> print(full_sorted)
[20.0, 18.0, 11.25, 10.75, 9.5]
```

関数の他にmethodというものがある
例えば文字列をすべて大文字にしたり、特定の文字の数を数えたり
```python
>>> place = "poolhouse"
>>> place_up = place.upper()
>>> print(place_up)
POOLHOUSE     
>>> print(place.count('o'))
3
```

関数などを含んだpackageを呼び出すことで含まれる関数などを使用することができる
```python
>>> from math import radians
>>> radians(12)
0.20943951023931956
```

## Numpy
効率的な数値計算を行うことができ多次元配列もサポートするパッケージ
ということでlistをnumpy配列に変換するとtypeがnumpy.ndarrayになっている
```python
baseball = [180, 215, 210, 210, 188, 176, 209, 200]
import numpy as np

# Create a numpy array from baseball: np_baseball
np_baseball = np.array(baseball)

# Print out type of np_baseball
print(type(np_baseball))
<class 'numpy.ndarray'>
```

listと異なる点として同じ2をかけても結果が異なる
```python
>>> baseball = [180, 215, 210, 210, 188, 176, 209, 200]
>>> baseball * 2
[180, 215, 210, 210, 188, 176, 209, 200, 180, 215, 210, 210, 188, 176, 209, 200]
>>> import numpy as np
>>> n_baseball = np.array(baseball)
>>> n_baseball * 2
array([360, 430, 420, 420, 376, 352, 418, 400])
```

また特定の条件に合致するかなどもnumpyを使うことで比較でき抽出できる、便利
```python
>>> baseball > 200
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: unorderable types: list() > int()
>>> n_baseball > 200
array([False,  True,  True,  True, False, False,  True, False], dtype=bool)
>>> n_baseball[n_baseball > 200]
array([215, 210, 210, 209])
```

一方でlistと異なり、Numpyは異なるタイプの要素を混ぜることができない。  
一瞬できるように見えるが型強制が行われているだけである
```python
>>> np.array([1,2,3])*2
array([2, 4, 6])
>>> np.array([1,"AAA",3])*2
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: ufunc 'multiply' did not contain a loop with signature matching types dtype('<U21') dtype('<U21')
```

Numpy配列に変換した配列の構造を知る場合は、shapeメソッドが使用できる
```python
baseball = [[180, 78.4],
            [215, 102.7],
            [210, 98.5],
            [188, 75.2]]

import numpy as np
np_baseball = np.array(baseball)

# Print out the shape of np_baseball
print(np_baseball.shape)
<class 'numpy.ndarray'>
(4, 2)
```

numpy配列同士でも計算ができる
```python
>>> import numpy as np
>>> np_mat = np.array([[1, 2],
...                    [3, 4],
...                    [5, 6]])
>>> np_mat * 2
array([[ 2,  4],
       [ 6,  8],
       [10, 12]])
>>> np_mat + np.array([10, 10])
array([[11, 12],
       [13, 14],
       [15, 16]])
>>> np_mat + np_mat
array([[ 2,  4],
       [ 6,  8],
       [10, 12]])
```

methodを適用して平均や中央値なども計算することもできる
```python
>>> import numpy as np
>>> x = [1, 4, 8, 10, 12]
>>> np.mean(x)
7.0
>>> np.median(x)
8.0
```

##  最後に一言
基本的にどのプログラミング言語でも基礎の部分は一緒だけど、  
ライブラリなどが出てくると使いこなせれば便利な反面、いろいろそのライブラリ特有の型やメソッドがあったりするので  
いろいろ覚える必要がありそう。それにしてもnumpyでの演算は高速。。。

DataCamp Part1: Introduction to Python


## はじめに
ここ数年「AI」という単語を耳にタコができるぐらい聞いて、結局なんのことか本質を掴めず、  
このままだと「なんかデータをいっぱい突っ込めばいい感じにやってくれる」という間違った認識に飲み込まれそうなので、  
今回は「データを観る」という原点に立ち返り、irisデータを使ってデータ予測の一端に触れてみます。

## データセット
今回扱う下記アヤメ(iris)データは、“versicolor”, “setosa”, “virginica” という 3 種類の品種のアヤメのがく片 (Sepal)、花弁 (Petal) の幅および長さを計測したデータです。  
ただし元のデータの中から3つほどデータを選び、「Iris-unknown」として、格納しています。

https://github.com/RuBisCO28/Iris/blob/master/iris.csv

```text
データセットの詳細
レコード数 	150
カラム数 	5

各カラムの構成
sepal length (cm) 	がく片の長さ
sepal width (cm) 	がく片の幅
petal length (cm) 	花弁の長さ
petal width (cm) 	花弁の幅
species                 品種
```

![1](/images/iris/1.png)

## お題
さて今回のお題は、このirisデータを使って下記3つのデータが3種類のどの品種に当たるかの分類をやってみます。  
前述の通り、品種の部分はあとで答え合わせのために「Iris-unknown」として伏せておきます。

```text
5.1,3.7,1.5,0.4,Iris-unknown
6.1,2.8,4.7,1.2,Iris-unknown
6.8,3.0,5.5,2.1,Iris-unknown
```

## 分類方法
さてどのように分類をしていきましょう。
色々とやり方はあると思いますが、今回はテーマである「データを観る」に沿ってまずは「Iris-unknown」を含めたデータを見ていきます。

## 各変数ごとの分布の違い
まずは、各変数ごとに分布の違いがないか見ていきます。  
また各分布の中で「Iris-unknown」がどこに位置するかも合わせて見ていきます。

```python
import pandas as pd
import seaborn as sns
import matplotlib.pyplot as plt

df = pd.read_csv('iris.csv', sep=',', header=None, names=('sepal_length','sepal_width','petal_length','petal_width','species'))
iris_species_arr = df['species'].unique()

# sepal_length
for index, item in enumerate(iris_species_arr):
    data = df.query('species=="'+item+'"')['sepal_length']
    sns.distplot(data,kde=False,rug=False,label=item)

plt.legend()
plt.show()

# sepal_width
for index, item in enumerate(iris_species_arr):
    data = df.query('species=="'+item+'"')['sepal_width']
    sns.distplot(data,kde=False,rug=False,label=item)

plt.legend()
plt.show()

# petal_length
for index, item in enumerate(iris_species_arr):
    data = df.query('species=="'+item+'"')['petal_length']
    sns.distplot(data,kde=False,rug=False,label=item)

plt.legend()
plt.show()

# petal_width
for index, item in enumerate(iris_species_arr):
    data = df.query('species=="'+item+'"')['petal_width']
    sns.distplot(data,kde=False,rug=False,label=item)

plt.legend()
plt.show()
```

![2](/images/iris/sepal_length.png)
![3](/images/iris/sepal_width.png)
![4](/images/iris/petal_length.png)
![5](/images/iris/petal_width.png)

データの各変数の分布具合は見えました。  
iris-setosaがほかの2種と分布が離れているように見えますが、予測するにはまだ不十分なため、もう少し詳しく見ていきます。

## 2変数の組み合わせによる分布の違い
さきほどは各変数ごとに見ていきましたが、今回は2変数の組み合わせで散布図を作成し、分布傾向を見ていきます。

```python
g = sns.pairplot(df,hue = "species",diag_kind="kde")
plt.show()
```

![6](/images/iris/pairplot.png)

さていかがでしょうか？
赤丸がunknownですが、多くのpairplotでIris-setosaとかぶっているものがあります。  
どうやら下記データは「Iris-setosa」のようです。

```text
5.1,3.7,1.5,0.4,Iris-setosa
```

で残りですが、petal_widthとsepal_widthの組み合わせ散布図を見るとそれぞれ分かれているので  
下記データは、それぞれ「Iris-versicolor」,「Iris-virginica」と予測ができます。

```text
6.1,2.8,4.7,1.2,Iris-versicolor
6.8,3.0,5.5,2.1,Iris-virginica
```

## 正解
正解は下記になります。
今回新しいデータではなく元のデータから選んだので、無作為に選んだとはいいがたいですが、分布図からある程度予測ができることが分かりました。
```text
5.1,3.7,1.5,0.4,Iris-setosa
6.1,2.8,4.7,1.2,Iris-versicolor
6.8,3.0,5.5,2.1,Iris-virginica
```

##  最後に一言
今回機械学習には触れていませんが、データを可視化するだけでもある程度目星をつけることができました。  
もちろん元のデータが良いというのもありますが、色々な角度からデータを見ることで新たな発見だったり、モデルを作りにしても 精度向上につながったりということがあるのでとても重要な作業です。  


Attracted by iris data


## はじめに
前回に引き続き、Web周りを実装していきます。

## おさらい（ルーティング）
デバイス一覧表示は実装終えたので、他のルーティングを実装していきます。

```text
GET /devices - デバイス一覧表示
GET /devices/create - デバイス新規登録用フォームの表示
POST /devices - デバイス新規登録
GET /devices/{id} - 貸出返却ログ表示
GET /devices/{id}/edit - デバイス情報編集用フォームの表示
PUT /devices/{id} - デバイス名更新
GET /devices/{id}/delete - デバイス削除用フォームの表示
DELETE /devices/{id} - デバイスの削除

GET /users - ユーザー一覧表示
GET /users/create - ユーザー新規作成用フォームの表示
POST /users - ユーザー新規登録
DELETE /devices/{id} - ユーザー削除
```

## デバイス新規登録用フォームの表示とデバイス新規登録
デバイス一覧を表示するためのルーティングとほぼ同じくDBファイルにSQLで入力データをinsertします。

```php
// デバイス新規登録用フォームの表示
$app->get('/devices/create', function (Request $request, Response $response) {
    return $this->renderer->render($response, 'tasks/create.phtml');
});

// 新規登録
$app->post('/devices', function (Request $request, Response $response) {
    $device_name = $request->getParsedBodyParam('device_name');
　〜省略〜
    $sql = 'INSERT INTO mdt(device_name,device_status,user_name,last_modify_date) values (:device_name,"","-","")';
    $stmt = $pdo->prepare($sql);
    $result = $stmt->execute([':device_name' => $device_name]);
    if (!$result) {
        throw new \Exception('could not save the ticket');
    }
    return $response->withRedirect("/devices");
});
```

今回は前回と逆で入力フォームから受け取ったデータを、getParsedBodyParamで  
phpの変数に代入して、SQLを発行してます。  
また新規登録後にwithRedirect("/devices")で/device配下に自動でリダイレクトをかけてます。

![qr9](/images/qr/9.png)

## 貸出返却ログ表示
デバイスごとに貸出返却ログをlogディレクトリ配下にcsvファイルとして配置しているので、  
このcsvファイルを参照して表示します。

```php
// 貸出返却ログ表示
$app->get('/devices/{id}', function (Request $request, Response $response, array $args) {
　〜省略〜
    $sql = 'SELECT device_name FROM mdt WHERE id = :id';
    $stmt = $pdo->prepare($sql);
    $stmt->execute(['id' => $args['id']]);
    $device = $stmt->fetch();
    if (!$device) {
        return $response->withStatus(404)->write('not found');
    }
    $path= './log/' . $device["device_name"] . '.csv';
    if (file_exists($path)) {
        $fp = fopen($path, 'r');
        $data = array();
        $i=0;
        while (($line = fgetcsv($fp)) !== FALSE) {
            $data[$i]['when']=$line[0];
            $data[$i]['who']=$line[1];
            $data[$i]['what']=$line[2];
            ++$i;
        }
        fclose($fp);
    } else {
        return $response->withStatus(404)->write('not found');
    }
    return $this->renderer->render($response, 'tasks/show.phtml', $data);
});
``` 

![qr10](/images/qr/10.png)

## デバイス情報編集用フォームの表示とデバイス名更新

```php
// 編集用フォームの表示
$app->get('/devices/{id}/edit', function (Request $request, Response $response, array $args) {
　〜省略〜
    $sql = 'SELECT * FROM mdt WHERE id = :id';
    $stmt = $pdo->prepare($sql);
    $stmt->execute(['id' => $args['id']]);
    $device = $stmt->fetch();
    if (!$device) {
        return $response->withStatus(404)->write('not found');
    }
    $data = ['device' => $device];
    return $this->renderer->render($response, 'tasks/edit.phtml', $data);
});

// デバイス名更新
$app->put('/devices/{id}', function (Request $request, Response $response, array $args) {
    $device_name = $request->getParsedBodyParam('device_name');
　〜省略〜
    $sql = 'UPDATE mdt SET device_name = :device_name WHERE id = :id';
    $stmt = $pdo->prepare($sql);
    $stmt->execute([ ':device_name' => $device_name, ':id' => $args['id'] ]);
    return $response->withRedirect("/devices");
});
```

ブラウザからフォームデータを送るためには GET か POST でなければいけません。  
そこで、擬似的に PUT や DELETE を指定するために、下記のように隠し要素に HTTP メソッド名を入れています（この場合は "put"）。

```html
<input type="hidden" name="_METHOD" value="put">
```
Slim の場合は、 "_METHOD" というフォームデータを送って対応します。

## デバイス削除用フォームの表示とデバイスの削除

```php
// デバイス削除フォーム
$app->get('/devices/{id}/delete', function (Request $request, Response $response, array $args) {
　〜省略〜
    $sql = 'SELECT * FROM mdt WHERE id = :id';
    $stmt = $pdo->prepare($sql);
    $stmt->execute(['id' => $args['id']]);
    $device = $stmt->fetch();
    if (!$device) {
        return $response->withStatus(404)->write('not found');
    }
    $data = ['device' => $device];
    return $this->renderer->render($response, 'tasks/delete.phtml', $data);
});


// デバイス削除
$app->delete('/devices/{id}', function (Request $request, Response $response, array $args) {
　〜省略〜
    $sql = 'SELECT * FROM mdt WHERE id = :id';
    $stmt = $pdo->prepare($sql);
    $stmt->execute(['id' => $args['id']]);
    $device = $stmt->fetch();
    if (!$device) {
        return $response->withStatus(404)->write('not found');
    }
    $stmt = $pdo->prepare('DELETE FROM mdt WHERE id = :id');
    $stmt->execute(['id' => $device['id']]);
    return $response->withRedirect("/devices");
});
```

![qr11](/images/qr/11.png)


## ユーザー系のルーティング
デバイス系と実装がかぶるので説明省略。  

## ページ閲覧制限
ユーザーやデバイスの編集などadmin権限をもつ人だけに権限を付与したい場合、  
ページに閲覧権限をかけることができる。
具体的には、下記クラスをroute.phpに記載し、
```php
class CAuthentication {
    public function __invoke($request, $response, $next) {
        if ($this->validateUserKey("user", "pass") === false) {
            return $response->withStatus(401);
        }
        return $next($request, $response);
    }
    function validateUserKey($uid, $key) {
        if(file_exists('admin')){
            return true;
        } else {
            return false;
        }
    }
}
```

下記のように"->add(new CAuthentication())"を関数の最後に追加することで、  
その実行に制限を設けることができます。
```php
// デバイス新規登録用フォームの表示
$app->get('/devices/create', function (Request $request, Response $response) {
    return $this->renderer->render($response, 'tasks/create.phtml');
})->add(new CAuthentication());
```

実際に、adminでアクセスしないと401 Unauthorizedで弾かれていることがわかります。

![qr12](/images/qr/12.png)


## Demo
さてadmin用のQRコードを生成し（今回はadminのユーザーIDが4）、

```bash
qrencode -o admin.png "userid:4"
```

さきにターミナルで下記コマンドを実行し、  
ブラウザでhttp://localhost:8080/devices を開いておき

```bash
$ php -S localhost:8080 -t public
```


さらに別ターミナルから以下のコマンドを実行した後に、  
さきほどのQRコードをかざすと、

```bash
$ cd src
$ ./device_manage.py
```


下記admin画面が開けるかと思います。  
あとは各リンクやボタンから実装したルーティングが正常に動作しているかご確認ください。
  

![qr13](/images/qr/13.png)

##  最後に一言
Web周りが長くなってしまいましたが、一旦これにて完了です。  
次回は最後ということで、起動用GUIと鍵の開け閉めをモーターで制御する部分を実装していく予定です。

Build management system with Raspberry pi and QR Part4


## はじめに
前回の続き。  
今度は借りる人が、現在の貸出状況を確認できるようWeb周りを実装していきます。

## Webフレームワーク
QR読み込みの部分はPythonで書いたのでWebの部分もPythonとDjangoにしようかと思いつつ、今回はPHPとSlimでやっていこうと思います。  
PHPのWebフレームワークというとLaravelが人気ですが、今回はスリムにいきたいので、Slimにしました。

## Slimのインストール
Slimをインストールするにはcomposerが必要なので先にインストール。  
なにかエラーが出たら、phpのpackageが足りない可能性があるのでエラーメッセージを見て必要に応じてインストール。
```bash
$ curl -sS https://getcomposer.org/installer | php
$ sudo mv composer.phar /usr/local/bin/composer
```

slim-skeletonをベースにSlimアプリケーションを作成していきます。  
今回はMDCというプロジェクト名をつけました。
```bash
$ composer create-project slim/slim-skeleton MDC
```

では、アプリケーションを動かしてみましょう。
ターミナルから以下のコマンドを実行してください。
```bash
$ php -S localhost:8080 -t public
```

ブラウザでhttp://localhost:8080/ を開くと下記画面が開けるかと思います。

![qr7](/images/qr/7.png)


## ルーティング
さて、デバイスとユーザー管理のために今回は下記のルーティングをセットします。   
これにより、デバイスとユーザーの一覧表示、新規作成、1件表示、編集、削除ができるようになります。

```text
GET /devices - デバイス一覧表示
GET /devices/create - デバイス新規登録用フォームの表示
POST /devices - デバイス新規登録
GET /devices/{id} - 貸出返却ログ表示
GET /devices/{id}/edit - デバイス情報編集用フォームの表示
PUT /devices/{id} - デバイス名更新
GET /devices/{id}/delete - デバイス削除用フォームの表示
DELETE /devices/{id} - デバイスの削除

GET /users - ユーザー一覧表示
GET /users/create - ユーザー新規作成用フォームの表示
POST /users - ユーザー新規登録
DELETE /devices/{id} - ユーザー削除
```

では、$app->get('/[{name}]', ...) の行より前に、以下のルーティングを追加します。

```php
// デバイス一覧表示
$app->get('/devices', function (Request $request, Response $response) {
});

// デバイス新規登録用フォームの表示
$app->get('/devices/create', function (Request $request, Response $response) {
});

// 新規登録
$app->post('/devices', function (Request $request, Response $response) {
});

// 貸出返却ログ表示
$app->get('/devices/{id}', function (Request $request, Response $response, array $args) {
});

// 編集用フォームの表示
$app->get('/devices/{id}/edit', function (Request $request, Response $response, array $args) {
});

// デバイス名更新
$app->put('/devices/{id}', function (Request $request, Response $response, array $args) {
});

// デバイス削除フォーム
$app->get('/devices/{id}/delete', function (Request $request, Response $response, array $args) {
});

// デバイス削除
$app->delete('/devices/{id}', function (Request $request, Response $response, array $args) {
});

// ユーザー一覧
$app->get('/users', function (Request $request, Response $response) {
});

// ユーザー新規作成用フォームの表示
$app->get('/users/create', function (Request $request, Response $response) {
});

// ユーザー新規作成
$app->post('/users', function (Request $request, Response $response) {
});

// ユーザー削除
$app->delete('/users/{id}', function (Request $request, Response $response, array $args) {
});

$app->get('/[{name}]', function (Request $request, Response $response, array $args) {
});
```

## データベース(sqlite)とのつなぎ込み
デバイスやユーザー一覧を表示するためには、デバイスの一覧情報が記録されているsqlite3で作成したDBファイルに  
phpからアクセスする必要があるため、前の記事で作成したQRを読み取り記録するためのpythonコードとDB群を  
publicディレクトリ配下に配置し、運用していきます。  

```text
device_manage.py
manage_device.db
user.db
```

phpのsqlite3パッケージをインストールすることで、ローカルのsqliteファイルにアクセスできます。
```text
sudo apt install php7.2-sqlite3
```

## デバイス一覧画面
準備が整ったので、デバイス一覧を表示するためのルーティングから編集していきます。
```php
// デバイス一覧表示
$app->get('/devices', function (Request $request, Response $response) {
    try {
        $pdo = new PDO('sqlite:manage_device.db');
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
    } catch (PDOException $e) {
        echo 'Connection failed: ' . $e->getMessage();
        exit;
    }
    $sql = 'SELECT * FROM mdt';
    $stmt = $pdo->query($sql);
    $devices = [];
    while($row = $stmt->fetch()) {
        $devices[] = $row;
    }
    $data = ['devices' => $devices];
    if(file_exists('admin')){
        return $this->renderer->render($response, 'tasks/admin.phtml', $data);
    } else {
        return $this->renderer->render($response, 'tasks/index.phtml', $data);
    }
});
```

ここでは、"manage_device.db"にアクセスした後、下記SQLコマンドを実行し、  
登録されているデバイス情報を取得し、$devicesに格納して、  
管理者用の管理ページ(admin.phtml)または一般ユーザー用の管理ページ(index.phtml)にデータを渡します。

```sql
SELECT * FROM mdt;
```

続いて、デバイス一覧画面のUIとなるテンプレートファイルを作成します。
templates ディレクトリの下に、tasks ディレクトリをつくり、そこに index.phtml という下記ファイルをつくります。  

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8"/>
  <title>デバイス管理モニター</title>
  <link data-react-helmet="true" rel="icon" href="https://www.raspberrypi.org/homepage-9df4b/favicon.png"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
  <h1>デバイス管理モニター</h1>~                                
  <script>
  function doReload() {
      window.location.reload();
  }
   
  window.addEventListener('load', function () {
      setTimeout(doReload, 5000);
  });
  </script>
  <?php
    if(file_exists('login_user')){
        $fp = fopen('login_user', 'r');
        $login_user = "Hi! " . fgets($fp) . "-san";
        fclose($fp);
    } else {
        $login_user = "";
    }
  ?>
  <div class="card">
    <div class="card-body">
      <h2 class="card-title">デバイス一覧</h2>
      <h3><font color=red><?php echo htmlspecialchars($login_user, ENT_QUOTES, 'UTF-8', false); ?></font></h3>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>デバイス名</th>
            <th>ステータス</th>
            <th>ユーザ名</th>
            <th>最終更新日時</th>
            <th>貸出返却ログ</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($devices as $device): ?>
            <tr>
            <th scope="row"><?= htmlspecialchars($device['id'], ENT_QUOTES, 'UTF-8', false) ?></th>
            <td><?= htmlspecialchars($device['device_name'], ENT_QUOTES, 'UTF-8', false) ?></td>
            <td><?= htmlspecialchars($device['device_status'], ENT_QUOTES, 'UTF-8', false) ?></td>
            <td><?= htmlspecialchars($device['user_name'], ENT_QUOTES, 'UTF-8', false) ?></td>
            <td><?= htmlspecialchars($device['last_modify_date'], ENT_QUOTES, 'UTF-8', false) ?></td>
            <td><a href="/devices/<?= $device['id']?>" class="btn btn-primary">ログ</a></td>
            </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html> 
```

渡された$devicesに格納された情報をforeachで回して取り出し、htmlに出力しています。  
なお、ログインしているユーザー名についてはログイン用のQRコードをかざしたときに  
"login_user"というファイルが作成されるので、そのファイルをダイレクトに参照します。

## header, footer
この先、似たようなヘッダーとフッダーを持つhtmlファイルをページごとに作るので  
先にheader.phtmlとfooder.phtmlにまとめておく。

header.phtml
```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8"/>
  <title>デバイス管理モニター</title>
  <link data-react-helmet="true" rel="icon" href="https://www.raspberrypi.org/homepage-9df4b/favicon.png"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
  <h1>デバイス管理モニター</h1>
```

footer.phtml
```html
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
```

## htmlspecialchars
XSS用に備えてhtmlspecialcharsを挟みましたが関数名が長いので、ヘルパー関数化してしまいます。

まず、src/helpers.php というファイルを作成して、以下のように"e"という関数を作ります。
```php
<?php

if (!function_exists('e')) {
    function e(string $s): string {
        return htmlspecialchars($s, ENT_QUOTES, 'UTF-8', false);
    }
}
```

続いて、 composer.json に以下の記述を追加します。
```php
    "autoload": {
        "files": ["src/helpers.php"]
    },
```

最後に、ターミナルから以下のコマンドを実行します。
これにより、"e"という関数が使えるようになりました。
```bash
$ composer du
```

## Demo
最終的に以下のようにまとめて、アプリケーションを動かしてみましょう。
```html
<?= $this->fetch('header.phtml') ?>
  <script>
  function doReload() {
      window.location.reload();
  }
   
  window.addEventListener('load', function () {
      setTimeout(doReload, 5000);
  });
  </script>
  <?php
    if(file_exists('login_user')){
        $fp = fopen('login_user', 'r');
        $login_user = "Hi! " . fgets($fp) . "-san";
        fclose($fp);
    } else {
        $login_user = "";
    }
  ?>
  <div class="card">
    <div class="card-body">
      <h2 class="card-title">デバイス一覧</h2>
      <h3><font color=red><?php echo e($login_user);?></font></h3>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>デバイス名</th>
            <th>ステータス</th>
            <th>ユーザ名</th>
            <th>最終更新日時</th>
            <th>貸出返却ログ</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($devices as $device): ?>
            <tr>
            <th scope="row"><?= e($device['id']) ?></th>
            <td><?= e($device['device_name']) ?></td>
            <td><?= e($device['device_status']) ?></td>
            <td><?= e($device['user_name']) ?></td>
            <td><?= e($device['last_modify_date']) ?></td>
            <td><a href="/devices/<?= $device['id']?>" class="btn btn-primary">ログ</a></td>
            </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>
  </div>
<?= $this->fetch('footer.phtml') ?>
```

ターミナルから以下のコマンドを再度実行してください。
```bash
$ php -S localhost:8080 -t public
```

ブラウザでhttp://localhost:8080/devices を開くと下記画面が開けるかと思います。  

![qr8](/images/qr/8.png)

##  最後に一言
色々機能を追加しようとすると、route.phpが煩雑になりそうですね。  
次回は他の機能を、実装していく予定です。

Build management system with Raspberry pi and QR Part3


## はじめに
前回の続き。  
カメラでのQR読み込みは完了したので、次はこれといった操作がなければ自動ログアウトできる機能を、実装していきます。

## ログイン/ログアウト
まずログイン時にログインユーザーの名前を記載した、login_userというファイルを生成することにします。  
ログアウト時は、login_userというファイルを削除します。  
また今回は、後ほどブラウザ上で貸出返却の状態を確認したり、デバイスの追加削除などをできるようにするため、
adminというファイルを管理者がログインした際に作成します。

```python
def login_user(user_name):
    if user_name == "admin":
        f = open('admin', 'w')
        f.write(user_name)
        f.close()
    f = open('login_user', 'w')
    f.write(user_name)
    f.close()

def logout_user(user_name):
    if user_name == "admin":
        os.remove('admin')
    os.remove('login_user')
```

## 自動ログアウトのためのタイマー実装
さて、カードキーをかざして使用するコピー機を使ったことがある方は想像できるかもしれませんが、
特に動作がなかった時、ある一定時間経つと自動でログアウトします。  
今回は、下記のようにログイン時にloggerというファイルを作成しておき、タイマーを設定します。  
タイマーはログイン時のみ60秒間をセットします。
```python
# auto_logout
if os.path.exists('login_user'):
    if not os.path.exists('logger'):
        f = open('logger', 'w')
        f.write(str(pyautogui.position()))
        f.close()
        stop = False
        auto_log(60)
```

そして、60秒間操作がなかった場合、timeupというファイルを作成します。

```python
def timer_log(secs):
    i = secs
    while not stop:
        if i == 0:
            break
        print(i)
        i -= 1
        time.sleep(1)
    if not stop:
        f = open('timeup', 'w')
        f.write('timeup')
        f.close()

def auto_log(target_time):
    thread = Thread(target=timer_log,args=(target_time,))
    thread.start()
```

つまり、loggerは自動ログアウトするかの判定ファイル、timeupはタイマーのカウントが終了したことを示すファイルとしました。  
実装の仕方としては、前回のロックアンロックと同じ、threadを使用して、タイマーを実装しました。

## 自動ログアウト回避の条件と実装
次に、自動ログアウト回避の条件として、下記を設定しました。
```text
貸出返却操作があった
マウスが動いた
```

「貸出返却操作があった」は、QRコードでデバイスのIDが読み込まれたときに先ほどのloggerファイルに貸出(borrow)もしくは返却(return)の文字を記載します。
```python
def modify_log(msg):
    f = open('logger', 'w')
    f.write(msg)
    f.close()
```

「マウスが動いた」は、ログイン時のところで実装したようにpyautoguiのライブラリを使用して、マウスカーソルの現在位置を取得、記録します。  
```bash
$ pip3 install pyautogui
```

```python
if not os.path.exists('logger'):
    f = open('logger', 'w')
    f.write(str(pyautogui.position()))
    f.close()
```

そしてタイマーでカウントしている間にマウスカーソルが動くと、タイムアップ後に、下記compare_log()で自動でログアウトするか否かを判定します。
```python
def compare_log():
    cpos = str(pyautogui.position())
    f = open('logger', 'r')
    for line in f:
        if(line == cpos):
            f.close()
            return True
    f.close()
    return False
```

もし、自動でログアウトできないと判断された場合は、再度タイマーを設定します。このときの時間は10秒です。
```python
if os.path.exists('timeup'):
    if compare_log():
        print("auto logout is done")
        delf()
        print("Good Bye! {0}!!".format(username))
        logout_user(username)
        userid = 0
        username = ""
        lf = 0
    else:
        print("interrupt auto logout")
        os.remove('timeup')
        f = open('logger', 'w')
        f.write(str(pyautogui.position()))
        f.close()
        stop = False
        auto_log(10)
```

## タイマーカウント中のログアウト
さて、今回実装で一番悩んだのは、タイマーカウント中にログインIDをかざしてログアウトした場合、タイマーをリセットする必要があるけれど、どう実装するか。  
今回はthreadでタイマーを実装しているので、実行されているthreadを止める方法をググったところ、どうやらboolで止めればよいらしい。  
下記を参考にstopというbool変数で制御しました。

参考URL : https://qiita.com/tag1216/items/2dcb112f8018eb19a999

```python
def timer_log(secs):
    i = secs
    while not stop:
        if i == 0:
            break
        print(i)
        i -= 1
        time.sleep(1)
    if not stop:
        f = open('timeup', 'w')
        f.write('timeup')
        f.close()
```

これにより、カウント中もログアウトが実行されれば、stopをTrueにし、関連ファイルを削除することで次の人がスムーズに使うことができます。

```python
print("Good Bye! {0}!!".format(username))
logout_user(username)
stop = True
delf()
userid = 0
username = ""
lf = 0
lock_unlock()
```

##  動作テスト
最初にziroのユーザーIDをかざした後、60秒のカウントがはじまります。  
その後、デバイスを借り、再度ziroのユーザーIDをかざしてマニュアルログアウトしてます。

![qr5](/images/qr/5.png)

今度はichiroでログインし直し、デバイスを借ります。  
借りたことで自動ログアウトが阻止され(interrupt auto logout)、10秒のタイマーのカウントがはじまり自動ログアウトしてます。

![qr6](/images/qr/6.png)

動画は貼れませんでしたが、うまく機能しているようです。

##  コード
ここまでのコードは下記にあげてます。ご参考ください。

Github : https://github.com/RuBisCO28/QR_Reader

##  最後に一言
threadは便利な反面、奥が深そうです。
次回はブラウザで貸出状況を確認できる機能を、実装していく予定です。


Build management system with Raspberry pi and QR Part2


## はじめに
アプリを作ると必ずといっていいほど発生する動作テスト。  
あらゆるデバイスで試さなければいけないので、複数人でテストした場合、誰がどのデバイスを借りているのかを把握したいと思うことがよくあります。  
できることなら使用しているユーザーとデバイス、さらに借りた時間をひも付けて、いつでも参照できるようにしておきたい。  
ということでQRコードを使用したラズパイによるデバイス管理システムを作っていきます。

## 想定シナリオと改善ポイント
以前は、デバイスは1つのところで管理され、借りる時に紙に使用しているユーザーとデバイス、さらに借りた時間を記載し、使用開始。  
使用後は返却時間を記載し、元の場所に戻すフローでした。  
これをカメラにQRをかざし、貸出/返却を記録する下記フローに変更します。  
```text
ユーザーQR表示->ログイン->デバイスQR表示->貸出or返却->ユーザー表示->ログアウト
```
あわせて現在の状況もモニターで表示します。  

## 用意するもの
```text
Rasberry Pi 3 MODEL B (OS Rasbian)
USBカメラ
QRコード（ユーザー用とデバイス用）
```

## システムフロー
プログラムを書きながら考えていきたいですが、まずはシステムフローを書き出してみます。

![qr1](/images/qr/1.jpg)

## データベース作成
次にユーザー情報を管理するDBと貸出/返却を記録するためのDBの二つを用意します。
下記はテスト用にデータを埋めた例です。

* ユーザーDB

|ID |ユーザーID |ユーザー名|
|--------|----------------|----|
|1  |1 |ichiro|
|2|2|ziro|
|3|3|saburo|

* デバイス管理DB  

|ID |デバイスID |デバイスステータス   |借りたユーザー名  |最終更新日時|
|--------|----------------|----|----|----|
|1  |123 |貸出可|-|2018/11/9 09:00:00|
|2|456|貸出中|ichiro|2018/11/10 07:00:00|
|3|789|貸出可|-|2018/11/11 06:00:00|


下記にこれらのDBを作るためのコードを記載します。  
今回DBは管理が簡単なSQLiteを使用し、Pythonで制御することにしました。

<script src="https://gist.github.com/RuBisCO28/598054548016e930aeee672a1647d999.js"></script>

実行すると
```bash
$ python3 create_db.py 
(1, '123', '', '-', '')
(2, '456', '', '-', '')
(3, '789', '', '-', '')
(1, 1, 'ichiro')
(2, 2, 'ziro')
(3, 3, 'saburo')
```

## QRコード作成
QRコードを作成してみましょう。今回はqrencodeコマンドを使います。  
```bash
$ sudo apt-get install qrencode
```

インストール完了後、下記コマンドで読み取りサンプルとしてpng画像を出力しておき、紙などに印刷しておきます。
```bash
qrencode -o 789.png "deviceid:789"
```


## カメラ読み取り
まず、Rasberry Piの設定からカメラを有効にします。

![qr1](/images/qr/2.png)

今回はPythonでカメラを制御して読み取りなどするため、cv2パッケージを使用します。  
```bash
$ pip3 install opencv-python
```

今回はバージョン3.4.3を使用します。  
もしこの時点でエラーなど出た場合は、足りないパッケージなどがないかご確認ください。
```bash
$ python3
Python 3.5.3 (default, Sep 27 2018, 17:25:39) 
[GCC 6.3.0 20170516] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import cv2
>>> cv2.__version__
'3.4.3'
```

またQR読み込みなどのために、下記パッケージも同様に使用します。  
```bash
$ pip3 install pyzbar
$ pip3 install python3-xlib
```

準備が整ったのでカメラ動作確認およびQR読み込みがうまくいくかを下記コードで確認します。

```python
#!/usr/bin/env python3

import cv2
from pyzbar.pyzbar import decode
from PIL import Image

if __name__ == "__main__":
    capture = cv2.VideoCapture(0)
    if capture.isOpened() is False:
        raise("IO Error")

    while True:
        ret, frame = capture.read()
        if ret == False:
            continue

        cv2.imshow("frame", frame)
        data = decode(frame)

        if data != []:
            code = data[0][0].decode('utf-8', 'ignore')
            print(code)

        k = cv2.waitKey(1)
        if k == 27:
            break

    capture.release()
    cv2.destroyAllWindows()
```

カメラ起動後、frameにQRコードが映った時、デコードして文字表示を行っています。  
動画は貼れませんでしたが、うまくいっているようです。

![qr1](/images/qr/3.png)

## 貸出返却処理
最後に、先ほど描いたユーザーフローに沿って貸出返却処理を実装していきます。

<script src="https://gist.github.com/RuBisCO28/5f1a10a650dfffa3e27f9a879757b351.js"></script>

読み取るQRコードは下記書式で統一。
```text
userid:***
deviceid:***
```

PythonとSQLiteのつなぎこみの部分の説明はしませんが、それぞれの処理を関数化することで貸出返却処理を実装しました。
```python
user_search(): # かざされたユーザーIDが存在するかを確認
borrow_device(): # 貸出処理
device_search(): # かざされたデバイスIDが存在するかを確認
return_device(): # 返却処理
```

またデータベース上の貸出返却処理とは別に、誰がいつ貸出返却を行ったかの履歴は、logディレクトリ以下にcsvファイルとして保存することにしました。

さて、今回一番実装の部分で苦労したのは、「ずっと動いているカメラの認識をどう制御するか」です。  
基本的にカメラの認識はwhileループで動いているため、かざしている間に何回も認識してしまいます。  
そこで、どう解決したかというと必ずQRコードの読み取りを行った後に下記処理を入れることで二重読み込みを防ぎました。  
```text
lock_unlock() # 読み込みロックとアンロック
```
ロックアンロックの実装はthreadを用いることで、カメラの認識を止めることなく別スレッドでロックアンロックを実現しました。
```python
def timer(secs):
    print("Lock")
    f = open('lock', 'a')
    f.close()
    for i in range(secs, -1, -1):
        time.sleep(1)
    os.remove('lock')
    print("Unlock")

def lock_unlock():
    target_time = 5
    thread = Thread(target=timer,args=(target_time,))
    thread.start()
```
これにより、下記分岐に差し掛かったときに、lockファイルが一時的に生成されているため読み込みが行われなくなります。
```python
if not os.path.exists('lock'):
```
ただしこのままだとロックがかかったままなので、5秒後にロックを解除します。  
5秒間にした理由は、その間に次のものをかざすため、読み込まれたQRコードをカメラからいったん外すだろうという推測のものです。  

##  動作テスト
最初にデバイスIDをかざし、ユーザーIDをかざすよういわれ、ユーザーIDをかざした後、デバイスIDをかざすことでデバイスを借りてます。（返却も同様）  
動画は貼れませんでしたが、Lock、Unclockもうまく機能しているようです。

![qr1](/images/qr/4.png)

##  最後に一言
ユーザーがログアウトをし忘れるとなりすましでデバイスを借りることができてしまうので、  
これといった操作がなければ自動ログアウトできる機能を、次回は実装していく予定です。


Build management system with Raspberry pi and QR Part1


## 背景
学校や会社のPC環境は、管理者権限で色々環境を整えて、コードを書きたいと思っても中々書けないことが多い。  
もちろんExcelでマクロでも良いが、そういう話ではない。  
そう・・・コードを書きたいのだ！

## 想定環境
```text
OS : Windows 10(.NET Frame works 4.6標準搭載)
言語 : C#
エディタ : メモ帳
その他 : コマンドプロンプトとブラウザ（検索用）
```

## CUIアプリケーション作成
Windows には C# のコンパイラ（csc.exe）が既に含まれていて、特にインストールしなくても C# のコードをコンパイルすることができます。  
コンパイラのパスは下記です。

```text
C:\Windows\Microsoft.NET\Framework\v4.0.30319\csc.exe
```

では、コードを書いていきます。  
以下は簡単なHelloWorldプログラム。

```csharp
using System;

class CuiTest
{
    static void Main()
    {
        Console.WriteLine("Hello World");
    }
}
```

あとはコマンドプロンプトを開いてコンパイルして実行するだけです

```text
> C:\Windows\Microsoft.NET\Framework\v4.0.30319\csc.exe CuiTest.cs

> CuiTest.exe
Hello World
```

## GUIアプリケーション作成
CUIだけだとあまり面白みがないので、視覚的に見えるGUIアプリケーションも作成したい。
ということでWPFアプリケーションを作ってみます。

もちろん先ほどのコンパイラでもWPFアプリケーションは作成できますが、  
今回はプロジェクトビルドツール(MSBuild.exe)を使用します。  
パスは先ほどと同じ階層にあり、下記です。

```text
C:\Windows\Microsoft.NET\Framework\v4.0.30319\MSBuild.exe
```

GUIを作るにあたりWPFアプリケーションでは、XAMLで記述した見た目の部分と、C#で記述したロジックの部分を別々に分け書き、
ビルドする際に1つのクラスに合成され、コンパイルされます。  
では、プロジェクトファイル、XAMLファイル、C#ファイルの順に作成していきます。

### プロジェクトファイル

WpfTest.csproj
```xml
<?xml version="1.0" encoding="utf-8"?>
<Project DefaultTargets="Build" ToolsVersion="4.0"
  xmlns="http://schemas.microsoft.com/developer/msbuild/2003">

  <PropertyGroup>
    <AssemblyName>WpfTest</AssemblyName>
    <Platform>AnyCPU</Platform>
    <OutputType>WinExe</OutputType>
    <OutputPath>.\bin\Release</OutputPath>
    <TargetFrameworkVersion>v4.5</TargetFrameworkVersion>
  </PropertyGroup>
  
  <ItemGroup>
    <Reference Include="PresentationCore" />
    <Reference Include="PresentationFramework" />
    <Reference Include="WindowsBase" />
    <Reference Include="System" />
    <Reference Include="System.Xaml">
    <RequiredTargetFramework>4.0</RequiredTargetFramework>
    </Reference>
  </ItemGroup>

  <ItemGroup>
    <ApplicationDefinition Include="App.xaml">
      <Generator>MSBuild:Compile</Generator>
      <SubType>Designer</SubType>
    </ApplicationDefinition>

    <Page Include="MainWindow.xaml">
      <Generator>MSBuild:Compile</Generator>
      <SubType>Designer</SubType>
    </Page>

	<Compile Include="App.xaml.cs">
      <DependentUpon>App.xaml</DependentUpon>
      <SubType>Code</SubType>
    </Compile>
    <Compile Include="MainWindow.xaml.cs">
      <DependentUpon>MainWindow.xaml</DependentUpon>
    </Compile>
  </ItemGroup>

  <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
</Project>
```

今回は特に中身の説明はしませんが、
特徴的なのは、App.xamlとMainWindowという二つのXAMLとC#のコードを指定しているところです。  
この部分については次のXAMLの項で触れます。

### XAMLファイル

App.xaml
```xml
<Application x:Class="WpfTest.App"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  StartupUri="MainWindow.xaml">
</Application>
```

MainWindow.xaml
```xml
<Window x:Class="WpfTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WpfTest" Height="500" Width="700">
    <Grid>
        
    </Grid>
</Window>
```

まずはApp.xamlを見てみます。  
特徴的なのは、StartupUriにMainWindowを指定しているところでしょう。  
StartupUriで指定したウィンドウを起動時に表示するため、このアプリケーションを実行するとMainWindow.xamlが表示されます。

では、次にMainWindow.xamlを見てみます。
タイトルがWpfTest、高さが500、幅が700など主に見た目の部分について指定されています。

### C#ファイル

App.xaml.cs
```csharp
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;

namespace WpfTest
{
    public partial class App : Application
    {
    }
}
```

MainWindow.xaml.cs
```csharp
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;

namespace WpfTest
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}
```

そして上記5つのファイルをフォルダに配置し、同じ階層でビルドツールを実行します。

```text
> C:\Windows\Microsoft.NET\Framework\v4.0.30319\MSBuild.exe
```

これによりそのフォルダのbin\Releaseの中に、実行ファイルが作成されます。  
実行すると下記のようにGUIアプリケーションの雛形が完成します。

![gui](/images/wpf/GUI.png)

今回は雛形でしたが、MainWindow.xamlのGrid内に見た目の部分を書いていき、
ロジックはMainWindow.csもしくは他のC#ファイルを作成し、組み立てていきます。

↓githubにコードあげました。  
[Tiny-WPF](https://github.com/RuBisCO28/Tiny-WPF)


## 最後に一言
手書きXAMLは男のロマン・・・?

Handwriting XAML is a lof of fun・・・?


## 1. Git for Windowsのインストール

[Git - Downloading Package](https://git-scm.com/downloads)のサイトよりインストーラーをダウンロードし、インストール。  
今回、インストーラーは「Git-2.18.0-64-bit.exe」を使用。

インストーラーを実行し、以下の手順に従ってインストール

![1](/images/gitlab/1.png)

インストール先のディレクトリはC:\Gitに変更

![2](/images/gitlab/2.png)

インストールするコンポーネントはデフォルトのまま

![3](/images/gitlab/3.png)

![4](/images/gitlab/4.png)

デフォルトのエディタ設定（男は黙ってVim）

![5](/images/gitlab/5.png)

bashではwindowsのDOSを使用

![6](/images/gitlab/6.png)

SSLの設定

![7](/images/gitlab/7.png)

改行処理の設定

![8](/images/gitlab/8.png)

![9](/images/gitlab/9.png)

あとはよしなに

![10](/images/gitlab/10.png)

インストール完了

![11](/images/gitlab/11.png)

 
## 2. Gitの初期設定

C:\Git配下のGit Bashを起動し、初期設定を行う。（コマンドプロンプトでも可）
```bash
git config --global user.email 'メールアドレス'
git config --global user.name 'ユーザー名'
git config --global core.quotepath off
```

続いてSSHキーを作成。
パスフレーズは任意で設定。
```bash
$ ssh-keygen -t rsa -C 'メールアドレス'
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/ユーザ名/.ssh/id_rsa):
Created directory '/c/Users/ユーザ名/.ssh'.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
```
C:\Users\ユーザ名\.ssh 以下にファイルが作成される。

## 3. GitLabへのSSHキー登録

GitLabにログインし、ページ右上のアイコンから設定(Settings)を開く。

![12](/images/gitlab/12.png)

左メニューよりSSH Keysを選択。
先ほど生成したSSHキー(id_rsa.pub)の内容をコピペし、タイトルをつけAdd Keyで登録。  
登録後、自分宛にメールが届く。

![13](/images/gitlab/13.png)

以上で設定は終了。

## 4. GitLabのプロジェクトをクローン

GitLabのプロジェクトページに行き、git@gitlab.comから始まるClone 用URLをコピーする。

![14](/images/gitlab/14.png)

Git Bashを起動し、ローカル環境にプロジェクトクローン用のフォルダを作成し、移動。
（今回はデスクトップ配下に作成）

```bash
$ mkdir -p /c/Users/ユーザ名/Desktop/プロジェクト名
$ cd /c/Users/ユーザ名/Desktop/プロジェクト名
```

設定したパスフレーズを入力して、クローンを作成
```bash
$ git clone git@gitlab.com:***.git
Cloning into '***'...
Enter passphrase for key '/c/Users/ユーザ名/.ssh/id_rsa':
```
以上でローカル環境にプロジェクトのクローンが作成される。

## 5. プロジェクトにREADMEを追加
README.mdを作成し、プロジェクトにREADMEをpush。

```bash
$ touch README.md
$ git add README.md
$ git commit -m "Add README"
$ git push -u origin master
```

プロジェクトにREADME.mdが追加される。

## 6. 補足
今回はGitLabでやったが、Githubも基本的に流れは変わらない