Quantcast
Channel: プログラム の個人的なメモ
Viewing all 860 articles
Browse latest View live

【トラブル】【ASP.NET MVC】【IIS】Response.HeadersからPlatformNotSupportedExceptionが発生する

$
0
0

はじめに

 * 以下「サンプル:エラー発生時」を、Visual Studio2012で実装したら、
   例外「PlatformNotSupportedException」が発生した

エラー内容

System.PlatformNotSupportedException: This operation requires IIS integrated pipeline mode.
# 【日本語訳】この操作は、IIS統合パイプラインモードが必要です

サンプル:エラー発生時

Public Class MvcApplication
    Inherits System.Web.HttpApplication

    Protected Sub OnPreSendRequestHeaders(sender As Object, e As EventArgs)
        Me.Response.Headers.Remove("Server") ' ★ここで例外が起こる★
        Me.Response.Headers.Remove("X-AspNet-Version")
        Me.Response.Headers.Remove("X-AspNetMvc-Version")
    End Sub

    ' ・・・略・・・
End Class

発生した環境

 * Visual Studio2012 / ASP.NET 開発サーバー(Cassini)
 * .NET4.5

原因

 例外の説明文からもわかるが、
上記「発生した環境」から下記「API仕様」の条件「.NET Framework 3.0」を満たしているので
残りの条件「IIS 7.0 統合パイプラインのモード」でなかったことが原因。

 もっと突き詰めると、Webサーバとして、ASP.NET 開発サーバー(Cassini)を使用していたのだが
ASP.NET 開発サーバーは、クラッシックモード相当するらしくので、このことが原因。
http://surferonwww.info/BlogEngine/post/2011/11/18/ASPNET-development-server-and-IIS.aspx

API仕様

https://msdn.microsoft.com/ja-jp/library/system.web.httpresponse.headers.aspx
より抜粋

Headers プロパティはでのみサポート、 IIS 7.0 統合パイプラインのモードと、
少なくとも、.NET Framework 3.0。アクセスしようとする、 
Headers プロパティと、これら 2 つの条件のいずれかが満たされなかった場合、
PlatformNotSupportedException がスローされます。

解決方法

解決案1

 * 開発環境と本番環境を区別可能なフラグなどを設けて、開発環境では実行しないようにする

解決案2

 * 使用するサーバを、ASP.NET 開発サーバーではなく、ローカルIIS/IIS Expressに置き換える
 * 変更方法は、プロジェクトを右クリックし、[プロパティ]-[Web]を選択し、「IIS Express」を選ぶだけ。
   (以下のサイトを参照のこと。)
http://www.ilovex.co.jp/blog/system/net/aspnetvisualstudio.html

補足

 * Visual Studio2015だと、デフォルトのWebサーバーは、IIS Expressになっており
   ASP.NET 開発サーバー(Cassini)はなくなっている模様。

関連記事

Visual Studio上で確認用のWebサーバについて

http://blogs.yahoo.co.jp/dk521123/35871893.html

【ASP.NET MVC】【IIS】Visual Studio上で確認用のWebサーバについて

$
0
0

■はじめに

Visual Studio上で確認用のWebサーバが、IISに類するものだと思っていたが
http://blogs.yahoo.co.jp/dk521123/35869367.html
で、どうやら、それだけではないので、纏めてみる。

■Visual Studio上で確認用のWebサーバの種類

[1] ASP.NET 開発サーバー(Cassini)
[2] IIS Express
[3] ローカルIIS
[4] カスタム Web サーバー

ASP.NET 開発サーバー(Cassini)

 * Visual Studioにビルトインされている簡易サーバ(IISとは無関係)
 * Visual Studio2015だと、デフォルトのWebサーバーは、IIS Expressになっており
   ASP.NET 開発サーバー(Cassini)はなくなっている模様。

問題点

 * いくつかのメソッドを実行すると例外になってしまう(以下の関連記事を参照のこと)
http://blogs.yahoo.co.jp/dk521123/35869367.html
 * web.configを修正しても反映されない

# 例:「X-Content-Type-Options: nosniff」を追加するように修正(詳細は以下のサイトを参照)しても反映されない
http://blog.shibayan.jp/entry/20130518/1368861454
 * その他の問題点については、以下のサイトを参照のこと。
http://surferonwww.info/BlogEngine/post/2011/11/18/ASPNET-development-server-and-IIS.aspx

IIS Express

 * IIS7をベースにした簡易版IIS
 * 詳細は以下のサイトを参照のこと。
http://www.atmarkit.co.jp/fdotnet/scottgublog/20100702iisexpress/iisexpress.html
 * 色々とトラブルがあるようだが、個人的には、ASP.NET 開発サーバーよりよっぽどいいと思う

■Webサーバの切替手順

[1] プロジェクトを右クリックし、[プロパティ]-[Web]を選択し、好きなサーバを選ぶだけ。


関連記事

Response.HeadersからPlatformNotSupportedExceptionが発生する

http://blogs.yahoo.co.jp/dk521123/35869367.html

ASP.NET を ローカルIIS にデプロイする

http://blogs.yahoo.co.jp/dk521123/35857732.html

【セキュリティ】セキュリティ強化に有効なレスポンス・ヘッダー

$
0
0

[2] X-XSS-Protection

ブラウザ側でXSSを検知した場合は、ブロックする
X-XSS-Protection: 1; mode=block

参考文献

http://nightyknight.hatenablog.com/entry/2012/07/17/015531


[3] X-Frame-Options

全てのドメインで iframe の表示を全面禁止
X-Frame-Options: DENY
同じドメインのサイトなら iframe の表示が可能
X-Frame-Options: SAMEORIGIN

参考文献

http://www.techscore.com/blog/2015/03/05/%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%82%B8%E3%83%A3%E3%82%AE%E3%83%B3%E3%82%B0%E3%81%A3%E3%81%A6%EF%BC%9F/
http://www.websec-room.com/2013/02/20/98
http://buzzwordjp.blogspot.jp/2011/09/iframe-x-frame-options-http.html


[4] Content-Security-Policy (CSP)

個人的な見解だが、制約が強くてちょっと実装がやりづらくなりそう
Content-Security-Policy: default-src 'self'

説明

以下を禁止
* インラインJavaScript(<script type="text/javascript">・・・</script>)
* イベント属性(onclick="xxx()"/<a href="javascript:xxx()">など)での実行

目的

* XSS対策
* クリックジャッキング対策

参考文献

http://blog.hash-c.co.jp/2013/12/Content-Security-Policy-CSP.html
https://blog.mono0x.net/blog/2012/03/15/content-security-policy/

[5] Strict-Transport-Security

強制的にHTTPSへリダイレクトし、以降HTTPSで接続させる
Strict-Transport-Security: max-age=【有効期間[秒]】;includeSubDomains

参考文献

http://qiita.com/takoratta/items/fb6b3486257eb7b9f12e
https://developer.mozilla.org/ja/docs/Web/Security/HTTP_Strict_Transport_Security

【ASP.NET MVC】【Razor】【VB】 Razor ~ 部分ビュー編 ~

$
0
0

はじめに

使用したビュー・ヘルパー

 * @Html.Partial

【構文】
@Html.Partial(【部分ビュー名】 [,【モデル名】])

サンプル

コントローラ

SamplePartialController.vb(ただビューを表示するだけ)
Imports System.Web.Mvc

Namespace Controllers
    Public Class SamplePartialController
        Inherits Controller

        ' GET: SamplePartial
        Function Index() As ActionResult
            Return View()
        End Function
    End Class
End Namespace

ビュー

 * Sharedディレクトリを右クリックし、[Add]-[MVC5 Partial Page(Razor)]で部分ビューを追加
_PartialPage1.vbhtml(部分ビュー)
<div>
    <h2>ここに部分ビューの内容を書く</h2>
</div>
Index.vbhtml
@Code
    ViewData("Title") = "Index"
End Code

<h2>Index</h2>
ここが部分ビュー↓
@Html.Partial("_PartialPage1")
ここが部分ビュー↑

出力結果

Index
ここが部分ビュー↓
ここに部分ビューの内容を書く
ここが部分ビュー↑ 

注意

RenderPageについて

http://blog.shibayan.jp/entry/20140501/1398956392
より

 * 機能としては Partial / RenderPartial に近い
 * Shared ディレクトリを認識しない点が大きな違い
 * 呼び出し時にパラメータを渡せる
http://www.atmarkit.co.jp/fdotnet/aspnetmvc3/aspnetmvc3_08/aspnetmvc3_08_04.html
より

 * RenderPageメソッドはPartial/RenderPartialメソッドのようなビュー検索機能を持たない
  (「/Views/コントローラ名/ビュー名.cshtml」→「/Views/Shared/ビュー名.cshtml」の順で
  検索を行わない)
 => 引数にも部分ビューへの正確なパスを渡さなければならず、やや不便
 * RenderPageメソッドとRendePartialメソッドとを同一のページで組み合わせてしまうと、
   後に呼び出したRenderPartialメソッドの結果が出力されないという不具合もあるようだ(逆なら大丈夫)


関連記事

Razor ~入門編~

http://blogs.yahoo.co.jp/dk521123/35586581.html

Razor ~ レイアウト(マスターページ)編 ~

http://blogs.yahoo.co.jp/dk521123/35877333.html

【ASP.NET MVC】【Razor】【VB】 Razor ~ レイアウト(マスターページ)編 ~

$
0
0

用語整理

レイアウト

 * ヘッダやフッタなどの共通レイアウトを定義したビュー(デザインのテンプレート)
 * ASP.NETのマスターページのようなもの
  (ASP.NETのマスターページについては、以下の関連記事を参照のこと。)
http://blogs.yahoo.co.jp/dk521123/27193663.html

セクション

 * レイアウトに埋め込める一部分のコンテンツ領域

サンプル

コントローラ

SampleLayoutController.vb(ただビューを表示するだけ)
Imports System.Web.Mvc

Namespace Controllers
    Public Class SampleLayoutController
        Inherits Controller

        Function Index() As ActionResult
            Return View()
        End Function
    End Class
End Namespace

ビュー

 * Sharedディレクトリを右クリックし、[Add]-[MVC5 Layout Page(Razor)]で
   レイアウト(マスターページ)を追加
_LayoutPage1.vbhtml(レイアウト(マスターページ))
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewData("Title")</title>
</head>
<body>
    <div>
        @RenderSection("sectionHeader")
    </div>
    <div>
        @RenderBody()
    </div>
    <div>
        @RenderSection("sectionFooter")
    </div>
</body>
</html>
Index.vbhtml
@Code
    Layout = "~/Views/Shared/_LayoutPage1.vbhtml"
    ViewData("Title") = "Index"
End Code

<h2>Index2</h2>
ボディー

@Section sectionHeader
<div>ヘッダー</div>
End Section

@Section sectionFooter
<div>フッター</div>
End Section

出力結果

ヘッダー
Index
ボディー
フッター


関連記事

Razor ~入門編~

http://blogs.yahoo.co.jp/dk521123/35586581.html

Razor ~ 部分ビュー編 ~

http://blogs.yahoo.co.jp/dk521123/35877197.html

【セキュリティ】SSL / TLS 脆弱性

$
0
0

はじめに

 * 脆弱性を知って、そのアルゴリズムを使わせないようにし、セキュリティ強化する

■SSL全般

 * ここでいうSSLは、SSLv1.0~3.0

SSL2.0

 * 通称「DROWN(Decrypting RSA with Obsolete and Weakened eNcryption)」
http://internet.watch.impress.co.jp/docs/news/20160302_746371.html

SSL3.0

 * 通称「POODLE」(詳細は以下の関連記事を参照のこと)
http://blogs.yahoo.co.jp/dk521123/34209930.html

■暗号アルゴリズム

Diffie-Hellman(DH)鍵交換

 * 通称「Logjam」
http://www.itmedia.co.jp/enterprise/articles/1505/21/news055.html

CBC アルゴリズム

 * 通称「BEAST(Browser Exploit Against SSL/TLS)」
http://j-net21.smrj.go.jp/develop/digital/entry/001-20120229-01.html

RC4 アルゴリズム

 * 解読可能の疑惑があり
  => JavaScriptを使ってRC4で暗号化されたリクエストを大量に送信し、
     その大量の暗号化されたリクエストの中から、Cookieなどの繰り返し送信されるデータを解読する
http://security.srad.jp/story/15/07/23/0528204/
http://www.itmedia.co.jp/enterprise/articles/1507/17/news058.html

関連記事

Tomcat でPOODLE SSLv3脆弱性対策をする

http://blogs.yahoo.co.jp/dk521123/34209930.html

SSL / TLS ~知識編~

http://blogs.yahoo.co.jp/dk521123/34090545.html

【Webフレームワーク】 Java における Webフレームワーク

$
0
0

主なWebフレームワーク

[1] Java EE(Enterprise Edition)
[2] Spring Framework
[3] Play Framework

[1] Java EE

メリット

 * Java標準である

デメリット

 * 実行する環境は、GlassFishやWildFly(旧JBoss Application Server)などあるが
   Tomcatは使えない

[2] Spring Framework

特徴

 * 機能が豊富
 [主な機能]
  + DIコンテナ
  + AOP
  + データベース・アクセス機能
  + Web MVCフレームワーク機能
 [サブプロジェクト]
  + Spring Web Flow
  + Spring Web Services
  + Spring Security (Acegi Security)
  + Spring LDAP
  + Spring Rich Client
  + Spring Extensions (Modules)
  + Spring IDE for Eclipse
  + Spring BeanDoc
  + Spring OSGi
  + Spring JavaConfig
  + Spring .NET
  + Spring Batch
 * 外部OSSと連携に優れている
 * 多数の実績

参考文献

http://dev.classmethod.jp/server-side/java/spring-firstcontact/
http://atuweb.net/201509_spring_framework_good_points/
http://itpro.nikkeibp.co.jp/article/COLUMN/20070717/277593/?rt=nocnt
http://aoiso.hatenablog.com/entry/2015/10/09/182320
http://www7a.biglobe.ne.jp/~java-master/spring/intro.html



関連記事

 * その他のフレームワークは以下の関連記事を参照のこと。

Apache Turbine

http://blogs.yahoo.co.jp/dk521123/34032696.html

Apache Click

http://blogs.yahoo.co.jp/dk521123/33542794.html

【ZAP】OWASP ZAP ~入門編~

$
0
0

OWASP ZAP

 * OWASP(Open Web Application Security Project。「オワスペ」)で開発された
   オープンソースの脆弱性検査ツール

補足

 * 以下のIPAのサイトで「Paros」と比較しているが、OWASP ZAPは「Paros」をベースに開発
https://www.ipa.go.jp/about/technicalwatch/20131212.html

環境設定

動画

https://www.youtube.com/watch?v=NT_tnOpR1mo
に設定している動画がある

事前準備

 * Javaで作成されているので、Java 7以上のJRE/JDKをインストールしておく

ダウンロード/インストール

[1] 以下からダウンロードする
https://www.owasp.org/index.php/OWASP_Zed_Attack_Proxy_Project
[2] ダウンロードしたEXEファイル(今回は「ZAP_2.4.3_Windows.exe」)を起動し、
    デフォルトでインストールする
# 特に迷わないはず
# デフォルトで入れてたらディスクトップにショートカットアイコンがあるはず

[2] OWASP ZAP X.X.X(今回は「OWASP ZAP 2.4.3」)を起動する
[3] ダイアログ「Do you want to persist the zap session?」が表示されるので
    以下のサイトを参照して、適切な選択肢を選び、開始ボタン押下
# 今回、特に初めてインストールしたので
# 「Yes, I want to persist this session with name based on the current timestamp」を選んだ
http://www.pupha.net/archives/3056/

OWASP ZAPの実行(クイックスタート)

[1] クイックスタートタブの「攻撃対象URL」に、検査対象先のURL(例「http://localhost:8080/」)を設定
[2] 「攻撃」ボタン押下で検査開始
 => 何か問題があれば、アラートタブで表示される

ちなみに、テスト用のためのサイトを立ち上げて、診断してみたら
「X-Content-Type-Options header Missing」が表示された。
# 以下の関連記事で扱った「X-Content-Type-Options: nosniff」を付加すればいいかと。
http://blogs.yahoo.co.jp/dk521123/35872133.html

注意

 * 初めに診断する際は、必ずテスト環境で行うこと(間違っても本番環境では行わない事)
   (以下に経験談ある)
http://www.slideshare.net/zaki4649/sql-35102177


関連記事

セキュリティ強化に有効なレスポンス・ヘッダー

http://blogs.yahoo.co.jp/dk521123/35872133.html

【Groovy】 Groovy ~入門編~

$
0
0

はじめに

 * Gradle で採用されているGroovyについて、メモっとく

# Gradle は以下の関連記事を参照のこと。
http://blogs.yahoo.co.jp/dk521123/35915819.html

用語

Groovy(グルービー)

英語で「格好いい、いかす、しびれる、素晴らしい」
 * 非常にJavaに近いスクリプト言語

Grails

 * GroovyによるRuby on Rails(Rails)ライクなフレームワーク

# Java の webフレームワークのうちの一つの「Play framework」の「Scala」のような位置付け

特徴

[1] セミコロン、引数カッコは省略可能
[2] 変数の型宣言不要
[3] 文字列の定義は、「"」「'」の2種類

[1] セミコロン、引数カッコは省略可能

書いてもいいので、以下、OKな記述
println('Hello Groovy!!');
println 'Hello Groovy!!'

[2] 変数の型宣言不要

書いてもいいので、以下、OKな記述
明示的に変数の宣言をする際には、「def 変数名」という形で記述
String name = "Mike"
name = "Kevin"
def name = "Smith"

[3] 文字列の定義は、「"」「'」の2種類

ただし、ダブルクォートは、その中に${}として式を埋め込むことができる
def name = "Mike"
println 'Hello, ${name}!' // 「Hello, ${name}!」
println "Hello, ${name}!" // 「Hello, Mike!」


関連記事

Gradle ~入門編~

http://blogs.yahoo.co.jp/dk521123/35915819.html

【Gradle】 Gradle ~入門編~

$
0
0

Gradle(グレードル)

 * オープンソースのビルドツール
 * Ant/MavenのようなXMLベースではなく、スクリプト(Groovy)ベース

# Groovy について、以下の関連記事を参照のこと。
http://blogs.yahoo.co.jp/dk521123/35915827.html
 * Eclipse、Android Studio、Jenkins等でも使える

環境設定

事前準備

 * Javaで作成されているので、Java 6以上のJRE/JDKをインストールしておく

ダウンロード/インストール

[1] 以下からダウンロードする

# リンク「Binary only distribution」からでいい
http://gradle.org/gradle-download/
[2] ダウンロードしたファイル(今回は「gradle-2.12-bin.zip」)を任意の場所に解凍する

C:\gradle-2.12
 +- bin
     gradle
     gradle.bat

[3] 環境変数 Path に、

C:\gradle-2.12\bin

[4] コマンドプロンプトを立ち上げて、「gradle -v」を入力し、
    Gradleのバージョンが表示されることを確認する

------------------------------------------------------------
Gradle X.X
------------------------------------------------------------
... 略 ...

# これでちゃんと設定された

実行

 * 「Hello World!」を行う

build.gradle

「build.gradle」として保存し、任意の場所に置く(例えば「C:\gradle-2.12」)
task helloWorld << {
        println "Hello, world!"
}

出力結果

コマンドプロンプトで「build.gradle」があるところまで移動し「gradle helloWorld」を実行する
:helloWorld
Hello, world!

BUILD SUCCESSFUL

Total time: 2.348 secs


関連記事

Groovy ~入門編~

http://blogs.yahoo.co.jp/dk521123/35915827.html

【トラブル】【Windows】エラー「VIDEO_TDR_FAILURE(igdkmd64.sys)」が表示する

$
0
0

現象

Windowsの画面が、青い画面になり、再起動しろって怒られる。
エラーは「VIDEO_TDR_FAILURE(igdkmd64.sys)」と表示されている

発生環境

 * OS : Windows8.1

対象方法

[1] Windowsキー + Rキー押下し、「devmgmt.msc」を入力し、「OK」ボタン押下
    => デバイスマネージャーを開く
[2] [ディスプレイ アダプター]-[(Intelのデバイス。例「Intel(R) HD Graphics 4600」)]を
    右クリックし、「無効」を選択
[3] 念のため、Windowsを再起動

【セキュリティ】 iframe に関わるセキュリティ攻撃

$
0
0

■ クリックジャッキング(Clickjacking)

 * 悪意のあるサイト上でクリックした時に、別サイトの設定情報を変更させる

具体的には...

1) 攻撃者のページは、iframeなどで他のページを表示
2) そのページに重ねて悪意のあるボタンをそのページと同じ配置で設置します。
3) そして設置した悪意のあるボタンをcssで透明にします。
4) ユーザーは上に重なっている透明のボタンを気付かずにクリックしてしまいます。

対策

[1] X-Frame-Options を付加する

[ヘッダ値](極力、DENYにすればいいかと)
 * DENY:フレーム内のページ表示を全ドメインで禁止
 * SAMEORIGIN:フレーム内のページ表示を同一ドメイン内のみ許可
 * ALLOW-FROM uri:フレーム内のページ表示を指定されたドメインに限り許可

参考文献

http://www.techscore.com/blog/2015/03/05/%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%82%B8%E3%83%A3%E3%82%AE%E3%83%B3%E3%82%B0%E3%81%A3%E3%81%A6%EF%BC%9F/
http://www.techscore.com/blog/2015/03/05/%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%82%B8%E3%83%A3%E3%82%AE%E3%83%B3%E3%82%B0%E3%81%A3%E3%81%A6%EF%BC%9F/
http://qiita.com/tomochan154/items/a93c56536c78d1faff0f
IPA
https://www.ipa.go.jp/files/000026479.pdf

■ iframeインジェクション

 * WebサーバをSQLインジェクションなどの手段で乗っ取り、
   HTMLファイルの中に iflameのソースコードを埋め込み(インジェクション)攻撃する手法

# クリックジャッキング と似ている?

参考文献

http://isadmin.j-its.jp/useseen/iframeinj.html
http://www.securebrain.co.jp/about/news/2011/08/new-injection-attack.html

【セキュリティ】 Web開発で気をつける事項

$
0
0

Web開発で気をつける事項

【1】 アドレスバー/ステータスバー/右クリックメニューを非表示にしない
 【2】 SSLサイトの場合、画像/JS/CSSなどもHTTPS通信にする
 【3】frame/iframe を極力使用しない

【1】アドレスバー/ステータスバー/右クリックメニューを非表示にしない

 * アドレスバー/ステータスバー/右クリックメニューを非表示にすることはできるが、
http://www.nikkeibp.co.jp/sj/2/column/u/10/index1.html
からも分かるように、アドレスバーにより、偽装サイトを見破るヒントになるため。
また、表示しておけば、サーバ証明書の確認もできる。

【2】 SSLサイトの場合、画像/JS/CSSなどもHTTPS通信にする

 * 画像データですら、改ざんできるため

【3】frame/iframe を極力使用しない

 * frame/iframe を使うことにより、内部のサイトが書き換えられる可能性がある
http://blogs.yahoo.co.jp/dk521123/35927553.html
 * SSLサイトの場合、frame/iframe の各パーツで各々がHTTPSなのか確認が困難
   (使うなら、全てのサイトに対して、SSL通信にする事)


関連記事

iframe に関わるセキュリティ攻撃

http://blogs.yahoo.co.jp/dk521123/35927553.html

【JavaScript】 AngularJS ~入門編~

$
0
0

できる事

1) HTMLテンプレート機能
2) 双方向データバインディング
3) DI(依存性注入)によるモジュール管理機能
4) ルーティング機能
5) Ajax通信機能

サンプル

Hello World!

<html ng-app>がないと動かないので注意
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset='UTF-8'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="yourName" placeholder="Input your name"><br />
<span>Hello, {{yourName}} !</span>
</body>
</html>

【JavaScript】 AngularJS ~コントローラ編~

$
0
0

■ サンプル

例1:コントローラで、Hello World!

<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
angular.module('sampleApp', []);
angular.module('sampleApp').controller('sampleController', function($scope) {
    $scope.msg = 'Hello, World!';
});
</script>
</head>
<body>
<div ng-controller="sampleController">
  {{msg}}
</div>
</body>
</html>

例2:ng-repeat

<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
angular.module('sampleApp', []);
angular.module('sampleApp').controller('sampleController', function($scope) {
    $scope.users = [
       {id:1, name:"Mike"},
       {id:2, name:"Tom"},
       {id:3, name:"Smith"},
       {id:4, name:"Kevin"},
       {id:5, name:"Ken"},
    ];
});
</script>
</head>
<body>
<div ng-controller="sampleController">
  <li ng-repeat="user in users">
  {{user.id}} {{user.name}}
  </li>
</div>
</body>
</html>


関連記事

AngularJS ~入門編~

http://blogs.yahoo.co.jp/dk521123/35935493.html

【JavaScript】 knockout.js を使った変更検知(ダーティ・チェック)を考える

$
0
0

はじめに

 * データ入力をして、別ページに移動しようとしたら、
   移動しても問題ないか?っていう確認ダイアログを表示する実装を
   webアプリケーション上で考える
 * knockout.js を使えば、双方向バインディングをサポートされているので、
   データ変更検知(ダーティ・チェック)が、比較的に綺麗に実装できるのかなっと。

サンプル

できれば共通化したいが、ひとまずは実装できた '
<html>
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'></script>
</head>
<body>
<input type="text" data-bind="value: textProperty" />
<input type="checkbox" data-bind="checked: boolProperty" />
<button data-bind="click: close">close</button>
<button data-bind="click: save">save</button>

<script type="text/javascript">
function ChangeTracker(root, isInitiallyDirty) {
    var result = function() {}
    var _initialState = ko.observable(ko.toJSON(root));
    var _isInitiallyDirty = ko.observable(isInitiallyDirty);
 
    result.isDirty = ko.dependentObservable(function() {
        return _isInitiallyDirty() || _initialState() !== ko.toJSON(root);
    });
 
    result.reset = function() {
        _initialState(ko.toJSON(root));
        _isInitiallyDirty(false);
    };
 
    return result;
};

var viewModel = {
    textProperty: ko.observable("Hello"),
    boolProperty: ko.observable(true)
};
viewModel.tracker = new ChangeTracker(viewModel, false);
viewModel.close = function() {
   if (viewModel.tracker.isDirty() &&
      !window.confirm('本当にいいんですね?(閉じる代わりにYahooに移動)')) {
      // キャンセル
      return;
   } else {
      location.href = "http://www.yahoo.co.jp/";
   }
}
viewModel.save = function() {
   viewModel.tracker.reset();
}
ko.applyBindings(viewModel);
</script>
</body>
</html>

【JavaScript】 knockout.js を使った変更検知(ダーティ・チェック)を考える [2]

$
0
0

はじめに

http://blogs.yahoo.co.jp/dk521123/35944445.html
でできる限り、共通処理にしたかったので、してみた。

サンプル

共通部分:外部JavaScript

js/ChangeValuesTracker.js
function ChangeTracker(root, isInitiallyDirty) {
    var result = function() {}
    var _initialState = ko.observable(ko.toJSON(root));
    var _isInitiallyDirty = ko.observable(isInitiallyDirty);
 
    result.isDirty = ko.dependentObservable(function() {
        return _isInitiallyDirty() || _initialState() !== ko.toJSON(root);
    });
 
    result.reset = function() {
        _initialState(ko.toJSON(root));
        _isInitiallyDirty(false);
    };
 
    return result;
};

function setViewModel(viewModel) {
   viewModel.tracker = new ChangeTracker(viewModel, false);
   viewModel.close = function() {
      if (viewModel.tracker.isDirty() &&
         !window.confirm('本当にいいんですね?(閉じる代わりにYahooに移動)')) {
         // キャンセル
         return;
      } else {
         location.href = "http://www.yahoo.co.jp/";
      }
   }
   viewModel.save = function() {
      viewModel.tracker.reset();
   }
   ko.applyBindings(viewModel);
}

使用者:HTML

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'></script>
<script type='text/javascript' src='./js/ChangeValuesTracker.js'></script>
<style type="text/css">
.odd {
    background-color: #ccc
}
.even {
    background-color: #aaa;
}
</style>
</head>
<body>
<table>
    <thead>
        <tr>
            <th>Delete?</th>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr data-bind="css: { even: $index() % 2 == 0, odd: $index() % 2 != 0 }">
            <td><input type="checkbox" data-bind="checked: isDeleted, attr: { name: 'isDeleted' + $index() }" /></td>
            <td><input type="text" data-bind="value: id, attr: { name: 'id' + $index() }" /></td>
            <td><input type="text" data-bind="value: name, attr: { name: 'name' + $index() }" /></td>
        </tr>
    </tbody>
</table>
<button data-bind="click: close">close</button>
<button data-bind="click: save">save</button>

<script type="text/javascript">
    function Person(isDeleted, id, name) {
       this.isDeleted = ko.observable(isDeleted);
       this.id = ko.observable(id);
       this.name = ko.observable(name);
    }
    
    function ViewModel(people) {
       this.people = ko.observableArray(people);
    }
    
    var viewModels = new ViewModel([
        new Person(true, 1, "Mike"),
        new Person(false, 2, "Tom"),
        new Person(true, 3, "Smith"),
        new Person(false, 4, "Kevin"),
        new Person(false, 5, "Ken"),
        new Person(true, 6, "Amy"),
    ]);
    
    setViewModel(viewModels);
</script>
</body>
</html>

関連記事

knockout.js を使った変更検知(ダーティ・チェック)を考える [1]

http://blogs.yahoo.co.jp/dk521123/35944445.html

【ASP.NET MVC】【VB】ASP.NET MVC でリストのモデルを表示する

$
0
0

サンプル

■モデル

EmployeeModel.vb
Imports System.Collections.Generic

Namespace Models

    Public Class EmployeeModel
        Public Property IsChecked As Boolean
        Public Property EmployeeId As String
        Public Property EmployeeName As String
    End Class

End Namespace
EmployeeListModel.vb
Imports System.Collections.Generic

Namespace Models

    Public Class EmployeeListModel
        Public Property Employees As List(Of EmployeeModel)
        Public Sub New()
            Me.Employees = New List(Of EmployeeModel)
        End Sub
    End Class

End Namespace

■コントローラ

SampleMvcController.vb
Imports System.Web.Mvc
Imports WebAppli.Models

Namespace Controllers
    Public Class SampleMvcController
        Inherits Controller

        Function Index() As ActionResult
            Dim model = New EmployeeListModel()
            model.Employees = New List(Of EmployeeModel) From
            {
                New EmployeeModel() With {.IsChecked = False, .EmployeeId = "X001", .EmployeeName = "Mike"},
                New EmployeeModel() With {.IsChecked = True, .EmployeeId = "X002", .EmployeeName = "Tom"},
                New EmployeeModel() With {.IsChecked = True, .EmployeeId = "Y001", .EmployeeName = "Smith"},
                New EmployeeModel() With {.IsChecked = False, .EmployeeId = "Z001", .EmployeeName = "Kevin"}
            }
            Return View(model)
        End Function

        Function SendResult(ByVal model As EmployeeListModel) As ActionResult
            Return View(model)
        End Function

    End Class
End Namespace

■ビュー

Index.vbhtml
@ModelType WebAppli.Models.EmployeeListModel

@Code
    ViewData("Title") = "Index"
    Dim index As Integer = 0
End Code

@Using (Html.BeginForm("SendResult", "SampleMvc", FormMethod.Post))
    @<table>
        <thead>
            <tr>
                <th>Checked?</th>
                <th>ID</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            @For Each employee In Model.Employees
                @<tr>
                <td>@Html.CheckBox(String.Format("Employees[{0}].IsChecked", index), employee.IsChecked)</td>
                <td>@Html.TextBox(String.Format("Employees[{0}].EmployeeId", index), employee.EmployeeId)</td>
                <td>@Html.TextBox(String.Format("Employees[{0}].EmployeeName", index), employee.EmployeeName)</td>
            </tr>
                index = index + 1
            Next
        </tbody>
    </table>
    @<input type="submit" value="Send" />
End Using
SendResult.vbhtml
@ModelType WebAppli.Models.EmployeeListModel

@Code
    ViewData("Title") = "SendResult"
End Code

<h2>SendResult</h2>

<table>
    <thead>
        <tr>
            <th>Check?</th>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        @For Each employee In Model.Employees
            @<tr>
                <td>@employee.IsChecked</td>
                <td>@employee.EmployeeId</td>
                <td>@employee.EmployeeName</td>
            </tr>
        Next
    </tbody>
</table>

【ASP.NET MVC】【VB】ASP.NET MVC で変更検知を考える ~簡易版~

$
0
0

はじめに

 * ASP.NET MVC で変更検知(ダーティ・チェック)を実装してみる
 * 「簡易版」と「knockout.js利用版」を作ってみた

サンプル

 * 以下の関連記事を元にしている。ビュー以外のモデル、コントローラについては以下を参照。
http://blogs.yahoo.co.jp/dk521123/35956746.html

■簡易版

 * 変更したら、問答無用に変わったと判断。
ビュー:Index.vbhtml
@ModelType WebAppli.Models.EmployeeListModel

@Code
    ViewData("Title") = "Index"
    Dim index As Integer = 0
End Code

@Using (Html.BeginForm("SendResult", "SampleMvc", FormMethod.Post, New With {.Id = "formID"}))
    @<table>
        <thead>
            <tr>
                <th>Delete?</th>
                <th>ID</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            @For index = 0 To Model.Employees.Count - 1 Step 1
                @<tr>
                   <td>@Html.CheckBoxFor(Function(model) model.Employees(index).IsChecked, New With {.data_bind = "value: isChecked"})</td>
                   <td>@Html.TextBoxFor(Function(model) model.Employees(index).EmployeeId, New With {.data_bind = "value: employeeId"})</td>
                   <td>@Html.TextBoxFor(Function(model) model.Employees(index).EmployeeName, New With {.data_bind = "value: employeeName"})</td>
                </tr>
            Next
        </tbody>
    </table>
    @<input type="submit" value="Send" />
    @<a href="http://www.yahoo.co.jp/" onclick="return checkToChangeValues()">Go yahoo!</a>
End Using
<script type="text/javascript">
    var hasChanged = false;
    $('#formID input').change(function () {
        hasChanged = true;
    });

    function checkToChangeValues() {
        if (hasChanged === true) {
            return confirm(
                'You have some changes.\nAre you sure you want to go to the other pages?');
        }
        return true;
    };
</script>

長くなったので、knockout.js利用版 は以下の関連記事に記載
http://blogs.yahoo.co.jp/dk521123/35964974.html


関連記事

ASP.NET MVC でリストのモデルを表示する

http://blogs.yahoo.co.jp/dk521123/35956746.html

knockout.js を使った変更検知(ダーティ・チェック)を考える [2]

http://blogs.yahoo.co.jp/dk521123/35949660.html

JavaScript で、Booleanに変換した際の注意事項

http://blogs.yahoo.co.jp/dk521123/35620716.html

【ASP.NET MVC】【VB】ASP.NET MVC で変更検知を考える ~knockout.js利用版~

$
0
0

はじめに

http://blogs.yahoo.co.jp/dk521123/35963034.html
のつづき。
今回は、変更した後に変更部分を元に戻した場合、変更していないと判断してくれるように作る

サンプル

 * 以下の関連記事を元にしている。ビュー以外のモデル、コントローラについては以下を参照。
http://blogs.yahoo.co.jp/dk521123/35956746.html
 * ASP.NET MVC + knockout.jsだと大抵ではajaxを使ったサンプルが多いが、
   今回のサンプルでは、(実験的な意味で)ajaxを使わずに、
   サーバとのやり取りを一回だけにしたサンプルにしてみた
 # ソースの作り的にはajaxを使った方が綺麗にコーディングできる
 * knockout.jsを使用すると、HTMLヘルパーって使わないなー

■knockout.js利用版

 * 以下の関連記事で取り扱った knockout.js を利用する。
http://blogs.yahoo.co.jp/dk521123/35949660.html
外部JabaScript:/Scripts/ChangeValuesTracker.js
function ChangeTracker(root, isInitiallyDirty) {
    var result = function() {}
    var initialState = ko.observable(ko.toJSON(root));
    var isInitiallyDirty = ko.observable(isInitiallyDirty);
 
    result.isDirty = ko.dependentObservable(function() {
        return isInitiallyDirty() || initialState() !== ko.toJSON(root);
    });
 
    result.reset = function() {
        initialState(ko.toJSON(root));
        isInitiallyDirty(false);
    };
 
    return result;
};

function setViewModelToCheckChagingValues(viewModel) {
    viewModel.tracker = new ChangeTracker(viewModel, false);
    viewModel.move = function() {
        if (viewModel.tracker.isDirty()) {
            return window.confirm('You have some changes.\nAre you sure you want to go to the other pages?');
        }
        return true;
    }
    ko.applyBindings(viewModel);
}

function parseBoolean(targetValue) {
    if (!targetValue) {
        return false;
    }
   
    return (targetValue.toLowerCase()) == "true";
}
ビュー:Index.vbhtml
@ModelType WebAppli.Models.EmployeeListModel

@Code
    ViewData("Title") = "Index"
    Dim index As Integer = 0
End Code

@Using (Html.BeginForm("SendResult", "SampleMvvm", FormMethod.Post, New With {.Id = "formID"}))
    @<table>
        <thead>
            <tr>
                <th>Delete?</th>
                <th>ID</th>
                <th>Name</th>
            </tr>
        </thead>
         <tbody data-bind="foreach: employees">
             <tr>
                 <td><input type="checkbox"
                            data-bind="checked: isChecked, attr: { value: isChecked, name: 'Employees[' + $index() + '].IsChecked' }" /></td>
                 <td><input type="text"
                            data-bind="value: employeeId, attr: { name: 'Employees[' + $index() + '].EmployeeId' }" /></td>
                 <td><input type="text"
                            data-bind="value: employeeName, attr: { name: 'Employees[' + $index() + '].EmployeeName' }" /></td>
             </tr>
         </tbody>
    </table>
    @<input type="submit" value="Send" />
    @<a href="http://www.yahoo.co.jp/" data-bind="click: move">Go yahoo!</a>
End Using

<script src="@Url.Content("~/Scripts/knockout-3.4.0.debug.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ChangeValuesTracker.js")" type="text/javascript"></script>
<script type="text/javascript">
    function Employee(isChecked, id, name) {
        this.isChecked = ko.observable(parseBoolean(isChecked));
        this.employeeId = ko.observable(id);
        this.employeeName = ko.observable(name);
    }

    function ViewModel(models) {
        this.employees = ko.observableArray(models);
    }

    var models = [];
        @Code
            For Each employee In Model.Employees
        @<text>
    var model = new Employee('@employee.IsChecked', '@employee.EmployeeId', '@employee.EmployeeName');
    models.push(model);
        </text>
            Next
    End Code

    setViewModelToCheckChagingValues(new ViewModel(models));
</script>

関連記事

ASP.NET MVC でリストのモデルを表示する

http://blogs.yahoo.co.jp/dk521123/35956746.html

knockout.js を使った変更検知(ダーティ・チェック)を考える [2]

http://blogs.yahoo.co.jp/dk521123/35949660.html

JavaScript で、Booleanに変換した際の注意事項

http://blogs.yahoo.co.jp/dk521123/35620716.html

ASP.NET MVC で変更検知を考える ~簡易版~

http://blogs.yahoo.co.jp/dk521123/35963034.html
Viewing all 860 articles
Browse latest View live