JavaScript

acceleration addEventListener all Array baseNode catch Chart clamp clearInterval click connection console const cookie crossorigin CSV D3 Date decodeURIComponent devicemotion deviceorientation document DOMContentLoaded DOMParser draggable drawImage enchant encodeURI encodeURIComponent ES Modules event exitFullscreen File FileReader for force fullscreenchange fullscreenElement function geolocation getAttribute getBoundingClientRect getContext getElementById getElementsByClassName getHours getImageData getMinutes getRangeAt getSeconds getSelection getTime hash height hello history host howler href if Image import indexOf innerHeight innerHTML insertAdjacentHTML insertRule json length let location log match Math module naturalHeight naturalWidth navigator offsetHeight onclick onload onmousedown open originalEvent pageYOffset parent parse parseFromString parseInt pathname port position preventDefault Promise protocol push pushState querySelector querySelectorAll random readAsText remove replace replaceState requestFullscreen requestPermission script scrollHeight scrollTo search setAttribute setInterval setTimeout shift sort split stopPropagation stringify styleSheets targetTouches textContent then toFixed toggle toGMTString toLocaleString toLowerCase toString touches touchforcechange touchmove touchstart TypeScript undefined unshift userAgent vibrate webgl width window write XDomainRequest XMLHttpRequest

• jQuery ライブラリを使って音をコントロールする
• howlerJSというライブラリを使って、ボタンを押したら音がなるだけのシンプルなサンプルです。 ボタンをjQueryで実装し、音の再生部分をライブラリを利用して実装します。 以下のボタンを押すと、mp3の音が再生されます。 自転車ベル...
• 2021-01-31 19:15:44

• JS 選択文字の抽出と連携
• 選択した文字の情報をJSで抽出したり、SNSボタンに連携するサンプルです。 ブラウザで文字を選択した状態になると、その値をJSで検知することができます。 選択した文字を抽出したり、その文字を使って他のAPIに情報を連携するサンプ...
• 2021-01-03 17:33:46

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

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

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

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

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

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

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

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