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

今年も残すところ後1日になりました。 今年はありがとうございました！！来年もよろしくお願いいたします！！今年はコロナに振り回された1年でした。。。 来年は終息し、平穏な一年になることを切に願います！！一足早いですが、おみくじアプリを作成しましたので、紹介です！！ 来年の運勢を占うために使って見てください。 ■作成したおみくじアプリ ■ソースコード ■画像に回転アニメーション付与 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■作成したおみくじアプリ こんな感じになりました！！ アプリについてはこちらに公開しましたので、来…

RaspberryPiでのUbuntu20.04 サーバー起動

今回はRapspberryPiでのUbuntu20.04を起動させるまでの手順を紹介いたします。 ■実施理由 ■環境 ■ubuntu OSダウンロード ■使ってみた感想 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■実施理由 Raspberry Piに対して一般的にはRasberryPi OSをμSDに書き込めば簡単に環境構築が可能なのですが、 arm版のパッケージを調達して動かしてみたいな！！と思い、 調べてみたところ見かけたのでちょっとやってみました！！【RasberryPi OS】 https://www.ras…

Reactでバトル画面を作成

前回マップ画面の作成とキャラクターの操作を実施してみました。 elsammit-beginnerblg.hatenablog.com今回はバトル画面の作成を行ってみましたので、その報告です！！ ※技術の備忘録は少なめ(というかほとんどない)です。 ■環境 ■完成結果 ■コード紹介 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境 ・ubuntu16.04(VirtualBox上) ・React：17.0.1 ・react-router-dom：5.2.0※react-router-domはマップ⇔バトル画面間の遷移の…

ReactでRPGマップ作成

年末年始のお休みに入り、少し時間が出来ました。 何かReactでアプリを作りたいな？🤔と思い、ちょっとしたRPG作成してみようかな？と思い手を動かしてみました！！基本的にjavascriptでのRPGアプリ作成についてはこちらのサイトに掲載されていたので、流用させていただきましたが、 React固有の部分がありましたのでこちらを中心に載せておこうと思います！！ https://original-game.com/introduction-to-javascript-character-move-on-map/ ■環境 ■完成形 ■マップ表示 ■主人公を移動させる ■まとめ ■参考 (adsby…

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

前回クリスマスを理由に雪を降らせたWebアプリを作成しました。 elsammit-beginnerblg.hatenablog.comこちらのWebアプリに表示させていた画像位置を簡単に変更させたいな！！ 出来れば、マウス操作で位置変更できると便利そうだな！！ と思い、マウス操作で画像位置変更方法を調べてみましたので、こちらをまとめようと思います。 ■環境 ■マウス操作での画像位置移動 ■マウスクリック時のクリック位置に画像移動 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境 今回はこちらの環境で動作させました。 …

Raspberry PiでGPIO制御を行う

今回はいつも調べてしまう、ラズパイでのGPIO制御についてまとめておこうと思います！！ 毎度調べるのも手間なので。。。 ■環境 ■ピン配置の確認 ■コマンドでのGPIO制御 ■動作確認 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境 今回はraspberry Pi 4を用いて動作確認し、そちらの紹介を行っていきます。【国内正規代理店品】Raspberry Pi4 ModelB 4GB ラズベリーパイ4 技適対応品【RS・OKdo版】新品価格￥6,875から(2020/12/26 21:01時点)ただ、raspber…

Reactで雪を降らせてみる

メリークリスマス！！ ただ残念なことに、 コロナウィルスの第3波が来てしまって、遊びに行くことも憚られる状態ですね😢せっかくのクリスマスなのに、、、 例年ならイルミネーションとかきれいなはずなのに😨ということで、クリスマスっぽいWebアプリを作ってみることにしました！！ 作成はReactを用いました！！ ■Reactで雪を降らせる ■メリークリスマスw ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■Reactで雪を降らせる Reactで雪を降らせるにあたり、snow-fallというAPIを用いました。 https://…

OpenCVをの用いた画像処理系まとめてみた

今年も後わずかですね！！ 年を取るにつれて1年が短く感じます。5月から始めたこの技術ブログも結構続いていることに自分でも驚いております！！さて今回は、 今までまとめてきたコードの整理と今後簡単に使えるようにするためにAPI化してみましたので、 その報告です。 ■整理したコード格納先 ■まとめたAPI報告 ■ARマーカーの作成や読み込み ■バーコードの作成と読み込み ■画像データのバイト列変換やバイト列から画像データへの変換 ■ビデオストリーミング用API ■画像重畳やRGB分割用API ■顔や目などの体の一部検知用API ■ビデオストリーミング+体の一部検知用API ■最後に (adsbygo…

カメラキャプチャ画像をバイト列で送受信

前回、Socket通信でやりたいことがあった！！と記載しました。 elsammit-beginnerblg.hatenablog.comそれが、 ”カメラキャプチャ画像をバイト列に変換して送信しストリーミング配信を行ってみる” ことです。 無駄なことだと思いますが、どうしてもやってみたくて調べてみました！！ 問題なく動作させることが出来たので、方法をまとめておこうと思います。 ■環境 ■サーバ側構築 ■クライアント側構築 ■動作確認 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境 今回こちらの構成で動作させてみまし…

pythonでのネットワークサーバ構築とsocket通信

今回はpythonでのtcp通信についてまとめておこうと思います！！ ちょっとやりたいことがあって調べていたので、それをまとめておくことが目的。 ■socket通信とは？ ■環境 ■ネットワークサーバ構築 ■クライアント側構築 ■動作確認 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■socket通信とは？ socket通信とは、サーバとクライアントを仮想的な接続により結んで構成された環境のことを言います。 具体的には、インターネットはTCP/IPと呼ぶ通信プロトコルを利用しますが、そのTCP/IPを プログラムから利…

Reactでアニメーション付きリストを表示

今まで作成したアプリやコードの整理真っただ中！！ 今年中に終わるかな？🤣そこで、以前作成したポートフォリオ(なのか)？？を整理しつつ少しレイアウトを変更したので、 そこで使用したアニメーション付きリストについてまとめていきたいと思います！！ ■事前準備 ■リストへのアニメーション追加 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■事前準備 Reactにてモジュールにアニメーションを付けるために、React Poseを用います。 React Poseはこちらの通り、色々なアニメーションを付与させることができるようになるラ…

Raspberry PiへのGoCVインストール

以前LinuxへのGoCVへのインストール手順についてまとめました。 elsammit-beginnerblg.hatenablog.comこちらの手順を元にRaspberry PiへOpenCVをインストールしようとしたのですが、、、 少しハマったのでハマった箇所や解決策についてまとめておこうと思います！！ ■環境 ■ハマった箇所 ■解決策 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境 ・デバイス：Raspberry Pi 4 ・OS：Raspbian GNU/Linux 10 (buster) ・GoCV：g…

go言語でvl53l0xを使ってみる

以前、vl53l0xで距離測定を行いました。 elsammit-beginnerblg.hatenablog.comどうせなら、go言語でも実施してみたいな！！と思い調べてみました！！ せっかく調べたのでまとめておこうと思います！！ ■使用環境 ■ラズパイへのI2C設定 ■Go言語でのvl53l0x事前準備 ■Go言語でvl53l0xを用いた距離測定 ■困っていること ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■使用環境 用いたデバイスは下記です。 ・ラズパイ4 ・測距センサ測距センサですが、こちらを利用。VL53L…

Go言語 GUIアプリ Fyneへの動画表示

先日Fyneを使用して簡単なGUIアプリを作成しました。 elsammit-beginnerblg.hatenablog.com今回はFyneを利用して動画を表示・再生させるアプリを作成していこうと思います！！ ■環境 ■Fyneへの画像表示 ■動画表示 ■再生・停止ボタン追加(おまけ) ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境 ・OS：Ubuntu20.04(virtualBox上) ※すでにFyneがインストールされていることを前提にします。 ■Fyneへの画像表示 動画表示・再生を行う前にまずは画像の表…

raspberryPiでの仮想ビデオデバイス(/dev/video)の作成

今回は仮想ビデオデバイスを作成して作成したビデオデバイス経由で動画データのやり取りを行っていきます。 動画データのやり取りに用いるのはgstreamerです。 gstreamerについてはこちらにまとめておりますのでぜひ！！ elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.com ■環境 ■事前準備 ■仮想ビデオデバイス作成 ■仮想デバイスを用いた動画表示 ■go言語で仮想ビデオデバイスから読み出してみる ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).p…

go言語 GUIアプリ Fyne導入

今回はgo言語でGUIアプリの作成を行っていきます。go言語のGUIアプリですが複数種類あります。 が、QtやGtkは使ったことがあったので出来れば別の方法が良いな！！ と思い、調べてみたら見つけたので早速使用してみることにしました。 ■動作環境 ■Fyneインストール ■簡単なコード作成 ■簡単なコード作成2 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■動作環境 ・OS：Ubuntu20.04(VirtualBox 仮想環境) ・go version：1.13.08go versionが1.9以下ですと、Fyneは…

画像データをバイト(文字列)データに変換

今回は画像データをバイト(文字列)データに変換する方法についてまとめておこうと思います！！ ■環境 ■画像データをバイト列に変換 ■バイト列から画像イメージに変換 ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境 コードはpythonで書いていきます。 詳細はこちら。・OS Windows10 ・python version：3.4.7 ■画像データをバイト列に変換 変換のコードはこちらになります。 import os import io from PIL import Image import numpy as n…

go言語でカメラ映像配信を受信してみる

前回、gstreamingを用いたrtpでのカメラ映像の配信・受信を行いました。 ですが、前回の方法ですとコマンドベースでの動作でした。 elsammit-beginnerblg.hatenablog.com今度はgo言語でrtpで送信されたデータを受信してみたいと思います！！ go言語でgstreamingを実施するにあたって、gocv用います。 gocvのインストール手順はこちらを参考ください。 elsammit-beginnerblg.hatenablog.com ■環境 ■事前準備 ■動作確認 ■rtp配信動画受信 ■最後に ■参考 (adsbygoogle = window.adsb…

gstreamerでrtp経由でストリーミング

今回はgstreamerでrtp(udp)でストリーミングする方法についてまとめておこうと思います！！ コマンド1つで動画配信できるようなので少しまとめておこうと思います！！ ■環境 ■セッティング ■テスト動作確認 ■カメラ映像について ■gstreamerを用いたrtpストリーミング ■最後に ■参考 (adsbygoogle = window.adsbygoogle []).push({}); ■環境 ・OS：Ubuntu16.04(VirtualBox上) ・カメラ：UCAM-C520FBBKエレコム WEBカメラ マイク内蔵 200万画素 高精細ガラスレンズ ブラック UCAM…

Visual Studio CodeでGo言語 importしたパスが消される

今回はVS CodeにてGO言語を利用した時に自動で消されてしまうimportに対する対応方法について備忘録です。VS CodeでGo言語書いていると保存時にimportしたパスが消えてしまう現象が発生したんですよね。。。 使用していないimportが残っているとビルドエラーになってしまうので、配慮だと思うのですが、 コード作成途中で保存すると使用しようと思っていたimportが消えてしまうので煩わしかったのですよね。。。後、、、 以前ご紹介したバーコードリーダーのzbarが保存すると必ず消えてしまったので、VS Code使えなかったですよね。。ちょっと不便だったし困ってしまうこともあったので…

go言語でバーコードリーダー

今回はgo言語でバーコードリーダーを作っていきたいと思います。 pythonで作成している記事を見つけ、これならgo言語でも出来るかも！！と思い試してみました。 ■開発環境 ■事前準備 ■go言語でバーコード読み取り ■カメラからのバーコード読み取り ■最後に (adsbygoogle = window.adsbygoogle []).push({}); ■開発環境 ubuntu16.04 go言語バージョン：go1.11.5 linux/amd64 ■事前準備 バーコードを読み取るにあたり、zbarを用います。 go言語にはzbarのライブラリが公開されているのでこちらを用いればよいの…