jQuery を使って 単一フォーム内に複数ボタンを配置して押されたボタンに応じて遷移先を変えるようにするサンプルコードを作成しました。
目次
サンプルコード
解説
サンプルコード
HTML と JavaScript は分けて記載します。
confirm.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>確認</title>
</head>
<body>
<h1>確認</h1>
<form id="form" method="POST" action="">
<div>
<span>会社名：</span>
<input type ...
ラベル HTML の投稿を表示しています。 すべての投稿を表示
JavaScript で 二重送信防止 する 方法
jQuery を使って フォームのサブミット および 通常ボタン 、 アンカー の二重送信（多重実行、多重送信）を防止するサンプルコードを作成しました。
目次
サンプルコード
サブミットに対して多重送信防止
ボタンとアンカーに対して多重送信防止
解説
サンプルコード
以下に「サブミットに対する多重送信防止」と「ボタンおよびアンカーに対する多重送信防止」のサンプルを載せますが、違いは対象としているイベント ( submit か click か) だけで基本的なコードは同じです。
サブミット に対して 多重送信防止
(function () {
$("form").on("submit", funct ...
Akinari Tsugo
23:17
HTML,
JavaScript
WebAPI + HTML + JavaScript において ファイル を ドラッグ&ドロップ で アップロード する 方法
よくある Webページ上に ファイル を ドラッグ & ドロップ して アップロード する アプリ を作ってみます。
この記事では サーバー側 と クライアント側 をまとめて掲載しています。
サーバー側は ASP.NET WebAPI、クライアント側は HTML + JavaScript で実装します。
アップロード は POST で フォームデータ として アップロード します。
目次
サーバー処理
クライアント処理
HTML
CSS
JavaScript
サンプルコード
GitHub - garafu / samplecode_FileUpload
ダウンロード zip
サーバー処理
WebAPI 用 の コントローラ を作成します。
受け取る ファイルデータ ...
Akinari Tsugo
23:41
C#,
HTML,
JavaScript,
jQuery,
Web API
JavaScript で クエリストリング を 生成 する 方法
JavaScript で オブジェクト を クエリ文字列 に変換（シリアライズ）する サンプルコード を作成しました。
以前書いた "JavaScript で クエリストリング を 取得 & 分解 & 整形 する 方法" に対応する コード になります。
目次
生成 する サンプルコード
サンプルコード の 使い方
対応している オブジェクト
関連記事
JavaScript で クエリストリング を 取得 & 分解 & 整形 する 方法
生成 する サンプルコード
サンプルコード
/**
* 受け取ったオブジェクトをクエリ文字列にシリアライズします。
*
* サンプル オブジェクト
* var query = {
* action: 'view',
* id: '123',
* debug: undefin ...
Akinari Tsugo
22:43
HTML,
JavaScript
Cross-Origin Resource Sharing (CORS) 仕様
以前、クライアントサイドからリソースを利用するためにどうしたら良いか程度は、少し調べはしていたのですが、
今回は、サーバーサイドも含めて W3C の "Cross-Origin Resource Sharing" に記載されている内容を改めて読み直し & まとめておこうと思いました。
…が、結局、ほとんど仕様の日本語化になってしまいました。。
面倒で端折っている部分もありますが、ほぼ訳されています。
※ここに記載される内容は 2014年1月16日 の Cross-Origin Resource Sharing (Recommendation) 仕様になります。
目次
用語
単純なメソッド
単純なヘッダー
単純なレスポンスヘッダー
リクエスト / レスポンス ヘッダー
Acces ...
Akinari Tsugo
18:04
HTML,
JavaScript,
クロスドメイン通信
IE の UserAgent まとめ (2)
<!--
.left-area
{
width: 200px;
float: left;
}
.right-area
{
margin-left: 200px;
overflow: auto;
}
.tbl
{
border-collapse: collapse;
}
.tbl th
{
padding: 0.3em 0.8em;
border: 1px solid silver;
background-color: #efefef;
}
.tbl td
{
height: 30px;
padding: 0.3em 0.8em;
border: 1px solid silver;
}
.left-tbl
{
width: 100%;
}
.right-tbl
{
}
...
Akinari Tsugo
17:43
HTML,
Internet Explorer,
JavaScript
カスタム URL スキーム の 設定 と 利用
.regbox {
border: 1px solid #808080;
padding: 1em 2em;
}
今回は、Windows パソコン において、カスタム URL スキーム を設定して、任意の アプリケーション を起動する方法を載せます。
ちなみに、"カスタム URL スキーム" は、"外部プロトコルリクエスト" とか "プロトコルハンドラ"、"Pluggable Protocol Handler"、"Asynchronous Pluggable Protocols" などの名前で掲載されいる記事が多いようです。
（…情報を探すのに苦労したので参考になれば。。）
目次
概要
レジストリ の 登録
カスタム URL スキーム の テスト
[おまけ] 警告の抑制
[おまけ] サンプルコード
Akinari Tsugo
23:11
HTML,
Internet Explorer,
拡張
JavaScript の サニタイジング
守る資産、脆弱性、脅威の３つが揃ったとき、そこにセキュリティリスクが発生します。
ここでは、脆弱性を減らすことで、セキュリティリスクの低減を図る方法を示します。
具体的にここでは、JavaScript の サニタイジング を行うことで XSS(クロスサイトスクリプティング) を防ぐ方法をみていきます。
目次
警戒すべき出力地点
サニタイズ の 対象文字列
サニタイズ の 方法
何が問題なのか
Akinari Tsugo
17:35
HTML,
JavaScript,
セキュリティ
JavaScript で クエリストリング を 取得 & 分解 & 整形 する 方法
.speclist {
margin: 0;
padding: 0;
}
.speclist dt {
float: left;
width: 10em;
}
.speclist dd {
margin-left: 10em;
}
URLに含まれる クエリストリング （クエリ文字列、クエリパラメータ） を取得し、使いやすい形に分解、整形する サンプルコード を掲載します。
単純な クエリストリング を分解する コード はよく見かけるので、もう少しがんばって 配列 や ハッシュ（連想配列） に対応したものを実装してみました。
目次
取得 & 分解 & 整形 する 実装
サンプルコード の 使い方
対応している クエリストリング
関連記事
JavaScript で クエリストリング を 生成 する 方法
Akinari Tsugo
16:58
HTML,
JavaScript
認証（Authentication） と 承認（Authorization） の違い
認証 ( Authentication )
サービス へ アクセス してきた ユーザー が 「本人であるかどうか」 を検証する。
承認 ( Authorization )
サービス へ アクセス してきた 認証済みユーザー が 「指定した リソース へ アクセスできるかどうか」 を制御する。
Akinari Tsugo
22:33
ASP.NET,
HTML
クロスドメイン制約 を document.domain の 変更 で 回避
.monospace {
fontfamily: monospace;
}
クロスドメイン制約 を 回避 する クライアント実装 を document.domain を利用して実現します。
クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。
ここでは、"クライアント側" に手を加えて クロスドメイン通信 を実現する方法を載せます。
具体的には、document.domain を変更することで信頼する範囲を広げて クロスドメイン通信 を行えるようにします。
Akinari Tsugo
0:25
HTML,
JavaScript,
クロスドメイン通信
JavaScript タッチ イベント （MSIE）
.events
{
margin-left: 2em;
}
.events dt
{
margin-top: 1em;
}
.events dd
{
}
.properties
{
margin-left: 2em;
width: 100%;
border-collapse: collapse;
}
.properties thead
{
background-color: #f5f5f5;
}
.properties th, .properties td
{
border: 1px solid #dddddd;
padding: 0.5em 0.8em;
}
.name
{
font-weight: bold;
width: 13em;
}
.type
{
color: #cccccc;
...
Akinari Tsugo
0:39
HTML,
Internet Explorer,
JavaScript,
マニュアル
JavaScript タッチ イベント （webkit）
.events
{
margin-left: 2em;
}
.events dt
{
margin-top: 1em;
}
.events dd
{
}
.properties
{
margin-left: 2em;
width: 100%;
border-collapse: collapse;
}
.properties thead
{
background-color: #f5f5f5;
}
.properties th, .properties td
{
border: 1px solid #dddddd;
padding: 0.5em 0.8em;
}
.name
{
font-weight: bold;
width: 10em;
}
.type
{
color: #cccccc;
...
Akinari Tsugo
0:39
HTML,
JavaScript,
マニュアル
WCF Web サービス における レスポンスヘッダー の設定方法
WCF を 用いて RESTful サービス を作成していると、HTTP レスポンス ヘッダー を任意に変更 ── 場合によっては カスタムヘッダー を追加 ── することで、
クライアント側の処理を対応しやすくしたい場合があるかと思います。
ここでは、HTTP レスポンス ヘッダー を変更する サンプルコード を記載します。
基本的には OutgoingWebResponseContext クラス を利用することで レスポンスヘッダー を変更できるようです。
※ WCF を 用いた RESTful サービス の構築方法 は こちら。
Content-Type の 書き換え
ステータス の 書き換え
カスタムヘッダー の 追記
Akinari Tsugo
21:13
ASP.NET,
C#,
HTML,
JavaScript,
WCF
Ajax クロスドメインリクエスト 制約
JavaScript を用いて クロスドメイン で リクエストを行いたいと思うと、 "同一制限元ポリシー(Same Origin Policy)" に引っかかります。
そもそもその制約にある背景は何か…といったところから、制約内容、制約の例外、制約の回避についてまとめました。
制約する理由
制約の内容
制約の例外
制約の回避
制約する理由
クロスサイトリクエストフォージェリ（CSRF）対策。
悪意あるサイトからの不正な要求を拒否するため。
制約の回避方法を見ていてもそうですが、信頼できるサーバーかのリクエストしか受け付けないようになっているようです。
Akinari Tsugo
1:24
HTML,
JavaScript,
クロスドメイン通信,
セキュリティ
Chrome の UserAgent まとめ
Chrome 11 以降の UserAgent に関して調べてみたので、ここにまとめます。
プラットフォーム周りが知りたかったのですが、どうも Internet Explorer と互換するようです。
Chrome 11 以降 まとめ
Windows バージョン 関係は Internet Explorer と互換…
Windows NT x.xでプラットフォームが分かる。
Windows NT 6.2 の場合、Windows 8
Windows NT 6.1 の場合、Windows 7
Windows NT 6.0 の場合、Windows Vista
Windows NT 5.1 の場合、Windows XP
...
Akinari Tsugo
0:23
HTML,
JavaScript
Blogger の フィード URL 生成 ツール
.inputfield
{
width: 100%;
margin: 1em 0;
}
.requiremark
{
color: #ff0000;
}
.outputfield
{
width: 100%;
margin: 1em 0;
}
.errormessage
{
color: #ff0000;
}
Blogger の フィード URL （RSS や Atom、JSON を受信する URL）を作成する Webアプリ です。
* は必須入力項目です。
必要事項を入力した後、「フィード URL 生成」で フィード URL が生成されます。
作りたいフィードの設定入力
*
ブログURL
...
Akinari Tsugo
23:09
Blogger,
HTML,
JavaScript
IE の UserAgent まとめ
.left-area
{
width: 200px;
float: left;
}
.right-area
{
margin-left: 200px;
overflow: auto;
}
.tbl
{
border-collapse: collapse;
}
.tbl th
{
padding: 0.3em 0.8em;
border: 1px solid silver;
background-color: #efefef;
}
.tbl td
{
height: 2em;
padding: 0.3em 0.8em;
border: 1px solid silver;
}
.left-tbl
{
width: 100%;
}
.right-tbl
{
}
...
Akinari Tsugo
22:47
HTML,
Internet Explorer,
JavaScript
ASP.NET MVC で ページ遷移 を 記録する フィルター
ブラウザでどのようにページ遷移が行われたかを簡単に記録するためのフィルターを作成します。
このフィルターを利用することで「不適切なページ遷移を拒否できる」とか「ブラウザの戻る機能の無効化」
ができるようになることを目指します。
ソースコード
説明
使用例
ソースコード
閲覧履歴をセッションに残すフィルターを作成します。
ここでは Filters フォルダ & 名前空間を１つ掘って実装しています。
BrowsingHistoryAttribute.cs
namespace SampleMvcApplication.Filters
{
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
...
Akinari Tsugo
23:25
ASP.NET,
C#,
HTML,
MVC,
拡張
Ajax通信 の キャッシュ 機能
<!--
.quote {
border: 1px solid silver;
padding: 0.5em 1em;
font-family: sans-serif;
}
.quote code {
color: orangered;
border-style: none;
background-color: transparent;
padding: 0;
}
.reference {
text-align: right;
font-style: italic;
}
-->
JavaScript で 非同期通信 をしようとしたとき、その通信結果をクライアント側でキャッシュしたりしなかったり…
実際のところどうなっているか、どうやったら良いのかを見ていきます。
XMLHttpRequest ...
Akinari Tsugo
21:56
HTML,
JavaScript,
キャッシュ