Bootstrap
Firebase
- Firebase Hostingを使ってみる
Firebaseを使ったプッシュ通知をやるための下準備。テスト用の環境としてFirebase Hostingを使ってみる。 - FirebaseでPCにプッシュ通知
スマホじゃなくてデスクトップ(PC)にプッシュ通知を出したい - FirebaseでPCにプッシュ通知でつまづいた箇所
適当な環境を使ってテストしていると諸々エラーなり出てくる。そのときにつまづいた箇所。
ajax
- ajaxでHTTPステータス:404等の取得
ajaxでサーバー自体につながらないは「404 Not Found」などで処理分岐させたい - jquery $.ajax()の基本型
$.ajax()をよく使うんだけど・・・いつも前に作ったヤツをコピペするので・・・まとめてみた。 - javascript 郵便番号から住所取得(GooglAPI+ajax())のソース
- ajax()を実行時に「Illegal invocation」が出たときの対処
- javascript、ajax:formdataの取得(get())
ajaxで使った「FormData()」の値を取得したい。 - Form投稿の仕組みについて
ベストなform投稿の仕組みを考える - ajaxとform投稿
- js ajax+form送信で「abort」が「Uncaught TypeError」
ajaxで成功時にform.send()するとabortが読み込めない的なコトを言われた - iOS(アプリ)+ajaxでDataCloneError
Webやアンドロイド(アプリ)では問題なかったけどiOS(アプリ)のみで「DataCloneError: The object could not be cloned.」が出てくる - js FetchAPIのメモ
ajaxじゃなくFetchAPI / jqueryを使わずにネイティブのJavascriptでいけるのがFetchAPIらしい。
form
- html+formのテキストフィールドやテキストエリアでの文字数制限
htmlだけで対応可能。 - jqueryでformの各値の取得やセット
テキストエリアやラジオボタン、チェックボックス等の値取得 - javascriptのajaxとformのボタンタグについて
formのbuttonタグにtype属性無しだとajaxで面倒だったりする。 - jquery tdクリックでその行の色変更とチェックボックス・ラジオボタンにチェック
tableタグで一覧表示して、各行にチェックボックス・ラジオボタンがあるときのチェックのon・off処理 - javascript:formタグ無しでform送信
javascriptでformタグを作成・値等をゴニョゴニョしてform送信する - jquery+form 値が変更された、チェックされたなどの各イベント
入力された・チェックされたなど・・・formで使う各イベント - jquery $.ajax()の基本型
$.ajax()をよく使うんだけど・・・いつも前に作ったヤツをコピペするので・・・まとめてみた。 - formのcheckboxやradio、selectのreadonly
「type=text」と違って「readonly」が使えないので、その代案 - jquery リンクやボタンをクリックしたら自身と他のリンクやボタンを無効
formの送信ボタンの連打を防ぐ。 - PHP+FORMの処理の流れ
いまだにベストな処理の流れにたどり着かない。 - jqueryでフォームの有効・無効化
登録フォームと確認画面を1ファイルでまとめたい。HTMLの変更は出来る限り無しで。 - jquery Formの選択したファイルの情報
- Form投稿の仕組みについて
ベストなform投稿の仕組みを考える - ajaxとform投稿
- PHP+FORM(ファイルあり)の処理の流れ
- js 「getElementById(〇〇〇).submit()」でエラー
jqueryじゃなくてjavascriptでsubmit()したときのエラー - jquery 「type="button"」「type="submit"」で送信
イベントの伝播絡み - js ajax+form送信で「abort」が「Uncaught TypeError」
ajaxで成功時にform.send()するとabortが読み込めない的なコトを言われた - iOS(アプリ)+ajaxでDataCloneError
Webやアンドロイド(アプリ)では問題なかったけどiOS(アプリ)のみで「DataCloneError: The object could not be cloned.」が出てくる - JS formで「type=text」等でエンターキーを押すと送信されるのを防ぐ
送信ボタンの有無に関わらず送信されるので防ぐ - js+html 「ブラウザバックで戻ってきた」ときにformの値が消えているコトがある
- html+js、php formでファイルアップロード前に容量チェックを行う
formからファイルをアップロードしたいけど、サーバに送る前に容量チェックをしたい - JS・PHP・HTML 大きいファイルをアップロード(JSのライブラリは無し)
分割アップロードとか・・・そんなヤツ。ライブラリは使わない。 - formのtextareaをhtmlエディターにしたい(WYSIWYG)
WYSIWYGで、よくあるtextareaタグみたいなトコをHTMLで何かする - Form送信のバリデーションの流れのメモ
Form送信時の値チェックについての諸々・・・メモ - QUILL(javascript / WYSIWYG / htmlエディター)のメモ
WYSIWYGのQUILL(htmlエディター)ってのを使う - js FetchAPIのメモ
ajaxじゃなくFetchAPI / jqueryを使わずにネイティブのJavascriptでいけるのがFetchAPIらしい。 - ネイティブのjavascriptでformの各値の取得やセット
ネイティブのjavascriptでテキストエリアやラジオボタン、チェックボックス等の値取得 - js ファイルを圧縮して送信
ファイル送信時に圧縮して送りたい - js、php ファイルを分割して送信
大きいファイルを分割して送る - js 改行禁止なtextarea
「input type=text」にしたいけど、長さ的に折り返ししたい…
Google関連
- GoogleMAPでCtrlキーを押さずにマウスホイールで拡大・縮小させる設定
- javascript 郵便番号から住所取得(GooglAPI+ajax())のソース
- javascript 現在地の緯度・経度取得(GPS機能、GooglAPI)のソース
DOM関連
- jquery 要素の取得、追加など
要素からテキストを取り出したり、追加したり・・・そんなヤツら。innerHTMLやhtml()、append()など - jqueryでformの各値の取得やセット
テキストエリアやラジオボタン、チェックボックス等の値取得 - Jqueryで対象の親や子要素を取得(parent()、parents()、children()、find()、next()、prev()など)
対象の親・子・前・次の要素を取得する - jquery 取得した要素をループで処理
取得した要素をいじって表示したり、いじった値を返したりしたい。 - jquery 対象の要素が何番目の要素なのかが知りたい(index())
例えば、クリックされたliタグが何番目のliタグなのかが知りたい - jquery 構成要素の取得
取得したHTMLの各親を知りたい - jquery ワイルドカードを使って要素を取得
「〇〇で始まる、終わる、含む」という条件で取得したい - jqueryを使わないDOM関連(getElementById / querySelector)
ネイティブのjavascriptでどうにかしたい - jquery data属性から要素を取得(find())
「data-〇〇〇=""」の要素を取得したい - javascript xpathから要素取得
jqueryではxpathから要素取得が出来なくなったそうなので、javascriptから取得 - html+jquery iframeの中からiframe自身を削除したい
自分自身を閉じたいってヤツ - js, jquery イベント内での要素の取得
思うトコがあって…jqueryでのイベント発生時の対応にjavascriptで要素を取得したい - JS iframe内のクリックされた要素の取得(contentWindow)
- js 特定の要素を持つ全タグを取得(querySelector(), querySelectorAll())
id属性を持つ全タグが欲しい… - javascript svgタグをappendChild()しても表示されない(createElementNS())
innerHTMLでsvgを追加したら表示されるけどappendChild()すると表示されない…という問題 - ネイティブのjavascriptでformの各値の取得やセット
ネイティブのjavascriptでテキストエリアやラジオボタン、チェックボックス等の値取得 - js,jquery 任意のセレクターを除く…イベント設定(is()、matches())
設定済みのイベント設定から特定の要素を除外したい - javascriptで要素を追加したい(createElement、createTextNode、createElementNSなど)
タグじゃなくてテキストを追加したいときにcreateElementだと出来ない…ついでに複製方法も。 - javascript innerHTMLとappendChildの混在
innerHTML→appendChildはいいけど、appendChild→innerHTMLはよくない…ってお話
イベント関連
- jquery 一つのイベントに対して複数の要素をトリガーにしたい
「class=hoge」と「class=foo」のクリックイベントをまとめて指定したい。 - bootstrapでモーダルのイベント関連
- jquery 対象の要素が何番目の要素なのかが知りたい(index())
例えば、クリックされたliタグが何番目のliタグなのかが知りたい - JavaScriptでウィンドウのリサイズの監視
ウィンドウの「リサイズ中」じゃなくて、「リサイズ完了時」に処理を実行したい - jquery+form 値が変更された、チェックされたなどの各イベント
入力された・チェックされたなど・・・formで使う各イベント - jquery リンクやボタンをクリックしたら自身と他のリンクやボタンを無効
formの送信ボタンの連打を防ぐ。 - jquery 複数のイベント設定で発火しない
イベント設定したけど発火してくれない・・・「return false」じゃなく「preventDefault()」を使ったほうが良さげ。イベントの伝播絡み。 - jquery ページを離れようとしたときにメッセージ表示
formで入力したあと、ブラウザの戻るを防ぎたいけど・・・その代案。 - jquery イベントを発火させたい
例えば、formの入力チェックをさせるときの一番最初のとき・・・とか。 - js キー入力のチェック
任意のキーが押されたときに何かしたい。 - js ページ内リンクでヌルヌル移動してもらうヤツ
ページ内リンククリック時にジャンプさせるんじゃなくて、画面がスクロールして対象まで移動するってヤツ - jquery 要素内に要素が追加されるのを監視(MutationObserver())
- jquery 「type="button"」「type="submit"」で送信
イベントの伝播絡み - JS formで「type=text」等でエンターキーを押すと送信されるのを防ぐ
送信ボタンの有無に関わらず送信されるので防ぐ - JavaScript イベントを発火させたい(dispatchEvent())
ネイティブのjavascriptでのイベント発火 - js 「ブラウザバックで戻ってきた」ときの制御(performance.getEntriesByType())
「ブラウザバックで戻ってきた」だけなのか、それを知りたい - js ブラウザバックの対応
ブラウザで「戻る」ボタンを押したときの対応 - css/jquery クリックやタップしたときの枠線を消す(focus, outline:none, blur())
ブラウザの問題かCSSだけでは対応できないこともある。そのときはJSでフォーカス解除(blur())。 - jquery ページ読込みんだらJSを走らせたい($(document).ready(),$(function(){})、$(window).on('load',function(){}))
処理の対象要素より先にjQueryを記載するとき「ページを読み込んだらjQueryを実行」ってしたい - jquery イベントを発火させたい(on(), trigger())
規定のイベントやカスタムイベント(独自定義したイベント)を作成・発火させたい - js FetchAPIのメモ
ajaxじゃなくFetchAPI / jqueryを使わずにネイティブのJavascriptでいけるのがFetchAPIらしい。 - js, jquery イベント内での要素の取得
思うトコがあって…jqueryでのイベント発生時の対応にjavascriptで要素を取得したい - JS iframe内のクリックされた要素の取得(contentWindow)
- javascriptでイベントの追加、削除、引数ありなど(addEventListener, removeEventListener)
ネイティブのjavascriptでイベント関連のメモ - jquery イベント発火した際に何が実行されているか知りたい
ドコかで何かをしている…ってのは分かるけど、ドコで何をしているのかが分からないので知りたい - ネイティブのjavascriptでformの各値の取得やセット
ネイティブのjavascriptでテキストエリアやラジオボタン、チェックボックス等の値取得 - js,jquery 任意のセレクターを除く…イベント設定(is()、matches())
設定済みのイベント設定から特定の要素を除外したい - javascript ページ読込みんだらJSを走らせたい(DOMContentLoaded、load)
処理の対象要素より先にjavascriptを記載するとき「ページを読み込んだらjavascriptを実行」ってしたい - js ファイルを圧縮して送信
ファイル送信時に圧縮して送りたい - js 長押しのイベント
スマホ用に長押ししたときのイベント処理 - javascript イベントを発火させたい(dispatchEvent()、Event()、createEvent()、initEvent())
jqueryじゃなくネイティブのjavascript(バニラjavascript)でイベントを発火 - 対象が表示されたら何かしたい(IntersectionObserver())
- js 1回だけ実行させたいイベント設定(addEventListener()のオプション)
1回だけ実行したいイベント…removeEventListener()するために実行内容を関数にするのは…面倒
CSS
- JqueryとCSSでローディング画像
読み込み中のグルグル画像を出しておきたい。できれば画像ファイルを使わずに。 - jqueryでhover時のCSSの記述
hover時のCSSをjqueryで記述したい - jquery 「:hover」や「:active」のCSSを書き換えたい
「:hover」は普通にあるけど「:active」とかが無い。 - javascript CSSから「:hover」で指定されているスタイルを無効にする
スマホ端末でリンクやボタンをタッチした後に「:hover」のスタイルが残ってしまうので、どうにかしたい - css、JS フォントサイズを親要素に合わせたい
フォントサイズをウィンドウサイズじゃなくて親要素に合わせたい - css/jquery クリックやタップしたときの枠線を消す(focus, outline:none, blur())
ブラウザの問題かCSSだけでは対応できないこともある。そのときはJSでフォーカス解除(blur())。 - js iframe内のCSSを変更したい(クロスドメイン)
ドメインの異なるページをiframeで読み込んでCSSを変更したい
knockout.js
- knockoutのメモ
以前にメモってた内容たちへのリンク
配列、オブジェクト
- PHPの変数をJavaScriptで使う(json_encode())
JavaScriptの中でPHPの配列を少ない労力で使えるようにしたい。 - javascript CSVと配列の変換(split()、join())
javascriptで、CSVのような何かで区切った文字列を配列にしたりその逆だったり。 - javascriptの配列、オブジェクト(連想配列)の作成
javascriptで配列やオブジェクト(連想配列)を新規作成する。 - jquery JSONの相互変換
JSONの文字列を配列にしたり、その逆をしたり。 - js 配列・オブジェクトの値渡し(ディープコピー)(JSON.parse(JSON.stringify()))
配列やオブジェクトはそのままコピーだと元も変わる - JS 配列・重複データの確認
- js PHPの「http_build_query()」みたいなヤツ
javascriptでPHPの「http_build_query()」みたいな感じでキーバリューな配列からgetパラメータのついたURLを作りたい - js 配列やオブジェクトの個数(keys,length)
配列やオブジェクトに何個データがあるのか知りたい
未分類
- node.js+electronのインストから「Hello World」出力と配布用の作成
node.jsってヤツを調査していたらjsベースのデスクトップアプリが作れるとか・・・少し寄り道して試してみた - Javascript/Jqueryで現在のURLの取得とパース
現在表示しているURLとパースした内容(ホストやパスなど) - javascript ブラウザの「戻る」で前のページのjquery等が実行されたままなので防ぐ
基本、気にしなくていいんだけど、Firefoxだと面倒。 - javascriptで大文字・小文字、半角・全角の変換
大文字を小文字に変換したり、全角英数を半角英数にしたり - HTML5+jquery カスタムデータ属性(data-〇〇〇)
「data-〇〇〇」の値の設定・取得関連 - メアドのバリデーションチェック
非常に面倒なメアドのバリデーションチェック。PHPだと「filter_var()」でチェック可能 - jquery $.each()でbreak、continue
$.each()内で「break、continue」をするときは「return」で「true / false」を使う - Javascript+アンドロイドでデバッグ
アンドロイド端末でJavascriptのデバッグをする。 - jquery 「条件を満たすときのみ処理実行」を複数設定
普通にif文でやればいいんだけど、数が増えると見づらくなるのでどうにかしたい。 - Jquery 変数に関数名をセットして実行
- jquery 数値かチェック
$.isNumeric()、isNaN()、isFinite()や正規表現などでチェック - Javascriptでリダイレクト(ページ遷移)、リロード(window.location.href / hash、location.reload()、window.open())
- Lazy Load(画像の遅延読み込み)を実装する方法
- jquery ブラウザのリロードを無効にしたい
- PHP・jqueryでファイルを大容量のファイルをアップロード(jQuery-File-Upload)
そのままアップすると落ちる・・・。メモリの割り当て変更がNGのとき。jQuery-File-Uploadってのを使うとき。 - PHP+jquery、formなどの組み合わせのセキュリティ関連
SQLインジェクションやCSRF対策など。 - js 横幅のみ、空白+横幅などの取得(width, innerWidth, outerWidth)
幅と言っても空白アリ、線幅アリなど含める・含めないで変わってくる - wordpressのwpautop()をjsで実装
JS側でwordpressのautop()と同等のコトをしたい - JSで年月日の取得
年月日の取得やユニックスタイムとの相互変換など。 - JSで10進数と16進数の相互変換
- js setIntervalとsetTimeout
一定時間で何かしたい。 - jQuery Datepicker関連
formでテキストフィールドをクリックしたらカレンダーが出てきて日付をクリックしたらテキストフィールドに値が入るってヤツ。 - jsで数字をカンマ区切りにする
PHPで言うところの「number_format()」ってのをやりたい - JS 全て置き換えしたい
- jquery formのテキストフィールドの内容をクリップボードにコピーしたい
- PHP、JS ループ処理内のbreak,continue
- CKEditorについて
CKEditor(FCKEditor)を改修することになった。 - js、PHP 数値の最大値
整数の最大値:9京ちょい - jquery ドラッグして移動(jquery UI / sortable)
一覧を並び替えしたい - JSでエスケープ処理
セキュアコーディングの絡みで「<」を「&lt;」とかにしたい。 - js textarea、テキストフィールドのキャレットの位置(カーソル位置)を変更したい(setSelectionRange())
好きな場所にカーソルを移動させたい - JSでファイルを読み込みUnicodeに変換(encoding.js)
本当はUTF8に変換しようとしたけど、ブラウザで表示する分にはUnicodeでOKっぽい - JSでファイルをDL。ついでにSJISに変換(encoding.js)
javascriptでファイルをダウンロードさせる必要があった。しかもShift-JISに変換する必要もあった。 - js 「!」マークが2つの論理演算子(二重否定)
「 if ( !!hoge ) {} 」等の「!!」について - js URLエンコード(encodeURIComponent())
JavascriptのURLエンコード。 - js 無名関数で継承
- 「.map(ソースマップファイル)」が404エラー
404自体は問題ないけど、404が原因で他のトコでエラーになるという問題発生したので・・・その解決にいたるまで。 - js サブウィンドウから親ウィンドウに値を渡す(クロスドメイン)window.opener、window.open()、.postMessage()
サブウィンドウでセットした値を親ウィンドウに渡したい - JS 四捨五入、切り捨て、切上げ(round,floor,ceil)
- js const、let、varの違い
変数の宣言のときに使うconst、let、var。 - JS リンククリック時にGETパラメータを追加してからページ遷移してほしい
他人が作ったライブラリとページ内リンクの絡みでGETパラメータが渡ってくれないコトがある - PWAでサイトをアプリ化する
WEBサイトをアプリ化 - Javascriptのコメント文をどうにかしたい
覚書き的な内容をコメントに残したいけど、それを見られるのはちょっと恥ずかしい・・・ので対策を考える - JS AndroidでのJavascript処理をデバッグしたい(Chrome)
PCでは問題無いのにスマホでJSの挙動がおかしい。ということでデバッグする - js スマホでタップ(click)後にCSSを変えたい(@media (hover: hover) {})
PCだと問題ないけどスマホだと不思議な挙動になる - js window.location.hrefのgetパラメータ取得
「?xxx=xxx」がいるか調査したい - javascript: 文字列の連結 / テンプレートリテラル、ヒアドキュメント(${})
文字列と変数を合体させて代入・出力させるのにテンプレートリテラルってのがあるそうだ - jsでURLにタイムスタンプを付与したい
URLからgetパラメータを取得して、タイムスタンプを追加したURLにしたい - javascript メソッドをまとめるオブジェクト、クラス、クロージャについて
メソッドをまとめた何かをつくるにはオブジェクト、クラス、クロージャってヤツらがいる - javascript クラスの継承
クラスとクラスの継承について - php、js 配列で値が無ければ別の値を返したい(?? 演算子(Null合体演算子))
配列の任意のキーにアクセスするときのエラーを防ぎたい - CSS、JSで中窓 半透明のレイヤーの中に透明の枠を追加したい
一部だけ目立たせる方法の一つに対象以外を半透明のレイヤーを乗せたい…けどそんなコトはできないっぽいので無理やり対応 - node.js 複数のjsファイルを一つにまとめたい
jsファイルが複数あるので一つにまとめたい(node.js必須) - js webサイトからアプリを開きたい
諸々考慮するとjavascriptになるっぽい