よくある Webページ上に ファイル を ドラッグ & ドロップ して アップロード する アプリ を作ってみます。
この記事では サーバー側 と クライアント側 をまとめて掲載しています。
サーバー側は ASP.NET WebAPI、クライアント側は HTML + JavaScript で実装します。
アップロード は POST で フォームデータ として アップロード します。
目次
サーバー処理
クライアント処理
HTML
CSS
JavaScript
サンプルコード
GitHub - garafu / samplecode_FileUpload
ダウンロード zip
サーバー処理
WebAPI 用 の コントローラ を作成します。
受け取る ファイルデータ ...
ラベル jQuery の投稿を表示しています。 すべての投稿を表示
日本語入力 確定 時に イベント を発生させる jQuery プラグイン
JavaScript で 日本語入力 ON のときの 確定イベント(日本語変換が終わって入力済みを意味する Enterキー 入力) を取得する jQuery プラグイン を作ってみました。
日本語入力中はイベントを発火せず、フォームとして入力が終わって確定する Enterキー入力 で イベント を発火する jQuery プラグイン です。
参考までにですが…日本語入力 ON と OFF のときの Enterキー の挙動については以下のようになります。
keypress があるかないかが 日本語入力中かどうか を判定するポイントになります。
IME変換中の Enterキー
keydown → keyup
IME変換しない Enterキー
keydown → keypress → keyup
目次
デモ
プラグイン
利用方法
デモ ...
Akinari Tsugo
23:05
JavaScript,
jQuery
Function.prototype.bind を用いた イベント の アタッチ、デタッチ
.ref dt em {
float: left;
dispaly: inline-block;
width: 5em;
}
.ref dt span {
margin-left: 3em;
}
Function.prototype.bind( context ) を用いると "スコープ (this) の固定" が出来ます。
JavaScript で オブジェクト指向 な開発を行っていると、"スコープ (this) の固定" は大変便利です。
ここでは 関数の詳細 と 使用例 (jQuery) を記載します。
.bind(context [, arg1 [, arg2 [, ...]]])
概要
"this" および 引数 を固定して、新しい関数を生成します。
引数
{object}context
関 ...
Akinari Tsugo
0:55
closure tools,
JavaScript,
jQuery
クロスドメイン制約 を JSONP で 回避 （WCF + jQuery）
クロスドメイン制約 を 回避 する サーバー実装 を WCF サービス を用いて JSONP で実現します。
クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。
ここでは、"サーバー側" に手を加えて クロスドメイン通信 を実現する方法を載せます。
具体的には、JSONP形式 で レスポンス を返せるようにすることで、jQuery 等 で クロスドメイン通信 を行えるようにします。
今回は、WCF サービス を利用しての実装を行います。
サーバーサイド （WCF サービス）
クライアントサイド （jQuery）
※ WCF サービス で JSONP に対応した サービス を実装した場合、コールバック関数名 を指定する パラメター は callback になるようです。 ...
Akinari Tsugo
21:48
C#,
jQuery,
WCF,
クロスドメイン通信
クロスドメイン制約 を JSONP で 回避 （ASP.NET MVC + jQuery）
クロスドメイン制約 を 回避 する サーバー実装 を ASP.NET MVC を用いて JSONP で実現します。
クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。
ここでは、"サーバー側" に手を加えて クロスドメイン通信 を実現する方法を載せます。
具体的には、JSONP形式 で レスポンス を返せるようにすることで、jQuery 等 で クロスドメイン通信 を行えるようにします。
サーバーサイド （ASP.NET MVC）
クライアントサイド （jQuery）
今回は次の図に示すような環境でのクロスドメイン通信を想定し、
この状況でサーバーBにおいて JSONP 形式 で応答する 実装 を載せます。
個人的な趣味趣向の都合で ASP.NET MVC でサンプル ...
Akinari Tsugo
16:57
ASP.NET,
C#,
jQuery,
クロスドメイン通信
クロスドメイン制約 を サーバー設定 で 回避
.inputvalue dt
{
width: 3em;
float: left;
}
.inputvalue dd
{
margin-left: 3em;
}
クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。
ここでは、"サーバー側" の設定変更で GET リクエスト に関してクロスドメイン通信を実現する方法を載せます。
具体的には、Access-Control-Allow-Origin ヘッダー を無条件に返す設定をすることで、
jQuery 等 で クロスドメイン通信 を行えるようにします。
Akinari Tsugo
0:53
JavaScript,
jQuery,
クロスドメイン通信
IE8, IE9 環境 において jQuery で クロスドメイン通信 する方法
クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。
ここでは、"クライアント側" ── 特に IE8, IE9 ── において クロスドメイン通信 を実現する 実装方法 を記載します。
IE8、 IE9 で クロスドメイン通信 を行う場合、 XDomainRequest を利用します。
この XDomainRequest は XMLHttpRequest と似て非なるもの（詳細は こちら）なので、そのまま jQuery.ajax で使うことが出来ません。
jQuery の バグトラック によると、この違いは プラグイン で吸収するそうです。
で、その プラグイン と 使い方 は以下の通りです。
XDomainRequest 対応 プラグイン を利用した クロスドメイン通信 の 実装
...
Akinari Tsugo
0:53
Internet Explorer,
JavaScript,
jQuery,
クロスドメイン通信
HTTP通信 の キャッシュ 無効化
<!--
.menu
{
border: 1px solid silver;
padding: 1em 2em;
}
-->
WEBアプリケーション 構築 をしていると、データ更新したはずなのに ブラウザ に反映されない！！ ってときがあるかと思います。
ここでは、「新しい情報が取得できない」問題に対する HTTP通信 キャッシュ の 無効化 方法を幾通りか載せます。
状況に応じてどれか、または、いくつかを選択して キャッシュ を 無効化 してください。
静的コンテンツ
HTML の METAタグ に書く
HTTP サーバー の設定を変える（IIS）
リクエスト に 無意味な文字列を付加する
動的コンテンツ
サーバー処理に書く（C# & ASP.NET MVC）
リクエスト に 無意味な文字列を付加す ...
Akinari Tsugo
22:36
C#,
HTML,
JavaScript,
jQuery,
キャッシュ
IE の デフォルト機能 を 禁止 する
業務アプリを開発していると良く遭遇するこの問題…。
基本的には HTML のトップレベルで対応することで対策が無難と思います。
いわゆるホワイトリスト方式（基本は拒否。許可するものだけリストアップ。）です。
禁止したい機能は以下のようなものを想定しています。
テキスト選択
右クリックメニュー（コンテキストメニュー）
Ctrl を押しながら マウスホイール
テキスト、ファイルのドラッグ & ドロップ
サンプルコード with jQuery
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text ...
Akinari Tsugo
23:22
Internet Explorer,
JavaScript,
jQuery,
拡張
jQuery で クリック と ダブルクリック を 判別実行する プラグイン
.table {
width: 100%;
border: 1px solid silber;
border-collapse: collapse;
margin: 0.5em 0;
}
.table th
{
border: 1px solid silver;
padding: 0.3em 1em;
}
.table td
{
border: 1px solid silver;
vertical-align: top;
padding: 0.3em 1em;
}
jQuery で クリック と ダブルクリック を別実行する プラグイン を作成しました。
通常 ダブルクリック すると、クリック 2回 と ダブルクリック が発生してうまく扱えません。
このプラグインを利用することで、クリック と ダブルクリック に対して別の処理を割り当てるこ ...
Akinari Tsugo
22:36
JavaScript,
jQuery,
拡張
jQuery で ブラウザ、バージョン、プラットフォーム を判別する プラグイン
jQuery で閲覧ブラウザ、バージョン、プラットフォーム を判別する プラグイン を作成しました。
jQuery 1.9 から browser のサポートがなくなるので、その対応用プラグインです。
タブレットと携帯電話(モバイル)の判別も行えます。
window.navigation.userAgent 文字列を利用します。
文字列をせっせと解析して、各フラグを立てて回ります。
jquery.depend プラグイン
ダウンロード
V1.1.8
圧縮版, リリース向け jquery.depend-1.1.8.min.js
非圧縮版, 開発向け jquery.depend-1.1.8.js
ZIPファイル (ソース一式)
旧バージョン
...
Akinari Tsugo
23:03
JavaScript,
jQuery,
拡張
jQuery プラグイン の 公開
code {
background-color: #f2f2f2;
border: 1px solid #c3c3c3;
padding: 0.1em 0.5em;
}
GitHub for Windows を利用しながら、GitHub 上に作成した jQueryプラグイン を公開してみます。
jQueryプラグイン名の付け方
jQueryプラグインの公開手順
プラグイン名の付け方
基本ルールは次の通り。
使える文字列は、英数字、ハイフン、ピリオド、アンダースコアのみです。
プラグイン名は全プラグイン（世界中で公開されているプラグイン）においてユニークな名称である必要があります。
プラグイン名とファイル名は一致させます。例えば hoge プラグイン なら jquery.hoge.js 。
...
Akinari Tsugo
23:31
GitHub,
JavaScript,
jQuery,
マニュアル,
拡張
jQuery プラグイン の 開発
jQuery で 独自の プラグイン を 作成、開発 しようと思ったので、その方法について少し調べてみました。
ここでは、jQuery プラグイン の 作成方法 についていくつかまとめます。
目次
基本形
メソッドチェーン
無名関数に取り込んだ形
再帰的に要素を拡張する形
基本形
まずは最もシンプルなプラグインのコード。
このままだと、 $ が jQuery である保証がなかったり、 $ が別物で $.fn が undefined だったり…
$.fn.[関数名] = function () {
// 拡張するコードを実装
};
メソッドチェーン
上述の コード では メソッドチェーン が利用できません。
戻り値を設定することで メソッドチェーン を利用できるようにします。
$.fn.[関数名] = function ...
Akinari Tsugo
0:03
JavaScript,
jQuery,
拡張
jQuery で クリック と ダブルクリック を判別
.target {
border: 1px solid silver;
background-color: #fdfdfd;
width: 100px;
height: 100px;
display: inline-block;
text-align: center;
line-height: 100px;
cursor: default;
}
.result {
width: 100%;
height: 100px;
}
（2013/05/14 jQuery プラグインを作成しました→こちら）
クリックとダブルクリックに別機能を載せて実行したいと、個人的に思ったので、試しに実装してみることにした。
どうしてもclickイベントが先に発生してしまうので setTimeout 使うしかないよなぁ…と思いつつ
setTimeout の使いどころによってはうま ...
Akinari Tsugo
21:20
JavaScript,
jQuery
jQuery で 右クリックと左クリックを判別
.table {
border: 1px solid silver;
border-collapse: collapse;
text-align: center;
}
.table .title-col {
width: 5em;
}
.table .contents-col {
width: 4em;
}
.table thead {
background-color: #f5f5f5;
}
.table th, .table td {
border: 1px solid silver;
}
判別のポイントは次の通り。（要するに結論。）
clickは無理。mouseup、mousedownのみ。
event.whichを利用する
ボタンと値の関係は次の通り
左真ん中右
123
IE8とIE9、Chromeで ...
Akinari Tsugo
22:42
JavaScript,
jQuery