ep.45 『今話題のパルスオキシメーターを自作する』 - LINE のフロントエンドエンジニアの GW | UIT INSIDE

2020/05/27 に公開5611 views

このエピソードについて

LINE のフロントエンドエンジニアの GW の活動を5日連続で紹介する企画 vol.3。

@potato4d と @spring_raining が、 @Leonardo_engr が制作したパルスオキシメーターの開発事情について聞いてみました。

まとめはこちら: GWを利用した自由研究発表会を開催しました - LINE ENGINEERING

折原さんによる作りかた動画はこちら

Leonardo

Front-End Dev 1 チーム
LINE NEWS のフロントエンド開発
コミュニティ「UIT」運営メンバー

パルスオキシメーターについて

血中酸素濃度の測定器
- COVID-19 の症状を知ることができると話題に
- 売り切れているが、自分たちでもセンサーを活用することで制作できる

自作パルスオキシメーターについて

Arduino とセンサーモジュールを組み合わせるだけでデータの取得が可能
今回は USB でのシリアル通信で、 Mac に対してデータを転送した
Mac 側では Node.js のシリアルポートモジュールを利用し取得、ブラウザへは Web Socket でデータを転送した
- https://www.npmjs.com/package/serialport

IoT 機器の開発について

実装ハードル
- JavaScripter の場合は前述のパッケージで一発で取得可能なため、ハードルは低い
- 一方で IoT 機器特有の事情から技術選定や実装上の特性をキャッチアップする必要はある
  - IoT 機器の場合1デバイスから秒間20~30程度のリクエストは簡単に飛んでくるため、HTTPではなくWSを利用する
  - アナログ機器を使うだけあってデータの欠損などが出てくるため、丸めていく必要がある
物理ハードル
- 基本的にはつなげるだけなので大きなハードルはない
- 電子工作などをやったことがある人なら実現可能
  - フロントエンドエンジニアでも簡単
価格
- Arduino・センサーともに3000円程度+部品代で初期投資は8000円程度
  - Arduinoについては一台あると使い回せるので一度購入してしまえば資産を有効活用できる

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:00
こんにちは、こんにちは本日もitサイドやっていきたいと思います。え、UIT INSIDEは、

Guest 00:07
ユーザーインターフェイスと、テクノロジーを愛する開発者のためのコンドキャストです。

Guest 00:11
最新のえ、web標準の動向や開発フレームワークの編成、またまたurやuxに関することまで

Guest 00:18
最新のフロントの状況をキャッチアップしていくことを目的としております。

Guest 00:23
またハッシュタグはえ、シャープUIT、アンダースコアインサイドシャープUIT、アンダースコアインサイトとなっております。え、エピソードに対してのご意見やご感想などがありました。らえ、ぜひぜひツイートなどいただければと思います。

Guest 00:36
ということで、本日はですねえ、ラインのフロントエンドエンジェラル、ゴールデンウィーク。3日目ということで、今日ゲストにお原さんを招待して、えーパルスオキシメーターについて話していきたいと思います。え、お原さんよろしくお願いいたします

Guest 00:50
はい、お願いします

Guest 00:52
ではですね、まずおはらさん以前1度イテンサイド出演していただいたと思うんですけど、軽く自己紹介お願いできますでしょうか。

2. 折原さん自己紹介 00:53

Guest 01:01
はい、自分も同じくUITチームでUITデブ1チームに所属しているエンジニアです。

Guest 01:08
tlv1チームは、主にLINEnewsの開発をやっている部署になります。はい、

Guest 01:13
ではではえ、お原さんよろしくお願いいたします。今回ですね、ゴールデンウィークでえった内容について、簡単に紹介してもらってもよろしいでしょうか。

3. パルスオキシメーターについて 01:16

Guest 01:23
はい、ちょうどゴールデンウィーク入る直前ぐらいのニュースで、

Guest 01:28
コロナ対策として、パルスオクシメーターが有効じゃないかっていうようなニュースが流れてたのを見て、パルスオクシメーターってなんだろうっていうのを調べてたら、まあの血中酸素が図れるものなんだなっていうのをうん、うん、調べて分かって

Guest 01:42
で、どうやって血中濃度測るのかなと思ったら、センサーで測れるんですけど、そのセンサーが偶然手元にあって、で、その

Guest 01:52
センサーを使ってみて、あ、でも自分でもパルクシュメーター作れるじゃん。と思ってやってみたのがきっかけです。

Guest 01:58
パルス、ルキシュネターっていうのは、なんかコロナの重症ドメみたいなのが分かるんすかね。

Guest 02:04
そうですね、あの血中酸素濃度が分かって、要は息苦しいとかいう

Guest 02:09
呼吸系の症状を訴えてる人は、どんどんその血、中酸素濃度が下がっていくらしいんですね。はい、なので、パルソクシメーターで測って、普通100パーセントとか、99パーセントぐらいの血中酸素濃度は正常らしいんですが、それが95とかを切ると、

Guest 02:22
症状があんまりなくても、いや、ほんとは苦しいはずとか、実は症状が悪化してるみたいなことがあってま。早期発見だったり、重症化する前に

Guest 02:31
発見できるみたいならしいですね。はい、

Guest 02:34
まだ症状は出てないけれども、その問題が体にあるかもしれないっていうのがわかるっていうやつなんですね。そうです

Guest 02:40
ね、ま、ただ95パーとかを切ってると、もうそもそもかなりかなり苦しいら

Guest 02:45
しいので、はいはいはいはいはい、

Guest 02:46
無症状ってことはないとは思うんですが、一応そういうのが無症状の人でも分かる

Guest 02:50
ていうのを、はいはいはいはい

Guest 02:52
でしてましたね。

Guest 02:53
それが、そのセンサーが手元にあったって感じなんですね。

Guest 02:55
そうですね、血中酸素ロード測れるセンサー元々は心拍数を測ることをやりたくて、心拍数が図れる。センスは色々買ってたんですけど、はいはい、それの中の1つにその血中酸素濃度が図れるものがありまして、

Guest 03:07
最近のフィットビットとか、そういうウェアラウェアラブル系で、心拍数を測れる機械でもいくつか、こういうセンサーがついてるらしくて、

Guest 03:15
内蔵されてるセンサーによっては、その心拍数が図れるウェアラブルデバイスでも、一緒に血中酸素が図れるデバイスも売り始めてるようですね。あ、

Guest 03:24
なるほど、なるほど、なるほど、今回それを物理的に自作したっていう感じなんですか。

Guest 03:29
そうですね、センサーにコードついであるというのと、接続して、それをウェブにっていう感じですね。

Guest 03:35
なるほど、なるほどね、結構面白そうなテーマですね、ちょっとそこを詳しく聞いていければと思います。

4. パルスオキシメーター開発の技術 03:40

Guest 03:41
これ、ちょっと技術的な部分から、先に聞いても言ってもいいですか。

Guest 03:45
今回、多分これいわゆるiotっていう分野に入るかなと思うんですけど、なんか、その部分ってコード書くのとかって、そのあ、プログラミングをある程度必要なのかなと思うんですけど、なんか、こういった技術でやったとかってあるんですかね。

Guest 03:57
そうですね、あの、アルドのをどうしても通さないといけなかったので、アルドののデータをどうにかパソコンに送りたいっていうところで、やり方としては、無線で送るかま優先で送るかがあるんですが、

Guest 04:10
無線だと、bluetoothとかが結構最近主流なんですが、自分はあのusbでシリアル通信をすることにしてみました。

Guest 04:18
あ、ありがたいことに、ノードのパッケージのノードcaポートっていうのがあって、まさしくusbでシリア通信をするための

Guest 04:26
に、特化したデバいえーに、特化したモジュールがあって、それを使うともあるというのが出力している情報をすぐノードで取得することができるので、

Guest 04:35
あ、そっからもうウェブに持っていくのは、もうフロントエンジニアとしては、簡単な作業の。

Guest 04:39
はいはいは、

Guest 04:40
はい、ハードルはそんなになかったかなっていう感じでした。

Guest 04:43
ていうことは、そんなにある時の側のコードはほぼ書かなくていいって感じですかね。

Guest 04:46
あ、そうですね、あとのはほんとにただ出力をしてさえすれば大丈夫って感じです。

Guest 04:51
ポテに出力するだけで、ま、あとは全部ロードレースの世界で実装できたって感じなんです。そうです、そうです

Guest 04:58
ってことは、まずはまセンサーからアルドのにデータ流して、アルドーのからノートジェま、usbkでノートジェースで受け取って

Guest 05:06
ま、それを可視化していったって感じですかね。そうですね、

Guest 05:09
はい、うん、うんうん、

Guest 05:10
可視化とかはどういう感じでやっていったんですか。

Guest 05:13
ここで、ちょっと

Guest 05:14
ややこしいことがあって、あの、ウェブの更新頻度って、そんなに病間何個とかないと思うんです。セーターデータは、病感、すごい量のデータを送ってくるので、これをウェブソケットでさくように

Guest 05:25
設計しています。で、ウェブトケットだと、あの1秒間にそれこそ

Guest 05:31
30とか60とかあったとしても、そのデータをフロントが受けることができるので、あとは、ブラウザの処理スペックとの相談なんですが、

Guest 05:40
事実。理論的にはデータを流すことができるってことが大事なので、ウェブソケットを選定しましたね。

Guest 05:48
うんうん、うん、うん、なんか実際これhddリクエストな初めから結構そこって、フロントエンド的に厳しそうだなって思って、ウェブソケットは、

Guest 05:58
しょっぱなから宣伝していったって感じなんですかね。

Guest 06:00
iotをま以前からやってたことがあって、はい、ictpリクエストでやってたこともあるんですけど。はい、その場合、すごい量のサーバーレス、ポンスをかみたいなことになる。

Guest 06:10
あるので、はいはいはい、

Guest 06:11
まあまあパッと聞いただけでも重そうだなってのもあるんですが、ある程度データをまとめて、例えば2秒か3秒分のデータを送るとか、そういう風に効率化することはできるんですけど、

Guest 06:21
やっぱリアルタイム性をできるだけ出したいので。ああ、はいはいはいで。そういう時に2秒分のデータを一気に渡すっていうよりかは、やっぱちっちゃくコンパに渡したいっていうところで、僕はウェブャケットが今のところ

Guest 06:34
1番やりやすいかなと思ってよく選んでます。はいはいはい、

Guest 06:37
今は実際にあれですか、どれぐらいの頻度でデータ送ったりとかしてるんですか。

Guest 06:42
今はセンサーデータが取れ次第ってところもあるんですけれども、基本的には秒間でも20から30ぐらい

Guest 06:53
で、それこそあのあまりフロントエンジニアとか、結構その

Guest 06:57
レイヤーの高い層を作ってると、あんまり意識しないんですけど、データを落とすってことが平気で。あ、

Guest 07:03
はいはいはい、お

Guest 07:05
途中で

Guest 07:06
パケットが抜けるってあるんですけど、今、センサーからデータをとってあるというのが、それをシリア通信で送ろうとする過程で、データが微妙に壊れるってことがあって、

Guest 07:15
で、壊れた時に修復するってことももちろんできるんですけど、あまりそこまで丁寧に書いては、行動を書いてはいなくて、

Guest 07:22
ジェイソンでパースしたいので、もうジェイソンパーをそのまま読んじゃうんですね。ただ、ジェイソンの形式が壊れてるので、

Guest 07:30
パスできないみたいなことになってたので、いくつかデータを落としちゃって。はい

Guest 07:34
うん、うん、うん、うん、うん、なるほど、なるほど、制度制度みたいなのが、やっぱり多少は関わってくる領域なんで、そこは今回は

Guest 07:41
はい、まあ、あのノイズに関しては許容するみたいな形でやっていったって感じか。そうですね。はい、

Guest 07:49
ちょっとそのフロントエンドで可視化した部分まここって、結構フロントエンドエンジニアだから、まあ、せっかくだし、いい感じに可視化したいな、みたいなところとか出てくると思うんですけど、フロントエンドで書いてある、これはキャンバスとか

5. IoT のフロントエンド 07:50

Guest 08:00
で書いたんですかね。

Guest 08:02
そうですね、あの、最初キャンバス想定してたんですが、キャンパスでもちろん綺麗に書けるんですが、今回はドムだけでやっていて、

Guest 08:11
あのローテクですごいも言うのも恥ずかしいんですが、あのドムドムを要はあの、今回緑のグラフでこう出しているんですが、はい、その緑のグラフの高さ分のドムを用意して

Guest 08:23
はいで、それをこうどんどんアペンドチャイルドにプッシュしていくんですね。うんで、

Guest 08:28
センサーデータがある程度溜まったら、後ろからポップしていくようにしていて、ただ、ほんとに配列がぐるぐる回ってるだけで、

Guest 08:35
はいはいはい、では、い

Guest 08:36
までも、見た目的にはどんどんドムが押し出されて、古いドムはどんどん左にこう流れていくので、

Guest 08:42
あの、まさにカバで書いたように見えてはいるんですが、ただ、のどの移動をしているだけっていう。

Guest 08:48
これ、すごい。なんか、すごいキャンバスっぽく見えたんで、はいはいはいはい、そうなんかそういうこういう専用のブラグラフ描画のライブとかがあるのかなと思ったら、

Guest 08:58
も、もちろんそういうのもありますし、結構iotで複雑な情報を送ったりとか、円グラフ出したりとかする時は、もちろん、キャンバス使った方が後々楽なので、キャンパスで書くことがよくありますね。

Guest 09:10
なるほど、なるほど、でも、今回は普通にドム使ってやってみたって感じのお

Guest 09:14
はい、グラフ出したかっただけなので、っていう感じでやってました。

Guest 09:18
いや、でも、この発想は結構面白いですね、なんかこれあれですか。これ0から100パーだから、

Guest 09:25
それに合わせた量で病化してるその高さにして病化してるってこと。

Guest 09:30
そうですね、そこ結構ややこしいとこなんですけれども、セサデータがもう数万の値から、

Guest 09:36
あの100程度の値のかなり幅が広いデータを送ってきて、はいはいでかと言って、

Guest 09:42
あの、自分で上限加減を設定するのができなくて、なんでかって言うと、ユーザーにユーザーというか、指を置く人によってその

Guest 09:50
値が全然違うので。ああ、はい、それは人に特化したまレンジにしないと綺麗に見えないっていうのが

Guest 09:57
ありました。なので、そこはいくつかデータをキャッシュしておいて、そこの最大値と最小値を常に

Guest 10:04
毎回計算するようにして、レンジを常に更新しているっていうようなあ。

Guest 10:09
だから、その一定以上溜まったらポップするって感じになってるんですかね。

Guest 10:13
うんな、

Guest 10:14
あと、まずはある程度そのその人のデータをとって、その中から上下させていくって感じなんすね。

Guest 10:23
結構面白いですよね、なんか、iot特有の考える部分が、まあ、なんかウェブだとウェブとか普通にウェブアプリケーション作ってると、ま、

Guest 10:31
それこそデータが欠落してるとか、そんなめっちゃおっきなズレがあるってそんなにないかなと思うんで、

Guest 10:36
確かにないですよ。あってはいけないはずですから、

6. 所管 10:40

Guest 10:40
結構面白い、

Guest 10:43
ちょっと実装じゃない。じゃあ、やってみて、どうかっていうところとか、ちょっと色々聞いていきたいんですけど、はい、今結構iot前もやったことあってってことは、結構お原さんは元々電子工作とかされる方だったんですか。

Guest 10:56
そうですね、まあ、学部の時に電子系ではあったんですけど、まあ、でもメインは情報を専攻してはいて、ただ、そのたまにイベントごとかでiotをする機会が

Guest 11:10
なんか、以前ミニオンクのaiを作るっていう大会に出てたことがあって、

Guest 11:15
ミニオンクをもうまい蔵して、それこそアルドのとかを上に乗っけたり、内蔵したりとかをして、あの、普通のミニオンクだったら、絶対コースアウトするようなコースを減速したり、

Guest 11:24
スピードアップしたり、いろんなことをしながら乾燥するみたいな。大会に出てたことがあって。はい、

Guest 11:30
その時、その時の動画とかもあるんですけど、そういうので、少しiot系の知識がついたのと、意外とその速度

Guest 11:39
で自分の目で見てると速度ってわかんないので、ミニクの速度可視化したいなと思った時に、bluetoothでwebにデータを送っていって、webで可視化して、

Guest 11:49
あ、今ここのスピードだったから脱線したのかとか、そういうのわかるようにしてたっていうのがあって、その技術をそのまま使ったっていうところがでかい。

Guest 11:58
なるほど、じゃあ、元々はミニオンクレースに勝つために、

Guest 12:02
ミオのための技術って感じです。

Guest 12:05
いや、なかなか面白いバックグランドですね。

Guest 12:10
実際ここって、じゃあ、例えばまあなんか誰かこういう話とか聞いて、ちょっとなんかやってみたいみたいな場合とかって、結構ハードル的な部分だと、俺はさんは慣れてそうですけど、新しい人とか

Guest 12:22
ま、誰か初めてiotやってみたいみたいな時って、結構ハードルって高そうですかね。そうでもないですかね、

Guest 12:28
と、そうでもないかもですね、というのも、そのセンサーを

Guest 12:34
買うこと自体はま買えるので、アルソチメーターは買えないことも多いんですけど、

Guest 12:39
センサーを買うと、大体、そのセンサーのドキュメントが、そのセンサーを作った会社が公開していてはいえ、まず、ゲットスターデットみたいな感じで、

Guest 12:48
動かすためだけの行動を配布してることが多いです。なので、サンプルコードをそのままアルトゥのに入れたら、もう実行できるみたいな状態になってることが結構多いので、

Guest 12:57
初心者でも作ってみることは絶やすいかなと感じてます。

Guest 13:01
はいはいはい、まずはセンサーがって動かしてみるってのが全然できるって話す。

Guest 13:06
そうですね。はい、

Guest 13:07
ちょっともう1個これ気になる点なんですけど、ま、結構物理的なコンテンツを今回ま自分で作っていくって感じになると思うんですけど、元々センスあったっていうので、もしかして、もしかしたら忘れてるかもしんないんですけど、費用的なとこってどれぐらいかかるのかなってとこが気になってて

Guest 13:22
と、センサーとか、こういうアイオティ系のハードウェアって、結構安いことが多いんですね。数百円だったりなんですけれども、

Guest 13:31
このセンスはそこそこ高くて3500円ぐらい

Guest 13:35
すごいですよね。

Guest 13:37
でも、センサーにしてはかなり高いくて、正直、パルスオークションメーターって、それこそ3000円台だったり、4000円ぐらいなので、

Guest 13:44
ほとんどセンサー代なのかなって、ちょっと想像してみたりとか、または、もっとそのレガシーなセンサーを使って安く抑えてるのか。ちょっとわからないんですが、

Guest 13:53
一般的にセンサーとして売られてるのは3500円ぐらいで。もし、あの、初めてやる人であるというのが手元にないっていうと、アルドの代も入れて、あ、もも

Guest 14:02
なんだかんだで7000円ぐらいかかってしまうかもしれない

Guest 14:05
ですね。ただ、ある

Guest 14:06
そういうのって結構1回買ってしまうと、いろんなせツールと使え、センサーとかと使えるって感じする。

Guest 14:13
そうですね、ある程度1個あれば、ほんとになんでもできるので、うん、うん、うん、1個あれば全然楽しめるし、今後も活用できるんで。

Guest 14:20
はい、それですね、

Guest 14:22
私もやってみようかな。なんか、たださん、他に質問とかありますか。聞いてみたいこと

Guest 14:27
とは、ハード面で僕そうですね。昔、あの部屋の気温を

Guest 14:34
あの気温とか湿度とかとって、ま。あのマカレルにっていうそのなんていうんですかね。そのかし、

Guest 14:41
外計監視サービスに送って、その外から部屋の温度見るっていうのや、やったことあったんですよ。で、結構

Guest 14:50
あれですね。あの、そのハード面もそうですけど、なんかしハード面ならではの、例えば、そういう

Guest 14:57
この抵抗とか、どこに刺せばいいんだみたいな、そういう知識っていうのがすごいあの

Guest 15:05
情報系出たはずなのに、全然頭からすっぽり抜け落ちてて、すごい試行錯誤しながらだったんですけれども、そういう知識とかは

Guest 15:16
どうですかね。自然と身につくんですかね、そういうiotならでは。

Guest 15:20
そうですね、そこそこハードルが高いようには、僕もまだ感じてはいますし、僕もがっつりその

Guest 15:28
電子工作とかに入ってるわけではないので、毎回そのセンサーを販売している会社が出してるドキュメントを読んで、

Guest 15:36
サンプルのコードもあれば、サンプルのカイロズとかも置いてあったりすることがあるので、この通り繋いでみるとかでやってみたりで、アルドのスペース

Guest 15:45
センサー名とかで検索すると、あの結構誰かやってくれてたりして。で、写真付きで載せてくれてることも。まあ、あるので、

Guest 15:53
ある程度使ってる限りは、結構そこら辺のハードルは低いのかなって感じがします。組み込みとか、ガチのアゴて始めていくと、

Guest 16:02
そこは自力でやんなくちゃいけないところかなっていうハードルの高さはあります。

Guest 16:06
そうですよね、うん、なんか、あの基盤とかをこう中国にこう頼んで、あのニュースみたいなよく見るけど、まずその基盤どうやって作る

Guest 16:14
そうですよね。

Guest 16:16
はい、

Guest 16:18
ああ、でもそういうアルディの周りっていう、まあ、そういう情報がすごい充実してるっていうのは確かですね。ロ報ですね、うん、

Guest 16:29
いや、そんな感じですかね、

7. クロージング 16:30

Guest 16:32
というわけでですね、本日はえ、折原さんをゲストにですね。パルス、指名タえーを作ってみたっていうところとま、iotかけるフロントエンドっていうところについて、話してもらいました。

Guest 16:44
LINEのフロントエンド開発し、UITではですね。このようなえ、フロントエンドに関する自己検算や

Guest 16:53
議論などを日々行っております。え、直近で言うとですね。今たまに不定期でやっている。ビューススタディーなんかはですね。社内勉強会ではから始まった企画だったりしますし、

Guest 17:03
今回のゴールデンウィーク企画もえ、社内的なえ取り組みから始まったことなので、ま、こういったえ、社内での取り組みとかは、え、どんどん外に発信していこうかなと思っております。

Guest 17:13
まぜひぜひ、また、他のエピソードも聞いていただければと思います。そしてですね

Guest 17:19
えーゴールデンウィークえ、ラインのフロントエンドインジアのゴールデンウィーク。も。ここで折り返しまでえ、やってきました。

Guest 17:25
あとですね、2つエピソードが残っておりますので、えぜひぜひえ。もしご興味があれば、え、残りのエピソードも聞いていただければと思います。

Guest 17:35
というわけで、え、本日のeyteサイドは、原さんによる。パルス、オキシメーターの話でした。え、ありがとうございました、

Guest 17:44
ありがとうございましたす