javascript
先日、OpenCV.jsの導入手順や画像をグレーやカラーに変化して表示させてみました。 elsammit-beginnerblg.hatenablog.com今回はOpenCV.jsで動画の再生を試してみたいと思います。 ■OpenCV.js公式サイトのサンプルを試してみる ■なぜエラーとなってしまったか…
先日OpenCVに関して調べものをしていたところ、 javascriptで動作させることが出来るOpenCV.jsなるものを発見!!早速使ってみましたので今回はセットアップも含めて備忘録残しておこうと思います。 ■OpenCV.jsとは? ■OpenCV.js利用環境構築 ■最後に ■参考 …
前にjsonやcsvファイルの相互変換や編集の方法を備忘録としてまとめました。 elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.comこちらの変換サイトですが、少し便利で使うときもあり、せっかくなのでWebサイトにて作成することにし…
先日調査したjsonデータ⇔csvデータ変換やjsonデータ⇔xmlデータ変換や各種ファイルを出力する方法をまとめました。 elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.comどうせなのでこれらのコードをgithub pagesで公開したら後で便利…
今回は半年前に作成したスライドショーに音楽を付与し、 画像をクリックすると音楽とスライドショーが開始するようにしてみたいと思います。 作成したスライドショーはこちらにまとめております。 elsammit-beginnerblg.hatenablog.com合わせてhtmlで音声出…
今回はjavascriptでList内にbuttonなどのinputタグを追加する方法についてまとめたいと思います。htmlで記載されたタグを操作する際には、 documentオブジェクトを使用するかと思います。 自分もよく表示内容を切り替えたり属性(Attribute)を切り替えたりす…
先日、PythonのFlaskを用いてサーバのCPU使用率やメモリを可視化するWebアプリを作成してみました。 elsammit-beginnerblg.hatenablog.comこちらを用いて監視作業を行っているのですが、 外部ネットワーク環境に接続せず、ローカル環境でも使用するケースが…
今回はChart.jsで横軸のスケールで自動で動かす方法についてまとめておきたいと思います。 前回のブログの最後に後でまとめていきます。と記載した内容です。 elsammit-beginnerblg.hatenablog.com ■Chart.jsで横軸範囲を指定する ■横軸を動的に動かしてみる…
先日、PythonでCPU使用率やメモリ資料率を監視するためのアプリを作成してみました。 elsammit-beginnerblg.hatenablog.com今回は、こちらのアプリを改造してWebアプリを作成!! これでネットワークが接続された環境であればどこでもサーバの監視・管理がで…
約1年前、Reactでモグラたたきを作成しました。 elsammit-beginnerblg.hatenablog.com久しぶりにこちらのコードを見たのですが、、、 ちょっと汚い、、いやちょっとではない!!かなりだ!! ということでコード修正・整理を行いました。コードを修正してい…
前回まででjsonファイルの読み込みやcsvファイルの読み込み、 csv⇔jsonデータの変換を行ってきました。 elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.com今回は最後で、xmlファイルを読み込みjsonデータに変換したり、jsonデータを…
先日、javascritptでjsonファイルを読み出したり、書き出す処理についてまとめました。 elsammit-beginnerblg.hatenablog.comこちらのファイル読み込み・出力を行うにあたり、 json⇔csv、 json⇒xml、 xml⇒csv、 と変換できるツール的なものが作成できれば面…
前回まで動画や画像処理について備忘録まとめてきましたが、 今回は打って変わってjavascriptでのjsonデータやjsonファイルの取り扱いについてまとめていきたいと思います。ちょうどjsonファイルを取り扱ってデータ管理する必要があったのですが、 アプリを…
少し時間が空いてしまいました 色々と所要があり、ブログの作成が行えず時間が空いてしまいました。今回は先日のブログでご紹介した桜フォトフレームについての技術内容についてまとめておこうと思います。 ■桜フォトフレーム ■桜フォトフレームのソースコー…
もうすぐ春ですね!! 春と言えば桜!!ということで、Web上で桜をヒラヒラ舞わせてみようと思い、コーディングしてみました。 まだまだ自粛でお花見も難しそうなので、お部屋で桜が舞い散る風景を見て楽しめればと思っております。今回はフレームワークは用…
昨日学習結果を保存するまでの処理をまとめました。 elsammit-beginnerblg.hatenablog.com今回はこちらの保存した学習データを用いてWeb上に着座中か否かの判定結果を表示させてみたいと思います!! ■学習結果を使用する ■学習結果を用いて赤外線アレイセン…
先日、javascriptでヒートマップを表示する方法をまとめました。 elsammit-beginnerblg.hatenablog.com今回は以前から用いている赤外線アレイセンサ値をヒートマップで表示してみたいと思います!! ■構成 ■サーバサイド実装 ■フロントエンド実装 ■実行して…
今回はjavascriptでヒートマップを表示する方法をまとめていきたいと思います!!先日、赤外線アレイセンサ amg8833を用いて温度分布の取得や表示を行いました。 elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.comこちらの温度分布…
react nesでchatbotを作成してみました。 elsammit-beginnerblg.hatenablog.com今回はこちらのchatbotを用いて会社名を聞くと会社名に対する利益や住所の情報が返ってくるアプリを作ってみました。 その際に、会社情報を収集するためのサーバを構築の上、pos…
先日お話ししたchatbotアプリが少し形になったので報告!! 作成できたのは、前回ご紹介したchatbotで作成したログイン画面のみですが elsammit-beginnerblg.hatenablog.com ■作成したアプリのご紹介 ■stateの配列追加 ■最後に (adsbygoogle = window.adsbyg…
先日ご紹介したReact nesを用いてチャットボット的なものを作成中!! elsammit-beginnerblg.hatenablog.comそこで、ReactのsetStateに対する非同期処理に躓いたので備忘録として残しておきたいと思います。 ■setStateは非同期処理 ■対処方法 ■補足 ■最後に …
今回はReactで動画再生プレイヤーアプリの作成方法についてまとめておきたいと思います!!動画再生Playerは、こちらのように動画の再生や停止、切り替えが行えるものです。 こちらのようなアプリ(サイトに近いかもしれませんが)を作成していきます。 ■事前…
前回マップ画面の作成とキャラクターの操作を実施してみました。 elsammit-beginnerblg.hatenablog.com今回はバトル画面の作成を行ってみましたので、その報告です!! ※技術の備忘録は少なめ(というかほとんどない)です。 ■環境 ■完成結果 ■コード紹介 ■最…
年末年始のお休みに入り、少し時間が出来ました。 何かReactでアプリを作りたいな?と思い、ちょっとしたRPG作成してみようかな?と思い手を動かしてみました!!基本的にjavascriptでのRPGアプリ作成についてはこちらのサイトに掲載されていたので、流用さ…
前回クリスマスを理由に雪を降らせたWebアプリを作成しました。 elsammit-beginnerblg.hatenablog.comこちらのWebアプリに表示させていた画像位置を簡単に変更させたいな!! 出来れば、マウス操作で位置変更できると便利そうだな!! と思い、マウス操作で…
メリークリスマス!! ただ残念なことに、 コロナウィルスの第3波が来てしまって、遊びに行くことも憚られる状態ですねせっかくのクリスマスなのに、、、 例年ならイルミネーションとかきれいなはずなのにということで、クリスマスっぽいWebアプリを作ってみ…
前回、作成してきたアプリを一つにまとめるホームページを作成しました!! elsammit-beginnerblg.hatenablog.com 1冊ですべて身につくHTML & CSSとWebデザイン入門講座新品価格¥2,237から(2020/10/20 23:07時点) ちょっと1ページだと寂しいなと思ったので…
今まで作成したゲームやアプリを整理したいのと、一覧で紹介したいな、と思い立ち、 紹介ページを作成してみました!! ※今回は技術紹介ではないのです。 作成はReactで行いました!! 作成したホームページはこんな感じ。 ASPではないですし、レイアウトが…
暑いですね。夏ですね。 だけど今年はコロナウィルスの影響で軒並み花火大会がなくなってしまいなんだかさみしい夏になりました。。。 ここ数年は毎年近所の花火大会行っていたのですが、今年はなし。。。 このまま夏が終わってしまうのはなんだか悲しい!!…
突然、htmlで表示したページの一部だけ定期的に更新する方法が気になりましたww。 確かにReact使ってしまえばこんなこと簡単に出来てしまうが、そういうの使わずに実装できないかな?と思い立ちました!! さて、、、どうしたものか。。。 と思い、調べてみ…