Elsaの技術日記(徒然なるままに)

主に自分で作ったアプリとかの報告・日記を記載

MENU

Web App

Flask 動画アップロード方法

前回、Flaskでの動画再生アプリや、 elsammit-beginnerblg.hatenablog.comYoloで物体検知が行える動画再生アプリを作成しました。 elsammit-beginnerblg.hatenablog.com今回はFlaskでの動画アップロード機能を追加して、自分の持っている動画をWeb上で物体検…

xfreeでPHP・MySQLサーバー導入手順 & VScodeでftpサーバー同期方法

Webアプリや作品を公開するのにサーバが欲しいな!!と思っていたのですが、 遊びでサーバをわざわざ契約するのもな。。。と悩んでおりました。。。そんな時、TwitterでWeb作成やWeb開発されている方が「xfree」をお勧めしており、 どんなものか?? と調べ…

Yoloによる物体検知と動画再生Webアプリを組み合わせてみる

前回、Yoloを用いて画像に対する物体検知を行いました。 elsammit-beginnerblg.hatenablog.com今回はこちらのYoloによる物体検知と以前作成したWebアプリを組み合わせ、動画再生中に物体検知するWebアプリを作成していきたいと思います。 ■条件 ■環境 ■試し…

Flaskで静的ファイル(javascript、css)のファイル更新で反映されない

先日作成した動画再生アプリ作成しました。 elsammit-beginnerblg.hatenablog.comこの際Flaskを用いたのですが、javascriptやcssを変更しても表示上変更されずに苦労したので、対策を備忘録として残しておこうと思います。 ■現象 ■対処方法 ■最後に ■参考 (a…

flaskで動画再生Webアプリを作ってみる

先日OpenCVを用いた動画再生や逆再生、早送り等を実装してみました。 elsammit-beginnerblg.hatenablog.com今回はFlaskを用いてこれら逆再生や早送りなどが実装されたWebアプリについてまとめていきたいと思います!! ■完成形 ■最終コード ■フォルダ構成 ■F…

Go言語 ginでhttpsサーバとして扱う

今回はgo言語でのhttpsサーバ立ち上げ方法についてまとめたいと思います!! 今までhttpアクセスができるようにサーバ立ち上げておりましたが、セキュリティに配慮するならhttpsも扱えた方がいいよな と思い、試しにginで実現させてみました。 ■環境 ■オレオ…

htmlでスライドショー作成 ~合わせて桜フォトフレームのご紹介~

少し時間が空いてしまいました 色々と所要があり、ブログの作成が行えず時間が空いてしまいました。今回は先日のブログでご紹介した桜フォトフレームについての技術内容についてまとめておこうと思います。 ■桜フォトフレーム ■桜フォトフレームのソースコー…

機械学習による着座中か否か判定 part2

昨日学習結果を保存するまでの処理をまとめました。 elsammit-beginnerblg.hatenablog.com今回はこちらの保存した学習データを用いてWeb上に着座中か否かの判定結果を表示させてみたいと思います!! ■学習結果を使用する ■学習結果を用いて赤外線アレイセン…

赤外線アレイセンサの結果をWeb上で表示

先日、javascriptでヒートマップを表示する方法をまとめました。 elsammit-beginnerblg.hatenablog.com今回は以前から用いている赤外線アレイセンサ値をヒートマップで表示してみたいと思います!! ■構成 ■サーバサイド実装 ■フロントエンド実装 ■実行して…

React nesを用いたchatbot的なアプリ 作成

先日お話ししたchatbotアプリが少し形になったので報告!! 作成できたのは、前回ご紹介したchatbotで作成したログイン画面のみですが elsammit-beginnerblg.hatenablog.com ■作成したアプリのご紹介 ■stateの配列追加 ■最後に (adsbygoogle = window.adsbyg…

reactでのWeb動画再生playerアプリ

今回はReactで動画再生プレイヤーアプリの作成方法についてまとめておきたいと思います!!動画再生Playerは、こちらのように動画の再生や停止、切り替えが行えるものです。 こちらのようなアプリ(サイトに近いかもしれませんが)を作成していきます。 ■事前…

おみくじアプリ作ってみた

今年も残すところ後1日になりました。 今年はありがとうございました!!来年もよろしくお願いいたします!!今年はコロナに振り回された1年でした。。。 来年は終息し、平穏な一年になることを切に願います!!一足早いですが、おみくじアプリを作成しまし…

Reactでバトル画面を作成

前回マップ画面の作成とキャラクターの操作を実施してみました。 elsammit-beginnerblg.hatenablog.com今回はバトル画面の作成を行ってみましたので、その報告です!! ※技術の備忘録は少なめ(というかほとんどない)です。 ■環境 ■完成結果 ■コード紹介 ■最…

ReactでRPGマップ作成

年末年始のお休みに入り、少し時間が出来ました。 何かReactでアプリを作りたいな?と思い、ちょっとしたRPG作成してみようかな?と思い手を動かしてみました!!基本的にjavascriptでのRPGアプリ作成についてはこちらのサイトに掲載されていたので、流用さ…

Reactでのマウス操作で画像位置変更

前回クリスマスを理由に雪を降らせたWebアプリを作成しました。 elsammit-beginnerblg.hatenablog.comこちらのWebアプリに表示させていた画像位置を簡単に変更させたいな!! 出来れば、マウス操作で位置変更できると便利そうだな!! と思い、マウス操作で…

React 動くsin、cosカーブ作成

今回はReactでsinやcosカーブを動かしてみたいと思います!! ■環境 ■sinカーブの表示 ■実際に動かしてみる ■sinカーブとcosカーブを合わせて表示 ■最後に (adsbygoogle = window.adsbygoogle || []).push({}); ■環境 例のごとくこちらを利用 ・Ubuntu16.04(…

React chatbotアプリ作成

Reactで面白そうなアプリ作れないかな??と思い考えていたのですが、、、Chatbotとか作れたら面白そうだな!!と思いたち早速作成することにしました。 React Chatbotで調べてみたところ、 react-simple-chatbot というライブラリを用いると簡単に作れそう…

Single Page Application (SPA)とは?

reactでwebサイトを作成しようと思っていたところ、友人より、最近はSPAで作ることが多いと伺いました。 ...SPAってなんだ??週刊SPA!のことじゃないよな?? 聞いてみるとどうやら ”Single Page Application”のことらしい。 どういうものかわからなかった…

簡単なWebアプリ作成 ~無駄な会議を撲滅しよう!! ~ part5~

先日ご報告しました通り、日付毎の会議にて発生するお金をグラフ化するページを作成しましたので報告します!! 最終的に出来た成果物はこんな感じになりました!! まずComboBoxには1週間ごとにデータのある週間だけ選択できるようにすること、そして1年分…

簡単なWebアプリ作成 ~無駄な会議を撲滅しよう!! ~番外編~

無駄な会議を撲滅しよう!!シリーズですが、part4を上げてから6日経過しました。 なぜこんなに時間が空いてしまったか?というと、、、 はい!!物凄~~~く、手こずっておりまりました!!(泣) そして、次回作挙げられるほどまだ完成には至っておりません(…

簡単なWebアプリ作成 ~無駄な会議を撲滅しよう!!~ part3

part2に引き続きWebアプリの作成をしていきたいと思います!! 前回までの作業は下記を参考に。 elsammit-beginnerblg.hatenablog.com今回は、サーバサイドでのDBへのデータRead/Write部分についてです。 DBですが、"役職データ"と"会議毎の情報"の2つのテー…

簡単なWebアプリ作成 ~無駄な会議を撲滅しよう!!~ part2

前回、簡単なWebアプリを作成した。 elsammit-beginnerblg.hatenablog.comが、、、やはり、、、 ・各会議時間や参加人数を保存おきたい ・後で見返せるようにしたい と思い、サーバーサイドの作成とDBへの登録を実施したので報告!! ※ソースコードは下記に格…

簡単なWebアプリ作成 ~無駄な会議を撲滅しよう!! ~part1~

最近調べものをしていたところ、こんな記事を発見!! forest.watch.impress.co.jp"面白いツールだな"、と思った一方、"VBAだと実行ファイル必要になるよな。事前にPCに入れておくの面倒だな。会社だとセキュリティうるさいし。"と思ってしまいました。 それ…