JavaScript

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

• JS ページ内スムーズリンク
• jQueryを使わずにページ内リンク（アンカーリンク）で滑らかに移動するリンクのサンプルです。 「href="#link"」のようなページ内リンクを無効にし、クリックするとスムーズなスクロールで移動するaタグをJSで実装しました。 jQueryなしで実装しています...
• 2022-06-26 14:25:25

• JS フルスクリーンの開始、解除
• ページでブラウザのフルスクリーンモードを実装し、解除するサンプルです。 動画の再生など大画面で見てほしいコンテンツは、全画面表示をしてほしいので、このサンプルはその制御をする時に使います。 ボタンを押して、フルスクリーン...
• 2022-06-19 22:11:22

• JS HTMLの上書きと挿入
• JavaScriptを使って、HTMLの要素を挿入するサンプルです。 一つの要素を書き換えるパターンと、押すたびに増えるパターンをJSのみで実装します。 ボタンを押すと下部の枠にHTMLの要素が追加されます。 innerHTML...
• 2022-04-01 08:47:41

• JS スマホを振って音を出す
• スマホを振った時の加速度を検知して、音を鳴らすJSのサンプル。 このサンプルはスマホで確認できます。 iOSの場合は、一度加速度センサーの許可をするボタンがでるので、クリックしてください。 スマホを振ると、加速...
• 2021-06-05 12:48:41

• JavaScript 別ページのOG情報を取得
• JSでHTMLページのOG情報を取得して、ページ内に表示するサンプルです。通信するページへはアクセス許可があるページに限ります。 同じサイト内で、別のページのOG情報を取得する時のサンプルです。 OG情報とはページをSNSでシェアするときなどに読み込まれるページの概要をまとめた情報で...
• 2021-05-05 18:45:28

• HTML5 ローカルCSVを読み込み検索合算する
• 以下のようなCSVがあったとします。 その中で金額の値を合算するJavaScriptのサンプルです。 [[ ID,社名,種類,商品,金額,評価 1,A社,入力機器,マウス,...
• 2020-07-21 07:34:19

• JS 感圧で遊ぶ
• iPhone6s以上限定ですが、押し込んで面白い表現を作ってみようと思います。 タッチ3Dの押し込まれた値によってどんなことができるか検証します。 この記事はiPhone6s以上で閲覧をお願いします。 #press_area3{ width:200px; hei...
• 2019-08-07 22:47:03

• JS 感圧の検証
• この記事はiPhone6s以上で使える3Dタッチ（感圧）についての検証です。 iPhone6s以上だと画面を強く押すと圧力を感知して、タップとは違う挙動になります。 その挙動に対してJSによる感圧を取得する関数でトリガーを実装すると、どう...
• 2019-08-07 22:43:16

• JS タップ圧力（感圧）検知
• スマホやタブレットなどでは、タップした圧力を検知し、操作するシーンが増えてきました。JavaScriptで圧力を数値化する関数が用意されているので、実装してみました。 画面をグッと押し込むと発動するサンプルです。 このサンプルはスマホやタブレットなどのタップの圧力を検知できる端末で参照してください。 #press...
• 2019-07-29 21:46:07

• JS 加速度検知
• スマホを振ったときにJavaScriptで仕掛けを作りたいときのサンプルです。 このサンプルではiOS、Androidのブラウザで、スマホを握って振ったときに、文字が切り替わるスクリプトを実装しています。 function ClickRequestDeviceSen...
• 2019-07-29 21:35:59