CATEGORY : JavaScript
-
- JavaScript
2023.04.23(ネイティブJavaScript版) タイムゾーンを考慮した指定日時までのカウントダウン。
#091#091オリンピックの開催日までのカウントダウンを実装することがあったので、動作するデバイスのタイムゾーンに依らず、開催地時刻で指定した日時までの正しい残り時間のカウントダウンがサイト表示されるようにJava...
-
- JavaScript
2023.03.25npmの基本的な操作コマンド。
#089#089Node.jsのパッケージマネージャーのnpmの基本的な操作コマンドのチートシート。忘れるのでメモ。 [ パッケージ ] 何らかの機能を持ったプログラム(コマンドラインツールやアプリケーシ...
-
- JavaScript
2022.10.02(jQuery版) video要素にマウスオンで動画を自動再生。
#082#082HTMLのvideo要素でmp4などの動画ファイルをサイトに埋め込み表示させているとき、jQueryを使って、マウスオーバーで再生、マウスアウトで停止させる方法のメモ。 ※ ライブラリーを使わずにネ...
-
- JavaScript
2022.09.30(ネイティブJavaScript版) video要素にマウスオンで動画を自動再生。
#081#081HTMLのvideo要素でmp4などの動画ファイルをサイトに埋め込み表示させているとき、動画上にマウスオンで自動再生させたかったので、マウスオーバーで再生、マウスアウトで停止させる方法のメモ。 ※ ...
-
- JavaScript
- PHP
2022.06.17桁の大きな数値を万進の表記に変換して表示。
#076#076SNSなどのAPIから取得したフォロワー数や再生数などを表示するときに、「123456789」を「1億2345万6789」など、桁数が多い場合に日本の命数法である万進の形式で表示したかったので、Jav...
-
- JavaScript
- PHP
2022.06.13byte単位のファイルサイズの表記をKBやMBに変換。
#075#075任意のファイルから取得したファイルサイズのバイト数が大きい場合、桁数に応じてKBやMBに単位を変換してサイズを表示したかったので、指定した数値をJavaScriptかPHPで変換する方法のメモ。 &...
-
- JavaScript
2022.05.29画像アップローダーの実装。(クライアントサイド)
#073#073CMSは必要ない仕様で画像アップローダーだけ実装したかったので、JavaScirptとPHPで実装した方法のメモ。(クライアントサイドの処理のメモ。) ※ サーバーサイドの処理は別記事を参照。 ※...
-
- JavaScript
2022.05.28サイト上でデバイスのローカルから画像ファイルを選択して画像を表示。
#072#072画像アップローダーを実装したときに、選択した画像ファイルが分かるようにサイト上にimg要素として画像を表示したかったので、File APIを利用して、OSからファイルのドラッグ・ドロップかフォームのi...
-
- JavaScript
2022.05.27FetchとXMLHttpRequestの基礎知識。
#071#071JavaScriptでクライアントサイドからサーバーサイドへ非同期にHTTP通信を実行して別ベージのコンテンツやリソースの取得ができるFetchとXMLHttpRequestについての基礎知識のメモ。...
-
- JavaScript
2022.04.08Blobの基礎知識。
#070#070サーバーにあるファイルや、PCなどクライアント内のローカルファイルなどをバイナリーデータとして、JavaScriptのBlobを利用してブラウザ上で扱うための基礎知識のメモ。 ※ バイナリーデータの...
-
- JavaScript
2022.03.19バイナリーデータの基礎知識。
#069#069JavaScriptでバイナリーデータの扱い方がよく分からなかったので、バイナリーデータ、メモリ、バッファーについて調べた基礎知識のメモ。 ※ JavaScriptでバイナリーデータ...
-
- JavaScript
2022.02.07(jQuery版) マウスオンでカーソルに追従するツールチップを表示。
#066#066jQueryを使って、マウスオンでツールチップを表示、表示エリア内ではマウスポインタに追従するツールチップを表示させる方法のメモ。 ※ ライブラリーを使わずにネイティブJavaScript(Vani...
-
- JavaScript
2022.02.06(ネイティブJavaScript版) マウスオンでカーソルに追従するツールチップを表示。
#065#065マウスオンでツールチップを表示するようにしたかったので、表示エリア内にマウスが入ったらマウスポインタに追従するツールチップを表示させる方法のメモ。 ※ jQueryを使った方法は別記事を参照。 &...
-
- JavaScript
2022.02.03要素の横幅と高さ、位置座標の取得。
#064#064JavaScriptでドキュメント内にある任意の要素の縦横サイズと位置座標を取得する方法。忘れるのでメモ。 ネイティヴJavaScriptで取得する場合 ライブラリ...
-
- JavaScript
2022.01.09ブラウザのウィンドウ高さの取得方法と動作デモ。
#063#063スマホブラウザ固有のメニューバーの高さが縦スクロールで変化することでブラウザのウィンドウ高さも変動するので、要素を全画面表示したい場合などでJavaScriptのどのプロパティーを参照してwindow...
-
- JavaScript
- PHP
2021.12.12テキストを1文字ずつ任意のHTMLのタグで囲うコーディングの一括処理。
#062#062見出しなどにCSSでアニメーションを付けるためにテキストを1文字ずつ任意のHTMLタグで囲いたかったので、一括でまとめて1文字ずつをコーディングする方法のメモ。 WordPressな...
-
- JavaScript
2021.12.10フォームのフィールドに入力された内容を正規表現でバリデーション。
#061#061フォームのフィールドに入力された内容を、JavaScriptの正規表現を使って色々な条件判定でバリデーションする方法のメモ。 入力が空(未入力)ではないかのチェック。 入力が空白文字(スペ...
-
- HTML / CSS
- JavaScript
2021.10.15サイト上で右クリックなどを禁止設定にする方法と禁止設定を一括解除する方法。
#055#055ユーザーの利便性を損なう以外に意味が無いと思う右クリック禁止を撲滅したいので、サイト上で右クリックや要素の範囲選択を禁止にする方法と、禁止にされている場合に一括で解除する方法のメモ。 ...
-
- JavaScript
2021.09.30JavaScriptで任意のテキストをデバイスのクリップボードにコピーする方法。
#054#054ページのタイトルやURLなどをコピーするボタンの挙動の詳細が知りたかったので、JavaScriptで任意のテキストをデバイスのシステムクリップボードにコピーの実装方法のメモ。 Jav...
-
- JavaScript
2021.08.04(jQuery版) フォームの入力内容をチェックしてエラーメッセージ表示。
#051#051jQueryを使って、フォームのinput要素とtextarea要素の入力内容をチェックしてエラーメッセージを表示する方法。(必須フィールドが未入力ならエラーにする。) フィールドが...
-
- JavaScript
2021.08.02(ネイティブJavaScript版) フォームの入力内容をチェックしてエラーメッセージ表示。
#050#050HTML5でフォーム内の要素に付加したrequired属性でのバリデーションが効かないことがあったので、JavaScriptでバリデーションする方法のメモ。(JavaScriptでフォームの入力内容を...
-
- JavaScript
2021.07.08ページをスクロールしてサイドバーが下端まで来たら固定して追従。
#049#049サイトのレイアウトが2カラムのときに、ページをスクロールしてサイドバーが下端まで来たら固定して追従させる方法。 ページのスクロール位置に応じてJavaScriptでサイドバーに任意の...
-
- JavaScript
- PHP
2021.06.25ページ移動のときにGET送信かPOST送信を使って任意の値を2ページ間で受け渡す方法。
#047#047サイト内で別のページに移動をするときに、セッションやクッキーで実装するほどでもない簡単な値の送受信をしたかったので、HTTPリクエストのGETメソッドまたはPOSTメソッドを使って任意の値を受け渡す方...
-
- JavaScript
2021.04.22別のページからの流入時に自ページのURLのアンカーリンク(フラグメント識別子)を取得。
#036#036別ページから流入してきた自ページのURLが「#」付きのページ内のアンカーリンク(URL fragment)だった場合に、特定のアンカーリンクで特定の処理をしたいときのメモ。 wind...
-
- JavaScript
2021.04.22(ネイティブJavaScript版) ページ内リンクをクリックでスクロール移動。
#035#035ライブラリーを使いたくなかったので、ネイティブJavaScript(Vanilla JavaScript)だけで、アンカーリンクでページ内の任意の位置にアニメーションスクロールの動作を実装する方法のメ...
-
- JavaScript
2021.04.22(jQuery版) ページ内リンクをクリックでスクロール移動。
#034#034jQueryを使って、アンカーリンクがクリックされたらページ内の任意の位置にスクロールアニメーションで移動させる方法。 HTMLのマークアップ 移動したい位置にある...
-
- JavaScript
2021.04.17JavaScriptでオブジェクトの持つ全てのプロパティーと値の調べ方。
#033#033JavaScriptで、オブジェクトがどんなプロパティーと値を持っているか調べたいことがあったのでメモ。 prototypeまで遡って参照する場合は「for-in」文を使う。 ...
-
- API
- JavaScript
2021.02.06iframeで埋め込んだYouTube動画をJavaScriptで操作。
#026#026iframeで埋め込んだYouTube動画の再生・停止などを、自サイトにはIFrame Player APIのファイルを組み込まずにJavaScriptで動的に操作する方法のメモ。 ...
-
- JavaScript
- PHP
2021.01.30正規表現でテキスト文内のYouTubeの動画URLを埋め込みコードに自動置換。
#024#024正規表現でテキスト文の中にあるYouTubeの動画のURLを取得、URLから動画IDを抽出して<iframe>の埋め込みコードに自動置換する関数の作成。 テキスト内...
-
- JavaScript
2021.01.29JavaScriptをページ読み込みの任意のタイミングで実行。
#023#023ブラウザがサーバーからレスポンスを受け取ったあと、ページ読み込みが完了するまでの間のJavaScriptの実行タイミングの指定方法。忘れるのでメモ。 DOMの解析の途中で任意に実行する。 ...