"BOKU"のITな日常

BOKUが勉強したり、考えたことを頭の整理を兼ねてまとめてます。

0:JavaScriptの小ネタ

ブラウザで動くシンプルな万年カレンダーを作る/素のJavaScript(Vanilla JS)だけ

素のJavaScript(Vanilla JS)だけで、ライブラリとかを使わずに作るシンプルな月間カレンダー。

JavaScriptでリアルタイム顔検出して顔にモザイク風マスクをかぶせる/pico.js(3)

JavaScriptのみで高速に顔検出ができる「pico.js」の応用として、WEBカメラに映った自分の顔を検出してモザイク風のマスクをかぶせるってのをやってみます。

JavaScriptで高速顔検出。検出した顔に任意の画像でマスクする/pico.js(2)

JavaScriptのみで高速に顔検出ができる「pico.js」の応用をやってみます。囲む枠を変更してみたり、パンダのイラストを重ねてみたり。

JavaScriptで高速顔検出できる「pico.js」の使い方(1)

JavaScriptのみで高速に顔検出ができる「pico.js」の使い方です。まずは、静止画(写真)を使って基本的なところから。

パソコン付属のWEBカメラでブラウザに映像を映すJavaScriptサンプル(最近版)

久しぶりにWEBカメラを使おうとしたら、ちょっとエラーがでたので。

CanvasAPIチュートリアル(3)/HTML5&JavaScript

Html5のCanvasAPIのよくできたチュートリアルを見つけたので、参考にして、いくつかやってみました・・・の3回目です。

CanvasAPIチュートリアル(2)/HTML5&JavaScriptだけで動く丸時計とか

Html5のCanvasAPIのチュートリアルを参考にやってみた・・の2回目です。

CanvasAPIチュートリアル(1)/HTML5&JavaScript

Html5のCanvasAPIだけを使って、ゴリゴリとグラフィックを描いてみるってのはやったことがないなと思ってたら、とてもよくできたチュートリアルを見つけたので、やってみました。

Chart.jsのshowLineオプションを使って「樹形図」を描く/django3.0+Chart.js

散布図の点を線で結んで樹木図を描こうと「showLine」オプションを使うと最初うまく描けなかったので。

Chart.jsの散布図で「バーンスレイのシダ」を描く/django3.0+Chart.js

Chart.jsの散布図の座標データ=配列を、python等で生成して、HTML経由でJavaScriptに渡して汎用的に使うときのポイントです。

Chart.jsで縦横同じサイズの散布図サンプルを描く/django+Chart.js

簡単にできると思ってたら、意外に情報がなくて苦労したので、備忘を兼ねて書いておきます。

素のJavaScript(Vanilla JS)でドラッグ&ドロップを実装する

以前はjQueryで実装していたものを、ライブラリを使用しないよう書き換えました。

ブラウザで手描きした画像をBase64テキストにエンコードする/プレーンJavaScript+Fabric.js

もともとjQueryで実装していましたが、巣のJavaScriptにリライトしました。

JavaScript:ノートPCのカメラで自作のAR(拡張現実)を動かす/AR.js+A-Frame

ひょんな事からAR(拡張現実)なるものを試してみることになったので、やり方を一通りまとめてみました。AR.jsとA-Frameです。

forループの中の「on」ブロック内のfunction()が正しく動かない/JavaScript(備忘)

forループの中のonブロックに書いた処理が意図した通りに動かないという「よくある問題」のケース紹介と対処法を備忘のために書いておきます。

静的HTMLページのHeghtにあわせて<iframe>のHeightを自動的に変更する方法(備忘)

iframe内にコンテンツを表示する際にハマりやすい・・というか自分がハマった・・問題について解決策をメモっておきます。

数式を描くMathJax.jsで表示できないギリシャ文字/JavaScript

MathJaxで表示できないギリシャ文字があって解決できてません。なので、とりあえず、切り分けだけしてみました。

はてなブログで数式を描くMathJax.jsの使い方と基本数式サンプル/JavaScript

前回、はてなブログの見たままモードで、数式を書く仕組みである「MathJax.js」について、基本的な使い方と数式例を整理してみました。