所定の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

今年(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

Laravel+Vue.jsでSPA(シングルページアプリケーション)を作成した

今回作成したサイト 今回作成したサイトは以下のサイト。 ClubPage 私が所属している電子工作サークルのホームページを作った。 このブログからcssを流用しているので、見た目がだいぶ似ている。 構成 Laravel Vue.js バックエンドはLaravel、フロントエンドはVue.jsを使っている。 シングルページアプリケーションとは 今回はシングルページアプリケーション(SPA)という構成を採用した。 シングルページアプリケーションとは シングルページアプリケーション(英: single-page application、SPA)とは、単一のWebページのみから構成することで、デスクトップアプリケーションのようなユーザ体験を提供するWebアプリケーションまたはWebサイトである。必要なコード(HTML、JavaScript、CSS)は最初にまとめて読み込むか[1]、ユーザの操作などに応じて動的にサーバと通信し、必要なものだけ読み込みを行う。 Wikipediaより というものらしい。 これまでRuby on RailsやDjangoとかを使ってwebサイトを作ってみてきたが、どれも各ページ毎に、サーバ側でHTMLの生成を行うマルチページアプリケーションだった。 今回はLaravelでwebAPIを作成し、そのAPIから取得した情報を、Vue.jsを使ってブラウザ上に表示するような構成にした。 なぜSPAにしたのか 理由は1つで、今回参考にしたサイトがSPAを採用していたから。 今回参考にしたサイトは以下のサイト。 このサイトにあるチュートリアル、書かれている情報量がかなり多くて、これだけの情報をタダで得られるのが信じられない。 今回初めてLaravelとVue.jsを触ったが、このサイトのおかげで色々と基礎を学ぶことができた。 今回学んだこと、感じたこと インタフェース部とエンジン部の分離はやはり重要 今回の構成はAPI(Laravel)と表示部(Vue.js)を分離している。 たとえばhttps://home.lchika.club/api/tagsにアクセスすれば、Laravelの機能によって、タグの一覧をJSON形式で取得できる。 こういったAPIから取得した情報をVue.jsで処理して、ブラウザにレンダリングする。 このように分離することで、UIを変えたいときは、基本的にVue.jsの部分のみを修正するだけですむ。 Laravelの処理部は一切手を加える必要がない。 まあ、一般的なwebフレームワークを使っていれば、実装の分離は適切に行われているが、ある一部分のフレームワークをごっそり切り替えることはできない。 今回の構成では、例えばフロントエンドにReactを使いたければ、Laravel部分はそのままで、フロントエンド部分をごっそり切り替えられる(と思うけど、Laravel-mixとかの関係で難しいのかもしれない…)。 このように、インタフェースとエンジン部の分離で得られる効果はやはりでかいなと思った。 ローディング表示がないとwebサイトの質が落ちる これは個人的な印象かもしれないが、ローディング画面の表示はユーザにとって(ある程度)重要だなと思った。 現状ではローディング表示は実装していないため、読み込み直後は一部のコンテンツが表示されていないし、一部のコンテンツについては結構な時間表示されないことがある。 これはサイト利用者側からすると、違和感を覚える要因になり、満足度の低下につながると思った。 YouTubeとかもローディング中はコンテンツ表示部をグレーで表示したりしている。 最初はこれ意味あるのか?と思っていたが、今回自分でJavaScriptを多用したサイトを構築してみて、こういった対応も重要だなと思った。 WYSIWYGエディタの選定は毎回の課題 今回はブログのようなサイトを構築したので、フォームから記事を投稿できる必要があった。 さすがにHTML直打ちで入力はできないし、リッチテキストエディタを採用する必要があった。 毎回どのリッチテキストエディタを使うか苦労するが、今回も例に漏れず苦労した。 とりあえず今のところはCKEditorを使っている。 ただ、まだ課題があって、iframeの挿入が上手くいっていない。 いつも大体、リッチテキストエディタまわりは 画像の挿入 画像の整形 外部コンテンツの挿入 目次の作成 あたりで詰まっている。 今回はまだ目次の作成について考えていないので、目次が必要になった時に多分また詰まる。 SPAのパフォーマンス向上はバンドルサイズの削減こそ正義 今回作成したサイトのパフォーマンス向上については以下の記事に書いた。 最初特に何も考えずにサイトを作っていたら、パフォーマンスが崩壊した。 今もパフォーマンスが良いとは言えないが、バンドルサイズを削減することで、パフォーマンスが向上した。 こういったパフォーマンス向上のための施策は必要不可欠だなと感じた。 まとめ 今回はLaravelとVue.jsを使ってサイトを作った。...

March 15, 2020 · 1 min

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

今年もあっという間だったがもう終わるらしい。 この1年で作った物の振り返りをしたいと思う。 今年作ったもの 1月~2月 ロボサッカー用ロボ作成 2月終わりごろにロボカップジュニア同等のルールのロボコンに出る機会があり、プログラムの一部作成を担当した。 ロボの構成は大体以下の通り。 機体はLEGOのマインドストーム 赤外線センサでボールの位置を検出 ラズパイを使って、カメラからの画像を解析しゴール位置を検出 3人でチームを組んでおり、進捗管理ツールとしてtrello、情報共有ツールとしてslack、ソースコード管理ツールとしてGitHubを使った。 trello、slackあたりはあまり活用できなかったが、GitHubはやはり便利だなと思った。 できたもの マインドストーム側プログラム(GitHub) ラズパイ側プログラム(GitHub) 3月~7月 イライラ棒作成 私が所属している電子工作サークル「メカトロ同行会エルチカ」の作成物として、イライラ棒ゲームを作成した。基本的にプログラム部分を担当した。上の写真はNT名古屋出展時のもの。 この作品では以下のように色んな機器の通信を試してみた。 ArduinoとPCの通信(USBシリアル通信) PCとラズパイの通信(HTTP) PCとESP32の通信(HTTP) ラズパイとwebアプリの通信(HTTP) 色んな機器を連携させる作品を初めて作ってみたが、どれか一つが動かないと全部ダメになる仕組みに一部なってしまった。 できたもの イライラ棒wikiページ スコア表示用ソフト(GitHub) 結果プリント用ラズパイプログラム(GitHub) スタートモジュール用プログラム(GitHub) ゴールモジュール用プログラム(GitHub) イライラ棒結果ランキングページ 4月 github.ioページ公開 github.ioを使ってwebページを公開した。なお、現在更新はしていない。 できたもの github.ioページ 8月 KiCad用ツール作成 KiCadを使う機会が多くなってきたので基板発注用の簡単なツール(Windowsアプリ)を作ってみた。 こちらの記事で少し内容について紹介している。 できたもの KiCadHelper(GitHub) 8月~ 射的ゲーム作成 赤外線を使った射的ゲームを現在も作成中。同じようなものを以前一度作成していて、今回は複数人プレイに対応させる予定。 できたもの 鋭意諸々作成中 今年を振り返ってみて 今年は電子工作に割ける時間が結構多かった。ただこうして振り返ってみると、かけた時間に比べ、出来上がった物の量がいまいち物足りないな…と思う。

December 28, 2019 · 1 min

elecrow発注用zipファイル作成ソフト(KiCad向け)を作った

elecrowへプリント基板を発注する際に必要なファイル変換作業をソフトで自動化した。 作成ソフト 動作OS:Windows 開発環境:Visual Studio 2017 以下のGitHubのページから実行ファイルをダウンロードできる。 https://github.com/kouya17/KiCadHelper/releases (ページ中のAssets内KiCadHelper.zipをクリック) 本ソフトが代替する作業 本ソフトは以下書籍(KiCadではじめる「プリント基板」製作)中のp131-p133の作業を代替する。 KiCadではじめる「プリント基板」製作 外川貴規 工学社 2018年02月 売り上げランキング : 楽天ブックスで購入Amazonで購入 by ヨメレバ 具体的には以下の処理を行う。 製造ファイル・ドリルファイルのファイル名統一 拡張子の変更(.drl→.txt、.gm1→.gml) 必要ファイルをzipに圧縮 各ファイル及びzipファイル名は「elecrow-プロジェクトフォルダ名-日付」となる。 zip圧縮前のフォルダはプロジェクトフォルダ下に残る。 使い方 ソフトを起動する プロジェクトフォルダに、すでに製造ファイル・ドリルファイルを出力済みのKiCadプロジェクトのフォルダを指定する zipファイル出力先に、発注用のzipファイルを出力する場所を指定する 開始ボタンを押す 画面下部にログが表示され、処理中にエラー等があればエラーログが出力される。

October 6, 2019 · 1 min

LEDの色で天気通知する(ESP32)

ソースコード https://github.com/kouya17/esp32_weather_light 説明 ESP32を使って、LEDの色で天気通知をしてくれるプログラムを作りました。 単3電池2本駆動で8時間程度しか持たないのが課題ですね…。 IoT開発スタートブック ── ESP32でクラウドにつなげる電子工作をはじめよう! 技術評論社 Amazon Kindle 楽天 楽天Kobo

January 1, 2019 · 1 min