2013年

正直、今更感はありますが… C# を用いて、XMLファイル を読み込んで オブジェクト を生成する デシリアライズ と、 オブジェクト を XMLファイル へ書き込む シリアライズ を行うサンプルコード を覚書きしておきます。 目次 概要（オブジェクトを読み書きするサンプルコード） シリアライズ、デシリアライズ 処理 読み書きする オブジェクト

守る資産、脆弱性、脅威の３つが揃ったとき、そこにセキュリティリスクが発生します。 ここでは、脆弱性を減らすことで、セキュリティリスクの低減を図る方法を示します。 具体的にここでは、JavaScript の サニタイジング を行うことで XSS(クロスサイトスクリプティング) を防ぐ方法をみていきます。 目次 警戒すべき出力地点 サニタイズ の 対象文字列 サニタイズ の 方法 何が問題なのか

.tbl { border-collapse: collapse; } .tbl th, .tbl td { border: 1px solid #dddddd; padding: 0.3em 0.8em; } .tbl th { background-color: #f5f5f5; } .tablealg { width: 12em; } .tabledata { text-align: center; } ASP.NET で開発をしていると、 web.config に machineKey を設定できます。 複数のサーバーにおいて、同じ認証結果を利用したい場合（DNSラウンドロビン等）、各サーバーにおいて共通の machineKey を設定することで、1度の認証で他のサーバーにアクセスできるようなことを実現できます。 この machineKey 、 ...

"技術的にできる" という実践例として MVC 4 + WebAPI という組み合わせで、 RESTful like なフォーム認証を作る方法を記載します。 MVC だけで実装する フォーム認証 と比べ、実装量が増える デメリット がありますが、操作感が良くなる（リクエスト時に固まるをなくせる）メリットはあると思います。 目次 概要 作成する ファイル、フォルダ 構成 web.config の認証設定 ログイン、ログアウト 処理 ログイン処理 への Ajaxリクエスト ログイン後 の リダイレクト

Untitled Page .post-body .header .title { color: #3F529C; font-size: 2em; } .separator1 { height: 2em; line-height: 2em; border-top: 1px solid silver; border-bottom: 1px solid silver; border-left: 3px solid silver; border-right: 3px solid silver; margin: 2em 0; } .separator1 .title { font-weight: bold; font-size: 1.8em; padding: 0 1em; } .separator2 { height: 2em; ...

.speclist { margin: 0; padding: 0; } .speclist dt { float: left; width: 10em; } .speclist dd { margin-left: 10em; } URLに含まれる クエリストリング （クエリ文字列、クエリパラメータ） を取得し、使いやすい形に分解、整形する サンプルコード を掲載します。 単純な クエリストリング を分解する コード はよく見かけるので、もう少しがんばって 配列 や ハッシュ（連想配列） に対応したものを実装してみました。 目次 取得 & 分解 & 整形 する 実装 サンプルコード の 使い方 対応している クエリストリング 関連記事 JavaScript で クエリストリング を 生成 する 方法

ASP.NET MVC における、フォーム認証の実装例を掲載します。 今回は ASP.NET MVC 4 で実装しています…が、 ASP.NET MVC 3 でも似たような実装になるかと思います。 目次 概要 web.config の 設定 ログイン モデル の 作成 ログイン ビュー の 作成 ログイン 処理 の 実装 [おまけ] ログアウト

認証 ( Authentication ) サービス へ アクセス してきた ユーザー が 「本人であるかどうか」 を検証する。 承認 ( Authorization ) サービス へ アクセス してきた 認証済みユーザー が 「指定した リソース へ アクセスできるかどうか」 を制御する。

.sample { margin-left: 2em; border-collapse: collapse; border: 1px solid #dddddd; } .sample th { border: 1px solid #dddddd; background-color: #f5f5f5; padding: 0.5em 1em; } .sample td { border: 1px solid #dddddd; padding: 0.5em 1em; } ASP.NET Web API における、ルーティング についてまとめます。 WCF と似ているけれど、バインド方法が若干異なるので、注意が必要そうです。 目次 デフォルト設定 （デフォルト の ルーティング） ルーティ ...

リクエスト時 に設定する クエリパラメーター、 メッセージボディー と、リクエストを受け取った関数の引数 がどのような関係にあるかをまとめます。 具体的には、クエリーパラメーター を 引数 へ バインド する方法と、メッセージボディー から モデルクラス へ バインド する方法 についてのまとめです。 目次 クエリパラメーター と 引数 メッセージボディー と 引数

データコントラクト（DataContract）を利用することで、JSON と C# で作成した クラス との間の シリアライズ、デシリアライズ を自動的に行えるようにします。 ここでは、メッセージボディー に入れられた JSONオブジェクト を C# で作成した モデルクラス へ バインド する方法について記載します。 目次 データコントラクト の実装 データコントラクト を利用した サービス の実装 テスト 実行

Web API を利用していると、簡単に レスポンスヘッダー を調整することができます。 ほとんどは HttpResponseMessage クラス の設定で処理を行います。 以下に、ケース別の具体例を掲載します。 目次 Content-Type の書き換え ステータスコード の書き換え カスタムレスポンスヘッダー Content-Type の書き換え 何も設定しない場合、application/json になるので、ここでは text/plain に設定する例を掲載します。 namespace WebService { using System.Text; using System.Web; using System.Web.Http; public class SampleContro ...

ここでは、 ASP.NET Web API において、独自フィルター を実装する方法を掲載します。 独自フィルター を実装することで、 RESTful アプリケーション内において、ある決まった処理を簡単に実装することができるようになります。 今回は サンプル として「フィルターを実装したアクション（メソッド）のレスポンスをキャッシュさせない」独自フィルターを作成します。

.monospace { font-family: monospace; } .raw { border: 1px solid #dddddd; background-color: #f5f5f5; padding: 1em 2em; } .parameter { border: 1px solid #dddddd; border-collapse: collapse; } .parameter th { border: 1px solid #dddddd; background-color: #f5f5f5; padding: 0.3em 0.5em; } .parameter td { border: 1px solid #dddddd; padding: 0.3em 0.5em; } ...

.code { background-color: #f2f2f2; border: 1px solid #c3c3c3; padding: 0.1em 0.5em; } 「プルリクエスト来たけど、なんかバージョンが違うからうまく反映できない…」といったとき、 どのようにマージ作業を行っていくか記載します。 具体的には、プルリクエストの画面で以下のようなメッセージが表示されているとき、どのようにプルリクエストを反映するかについて記載します。

クロスドメイン制約 を 回避 する クライアント & サーバー 実装 を XmlHttpRequest level2 の プリフライト を利用して実現します。 クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。 ここでは、"クライアント側" と "サーバー側" 両方に手を加えて クロスドメイン通信 を実現する方法を載せます。 具体的には、XmlHttpRequest level2 の プリフライト を利用して クロスドメイン通信 を行えるようにします。

「文字列 で記載された 関数 を 実行 する」方法は eval を使いますが、 ここではその逆「関数 を 文字列化 する 方法」を記載します。 関数の文字列化 サンプルコード（関数 → 文字列） var actFunc, strFunc; // 関数の実態 actFunc = function (a, b) { return a * b; }; // 関数の文字列化 strFunc = '' + actFunc; // 試しに表示してみる... window.alert(strFunc);

.monospace { fontfamily: monospace; } クロスドメイン制約 を 回避 する クライアント実装 を document.domain を利用して実現します。 クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。 ここでは、"クライアント側" に手を加えて クロスドメイン通信 を実現する方法を載せます。 具体的には、document.domain を変更することで信頼する範囲を広げて クロスドメイン通信 を行えるようにします。

Blogger に Pocket の "pocket" ボタン を 設置、追加する方法を記載します。 各ページ　（投稿） に対する ボタン です。 ここに載せる コード は ブログ テンプレート に対してコピペ で使えるようにしてあります。 表示したい位置へ コピー & ペースト して利用してください。 作業手順手としては次の通りです。 ※その他の ソーシャルボタン もまとめて追加する方法は こちら。 ※ソースコード は ダブルクリック すると、全選択できます。

Blogger に はてなブックマーク の "B!" ボタン を 設置、追加する方法を記載します。 各ページ　（投稿） に対する ボタン です。 ここに載せる コード は ブログ テンプレート に対してコピペ で使えるようにしてあります。 表示したい位置へ コピー & ペースト して利用してください。 作業手順手としては次の通りです。 ※その他の ソーシャルボタン もまとめて追加する方法は こちら。 ※ソースコード は ダブルクリック すると、全選択できます。

Blogger に google の "+1" ボタン を 設置、追加する方法を記載します。 各ページ　（投稿） に対する ボタン です。 ここに載せる コード は ブログ テンプレート に対してコピペ で使えるようにしてあります。 表示したい位置へ コピー & ペースト して利用してください。 作業手順手としては次の通りです。 ※その他の ソーシャルボタン もまとめて追加する方法は こちら。 ※ソースコード は ダブルクリック すると、全選択できます。

Blogger に facebook の "いいね" ボタン を 設置、追加する方法を記載します。 各ページ　（投稿） に対する いいね ボタン です。 ここに載せる コード は ブログ テンプレート に対してコピペ で使えるようにしてあります。 表示したい位置へ コピー & ペースト して利用してください。 作業手順手としては次の通りです。 ※その他の ソーシャルボタン もまとめて追加する方法は こちら。 ※ソースコード は ダブルクリック すると、全選択できます。

Blogger に twitter の "ツイート" ボタン を 設置、追加する方法を記載します。 各ページ　（投稿） に対する ツイート ボタン です。 ここに載せる コード は ブログ テンプレート に対してコピペ で使えるようにしてあります。 表示したい位置へ コピー & ペースト して利用してください。 作業手順手としては次の通りです。 その他の ソーシャルボタン もまとめて追加する方法は こちら。

Blogger に twitter の 「ツイート」、facebook の 「いいね」、google の 「+1」、はてなブックマーク の 「B!」、Pocket の 「Pocket」 ボタン 等、 俗に言う ソーシャルボタン を まとめて 一気 に設置する方法をここでは載せます。 いろいろと方法はあるかと思いますが･･･ここでは、 Blogger の テンプレート を編集して実現する方法です。 ([2015/03/15] 本記事ではそれぞれのSNS提供モジュールを利用しています。オリジナルデザインにしたい場合、"Blooger に オリジナルデザイン の ソーシャルボタン を設置する方法" をご参照ください。) ソーシャルボタン 設置手順 メニュー から [テンプレート] を選択し、 [HTML の編集] を開きます。

.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; ...

.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; ...

WCF を 用いて RESTful サービス を作成していると、HTTP レスポンス ヘッダー を任意に変更 ── 場合によっては カスタムヘッダー を追加 ── することで、 クライアント側の処理を対応しやすくしたい場合があるかと思います。 ここでは、HTTP レスポンス ヘッダー を変更する サンプルコード を記載します。 基本的には OutgoingWebResponseContext クラス を利用することで レスポンスヘッダー を変更できるようです。 ※ WCF を 用いた RESTful サービス の構築方法 は こちら。 Content-Type の 書き換え ステータス の 書き換え カスタムヘッダー の 追記

（2015/01/04 Windows 10 Technical Preview の useragent を追記） （2013/10/22 jQuery プラグイン でも判定できるようにしました。元記事は こちら 。） Internet Explorer 11 から UserAgent 文字列が変更になるそうです （詳細は こちら）。 その結果、今まで MSIE を使った Internet Explorer の判別が出来なくなります。 これでは困るので、従来の IE も含めて IE であることを判別できる JavaScript を以下で記載します。 IE11 の UserAgent サンプル Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko Mozilla/5.0 (Windows NT 6 ...

.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 関 ...

クロスドメイン制約 を 回避 する サーバー実装 を WCF サービス を用いて JSONP で実現します。 クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。 ここでは、"サーバー側" に手を加えて クロスドメイン通信 を実現する方法を載せます。 具体的には、JSONP形式 で レスポンス を返せるようにすることで、jQuery 等 で クロスドメイン通信 を行えるようにします。 今回は、WCF サービス を利用しての実装を行います。 サーバーサイド （WCF サービス） クライアントサイド （jQuery） ※ WCF サービス で JSONP に対応した サービス を実装した場合、コールバック関数名 を指定する パラメター は callback になるようです。 ...

.checked { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiagX8RLPKkTSVDoEkioLJfC1fWye1WMynuRz0evwcfNw9aip5NW7GpjsbkpKp_0_TlBtv5zxgkbVXZrp-TEEIAFRrINBoNhUGw2BnODqzpR6fhWGuTeuDNxBM4dDQqZRisgfIuIKWPHBY/s1600/checked.png') center center no-repeat; width: 15px; height: 15px; display: inline-block; } .unchecked { background: url('https://blogger.googleus ...

クロスドメイン制約 を 回避 する サーバー実装 を ASP.NET MVC を用いて JSONP で実現します。 クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。 ここでは、"サーバー側" に手を加えて クロスドメイン通信 を実現する方法を載せます。 具体的には、JSONP形式 で レスポンス を返せるようにすることで、jQuery 等 で クロスドメイン通信 を行えるようにします。 サーバーサイド （ASP.NET MVC） クライアントサイド （jQuery） 今回は次の図に示すような環境でのクロスドメイン通信を想定し、 この状況でサーバーBにおいて JSONP 形式 で応答する 実装 を載せます。 個人的な趣味趣向の都合で ASP.NET MVC でサンプル ...

.inputvalue dt { width: 3em; float: left; } .inputvalue dd { margin-left: 3em; } クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。 ここでは、"サーバー側" の設定変更で GET リクエスト に関してクロスドメイン通信を実現する方法を載せます。 具体的には、Access-Control-Allow-Origin ヘッダー を無条件に返す設定をすることで、 jQuery 等 で クロスドメイン通信 を行えるようにします。

クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。 ここでは、"クライアント側" ── 特に IE8, IE9 ── において クロスドメイン通信 を実現する 実装方法 を記載します。 IE8、 IE9 で クロスドメイン通信 を行う場合、 XDomainRequest を利用します。 この XDomainRequest は XMLHttpRequest と似て非なるもの（詳細は こちら）なので、そのまま jQuery.ajax で使うことが出来ません。 jQuery の バグトラック によると、この違いは プラグイン で吸収するそうです。 で、その プラグイン と 使い方 は以下の通りです。 XDomainRequest 対応 プラグイン を利用した クロスドメイン通信 の 実装 ...

.table { border: 1px solid #efefef; border-collapse: collapse; width: 100%; } .table thead { font-weight: bold; background-color: #fcfcfc; text-align: center; } .table th, .table td{ border: 1px solid #efefef; padding: 0.3em 0.8em; } Internet Explorer 系列 で クロスドメイン通信 を行う場合、 IE8, IE9 だと XDomainRequest 、IE10 では XMLHttpRequest を利用します。 ここでは、似て非なる両者を比べてその違いをまとめます。 ...

JavaScript を用いて クロスドメイン で リクエストを行いたいと思うと、 "同一制限元ポリシー(Same Origin Policy)" に引っかかります。 そもそもその制約にある背景は何か…といったところから、制約内容、制約の例外、制約の回避についてまとめました。 制約する理由 制約の内容 制約の例外 制約の回避 制約する理由 クロスサイトリクエストフォージェリ（CSRF）対策。 悪意あるサイトからの不正な要求を拒否するため。 制約の回避方法を見ていてもそうですが、信頼できるサーバーかのリクエストしか受け付けないようになっているようです。

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 ...

Blogger の 記事 一覧 を表示する ページ を作成します。 ここで紹介する方法では、ソート順（タイトル名、公開日付、更新日付）、表示方法（一覧、ラベル別）を任意に指定できます。 また、各要素に クラス名 が割り振られているので、好きな表示を簡単に実現できます。 とりあえず自分のブログで試したい方は デモページ（日本語） をご利用ください。 （…いくつかの ブログ で "記事一覧を表示する方法" が記載されていましたが、 個人的にしっくりこなかったので新しく作ってしまえ、という経緯です。。） 目次 作成手順 説明 更新履歴 作成手順 Blogger の 左メニュー から [ページ] を選択します。 [新しいページ] を選択します。 ...

.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 ...

.arguments { margin-left: 2em; } .arguments dt { float: left; width: 8em; } .arguments dd { margin-left: 8em; } .sampleurl { border: 1px solid #efefef; /*overflow: auto; white-space: nowrap;*/ padding: 1em 2em; } Blogger の feed URL で利用可能な パラメタ― を一覧にしてまとめました。 RSS や json を利用しての2次利用で必要な情報になるかと思います。 （2013/07/10 Blogger の フィード URL 生成 ツール） フィード URL の基本構成 ...

そこに存在する SQL Server Express の データベース ファイル（拡張子 .mdf のファイル） を、黒猫 SQL Studio で開いて内容を見る方法です。 黒猫 SQL Studio は無料のツールでインストールが不要（配置のみで動作）なので、個人的には好んで使っています。 SQLコマンドはもちろん、デーブル内容の閲覧もできます。 以下では .mdf ファイル を 黒猫 SQL Studio で開くまでの手順を記載します。 黒猫ソフトウェア工房 黒猫 SQL Studio メニュー [データベース]-[データベースに接続]を選択します。 データベース接続 [新規追加]ボタンを押下します。 接続文字列の編集 接続文字列のオプショ ...