人気のあるUIサンプル

• JavaScript 画像をcanvasに変換する
• imgタグで呼び出した画像をcanvasに描画するサンプルです。描画の際にリサイズもします。 表示した画像をCanvasに描画します。 imgの元画像は600pxですが、CSSで200pxにしているので、canvasでも200pxに合わせてリサイズしています。 このサンプ...
• 2020-09-13 14:10:15

• JavaScript 画像の色からカラーチャート
• JacaScriptでJPG画像をCanvasに変換し、色情報を解析、抽出するサンプルです。 抽出した色をカラーチャートのようにjQueryで整形してみました。 色の情報はRGBAで抽出されます。 Aは透明度なので今回は無視。 重複する色はユニー...
• 2020-09-21 18:13:36

• JavaScript 画像をクリックして色を抽出
• 画像をクリックするとクリックした部分の色の情報を抽出するサンプルです。 いわゆるカラーピッカーをJSで実装しています。 まず画像をcanvasに変換します。 マウスでクリックされた部分のピクセルの画像データを抽出し、色の情報...
• 2020-09-22 13:39:02

• JavaScript 重複のユニーク化とカウント
• JavaScriptで配列の値の重複をユニークにまとめつつ、出現数を数えるサンプルです。 たくさんの文字列が配列に入っていて、重複しているとき、ユニークにまとめたいことがあります。 例えば以下のような配列があったとします。 [[ ["1...
• 2020-09-22 14:28:44

• JavaScript クリックして直線を描く
• 画像の上を２回クリックすると直線を引くことができるサンプルです。 ユーザーに画像か何かの要素の上で、直線を引かせたいときがあるとします。（稀ですが） 開始の点と終了の点をクリックすると、要素の上に直線が現れます。...
• 2020-09-22 23:28:39

• PHP 乱数について
• PHPでランダムな数字を発生させる関数のメモです。 例えば、ランダムに違うコンテンツを出しわけたいときがあるとします。 １のときはA、２のときはB、それ以外ならCを出したいといったときです。 JavaScr...
• 2020-09-27 12:02:01

• jQuery XMLをパースする
• XMLファイルをJavaScriptのjQueryで解析し、情報を加工するサンプルです。 例えば以下のようなXMLがあるとします。 [[ <?xml version="1.0" encoding="UTF-8"?> <urlset> <url> <loc&...
• 2020-10-04 22:14:29

• JavaScript 配列の追加と削除
• 配列の要素の追加と削除のサンプルです。 ボタンを押すと、値を配列の先頭や末尾に追加するサンプルです。 合わせて、追加した値を削除するサンプルと、すでに同じ値が存在する場合、は追加しない記述...
• 2020-10-31 12:30:46

• JavaScript 配列→JSON、JSON→配列。
• 配列をJSONにしたり、JSONを配列に戻したりするサンプルです。 配列を文字として扱い時など、JSON形式にすることがあります。 以下のような配列をJSON形式に変換します。 [[demo_arr = ["123", "123&q...
• 2020-10-31 13:00:24

• WebGL 立体を回転してみる
• 立体を描画し、それを3Dで回転させるサンプルです。 参考サイトMDNを参考にサンプルをそのまま実装してみました。 まだ、筆者も理解が浅いので、今日はここまでです。 下記のサイトを参考にしていま...
• 2020-11-03 22:40:47