【保存版】Flaskで画像を操作する際の6パターンを書き分ける

Flask上で画像を操作する際のソースコードのパターンについてですが、 画像の生成元をどうするかというもので3パターン、画像の最終的な処理方法をどうするかというもので2パターンで(組み合わせで)合計6パターンがあると思います。Flaskで画像処理を実装しようとするとこれらを書き分ける必要がありますのでそれについて記載します。

画像の生成元の3つとは

  • HTMLからFlaskで立てたURLへ直接画像がアップロードされる場合、
  • Flaskの関数の中でmatplotlibなどで生成する場合、
  • クラウドないしはローカルフォルダなどに保存されている画像を読み込んでくる場合

の3つです。

最終的な処理方法として2つあるというのは、

  • 画像をクラウドないしはローカルフォルダなどに保存する場合と
  • クライアント側へ画像をreturnする場合

の2つです。メタ情報だけ抽出して文字列で返す場合などもあると思いますが、これはJSONなどでリターンすればOKなので上記6パターンで対応できると思います。

Flaskで画像を操作したいと思うと、この6パターンについてソースコードを書き分ける必要があり、かなり大変です
しかし、幸いなことに、画像をどこかに保存する場合とクライアント側へ返す場合については画像をメモリ上でBlob形式であらかじめ保存することができれば同時に対応できますので、事実上かき分けなければならないのは3パターンとなります。
この記事では、画像をメモリ上でBlob形式で書き出すコードを使いながらこの3パターンについて整理したいと思います。

なお、ここでは処理後の画像の保存先としてGoogle Cloud Storageを利用した例で説明しますが、適宜AWSのS3、ローカルのフォルダの場所などと読み替えて下さい。今回記載するサンプルコードは下記の3つです。

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)

ポイントは2つあって、一つ目は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で画像を処理場合のソースコードはパターンごとに書き分ける必要があり、普段は目の前のタスクを終わらせて終わりがちですが、今回は6つのパターンについてまとめました。AWSのS3を使う場合やローカルで完結させる場合も同様に処理できると思いますので、ぜひ参考にしていただけるとうれしいです。

この記事が役に立ったと思ったらLGTMお願いいたします:thumbsup:

Matplotlibで作成したグラフをクライアントへ返す方法についてさらに詳細をまとめたのはこちら

https://qiita.com/NP_Systems/items/9bea70ade73cc48cbdf0

製造業において、Pythonに加えてWebも活用して飛躍しよう

最近、製造業におけるPythonの導入が進んでます。自動化やアプリケーション制作に便利ですし、今後もこの勢いは止まらなそうです。

ところが、私は実務担当として工場でPythonを導入して5年になるのですが、近年はWeb技術を使用することが多くなりました。Pythonを使い始めた当初、Web技術と言えばHTMLとCSS?データ分析メインの俺にはあんまり関係ないよね?と思っていました。でも、実務を行う中でPythonとWeb技術の相性が非常に良いことに気付き、最近はWebとPythonを半分ずつ使っています。

記事の内容

この記事では、とある工場で働くエンジニアがWeb技術の重要性について発見したことを書きたいと思います。おそらく、最近の空気は、製造業でもPythonは役に立つが、Webは分野が違うので関係ないという感じだと思います。でも、私はWeb技術があってこそPythonが100%生かせるのではないかと思っています。ある工場でPythonを導入した結果、Web技術の(意外な?)重要性について発見したことを共有したいと思います。

構成

構成としては
・製造業におけるPythonの使い所を整理し、
・Web技術の重要性について
述べたいと思います。

製造業におけるPythonの使い所

少し冗長ですが、そもそも製造業のおけるPythonの使い所として主に下記の3つがあると感じています。
・データ整形や業務の自動化
・高度なデータ分析
・業務アプリの制作(AIアプリ制作含む)

1.データ整形や業務の自動化

まず一つ目です。工場だと、製造に必要なファイルはエクセルで管理されていることが多いと思います。そして、どこかのフォルダに入っているデータをそのエクセルにコピペして行う集計作業も多いと思います。Pythonの使い所として最初に出てくるのがこの作業の自動化です。csvで管理されているデータならPandasで読み込めますし、Excelも操作できるので集計作業を一瞬で終わらせることができます。Pythonは汎用プログラミング言語ですので、PC上で行う「手順の決まった繰り返し作業」であれば、原理的にはすべて自動化できるというのは心強いです。

2.高度なデータ分析

二つ目が高度なデータ分析です。研究系で使用される方はこの用途が多いのではないかと思います。当然オフラインで行うこともできるのですが、うまくやれば高度な分析も自動化できます。
つまり、一般的には

  1. 最初はオフラインで工場からデータをもらう
  2. 手元のPCで分析して結果報告
    って流れがありがちだと思うのですが、Pythonを使うとこういった流れも自動化してラインに組み込むことができると思うのです。後述するAPIの作成や、データの取得部分の自動化、分析コードのライブラリ化が必要になりますが、すべての製造ロットについて自動で不良原因を分析したり、品質を予測と言ったことができるようになります。オフラインに留まらず工場の中で生きたものとして分析コードが利用できるというのは夢がありますよね。

3.業務アプリの制作

三つ目が業務アプリ制作です。
自分ごとで恐縮なのですが、私はPythonを使い始めた時、主に自分の業務の自動化で使っていましたが、次第にある欲求が抑えられなくなってきました。「作ったアプリを周りに活用して欲しい」という欲求です。結構あるあるだと思いますので、業務アプリの制作というのも製造業におけるPython活用のよくあるパターンだと思います。あるいは、最近はAIを実装すると言った業務もあるのではないでしょうか。
そして、私がWeb技術の活用が必要だとおもったきっかけは、この3つ目の用途においてです。

Web技術の必要性

PythonでGUIを作ってしまうと、使用する人全員に同じ環境を用意しなければなりません。一桁程度ならなんとかなるのですが、人数が増えるとその手間は大きくなり苦痛に感じるようになりました。
かといって実行ファイルにするとサイズが大きくなったり、コンパイルに失敗したりデバッグできなかったりで使い勝手が悪かったです。そこで、サーバPCを用意して環境構築をその1台だけで完結させ、使用者はそこにアクセスすることでサービスを提供できるようにするためにはどうすればいいだろうかという課題に直面しました。Pythonの活用が進めば進むほどこのニーズが大きくなり、Web技術の必要性が出てくると思います。

また、二つ目の高度なデータ分析におけるWeb技術の活用のメリットも大きいです

A.手渡ししてもらったデータをオフラインで解析する
B.解析コードをラインに組み込んで全ロットで自動に結果を出す

という違いは大きいと思うのですが、後者のためにWebが非常に役立つからです。

Webを導入する他のメリット

つまり、Web技術を導入すると、分析の自動化のために必要な下記の2点が可能になります。
・整形したデータを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のアプリにも出力が可能ということです(!)(注釈2)。これにより、ブラウザを介してユーザーのアクセス性を確保しつつ、ブラウザでアクセスできない場所(=例えば現場)ではアプリとして使ってもらうことができるようになります。これはWebを導入して見つけた想定外の発見で、PythonだけではスタッフのPCで動作するアプリ開発しかできなかったと思いますが、Webを導入することで多くの人や場面で使ってもらえるための開発手段を手に入れられました。
相変わらずバックエンドはPythonで書いていますが、フロントエンドはWebに移行することで大きなメリットが得られました。

まとめ

少し冗長な説明になってしまいましたが、上記のようにWeb技術を使うとPythonで作ったデータを活用できる幅が広がったり、Pythonの普及に伴う環境整備の手間が低減できます。
近年注目されるPythonによる高度な分析についても、Webの力を借りることで、オフラインに留まらず全ロットに対して自動で行いそれを工場全体で生かす仕組みも構築できます。
Pythonについては製造業でも普及が進みつつあると思いますが、Webについては分野が違うという認識をされがちです。でも、Webがあるとより活用の幅が広がると思いますので、ぜひ検討してみてください。

この記事が役に立ったと思ったらLGTMお願いいたします:thumbsup:
製造業でのIT活用頑張りましょう!

注釈1:PWA、SPAとはなんぞや
注釈2:クロスプラットフォームとは何

 個人サイトの方で解説した記事1(個人・少人数のシステム開発にはAngularがオススメ)
 個人サイトの方で解説した記事2(pythonとangularの組み合わせが最強な理由)
 Monacaの記事
 勉強した本1(掌田津耶乃さんのAngularの本。React版でもいいかも。Vue.jsもいい本あると思います)
 勉強した本2(AngularをIonicベースで利用)
 

curlコマンドでHTMLのformでの画像送信を代替する

curlコマンドでHTMLのformでの画像送信を代替する方法です。
curlコマンドを打つときの場所にna18_1920x1080_221804.jpgと言う画像を置いた場合です。

結論

url -X POST -F 'image=@./na18_1920x1080_221804.jpg' http://127.0.0.1:5000/ --insecure

追加

ヘッダー情報とかクエリパラメータを引き渡したい場合はこちら。

curl -X POST -H 'Host:some_destination.com.' -H 'Authorization:something' -F 'image=@./na18_1920x1080_221804.jpg' -F "arg1=myarg1" -F "arg2=myarg2" http://127.0.0.1:5000/ --insecure

Get通信の場合

ちなみに、画像送信とは関係ないですが、Get通信の諸々のサンプルこちらです。

curl  -H 'Host:some_destination.com.' -H 'Authorization:something' -X GET  "http://127.0.0.1:5000?arg1=myarg1&arg2=myarg2" --insecure

Windowsの場合の補足

Windows10のcurlコマンドだと、実際はinvoke-webrequestというコマンドのエイリアスなので動作しません。その場合、本物のcurlの実行ファイルをダウンロードして、パスを通して実行ファイル名を書き換えて、それでコマンドを打てば大丈夫です。

USキーボードのMacに外付けのキーボードを取り付ける

MacBookを使っているのですが、タイピングしにくいので外付けのキーボードを取り付けることにしました。Windowsなら何も考えずに購入できたのですが、実際お店に行ってみると

  • Macに外付けキーボードをつけて安定して動くのか
  • USキーボードのMacを使っているのだが、外付けキーボードはUSキーボードである必要があるのか

心配になりました。上記について、購入して試した結果をまとめたいと思います。

Macに外付けキーボードをつけて安定して動くのか

Mac対応と書いてあるものなら普通に動きそうです(Elecomとか)。栄のビックカメラで買ったのですが、5種類ほど選べました。形状が凝ったものだとWindowsのみの対応だったりしましたが、まぁ基本的なものであれば普通に売っている感じです。純正のキーボード高いですから、サードパーティ製で対応したいものです。

USキーボードのMacを使っているのだが、外付けキーボードはUSキーボードである必要があるのか

JISキーボードで問題ありません。普通にキーボードの配列通りに打てます。安めのMac対応の外付けのUSキーボードが売っているはずもなく、US配列であることは諦めていたので、一番うちやすかったのでElecomのTK-FBP101BKというものを買いました。

打ちやすかったのはパンタグラフ式という構造のせいらしいです。Macとは正反対の印象です。快適に使えますし、気分転換にもなるので気に入りました。

https://www.elecom.co.jp/products/TK-FBP101BK.html

近鉄特急ひのとりで大阪へ

名古屋と大阪を結ぶ近鉄特急ひのとりに乗ってきました。大阪一泊旅行です。

まずはひのとりのレポートから。

https://www.kintetsu.co.jp/senden/hinotori/

前日に切符を買いました。ひのとりは名古屋を出た後最初に止まるのが津ですので、最寄駅から津までは通常の特急で行き、そこから乗り換えることを勧められました。しかし、せっかくなので名古屋まで一度出て改めて乗ることにしました。というわけで朝9寺半前に名古屋駅へ。

10寺発名古屋のひのとりを待ちます。

ホームにひのとりが入ってきました。

かっこいいですね。中もめちゃめちゃきれいです。

トイレもきれい。

ここは手洗い場

席はこんな感じです。

重厚な感じでしっかりしてました。フットレストもいい感じです。

津までは南へ南下して、そこから西へ。

1日目の目的地は、川西にあった母の実家です。子供の頃よく遊びに行ったのですが、18年ぶりに行きました。

畦野から歩くつもりでしたが、畦野えきで妻と喧嘩。かなり最悪な流れでしたが、結局話がついてタクシーで向かいました。昔は遠いと思ってたけどそこまで遠くはなかったです。まだ家があったことにびっくり。

母が15歳の時に買ったそうで、狭い社宅から越したのがうれしかったそうです。その母も結婚して東京に移り子供を育て、それでその子供は独立して、、ということでとても時間の流れを不思議に感じました。この家に遊びに行っていた時、俺はまだ子供だったんだよなぁ。

夜は西梅田のほうにホテルを取りました。

妻が疲れていたので弁当を買いに行って、ついでに美味しんぼで紹介されたというたこ焼きを買って帰りました。

翌日(というか今日)は、ドトールで1時間くらいゆっくりした後に大阪観光ということで、アメリカ村まで歩いて、そこから電気街やコンカフェに行ってカレーを食べて、家族へのクリスマスプレゼント物色で難波駅をブラブラして、15寺半大阪難波発のアーバンライナーで帰ってきました。

というわけで今9時過ぎです。早めに寝ます。

Qiitaでorganizationを作成する方法

qiitaのプロフィール欄の右側に所属組織を表示されるときがあります。

会社が表示される人がいますが、中には明らかに非公式の組織が表示される時もあります。調べてみると、Qiitaのorganizationは非公式なものも登録できるそうなので、作ってみることにしました。

Organizationsとは

Qiita Organizationは会社や組織等の団体メンバーの記事をまとめることができる機能です。qiitaを読んでいると、この人どんな人なんだろうって思うこともあると思いますので、自分の所属や志向を伝えることができるので便利ですよね。

作成する時、企業か団体を選択できるので、会社などの公式の組織はもちろん、有志で集まった団体でも2名以上のメンバーがいれば作成できるそうです。公式の説明はこちら。

https://qiita.com/organizations

作成する方法

先日、製造業におけるPythonとWebの活用の記事を書いたところ、結構反響がありました。おそらく、製造業でのIT活用というところで共感を感じていただいたのかと思います。私自身そういう仲間がいたら面白うかなと思って、作成してみることにしました。

組織・団体名

考え中です。何かいいあんがあればコメント欲しいですが、

  • 製造業でIT活用を頑張る会
  • どうやって飛んでいるの?「Pythonだよ」を製造業で実現する会
    など。

URL名

これはスラッグ です。massive-indeustriesとでもしておきましょう。

メイン画像とロゴ画像

結構皆さん適当です。

これとか切り出し感あるし

これも味はいいが単純

これは企業ロゴそのまま。

結構趣味を出してもいいらしい。

というわけで、その気になればフリー素材使ってなんとかなりそう。

Organizationメンバー

Organizationは二人以上じゃないと作成できないので誰か仲間を指定します。

説明

これも皆さん適当なので適当に

「製造業でIT技術の活用を頑張る会です。」など後で考えます。

以上の内容を下記のフォームで入力すればできるっぽい。

https://qiita.com/organizations/new

メイン画像とロゴを作成したら(してもらうんですが)、作成してみようかな!

Oandaを解約して口座を作り直す方法

OandaのAPIを使いたいのですが、私が作った3年前と現在ではAPIのバージョンが異なります。昔のバージョンのときに作成し、現在は動作しなくなってしまいました。いろいろ頑張ったのですがラチがあかないので、古い口座を解約し、新しいものを作り直すという強硬手段に出ることにしました。

ここでは、その時の注意事項などについてまとめたいと思います。

Oanda APIでエラーが出る

まず、問題なのはこのエラーです。適当に最近のレートを取得しようとするとこのようなエラーがでます。

Error: {"errorMessage":"Insufficient authorization to perform request."}

デモ口座だとうまくいくのに本番環境ではうまくいきません。日本法人に問い合わせると、APIは管轄外なので米国の本社に聞いて欲しいと言われます。しかし、そこに聞いても結局解決しませんでした。

解決策

いろいろ情報を探して

https://developer.oanda.com/rest-live-v20/troubleshooting-errors/

https://stackoverflow.com/questions/63822473/v20error-errormessageinsufficient-authorization-to-perform-request

などを見ましたが解決せず。また、ログイン後の画面がこのようになっており、accout IDの後にV20と表示されていないのでV20に対応していないのかと思ったのですがそういうわけでもないようです。

Screenshot

デモ口座だとこのようにV20と表示されてるんですけどね。

Screenshot

そこで、古い口座を解約し、新しいものを作り直すという強硬手段に出ることにしました。必要な時間は2日程度でした。

流れ

解約する方法と新しいものを作る方法について説明します。

解約

従来のものを解約するのに必要な日数は半日です。10時までにカスタマーセンタに電話で連絡すれば、その日に解約できると思います。出金手続きも電話口で代行してくれます。私は10時半くらいに電話、11時までなら当日の出金に対応できるということでその場で指定口座への出金代行を依頼。15時には解約されました。

口座に預金がある状態では解約できない仕組みになっていますし、カスタマーセンタが問題があれば口頭で言ってくれるので安心です。

新規申し込み

解約されたら直後に申請可能です。これは通常通りの申請ということでリンク貼っておきます。私の場合、月曜日に新規申し込みをして、木曜日にIDを書いたものが簡易書留できました。あとは画面の指示にしたがって初期設定を澄ませばすぐに使えるようになると思います。

https://www.oanda.jp/register/web/accountopenperson.do

Xserverのメールを他のメールソフトで見られるようにする

ここでは、Xserverのメールを他のメールソフトで見られるようにする方法として、iPhoneのGmailで設定する方法を紹介します。

手順

Gmailを起動して、右上の自分のアイコンをクリックします。このような画面になります。

そしたら、「別のアカウントを追加」を押下します。

その他(IMAP)をタップし、そこで登録したいメールアドレスを入力します。

さらにボタンを押すと、下記の画面になり、ここでサーバとパスワードを入力します。これは受信サーバと送信サーバの両方が必要になり、最初に表示されるのは受信サーバです。

パスワードとサーバ名を入力します。

パスワードはXserverの管理画面からメールアドレスを発行する際に、メールアドレス に対して発行するものなのでもしこれがわからない場合は作り直すか作った人に聞くしかありません。

サーバー名を入れて終わりです。ポート番号は基本的には既に入力されているはずですが、変える場合は下記を参照してください。

POP/IMAPサーバー名
(ホスト名)
設定完了メールに記載されている「メールサーバー」を入力してください。※サーバーパネル内「サーバー情報」に記載の“ホスト名”と同一です。例)sv***.xserver.jp
SMTPサーバー名
(ホスト名)
設定完了メールに記載されている「メールサーバー」を入力してください。※サーバーパネル内「サーバー情報」に記載の“ホスト名”と同一です。例)sv***.xserver.jp
ユーザー名
(アカウント名)
メールアカウントの追加にて設定したメールアドレス(ドメイン名を含む)を入力してください。

例)user@example.com
例)info@example.com
パスワードメールアカウントの追加にて指定したパスワードを入力してください。
ポート番号
POPの場合
995 (SSLを利用しない場合は 110)
ポート番号
IMAPの場合
993 (SSLを利用しない場合は 143)
ポート番号
SMTPの場合
465 (SSLを利用しない場合は 587)

そうすると、頑張って設定をしてくれます。

送信サーバの設定画面に移行するので、同じ情報を入力して完了です。

まとめ

Xserverのメールを他のメールソフトで見られるようにする方法として、iPhoneのGmailで設定する方法を紹介しました。Xserverのリンクはこちら。

https://www.xserver.ne.jp/manual/man_mail_setting.php

SBI FXトレードで出金指示をした際、受付完了連絡が来ない

スマホからSBI FXトレードで出金指示をした際、画面から預託金残高はすぐに減りますが、メールも来ないし履歴も残りません。極めてひどいUIだと思います。ここではSBI FXトレードの出金の流れを記載します。

普通、出金指示を行った時点で出金依頼を受けつけたメールが来て、その後出金が完了した旨が通知される流れを想定すると思います。OANDAではこのようにされますし、当然こう言った流れが適切だと思います。しかし、SBI FXトレードで出金をすると、画面から預託金残高はすぐに減りますが、メールも来ないし履歴も残りません。ちゃんとシステムが受け付けてるのか心配になります。

自分の一例

私は出金依頼を11月11日の夜にしました。その際、実際に出金確定メールが来たのは11月13日9時でした。出金した額が自分的には大きな額だったので連絡が来るまで冷や冷やものでした。本当にひどいものです。

公式サイトのFAQ

公式サイトの「出金依頼をしてからどのくらいで振り込まれますか?」という質問にはこのような回答となっています。

「取引終了時間までにご依頼された場合、通常時は翌営業日にお振込みします。
ただし、何等かの事象が発生した場合に備え、出金依頼された日から4営業日以内(※土日祝は営業日ではございません)のお振込みを原則とさせていただきます。」

時間差はいいとして、出金指示の受付メールが来ないことは改善されることを望みます。みなさん不安になると思うので記事にさせていただきました。

個人・少人数のシステム開発にはAngularがオススメ

Angularとは

 GoogleのドキュメントやGCPで使われているAngularは、Googleが中心開発している JavaScript フレームワークです。AngularJSと混同されていている方もいらっしゃいますが、AngularJSのメリットを生かしたまま互換性のない形で生まれ変わったのがAngularです。Angularは、SPA (Single Page Application)と呼ばれる技術を用いて、従来のWebでは実現できなかった機能を提供する技術です。イメージ的には、従来のWebページよりアプリケーションよりのものを作りやすくなると感じています

SPAの特徴

 最近、従来のWeb技術では考えられなかったようなサイトが増えてきています。たとえば、オフラインでも動作するWebページやGoogleのドキュメントのように同じURLなのに検索ワードによって違う内容が表示されるページなどです。SPA (Single Page Application)ではindex.htmlだけを読み込み、そのあとはDOMの操作をフロントエンドで行って擬似的な遷移を行っています。これによりオフラインでも画面遷移ができたり、検索クエリによって動的にページを書き換えたりといったことができます。

SPAフレームワークにおけるAngularの特徴

 SPAのフレームワークはいくつかあります。Facebookの開発しているReact.jsなどが有名ですが、個人的にはReact.jsよりも断然Angularがおすすめです。Reactが最小限の本体とサードパーティのライブラリで構成されているのに対して、Angularは開発に必要な機能をすべて盛り込んだフルスタックです。開発に必要なデータバインディング、フォームバリデーション、非同期通信、ルーティング、テスタビリティ、セキュリティへの配慮など、一通りの機能がすべてあらかじめ用意されているので、Angular を選択することでコーディングに集中できます。ライブラリが複数あるとどれを使えばいいのか迷いますしライブラリ間の依存関係などを気にする必要が出てくると思いますが、そういった懸念から解放されコーディングに集中できることがAngularのメリットだと考えています。個人的にはAngularは「控えめにいって最高」のフレームワークです。

クロスプラットフォームなのもよい

わたしは個人でシステム開発をしているのですが、iOS用にSwiftで、Android用にKotlinで、そしてWeb用にJavaScriptで開発をしていたらいくら時間があってもたりません。そこで一つのソースコードでさまざまなプラットフォームで動作すればありがたいわけです。そこでクロスプラットフォームの仕組みとして「Ionic 」「Cordova」「NativeScript」「React Native」Electron」「Capacitor」「Xamarin」「Unity」などが候補にあがるわけですが、Angularは「Capacitor」というMacデスクトップアプリ、Windowsデスクトップアプリ、Web、iOS, Androidに出力できるこれまた最高のフレームワークと組み合わせることができます。したがって、Angularは効率的にプロジェクを作成し、それを複数のプラットフォームに同時に出力できるという夢のような生産性を実現するフレームワークです。

AngularJSとの非互換性について

Angularの前身であるAngularJSがあまりにも有名なため、AngularJSの終了から5年弱経っているのにまださまざまなところで混同されています。しかし、AngularはAngularJSで顕在化した問題を解決するべく、内部構造から細部に至るまで再設計され実装されています。

一般的にフルスタックフレームワークだと、開発規模が大きくなるにれバンドルされるファイルサイズが大きくなりパフォーマンス面で悪影響を与えることもあります。AngularJSでも顕在化したその問題を解決するために、AngularではJavaScript VM (Virtual Machine) フレンドリーな実行コードを生成することで実行速度を改善したり、AoT コンパイル(Ahead-of-Time Compilation)と呼ばれるビルド時に表示を高速化するための仕組み、さらに段階的にソースコードをよみこむLazyLoadingと呼ばれる仕組みを利用して高速化する方法も提供されるなどです。最初にAngularで開発するときに訳が分からなくなってしまいがちですが、AngularJSとは互換性がないということを覚えておくといいと思います。半年毎にバージョンが変わるのですが(例えばAngular8が現在のバージョンなら、半年後はAngular9がでる)これらには一部の機能を除いて互換性があります。

まとめと結論

SPAの技術の一つであるAngularについてまとめました。近年普及が急速に進んでいるPWAアプリ作成のフレームワークとして代表的な物で、一つのコードで複数のプラットフォームに出力できるクロスプラットフォーム性について記載しました。

Angularで個人で作ったアプリがあります。OCRという写真から文字を抜き出す技術を使って、ブログなどを早く書くためのツールです。これも一つのコードでAndroid ,Web,iOSに出力できるので大変便利でした。

iOS => https://apps.apple.com/app/id1497498494

Android => https://play.google.com/store/apps/details?id=com.rainbowsv2.ocr

Ionic(Angular)のフォルダ構成を完全解説

Ionicのフォルダ構成について

 Ionicで作成したプロジェクトは下記のような構造になっています。

directory

 かなり複雑で、最初に見たときは戸惑うかもしれません。実際に触るのはsrc/appフォルダがほとんどになりますが、他のフォルダを含めて解説したいと思います。

ルートフォルダについて

名前説明
e2e/システム全体の動作検証を行うE2Eテストの際に利用します。最初はほとんど触りません
node_modules/node.js上で動くため、package管理ソフトにnpmを使うことになりますが、npm経由でインストールしたライブラリが保存されます
src/実際に開発を行う場所です。9割このフォルダを触ります。
angular.jsonAngularの設定ファイルです。フォルダの出力先などビルドを中心にした設定はここで行います。
package.json実際にプロジェクトで使用するライブラリを指定します
package-lock.jsonpackage.jsonで指定したものが入っているか確認します。エラーの時にたまにいじります

したがって、基本的にはsrcだけをいじると考えておいて差し支えないと思います。

srcフォルダについて

それでは、実際に開発を行うsrcフォルダを見てみます。

srcのなかでも触るのはsrc/appがほとんどになりますが、こちらについても簡単に解説をします。

ファイル/フォルダ説明
src/app実際に触るのはほとんどこのフォルダのなかです。このフォルダが開発対象と考えていただいて問題ないと思います。
src/assets画像や音声、動画などのリソースを配置します。例えばsrc/resourcesというフォルダを自分で作成すると読み込まれないので注意が必要です。
src/environmentsなかには簡単なjsonファイルが本番用と開発用に入っています、環境変数をそれぞれ定義します。Google Analyticsをいれるときなどにいじりました。
src/themecssの拡張であるscssでデザインを規定しますが、そのファイルが入っています。IonicのUIが優れているため、個人的にはあまり触りません。
src/global.scssプロジェクト全体に適用するscssを書く際はこちらを使います。たた、実際はpageごとに用意されるscssをいじることが多いです。
src/index.htmlAnugular(Ionic)でも最初によみこまれるのはIndex.htmlです。
src/main.tsアプリを起動するためのファイルです。index.htmlのあとに読み込まれます。
src/polyfills.tsIE10/
11対応を行うもののようですが、IonicってIEで見れないんですよね。。
src/test.ts単体テストの設定ファイルです

まとめ

基本的に、src/appのなかをいじる、とだけ考えておけばいいと思います。

その他

IonicをAngularで使って、写真から文字情報を抽出して爆速でレポートや記事を作成するアプリを作成しています。無料なのでよかったらどうぞ。

iOS => https://apps.apple.com/app/id1497498494
Android =>  https://play.google.com/store/apps/details?id=com.rainbowsv2.ocr

【まったく新しい最高のブラウザ】Braveブラウザでインターネットの仕組みとありかたを変えよう。

これはただのプラグインではありません。Louis Armstrong によって歌われた最も有名な二つの単語、Hello, Dolly に要約された同一世代のすべての人々の希望と情熱を象徴するものです。
これはただの記事ではありません。Robert E. Kahnによって歌われた開かれたインターネットへのすべての人々の希望と情熱を象徴するものです。

概要

この記事ではBraveブラウザについて説明します。Braveブラウザを使えば広告なしでYoutubeを閲覧できたり、サイトを見るとお金がもらえたりします。また、Adsenseに代わりWebサイトやTwitterを収益化できるブラウザでもあります。しかしそれだけではなく
1. (Googleの無料サービスに定義された)インターネットの仕組みを変える
2. コンテンツ製作者に適切に報いる
ことを目的とする従来とは全く異なるパラダイムから生まれたブラウザです(製作者はJavaScriptの生みの親で元MozillaCEOのアイク氏です)。
そこで、クリエータとして収益化する方法とWebサイトを閲覧してお金をもらう方法をメインで説明しつつ、Braveブラウザの背景や理念などについても紹介します。インターネットの仕組みを変えようとする非常に面白い取組みで、インターネットを使う人なら誰でも関わりのある話だと思いますのでぜひご覧ください。

構成

・Braveブラウザとはなんぞや
・クリエータの収益化の設定方法
・ユーザとして収益化の設定方法

Braveブラウザとはなんぞや

技術的には2019年に公開されたChromiumベースのブラウザです。ただし単なるブラウザではありません。他との決定的な違いは、JavaScriptの生みの親で元MozillaCEOのアイク氏がインターネットのあり方と仕組みを根本的に変えることを目指して作ったことです。しかしインターネットのあり方と仕組みを変えるとはなんぞや。。
ここではわかりやすくアイク氏の着眼点から整理することでまとめてみたいと思います。
(Braveブラウザはまだメジャーではないため、前段が長くなることをお許しください。)

Braveブラウザの着眼点と現状の問題

既存のインターネットの仕組みについて、無料でサービス展開して広告で収益化する仕組みって限界あるよね?ということが発端になっていると理解しています。
ユーザー視点で言えば

  • さすがに広告邪魔すぎじゃね?

という限界であり、コンテンツ製作者としては

  • 広告出しても全然もうからんのやけど。アフィもやらないとダメかな。(作りたいコンテンツ作れねー)

という限界であり、ビジネスモデルや倫理的な観点で言えば、アップルのティムクックの「サービスが無料であれば、それを受け取る人は顧客ではなく、製品である」ということをもじれば

function 広告利益最大化(
   ティムクック="サービスが無料であれば、それを受け取る人は顧客ではなく、製品である"
){
 => (ユーザ-="単なる変数";)
}

ということです。これって正しいようだけど、よくみると文法エラーですよね?

元々インターネットというのは分散型で自由であったもののはずなのに、今は「データの吸い上げ×広告出稿」でプラットフォーマーが牛耳ってる超中央集権状態だよね?しかもその中で一人ひとりの扱いは変数の一つにすぎず、モチっと別の仕組みはないのかね?ということがアイク氏の着眼点でした。

スクリーンショット 2020-10-31 23.36.33.jpg

方法

そこでアイク氏はMozillaを突然退社してBraveブラウザの作成を始めます。さすがJavaScriptを生み出して、Mozillaを率いただけある人は違うなと思うのですが、曰く、突然モジラのCEOを辞任したアイクは、

生まれ変わったようにプログラミングを再開し、Brave というこれまでにないブラウザを開発した。
Brave は、Cookie の弊害を取り除くとともに、
すべてをトップダウンで決められるインターネットの仕組みを変えるものだった。

ということです(「グーグルが消える日 Life after Google(ジョージ・ギルダー著)」)。

結局何が変わるの?

本を読んだり公式サイトみるといろいろ書いてあるのですが、要するに下記のメリットがあります。

ユーザーのメリット

  • ユーザーはBraveブラウザ上での広告表示を完全に管理可能。ブロックすることも表示することも可能
  • ユーザーはブラウザ上に広告を表示させることで、金銭的な対価(batという暗号通貨に紐付けられたbatポイント)を得られる。コンテンツ製作者にも支払われる。
  • ユーザーは、その対価をコンテンツ製作者に寄付できる
  • ユーザーは個人情報を売られたり集められたりしない

出稿者のメリット

  • ユーザーの好意的な反応を期待できる

コンテンツ制作者のメリット

  • Adsenseやアフィリエイト以外の第3の収益化の方法が得られる
  • 過剰な広告にレイアウトを崩されない
  • Braveブラウザを使用するユーザーからの寄付を期待できる(コンテンツ自身が価値を持つようになる!)

という点です。結構こうやって考えてみると大きいですよね?

以上が
・Braveブラウザとはなんぞや
・クリエータの収益化の方法
・ユーザとして収益化する方法
という3構成の最初の部分でした。さて、それでは実際にいよいよ収益化する方法について記載していきたいと思います。Adsenseと併用可能でしたのでぜひ登録してみるといいと思います(Adsenseのように審査厳しくありませんでした)。
なお、WEB系じゃない方はここはスルーしてください。この下にユーザーとして使う方法があります。

Braveブラウザへの登録

こちらの公式サイトから設定をしていきます。
https://brave.com/ja/

Braveブラウザでクリエイター登録するために、大きく分けて2つのことを行います。

  • 1.クリエータ登録をして、収益化したいサイトを登録する
  • 2.プラグインを入れて、パブリッシャーIDを入力してサイトを認証する

1.クリエータ登録をして、サイトを登録する

トップページ右上の「クリエイターの方」というボタンから下記のページに飛びます。
https://creators.brave.com/?locale=ja


登録ボタンを押して、メールアドレスを入力します。


メールが届くので、そこに記載されたリンクを飛んで氏名を入力して完了です。非常に簡単ですね。
ログインするとこんな画面になります。


ここでサイトの登録をしていきます。右上の「チャンネルを登録」ボタンを押して、下記のカードから収益化させたいチャンネルを選択します。Twitterなども収益化できるようですが、私の場合はウェブサイトを選んでドメインを入力しました。


すると勝手にWordPressだと判定してくれました。(Angular React,Pythonのサイトだとどうなるかわかりませんでした。でも実際はad.txtに相当するテキストファイル作っているだけなので行けると思います)


画面の指示にしたがって、プラグインのインストールして、サイトを認証します。

プラグインのインストール

からzipファイルをダウンロードして、WordPressの管理画面から新しいプラグインとしてアップロードし、有効化します。

検証コードの追加してサイトを検証する

管理画面のプラグインの中にBrave Payments Verificationという行が追加されますのでそれを選択して、先の画面に表示された検証コードを追加します。あとは検証コードが表示されたページで検証ボタンを押せばOKです。


するとこういうメールが届きますのでこれでクリエイター登録は完了です。


最後にプラグインをdeactivateして終わりです。
(支払い先でPayPalと紐づける必要はありますが、これはPayPal口座があればすぐできますし、特にクリエイター登録という意味ではしなくても問題ないかと思います)

以上です。これでBraveブラウザでクリエイター登録ができました。あとはユーザーがBraveブラウザを介してアクセスしたら、コンテンツに対する支払いが振り込まれることとなります。(でもまだ未検証です。私は https://np-sys.com/ で登録したので、Braveブラウザで誰かアクセスしてみてくれたら振り込み額など追記します。また、こちらの投稿にコメントをいただけたら、記事の下にサイト一覧のような形でリンクを貼ろうと思います。ぜひご連絡ください)

ユーザーとしてBraveブラウザを使用する

上記はクリエーターとして登録する方法を説明しましたが、ユーザーとしてBraveブラウザを利用することもできます。Braveブラウザを使うと、ChromeやSafariと異なる3点のメリットがあります。

  • 広告を排除してコンテンツを閲覧できる
  • 広告を表示することも可能で、その場合広告閲覧によって収益が得られる
  • サイト作成者に投げ銭できる

このうち、サイト(広告)の閲覧によって収益が得られるというのは理解に苦しむところだと思います。私もそんな美味しい話があるものかと思いましたが、これはBraveブラウザの理念を踏まえると理解できます。つまり
「広告に基づくウェブのエコシステムをリセットし、広告主、コンテンツ・パブリッシャー、顧客の誰もが得をするウィン・ウィン型のソリューションを提供する」
ことをBraveブラウザが目的としているためです。まぁ投げ銭の元資金って感じなのだろうとは思いますし、こういう仕組みがないとなかなか広まらないですから、いい仕組みかと思います。

ユーザーとしてBraveブラウザを利用する方法

それではいよいよネット閲覧でお小遣いがもらえる謎のBraveブラウザのインストール方法です。と言っても公式からダウンロードしてインストールするだけです。
公式→ https://brave.com/ja/

インストール後、Rewardを有効にすれば収益化は完了します。個人データの集約などもしていないとのこと。


大体、広告一回見ると1円くらいです。最大でも1時間に5回しか広告を表示させられないので額としては大したことはありませんが、得られた収益をサイト製作者に寄付できることが大きいです。小さな投げ銭が集まることである程度大きな金額になれば、正当な方法でコンテンツ製作者に報いることができると思います。作った人がコンテンツを見てもらい、金銭という形で認めてもらえる、これって健全な社会の形ですよね?

まとめ

というわけで、この記事では次世代のBraveブラウザについて紹介しました。
1. (Googleの無料サービスに定義された)インターネットの仕組みを変える
2. コンテンツ製作者に適切に報いる
ことを目的とする従来とは全く異なるパラダイムから生まれたブラウザで、Google Adsenseに変わる方法(実際は並列して使えます)として利用できます。私は開発者としてもユーザーとしてもGoogleが非常に好きなのですが、Braveブラウザの理念にも共感します。Braveブラウザはとてもいい仕組みだと思いますし、何事にも多様性は大事なはずなので、Braveブラウザも使っていきたいとと思います。ぜひ皆さんもご検討してみてください。軽くて普通にいいブラウザでした。

最後になりますが、こちらの記事は、アメリカでベストセラーとなった「グーグルが消える日 Life after Google(ジョージ・ギルダー著)」を参考にしております。哲学的なことが多かったけど面白かったです。

アフィリエイトリンクはこちら。ぜひクリックして購入してね!
=> https://amazon.com

、、、、!?。


ぜひみんなで新しいインターネットを作っていきましょう!