JavaScript
obniz で冷蔵庫 牛乳残量計 製作
HomeMadeGarbage Advent Calendar 2021 |11日目 obniz IoT コンテスト2021 に牛乳残量計を応募しました。 事前にアイディア投稿することで obniz Board 1Y を提供していただき大変お得なコンテストでありました。 https://homemadegarbage.com/obniz01 牛乳残量計 詳細は以下のサイトに記載しておりますのでザックリ紹介 obnizに牛乳の在庫本...
Advent Calendar / IoT / 電子工作
はじめての obniz
電子工作の知識共有サイト『elchika(エルチカ)』にて obniz を用いたコンテスト(投稿受付期間:2021/4/12 ~ 5/16) の案内がございました。 なんと事前にアイディアを申請し審査が通ると実機『obniz Board 1Y』がもらえるとのことで早速応募してみました。 obnizもろた 無事にアイディア申請が通りobniz Board 1Y をいただくことができました! 初めてのobniz。まずはobnizと私の間にある隔たりを除去...
[Google Maps] JSエラー “initMap is not a function”
Google マップ のJSエラー対策メモ 対策 JSファイル内のグローバルスコープで、一旦 function initMap() {} を宣言する。 [crayon-62b8119e4f14f238174506/] エラーの原因 Google Maps のスクリプトを非同期で読み込んでいるため、 initMap を宣言したときに存在していない場合がある? [crayon-62b8119e4f157937427042/] 参考ページ angularjs - T...
[JavaScript] 期間の重複チェック
期間Aと期間Bを比較して、重複があるかチェックするIFメモ [crayon-62b8119e4f575862114250/] 下記いずれかの条件に当てはまる 期間Aの開始日は、期間Bの範囲内(期間Bの開始日以上&終了日以下)にある 期間Aの終了日は、期間Bの範囲内(期間Bの開始日以上&終了日以下)にある 期間Aの開始日も終了日も、期間Bの範囲外 (期間Aの開始日は期間Bの開始日以前 & 期間Aの終了日は期間Bの終了日以降)にある ※期間Aが期間B...
Microsoft MakeCode で ビジュアルプログラミング
今回は各種マイコンでMicrosoft MakeCode を使用したビジュアルプログラミングを試してみました。 Scratchみたいにブロック組み合わせてマイコン用のプログラムを作るのですが、手を出すまでは逆に冗長になって面倒くさいのではと思ったのですが。。。 そんなことはありませんでした。インストールとか環境構築とか一切無しでブラウザ上で簡単にプログラムできちゃいましたし。 プロトタイピングのためのプロトタイプ制作とかに最適なんじゃないかしら :roll: ?サクッとできちゃうから。 ...
JS でデバイス判定して viewport 設定
スマホでは width=device-width を指定し、それ以外ではwidth=1200(最低表示させたいサイズ)を指定 [crayon-62b8119e4f708601995375/] コンテンツの min-width は 例えば 960pxとかになっていて、タブレットでは PCと同じ(min-width: 960px)で表示させたい時など。 ...
動画背景の上に、動画の再生位置に合わせて画像・テキストを表示する
動画背景の再生位置に合わせて画像やテキスト表示する See the Pen QZwjzw by HomeMadeGarbage (@hmg) on CodePen. timeupdate , currentTime timeupdate、currentTime で再生位置を取得し表示を切り替える [crayon-62b8119e4f8f2838085432/] setInterval だと タイミングがズレたりするので、currentTime を使うと各ブラウザや重さによってもズレ...
innerText の 空判定が出来ない → textContent で取得する必要あり
こうゆう文を書いてて [crayon-62b8119e4facc840706172/] innerText が空でも「空以外」で判定されてしまった。 .textContent で取得したらちゃんと判定された。 [crayon-62b8119e4face310623369/] ちょっと違いを調べきれてないけどメモ......
Google Map の 埋め込み地図 から 拡大地図URLを生成
(´・ω・`) < Google Map の 埋め込み地図から、拡大地図のURLを取得したい???? そのままブラウザで表示させようとすると「The Google Maps Embed API must be used in an iframe.」というエラーが出る iframe の中身はクロスドメイン制約の為取得出来ない 埋め込み地図(iframeのsrc)からパラメータを取得して拡大地図用のURLを生成 [crayon-62b8119e4fc7b752206264/...
MJPG-streamer カメラをブラウザから起動/終了させる
ブラウザからON/OFF出来るボタンを付けてみました。 C言語でラッパープログラム作成 プログラムを置く任意の場所に移動 [crayon-62b8119e4fe5a204992013/] 起動用プログラム 起動用ファイルを作成 [crayon-62b8119e4fe5d891505289/] 記述、保存 [crayon-62b8119e4fe5f253972366/] コンパイル [crayon-62b8119e4fe60910139366/] SUID(Set User ...
toggl 印刷用ブックマークレット
togglというフリーの時間管理ツールを使っています。 プロジェクトは無制限に追加出来るし、デスクトップアプリで開始ボタンをポチッと押すだけなので簡単です。 サイト標準の印刷機能では表示が崩れる為、ブラウザの印刷機能を使ってPDF保存をしています。 スッキリ印刷出来るようブックマークレットを作成しました。 印刷用ブックマークレット (動作確認はChromeのみ) [crayon-62b8119e50475907720801/] 印刷結果 通常 ブックマークレット実行でス...