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 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 unshift userAgent vibrate webgl width window write XDomainRequest XMLHttpRequest

• JS 通信速度の検知
• 現在Chromeではブラウザで通信速度をJacaScriptで計測できます。 navigator.connection.***の値で取得できます。 2020年１月現在、IE,EdgeやSafariではまだ実装されていません。 これをうまく使うと回線速度に応じたコン...
• 2020-01-15 07:23:56

• TypeScript 編集とコンパイル
• TypeScriptの基本的な編集とコンパイルのメモ書きです。 TypeScriptは、コンパイルして、JavaScriptを生成する言語です。 詳しくはウィキや参考サイトをご参照ください。 TypeScriptを編集するときの基本的な作業...
• 2019-08-12 16:12:02

• JS 数字のカウントアップ演出
• 数字を指定した数まで足して、積み上がっていく表現をJavaScriptで実装するサンプルです。 今回はライブラリを使って数字をカウントアップさせます。 金額や点数を演出するときなどに使えそうです。 ここでは最低限のオプションだけ実装しています...
• 2019-08-04 00:05:58

• JS 時間取得と加工
• JavaScriptではいろんな時間の情報を使えるよう整っています。改めて整理してみました。 まずはどんな時間を扱うことが多いのか。 年月日の形式ではなくて、時差について二つだけ。 協定世界時（UTC） Mon, 20 May 2019 09:33:22 GMT...
• 2019-08-08 00:30:38

• JS ESモジュールを使ったDOM操作
• ES Modulesの仕様で書いたクラスを付けするだけのシンプルなサンプルです。 2017年からES6 Modules、ES Modules、またはESMと呼ばれるJavaScriptを外部参照する際の新しい仕様が広まってきました。 まだ筆者も勉強中ですが、簡単に説明...
• 2019-08-08 00:18:15

• JS 文字列一致
• if文で文字列の部分一致を判定して出しわける構文のサンプル。 よく使うけど、忘れがちなので備忘録です。 正規表現の文字列一致 [[ ua = navigator.userAgent; if(ua.match(/chrome/)) { conso...
• 2019-08-07 23:05:10

• 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で元の画像のサイズを取得することができます。 [[<img id="neko" src="/img/demo/cat/002.jpg"...
• 2019-08-07 22:34:44

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