JavaScript
jQuery で簡単にイベントの ON/OFF を行う方法
イベントリスナー関係の難しそうな処理が不要で、初心者でもイベントのオン・オフを切り替えることができる方法です。 要は、イベントを起こさせたくないタイミングで、上記で設定した ID を消したり、つけたりするだけです。 HT […]
JavaScript で数値を3桁区切りにする 【2017年版】
jQuery のメソッドとして使う方法を使っていたのですが、念のため（2017年）に調べなおしてみました。 すると、あまり知られていませんが、最近のブラウザなら組込み関数になったようです。 console.log((12 […]
jQuery 動的に追加した要素の確実な取得方法
on で動的に生成した要素が取得できない場合は、多くは、on のイベントになっている要素が静的でないことが原因です。 動的に生成される要素は不確定要素であるため、起点にしてしまうと取得できないことがあります。 解決方法は […]
初心者のための jQuery の基本情報 （ jQuery 入門以前）
jQuery3 が2016年に正式リリースされました。 が、現場ではまだ1系、2系を使っているところも多いと思います。 また、なぜ3種類もあるのか、今からどれを使ったらいいのかなど、初心者向けに解説します。 公式情報 公 […]
[PHP x Ajax] 非同期でセッションを複数処理する場合の注意点
発生した問題点: 時間のかかる非同期処理を実行 -> その処理が終了する前に画面遷移 画面遷移後、セッションを更新していると、前の画面の処理が終わった瞬間、セッション情報が古くなってエラーが発生 どうやら、非同期処 […]
jQuery で作るシングルページ・アプリケーション(SPA) :70行で動くサンプル付き
こんにちは。jQuery 大好きです。 SPAが気になるこの頃です。 AngularJS や Vue.js を時間のある時にさわって、何とか使えることが分かりホッとしていますが、もっと簡単に使えないものかな、と思っていま […]
jQueryでクロージャ
JavaScriptでそのもので書けば早いかも知れませんが jQueryを使っているサイトなら簡単に書けるので 活用しないともったいない気がします。 ・最初の処理を確認するフラグを 用意するのがポイントです。 var I […]
jQuery でラジオボタンを選択するには
今まで属性の「checked」を true にしていましたが、 下記のやり方を見つけました。 $(“#hoge input[name=’hoge’]”).val([‘a’]); こちらの方が簡単ですね。val 値の中で […]
jQuery で選択された要素の属性値を取得するには
セレクトボックスの選択された値は、通常 val() で取得しますが、 option に属性を追加することで、複数の値を取得したい時があります。 会員1 ↓ たとえば title 属性を追加して、カテゴリIDをセットすると […]
CKEditor にプラグイン「codemirror」を追加する方法
思いのほか高機能で、手軽に導入できたのでメモしておきます。 CKEditorの他のプラグインもほぼ同じ手順で導入することができます。 このプラグインを入れると、「ソース」ボタンを押した時の 表示がきれいなシンタックスハイ […]
JavaScriptでよく利用するエスケープシーケンス
エスケープシーケンスとは、バックスラッシュ記号、または￥記号から はじまる特別な記号を指します。パラメータの中に指定すると、 改行やタブといった特別な処理を行うことができます。 そのほか、シングルまたはダブルクォーテーシ […]
iPad(+Safari)で、 select の option に対して、 hide,show が効かない現象に対する対策
こちらの記事を参考にしました。 http://moshimoworks.com/2012/02/14/jquery-select-tag-manipulation/ MacのSafari（webkit系）では、jQuer […]
JavaScriptの正規表現の書き方
便利な正規表現。 慣れている時はいいけれど、少し時間を置くと忘れがちです。 入力された値は、改ざんを十分考慮しないといけないので、 最終的にはサーバサイドでチェックする必要があります。 PHP や Ruby で正規表現を […]
構文チェックサービスのまとめ
Eclipse のようなIDEの良いところは、構文チェッカが付いていて 間違いがあれば、その場で表示されることだと思います。 エディタでは、構文チェッカがほとんどありません。 色々調べると、Notepad++ では、PH […]
ブラウザで印刷プレビュー画面を出す
印刷プレビュー画面を出すための仕組み。 将来的には、もっと簡単にできてもいいと思いますが、 JavaScript でやるしかないようです。 [2015.08.04 補足] 上記は古いIEのみで動くようです。XPでの案件で […]
HTMLを先に読んで、ﾍﾟｰｼﾞの一部分だけ Ajax で読み込む方法
作ってみると、用途が広がりそうだったのでメモしておきます。 ﾍﾟｰｼﾞの骨子にあたる部分(HTML)は先に読み込んでおいて、 時間のかかる読み込み部分をAjaxで読み込む時の 処理になります。 ローディング画像をページ全 […]
Ajax をオフにした jQuery Mobile でローディング機能を実装する方法
概要 jQuery Mobile を使ってウェブアプリを作ろうとすると container の部分にリンク先のページを読み込むので データベースからデータを頻繁にひっぱってくるページの場合、 遷移後にコンテンツがきちんと […]
ckeditorで複数のインスタンスを処理する場合
はじめはjQueryでやろうとしましたが、 調べてみたら、とてもシンプルに書くことができました。 for(var i in CKEDITOR.instances) { var data = CKEDITOR.instan […]
jQueryのあの書き方をJavaScriptで書き直す時の覚書
とある案件で、IE6時代に作られたサイトを改修しています。 得意のjQueryが導入できないという面倒な環境で、 JavaScriptで何かする時には、そのまま書くしかない状況です。 Ajaxの勉強も、昔はDOMを操作す […]
prototypeとjQueryの共存について
個人的には共存は極力避けた方がいいと思います。 お客様の現場で事例があったので、どういった 使われ方があるのか、確認してみました。 ① まず以下の順番で読み込みます。 prototype jQuery ② クロージャ内は […]
JavaScript マウスの位置情報について
横方向のX座標と、縦方向のY座標がありますが、 いくつか取得方法があり、性質がそれぞれ異なる上、 ブラウザによっては使えないものもあります。 以下はその見取り図です。 IE Firefox Safari O […]
JavaScriptでオブジェクトを削除するには
オブジェクトは delete で削除できる、と説明されているところが 多いのですが、実際、消えませんでした。 var positionXY = new Array(); delete positionXY; 上記だと、残 […]
jQueryプラグインを作るときのテンプレート
今後、よく使いそうなのでストックしておきます。 まずはヘッダー。 /* * hoge.js 0.0.0 – 簡単な説明 * * Copyright (c) 2013 Web Atlier Midori * License […]
要素をランダムで取得する方法と、undefined の対応
jQueryを使っています。 altに番号が振ってある複数の画像の中から ランダムで１つだけ抜き出す、というよくあるパターン。 画像の数は var length = $(“.picture img”).length; こ […]
表の行をドラッグできるようにする
シンプルにいきます。 CDNを使って、jQuery本体とjQueryUIを読み込みます。 <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2 […]
CDNの活用
通常、サーバ上に設置したjQueryファイルを使用する代わりに、 GoogleやMicrosoftがCDN(Content Delivery Network)にて 提供しているファイルを読み込んで使用することができます。 […]
jQueryダイアログボックスについてまとめてみました
ほとんど確認用で「alert」しか使ったことが なかったのですが、調べたらダイアログは 3種類もあって、今まで損をしていたなと 後悔しています…。 alert confirm prompt アラート文を表示するだけの「a […]
FileAPIで画像を選択したらプレビューを表示する
HTML5の実装はまだ発展途上ではありますが、 インターネット・エクスプローラもバージョン10になって ようやくFileAPIでは、Firefox、Chromeと 肩を並べられるようになったようです。 ファイルの書き込み […]
オリジナルのコンテキストメニューの作り方
簡単なウェブアプリケーションが展開できる jQueryプラグインを作っていたところ、 どうしても独自のコンテキストメニュー （右クリックで出てくるメニュー）が欲しくなりました。 既存のものを探したのですが、どうもしっくり […]
画像の大きさを指定エリアの大きさにフィットさせる方法
指定した表示域におさまるように画像を表示し、 画像の大きさが表示域に収まらない場合に 自動縮小するロジックです。 HTML5のCanvasを使うようになってから よく使うようになったので流れをひかえておきます。 先にコー […]
