WebページにGoogleフォーム風のお問い合わせフォームを追加する方法HTMLフォーム、Googleスプレッドシート、Apps Scriptを使って、静的なWebページに問い合わせフォームを追加する方法を簡単に解説します。Tag
JavaScript
21 entries
WebページにGoogleフォーム風のお問い合わせフォームを追加する方法HTMLフォーム、Googleスプレッドシート、Apps Scriptを使って、静的なWebページに問い合わせフォームを追加する方法を簡単に解説します。
Vueコンポーネント一括インポート概要 個別にインポートしているコンポーネントを、一括で読み込むようにします。 施策 プラグイン作成 src/plugins/componentsLoader.js componentsフォルダ内のvue拡張子のファイルを […]
Intersection Observerでスクロールで要素の状態を変化させる概要 スクロールに合わせて、タイトルや画像をふわっと表示させたい時は、スクロールイベントを設定して実装していましたが、Intersection Observerを使用することでシンプルに実装できます。 施策 HTML ペ […]SVG内の要素にfilterを適応させる概要 CSSでSVG内にある要素にfilterを適応させようとすると、なぜかSafariで見ると適応されません。 静的なSVGだとdefsタグ内に設定するだけで良いのですが、動的にSVG内を変更したい場合などは適応するこ […]
JavaScriptで擬似要素を操作する概要 JavaScriptで擬似要素(:before、:after)を操作します。 取得 HTML CSS JavaScript 変更 JavaScript
2点間の緯度・経度の距離を求める概要 2点間の緯度・経度の距離を求めます。直線の距離なので、Googleマップなどの経路の距離ではないので注意が必要です。 参考文献 スクリプト 出力
JavaScriptで現在地を取得する概要 JavaScriptの関数Geolocation: getCurrentPosition()で現在地を取得します。 スクリプト 出力 テスト 現在地情報の取得を許可すると表示されます。コロン(:)の入った要素や属性の情報を取得する概要 XMLなどを読み込んだ際、コロン(:)がついた要素や属性がある場合に取得する方法です。 取得方法 コロン(:)の前にバックスラッシュ(\)を2つ入れます。 要素 属性
dialog要素とtemplate要素を使用してモーダルウィンドウを作る概要 dialog要素でモーダルを表示しつつ、template要素で表示する内容を切り替えるモーダルウィンドを作成します。 サンプル ソース HTML dialogの中をformで囲っています。buttonにformme […]日付のフォーマットを変更する概要 この関数を知らなかったのでメモ。 Date.prototype.toLocaleDateString() 内容 何も指定しない場合 言語コード指定 アメリカ 日本 オプションを指定 曜日を表示 年月日を日本語表記に […]
数字に3桁ずつ、カンマを入れる概要 価格表示する際の数値、「10000」を「10,000」のように、数字に3桁ずつカンマの入った文字列に変換する関数 スクリプト 使用方法ゼロパディング概要 ゼロパディングとは、画面や帳票などで数値を表現する際、書式で指定した桁数に満たない部分をゼロで埋めることである。 ゼロパディングの「パディング」には埋める、詰め物をするといった意味がある。 ゼロパディングは、例えば […]JavaScriptカンマが入っている文字列を数値に変換 概要 価格表示する際の、「10,000」を「10000」のように数値に変換する関数 スクリプト 使用方法 改行コードを＜BR＞に変換 概要 改行コードを＜BR＞に変換 スクリプト 使 […]
Vue.jsで暗号化・復号化を実装する概要 下記githubのソースをもとにVue.js用にプラグイン化しました。 https://gist.github.com/Agoreddah/511864e2c00da064586523b3087c30e2 ソース […]HLS(HTTP Live Streaming)動画を再生する概要 HLS(HTTP Live Streaming)フォーマットの動画をWEBで再生する方法 HLSに変換 hls.jsを読み込み VIDEOタグ スクリプトスムーズスクロール概要 最近はアニメーションでGSAPをよく使用しているのですが、スムーズスクロールを実装させたい場合、jQueryのeaseScrollだとバッティングしているのか正常に動きません。GSAPにもScrollSmoothe […]
ページのスクロールされている割合を表示させる概要 このサイトのヘッダーでも実装している、スクロールされている割合をページに表示させるJavaScriptを実装します。 ソース 解説 スクロール位置をwindow.scrollTop()で取得できるようにしています。 […]マウスチェイサー概要 マウスの動きに追随する、マウスチェイサー（英語にしただけ^^）を実装します。マウスに近づくにつれてゆっくり動くようにするのと、リンクにマウスオーバーで変形するようにもします。 ソース 解説 mp関数はマウスの座標を […]JavaScriptで円運動概要 JavaScriptで円を描くように要素が移動するアニメーションを実装します。 サンプル ソース 解説 x軸はCOSカーブ、y軸をSINカーブで実装します。degは角度、rは半径になります。
ページ内スクロール今回はページ内スクロールのリンクとページトップへのスクロールボタンを作成します。 ページ内スクロール HTML CSS ページトップボタン HTML CSS JavaScript 解説 a[href^=”#& […]
ハンバーガメニュー今回はハンバーガーメニューを作成します。 ヘッダーにハンバーガーメニュー配置 メニューを開いた状態 1.ハンバーガーメニュー部分 HTMLメニュー用にaタグを作成してその中にdivタグを追加しています。 CSSaタグはク […]