nyanpyou Note

主な目的は調べたり作ったりしたプログラミング備忘録(予定)

そうだ温度計を作ろう その3

ブログ執筆に着手してから思った以上に時間(1か月近く)がかかってしまいましたが、温度計最終回その3外観編。

さっくり行こうと思います。

nyanpyou.hatenablog.com

nyanpyou.hatenablog.com

外観

完成した温度計の外観はこんな感じになった。

f:id:nyanpyou106:20210220144412j:plain
前面
f:id:nyanpyou106:20210220144437j:plain
背面
f:id:nyanpyou106:20210220144507j:plain
上面

液晶にマウントしたラズパイを、アクリル板に固定してみた。自分でアクリルの加工を行うと絶対仕上がりが汚くなると思ったので、3DCADで図面を描いてみて業者の方にお願いすることにした。使用したのはFusion360。3DCAD自体使ったことが無かったのでソフトはどれを選んでもよかったが、無料で使える3DCADとして有名らしいということで選択。実際これが無料で使えるなんて驚いた。DIYで何か作りたいことは全部これでやれちゃいそう。

f:id:nyanpyou106:20210220150347p:plain
見よう見まねで設計した温度計の枠
知りたい方がもしいたら各種寸法入りのデータも掲載します

加工を依頼したのはアクリルショップはざいや様

www.hazaiya.co.jp

100mm×140mm×3mmのアクリル板2枚に、穴あけと磨き仕上げをお願いして、送料込みおよそ4500円。

依頼から納品まで2週間程度かかるが、この値段でとても綺麗に加工して貰えたので非常に満足。多少穴位置がずれたとしても仕方ないなと思っていたが、一切追加の加工や調整の必要が無く組み上げることができた。

その他は必要になったものを随時ホームセンターやAmazonで調達した。

Amazon.co.jp: Geekworm Raspberry pi(ラズベリーパイ) インストールツール M2.5シリーズ (132pcs)六角真鍮スペーサー + スタンドオフ + ナット + ネジを含み、 収納ケース入りのPi4B / 3B +/ 3B / Zero W用アクセサリーキット: パソコン・周辺機器

Amazon | UGREEN L字 USB Cケーブル PD対応 60W/3A 急速充電 断線防止 アンドロイド スマホ 2018 iPad Pro Macbook Pro Dell XPS Lenovo Yoga Galaxy S9 S8 Plus その他USB-C機器対応 2m | UGREEN | USBケーブル 通販

Amazon.co.jp: Anker PowerPort PD 2(PD対応 30W 2ポート USB-A & USB-C 急速充電器)【PSE認証済 / Power Delivery対応 / PowerIQ搭載 / コンパクトサイズ】iPhone 11 / 11 Pro / 11 Pro Max / XR / 8、S10 / S10+、その他対応: ホーム&キッチン

改善点

まだまだ改善点や問題点はあるので、まとめて列挙する。

実は室温がズレる

割と致命的だが、ラズパイ本体の発熱が想像以上に強烈で、背面に配置している温度センサーが正しい室温を恐らく出していない。背面のアクリル板を触ると少し暖かいし、実際に家にあった別の温度計をそばに持ってきて比較してみると、大体1.5℃くらい高く温度が表示されていることが分かった。

温度センサーを本体から離すとなると、デザインを作り直すことになるためちょっと難しそうだが、今現在は温度センサーがラズパイ側を向いて接続されているため、ピンヘッダを取り付けなおして外向きにすれば、ある程度改善するのではないかと予想している。

動作させ続けると液晶に白い靄が生じる

2~3日温度計を起動し続けると、液晶の外枠付近に白い靄が生じる。一度電源を落とし、しばらく放置してから再度電源を入れると復旧したが、原因は不明。熱?

HTMLにアクセスした瞬間にエラーが出力される

見かけ上問題なく機能はしているが、ローカルサーバーを立てた後、温度計のHTMLにアクセスすると、エラーが出力される。

#温度計エラー全文
Traceback (most recent call last):
  File "/usr/lib/python3.7/wsgiref/handlers.py", line 138, in run
    self.finish_response()
  File "/usr/lib/python3.7/wsgiref/handlers.py", line 180, in finish_response
    self.write(data)
  File "/usr/lib/python3.7/wsgiref/handlers.py", line 279, in write
    self._write(data)
  File "/usr/lib/python3.7/wsgiref/handlers.py", line 453, in _write
    result = self.stdout.write(data)
  File "/usr/lib/python3.7/socketserver.py", line 799, in write
    self._sock.sendall(b)
ConnectionResetError: [Errno 104] Connection reset by peer
----------------------------------------
Exception happened during processing of request from ('127.0.0.1', 38578)
Traceback (most recent call last):
  File "/usr/lib/python3.7/wsgiref/handlers.py", line 138, in run
    self.finish_response()
  File "/usr/lib/python3.7/wsgiref/handlers.py", line 180, in finish_response
    self.write(data)
  File "/usr/lib/python3.7/wsgiref/handlers.py", line 279, in write
    self._write(data)
  File "/usr/lib/python3.7/wsgiref/handlers.py", line 453, in _write
    result = self.stdout.write(data)
  File "/usr/lib/python3.7/socketserver.py", line 799, in write
    self._sock.sendall(b)
ConnectionResetError: [Errno 104] Connection reset by peer

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/usr/lib/python3.7/wsgiref/handlers.py", line 141, in run
    self.handle_error()
  File "/usr/lib/python3.7/wsgiref/handlers.py", line 368, in handle_error
    self.finish_response()
  File "/usr/lib/python3.7/wsgiref/handlers.py", line 180, in finish_response
    self.write(data)
  File "/usr/lib/python3.7/wsgiref/handlers.py", line 274, in write
    self.send_headers()
  File "/usr/lib/python3.7/wsgiref/handlers.py", line 331, in send_headers
    if not self.origin_server or self.client_is_modern():
  File "/usr/lib/python3.7/wsgiref/handlers.py", line 344, in client_is_modern
    return self.environ['SERVER_PROTOCOL'].upper() != 'HTTP/0.9'
TypeError: 'NoneType' object is not subscriptable

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/usr/lib/python3.7/socketserver.py", line 316, in _handle_request_noblock
    self.process_request(request, client_address)
  File "/usr/lib/python3.7/socketserver.py", line 347, in process_request
    self.finish_request(request, client_address)
  File "/usr/lib/python3.7/socketserver.py", line 360, in finish_request
    self.RequestHandlerClass(request, client_address, self)
  File "/usr/lib/python3.7/socketserver.py", line 720, in __init__
    self.handle()
  File "/usr/lib/python3.7/wsgiref/simple_server.py", line 133, in handle
    handler.run(self.server.get_app())
  File "/usr/lib/python3.7/wsgiref/handlers.py", line 144, in run
    self.close()
  File "/usr/lib/python3.7/wsgiref/simple_server.py", line 35, in close
    self.status.split(' ',1)[0], self.bytes_sent
AttributeError: 'NoneType' object has no attribute 'split'
----------------------------------------

調べても全く不明だったため、もし知っている方がいれば教えて頂けると幸いです。自力で分かったのは、どうも__pycache__フォルダが作成されていると出るっぽいということだけ。理由を理解できるかはわからないけど、「よくわからんエラーが出るけど動きます」は気持ち悪い。

終わりに

想像以上にお金と時間(3万円&4か月くらい)はかかってしまいましたが、ちゃんと最後まで形にすることができました。安堵。

次に何を作るかはまだ分かりませんが、唐突に作りたいと思ったものを作ろうと思います。いつも通り。

その前に転職活動しなきゃ(使命感)

そうだ温度計を作ろう その2

そんなわけでその2ソフトウェア編です。

nyanpyou.hatenablog.com

構成の検討

初期案

温度計を作るにあたって、最初に考えた仕組みはこんな感じ。

f:id:nyanpyou106:20210208110241p:plain
温度計構成初期案
超単純で、温度センサーから得た情報を適当なファイルに書き出しておき、その中身をJavaScriptで読み込んで、リアルタイムにHTMLに反映させようという考え。

残念ながらこの方法は調べてみたところすぐに駄目だと判明した。全く知らなかったのだが、JavaScriptにはローカルにあるファイルを勝手に読むという機能が存在しないらしい。何かファイルを読ませようとした場合、いちいちファイルを手動で選択して開くという操作が必要になってしまう。これではリアルタイム更新の温度計として成り立たないため、別の方法を探すことにした。

改善案

要はJavaScriptに何かしらの方法で温度のデータを送信することが出来ればよいので、調べた結果次のような仕組みが良さそうだとわかった。

f:id:nyanpyou106:20210209145950p:plain
温度計構成改善案
どうやらサーバーからデータを送信し、それをJavaScriptで受けることが可能で、これを用いることでリアルタイムにHTMLの表示を更新することができるらしい。これは非同期通信と呼ばれるものらしい。身近な例でいうと、GoogleMapで画面上に映る地図の範囲を動かすと、読み込み動作を挟まずに地図が更新されていくが、それはこの非同期通信によって実現されているそうだ。

サーバー・クライアント間通信についての知識は全くないが、他に良さそうな選択肢が見つからなかったので、とりあえずこの構成で作成してみることに決定した。

また、せっかくなので室温以外に外気温も何かしらの方法で取得して画面に表示できればいいなと思い、その機能も実装することにした。

具体的な話

(正直な話、理解しきれていない部分が沢山あるため、ふわっとした記述が多い。
文章に書き起こそうとすると、嫌でも自分の浅さと向き合う必要があるためとてもつらい…つらくない?)

温度取得

室温

SHT31から温度データを取得する方法については、そのものずばりを記事にしてくれている方がいたため、有難く使わせて頂くことにした。

qiita.com

上記記事では周期的連続測定コマンドを使用しているが、今回は一定時間ごとに温度読み出しスクリプトを呼び出し、HTMLにデータを送る形のため、単発測定コマンドに変更している。単発測定コマンドを使用する場合は、クロックストレッチ設定を有効にするか選べるが、これは有効にするとセンサーからの出力の違いで、測定が完了して読み出し可能になったかどうかを判断できるようになり、測定時間を予想してsleep()で待たなくて良くなるらしい。

SHT31-DIS 仕様書(日本語)

参考:温湿度センサーSHT31をクロックストレッチで使う時の備忘録

今回は短期間で頻繁にアクセスしたいわけではないので、適当なsleep()を入れる方式にした。

# 温度取得コード抜粋
def get_temperature_data():
    """SHT31から温度データを取得し、温度をJSONで返す"""
    i2c = smbus.SMBus(1)
    i2c_addr = 0x45

    i2c.write_byte_data(i2c_addr, 0x24, 0x00)
    # 測定終了まで待つ
    time.sleep(1)
    data = i2c.read_i2c_block_data(i2c_addr, 0x00, 6)
    temperature = tempChanger(data[0], data[1])
    return {"room": str(temperature)[0:4]}

外気温

今回の構成では直接の取得はできないため、どこか別の所で公開されている値を引っ張ってくることにする。

ハードコーディングで現在地を設定して、気象庁などの気温を公開しているwebページやAPIから値を取得することも考えたが、それでは面白くないし汎用性もないので、今温度計がある場所を自動的に調べて外気温を取得させようと考えた。

現在地取得の方法だが、まず最初に考えたものは「ラズパイのGPSモジュールを使う」方法。 例えばこういうやつ

www.switch-science.com

しかしこれは採用を見送った。できる限り温度計をコンパクトに収めたいという願望があったことに加え、既に温度センサーを繋げることが確定しているため、追加でモジュールを接続するとなると、ケース作成で苦労するだろうと思ったからだ。あとお高い。
(改めて見てみると屋外で使用するためのモジュールらしい。どっちにしろ今回は使えなかった。)

次に考えた方法は、「GeoLite2を使って温度計の現在のIPアドレスから現在地(何市に存在しているか)を割り出す」方法。

dev.maxmind.com

GeoLite2はIPアドレスと地域情報を紐づけたデータベースで、IPアドレスから国名や都市名を知ることができる。そしてなんと無料で使える。

当初はこれを使う予定だったが、よくよく調べてみると2019年末に規約の変更があり、商用利用不可の無料版GeoLite2でもユーザー登録が必要になったらしい。

www.tabimoba.net

これだけならまだよかったのだが、公式ページの利用規約を眺めているとData Privacyの項目に

データベースを最新の状態に保ち、更新されたバージョンがリリースされてから30日以内に古いバージョンのデータベースを破棄する必要があります。
(DeepL翻訳)

という記載を発見。どうやら逐一更新作業が必要らしい。仮に古いバージョンのまま使用を続けたとしても、個人利用ならば恐らく文句は言われまい。しかしあえてリスクを負って、更新作業をせずに使い続ける理由も無かったので、仕方なくこの方法も断念。

真面目に新バージョンが公開されるたびに更新作業を行うというパターンもあるが、正直保守作業があまりにも面倒である。

さらにこれら2つの手法にはもう1つ問題があった。例えば気象庁のHPには全ての市の外気温が掲載されているわけではないため、取得した位置情報ずばりの外気温が掲載されていなかった場合に、どの市の外気温を代わりに取得するのかを決めておく必要がある。これは地味に手間だ。

最後に考えた方法は、「Google検索から取得する」方法。Google検索にて、「現在地 天気」と検索すると、検索結果に現在地の外気温が表示される。こいつをPythonからスクレイピングして取得する方法である。

f:id:nyanpyou106:20210221093954p:plain
「東京 天気」で検索した例
「東京」を「現在地」にすると驚きの精度で現在地の外気温を表示してくれる
つまり面倒な現在地取得を全部Google先生にやってもらうことにしたのだ。なんてことはない方法だが、この方法を思いついた瞬間は正直天才かと思った。小さいことでも自己肯定感を得ることは大事。多分。今回はこの方法で外気温を取得している。

但し、ブラウザ上で検索して表示した時と、Pythonからスクレイピングした時でHTMLタグのclass名が異なっている場合があるため、注意が必要。さらに、どうも検索結果に外気温が掲載されていない場合があることが分かったため、外気温が見つからなかった場合は何もしない(外気温の表示を更新しない)処理を追加しておいた。

ローカルサーバー

既に温度取得でPythonを使うことは決定していたので、サーバー立てもPythonで実現できれば楽だ。そこで早速Pythonでのサーバーの立て方を調べてみた。その結果、少なくとも以下の4種類が存在することが分かった。

  1. 標準ライブラリのhttp.serverを使う
  2. Djangoを使う
  3. Flaskを使う
  4. Bottleを使う

本記事を執筆時点で改めて調べてみると、どうやらPythonのWebフレームワークにはもっとたくさん種類があるようだが、温度計の作成に取り掛かった時点で候補に挙がったのは上記4つだった。DjangoやFlaskは、中身を知らないけど名前だけは聞いたことはあるくらい有名なフレームワークである。

しかし、今回はこの中からBottleを選んだ。というのも、どうもDjangoやFlaskは便利で何でもできる分、学習コストが高いらしい。反対にBottleは前者2つほどの汎用性は無いもののシンプルで、ファイルも軽量(なんとbottle.pyの1ファイルのみ)という事が決め手になった。

f:id:nyanpyou106:20210209140943p:plain
公式のドキュメントもこれなら目を通せそうだと思える分量
(https://bottlepy.org/docs/dev/)
正直に言うと、サーバー部分以外にも使ったことのない技術や、やったことのない作業が多かったため、出来る限りそれぞれの学習コストは軽くしたかった、という理由もある。消極的ではあるが、あまりにややこしくて取り掛かることが億劫になってしまったり、途中で挫折してしまい完成できずに終わる、という事態は一番避けたかった。そのため、あまり深い事(汎用性とか)は考えずに、この部分に関してはとにかく分かりそうなものからやり始めよう、という姿勢で取り組むことにした。

本当に知識が全くなかったため、最初はただサーバーを起動して、そこにHTMLと画像ファイルなどを一緒に置いておけば、HTMLに各種ファイルを読み込んで画面に表示できると思っていた。しかしどうもそれだけではだめで、静的ルーティングをコードに書いておかないと、画像や動画等のファイルへアクセス出来ないらしい。今回は動画や画像を入れたフォルダとCSSを入れたフォルダへのルーティングを追加した。

kitabatech.blogspot.com

# send_temperature.py
# 静的ファイルへのルーティング部分
@route("/img/<file_path:path>")
def server_static(file_path):
    return static_file(file_path, root="./img")

@route("/static/<file_path:path>")
def css(file_path):
    return static_file(file_path, root="./static")

非同期通信

これも調べたところ、実現方法は以下の3パターンがありそうだということが分かった。

  1. Ajax
  2. WebSocket
  3. SSE

今回選択したものはSSE(Server-Sent Events)。これも理由は単純で、一番簡単に実装できそうだったから。但し、参考資料が予想外に少なく困った。何とか探して参考にした記事は以下。

note.com

labs.gree.jp

ja.javascript.info

すんなり実装出来ればよかったのだが、問題も発生した。SSEを組み込むと、なぜかHTML上に配置した動画の読み込みが途中で止まってしまう(数秒再生されて停止してしまう)ことが分かったのだ。後述するが、この動画はデザインの問題で配置する必要があったものである。この問題は、例えば以下のような書き方をした場合に発生した。

# send_temperature.py
# SSE部分
@route("/sse")
def sse():
    while True:
        response.headers['Access-Control-Allow-Origin'] = "*"
        response.headers['Content_Type'] = "text/event-stream"

        #temperature_json = sht31.get_temperature_data()
        temperature_json = {"room":"1"}
        outside_temperature = scraping_outside_temperature.scraping_currentlocation_outside_temp()
        temperature_json["outside"] = outside_temperature
        temperature_json_str = json.dumps(temperature_json)

        yield "data: {}\n\n".format(temperature_json_str)

原因が分からず結構困ったが、ブラウザのネットワークモニターを眺めた限りでは、SSEの処理が始まると他のファイルのDLが止まってしまうようだった。

f:id:nyanpyou106:20210214164310p:plain
SSEの下のcaptain_movie.mp4がずっとpendingのまま

つまりSSEで送られてくる情報を受け取る、という処理にかかりっきりになってしまっているのではないかと考え(HTTPは一度に1つのリクエスト/レスポンスしかできないと見た覚えがあったため)、上記コード中のwhile Trueを削除しyieldをreturnに変更したところ、動画読み込みが途切れることはなくなり、サーバーから継続的にデータ送信が可能になった。

# send_temperature.py
# SSE部分
@route("/sse")
def sse():
    response.headers['Access-Control-Allow-Origin'] = "*"
    response.headers['Content_Type'] = "text/event-stream"

    temperature_json = sht31.get_temperature_data()
    outside_temperature = scraping_outside_temperature.scraping_currentlocation_outside_temp()
    temperature_json["outside"] = outside_temperature
    temperature_json_str = json.dumps(temperature_json)

    # 初回も10秒待たせると読み込み途中の動画も10秒止まってしまうので、初回は待ち時間なしにする
    # FIXME 正しい処理をしているとは思えない うまいやり方を知りたい
    first = True
    if first:
        first = False
    else:
        time.sleep(10)
    return "data: {}\n\n".format(temperature_json_str)

while Trueを削除した場合、一度実行した後にサーバーとの接続が途切れてしまうが、SSEには接続が途切れると自動的に再接続を試みる機能が搭載されているらしく(参考:Server Sent Event:再接続) 、これのおかげで見た目上上手く動くようになったと思われる。しかしコメントとしてコード内にも記載しているが、正しい処理をしているとは正直思えないため、上手い方法があれば知りたいところである。

自分の予想が正しければ、SSEの通信に入る前に全てのリソースを読み込み切れば問題なく動くはずなので、これら

JavaScript初心者脱却計画(addEventListenerについて)|Kuu|note

Window: load イベント - Web API | MDN

を参考にonloadイベントを使って読み込み順を制御しようとも試みたが、どうも上手くいかなかった。

画面表示

マリン船長要素を入れつついい感じに作った(雑)

www.youtube.com

まず、メインの温度表示画面は全画面表示にしたいため、それを実現する仕組みが必要だった。JavaScriptで強制的に全画面表示にできればよかったのだが、調べたところファイル読み込みと同様これも不可で、必ずユーザーからの操作が必要になるらしい。

そこで、起動画面を1枚挟むことにした。ここに全画面表示を実行するためのボタンを用意し、ボタンを押すことで全画面表示の温度表示画面に移行するようにする。(参考:[HTML5] フルスクリーンの開始と解除)しかし、ただボタンを置くだけでは殺風景で寂しいので、動画を配置してみることにした(これが上述のデザインの関係で配置したかった動画である)。

youtu.be

温度計画面には、SSEでPythonから受け取った室温と、スクレイピングGoogle検索から取得した外気温、キャラクターの台詞、キャラクターの画像、全画面表示を終了するためのボタンを配置することにした。また、これだけだと画面が余ってしまったため、ついでに時刻表示もつけることにした。時刻はJavaScriptでラズパイの時計から読み込む。(参考:現在の日時を表示する)

また、そのまま温度を表示するだけでは面白くないので、現在の室温によってキャラクターの台詞と画像が変化するようにした。

f:id:nyanpyou106:20210219183711p:plain
画像と台詞の温度変化
左から~15℃、16~19(26~29)℃、20~25℃、30℃~

完成した温度計画面は以下。

f:id:nyanpyou106:20210220141007p:plain
温度計画面(全体)

各種素材は、以下のものを使わせて頂いた。

最終回へ続く

色々書いていると滅茶苦茶長くなってしまったが、最後は温度計の外観の話。