メインカテゴリーを選択しなおす
[JavaScript] 全角⇔半角の文字列変換 [コピペ用のメモ]
英数字 to 全角 任意の文字列の中にある「半角英数字」を「全角英数字」に変換します。それ以外の文字列は、そのままにします。 const toZenkaku = t => t ....
今日は一粒万倍日と大安が重なるめちゃくちゃいい日ってことで 開業届を提出してきました! まだメールアドレスも取得できてないし ロゴもないし 名刺もないけど ここまで長かったー。。。 2がいっぱいってこ
[JavaScript] 全角ひらがな⇔全角カタカナの文字列変換 [コピペ用のメモ]
ひらがな⇔カタカナ to ひらがな 任意の文字列の中にある「カタカナ」を「ひらがな」に変換します。それ以外の文字列は、そのままにします。 実装 const katakanaReg...
[React] Leader Line で要素同士を線でつないでみる 心を無にして始める React
準備 Leader Line Draw a leader line in your web page. こちらの React版 です。 LeaderLine のインストール np...
[React] react highlight words で検索文字列をハイライトしてみる 心を無にして始める React
準備 react highlight word のインストール npm install react-highlight-words 使ってみる イメージ 入力フォームに入れた文字...
[React] React Table で テーブル内のファジー(あいまい)検索 をしてみる 心を無にして始める React
準備 TanStack Table v8 で React Table を使うのはこちら (*'▽') バックエンドには、いつもの json-server を使います。 検索 イメ...
[React] React 18 から setInterval などの非同期処理で気をつけること
React 18 での変化点(の1つ) コンポーネントがアンマウントされたあとに状態が更新されても、警告が出なくなりました。 でなくなった警告はこれです。 Warning: Ca...
[React] TanStack Table v8 を React で使ってみる 心を無にして始める React
TanStask Table v8 準備 インストール npm install @tanstack/react-table react-table イメージ Table.js を...
[React] Suspense(React 18 の新機能) を Axios と合わせてみる 心を無にして始める React
Suspense サスペンスにより、コンポーネントツリーの一部がまだ表示できない場合に、ロード中という状態を宣言的に記述できるようになります。 いままで state で isLo...
React 18 の新機能をみたら、使いたくなったから今日から React 18 。 インストール 新しく npx create-react-app しましょう。React 18...
[React] Axios で複数の通信を待ち合わせてみる 心を無にして始める React
準備 Axios のインストールと使い方はこちら。 バックエンド 今回も json-server です。 使う json はこちら。 { "cats": [ { "id": 1,...
[React] Canvas で画像を拡大するとき、画像がぼけやるのを防ぐには
今回は React に限った話ではありませんが…、サンプルを React で書いています。HTMLやCSSを準備するよりReactで用意するほうがエコシステムがいろいろ揃えてくれ...
[React] OpenCV で画像の HITMISS(Hit or Miss) をしてみる 心を無にして始める React
この記事は、たぶん優先度が低いです。物体検出なら別の関数使いそうだし…、にわかには使いどころが、思いつかない (。´・ω・) 準備 React で OpenCV.js を使えるよ...
[React] OpenCV で画像のトップハット、ブラックハットをしてみる 心を無にして始める React
この記事は、たぶん優先度が低いです。にわかには使いどころが、思いつかない (。´・ω・) 準備 React で OpenCV.js を使えるようにしておきます。 今回も、形態を変...
【Web予約が便利!】タカラスタンダードのショールームはWebで簡単予約
今どきはwebで簡単にショールームの予約が取れるようになっています。メールで予約日が送られてくるので直前で時間がわからなくなることもないのでおすすめです。入店時に基本情報を記載する手間も省けて時短にもなります。
Web3(web3.0)とは?③|ダオってなんだお?DAO(分散型自律組織)とは?
Web3.0と一緒に紹介されることが多いDAO前回の記事で「Web3.0とは何か?どう変わっていくのか?」について、以下の記事でご紹介しました。Web3.0をしていると、NFTやメタバースなどの言葉と同じく「DAO」というワードを目にします
Web3(Web3.0)とは?|何ができる?何が変わる?を分かりやすく解説
web3.0で何が変わる?前回は、Web3.0の概略についてご紹介しました。前回の記事は、こちらからどうぞ。結局のところ、何ができるの?自分の生活がどう変わる可能性があるの?こういう疑問を持たれている方をおられると思います。そこで、今回は、
[React] OpenCV で画像からエッジ抽出してみる 心を無にして始める React
準備 React で OpenCV.js を使えるようにしておきます。 今回も、形態を変化させるモルフォロジー処理を使っていきます。 OpenCVで定義されるタイプは、膨張、収縮...
[React] OpenCV で画像の簡単なノイズ除去をしてみる 心を無にして始める React
準備 React で OpenCV.js を使えるようにしておきます。 今回も、形態を変化させるモルフォロジー処理を使っていきます。 OpenCVで定義されるタイプは、膨張、収縮...
[React] OpenCV で画像の膨張&収縮をしてみる 心を無にして始める React
準備 React で OpenCV.js を使えるようにしておきます。 膨張や収縮は、形態を変化させるモルフォロジー処理の1つです。 OpenCVで定義されるタイプは、膨張、収縮...
[React] OpenCV で画像を2値化してみる 心を無にして始める React
準備 React で OpenCV.js を使えるようにしておきます。 2値化する 簡単なしきい値処理 使うものはこちら。 簡単なしきい値処理では、しきい値を決めての2値化ができ...
[React] OpenCV で画像をグレースケールにしてみる 心を無にして始める React
準備 React で OpenCV.js を使えるようにしておきます。 グレースケールにする 使うものはこちら。 cv.cvtColor(srcMat, dstMat, cv.C...
[React+OpenCV] JavaScript で 画像処理をはじめてみる@準備回 心を無にして始める React
準備 OpenCV.js を使っていきます。 OpenCV.js のインストール opencv.js をダウンロード いつもの npm ではなく、ダウンロードして使います。 op...
Web3(Web3.0)とは?|概要と注目される理由を分かりやすく解説
今注目されているキーワード 「Web3.0」どうも、かず~むです。3人の子供の親をしながら平凡なサラリーマンとして今日も社会の荒波にのまれています。最近盛んに聞くようになった「Web3.0」という言葉。「Web3.0」というからには、「We
[React] 画像ファイルをドラッグ&ドロップで取得してみる 心を無にして始める React
準備 react-dropzone を使っていきます。 react-dropzone のインストール npm install react-dropzone ドラッグ&ドロ...
[React] React Webcam のカメラ映像を canvas に表示してみる
前回は img タグに表示してみました。今回は canvas タグに表示してみます。img タグと比べると、少し工夫が必要になります。 準備 React Webcam のインスト...
[React] React Webcam のカメラ映像をimgタグの画像に変換してみる
準備 React Webcam のインストールなどはこちら。 カメラ映像から画像を取得して表示する 写真を撮るようなイメージで、ボタンを押したときの映像を img タグ で表示し...
[React] React Webcam でカメラ映像を表示してみる 心を無にして始める React
準備 React Webcam を使っていきます。 React Webcam のインストール npm install react-webcam カメラを表示する PCが認識してい...
[Webpack] webpack-dev-server で CORS を回避する方法 [setupProxy]
はじめに Webサービスの開発で webpack-dev-server を使っていると、 CORS の問題が見つかることがあります。 回避の方法はいくつかありますが、今回は ht...
「富田林市の観光って、何があるの?」「富田林市のおすすめスポットは、どこですか?」 富田林市には、観光に関連する公式ウェブサイトがいくつかあります。しかし、それぞれが独立したウェブサイトであるため、まとまった情報を見ることが出来ません。そのため、本記事では、富田林市の観光情報に関する公式ウェブサイトを、整理してまとめてみました。 では、どのようなウェブサイトがあるのでしょうか?今回は、富田林市の観光情報に関する公式ウェブサイトについて、ご紹介します。 富田林市公式ウェブサイト! 富田林市の観光情報を調べるときは、まずは富田林市の公式ウェブサイトを見てみましょう。 魅力発信・観光ポータルサイト …
[React] Axios で CRUD してみる 心を無にして始める React
CRUD CRUDとは、ほとんど全てのコンピュータソフトウェアが持つ永続性の4つの基本機能のイニシャルを並べた用語。その4つとは、Create、Read、Update、Delet...
個人でインターネットから接続できるサーバを構築するには、いろいろな契約が必要。契約といっても、WEBサイトのページから必要事項を入力など、とても簡単な操作。今回立ち上げたサイトは、インターネットからアクセスできるWEBサイト(サーバ)
WEBサイトを立ち上げて、3か月あまり経ちました。インターネットに直接接続しているWEBサイトは、PCと違って使わないときは電源を落とすということができないので、定期的にサイトの安全性を確認が必要。WEBサイトの定期点検についてお話します。
Webサイトは仮想空間上のお店なんです!普段何気なく、検索・利用しているインターネット。商売として使うには、水面下でこんな努力をしていたとは。素直な感想です。Webサイトのつくり方・運営のしかた 売上・集客が1.5倍UPするプロの技101
ブログやライティング、サイト制作を行う上でよく出てくるSEO。そもそも読み方からわからないといった、初心者の方に向けてSEOを分かりやすく解説します。SEOの読み方SEOの読み方は「エス・イ・ーオー」です。これは、「Search Engin
ブロガーの方やWEBマーケティング担当者の方など、Google検索を使って自社サイトや競合サイトの順位を確認するシーンがよくあると思います。検索画面でサイトの順位を確認するとき、そのままでは1ページに10位までしか表示されず、11位以降にラ
[Node.js] FileSaver でファイルを保存してみる 心を無にして始める React
準備 FileSaver を使っていきます。 FileSaver のインストール npm install file-saver ダウンロードする(URLなし) 画面に表示している...
[React] Axios で通信してみる 心を無にして始める React
準備 今回は JSON Server を通信相手にします。 他にバックエンドを用意できる人は飛ばして大丈夫です。 (抜粋)Get a full fake REST API wit...
[React Bootstrap] Table を表示してみる 心を無にして始める React
今回は、Table コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 compon...
無料でヒートマップ分析。Clarityでユーザー行動の見える化
WEBサイトやLPに訪問したユーザーの行動を解析する為に、Googleアナリティクスなどのアクセス解析を使っている方は多いと思います。さらにヒートマップツールを使うことで、アクセス解析だけでは知る事の出来ない「どこがクリ […]
[React Bootstrap] Toasts を表示してみる 心を無にして始める React
今回は、Toast コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 compon...
[React Bootstrap] Popovers を表示してみる 心を無にして始める React
今回は、Popover コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 comp...
[React Bootstrap] Tooltips を表示してみる 心を無にして始める React
今回は、Tooltip コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 comp...
[React Bootstrap] OverlayTrigger を表示してみる 心を無にして始める React
今回は、OverlayTrigger コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder...
[React Bootstrap] Overlays を表示してみる 心を無にして始める React
今回は、Overlay コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 comp...
[React Bootstrap] Tabs を表示してみる 心を無にして始める React
今回は、Tab コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 componen...
[React Bootstrap] Spinners を表示してみる 心を無にして始める React
今回は、Spinner コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 comp...
[React Bootstrap] Offcanvas を表示してみる 心を無にして始める React
今回は、Offcanvas コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 co...
[React] 簡単にできるシェアボタン サンプルコード付き
サイトを作るときにシェアボタンを付けたいけど、やったことがないとちょっと手が伸びないことが多いです。 Reactでやってみたら、かなり簡単にできてしまうライブラリがあったので、紹...
「数を数えるやつ」とは 「数を数えるやつ」は、映像や画像の中にあるモノの数をカウントする Webサービス (Webサイト?) です。 画面 使い方 かんたんには、写真や映像を入力...