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

Raspberry PIで赤外線アレイセンサを動かしてみる

そろそろデバイス制御系を触ってみようかな？と思っていたところ、赤外線アレイセンサが入手できたのでこちらを使って遊んでみることにしました！！ ■使用構成 ■amg8833使用方法 ■躓いた点 ■最後に (adsbygoogle = window.adsbygoogle []).push({}); ■使用構成 使用した赤外線アレイセンサはこちらです。AMG8833 IR 8 * 8サーマルイメージャーアレイ温度センサーモジュール8x8赤外線カメラセンサー新品価格￥5,100から(2020/10/31 18:10時点)こちらをRaspberry PIに接続して動かしてみました！！ ■amg88…

2020/10/31 18:17

React metaタグの変更

github pageにて作成したアプリを公開しているのですが、、、 metaタグを変更しておりませんでした。。。 やってしまいました😜アプリ作成にあたって基本は抑えておけという話です。 反省😢 基本から勉強しなおした方がいいんでしょうか？？1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座新品価格￥2,237から(2020/10/29 22:22時点) っということでこちらのアプリのmetaデータを変更してみました！！ https://elsammit.github.io/wordbookApp/変更にあたって、方法を調べてみましたのでまとめておきます！！ 方法は2つです！！ …

2020/10/29 22:24

単語帳アプリ改造してみました

前回、英単語アプリを作成してみました！！ elsammit-beginnerblg.hatenablog.com ただこのアプリ、表に英語、裏に日本語が書かれていてクリックしたら回転するだけでした😅 まぁこれでも単語カードとして使用することが出来そうですが、、、 ちょっと寂しいですよね😂 ただカードが回転するだけなので。 紙に書いた場合と同じです。 単語追加できない分劣化でしょうか？？🤣ということで、 ・英語に対する日本語を3択に変更 ・成功した場合には〇、間違いの場合には×を表示 するように変更しました！！ ■作成アプリ ■新規追加機能 ■最後に (adsbygoogle = window.…

2020/10/27 23:02

100記事突破！！

今年5月から始めたブログ投稿も前回の記事で100記事を超えました！！ 100記事突破を記念して、今回は今まで投稿した内容を整理していきたいと思います！！ 実はちょっと手を広げて書きすぎているため、どんな内容を今まで書いてきたか忘れております🤣 合わせて棚卸的なことも出来ればな！！と思っております👍 ■カテゴリ整理 ■記事投稿数について ■記載内容の振り返り ■今後の目標 ■カテゴリ整理 まずはブログ毎にどんなカテゴリを設定しているのか確認します！！ グラフにまとめるとこんな感じになりました！！ React、html、cssが多くフロントエンド系を結構記載しているようですね！！ 一方、バックエン…

2020/10/25 12:50

英単語帳アプリ作ってみました

ちょっと英語も勉強して行かなきゃなと思う今日この頃。速読速聴・英単語 Core1900 ver.5 (速読速聴・英単語シリーズ)新品価格￥2,090から(2020/10/24 22:02時点)だけど、、、ただ勉強するのもな。。。と思ったので、、、 今回勉強も兼ねてReactで英単語アプリを作ってみました！！ ■作成アプリ ■カードめくりアニメーション ■英単語について ■最後に ■参考 ■作成アプリ 作成したアプリはこんな感じになります！！ アプリはこちらで公開しております。 https://elsammit.github.io/wordbookApp/ ソースコードはこちら。 https:/…

2020/10/24 22:04

React Routerで作成したホームページをgithub pagesで表示

前回、React Routerで作成したホームページがgithub pagesで表示されない現象が発生しました😨 elsammit-beginnerblg.hatenablog.com。。。が解決しました！！👍 今回はReact Routerを用いたホームぺージをgithub pagesで表示する方法のついてまとめます！！React.js & Next.js超入門新品価格￥2,673から(2020/10/22 22:45時点) ■発生現象 ■解決方法 ■最後に ■参考 ■発生現象 下記の通り、react-router-domを用いた場合、github pagesに限りホームページが表示されない…

2020/10/22 22:47

ポートフォリオ作成中！！

前回、作成してきたアプリを一つにまとめるホームページを作成しました！！ elsammit-beginnerblg.hatenablog.com 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座新品価格￥2,237から(2020/10/20 23:07時点) ちょっと1ページだと寂しいな😅と思ったので、ちょっとページ遷移とかも加えてみました。 結果はこんな感じになりました。 ちょっとは動き出たかな？ 最終的にはポートフォリオのようにしていきたいな？と考えています！！ちょっと困ってしまった部分があったので一応残しておきます！！困ったところ、、それは、、、 背景画像の上に文字を置くこ…

2020/10/20 23:11

カラー画像のRGB分離と結合

今回はカラー画像をRGBに分離したり、分離した画像を結合させたりしてみたいと思います！！ ■前回のおさらい ■カラー画像のRGB分離 ■カラー画像のRGB合成 ■最後に ■前回のおさらい 前回、画像に対するヒストグラムを作成しました。 elsammit-beginnerblg.hatenablog.comその際、こちらのコードで一応RGBには分離しております。 b, g, r = img_bgr[:,:,0], img_bgr[:,:,1], img_bgr[:,:,2]ただし、こちらの分離したデータをそのままimshowや画像として保存してみるとこちらのように、 それぞれグレースケールとなり…

2020/10/18 21:04

画像中の画素値調査方法 ヒストグラム作成してみた

今回は画像に対してヒストグラムを作成する方法についてまとめていきたいと思います！！はじめての画像処理技術(第2版)新品価格￥2,420から(2020/10/17 21:17時点)今後、画像に対して機械学習を行おうと思った時に画像処理関係の処理は覚えておいて損はないかな？と思い試してみました。 その中でも色情報の抽出はやってみたいな？と思い立ったのでいい内容ないかな？と考えてみたところ、 まずは基本である、画像内の色情報を抽出してみようと思い立ち、実施しました。 ■画像でのヒストグラムについて ■各諧調毎のヒストグラム作成 ■試しに写真でヒストグラムを作成 ■最後に ■参考 ■画像でのヒストグラ…

2020/10/17 21:23

pythonでのスクレイピングによる画像収集方法

前回Kerasを用いた画像識別を行いました。 elsammit-beginnerblg.hatenablog.comこちらのブログの中では、画像の収集方法については触れませんでした。 今回は自分が用いた画像収集方法である、スクレイピングについてまとめたいと思います！！ スクレイピングはpythonを用います。Pythonスクレイピングの基本と実践 データサイエンティストのためのWebデータ収集術 impress top gearシリーズ新品価格￥3,267から(2020/10/15 22:38時点) ■スクレイピングとは？ ■スクレイピング前準備 ■スクレイピング実行 ■最後に ■参考 ■スク…

2020/10/15 22:41

今まで作ったアプリを集めたホームページ作成

今まで作成したゲームやアプリを整理したいのと、一覧で紹介したいな、と思い立ち、 紹介ページを作成してみました！！ ※今回は技術紹介ではないのです。 作成はReactで行いました！！ 作成したホームページはこんな感じ。 ASPではないですし、レイアウトがこだわれていないので別にReactでなくてもよかったなと思いました😅 htmlとcssしか用いていないですしね😅後、やはりデザインが上手くできないですね。今回、こちらの本を参考にしてデザイン作ってみたのですが、、、 なんかうまくできないんだよな。。。本に記載されている、 「2カラムのWebサイトを作成する」 を元に作成してみており、レイアウトはそ…

2020/10/13 23:47

Kerasを用いた画像識別

前回、ポケモンのステータスからポケモンのタイプを判定するソフトを作成しました。 elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.com 今回は画像の識別を行いたいと思います。 識別画像ですが、いらすとやの犬と猫を行います。 いらすとやの犬と猫はこんな感じですね。 今回はすでにいらすとやの犬と猫の画像が集まっていること前提で記載させていただきます。 自分は犬、猫ともに60枚程度用意いたしました。 ■画像識別モデル ■学習データ準備 ■モデル学習 ■モデル学習結果 ■実際に犬・猫判定してみた ■最後に ■参考 …

2020/10/11 21:54

ARマーカー作成とARでの画像表示

さて、今回はAR技術についてです。 ポケモンGoやドラクエウォークなど、ARを使ってキャラクターを現実世界に表示させるアプリがありますが、 ARってどうやって作ればいいんだろう？？🤔と思い、調べてみました。ARマーカー作成と表示にあたりPythonでOpenCVを用いたいと思います。 Pythonのバージョンは"3.7.4"を用います。独学プログラマー Python言語の基本から仕事のやり方まで新品価格￥2,178から(2020/10/10 12:51時点) ■環境構築 ■ARマーカー作成 ■ARマーカー読み取り ■最後に ■参考 ■環境構築 OpenCVにてARマーカーの作成や読み込みを行う…

2020/10/10 12:52

HTML & CSSとWebデザインを読んでみました

HTMLとCSSホームページ作ってみたいな！！と思っているのですが、どうもうまく作れなかったので AmazonでHTMLやCSSの参考書で1位を取っていたこちらを読んでみました！！1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座新品価格￥2,237から(2020/10/7 23:25時点) ■参考書記載内容 ■参考書を読んだ感想 ■最後に ■参考書記載内容 大きく、 ・HTMLとCSSの基礎 ・学んだ基礎を用いてホームページ作成の流れ の2構成で書かれていました。HTMLとCSSの基礎ではホームページとは何か？から記載されており、 これからWebページを作成したい初心者プログラ…

2020/10/07 23:26

C#でのFTP ファイル転送

今回はC#でのFTPファイル転送についてまとめていきたいと思います！！ ちょっと興味があり、以前調べたのですが使うことがなく。。。 忘れない内に備忘録として残しておきたいと思います！！ ■FTPとは？ ■構成 ■FTPサーバーへのファイルアップロード ■FTPサーバーからのファイルダウンロード ■最後に ■参考 ■FTPとは？ 超基礎的ですが、一応。 FTPとは「File Transfer Protocol」の略称であり、ファイルを転送・通信するための規格です。 クライアントとサーバ間で、ファイルのアップロード・ダウンロードを行うときに使われるプロトコルのことです。 ■構成 今回はubuntu…

2020/10/05 23:07

React 画面遷移方法

前回の記事にてReactでの画面遷移方法は後回しにしました。 elsammit-beginnerblg.hatenablog.com 今回は後回しにした画面遷移についてまとめたいと思います！！React.js & Next.js超入門新品価格￥2,673から(2020/10/4 22:52時点) ■画面遷移環境構築 ■画面遷移方法 ■最後に ■画面遷移環境構築 Reactでの画面遷移を行うにあたり、 「react-router-dom」 というライブラリを用います。react-router-domに似たreact-routerがありますが、こちらとの差異はこちらにまとまっております。 http…

2020/10/04 22:56

ReactでGoogleトレンドを挿入してみる

今回はReactにてページにGoogleトレンドを挿入方法についてまとめたいと思います！！ 単純には、Googleトレンド自体をページ内に表示すればそれで済む気もしますが、カスタマイズ性は自分で作ったほうが高いので挑戦しました！！ ■Googleトレンドとは？ ■ReactへのGoogleトレンド挿入 ■サンプルコード改良 ■最後に ■Googleトレンドとは？ 特定の期間内でどのようなキーワードが多く検索されているかをチェックすることができるツールです。 検索では、文字以外にも画像やニュース、yutube検索などが行えます。本ツールを用いることで検索数の動向から現在のトレンドをいち早く知るこ…

2020/10/03 15:05