GTM リファラでコンテンツを変える 特定のURLからランディングしたとき、ページのコンテンツを差し替えるサンプルです。Google Tag Managerを活用しています。 ツイッターからのリンクでこのページに飛ぶと下記のボタンが青くなります。 リファラの値に「https://t.co/」が含まれると検知して、情報を差し替えます。... 2022-07-03 18:09:43
JS HTMLの上書きと挿入 JavaScriptを使って、HTMLの要素を挿入するサンプルです。 一つの要素を書き換えるパターンと、押すたびに増えるパターンをJSのみで実装します。 ボタンを押すと下部の枠にHTMLの要素が追加されます。 innerHTML... 2022-04-01 08:47:41
JS マウスの位置の取得 マウスが要素の上に来た時の位置を取得するサンプルです。 マウスオーバーしたときと、クリックされたとき、それぞれのマウスの位置を取得します。 以下の正方形にマウスを合わせてください。 スマホではタップした... 2022-04-01 08:46:11
JS 複数の要素のクリック ボタンが押された時にイベントを発生させるJavaScriptのみのサンプルです。 idで1箇所のみに実装するケースと、classで複数箇所に実装するケースがあります。 よく見かけるサンプルはidのケースですが、実際サービスに実装するときは... 2022-03-18 07:25:03
JS サウンドビジュアライザー 音を使ったビジュアル表現のサンプルです。 jQueryとhowler.jsを使ったサウンドビジュアライザーのサンプルコードの備忘録です。 音のスピードや音量調整も簡易的に付けています。 BGM ra... 2021-06-02 00:56:29
JavaScript 別ページのOG情報を取得 JSでHTMLページのOG情報を取得して、ページ内に表示するサンプルです。通信するページへはアクセス許可があるページに限ります。 同じサイト内で、別のページのOG情報を取得する時のサンプルです。 OG情報とはページをSNSでシェアするときなどに読み込まれるページの概要をまとめた情報で... 2021-05-05 18:45:28
JavaScript 画像をcanvasに変換する imgタグで呼び出した画像をcanvasに描画するサンプルです。描画の際にリサイズもします。 表示した画像をCanvasに描画します。 imgの元画像は600pxですが、CSSで200pxにしているので、canvasでも200pxに合わせてリサイズしています。 このサンプ... 2020-09-13 14:10:15
JS 通信速度の検知 現在Chromeではブラウザで通信速度をJacaScriptで計測できます。 navigator.connection.***の値で取得できます。 2020年1月現在、IE,EdgeやSafariではまだ実装されていません。 これをうまく使うと回線速度に応じたコン... 2020-01-15 07:23:56
JS 数字のカウントアップ演出 数字を指定した数まで足して、積み上がっていく表現をJavaScriptで実装するサンプルです。 今回はライブラリを使って数字をカウントアップさせます。 金額や点数を演出するときなどに使えそうです。 ここでは最低限のオプションだけ実装しています... 2019-08-04 00:05:58
JS ESモジュールを使ったDOM操作 ES Modulesの仕様で書いたクラスを付けするだけのシンプルなサンプルです。 2017年からES6 Modules、ES Modules、またはESMと呼ばれるJavaScriptを外部参照する際の新しい仕様が広まってきました。 まだ筆者も勉強中ですが、簡単に説明... 2019-08-08 00:18:15