TAG : フロントエンド
-
- JavaScript
2023.04.23(ネイティブJavaScript版) タイムゾーンを考慮した指定日時までのカウントダウン。
#091#091オリンピックの開催日までのカウントダウンを実装することがあったので、動作するデバイスのタイムゾーンに依らず、開催地時刻で指定した日時までの正しい残り時間のカウントダウンがサイト表示されるようにJava...
-
- JavaScript
2022.05.28サイト上でデバイスのローカルから画像ファイルを選択して画像を表示。
#072#072画像アップローダーを実装したときに、選択した画像ファイルが分かるようにサイト上にimg要素として画像を表示したかったので、File APIを利用して、OSからファイルのドラッグ・ドロップかフォームのi...
-
- JavaScript
2022.05.27FetchとXMLHttpRequestの基礎知識。
#071#071JavaScriptでクライアントサイドからサーバーサイドへ非同期にHTTP通信を実行して別ベージのコンテンツやリソースの取得ができるFetchとXMLHttpRequestについての基礎知識のメモ。...
-
- JavaScript
2021.12.10フォームのフィールドに入力された内容を正規表現でバリデーション。
#061#061フォームのフィールドに入力された内容を、JavaScriptの正規表現を使って色々な条件判定でバリデーションする方法のメモ。 入力が空(未入力)ではないかのチェック。 入力が空白文字(スペ...
-
- 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」文を使う。 ...
-
- PHP
- WordPress
2021.04.02cssやjsファイルのキャッシュ対策として更新日時のタイムスタンプをクリエとして自動付加。
#032#032cssやjsファイルがブラウザのキャッシュから読み込まれて更新が効かないときの対策として、PHPでファイル更新日時のタイムスタンプをクエリとしてファイル名に自動付加させる方法。 &n...
-
- WordPress
2021.03.07WordPressで記事投稿日の色々な形式の出力フォーマット。
#031#031WordPressの記事投稿日の日本語表記、英語表記での色々な形式の出力フォーマット。忘れるのでメモ。 the_系の日付取得のテンプレートタグ「the_time()」は汎用性が無いの...
-
- API
2021.02.09Google Calendar APIのAPIキーとカレンダーIDでGoogleカレンダーのJSONデータを取得。
#028#028Google Calendar APIのAPIキーを利用して、カレンダーIDで指定したGoogleカレンダーのJSONデータをPHPで取得する方法のメモ。 ※ 「APIキー」と「カレンダーID」の取...
-
- 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の解析の途中で任意に実行する。 ...
-
- PHP
- WordPress
2021.01.23PHPの$_COOKIE(クッキー変数)または$_SESSION(セッション変数)でWordPressに閲覧履歴を表示。
#022#022PHPのスーパーグローバル変数の$_COOKIE(クッキー変数)とsetcookie()関数を使ってWordPressで閲覧履歴の表示を実装。 (クライアント側のクッキーにデータを保持させたくない場...
-
- API
2021.01.17InstagramグラフAPIでハッシュタグやアカウント名を指定して投稿の取得。
#021#021InstagramグラフAPIで、ハッシュタグまたは自分以外のアカウント名を指定してInstagramの投稿をJSONデータで取得する方法のメモ。 (アカウント名指定の場合、対象アカウントがビジネス...
-
- API
- PHP
2021.01.16InstagramグラフAPIで取得したJSONデータを整形して自分のインスタグラムの投稿をサイトで表示。
#020#020サイト上に自分のInstagramの投稿を表示させるためのJSONデータの取得方法とPHPでのJSONデータの整形方法のメモ。 ※ InstagramグラフAPIの有効期限の無いアクセストークンが事...
-
- PHP
2021.01.03PHPでベーシック認証。
#012#012PHPで、HTTPヘッダーを送信するheader()関数と、Webサーバーのヘッダー情報が取得できるマジック定数の$_SERVER(サーバー変数)を使用したベーシック認証の実装方法のメモ。 ※ ベー...