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

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

MENU

html

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

先日、PythonのFlaskを用いてサーバのCPU使用率やメモリを可視化するWebアプリを作成してみました。 elsammit-beginnerblg.hatenablog.comこちらを用いて監視作業を行っているのですが、 外部ネットワーク環境に接続せず、ローカル環境でも使用するケースが…

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

今回はChart.jsで横軸のスケールで自動で動かす方法についてまとめておきたいと思います。 前回のブログの最後に後でまとめていきます。と記載した内容です。 elsammit-beginnerblg.hatenablog.com ■Chart.jsで横軸範囲を指定する ■横軸を動的に動かしてみる…

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

先日、PythonでCPU使用率やメモリ資料率を監視するためのアプリを作成してみました。 elsammit-beginnerblg.hatenablog.com今回は、こちらのアプリを改造してWebアプリを作成!! これでネットワークが接続された環境であればどこでもサーバの監視・管理がで…

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

前回まででjsonファイルの読み込みやcsvファイルの読み込み、 csv⇔jsonデータの変換を行ってきました。 elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.com今回は最後で、xmlファイルを読み込みjsonデータに変換したり、jsonデータを…

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

先日、javascritptでjsonファイルを読み出したり、書き出す処理についてまとめました。 elsammit-beginnerblg.hatenablog.comこちらのファイル読み込み・出力を行うにあたり、 json⇔csv、 json⇒xml、 xml⇒csv、 と変換できるツール的なものが作成できれば面…

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

前回まで動画や画像処理について備忘録まとめてきましたが、 今回は打って変わってjavascriptでのjsonデータやjsonファイルの取り扱いについてまとめていきたいと思います。ちょうどjsonファイルを取り扱ってデータ管理する必要があったのですが、 アプリを…

Go言語でログインサーバ構築

前回Go言語でhttpsサーバを構築してみました。 elsammit-beginnerblg.hatenablog.comサイトによってはログイン権限が必要になることもありますよね?? そこで今回は、httpsでのログインサーバを構築してみたいと思います!! ■動作環境 ■フロントエンド実装…

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

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

Web上で桜をヒラヒラ舞わせてみる

もうすぐ春ですね!! 春と言えば桜!!ということで、Web上で桜をヒラヒラ舞わせてみようと思い、コーディングしてみました。 まだまだ自粛でお花見も難しそうなので、お部屋で桜が舞い散る風景を見て楽しめればと思っております。今回はフレームワークは用…

html, cssでレスポンシブ対応について

実は今ちょっとしたWebアプリを作成しているところw。 作成中に スマホへの対応もしとこうかな? と思ったのですが、、、レスポンシブ対応したことなかった!! と気づき、調べてみました。HTML5&CSS3デザインブック忘れないように今回もまとめておこうと思…

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

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

javascriptでヒートマップ表示をまとめてみる

今回はjavascriptでヒートマップを表示する方法をまとめていきたいと思います!!先日、赤外線アレイセンサ amg8833を用いて温度分布の取得や表示を行いました。 elsammit-beginnerblg.hatenablog.com elsammit-beginnerblg.hatenablog.comこちらの温度分布…

setStateの非同期処理

先日ご紹介したReact nesを用いてチャットボット的なものを作成中!! elsammit-beginnerblg.hatenablog.comそこで、ReactのsetStateに対する非同期処理に躓いたので備忘録として残しておきたいと思います。 ■setStateは非同期処理 ■対処方法 ■補足 ■最後に …

Reactでバトル画面を作成

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

ReactでRPGマップ作成

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

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

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

Reactで雪を降らせてみる

メリークリスマス!! ただ残念なことに、 コロナウィルスの第3波が来てしまって、遊びに行くことも憚られる状態ですねせっかくのクリスマスなのに、、、 例年ならイルミネーションとかきれいなはずなのにということで、クリスマスっぽいWebアプリを作ってみ…

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

今まで作成したアプリやコードの整理真っただ中!! 今年中に終わるかな?そこで、以前作成したポートフォリオ(なのか)??を整理しつつ少しレイアウトを変更したので、 そこで使用したアニメーション付きリストについてまとめていきたいと思います!! ■事…

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

ちょっと英語も勉強して行かなきゃなと思う今日この頃。速読速聴・英単語 Core1900 ver.5 (速読速聴・英単語シリーズ)新品価格¥2,090から(2020/10/24 22:02時点)だけど、、、ただ勉強するのもな。。。と思ったので、、、 今回勉強も兼ねてReactで英単語アプ…

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

前回、作成してきたアプリを一つにまとめるホームページを作成しました!! elsammit-beginnerblg.hatenablog.com 1冊ですべて身につくHTML & CSSとWebデザイン入門講座新品価格¥2,237から(2020/10/20 23:07時点) ちょっと1ページだと寂しいなと思ったので…

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

今まで作成したゲームやアプリを整理したいのと、一覧で紹介したいな、と思い立ち、 紹介ページを作成してみました!! ※今回は技術紹介ではないのです。 作成はReactで行いました!! 作成したホームページはこんな感じ。 ASPではないですし、レイアウトが…

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

HTMLとCSSホームページ作ってみたいな!!と思っているのですが、どうもうまく作れなかったので AmazonでHTMLやCSSの参考書で1位を取っていたこちらを読んでみました!!1冊ですべて身につくHTML & CSSとWebデザイン入門講座新品価格¥2,237から(2020/10/7 …

javascriptで花火打ち上げ

暑いですね。夏ですね。 だけど今年はコロナウィルスの影響で軒並み花火大会がなくなってしまいなんだかさみしい夏になりました。。。 ここ数年は毎年近所の花火大会行っていたのですが、今年はなし。。。 このまま夏が終わってしまうのはなんだか悲しい!!…

javascriptでページを一部だけ更新する方法

突然、htmlで表示したページの一部だけ定期的に更新する方法が気になりましたww。 確かにReact使ってしまえばこんなこと簡単に出来てしまうが、そういうの使わずに実装できないかな?と思い立ちました!! さて、、、どうしたものか。。。 と思い、調べてみ…

フロントエンドフレームワーク ReactにするかVueにするか

本格的にフロントエンド開発を学びたいな!!と思っている今日この頃。 今までHTMLやjavaascriptを用いて何となく作っていた部分を、フレームワークを使ってきれいに作りたいな!!と 思い、まずはフロントエンドのフレームワークを学習することにしました!…

ポケモンレーダーチャート表示アプリ ~part2~

前回作成したアプリに機能を追加し、努力値や個体値を触れるようにしたり、ポケモンを比較できるように2種類入力欄を設けたりしてみました!! elsammit-beginnerblg.hatenablog.comこんな感じになりました!! 技術的に真新しいことは何もないけど、、、 せ…

ポケモンレーダーチャート表示アプリ

色々行ったり来たりしてしまっていますが、、、 今回は、ポケモンレーダーチャートを表示するアプリを作成しました。作成したアプリはこんな感じです。 テキストボックスにポケモンの名前を入力してClickを押すと、そのポケモンの種族値が表示されます。 第1…

javascriptでPC内蔵カメラで撮影した画像をサーバに送信

今回は、、、 ・javascriptを用いて、PC内蔵カメラで写真撮影⇒サーバに送信 ・nodejsでクライアントから送信されたデータを受信 の備忘録を書きたいと思います。 実は昔調べながら苦労して作ったことがあったのですが、忘れそうだったので備忘録として残した…

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

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

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

今回はWebアプリのレイアウトを整えてみたので、その報告と備忘録です。 と言っても、デザインセンスがないのと初めてレイアウトを作成を行ったのでとてもダサいw。 世の中便利なもので、無償のテンプレートが数多く用意されていますが、"一度は自分で作って…