おはようございます！！ 今までいろいろと妻の可愛いお写真をご紹介させていただきました。 一応私自身エンジニアということもあり、今回は自作したWebアプリケーションの紹介をさせてください🙏 ■アプリのご紹介 ■URL ■ご意見・ご感想 ■最後に ■アプリのご紹介 その名も、 桜フォトフレーム(Web版)！！ https://elsammit.github.io/SakuraPhotoFrame/ 百聞は一見に如かず！！ アプリはこんな感じになります。 背景で桜が舞い散るようにしているので本当は動画にしたかったのですが、、、 ファイルサイズが大きくなってしまったので断念😢 代わりにgifを載せて置きました。 5枚の画像(写真)が数秒ごとに1枚ずつ入れ替わりで表示されます。 フォトフレームの下に配置した、 画像1～画像5 は各画像入れ替え用のボタンになっています。 ボタン押下すると自身のロー

暑いですね。夏ですね。 だけど今年はコロナウィルスの影響で軒並み花火大会がなくなってしまいなんだかさみしい夏になりました。。。 ここ数年は毎年近所の花火大会行っていたのですが、今年はなし。。。 このまま夏が終わってしまうのはなんだか悲しい！！泣 悲しいです！！泣 悲しいので花火を自作することにしました！！ww もちろん本物は作れないので、プログラムですww。 どうやって作ろうかな？？と思いながら調べてみたところ、javascriptで作ることができるとのこと！！ qiita.com どうやら、p5.jsを用いるといいとのこと。 p5.jsは、 processingをjavascriptに移植したもの とのことです。 p5js.jp qiita.com qiitaに上がっていたソースコードをそのまま流用しつつ、javascriptを別ファイルに移植してみました。 ソースコードの内容としては、

reactでwebサイトを作成しようと思っていたところ、友人より、最近はSPAで作ることが多いと伺いました。 ...SPAってなんだ？？ 週刊SPA!のことじゃないよな？？ 聞いてみるとどうやら ”Single Page Application”のことらしい。 どういうものかわからなかったので調べてみることにしました。 ■SPAとは ■SPAの例 ■SPAのメリット ■SPAのデメリット ■最後に ■参考 ■SPAとは Webページにおいて1ページ内を各オブジェクトで構成することにより、ぺージ全体を何度も読み込む必要なく、対象コンテンツのみ遷移させる 技術のようです。 【従来】 サーバサイドにページを要求し、受け取ったページに遷移させる。 【SPA】 サーバサイドに要求するのはデータ(オブジェクト)になる。 フロントサイドでは受け取ったデータをもとに必要なコンテンツのみ切り替えるため、ペー

前回書いたSPAを実際に動かしてみるための前段階として、 サーバサイドとの通信をしてみたいと思い試しに動かしてみたところ躓いたため備忘録で残そうと思います！！ elsammit-beginnerblg.hatenablog.com まずReactでget、postリクエストを行うためにはaxiosを用いるためインストールを行います。 [フロントエンド] axiosライブラリを使って、柔軟にHTTP通信を行う - YoheiM .NET yarn add axiosそして、実際にReactを用いてサーバサイドにgetを行うためにこちらを作成し実行！！ import React, { Component } from 'react'; import axios from 'axios' export default class Todo extends Component { construc