kouya17.com

全ての分野において、初心者を脱することができない者による技術ブログ

ReactでYouTubeのプレーヤーを制御する

react-youtubeというReactコンポーネントを利用したサンプルサイトを作成したので、紹介する。 作成したサンプルサイト ページを開くと、特定のYouTube動画が読みこまれる。YouTubeプレーヤーを操作する毎に操作情報(+操作時の再生位置)が記録される。記録された操作は、YouTubeプレーヤー下にテキストで表示される。操作情報は、「download」ボタンを押すことでファイルとして出力できる。 上記サンプルサイトでは、現状以下の操作のみ記録する。 再生準備完了(ready) 再生開始(play) 一時停止(pause) 再生終了(end) 視聴者毎の動画視聴状況を確認したいケースを考える 今回のサンプルサイトは、「視聴者ごとに、動画の視聴状況詳細を確認したいケース」を想定して作成した。視聴者は操作情報をファイルとして出力し、管理者へ提出する。管理者は提出されたファイルから、視聴状況を確認するという想定である。サンプルでは操作情報をファイルで出力しているが、これを「ユーザー情報を付与してサーバー上に保存」とかすれば、ファイルをやり取りするという手続きは不要になる。 今回想定したケースのように、YouTubeから情報を取得したい場合の手段としては、YouTube Data APIを活用するという方法がある。ただ、YouTube Data APIには、「特定のユーザーの、各視聴動画に対する操作情報」という細かい情報までは用意されていない。取得できても「特定のユーザーの視聴履歴」までである。 少し調べたところ、YouTubeのIFrame Player APIを使うと、YouTubeプレーヤーに対する操作を取得出来るようだったので、今回はそちらを利用した。 YouTubeのIFrame Player APIを利用する IFrame Player APIを利用することで、再生中の動画に関する情報を取得できる。情報の取得はJavaScript関数を使って行う。また、特定のプレーヤーイベントに対して、イベントリスナーを設定できる。今回のサンプルサイトを例にすると、再生準備完了(onReady)、再生開始(onPlay)、一時停止(onPause)、再生終了(onEnd)に対してイベントリスナーを設定している。 今回のサンプルサイトはNext.jsを使って作成したため、ReactコンポーネントとしてIFrame Player APIを利用できるreact-youtubeを利用した。 サンプルサイトの作成とデプロイ サンプルサイトの実装内容としては、react-youtubeのサンプルに、プレーヤーイベント発生時のイベントリスナーを設定し、操作情報を画面に出力及びファイルとしてダウンロード出来るようにしたくらいである。 ソースコードは以下に公開している。 サンプルサイトはGitHub Pagesを使って稼働させている。GitHub Pagesへのデプロイは、GitHub Actionsを利用して、mainブランチ更新時に自動で行われるようにしている。ここら辺は、以下のサイトを参考にさせていただいた。

January 15, 2022 · 1 min

機械学習を使ってApexのプレイ動画から武器使用率を算出する

最終的な目標はプレイスタイルの解析 近年、動画投稿・配信サービスの普及により、ゲーム実況というものがエンタメの1カテゴリとして確立してきていると思う。感染症流行の影響が大きいと思うが、2021年1月~3月の主要ゲーム配信サイト(Twitch、YouTube Gaming、Facebook Gaming)の合計視聴時間が前年同期比で80%増加したというデータもある。1ゲームのジャンルとしてはアクション・RPG・シミュレーションなどあらゆるものが実況の対象になるが、今回はFPSのゲーム実況にスポットを当てる。 FPSの分野では、オンライン対戦システムおよび、いわゆるランクシステムが整備されているものが多くなっている。ランクシステムは、プレイヤーの習熟度のようなものを可視化する。こうしたランクに関する情報は、視聴者にとって、プレイヤーのことをパッと理解するために非常に役立っていると思う。 現状、ランク情報やダメージ数、キルデス比等はゲームシステムから参照できるようになっていることが多いと思う。ただ、個人的にはより細かい、プレイヤーのプレイスタイルのようなものを可視化できる情報があると、プレイヤーについて理解を深めるためのよい材料になると思った。 最終的にはゲームシステムから直接確認出来るデータだけでなく、ゲームプレイ動画の解析結果から、プレイヤーのプレイスタイルをうまく可視化したい。今回は、Apexを題材にし、プレイヤーのプレイスタイルを示す1つの指標として、武器使用率をゲームプレイ動画から解析できないか試す。まあ、こういった情報はわざわざ動画を解析しなくても、ゲームシステム側で実装してもらえれば、より正確で容易にデータが取れるとは思う。 全体の作業の流れ 今回の全体の作業の流れは以下のようになっている。 各作業の内容について説明していく。ただし、ゲームプレイ動画のキャプチャ作業については特に説明することがないので、何も説明しない。 武器名表示領域の切り取り データセットを整備するために、ゲーム画面のうち、武器名を表示している領域のみを切り取った画像を作成する必要がある。今回は、動画に対して一定時間ごとのフレームを画像化→特定領域を切り取り→特定の場所に画像ファイルとして保存、という流れでデータセット用の画像を作成した。 一連の画像切り取り作業実施のために、ツールを作成した。GUI部分はPySimpleGUIを利用している。 主に以下を設定できる。 切り取り対象とする動画の保存場所 武器1欄(*1)の画像を保存する場所 武器2欄(*1)の画像を保存する場所 画像を切り抜く領域(*2)(全体サイズに対する割合で指定) (*2)で設定した領域からどれだけずらした画像を何個保存するか 画像切り取り対象とするフレームの時間間隔 (*1)Apexでは、武器を同時に2つ持つことができる。今回は武器1欄と武器2欄を別々のデータセットとして扱う。理由はそちらの方がより精度が上がりそうと思ったためである。 このツールを使えば、ボタンを1回ポチーすることで、後は待っていれば所定の場所に武器名表示領域の画像が保存される。 画像に対して正解ラベルを付ける データセットの正解ラベル付けについて、どのような形式で保存するのが一般的かを私は知らないのだが、今回は各正解ラベル(武器名)ごとに保存フォルダを分けることにした。 以下のように、全武器+“武器なし”(_None)について画像をフォルダ分けした。 この作業にも専用ツールを作成した。 データセットが置かれている場所を指定して、startボタンを押すと、所定の個数づつ未分類の画像が表示される。表示された画像について、正解となる武器名のボタンをポチポチしていき、画像をフォルダ分けする。 ただ、今回データセットの元にしたキャプチャ動画は武器を決まった順番で使うようにしていた。そのため、切り抜かれた画像が最初から決まった武器順で並んでおり、結局このツールはあまり使わなかった。 学習・モデルの保存 データセットの準備が出来たので、ようやく学習をする。学習部分はコードベースで説明する。 まず、データセットの読み込みを行う。かなりコードが汚い。武器名のリストは、以下のコードに含まれていない関数を使ってファイルから読みこんでいる。 Kerasを用いてモデルを生成する関数を作成する。 Optunaを使ってハイパーパラメータを調整しつつ、成績の良いモデルを保存する。(といってもマシンが貧弱で学習に時間がかかるので、5回しか試行を回していない。) 上記のコードを実行したところ、とりあえず今回はテストデータの正解率が99.89%のモデルが出来た。テストデータの推論結果をMatplotlibを使って画像とともに確認してみる。 いい感じに推論できてそうだ。誤答をしたデータについても確認してみる。 今回は2つのデータの推論が間違っていたようだ。上は正答がFlatlineなのに対し、Devotionと推論してしまっており、下は正答がNoneなのに対し、R-301と推論してしまっている。 作成したモデルによるプレイ動画の解析 モデルが出来たので、動画を解析する。解析用のソフトを作成した。 学習用に使ったデータとは別のキャプチャ動画を使って解析したところ、以下のような結果になった。 解析結果を見たところ、大体は合っていると思うが、誤検出されている武器名が末尾に並んでいる。解析結果は正確なものではないため、データの扱いは少し考えないといけない。 最初は自作モデルを作らなくても行けると思っていた 今回、武器使用率算出のために"機械学習のモデルを作成・利用する"という手段を選択した。 この手段を取る前は、TesseractとPyOCRを利用して文字列を認識する方法をとっていた。ただ、認識精度が厳しかったので、利用を断念した。機械学習の勉強にもなると思い、代わりに自作モデルの作成という方法をとった。 今回の識別対象は決まり切った文字列なので、機械学習を使わなくても、より正確な認識方法があるかもしれない。というか、私はApexにあまり詳しくないので、そもそもゲームシステム内で武器使用率を確認できる方法があるかもしれない。 参考にした書籍・動画 機械学習については主にネット上の情報と、以下の書籍の内容を流し読みした程度の理解度である。 ゼロから作るDeep Learning ―Pythonで学ぶディープラーニングの理論と実装 オライリージャパン (2016/9/24) Amazon 楽天市場 また、上記書籍を数年前に読んだときは誤差逆伝播法がいまいち理解できなかった。しかし、Twitterのタイムラインで流れてきた以下の動画が非常に参考になり、とりあえず分かった気にはなれた。出来るだけ条件を簡易にして、高校数学の範囲で説明されている。 まとめ 機械学習を利用してApexのプレイ動画から武器使用率を算出するためのツール群を作成した。解析結果には誤差が含まれるため、利用するためにはまだ工夫をする必要があると思う。 色々試行錯誤をする中で、モデルの性能に最も寄与したのはデータセットの作り方だった。データセットに偏りがあると、それを学習したモデルも偏りのある結果を出力する。データセットの質の重要性を、身をもって実感した。この部分については本記事で書けなかったので、またどこかで記事を書くかもしれない。 Q1 2021 Live Game Streaming Trends - Stream Hatchet ↩︎...

November 1, 2021 · 1 min

顔認識+サーボモーターで顔追従モニターの作成

先日、NT金沢2021というイベントに、リモートで出展参加した。「リモートで出展参加」というのは、具体的に言うと、展示物としてはオンラインで遊べるものをポスターで出展して、私はGoogleMeet(ビデオ会議)をつないでリモートで一部作品の説明をしていた。(関係機材は現地出展した友人に運んでもらった。) GoogleMeetをつなぐには、とりあえずPCが現地(NT金沢の会場)にあれば事足りる。ただせっかくなので、モニターが、話している相手の顔を追跡するようにした。 動作の様子 人の顔に追従するモニタを試作中…。 ■使用素材 画像:いらすとや(https://t.co/H01vPNj6QI) pic.twitter.com/H8fLDuSRjz — 青木晃也 (@aoki_kouya) May 30, 2021 検証時の動画だが、概ね完成形。当日はこのモニターに、GoogleMeetの画面を表示して運用していた。 ハードウェア 使用部品一覧 部品名 備考 JetsonNano開発者キット 顔認識・ビデオ会議・サーボ制御用 Webカメラ×2 1個は顔認識用、1個はビデオ会議用 モニター スピーカーも内蔵 サーボモーター S03T/2BBMG/F×2 強そうなものをチョイス PCA9685モジュール サーボ制御用 サーボやモニタ等を固定するための部品は3Dプリンターで作成した。 WebカメラはとりあえずAmazonで安いものを適当に買った。1種類目はUSB Wi-Fi子機との相性が良くなかったようで、Wi-Fiの接続が不安定になった。2種類目は特に問題なく動いていそうだったので、採用した。ただ、この記事を書いている時点で、採用したWebカメラのAmazonの商品ページはリンク切れになっていた。 ソフトウェア ソフトウェアに関する部分としては、JetsonNano起動後にコンソールで顔追従用プログラムを実行した後、ブラウザ(Chromium)でGoogleMeetを動かしていた。GoogleMeetの方は特に書くことがないため、顔追従用プログラムのソースコード及びセットアップ周りを書いていく。 顔追従用プログラムのソース ソースは以下に置いてある。 顔追従用プログラムのセットアップ周り 上記のソースを動かすには、関係ライブラリをインストールする必要がある。 PCA9685用ライブラリのインストール サーボ制御モジュールPCA9685をPythonから制御するためのPythonパッケージをインストールする。まず以下のコマンドでpip3をインストールする。 sudo apt-get install python3-pip 参考元: NVIDIA Jetson Nano 開発者キットに TensorFlow をインストールする - Qiita...

July 23, 2021 · 1 min

Dartでブロックチェーン(のようなもの)を実装してみた

以下の記事を参考にさせていただき、Dartを使ってブロックチェーン(のようなもの)を実装してみた。 動作の様子 お試しノードをHeroku上で動かしている。https://dart-blockchain-test-app.herokuapp.com/publicにアクセスすることで、 お試しノードの情報を色々見る事ができる。 ブロックチェーンは特にファイル等で永続的に残しているわけではない。Herokuはしばらくアクセスがないとアプリが停止するため、そのタイミングで情報がリセットされる。 ソースコードとローカルでのノードの立て方 ソースコードは以下に置いてある。設計部分は参考元サイトとほぼほぼ同じになっている。 ローカルPCでノードを立てる場合は、Dartの実行環境を整えた状態で、ソースコードをダウンロードし、以下のコマンドを実行すれば良い。 dart pub get dart pub global activate webdev webdev build --output web:public dart bin/back.dart --port 6565 上記コマンドを実行後、ブラウザでhttp://localhost:6565/publicにアクセスすると、ノードの情報を確認できる。 bin/back.dartを実行する際、--peerオプションで、P2P通信を行うノードを指定できる。Heroku上のお試しノードを立ち上げた状態で、以下のようにbin/back.dartを実行すれば、Heroku上のノードとの取引を行うこともできる。 dart bin/back.dart --port 6565 --peer ws://dart-blockchain-test-app.herokuapp.com/ws ローカルPC上のノードとHeroku上のノードはWebSocketでP2P通信を実現しており、簡単な構成図を書くと以下のようになる。 HerokuでDartアプリを動かす 今回Heroku上でDartアプリを実行できるようにした。Heroku上の設定周りは以下のリポジトリを利用させていただいた。 なお、上記リポジトリのREADME中にはheroku config:add BUILDPACK_URL=https://github.com/igrigorik/heroku-buildpack-dart.gitというコマンドでビルドパックを適用するよう書いてある。しかし、以下のプルリクエストにある通り、今はheroku buildpacks:set https://github.com/igrigorik/heroku-buildpack-dart.gitというコマンドでビルドパックを登録するのが正しいらしい。 とりあえず形にはなったが、まだまだ不明点がある 今回、ブロックチェーン(みたいなもの)を実装することで、ブロックチェーンへの理解が深まった。ただ、実装していく過程で、Bitcoinに対する疑問点が新たに出てきた。 マイナーへの報酬は普通のトランザクションと比べて特殊な形式になると思うが、どのような形式になっているか。 大体のネット上の記事では"悪意のあるブロックチェーンを生成するには、善意のブロックチェーンよりも長いチェーンを生成する必要があるため困難"という説明がされている。difficultyを改竄できれば、計算能力が乏しくても、いくらでも長い悪意のあるブロックチェーンを生成できそうだが、そこら辺はどのように回避しているか。 P2P通信をどのように実現しているか。 アフィリエイト 絵で見てわかるブロックチェーンの仕組み 翔泳社 (2020/12/21) Amazon Kindle 楽天ブックス 楽天Kobo

May 4, 2021 · 1 min

Bitcoinのブロックチェーンの中身を見てみる

ただのにわかではあるが、ブロックチェーンは信頼性が重要な技術だと思っている。傍目から見たら、これだけ広く不特定多数に使われていても、これまで特に技術自体について大きく信頼性が揺らぐような事象は起きていないように見える。実用に十分耐えうる技術のようだ。なんとなく興味が出てきたのでゴールデンウィークの期間を使って色々勉強してみる。 Bitcoin Coreのインストール まずは暗号通貨Bitcoinを題材に、ブロックチェーンの"ブロック"の中身を見てみる。現在までのブロックを全て取得するために、以下を参考にBitcoin Coreをインストールする。 初回起動時はデータ保存場所を聞かれるが、デフォルトの場所を使うようにする。 起動後はブロックチェーンデータの同期が始まる。 完全な同期までは数日かかるらしい。自分の場合は3日ほど放置していたら完了していた。 ブロックの中身を読んでみる デフォルトだとMacOSは/Users/<username>/Library/Application Support/Bitcoin/blocks/以下にブロックデータが置かれるらしい。データの総サイズを確認してみる。 $ du -hs /Users/<username>/Library/Application\ Support/Bitcoin/blocks/ 361G /Users/<username>/Library/Application Support/Bitcoin/blocks/ サイズがだいぶでかい。これはこれからもトランザクションが発生するごとに増えていくのだろう。 中身はバイナリになっている。フォーマットは以下のようになっているらしい。 フィールド サイズ magic bytes 4 bytes size 4 bytes block header 80 bytes tx count 可変 transaction date 可変 引用元 上記引用元サイトの情報を参考に、バイナリを読んでみる。(といっても、バイナリを読まなくても、上記引用元サイトに、必要な情報は全て書かれているので、ほぼ上記サイトの内容をかいつまんで日本語訳するような内容になる。) $ hexdump -C -n 293 blk00000.dat 00000000 f9 be b4 d9 1d 01 00 00 01 00 00 00 00 00 00 00 |....

April 29, 2021 · 3 min

所定のYouTubeチャンネルの配信予定をLEDで通知する(M5StickC)

できたもの 動画の出来が色々とアレだが、動作時の様子を以下の動画の後半で確認できる。 動画だと映りが悪いが、写真だとLEDをつけた時の様子は以下のような感じになる。 作成目的 M5系列からYouTube Data APIを使った作例を作ってみたくて、作成した。 使用部品 M5StickC 1個 PCA9685 16チャンネル PWMモジュール 3個 フルカラーLED 12個 筐体設計 STLデータは以下に公開してある。 M5StickCとPCA9685モジュールが3個入るような箱を設計した。最初はだいぶコンパクトに設計していたのだが、配線が箱に収まらないことが分かり、途中で拡張した。もともとはM5StickCも箱の中に収める想定だったのだが、入らなかったので、横につけることにした。 フルカラーLEDは配置する場所に自由度を持たせられるように、個別に格納する箱を作成して、それぞれ4本の配線でM5StickC側の箱と接続するようにした。 配線 今回の配線の概要図を以下に示す。 PCA9685モジュールとフルカラーLEDの接続部分はテキトーになっているが、LEDについてはRGB順で1個目のLEDは1個目のPCA9685モジュールの0,1,2chに接続、2個目のLEDは1個目のPCA9685モジュールの3,4,5chに接続…という形で接続している。 ここが一番しんどかった。PCA9685モジュールを3個使っているのでやろうと思えば最大16個のフルカラーLEDを接続できるが、12個配線したところで力尽きた。 ソフト実装 ソフト全体は以下のリポジトリに置いてある。 src/main.cppについて以下の部分は各ユーザー毎に書き換える必要がある。 APIキー アクセスポイントのSSID アクセスポイントのパスワード あと、src/main.cpp中のchannelsをいじれば対象とするYouTubeチャンネルとLEDの色を変更できる。 M5StickCからYouTube Data APIを利用する部分は、以下のAPIラッパーを利用させていただいた。 ただし、このままではチャンネル情報しか取得できないため、以下の関数等を追加している。 std::vector<String> YoutubeApi::getUpcomingBroadcasts(char *channelId) 指定されたChannelIDのチャンネルの配信予定(VideoID)を取得する。 BroadcastDetails YoutubeApi::getBroadcastDetails(char *videoId) 指定されたVideoIDの動画の配信詳細情報を取得する。 配信開始予定時刻は詳細情報からしか取れない。 課題 きちんと検証はしていないが、現状のソースだと、YouTube Data APIのクォータを異常に消費する。本当は1分ごとに情報取得とかをしたかったが、無料枠ではクォータが足りなくなる。 各LEDに紐づくチャンネルIDと、LEDの色がハードコーディングされているので、外部から設定できるようにしたい。 アフィリエイト M5Stack M5StickC ESP32ミニIoT開発ボードm5stack iotキット フィンガーコンピューターカラー0....

April 3, 2021 · 1 min

html要素の背景色が変化するアニメーションをCSSで(無理やり)実装する

CSSによるアニメーションについて CSSではanimationプロパティを利用することによって、JavaScriptを使うことなく、HTML要素にアニメーションを付与することができる。 CSSアニメーションの概要は以下の記事を参考にさせていただいた。 今回作りたいもの 今回、以下のような流れでアニメーションする要素を作りたい。 要素の左端から背景色がだんだん元々の背景色Aから色B変わっていき、背景全体が色Bになる。この時、色Aと色Bの境界はグラデーションにする。 背景全体が色Bのまましばらく維持する。 要素の左端から背景色がだんだん色Bから色Aに変わっていき、背景全体が色Aにもどる。この時、色Bと色Aの境界はグラデーションにする。 少し調べてみると、グラデーションは<gradient>データ型を利用すれば問題なさそうだった。問題は、グラデーションの境界位置をアニメーションする部分である。以下のように、ただ単に0%と100%のkeyframeを指定しただけでは、思ったようなアニメーションにならなかった。 See the Pen wrong case by kouya17 (@kouya17) on CodePen. 私の知識ではスマートなやり方が分からなかったので、keyframeを0%から100%まですべて指定する形で(無理やり)実装することにした。 keyframes生成用のpythonスクリプトを作成する pythonで、以下のようなkeyframes生成用のプログラムを作成した。 このスクリプトによって生成したテキストをkeyframesとしてCSSに貼り付けると、以下のようなアニメーションになる。 See the Pen linear by kouya17 (@kouya17) on CodePen. とりあえずやりたいことは出来た。しかし、完成したアニメーションを見ると、動きにメリハリがない。アニメーションの進行具合はCSSの`animation`要素の`animation-timing-function`プロパティを設定すればいじることができる。 ただ、今回のパターンだと、うまく設定できないようだ。下の例はanimation-timing-functionプロパティをlinearとease-in-outにそれぞれ設定したものを並べた例である。それぞれのアニメーションの進行具合に違いが生じるはずだが、特に差がない。 See the Pen linear and ease-in-out by kouya17 (@kouya17) on CodePen. 先ほど作成したpythonスクリプトを修正して、イージングの要素も取り入れることにする。 イージングの要素を実装する イージングの要素を実装するには、3次ベジェ曲線について把握しておく必要がある。ベジェ曲線については以下の記事を参考にさせていただいた。 pythonでベジェ曲線生成クラスを作成する pythonでベジェ曲線を生成するためのクラスを以下のように作成した。 上のスクリプトを実行すると p0=[0,0], p1=[0,1], p2=[1,0], p3=[1,1] とした時の3次ベジェ曲線が生成される。グラフにプロットすると以下のような曲線になる。 keyframes生成用のpythonスクリプトを修正する 先ほど作成したkeyframes生成用のスクリプトにベジェ曲線生成用クラスを組み込む。組み込んだ後のスクリプトは以下のようになる。 このスクリプトを使って、 p0=[0,0], p1=[0,0....

February 7, 2021 · 1 min

Chromeからactix-webにHTTPリクエストを実行した際に発生したCORSエラーの解消

環境についてざっくり クライアント側 ブラウザ: Google Chrome バージョン 87.0.4280.141 (Official Build) (64ビット) OS: Windows 10 Home 19041.746 HTTPクライアント: axios v0.21.1 サーバ側 OS: Raspbian GNU/Linux 10 (buster) webフレームワーク: actix-web v3.3.2 現象 Access to XMLHttpRequest ... has been blocked by CORS policyというエラーが出力される Raspberry Pi 4 Model B上でバックエンド(actix-web)とフロントエンド(Vue CLI)を稼働させている。WindowsPCからブラウザを使ってフロントエンドにアクセスし、axiosを使ってバックエンド(actix-web)にGETリクエストを実行した。すると、ブラウザのコンソールに以下のようなエラーが出力された。(ローカルIPが記述されていたところは一部編集している。) Access to XMLHttpRequest at 'http://<localIP>:50001/' from origin 'http://<localIP>:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource....

January 16, 2021 · 2 min

今年(2020年)作ったものを振り返る

今年もあっという間だったがもう終わるらしい。この1年で周りの環境は急激に変わった。ただ、自分の趣味のモノづくり周りについては、やってることは特に去年と変わらず、自分の作りたいものを作るという感じだった。 ついでに過去の振り返りもリンクを貼り付けておく。 今年(2019年)作ったものを振り返る | kouya17.com 今年作ったもの 去年11月~2月 ボール収集ロボの作成 色が付いたボールを所定の場所に集めるロボコンのようなものに参加する機会があったので、作成した。 機体は3Dプリンタで作成し、ラズパイ4とラズパイ用カメラを搭載している。カメラからの画像を処理し、所定の色のボールを認識し、ボールに近づく。ボールにある程度近づいたらボールを確保する。 機体の写真を以下に載せる。 機体上部に謎の模様があるのは、より広い範囲が見えるカメラが取り付けられているJetsonNanoから機体を制御するため。JetsonNanoは機体の向きを確認し、ソケット通信によって機体に指令を送る。 できたもの 関連記事 カメラ画像から対象物の向きを検出する(OpenCV) | kouya17.com 2月~4月 所属サークルのHP作成 Laravelの勉強がてら、HPを作成した。初めてVue.jsを使ってSPAを作成したこともあり、フロントエンドとバックエンドの分離についての理解を深めることができた。 画面デザインやリソースの構造についてあまりしっかり検討せずに進めてしまったのが少し心残りではある。特にリソースの構造については、現状、記事を作品カテゴリとコラムカテゴリにカテゴリ分けしているのだが、特にカテゴリ分けの意味がないという問題がある。ここについては何とか出来たんじゃないかなと思っている。 できたもの 関連記事 Laravel+Vue.jsでLighthouseのスコアを0点から97点にした(バンドルサイズ削減) | kouya17.com Laravel+Vue.jsでSPA(シングルページアプリケーション)を作成した | kouya17.com Vue.jsを使ったSPAにおいてTwitter等でのリンク表示がいい感じになるようにする | kouya17.com 3月~ 射的ゲーム作成 今年の大部分はこの作業をしていた。昨年から引き続きこの作業はしているが、まだしっかりとした形にはなっていない。来年にはどこかで公開できるようにしたい。 できたもの まだ公開できるものはなし。 関連記事 マトリクスLEDドライバを使ってフルカラーLEDを制御してみる | kouya17.com 赤外線を周期的に(矩形波で)出力するモジュールを作る | kouya17.com 5月 感染シミュレーション用プログラムの作成 学生時代に勉強していた数値計算の復習がてら、感染シミュレーション用のプログラムを作成した。 SEIRモデルという単語は結構色んなところで見かけるようになったので、ここで少し勉強して、理解を深めておいて良かったと思っている。 できたもの 関連記事 感染症数理モデルについて触りの部分だけ学ぶ | kouya17.com 都道府県間通勤・通学を考慮したパンデミックシミュレーションもどき | kouya17.com 全国規模の感染シミュレーションと結果の可視化をしてみる | kouya17.com 10月 換気状況モニタの作成 感染症関連で何か作れないか考え、二酸化炭素濃度モニタを作成した。こういった環境モニタ系はもっと利用シーンが増えると思っていた(店舗が換気状況のアピールに使う等)のだが、今のところあまりそういった(利用シーンが増えた・よく見かけるようになった)実感はない。...

December 30, 2020 · 1 min

Windows10でPlatformIOが起動しない問題の解消

環境 OS: Windows10 Home 1903 VSCode: version 1.51.1 PlatformIO IDE: version 2.2.1 PlatformIOとは PlafrotmIOとは、組み込みソフト開発向けの、様々なプラットフォーム・アーキテクチャ・フレームワークに対応した開発用ツール。 公式のドキュメントによると、このツールは以下の課題を解消することを目的としている。 特定のMCU/ボード用の開発ソフトウェアをセットアップするためのプロセスが複雑であること。そして、そのソフトウェアがサポートされているOSを搭載しているPCを入手する必要があること。 それぞれのハードウェアプラットフォームはそれぞれ異なるツールチェーン、IDE等を必要とし、開発環境の学習に時間がかかること。 一般的なセンサやアクチュエータの使用方法を示す適切なライブラリやコードサンプルを探す必要があること。 チームメンバと、それぞれが使用しているOSに依らずにプロジェクトを共有する必要があること。 上記の課題はPlatformIOを用いれば、次の手段によって解決される。 platform.iniに対象のボードを設定する。 ボードのリストに基づいて、PlatformIOは必要なツールチェーンをダウンロード・インストールする。 ユーザはコードを開発し、PlatformIOはコードがコンパイルされ、対象のボードに書き込めるように手配する。 要するに、組み込みソフト開発向けの、開発環境整備用ツールらしい。 様々なIDE向けのプラグインを提供しているが、公式が推奨しているIDEはVSCodeとCLion。 今回はM5Stack用のプログラムを作成しようと思って、開発環境周りを少し調べたら、 PlatformIOが良い という記事を見かけたので試してみた。ただし、この記事ではPlafromIOの使い方については特に触れない。 PlatformIOのHome画面がloading状態のままスタックする VSCodeに、以下のPlatformIOプラグインを入れた。 PlatformIOには以下のようなHome画面がある。 インストール直後は、この画面が以下のように loading… という表示のまま数分経っても変わらなかった。以前他のPCにインストールした時はこのようなことはなかったので、何かよろしくない環境にハマったのだろうと思った。 プラグインをインストールし直しても状況は変わらず 以下の公式コミュニティへの問い合わせを参考に、pip uninstall platformio後に~/.platformio/を削除し、プラグインを再インストールしたが、状況は変わらなかった。 久しぶりに起動したPCで、色々アップデートが走っていたので、諸々のバージョンの整合性等が合ってないのかなと思っていたが、そうではないようだった。 IEを無効化したら解消した 以下の問い合わせを参考に、IEを無効化したら解消した。 IEの無効化は以下のwindowsの機能の有効化または無効化の画面から設定できる。 PlatformIOのHome画面は、IEだと表示できないらしい。なぜ表示ブラウザとしてIEが選択されたのか等はわからないが、とりあえず問題が解消されたので良しとする。 なお、一度表示されるようになってからは、IEの無効化を解除しても、表示されるようになった。 アフィリエイト みんなのM5Stack入門 リックテレコム (2019/11/8) Amazon Kindle 楽天ブックス 楽天Kobo

November 21, 2020 · 1 min