JavaScript 【JavaScript】Canvas Confettiを使って紙吹雪アニメーションを表示する
今回はCanvas Confettiを使って紙吹雪アニメーションを表示するサンプルコードを解説していきます。 完成しているコードは下記にあります。 基本 <script src=" function fire(confettiOption...
tsuneken
JavaScript 
HTML/CSS 【HTML/CSS】CSSでクリックイベントを無効化する
コード $ tree --dirsfirst . ├── css │ └── style.css ├── js │ └── index.js └── index.html .target { pointer-events: none; } ...
TensorFlow.js 【TensorFlow.js】Depth Estimationで深度推定を試してみる
今回は、 TensorFlow.js の Depth Estimation を使って深度推定を試していきます。コードは前回からの使い回しです。 完成しているコードは下記にあります。 深度推定とは 環境 node: 18.20.0 Angu...
TensorFlow.js 【TensorFlow.js】Pose Detectionで姿勢推定を試してみる
今回は TensorFlow.js の Pose Detection を使って姿勢推定を試していきます。コードは前回のものを使いまわしてます。 完成しているコードは下記にあります。 姿勢推定とは 姿勢推定とは、動画や画像から肩やひじ、ひ...
TensorFlow.js 【TensorFlow.js】Body Segmentationでセグメンテーションを試してみる
今回は、TensorFlow.js の Body Segmentation を試していきたいと思います。コードは前回のものを引き続き使っていきます。 完成しているコードは下記にあります。 セグメンテーションとは ピクセル単位で物体と物体...
TensorFlow.js 【TensorFlow.js】COCO SSDで物体検出を試してみる
今回は TensorFlow.js の学習済みモデルの MobileNet を使用して物体検出を試してみます。 Angular で書いてますが、 Angular を使う必要はないです。 コードは前回のコードを引き続き使っていきます。 完...
TensorFlow.js 【TensorFlow.js】MobileNetで画像分類を試してみる
今回は TensorFlow.js の学習済みモデルの MobileNet を使用して画像分類を試してみます。 Angular で作っていますが、 Angular を使う必要はないです。 完成しているコードは下記にあります。 画像分類とは...
HTML/CSS 【HTML/CSS】flex で 上下中央寄せ
結構使うのですが、やりたいときには忘れてる上下中央寄せのコードです。 コード $ tree --dirsfirst . ├── css │ └── style.css └── index.html .container { display:...
Angular 【Angular】Chart.js でグラフを描画する
今回は Chart.js を使ってグラフを描画するコードの解説していきます。作成するグラフは特に思いつかなかったので、公式サイトのサンプル通りのデータでグラフを作っていきます。 完成しているコードは下記にあります。 環境 node: 18...
HTML/CSS 【HTML/CSS】iframeを全画面表示にする
コード $ tree --dirsfirst . ├── css │ └── style.css ├── content.html └── index.html * { margin: 0; padding: 0; overflow: hi...
WordPress 【WordPress】サイドバーに最上位カテゴリーのみの一覧を表示する
ブログのデザインで、サイドメニューのカテゴリーの表示で悩んでいました。階層が一定じゃないせいか、階層表示がなんかダサい気がするんですよね。 結局子カテゴリーを消して対応してたんですが、それはそれで味気ないということでカテゴリー一覧で最上位...
Angular 【Angular】Marked + Highlight.js + KaTeX + Mermaid を同時に使用する
前回までの3記事の総まとめです。 完成しているコードは下記にあります。 環境 node: 18.20.0 Angular CLI：17.0.0 Marked：14.1.3 Highlight.js：11.10.0 marked-katex...
Angular 【Angular】Mermaidで図を描画する
今回はブラウザで Mermaid 形式でテキストを記入して、図を描画する方法を解説していきます。特につながりはないのですが、前回のソースを使いまわしています。 完成しているコードは下記にあります。 環境 node: 18.20.0 Ang...
Angular 【Angular】KaTeX or MathJax で数式を表示する
JavaScript を使用してブラウザ上に数式を表示する代表的なライブラリに KaTeX と MathJax があります。今回は両方の実装方法を解説していきます。 KaTeX を使用するのに前回使用した Marked を利用するので、ソ...
Angular 【Angular】Marked + Highlight.js でMarkdownをHTMLに変換して表示する
Marked と Highlight.js を使用して、Markdown 形式で書かれたコードを HTML に変換してブラウザ上に表示する方法を解説します。
Angular 【Angular】複数のコンポーネント間でデータを共有する方法
Angularで開発をしているとコンポーネント間でデータをやり取りする必要が出てくる場合があります。今回はそのコンポーネント間でデータをやり取りする方法を以下の4つのパターンで解説していきます。 親コンポーネント → 子コンポーネント 子コ...
Angular 【Angular】Angular Materialでのタブの実装
Angular でタブによるコンポーネントの切り替えを実装していきます。実はSSRの実装のときに使っているんですが、その時は本題でなかったというのもあり軽く流していました。今回は解説つきです。 完成しているコードは下記にあります。 環境 ...
Angular 【Angular】Angular Materialでのハンバーガーメニュー
今回はよくスマホなどで使用されるハンバーガーメニューを実装していきます。ハンバーガーメニューとはヘッダーなどに置かれているメニューボタンを押すと横から出てくるサイドメニューのことです。 完成しているコードは下記にあります。 環境 node...
Ubuntu 【WSL2】 Ubuntu 20.04.5 LTS を 22.04 LTS へアップグレード
WSL2のUbuntuのアップグレードをサボってたのですが、サポート期限が2025年4月までと教えてもらって重い腰を上げました。サボってたというより、特に気にしてなかったというのが正解ですが・・・ アップグレードには数時間かかることもある...
Docker 【Docker】Windows11 + WSL2 ＋ Docker で Rails6.1 + MariaDB の開発環境を構築する
Rails Guide をやるために Rails6.1 の環境を作ろうとしたら思いの外苦戦したので備忘を含めて記事にします。 なぜRailsのバージョンが6.1なのかというと、パーフェクトRuby on Rails のバージョンが6.0....