【oandapyV20】OandaAPIでローソクを取得
1
この記事ではoandapyV20を使ってローソクチャートを取得する方法について記載します。ローソクの長さ、取得データの種類、取得期間の指定方法なども含めて記載します。
oandapyV20では、PricingInfoというクラスで/v3/instruments/{instrument}/candlesをGet通信で叩いています。
ドル円のローソクチャートを取得基本のコードはこちらです。
# -*- coding: utf-8 -*-
import json
from oandapyV20 import API
from oandapyV20.endpoints.pricing import PricingInfo
from oandapyV20.exceptions import V20Error
import oandapyV20.endpoints.instruments as instruments
import datetime
import pandas
def main():
account_id="XXX-XXX-XXXXXXX-XXX"
access_token = "***************************************************************"
api = API(access_token=access_token, environment="practice")#or live
params = {"instruments": "USD_JPY"}
pricing_info = PricingInfo(accountID=account_id, params=params)
r = instruments.InstrumentsCandles(instrument="USD_JPY",
params={
"granularity": "S15", # ロウソク足の種類を選択
"alignmentTimezone": "Japan", # タイムゾーン
#"from":datetime.datetime.now()
}
)
data = api.request(r)
for candle in r.response["candles"]:
print(candle)
if __name__ == "__main__":
main()データの返り値であるcandleの変数には下記の値が入ります。
(Pdb) candle
{'complete': True, 'volume': 117597, 'time': '2020-11-05T08:00:00.000000000Z', 'mid': {'o': '104.314', 'h': '104.388', 'l': '103.360', 'c': '103.424'}}ローソク足の長さを指定する
上記ではローソクの長さを１５秒に指定しますが、最短で５秒、最大で１ヶ月まで変更できます。oandapyV20では、InstrumentsCandlesをインスタンス化する際のparamという変数で様々な取得条件を指定しますが、ローソク足の長さはgranularityというキーで指定します。これに対応する値は文字列型で下記で指定します。
r = instruments.InstrumentsCandles(instrument="USD_JPY",
params={
"granularity": "S15", # ロウソク足の種類を選択
"alignmentTimezone": "Japan", # タイムゾーン
#"from":datetime.datetime.now()
}
)| 引数 | 間隔 |
|---|---|
| S5 | 5秒間 |
| S10 | 10秒間 |
| S15 | 15秒間 |
| S30 | 30秒間 |
| M1 | 1分間 |
| M2 | 2分間 |
| M3 | 3分間 |
| M4 | 4分間 |
| M5 | 5分間 |
| M10 | 10分間 |
| M15 | 15分間 |
| M30 | 30分間 |
| H1 | 1時間 |
| H2 | 2時間 |
| H3 | 3時間 |
| H4 | 4時間 |
| H6 | 6時間 |
| H8 | 8時間 |
| H12 | 12時間 |
| D | 1日 |
| W | 1週間 |
| M | 1ヶ月 |
総データ取得期間の指定
総データ取得期間を指定する際は、同様にparamという辞書の中で指定します。この中でfromとtoというキーで時間を「文字列型」のUNIXTIMEで指定します。
r = instruments.InstrumentsCandles(
instrument="USD_JPY",
params={
"granularity": "D",
"alignmentTimezone": "Japan",
"from":str((datetime.datetime.now()-datetime.timedelta(days=30)).timestamp()),
"to":str((datetime.datetime.now()-datetime.timedelta(days=25)).timestamp())
}
)キャンドルの本数の指定
データの期間を指定する代わりに、キャンドルの本数で総データ取得期間を指定することもできます。デフォルトは５００本となります。キャンドルの本数で帰って来るデータの量を指定したい場合はcount引数を整数で指定します。なお、期間をfrom,toで指定した場合こちらは使用できません。countの最大は5000本です。
r = instruments.InstrumentsCandles(
instrument="USD_JPY",
params={
"granularity": "D",
"alignmentTimezone": "Japan",
"count":100}
)ローソクの価格種を指定する
ask,bid,middleのいずれのローソクを取得するかについてはparamsでpriceキーで指定できます。“M” はmidpoint candles、 “B” はbid candles)、 “A” はask candlesとのことで、デフォルトは”M”となります。
midの場合
(Pdb) candle
{'complete': True, 'volume': 117597, 'time': '2020-11-05T08:00:00.000000000Z', 'mid': {'o': '104.314', 'h': '104.388', 'l': '103.360', 'c': '103.424'}}bidの場合
(Pdb) candle
{'complete': True, 'volume': 117597, 'time': '2020-11-05T08:00:00.000000000Z', 'bid': {'o': '104.308', 'h': '104.382', 'l': '103.354', 'c': '103.418'}}通貨を指定する
これはinstrument引数で指定します。通貨のペアを/ではなく_でつないで指定します。
例えば,よく使うものを列挙すると
| ペア | コード |
| ドル円 | USD_JPY |
| ドルユーロ | EUR_USD |
| ユーロ円 | EUR_JPY |
https://www.oanda.jp/course/currencypair
参考文献
https://oanda-api-v20.readthedocs.io/en/latest/endpoints/instruments/instrumentlist.html
https://developer.oanda.com/rest-live-v20/instrument-ep/
リアルタイムでデータを取得したい場合はこちらの記事をご覧ください。
Adsenseの住所確認の日数と手順について
1
Google Adsenseでは、収益が１０００円程度を超えると住所確認のために郵送でPINコードが発送されます。振り込み準備に向けて、これに印字された６桁の番号をAdsenseのHPで入力し、住所が正しいことを認証伝えておく必要があります。記載された通りに実施するとうまくいきませんので、この方法について解説します。
Adsenseからメールが届きます
収益が一定を超えると、Adsenseからメールが届きます。
| AdSense でお知らせいただいたお支払い先住所宛に、個人識別番号（PIN）を記載したハガキを 11月 18, 2020 付で発送いたしました。 |
| ハガキが届きましたら、このメールにある [住所を確認する] をクリックし、AdSense のホーム画面で PIN をご入力ください。あるいは AdSense アカウントにログインして、ホーム画面で直接、同じ手順を行っていただくこともできます。 |
| 重要: この PIN による住所確認が最初の郵送日から 4 か月以内に行われなかった場合、広告配信が停止されますのでご注意ください。 |
４ヶ月以内に行わないと広告停止されると書いてありますが、葉書が到着するまでに結構時間がかかるので不安になります。日本では結構時間がかかるようで心配は入りません。私は２つのサイトで実施したことがありますがそれぞれ３週間弱かかりました。直近のサイトについては、11月18日発送で自宅に届いたのは12月4日でした。18日かかったことになります。
PINの入力方法
葉書の通りにやってもうまくいきません。葉書では歯車のアカウントからPINを送信してくださいと書いてありますが、アカウント の画面にはPINのことなど書いておりません。PCでAdsenseにログインして、トップページから辿る必要があります。
赤丸で囲ったところから入力するようにしてください。
Angular(Ionic)で非同期通信を実装する
1
フロントエンドアプリケーションフレームワークであるAngular(Ionic)で非同期通信を実装する方法をサンプルアプリとして紹介します。動作確認用にPythonで作成したバックエンドコード付きです。
Angularの場合、非同期通信を実装するにはHttpClientModuleをapp.module.tsに追加して、tsファイルで呼び出して使うだけです。AngularはReactと異なりフルスタックなので、この辺の安心感はReactにはるかに勝ると思います。
ソースコードの素性
ソースコードの素性ですが、Ionic(Aunglar)のblankアプリから実装しました。なお、バックエンドのサンプルコードも作成しましたが、こちらはPythonのFlaskを使っています。Flaskでホスティングした http;//127.0.0.1:5000 のURLを叩いてデータを取ってくるアプリです。
GitHubにコードあげたのでそのまま動作確認できると思います。
環境
フロントエンド
Angular CLI: 10.0.5
Ionic CLI : 6.10.0
Node: 12.18.0
バックエンド
Python 3.7.3
Flask 1.1.2
Flask-Cors 3.0.9
コード
app.module.ts
app.module.tsに
import { HttpClientModule } from ‘@angular/common/http’;
を追加します。importするのも忘れずに
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule,HttpClientModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}Ionicの場合、moduleファイルが複数あるけど、app.module.tsにだけ書いておけば問題ないです。
home.page.ts
こちらには
import { HttpClient } from ‘@angular/common/http’;
import { DomSanitizer } from ‘@angular/platform-browser’;
の２つを追加します。あとは処理を書くだけです。
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
unsafeImageUrl:any;
imageUrl:any;
constructor(
private http: HttpClient,
private sanitizer:DomSanitizer)
{
this.hello();
}
hello(){
this.http.get('http://127.0.0.1:5000',{responseType:'blob'})
.subscribe(
(res:any) => {
console.log(res);
this.unsafeImageUrl = URL.createObjectURL(res);
this.imageUrl = this.sanitizer.bypassSecurityTrustUrl(this.unsafeImageUrl);
})
}
}home.page.html
htmlはを追加するだけです。
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Blank</ion-title>
</ion-toolbar>
</ion-header>
<div id="container">
<img [src]=imageUrl>
<strong>Ready to create an app?</strong>
<p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
</div>
</ion-content>これでOK.anyを指定してしまっていますので書き方知っていたら教えてください。
バックエンド
バックエンドはこちら
# -*- coding: utf-8 -*-
import io
import numpy as np
import matplotlib
matplotlib.use('Agg')
import matplotlib.pyplot as plt
from flask import Flask, send_file
from flask_cors import CORS
import json
app = Flask(__name__)
CORS(app)
@app.route('/',methods=["GET","POST"])
def hello():
image = io.BytesIO()
x = np.linspace(0, 10)
y = np.sin(x)
plt.plot(x, y)
plt.savefig(image, format='png')
image.seek(0)
return send_file(image,
attachment_filename="image.png",
as_attachment=True)
if __name__ == "__main__":
app.run(host='127.0.0.1',debug=True)AngularでWebAPIからblob形式で返された画像データを取得する方法
1
フロントエンドアプリケーションフレームワークであるAngular(Ionic)を使って、非同期通信で画像を読み込む方法をサンプルアプリとして紹介します。動作確認用にPythonで作成したバックエンドコード付きです。
Angularの場合、非同期通信を実装するにはHttpClientModuleをapp.module.tsに追加して、tsファイルで呼び出して使うだけです。画像の場合は、さらにresponseTypeに’blob’形式を指定し、DomSanitizerでサニタイズして読み込みます。HTML側は＜img [src]=imageUrl＞で行けます。
AngularはReactと異なりフルスタックなので、この辺の安心感があります。
参考にしたサイト
ソースコード
解説
app.module.ts
app.module.tsに
import { HttpClientModule } from ‘@angular/common/http’;
を追加します。importするのも忘れずに
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule,HttpClientModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}Ionicの場合、moduleファイルが複数あリますが、app.module.tsにだけ書いておけば問題ないです。
home.page.ts
こちらには
import { HttpClient } from ‘@angular/common/http’;
import { DomSanitizer } from ‘@angular/platform-browser’;
の２つを追加します。あとは処理を書くだけです。
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
unsafeImageUrl:any;
imageUrl:any;
constructor(
private http: HttpClient,
private sanitizer:DomSanitizer)
{
this.hello();
}
hello(){
this.http.get('http://127.0.0.1:5000',{responseType:'blob'})
.subscribe(
(res:any) => {
console.log(res);
this.unsafeImageUrl = URL.createObjectURL(res);
this.imageUrl = this.sanitizer.bypassSecurityTrustUrl(this.unsafeImageUrl);
})
}
}これでOK。anyを指定してしまっていますので書き方知っていたら教えてください。
home.page.html
htmlはを追加するだけです。
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Blank</ion-title>
</ion-toolbar>
</ion-header>
<div id="container">
<img [src]=imageUrl>
<strong>Ready to create an app?</strong>
<p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
</div>
</ion-content>バックエンド
# -*- coding: utf-8 -*-
import io
import numpy as np
import matplotlib
matplotlib.use('Agg')
import matplotlib.pyplot as plt
from flask import Flask, send_file
from flask_cors import CORS
import json
app = Flask(__name__)
CORS(app)
@app.route('/',methods=["GET","POST"])
def hello():
image = io.BytesIO()
x = np.linspace(0, 10)
y = np.sin(x)
plt.plot(x, y)
plt.savefig(image, format='png')
image.seek(0)
return send_file(image,
attachment_filename="image.png",
as_attachment=True)
if __name__ == "__main__":
app.run(host='127.0.0.1',debug=True)【保存版】Flaskで画像を操作する際の6パターンを書き分ける
1
Flask上で画像を操作する際のソースコードのパターンについてですが、 画像の生成元をどうするかというもので3パターン、画像の最終的な処理方法をどうするかというもので2パターンで(組み合わせで)合計6パターンがあると思います。Flaskで画像処理を実装しようとするとこれらを書き分ける必要がありますのでそれについて記載します。
画像の生成元の3つとは
- HTMLからFlaskで立てたURLへ直接画像がアップロードされる場合、
- Flaskの関数の中でmatplotlibなどで生成する場合、
- クラウドないしはローカルフォルダなどに保存されている画像を読み込んでくる場合
の３つです。
最終的な処理方法として２つあるというのは、
- 画像をクラウドないしはローカルフォルダなどに保存する場合と
- クライアント側へ画像をreturnする場合
の２つです。メタ情報だけ抽出して文字列で返す場合などもあると思いますが、これはJSONなどでリターンすればOKなので上記６パターンで対応できると思います。
Flaskで画像を操作したいと思うと、この６パターンについてソースコードを書き分ける必要があり、かなり大変です。
しかし、幸いなことに、画像をどこかに保存する場合とクライアント側へ返す場合については画像をメモリ上でBlob形式であらかじめ保存することができれば同時に対応できますので、事実上かき分けなければならないのは３パターンとなります。
この記事では、画像をメモリ上でBlob形式で書き出すコードを使いながらこの３パターンについて整理したいと思います。
なお、ここでは処理後の画像の保存先としてGoogle Cloud Storageを利用した例で説明しますが、適宜AWSのS3、ローカルのフォルダの場所などと読み替えて下さい。今回記載するサンプルコードは下記の３つです。
1. 画像をFlaskの関数内で生成し、メモリ上でBlob形式で保存したのちにGCSへ保存しクライアント側へ返す
2. 画像をクライアントから受け取り、メモリ上でBlob形式で保存したのちにGCSへ保存しクライアント側へ返す
3. 画像をGSCから読み取り、メモリ上でBlob形式で保存したのちにGCSへ保存しクライアント側へ返す
画像をFlaskの関数内で生成し、メモリ上でBlob形式で保持したのちにGCSへ保存とクライアント側へ返す
# coding: utf-8
import os
import io
import time
import string
import random
import datetime
import numpy as np
import matplotlib
matplotlib.use('Agg')
import matplotlib.pyplot as plt
from PIL import Image
import cv2
from flask import Flask, render_template, request, redirect, url_for, send_from_directory,send_file
from flask_cors import CORS
from google.cloud import storage
from google.cloud.storage import Blob
import inspect
import numpy as np
import cv2
app = Flask(__name__)
CORS(app)
@app.route('/',methods=["GET","POST"])
def hello():
buf = io.BytesIO()
x = np.linspace(0, 10)
y = np.sin(x)
plt.plot(x, y)
plt.savefig(image, format='png')
buf.seek(0)
destination_blob_name = "path/to/your/file_on_gcs.jpg"
blob = Blob(destination_blob_name, bucket)
blob.upload_from_string(data=buf.getvalue(), content_type=content_type)
return send_file(
buf,attachment_filename=source_blob_name,as_attachment=True
)
if __name__ == "__main__":
app.run(host='127.0.0.1',debug=True)ポイントは２つあって、一つ目はGUIに対応していないFlask上でmatplotlibが動作するようにmatplotlib.use(‘Agg’)というコードを入れていること、二つ目はsavefigの部分でメモリ上でファイルを書き出していることです。ローカルで動かす場合は、普通にHDD（SSD？）にjpgなどで書き出しても問題ないと思いますが、クラウドなどだとローカルへのアクセスが禁止されていることが往々にしてあります。この場合に備えて、メモリ上でファイルの読み書きを行うioモジュールを使ってメモリ上に画像を出力しています。ここは個人的に結構ポイントです。
それでは次に既に保存されている画像を取ってくる場合です。
画像をGSCから読み取り、メモリ上でBlob形式で保持したのちにGCSへ保存とクライアント側へ返す
クラウドからデータを持ってきます。重いデータなどは予め画像にしておくと便利ですのでよく使っています。
# coding: utf-8
import os
import io
import time
import string
import random
import datetime
import numpy as np
from PIL import Image
import cv2
from flask import Flask, render_template, request, redirect, url_for, send_from_directory,send_file
from flask_cors import CORS
from google.cloud import storage
from google.cloud.storage import Blob
import inspect
import numpy as np
import cv2
app = Flask(__name__)
CORS(app)
@app.route("/", methods=["GET", "POST"])
def hello():
os.environ['GOOGLE_APPLICATION_CREDENTIALS'] = './for-dev-268800-ed3aecf9b014.json'
storage_client = storage.Client()
bucket = storage_client.get_bucket('for-dev-268800.appspot.com')#"'for-dev-268800.appspot.com'
source_blob_name = "path/to/your/file_on_gcs.jpg"
#検索する場合はここを使う
"""
blobs = bucket.list_blobs(prefix="")
for blob in blobs:
print(blob.name)
print(dir(blob))
print(blob.content_type)
source_blob_name = blob.name
content_type = blob.content_type
print(inspect.getfullargspec(bucket.list_blobs))
"""
blob = bucket.get_blob(source_blob_name)
buf = io.BytesIO()
blob.download_to_file(buf)
buf.seek(0)
destination_blob_name = "path/to/your/file_on_gcs.jpg"
blob = Blob(destination_blob_name, bucket)
blob.upload_from_string(data=buf.getvalue(), content_type=content_type)
return send_file(
buf,attachment_filename=source_blob_name,as_attachment=True
)
if __name__ == "__main__":
app.run(host='127.0.0.1',debug=True)上記ファイルを実行しFlaskサーバが立てたあと、こちらについてはブラウザなどで直接叩いたいただければ問題ありません。
画像をクライアントから受け取り、メモリ上でBlob形式で保持したのちにGCSへ保存とクライアント側へ返す
最後のパターンです。これはクライアントから画像を受け取る場合ですが、要するにユーザがブラウザから画像を選択してアップロードするよく使うやつです(curlでこれをコード化すると、画像の一括アップロードなどにも使えます)。
# coding: utf-8
import os
import io
import time
import string
import random
import datetime
import numpy as np
from PIL import Image
import cv2
from flask import Flask, render_template, request, redirect, url_for, send_from_directory,send_file
from flask_cors import CORS
from google.cloud import storage
from google.cloud.storage import Blob
import inspect
import numpy as np
import cv2
app = Flask(__name__)
CORS(app)
@app.route("/", methods=["GET", "POST"])
def hello():
if request.files['image']:
filename = request.files['image'].filename
content_type = request.files['image'].content_type
# 画像として読み込み
stream = request.files['image'].stream
img_array = np.asarray(bytearray(stream.read()), dtype=np.uint8)
img = cv2.imdecode(img_array, 1)
is_success, buffer = cv2.imencode(".jpg", img)
buf = io.BytesIO(buffer)
#buf = io.BytesIO()
buf.seek(0)
os.environ['GOOGLE_APPLICATION_CREDENTIALS'] = './path/to/your/credential_goole.json'
storage_client = storage.Client()
bucket = storage_client.get_bucket('your_backetname.com')
blob = Blob(filename, bucket)
blob.upload_from_string(data=buf.getvalue(), content_type=content_type)
return send_file(
buf,attachment_filename=filename,as_attachment=True
)
if __name__ == "__main__":
app.run(host='127.0.0.1',debug=True)上記ファイルを実行しFlaskサーバが立てたあと、こちらについては画像をHTMLからアップロードする必要があります。
APIを叩いてcanvas要素に描写するHTMLも載せておきますので、こちらを参考にしてください。buf変数に読み込んだものをOpenCVなどで操作すれば簡単な画像処理ソフトになると思います。
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>bootstrapとjquery</title>
</head>
<body>
<main>
<article>
<section>
<input type="button" value="Start" onclick="main();"/>
<canvas style="height: 30vw;width:50vh"></canvas>
</section>
</article>
</main>
<script language="javascript" type="text/javascript">
function main(){
var canvas = document.getElementsByTagName('canvas');
var ctx = canvas[0].getContext('2d');
var img = new Image();
img.src = 'http://0.0.0.0:5000';//FlaskでホスティングしたURL
img.onload = function() {
img.style.display = 'none'; // ようわからん
console.log('WxH: ' + img.width + 'x' + img.height)
ctx.drawImage(img, 0, 0);
var imageData = ctx.getImageData(0, 0, img.width*2, img.height*2)
for(x = 0 ; x < 1000 ; x += 10) {
for(y = 0 ; y < 1000 ; y += 10) {
ctx.putImageData(imageData, x, y);
}
}
}; }
</script>
</body>
</html>curlコマンドでForm送信は代替できます。
HTMLのform送信をcurlコマンドで代替する方法はこちら
Flaskで画像を処理場合のソースコードはパターンごとに書き分ける必要があり、普段は目の前のタスクを終わらせて終わりがちですが、今回は６つのパターンについてまとめました。AWSのS3を使う場合やローカルで完結させる場合も同様に処理できると思いますので、ぜひ参考にしていただけるとうれしいです。
この記事が役に立ったと思ったらLGTMお願いいたします:thumbsup:
Matplotlibで作成したグラフをクライアントへ返す方法についてさらに詳細をまとめたのはこちら
製造業において、Pythonに加えてWebも活用して飛躍しよう
1
最近、製造業におけるPythonの導入が進んでます。自動化やアプリケーション制作に便利ですし、今後もこの勢いは止まらなそうです。
ところが、私は実務担当として工場でPythonを導入して5年になるのですが、近年はWeb技術を使用することが多くなりました。Pythonを使い始めた当初、Web技術と言えばHTMLとCSS？データ分析メインの俺にはあんまり関係ないよね？と思っていました。でも、実務を行う中でPythonとWeb技術の相性が非常に良いことに気付き、最近はWebとPythonを半分ずつ使っています。
記事の内容
この記事では、とある工場で働くエンジニアがWeb技術の重要性について発見したことを書きたいと思います。おそらく、最近の空気は、製造業でもPythonは役に立つが、Webは分野が違うので関係ないという感じだと思います。でも、私はWeb技術があってこそPythonが１００％生かせるのではないかと思っています。ある工場でPythonを導入した結果、Web技術の（意外な？）重要性について発見したことを共有したいと思います。
構成
構成としては
・製造業におけるPythonの使い所を整理し、
・Web技術の重要性について
述べたいと思います。
製造業におけるPythonの使い所
少し冗長ですが、そもそも製造業のおけるPythonの使い所として主に下記の３つがあると感じています。
・データ整形や業務の自動化
・高度なデータ分析
・業務アプリの制作（AIアプリ制作含む）
1.データ整形や業務の自動化
まず一つ目です。工場だと、製造に必要なファイルはエクセルで管理されていることが多いと思います。そして、どこかのフォルダに入っているデータをそのエクセルにコピペして行う集計作業も多いと思います。Pythonの使い所として最初に出てくるのがこの作業の自動化です。csvで管理されているデータならPandasで読み込めますし、Excelも操作できるので集計作業を一瞬で終わらせることができます。Pythonは汎用プログラミング言語ですので、PC上で行う「手順の決まった繰り返し作業」であれば、原理的にはすべて自動化できるというのは心強いです。
2.高度なデータ分析
二つ目が高度なデータ分析です。研究系で使用される方はこの用途が多いのではないかと思います。当然オフラインで行うこともできるのですが、うまくやれば高度な分析も自動化できます。
つまり、一般的には
- 最初はオフラインで工場からデータをもらう
- 手元のPCで分析して結果報告
って流れがありがちだと思うのですが、Pythonを使うとこういった流れも自動化してラインに組み込むことができると思うのです。後述するAPIの作成や、データの取得部分の自動化、分析コードのライブラリ化が必要になりますが、すべての製造ロットについて自動で不良原因を分析したり、品質を予測と言ったことができるようになります。オフラインに留まらず工場の中で生きたものとして分析コードが利用できるというのは夢がありますよね。
3.業務アプリの制作
三つ目が業務アプリ制作です。
自分ごとで恐縮なのですが、私はPythonを使い始めた時、主に自分の業務の自動化で使っていましたが、次第にある欲求が抑えられなくなってきました。「作ったアプリを周りに活用して欲しい」という欲求です。結構あるあるだと思いますので、業務アプリの制作というのも製造業におけるPython活用のよくあるパターンだと思います。あるいは、最近はAIを実装すると言った業務もあるのではないでしょうか。
そして、私がWeb技術の活用が必要だとおもったきっかけは、この３つ目の用途においてです。
Web技術の必要性
PythonでGUIを作ってしまうと、使用する人全員に同じ環境を用意しなければなりません。一桁程度ならなんとかなるのですが、人数が増えるとその手間は大きくなり苦痛に感じるようになりました。
かといって実行ファイルにするとサイズが大きくなったり、コンパイルに失敗したりデバッグできなかったりで使い勝手が悪かったです。そこで、サーバPCを用意して環境構築をその１台だけで完結させ、使用者はそこにアクセスすることでサービスを提供できるようにするためにはどうすればいいだろうかという課題に直面しました。Pythonの活用が進めば進むほどこのニーズが大きくなり、Web技術の必要性が出てくると思います。
また、二つ目の高度なデータ分析におけるWeb技術の活用のメリットも大きいです。
A.手渡ししてもらったデータをオフラインで解析する
B.解析コードをラインに組み込んで全ロットで自動に結果を出す
という違いは大きいと思うのですが、後者のためにWebが非常に役立つからです。
Webを導入する他のメリット
つまり、Web技術を導入すると、分析の自動化のために必要な下記の２点が可能になります。
・整形したデータをAPIを介して配信できる（データの活用の裾野が広がる）
・本社や現場で集めたデータを活用するスマホアプリまで作れる（実行環境を問わずデータを活用するアプリケーションが開発できる）
整形したデータをAPIを介して配信できる
Pythonの使い所の一つ目で挙げたとおり、データ整形という用途はPython活用の王道だと思います。そして、整形したデータを活用するというのを考えた時、Webブラウザを叩いてデータが返ってきたらめちゃくちゃ便利ではないかと思い至りました。要するにWebAPIで配信するということです。
ロットやデータ数を指定してAPIを叩いたらデータが勝手に得られる環境というのは、分析の自動化にもだいぶ役に立つと思います。Pythonだけだとデータ整理で終わったかも分からないのですが、APIを作ることでPythonで集計したデータを他事業所からアクセスしてもらえるようにしたり、より広く活用することができるようになります。個人的には、バックエンドをFlaskでAPI化して、フロントエンドはクロスプラットフォームフレームワークのAngularかReactという構成が好きです。でも、今ならVue.jsから始めるかもしれません。
現場で活用するスマホアプリも作れる
発見だったのがこれです。Web技術というとHTMLとCSSの静的なサイトのイメージが強かったのですが、最近はSPA(シングルページアプリケーション)という技術があるそうで、SPAを使うとデスクトップアプリと同等のものを作れます（SPAとセットでよく使う言葉にPWA（Progressive Web アプリ）という物もあります。SPAという技術で作った物の性質を表すときにPWAと表現していると理解しています。なので、文脈的にはSPAよりPWAの方が正確かも）(注釈1)。AngularやReact、Vueといったフレームワークがそれなのですが、これらはTypeScriptやJavaScriptの拡張言語であるJSXなどをかなり駆使しますので、HP制作というよりアプリケーション開発のイメージです。これによりTKinter、PysimpleGUI、PyQt、のようなデスクトップアプリをWeb上でも作ることができます。
加えて、AngularやReact、Vueではクロスプラットフォーム性があります。つまり、Webアプリだけではなく、AndroidやiOSのアプリにも出力が可能ということです（！）(注釈２)。これにより、ブラウザを介してユーザーのアクセス性を確保しつつ、ブラウザでアクセスできない場所（＝例えば現場）ではアプリとして使ってもらうことができるようになります。これはWebを導入して見つけた想定外の発見で、PythonだけではスタッフのPCで動作するアプリ開発しかできなかったと思いますが、Webを導入することで多くの人や場面で使ってもらえるための開発手段を手に入れられました。
相変わらずバックエンドはPythonで書いていますが、フロントエンドはWebに移行することで大きなメリットが得られました。
まとめ
少し冗長な説明になってしまいましたが、上記のようにWeb技術を使うとPythonで作ったデータを活用できる幅が広がったり、Pythonの普及に伴う環境整備の手間が低減できます。
近年注目されるPythonによる高度な分析についても、Webの力を借りることで、オフラインに留まらず全ロットに対して自動で行いそれを工場全体で生かす仕組みも構築できます。
Pythonについては製造業でも普及が進みつつあると思いますが、Webについては分野が違うという認識をされがちです。でも、Webがあるとより活用の幅が広がると思いますので、ぜひ検討してみてください。
この記事が役に立ったと思ったらLGTMお願いいたします:thumbsup:
製造業でのIT活用頑張りましょう！
注釈１：PWA、SPAとはなんぞや
注釈２：クロスプラットフォームとは何
個人サイトの方で解説した記事１(個人・少人数のシステム開発にはAngularがオススメ）
個人サイトの方で解説した記事２(pythonとangularの組み合わせが最強な理由）
Monacaの記事
勉強した本1（掌田津耶乃さんのAngularの本。React版でもいいかも。Vue.jsもいい本あると思います）
勉強した本2（AngularをIonicベースで利用）