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

githubリポジトリ内のサブディレクトリのみをダウンロードしてくる方法

今回はgithub上に上がっているリポジトリ内のサブディレクトリのみを取得する方法についてまとめたいと思います。最近参考にしたいコードをローカルにダウンロードしようと思ったのですが、 リポジトリがとても大きかったので欲しいコードだけ持ってこれないか？と思い、 調べたところ、方法があったのでその備忘録になります。 ■前準備 ■sparsecheckoutを用いてサブディレクトリのみを取得する。 ■補足 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■前準備 まずダウンロードを行うためのディレクトリを作成していきます。 mk…

2022/10/16 18:41

OpenCVで作成した文字や四角形を移動させてみる

OpenCVで動画を再生させたり、動画のフレーム数を変えたり、フレームレート切り替えたり、、、 動画を切った貼ったやっていると、 あれ？？今フレームレート想定通りになっているかな？？遅くない？？早くない？？ と不安になることがあります。動画を見比べて判断すればよいのですが、 ただの動画だと分かりにくい。。ということで、自作でサンプル動画を作成してみることにしました。 ただ連番画像を動画にするだけだと画像作成面倒ですし、やりなれた方法ですので、 今回は、OpenCVのライブラリとして提供されている、 rectangleとTextを用いて、自作で動画を作成してみることにしました。 ■作成した動画 …

2022/07/24 23:39

nodejsでサーバーのCPUやメモリリソースを取得してみる

前回、Pythonでサーバー上のリソースを取得するためのアプリを作成してみました。 elsammit-beginnerblg.hatenablog.com前回のアプリはfrontをjavascriptで作成したのですが、どうせならReactを使用してしっかり作ってみようかな？ と思い、再挑戦することに。どうせならサーバーサイドもpythonではなく、nodejsでも使ってみようと思ったのですが、、、 nodejsでCPUやメモリリソースのチェックの仕方を知らない！！ということで、今回はnodejsでリソース取得する方法を調べましたので備忘録として残そうと思います。 ■CPU・メモリリソース取得…

2022/06/30 23:52

cifsをマウントしたディレクトリでもリンク作成できるようにする

先日、リンクが作成出来ないことに起因してnpmやnpxでエラーが発生してしまいました。 一応、npm、npxコマンド実行時にオプションを付与することで回避できたのですが、、、 elsammit-beginnerblg.hatenablog.com そもそも、 なんでリンク作成出来ないのだろうか？リンク作成出来るようにするための方法は？ が気になったので調査は継続していました。原因と解決策が分かりましたので備忘録としてまとめておきます。 ■原因 ■対策 ■(補足)cifsとは？ ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({});…

2022/06/19 19:54

ENOTSUP: operation not supported on socket, symlinkを解決した話

最近、以前勉強していたReactやnodejsを再勉強中。 そこである日、 npm installや npx create-react-appを実行したところ、 ERR! code ENOTSUP npm ERR! syscall symlink npm ERR! path ../mime/cli.js npm ERR! errno -95 npm ERR! ENOTSUP: operation not supported on socket, symlink 'といったエラーが発生してしまいました。今回は本エラー発生の原因とその解決方法を調べたので備忘録として残しておきたいと思います。 ■現…

2022/06/16 22:52

OpenCV.jsで動画再生を実施

先日、OpenCV.jsの導入手順や画像をグレーやカラーに変化して表示させてみました。 elsammit-beginnerblg.hatenablog.com今回はOpenCV.jsで動画の再生を試してみたいと思います。 ■OpenCV.js公式サイトのサンプルを試してみる ■なぜエラーとなってしまったか？ ■OpenCV.jsでの動画再生コード紹介 ■実際に動かしてみる ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■OpenCV.js公式サイトのサンプルを試してみる OpenCV.jsの公式サイトには動画再生のサンプ…

2022/06/10 23:54

javascript用OpenCVであるOpenCV.js試してみた

先日OpenCVに関して調べものをしていたところ、 javascriptで動作させることが出来るOpenCV.jsなるものを発見！！早速使ってみましたので今回はセットアップも含めて備忘録残しておこうと思います。 ■OpenCV.jsとは？ ■OpenCV.js利用環境構築 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■OpenCV.jsとは？ OpenCVの公式ページにはこちらの通り説明がありました。 OpenCV.js is a JavaScript binding for selected subset of Op…

2022/06/06 22:43

jsonやcsvファイルの相互変換や編集サイト作成

前にjsonやcsvファイルの相互変換や編集の方法を備忘録としてまとめました。 elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.comこちらの変換サイトですが、少し便利で使うときもあり、せっかくなのでWebサイトにて作成することにしました。 ■サイトリンク ■使い方 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■サイトリンク 作成したファイル変換のサイトですが、こちらになります。 https://elsammit.github.io…

2022/06/02 21:36

githubで公開した時の検索時の説明文(ディスクリプション)を用意

前回から引き続きgithub関係について備忘録としてまとめておきたいと思います。今回は検索時に表示される説明文(ディスクリプション)を用意する方法です。 ■githubをpublicで公開した時に気づいたこと ■ディスクリプションを用意する方法 ■試しに対応 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■githubをpublicで公開した時に気づいたこと ここ最近、publicで上げたコードが検索に引っかかることがあるのですが、 説明文(ディスクリプション)がデフォルトのままなんですよね。 ディスクリプションとは、g…

2022/05/29 23:38

githubのREADMEに動画を表示する

今回はgithubのREADMEに動画を埋め込む方法をまとめてみます。最近githubでアプリを上げているのですがどういう動作なのかを示すのに、 動画で見せるのが結構手っ取り早かったりするんですよね。 そこで、githubのREADMEに動画を埋め込んでいるのですが、備忘録としてまとめておこうと思います。 ■簡単に動画を埋め込む方法 ■コミットされた動画をREADMEに埋め込み ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■簡単に動画を埋め込む方法 まずは簡単にREADMEに動画を埋め込む方法についてです。それは、、、…

2022/05/26 23:40

32bit UEFIブートかつ64bitアーキテクチャにubuntuをインストールするまで

先日部屋掃除をしていたところ、 昔使用していた2in1タブレットPC(Aspire Switch)を発見！！ 懐かしくなり起動させてみたところ、OSがWindows8.1。 せっかくなのでwindows10にアップデートしようとしたのですが、なぜかインストール失敗。。 まぁ、windows10がインストールできたとしてもスペック的にカクついたりしてまともに動かなかっただろう。このまま眠らせておくのももったいないので、、 せっかくなのでubuntuをインストールすることに！！下記からubuntuをUSBメモリに焼いてインストールすればよいのだと思い気軽な気持ちで始めたのですが、 ちょっと手間取っ…

2022/05/23 23:18

javascriptをtype="module"で読み出すとonclickイベントで関数がis not definedになる

先日調査したjsonデータ⇔csvデータ変換やjsonデータ⇔xmlデータ変換や各種ファイルを出力する方法をまとめました。 elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.comどうせなのでこれらのコードをgithub pagesで公開したら後で便利かな？ と思い立ち、Webアプリを作成中！！そこで、 ファイル分割のためにexport/importを使用したところ、 ちょっとハマったことがあるので備忘録としてまとめたいと思います。 ■export/importを用いてファイル分割を行ってみる。 ■htmlで…

2022/05/19 23:48

ウィンドウ上の指定した領域に対するスクリーン録画アプリをリリースしました

先日、指定した領域に対してスクリーンショット(録画)をする方法をまとめました。 elsammit-beginnerblg.hatenablog.com 今後、自分でも何かと使いそうだな！！と思ったので、 アプリケーションを作成しました。 ■アプリダウンロード先 ■使用条件(動作確認環境) ■アプリ紹介 ■アプリを使用する際の注意事項 ■最後に (adsbygoogle = window.adsbygoogle []).push({}); ■アプリダウンロード先 アプリはgithubにて公開いたしました。 ダウンロード先のURLはこちらになります。 https://github.com/E…

2022/05/15 23:01

WPFでディスクトップ上の指定したエリアのスクリーン録画を行ってみた

自分でカスタマイズしながらスクリーンショットアプリが欲しくて色々試してきました。今回はこちらで紹介したウィンドウ全体を表示、録画する方法をまとめました。 elsammit-beginnerblg.hatenablog.comまた、Rctangleで描画する方法もまとめました。 elsammit-beginnerblg.hatenablog.com今回はこちらのディスクトップウィンドウのスクリーン録画する方法と、 Rectangleを描画する方法を組み合わせて、、、 Rectangleで描画した部分を切り出してスクリーン録画する方法をまとめたいと思います。 これで画面上の好きなエリアのみを録画す…

2022/05/12 22:43

CreateBitmapSourceFromHBitmapでメモリリークが発生した件

先日よりC#で画面スクリーンショット方法をまとめていました。 elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.com そこで、CreateBitmapSourceFromHBitmap関数でどうもメモリリークが発生してしまい、 メモリ使用量がどんどん増えていく。。ということで原因と対応策を調べたので備忘録としてまとめておくことしました。 ※同じミスはしたくないので。 ■原因 ■解決方法 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■…

2022/05/01 22:52

WPFで自由にRectangleを描画する

先日、WPFで特定のアプリケーションに限定してスリーンショット録画の方法をまとめました。 elsammit-beginnerblg.hatenablog.comですが、 ・複数アプリを録画したい ・好きなエリアを指定したい といった場合にはアプリケーションに限定するだけでは不十分です。。 そこで、自分で指定したエリアで録画するアプリケーションを実装したいと考えました！今回は、エリアを指定するためにRectangleを描画する方法をまとめたいと思います。 ■xamlの実装 ■好きなエリアにRectangleを作成する ■Rectangle描画領域をCanvasに限定する ■最後に ■参考 (ad…

2022/04/28 23:06

特定のアプリに限定したスクリーン録画を試みる

先日、OpenCVSharpを用いて画面全体でのスクリーン録画を試してみました。 elsammit-beginnerblg.hatenablog.comですがこの方法ですと、 特定のアプリが映っている領域のみ録画したい場合には無駄な領域も写ってしまいますね。 後で余計な領域を削除するのも大変なので、今回は特定のアプリケーションの領域のみを録画する方法をまとめたいと思います！！ ■前提条件 ■アプリケーションの座標やサイズ取得方法 ■特定アプリの領域を切り出してスクリーン録画してみる ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({…

2022/04/24 10:59

WPFでスクリーン録画してみる

先日、WPFでスクリーンショットやスクリーン画面の動画を表示してみました。 elsammit-beginnerblg.hatenablog.com今回はこちらのコードに録画機能を追加してスクリーン上の映像を録画してみようと思います！！ ■OpenCVSharpを準備する ■WPFでスクリーン録画してみる ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■OpenCVSharpを準備する 録画するにあたり、OpenCVSharpを用います。 OpenCVのC#版ですね。OpenCVSharpですが、 Visual Studi…

2022/04/21 22:44

WPFでスクリーンショットや画面操作動画表示

今回はC#でスクリーンショットや画面をリアルタイムで表示する方法をまとめたいと思います。 最終的にはC#で画面録画を実現するまでをまとめたいと思いますが、 今回は画面をWPFのImageに表示するまでをまとめていきます。 ■前提条件 ■スクリーンショット実現方法 ■動画化してみる ■(補足)Dispatcher.Invokeとは？ ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■前提条件 今回画面レイアウトですが、こちらの通り ImageタグとButtonタグのみの構成とします。 用意したボタンをトリガにスクリーンショッ…

2022/04/17 23:19

OpenCVで映像のズームイン・ズームアウトを試してみる

今回はOpenCVで映像のズームイン・ズームアウトを行ってみたいと思います。 言語はPythonです。 ■Pythonバージョン ■映像のズームイン・ズームアウトのコード ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■Pythonバージョン 使用するPythonのバージョンですが、 Python 3.7.4 になります。 ■映像のズームイン・ズームアウトのコード 早速、ズームイン・ズームアウトのコードをご紹介します。 コードはこちら。 こちらは、2倍の倍率でズームインしているコードになります。 import cv2 s…

2022/04/14 23:07

React Router v6でページ遷移方法をまとめる

昔、React Routerでページ遷移に関してまとめました。 elsammit-beginnerblg.hatenablog.comelsammit-beginnerblg.hatenablog.comどうやらReact Routerがv5⇒v6に上がったことでページ遷移の方法が変わったようです。 今回はv6でのページ遷移についてまとめていきたいと思います。 ■条件 ■React Router v6でのページ遷移方法 ■パラメータを渡しながらページ遷移 ■実際に動かしてみる。 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({})…

2022/04/10 23:03

flaskでREST APIを体験してみる

今更感ありますが、、、今回はREST APIについてまとめていきたいと思います。 また、REST APIについて記事や本を読んでもよく分からず、 実際にREST APIを体験するためにflaskでREST APIを作成してみましたので、 備忘録も兼ねてブログにまとめたいと思います！！ ■REST APIとは？ ■FlaskでREST APIを作成してみる ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■REST APIとは？ そもそもRESTとは、、 REpresentational State Transferの略にな…

2022/04/07 23:07

C++でラムダ式を用いたコールバック関数作成

今回はラムダ関数を用いてC++でコールバック関数を作成していきたいと思います！！ クラス間でコールバック関数を用いてメンバ変数に値をSet/Getしてみたかったので調べてみたところ、 便利そうな方法を見つけたので備忘録としてまとめることに。 ■ラムダ式とは？ ■ラムダ式を用いたコールバック関数 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■ラムダ式とは？ ラムダ式とは、 簡易的な関数オブジェクトをその場で定義するための機能になります。例えば、 #include <stdio.h> int main(){ auto ad…

2022/02/17 23:21

github APIを用いたコマンドでのIssueの取得や登録

今回はgithub上に上がっているIssueの一覧を取得する方法についてまとめていきたいと思います。個人やOSSなど、ソースコードやバグ・要望などなどをgithub上で管理することがあるかと思います。 その際に、バグや要望の一覧が見たいな！！となったことはないでしょうか？ 今回は、APIを用いてIssueの一覧を取得してみたいと思います。 ■APIを用いてgithub上のリポジトリからIssueを取得 ■Issueの登録 ■(おまけ)Issueへのコメント追加 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■APIを用い…

2022/02/03 23:35

Dear PyGuiでフォントサイズを変更してみる

先日Dear PyGuiとMediaPipeを連携させてジャンケンゲームを作成しました。 elsammit-beginnerblg.hatenablog.comこちらのアプリを作成していた時に以外に苦戦したことが記事中にも記載した通り、 Dear PyGuiでフォントサイズどうやって変えるのか？ といった課題？でした。今回苦戦したので、以降は迷わないようにまとめておこうと思います。 ■文字フォントを変更する方法その1 ■文字フォントを変更する方法その2 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■文字フォントを変更す…

2022/01/27 23:32

Dear PyGuiとMediaPipeを用いたGUIアプリを作成

先日、MediaPipeを用いてじゃんけんゲームのアプリを作成しました。 elsammit-beginnerblg.hatenablog.com今回はこちらのMediaPipeとDear PyGUIを連携させてGUIアプリを作成しましたのでご紹介します。 ■ソースコード ■使い方 ■アプリを動作させてみる ■概要 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■ソースコード コードに関してはgithubに掲載しておりますのでご参照ください。 github.com ■使い方 こちらを利用する場合には、Dear PyGUIと…

2022/01/23 11:45

MediaPipeでじゃんけんゲームを作成

先日MediaPipeで手の形状を検出してみました。 elsammit-beginnerblg.hatenablog.com最後に手の形状を検出してじゃんけんの判定を行ってみました。これを見てふと、、、 せっかくなのでCPUと対戦出来るじゃんけんゲーム作ったら面白いかな？？ と思い立ち、作成することに。 最初はとりあえず、OpenCVのimshowでの表示を用いてじゃんけんゲームを作成してみました。 ■できたアプリ ■コードはgithubにて公開中 ■コードに関して ■CPUが出す手の処理 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).pu…

2022/01/16 11:15

MediaPipeで手の動作をリアルタイムで検出する

たまたまになるのですが、MediaPipeという手や顔の動きをリアルタイムで検出するライブラリを発見。 面白そうだったので触ってみることにしました。 ■MediaPipeとは？ ■MediaPipeインストール ■MediaPipeを用いて手の動作を検知 ■グー、チョキ、パーを認識してみる ■最後 ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■MediaPipeとは？ MediaPipeは、Googleが提供しているライブメディアやストリーミングメディア向けのMLソリューションであり、 CPUのみで検出が行えるツールになります。…

2022/01/13 22:59

Linuxでのファイルzip化時のフォルダ構成についてまとめてみる

Linuxにてzip化を行う場合にはこちらのコマンドを実行すれば可能なのです。 zip dist.zip srcfile もしディレクトリごとzip化したい場合には、 zip -r dist.zip srcdirとすればOKです。■zipコマンド実行後の挙動 しかしながら、、、1つ困ったことがあります。 それは、指定したパスの通りにzip暗号化してしまう点です！！ 例えば、 zip dist.zip /home/hoge/huga/srcdirとした場合、dist.zipが生成されるのですが、 このdist.zipを展開すると、 /home/hoge/huga/srcdir のフォルダ構成でs…

2022/01/09 18:24

Linuxでサマータイムを無効にしつつタイムゾーンを操作する方法方法

今回はLinuxでサマータイムを疑似的に？無効化する方法についてまとめたいと思います。タイムゾーンでサマータイムありの地域を選択しているが、 サマータイムはオフにして運用したい場合に使えるかな？と思い調べてみました！！ Linuxだとタイムゾーンごとにサマータイム有効・無効が決まっているので、どうしても無効化したいことがあった場合タイムゾーンを変えるしかないのか？？ と思ったのが調査のきっかけです。 ■Linuxでのタイムゾーン設定 ■サマータイム無効化方法 ■(補足)タイムゾーンリスト ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).pus…

2022/01/06 22:29

Dear PyGuiとOpenCVを組み合わせて動画再生アプリを作成してみる

前回はDear PyGuiというpython用のGUIライブラリについてご紹介しました。 elsammit-beginnerblg.hatenablog.com今回はこちらのDear PyGuiとOpenCVを組み合わせて動画再生アプリを作成してみたいと思います。 ■Dear PyGui上で動画を表示してみる ■動画再生アプリのご紹介 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■Dear PyGui上で動画を表示してみる では早速Dear PyGuiとOpenCVを組み合わせて動画表示方法についてまとめていきます。 …

2021/12/30 16:24

Dear PyGuiを用いてPython GUIを作成してみる

先日Dear PyGuiという、シンプルで簡単に実装できかつ色々なことが出来そうなフレームワークを見つけたので早速触ってみました！！ 今回はチュートリアルとして、インストール方法や簡単なアプリの作成方法を備忘録として残しておきたいと思います。 ■Dear PyGuiとは？ ■環境構築 ■手始めにデモソフトを動かしてみる ■サンプルアプリを作成して動かしてみる ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■Dear PyGuiとは？ 公式には下記の通り記載されておりました。Dear PyGui is a simple t…

2021/12/26 11:49

Webアプリでの注意点と画像タッチでスライドショーを再生させる

今回は半年前に作成したスライドショーに音楽を付与し、 画像をクリックすると音楽とスライドショーが開始するようにしてみたいと思います。 作成したスライドショーはこちらにまとめております。 elsammit-beginnerblg.hatenablog.com合わせてhtmlで音声出力する際の注意点もまとめておきたいと思います。 ■音声出力時の注意点 ■画像クリックで音楽とスライドショーが開始するように修正 ■追加でクリック時にスタート、ストップマークを一瞬表示させてみる ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■音声…

2021/12/19 21:37

pythonでテキストや文字列を読み上げる

今回はpythonでテキストや文字列を読み上げる方法についてまとめていきます。 ■準備 ■簡単な文字列を読み上げてみる ■英語の文章を読み上げてみる。 ■音量や発話速度を変更 ■読み上げた音声を録音する ■テキストを読み上げてみる ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■準備 今回読み上げを行うにあたり、pyttsx3を用います。【pyttsx3とは】 pyttsx3は、pythonのテキスト読み上げ変換ライブラリです。 代替ライブラリとは異なり、オフラインで動作し、Python2と3の両方と互換性があります。p…

2021/12/09 23:42

Reactでポップアップメッセージとのデータのやり取り

先日Reactでポップアップメッセージを自作する方法をご紹介しました。 elsammit-beginnerblg.hatenablog.com今回はポップアップメッセージとメインページとのデータのやり取り方法に関してまとめておこうと思います。 ■前提 ■ポップアップメッセージからメインページへのデータ送信 ■メインページからポップアップメッセージへのデータ送信 ■作成結果 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■前提 先日と同様にソースコードは下記に保存しております。 https://github.com/Els…

2021/12/05 18:12

Reactでポップアップメニューを自作する

今回はReactでポップアップメニューを自作する方法に関してまとめていきます。先日から活用しているモグラたたきアプリに関して、終了時に終了メッセージを表示させていたのですが、 当初alertを用いて実装していました。ただ、、 alert表示場所が中央に表示されないので分かりにくい！！ ということで中央に表示させるべく、ポップアップメッセージを自作することに。 ■最終系 ■ソースコードに関して ■自作ポップアップメッセージを作成 ■モグラたたき終了時にポップアップメニューを表示 ■ポップアップメッセージを閉じる処理を追加 ■最後に ■参考 (adsbygoogle = window.adsbyg…

2021/12/04 22:01

CMakeで複数の実行ファイルを生成するあれこれ

今回はCMakeを用いて複数の実行ファイルを生成したり、生成する実行ファイルを切り替える方法についてまとめておきたいと思います。 以前より気にはなっていたのですが、調べるの億劫で出来ていませんでした。。 ちょっと用事があったのでこの機に調べてみることに！！ ■経緯 ■使用環境 ■CMakeファイルで複数の実行ファイルを生成 ■CMake実行時に生成する実行ファイルを切り替える ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■経緯 今回ちょうどC++言語でいくつかのアプリを作成しているのですが、 まぁ同じような処理を多々や…

2021/11/28 18:28

Reactでドラッグを無効化するために

去年作成したモグラたたきゲームを使ってみたのですが、、 白熱するとクリックがドラッグ判定になってモグラが叩けないことが判明。そういえば、Reactでドラッグを無効にする方法を知らないな。と思い調べてみました！！ 今後困らないように備忘録として残しておこうと思います。 ■Reactでドラッグを無効化するには ■TypeScriptのケース ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■Reactでドラッグを無効化するには まずドラッグ操作を実行された際のイベント検知には、 ondragstartを用いることが出来ます。例…

2021/11/25 23:37

Reactで作成したコードをTypeScriptに変換

去年、Reactでいくつかアプリを作成してみました。 こちらのWebアプリケーションをtypescriptに置き換えることでtypescriptの勉強が行えないかと思いたち、 既存のReactで生成したコードをtypescriptに置き換えてみることにしました。今回は、typescriptに置き換えるにあたり環境構築方法についてまとめておきたいと思います！！ ■TypeScript環境をインストール ■TypeScriptコンパイル環境準備 ■既存ファイルをTypeScriptに置き換える ■TypeScriptへ変換したコードを動かしてみる ■作品紹介 ■最後に ■参考 (adsbygoog…

2021/11/21 18:08

PythonでC、C++で作成した動的ライブラリを読み込み

先日、Linux環境にてC++で動的ライブラリ作成方法についてまとめました。 ライブラリ化したコードをC++でリンクすれば使用したいコードがすぐに使えるのですが、 使用していてふと、、、 pythonなど他の言語で動的ライブラリを読むことは出来ないのだろうか？？🤔 と思い、調べてみました。今回はPythonで動的ライブラリを読み込んでみたいと思います。 ■前提条件 ■C言語で作成した動的ライブラリをPythonで読み込んでみる ■C＋＋言語で作成した動的ライブラリをPythonで読み込んでみる ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).…

2021/11/18 23:35

nodejsでパスワード付き圧縮ファイルを生成し、サーバーから送信してみる

前回、http requestを受けてからzip圧縮ファイルを生成しフロントエンドに圧縮したzipファイルを送信するまでを実施しました。 elsammit-beginnerblg.hatenablog.com今回はzip圧縮だけではなくパスワードを付けて送信してみたいと思います。 ■環境 ■パスワード付き圧縮ファイル生成コード その1 ■パスワード付き圧縮ファイル生成コード その2 ■requestに応じてパスワード付き圧縮ファイル生成しresponseするコード ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境 前…

2021/11/14 18:37

nodejsでzip圧縮してみる

先日、nodejsでzipやtar圧縮ファイルをサーバーからフロントへダウンロードしてみました。 elsammit-beginnerblg.hatenablog.com今回はサーバーサイドにてzipファイルを圧縮してみます。 自分で圧縮したzipファイルをダウンロードするまでのコードを作成してみます。 ■環境 ■サーバーサイドでzipファイルを圧縮する。 ■zipファイル圧縮したデータをダウンロードしてみる ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境 今回も前回と同様にラズパイをサーバーと見立て、PCから指示を…

2021/11/12 22:40

zipやtar.gzなどの圧縮ファイルをサーバからhttpで送信する方法

今回は圧縮ファイルをhttpでサーバからフロントエンドに送信するための方法に関してまとめます。ふと、フロントエンドからファイルを指定してアップロードは行えるけど、 圧縮ファイルをサーバーからフロントエンドに送信する方法ってどうやるんだろう？？ と思い、調べてみました！！ ■環境 ■zipファイル送信用サーバーサイドの実装 ■tar.gzファイル送信用サーバーサイドの実装 ■(補足)他の書き方 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境 今回、下図のようにラズパイをサーバーと見立て、 PCからzipファイルやta…

2021/11/08 23:21

Linux環境にてC++で静的ライブラリ、動的ライブラリを作成する方法に関して

Linux環境で静的ライブラリを作成して運用する機会があったのですが、、 恥ずかしながら今まで静的ライブラリを自作したことがなく、少し困ってしまったので備忘録で残したいと思います。。今まで実行ファイルは何度も作成しており、静的ライブラリをリンクさせたことはあったのですが、 いざ作成するとなると、、困ってしまった感じです。恥ずかしい。。 ■環境 ■静的ライブラリ作成手順 ■Makefileで静的ライブラリを作成 ■動的ライブラリ作成手順 ■動的ライブラリ生成に対するMakefile ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}…

2021/11/03 23:09

疑似的にパスワード付きtar.gz圧縮ファイルを作成してみる

今回は暗号化技術を用いてtar.gz圧縮させたフォルダにパスワードをかけ、第3者が見れないようにしたいと思います。 ちょっと圧縮ファイルにパスワードを付与しなければならない機会があったのですが、、、 zip化したファイルのパスワードは簡単に見つかったのですが、tarだと見つけるのに苦労しました。。 今後困らないように、備忘録として残しておきたいと思います！！ ■環境 ■パスワード付きtar.gz圧縮ファイルの作成方法 ■パスワード付き暗号化tarファイルを解凍 ■補足 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境…

2021/10/31 10:48

WindowsとLinuxにて再帰的にSHA256でハッシュ値を算出してみる

今回は少し毛色を変えて、SHA256でハッシュ値を求めたいと思います。 ■SHA256とは？ ■LinuxにてSHA256でハッシュ値を求めてみる ■WindowsにてSHA256でハッシュ値を求めてみる ■フォルダ内ファイルに対して再帰的にハッシュ値を算出する ■Windowsでの注意点 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■SHA256とは？ SHA256とは、任意の長さの原文から固定長の特徴的な値を算出するハッシュ関数の1つです。 どんな長さの原文からも256bitのハッシュ値を算出することが出来る。下記…

2021/10/28 23:04

VirtualBox上のUbuntu20.04で音声を出力

Linux系のOSで音声出力させたいことがあったのですが、 Raspberry Piやjetsonだとスピーカー接続させるのが面倒だな。。 と思い、VirtualBox上でUbuntuを動かし、そこで音声を出すことにしました。しかし、そのままの設定では音声が出力されず困ったので 今後のための備忘録として手順をまとめることにしました！！ ■Virtual Box上の設定 ■Ubuntu20.04上の設定 ■音声出力されるか確認 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■Virtual Box上の設定 まずはVirtu…

2021/10/24 09:05

windowsのコマンドプロンプトでLinuxコマンドを使いたい!!(alias登録手順)

WindowsとLinuxのコマンドプロンプトで使えるコマンドって結構違うんですよね。 よく使うコマンドとして、 lsと dir仕事やプライベートでWindowsとLinuxを行ったり来たりすることが多く、いつも間違ったコマンドを打って怒られる日々。。。 特に自分はコマンド入力はLinuxの方が慣れているのでWindowsでlsと打って結構頻繁に怒られる。。。毎度OSを意識してコマンド切り替えると面倒！！ ということで、慣れているLinuxコマンドをWindowsで実行出来ないか考えたのですが、 aliasを使えばよくね？？となり、Windowsでaliasの設定方法を確認しました！！今回は備…

2021/10/21 22:38

initramfs再作成手順

今回は少し毛色を変えて、Linuxのinitramfsの再構築手順についてまとめたいと思います。 ちょっとinitrdを変更する機会があったのですが、久しぶりに触ることになったので忘れてしまっていたんですよね。。 また一から調べ直しているような状況だったので、今後は困らないように。と思いまとめることにしました！！ ■環境 ■initrdの展開手順 ■initramfs再作成手順 ■initramfs内を閲覧するだけなら ■(補足)initrdとinitramfsの違い ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境…

2021/10/17 09:43

javascriptでtableタグ内にinputタグを追加する

今回はjavascriptでList内にbuttonなどのinputタグを追加する方法についてまとめたいと思います。htmlで記載されたタグを操作する際には、 documentオブジェクトを使用するかと思います。 自分もよく表示内容を切り替えたり属性(Attribute)を切り替えたりするのに使用するのですが、 ある日作業をしている最中に、 documentオブジェクトを使用して別タグを追加するにはどうすればいいのだろう？？ と躓いてしまいました。今回は今後のために備忘録として残しておきたいと思います。 ■(おさらい)documentオブジェクトの基本操作 ■tableタグ内にinputタグを…

2021/10/14 21:41

PyAutoGUIをsshで実行するには

先日よりマウスやキーボード操作を自動化してきました。 その時に用いているのがPyAutoGUIなのですが、、 ラズパイに対して、ssh上でPyAutoGUIで作成したコードを実行したところ、 KeyError: 'DISPLAY'というエラーが発生し、実行が行えませんでした。今回は上記を解消し、 ssh上でPyAutoGUIを実行するための方法を備忘録としてまとめたいと思います。 ■環境 ■エラー発生原因 ■解決方法 ■Robotgoはどうか？ ■環境変数DISPLAYとは何か？ ■補足 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).pus…

2021/10/10 10:10

Robotgoでgo言語で自動化

先日、Robotgoを用いた自動化する方法に関してまとめました。 elsammit-beginnerblg.hatenablog.com今回はこちらの続き。 画像認識やマウス・キーボード入力イベントの取得方法についてまとめたいと思います。 ■マウス・キーボードイベント取得 ■画像認識方法 ■クロスコンパイル方法 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■マウス・キーボードイベント取得 では早速、マウスやキーボードの入力イベントを取得する方法をまとめます。 こちらはユーザが操作したマウスやキーボード操作を記憶するのに…

2021/10/07 21:44

go言語で自動化してみる

先日よりPythonを用いてキーボードやマウス入力を自動化の方法をまとめてきました。 elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.com実際に使って見て便利な点が多いのですが、、、 Python以外にも自動化させる方法はないのか？？ と疑問を持ち、他の言語で自動化する方法について調べてみました。そこで、go言語であれば自動化を行うためのライブラリが存在することを発見！！ 試しに使ってみることにしました！！ ■ライブラリの紹介 ■環境…

2021/10/03 09:58

pyinstallerでopencvを含めた実行ファイルを作成するには

先日よりマウスやきーぼード入力を自動化したいと思い、PyAutoGuiを用いた自動化にチャレンジしてきました。 elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.com 作成した環境を別PCでも自動化で使用したいな！！ と思い、pyinstallerで実行ファイル化することにしました！！そこで早速実行してみました。 pyinstallerにより生成された実行ファイルを別PCで実行してみたところ、 マウスやキーボードの入力は問題なく動作した…

2021/10/01 22:18

PythonでExcel読み込みや編集を行う

先日PythonでExcelシートを作成の上、グラフを作成・出力する方法をまとめました。 elsammit-beginnerblg.hatenablog.com今回は書き込みとは新規作成とは逆にExcelファイルの読み込みに関してまとめていきたいと思います。 さらに、読み込んでいるファイルに対する追記もまとめます。 ■環境構築 ■Excelファイル読み込み ■Excelファイルへの追記 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境構築 今回も前回と同様に、openpyxlを用います。 openpyxlに関しては前…

2021/09/26 17:41

Pythonを用いて画像認識で操作を自動化してみる

先日から操作の自動化方法について調べて試してみたりしています。 elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.com今回はあらかじめ用意した画像を認識し、画像を手掛かりに操作を自動化する方法についてまとめていきます。 今回も用いるライブラリはPyAutoGUIです。自動操作を行う上でPyAutoGUIは便利ですね。 ■環境構築 ■画像認識を組み合わせて操作を自動化 ■画像認識を用いてディスプレイ上の操作が正しいかチェック ■最後に ■参考 (adsbygoogle = window.adsbygoogle…

2021/09/23 09:29

Pythonでマウス操作自動化

先日Pythonでキーボード操作自動化の方法をまとめてみました。 elsammit-beginnerblg.hatenablog.com今回はマウス操作自動化方法についてまとめていきたいと思います。 ■環境構築 ■マウス操作自動化 ■その他のAPIに関して ■マウスの位置を調べる方法 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境構築 先日のキーボード自動化と同様に、 PyAutoGUI を用います。 PyAutoGUIは下記でインストールできます。 pip install pyautoguiまたPythonのバー…

2021/09/19 18:27

Pythonでキーボード操作自動化

最近同じような操作しているな、と思ってきました。 ちょっとこの操作を自動化出来ないかな？と思い立ち調べてみたところ、 Pythonでキーボードやマウスを自動で入力する方法を発見！！ 流石Python！！ということで、今回はPythonを利用してキーボードを自動入力する方法を備忘録としてまとめようと思います。 ■環境準備 ■キーボード入力自動化 ■その他のキーボード自動入力コマンド ■対応キーボード文字名 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境準備 ではまずは環境を構築していきます。 用いるPythonのバー…

2021/09/16 21:44

PythonでExcel操作 シート追加と削除についてまとめてみる

先日、データをPythonを用いてexcel化する方法をまとめました。 elsammit-beginnerblg.hatenablog.comこちらの方法でexcel化してデータをグラフ化しているのですが、 ちょっとデータの種類が増えてきたことに伴い、シート1枚では管理が難しくなってきました。。そこで今回は別シートを作成したり、無駄なシートを削除する方法に関してまとめていきたいと思います。 また、後で何のシートなのかが分かるようにシート名を追加する方法も載せておこうと思います。 ■環境構築 ■Excelシートを追加してみる ■Excelシートを削除してみる ■シートに名前を付ける ■最後に ■…

2021/09/12 11:08

PythonでgRPCを試してみる

今回はPythonでgRPCを試してみたので備忘録をまとめておこうと思います！！ ちょっとgRPCを使うことになったのですが、少し理解できなかったところもあったので試しに動かしてみた感じです。 ■gRPCとは？ ■PythonでgRPCを使うための環境構築 ■gRPCサービス定義していく ■サーバーサイド実装 ■クライアントサイド実装 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■gRPCとは？ gRPCはクライアントアプリケーション内のローカルオブジェクトであるかのように、 別マシンに存在するサーバーアプリケーション…

2021/09/09 23:04

webブラウザ上にjetsonのデスクトップ画面を表示・操作してみる

今回はjetsonのデスクトップ画面をwebブラウザに表示させるための環境構築について備忘録としてまとめておこうと思います！！ ちょっと環境構築にハマってしまった点があったので。。 ■環境 ■準備 ■Webブラウザ上で遠隔操作を行ってみる ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境 今回はjetson nanoを用いて環境構築を試みました。 ただ、Linux環境であれば適用できるかと思います。 ■準備 webブラウザ上にデスクトップ画面を表示・操作するにあたり、 ・VNC Server ・noVNC を用いてい…

2021/09/05 17:50

オフラインでjQueryやChart.jsを用いるために

先日、PythonのFlaskを用いてサーバのCPU使用率やメモリを可視化するWebアプリを作成してみました。 elsammit-beginnerblg.hatenablog.comこちらを用いて監視作業を行っているのですが、 外部ネットワーク環境に接続せず、ローカル環境でも使用するケースが発生！！先日のコードですと、jQueryやChart.jsが下記の通り 外部より取得・利用しているので外部ネットワークに接続していないと動かない！！ <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js…

2021/09/02 22:25

pythonで複数枚の写真からスライド動画を作成

今回は複数の写真をつなぎ合わせ、スライドショーのような動画を作成していきます。 写真だけ眺めていてもちょっと味気なくなってきたのでスライドショーを作成することにしました！！ さらに、ただ写真がスライドショー形式で表示されても、、、なので、 作成したスライドショーに音楽も追加してみました！！今後も何かで使えそうな技術なので備忘録として残しておこうと思います。 ■環境準備 ■複数枚の写真から動画を作成 ■MoviePyは動画生成が遅い？ ■動画に音楽を付与する ■作成してみた ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■…

2021/08/29 15:32

pythonでグラフ付きエクセルファイルを自動出力

最近取得したcsvファイルからexcelファイルにコピーしてグラフ化して報告することが多くなってきた。 面倒なので自動化出来ないのかな？？と思い調べてみたところpythonを用いれば結構簡単にexcelにデータの書き込みとエクセル出力できることを発見！！ 早速実施してみると、本当に簡単！！ 今回はこちらの方法を備忘録としてまとめていきます！！ ■環境構築 ■openpyxlで各セルにデータを書き込む ■openpyxlでグラフを作成する ■実行結果 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境構築 今回用いるpy…

2021/08/26 23:17

Chart.js で横軸を動的に指定して範囲を変更していく

今回はChart.jsで横軸のスケールで自動で動かす方法についてまとめておきたいと思います。 前回のブログの最後に後でまとめていきます。と記載した内容です。 elsammit-beginnerblg.hatenablog.com ■Chart.jsで横軸範囲を指定する ■横軸を動的に動かしてみる ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■Chart.jsで横軸範囲を指定する まずはChart.jsで横軸を指定する方法に関してまとめていきます。 Chart.jsで横軸を指定するには、optionタグのticksを指定…

2021/08/20 23:02

サーバのCPU使用率やメモリ使用率監視Webアプリ作成

先日、PythonでCPU使用率やメモリ資料率を監視するためのアプリを作成してみました。 elsammit-beginnerblg.hatenablog.com今回は、こちらのアプリを改造してWebアプリを作成！！ これでネットワークが接続された環境であればどこでもサーバの監視・管理ができます！！ ■環境 ■完成形 ■Webアプリ(サーバサイド編) ■Webアプリ(フロントエンド編) ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境 前回と同様にPythonのバージョンは、 Python 3.7.3 とします。また、…

2021/08/12 21:45

Pythonでリソース管理を行ってみる

今回はCPU使用率やメモリ使用率などのチェックを行うためのコードに挑戦してみたいと思います！！ 目指すは、サーバー上のリソースを監視できるWebアプリの作成です！！今回はPythonでどのようにリソースを監視すればよいのか？ 方法をまとめておこうと思います！！ ■環境 ■Pythonでリソースチェックする方法 ■psutilでシステム使用率をチェックしてみる ■グラフ化してみる ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境 冒頭やタイトルで記載した通り、Pythonを用いていきます。 Pythonのバージョンは、…

2021/08/08 15:24

React for文内でonClickを定義する

約1年前、Reactでモグラたたきを作成しました。 elsammit-beginnerblg.hatenablog.com久しぶりにこちらのコードを見たのですが、、、 ちょっと汚い、、いやちょっとではない！！かなりだ！！ ということでコード修正・整理を行いました。コードを修正していたところ、モグラたたきのマップ作成のコードがこんな感じになっていました。。。 ちょっとこれは。。 <table> <tbody> <tr> <td><img id="Mas1" src={shibafu} alt="green" onClick={() => this.onClick("Mas1" )} /></td…

2021/08/05 22:52

C++でxml形式のファイルを扱う

先日、json形式のファイルを読み出し・パースする方法を備忘録として掲載しました。 elsammit-beginnerblg.hatenablog.com今回はC++でxml形式のファイルを読み出し・パースを行ったりデータをxmlファイルで出力したりしたいと思います。 ■環境・準備 ■libxmlを用いる上での注意点 ■利用するxmlデータ ■xmlデータを読み出し・パース ■xmlファイル出力 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境・準備 C++でxmlデータをパースするにあたり、 libxml を用いる…

2021/08/01 11:53

一部上場企業の住所を元にMap上にプロットしてみた

先日ご紹介しました通り、foliumを用いることで緯度・経度情報をMapにプロットが行えます。 elsammit-beginnerblg.hatenablog.com緯度・経度は無料のAPIを用いれば住所から取得できます。 elsammit-beginnerblg.hatenablog.comこれらの手段を用いて、 東証一部上場企業の住所からMap上にプロットしてみました！！ 世間では東京一極集中という話を聞きますがどうなのでしょうか？ ■東証一部上場企業リスト ■使用言語 ■会社名から住所情報を取得 ■実行結果 ■最後に ■参考 (adsbygoogle = window.adsbygoog…

2021/07/29 23:01

C++でプレースホルダを利用したsql文作成(sqlite3)

先日C++でsqlite3を用いてDBを操作してみました。 elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.comこちらのブログでは実行するsql文を下記の通りべた書きで記載していました。 char sql2[30] = "select * from huga;"; sqlite3_prepare_v2(db, sql2, strlen(sql2), &stmt, NULL);ですが、sql文を作成するにあたり変数を用いたい場合があるかと思います。 今回は、sql文を生成させるにあたり変数をどのように与えれ…

2021/07/25 15:09

緯度・経度情報からMap上に位置をプロットしてみる

先日住所から緯度・経度情報を収集する方法をまとめました。 elsammit-beginnerblg.hatenablog.com緯度・経度を取得出来ても数値だけだと、どこなのかピンときませんよね。。。 googleMapで緯度・経度を入力すれば地図上にピンが立って分かりやすいですよね！！今回は取得した緯度・経度情報から自動でピンを立てて、地図上で分かりやすく表示させてみたいと思います！！ ※今回も前回と同様にGoogle Mapは利用しない方法で実現させてみたいと思います。 ■環境 ■前提条件 ■foliumを用いたMap上へのプロット ■住所リストからMap上にプロットをしてみる ■最後に …

2021/07/23 16:51

C++でjsonデータを取り扱う

今回はC++でjsonデータを取り扱ってみたいと思います。 簡単なcsvデータ(カンマ区切りのみ)であれば文字列をparseすればよいだけなので簡単なのですが、 jsonデータってどうやればよいのだろう？？ と気になったので調べてみました！！今回は調べて動かした内容の備忘録をまとめたいと思います。 ■jsonデータを扱うためには？ ■json型の文字列をjsonオブジェクトに変換 ■jsonオブジェクトを文字列に変換 ■jsonファイルからjsonデータを読み出し・取り扱い ■ビルド時のwarning対応 ■最後に ■参考 (adsbygoogle = window.adsbygoogle …

2021/07/17 20:52

csvファイルにまとめた住所情報から緯度・経度リスト出力(csv出力)

先日、国土地理院APIで住所から緯度・経度を取得する方法をご紹介しました。 elsammit-beginnerblg.hatenablog.comこちらの記事の最後にcsvファイルからまとめた住所データから緯度・経度を出力するコードを載せたのですが、 今回はこちらのコードについてブログにてご紹介していきたいと思います。 ■環境 ■条件 ■コード紹介 ■コードの使い方 ■最後に (adsbygoogle = window.adsbygoogle []).push({}); ■環境 前回の記事と同様に今回も使用するのはpythonです。 pythonのバージョンはPython 3.7.3です…

2021/07/14 22:52

国土地理院APIで住所から緯度・経度を取得(ジオコーディング)

今回は住所から緯度・経度を取得する方法をまとめていきたいと思います。 ■Google Maps APIの有料化 ■API仕様のチェック ■環境 ■国土地理院APIで住所から緯度・経度を取得 ■コード紹介 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■Google Maps APIの有料化 すでに皆さんご存じの通り、Google Maps APIが有料化しました。。 有料化といっても、無料枠も用意されておりAPIコール数が数千程度であれば無料の範囲で利用できます。 また、使用制限を掛けることも出来るみたいなので無料枠の範…

2021/07/11 12:29

gtkmmでwindow位置を可変にする方法

今回はgtkmmでwindowの位置を変更する方法についてまとめていきたいと思います！！ 位置を指定してwindowをいくつか座標を指定して配置したい時などに使用できるかな？と思います。 ■条件 ■windowを準備 ■windowの位置を指定する ■(おまけ)座標の動的指定について ■まとめ ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■条件 今回gtkmmでwindowの位置を指定するにあたり、windowのレイアウトはgladeというデザイナーを用います。 gladeの導入方法やgtkmmとの連携方法についてはこちらにまと…

2021/07/07 23:53

pythonでグーグル翻訳を利用し英語字幕を日本語字幕に変換してみる

先日動画に字幕を付ける方法をまとめました。 elsammit-beginnerblg.hatenablog.comただ私がやりたかったことは英語字幕を日本語字幕にすること！！ そもそも字幕付与を行おうと思った理由が英語音声で公開されているCourseraを日本語字幕で閲覧したかったからなので。 ということで、今回はグーグル翻訳を利用して英語字幕を日本語字幕に変更してみたいと思います！！ ■前提条件 ■pythonでgoogle翻訳 ■英語字幕ファイルを日本語に翻訳 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■前提条件…

2021/07/03 17:19

pythonで動画に字幕を付ける方法

現在オンライン講義Courseraを利用(聴講)して1から勉強中なのですが、、 Courseraは日本語の講義が全くない！！ 一応字幕機能もあるのですが、、、 ・動画欄の下に字幕文章欄が付いている形式なので動画を見ながら受講しにくい ・そもそも字幕も日本語対応しているものが少ない といった問題が。。。自分は英語が苦手なのでどうしたものかと悩んだ結果、 ”自分で日本語字幕を動画につける！！” こととしました。今回はこちらの字幕付与方法についてまとめておきたいと思います。 ※字幕を英語⇒日本語に変換する方法はまた後程まとめます！！ ■前提 ■.vtt形式って？ ■動画に字幕を付けてみる ■mkvフ…

2021/06/27 16:23

html+javascriptでxmlファイルをjsonデータへjsonデータをxmlファイルに変換

前回まででjsonファイルの読み込みやcsvファイルの読み込み、 csv⇔jsonデータの変換を行ってきました。 elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.com今回は最後で、xmlファイルを読み込みjsonデータに変換したり、jsonデータをxmlファイルに変換させてみたいと思います。 json⇔xmlの変換はこちらを用いれば簡単にできそうですが、、、 http://goessner.net/download/prj/jsonxml/ライセンスがGPLでしたので、、あえて自分で作ることにしました！！…

2021/06/23 23:06

html+javascriptでcsvファイルをjsonデータへjsonデータをcsvファイルに変換

先日、javascritptでjsonファイルを読み出したり、書き出す処理についてまとめました。 elsammit-beginnerblg.hatenablog.comこちらのファイル読み込み・出力を行うにあたり、 json⇔csv、 json⇒xml、 xml⇒csv、 と変換できるツール的なものが作成できれば面白そうだな。 と思い作成を進めております。今回は、 json⇔csv のパターンである、jsonファイル⇒csvファイルに変換したりcsvファイル⇒jsonファイルに変換する方法についてまとめたいと思います。 ■前提について ■csvファイルからデータを読み出してjsonデータに変換…

2021/06/20 22:12

html+javascriptでフロントエンドにてjsonファイルの読み込み・書き出し

前回まで動画や画像処理について備忘録まとめてきましたが、 今回は打って変わってjavascriptでのjsonデータやjsonファイルの取り扱いについてまとめていきたいと思います。ちょうどjsonファイルを取り扱ってデータ管理する必要があったのですが、 アプリを作成すると配布するのが面倒だったのであえてhtml+javascriptでやってみることにしました！！ ■使用するjsonデータ形式 ■jsonファイルを読み込む ■jsonデータをjsonファイルとして出力する ■おまけ ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}…

2021/06/16 23:22

OpenCVでのマウスによるエリア指定方法

今回はOpenCVでマウスイベントを取得する方法とマウスクリックした位置を取得してエリア指定する方法をまとめていきたいと思います。 マウス操作で領域切り出しを実施してみたかったので、知れて良かった！！ ■環境 ■マウスイベント取得 ■選択した領域で囲う ■最終的なコード ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境 ・OS：WIndows10 ・プラットフォーム：anaconda ・言語：Python ■マウスイベント取得 まずはOpenCVにてマウスイベントを取得する方法です。 コードはこちら。 import …

2021/06/10 23:26

連番画像を動画化してコマ撮り映像を作成してみた

先日こんな記事を発見！！ note.comさっそく妻に "コマ撮りしてみないか？" と誘ってみたところ、 "昔やってみたけどうまく行かなかった。" "ただ興味はあるから協力してくれたらやる！！" とのこと。こんなご時世なのでお外に出づらいこともあり、 休日のお家時間として作業を行うことにしました！！と言っても、、、 ・妻：コマ撮り画像を作成 ・私：画像を動画化 の分担となり、ほとんど私は何もしなかったのですがw。動画作成後日談は別ブログに載せるとして、、、 こちらでは連番画像を動画化した時のコードを載せておきたいと思います！！下記画像はコマ撮り映像に使用した画像です!! ■環境 ■連番画像の作…

2021/06/07 21:46

Flask 動画アップロード方法

前回、Flaskでの動画再生アプリや、 elsammit-beginnerblg.hatenablog.comYoloで物体検知が行える動画再生アプリを作成しました。 elsammit-beginnerblg.hatenablog.com今回はFlaskでの動画アップロード機能を追加して、自分の持っている動画をWeb上で物体検知させて遊んでみたいと思います。 ■前提 ■アップロード機能追加(フロントエンド) ■サーバサイド ■動かしてみる ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■前提 今回は前回の "Yoloによ…

2021/06/03 23:02

sqlite3でDBを操作してみる(C++編) ～～続き～～

先日C++でsql文を利用使用してDB操作する方法をまとめましたが、 データ挿入まででデータ閲覧までは記事に載せきれませんでした。 elsammit-beginnerblg.hatenablog.com今回はデータ閲覧方法についてまとめていきたいと思います！！ ■sqlite3操作(データベースからデータを取得) ■prepared_statementを使用してデータを取得する ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■sqlite3操作(データベースからデータを取得) では引き続きデータ取得方法をまとめていきます…

2021/05/30 11:05

sqlite3でDBを操作してみる(C++編)

以前sqlについて簡単にまとめました。 今までnodejsやpython、go言語などでsqlを用いてDBの操作したことがあったのですが、 CやC++でsqlを利用したことがなかったので今回使ってみました！！ elsammit-beginnerblg.hatenablog.comちょっとばかしクセのある使い方だったので備忘録として残しておこうと思います。 ■環境構築 ■sqlite3操作(データベースを開く) ■sqlite3操作(テーブルを作成する) ■sqlite3操作(データを挿入) ■sqlite3操作(テーブル有無チェック) ■最後に ■参考 (adsbygoogle = windo…

2021/05/29 12:53

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

Webアプリや作品を公開するのにサーバが欲しいな！！と思っていたのですが、 遊びでサーバをわざわざ契約するのもな。。。と悩んでおりました。。。そんな時、TwitterでWeb作成やWeb開発されている方が「xfree」をお勧めしており、 どんなものか？？ と調べてみたところ制限はありますが無料で使用できるとのこと！！ 自分が欲しいレベルではあったので早速使用してみることにしました。 ■xfreeとは？ ■xfreeでのPHP・MySQLサーバー機能を利用するまでの手順 ■PHP・MySQLサーバー機能を使ってみる ■VSCodeでftpサーバーとの同期手順 ■最後に ■参考 (adsbygoo…

2021/05/25 22:54

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

前回、Yoloを用いて画像に対する物体検知を行いました。 elsammit-beginnerblg.hatenablog.com今回はこちらのYoloによる物体検知と以前作成したWebアプリを組み合わせ、動画再生中に物体検知するWebアプリを作成していきたいと思います。 ■条件 ■環境 ■試しにyolov3-tf2で動画再生時の物体検知を行ってみる ■Webアプリ作成(フォルダ構成) ■Webアプリ作成(コード修正) ■Webアプリを動作させてみる ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■条件 すでに動画再生アプ…

2021/05/19 23:21

Raspberry PiにYOLOをインストールし物体検知してみる

今回はラズパイでYoloを使用して物体検知をしてみたいと思います！！結構環境構築に手こずったところがあるので、こちらも備忘録として残して置ければと思います。 ■環境構築手順 ■tensorflow2-yolo-v3を利用して物体検知してみる ■実行結果をまとめてみる ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境構築手順 今回下記tensorflow2-yolo-v3を利用して物体検出を実施いたします。 https://github.com/zzh8829/yolov3-tf2.githttps://github.…

2021/05/16 10:49

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

先日作成した動画再生アプリ作成しました。 elsammit-beginnerblg.hatenablog.comこの際Flaskを用いたのですが、javascriptやcssを変更しても表示上変更されずに苦労したので、対策を備忘録として残しておこうと思います。 ■現象 ■対処方法 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■現象 javascriptやcssを変更しても表示上変化しない。 ブラウザキャッシュが原因で、ブラウザキャッシュをクリアすれば変更後の状態が反映される。 ファイル変更後の動作確認時毎回ブラウザキャ…

2021/05/13 22:24

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

先日OpenCVを用いた動画再生や逆再生、早送り等を実装してみました。 elsammit-beginnerblg.hatenablog.com今回はFlaskを用いてこれら逆再生や早送りなどが実装されたWebアプリについてまとめていきたいと思います！！ ■完成形 ■最終コード ■フォルダ構成 ■Flaskでの動画表示 ■動画早送り・巻き戻し機能追加(バックエンド) ■動画早送り・巻き戻し機能追加(フロントエンド) ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■完成形 完成したアプリはこちらのようになります。 ■最終コー…

2021/05/10 21:28

FFMPEGでmp4動画から音声抽出

最近またOpenCVを触って楽しんでおりますw。 OpenCVは色々出来て面白いですね！！ ですが、動画で遊んでいるとどうしても音声も触りたい欲が強くなってしまうのですよね。。。ということで今回は音声関係について少し触れていきたいと思います。 内容は、mp4動画から音声抽出の方法です。 ■事前準備 ■mp4動画から音声を抽出 ■動画の情報を調べてみる ■(おまけ)動画から音声のみ削除 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■事前準備 題名にも記載しました通り、今回はFFMPEGを用いてmp4動画から音声を抽出しま…

2021/05/08 09:21

OpenCVで特定時間から動画再生や早送り・巻き戻し

OpenCVで動画再生方法の記事はいくつか投稿していたのですが、 そういえば、初めから再生させる方法しか知らなかったな！！と思い調べてみました！！ 今回は忘れないように備忘録として残しておこうと思います。 ■環境 ■動画の途中から再生する方法 ■動画早送り ■動画巻き戻し ■実際に動かしてみる ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境 ・使用言語：Python3 ・OS：WIndows(anaconda) ■動画の途中から再生する方法 OpenCVで動画の途中から再生する方法ですが、 再生したいフレーム番号(…

2021/05/03 22:57

Gtk# + OpenCVSharpでGUIアプリにて動画再生

前回、GtkSharp + OpenCVSharpを用いてGUIアプリに画像を表示してみました。 elsammit-beginnerblg.hatenablog.com今回はGtkSharp + OpenCVSharpで動画再生させてみたいと思います。 ■条件 ■GtkSharp + OpenCVSharpで動画再生してみる ■ボタン押下による動画再生 ■注意 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■条件 今回の条件ですが下記になります。 ・OS：Ubuntu20.04 ・dotnet：.NET 5.0今回は、 …

2021/04/28 23:24

GtkSharp(Gtk#) + OpenCVSharpでGUIアプリに画像を表示

前回OpenCVSharpをdotnetに導入するまでの手順をまとめました。 今回はdotnetで生成したGtkSharp + OpenCVSharpでWindowアプリケーション上に画像を表示させてみたいと思います！！分かると簡単なのですが、結構ハマったところなので忘れないように備忘録残しておこうと思います。 ■条件 ■GtkSharp + OpenCVSharpで画像を表示 ■実際に動かしてみる ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■条件 今回の条件ですが下記になります。 ・OS：Ubuntu20.04 ・…

2021/04/24 11:23

dotnetでOpenCvSharpを導入してみる

半年ぐらい前、dotnetでGtk#にてGUIの作成を行う記事を公開しました。 elsammit-beginnerblg.hatenablog.comそこで下記のようなコメントを残していたのですが、、、 やれておりませんでした。。。 - ここまでは出来たのですが、OpenCVとの連携が出来ていないです泣 どうやるのかな？？ 最終的にはOpenCVと連携したいので、もう少し調べてみます。 また分かったらブログにて備忘録残しておこうと思います！！ - 今回、dotnetでOpenCvSharpをインストールする方法とGtk#との連携方法をまとめたいと思います。 ■環境 ■dotnetでGtk#を用…

2021/04/18 21:59

pandasで2次元配列データを加工する

Kaggleを行う上で用意されているデータの加工は重要なファクターになります。 ですが、Kaggleで用意されているデータは穴が抜けていたり、文字列データであったりと扱いにくい場合が多々あります。今回はこのような扱いにくいデータを加工する手段についてまとめておこうと思います。 ■条件 ■穴抜けデータの存在確認 ■穴抜けデータの保管 ■文字列の要素を数値に置き換える。 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■条件 今回はすでに応募が終了している、 bnp-paribas-cardif-claims-manageme…

2021/04/15 21:46

ポケモンステータスからタイプを識別してみる Keras編

先日までkerasで2値や多値分類を行ってきました。 elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.com今回はkerasでポケモンのステータスからタイプを分類してみたいと思います。 このタイプ分類ですが、すでにロジスティック回帰などで実施していますが、 kerasだとどれだけ性能が上がるのか確認したく実施してみました！！ elsammit-beginnerblg.hatenablog.com ■利用データ ■分類内容 ■データ加工 ■kerasによるポケモンタイプ分類 ■最後に ■参考 (adsbygo…

2021/04/08 23:55

Kerasでkaggleの問題を解いてみた

先日、Kerasについてまとめてみました。 elsammit-beginnerblg.hatenablog.com今回はKerasを用いてkaggleで掲載されている問題を解いてみたいと思います！！ 解いていく問題ですが、 ・Titanic - Machine Learning from Disaster ・Otto Group Product Classification の2種類です。 ■Titanic - Machine Learning from Disasterを解いてみる ■Otto Group Product Classification ■最後に ■参考 (adsbygoogl…

2021/04/06 22:33

Keras基礎をまとめてみた

kaggle挑戦中のElsammitですw 機械学習超初心者ですw今回はKerasって何？から基礎的な部分をアヤメの分類を例にまとめてみました！！ ■Kerasとは？ ■Kerasを試してみる ■kerasでアヤメを分類 ■(補足)SGDとは？？ ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■Kerasとは？ Kerasとは、TensorFlow上で動くニューラルネットワークの1つです。 Kerasを使用するとディープラーニングのベースとなる数学的な部分を気にせずとも比較的短いソースコードで実装することが出来るようにな…

2021/04/01 22:46