Backborn.jsのTodosアプリでAzure SQL(クラウド)+MVC5(VS2013)の組み込み。

前回

VisualStudio2013 MVC5 with Twitterbootstrapにおいて、Backborn.js でTodos のサンプルを組み込んでみた。

今回

前回はBackborn.js(MVVMフレームワーク)+Todosアプリは、JavaScriptのローカル変数で動作するものでしたが、今回はデータをデータベース(SQL Server, Azure SQL)に保管してみます。

以下が完成したもの。Windows Azureでホスティング、 SQL Azureのデータベースを使用しています。

Web Siteは以下です。

http://vs-samples.azurewebsites.net/Home/Todos_WebAPI

 MVC5_VS2013_Backborn_SQLAzure0010

前回作成した、Todo に以下の処理を行います。

サンプルコードは以下のGitHubに保存しました。

https://github.com/snoro/VS2013_MVC_Sample/tree/master/Backborn_Todos_WebAPI

MVC5のRESTfulの、サービスを実装します。このサーバ再度のWeb APIでクライアントサイドのBackborn.js と通信します。

  1. データの型を定義します。 Models/Todo.cs
    ※重要1)ビルドしておきます。 ビルドしていないと次の新規作成のときにClassを参照できない
    ※重要2)Entity Frameworkのバージョンの挙動の違い
    title, order, done はBackborn.js のTodoモデルでは頭が小文字なので、
    C#側のモデルも頭を小文字にしておかないといけない。
    Entity framework5(VS2012)は頭が大文字でも小文字に自動的にしているようですが、
    Entity Framework6(VS2013)から頭がそのまま、大文字でくるのでBackborn.js側で違う項目と判断して、データ表示がうまくできないです。
    MVC5_VS2013_Backborn_SQLAzure0020
  2. 新しくスキャルフォールディングされたアイテムを選択します。
    MVC5_VS2013_Backborn_SQLAzure0030
  3. 「Entity Framework を使用したアクションがあるWeb API2 コントローラー」を選択します。
    MVC5_VS2013_Backborn_SQLAzure0040
  4. 完了すると「ApiController(TodosController)」が作成されます。
    MVC5_VS2013_Backborn_SQLAzure0050
  5. RESTfulなApiControllerがきのうするか実行してみます。
    テストURL
    http://localhost:50262/api/todos
    以下のようにJSONがダウンロードされてきます。
    MVC5_VS2013_Backborn_SQLAzure0060
    ※ちなみに、Entity Frameworkのコードファーストなので、自動的にテーブルも作成されます。
    MVC5_VS2013_Backborn_SQLAzure0070
  6. Backborn.js のTodoのモデルをローカルストレージからRestfulなAPIに変更します。

    //localStorage: new Backbone.LocalStorage(“todos”),
    url: function () { return ‘/api/todos’; },

    MVC5_VS2013_Backborn_SQLAzure0080

  7. これで実行すると以下のようにローカルのSQLサーバと接続されます。
    MVC5_VS2013_Backborn_SQLAzure0010
  8. SQL Azureに接続を変更します。
    Windows Azure管理ポータルでデータベースを作成します。
    まずはローカルでテストしたいので、「この IP アドレス用に Windows Azure ファイアウォール ルールを設定する」を設定しておきます。
    その後、「ADO.Net、ODBC、PHP、および JDBC の SQL データベース接続文字列を表示する」で接続文字列を表示します。
    MVC5_VS2013_Backborn_SQLAzure0090
  9. ADO.NET を接続文字列をコピーします。
    MVC5_VS2013_Backborn_SQLAzure0110
  10. Web.config の接続文字列を以下のようにAzureように書き換えます。
    MVC5_VS2013_Backborn_SQLAzure0120
    <connectionStrings>

    <!–Local DB–>
    <!–<add name=”Backborn_Todos_WebAPIContext” connectionString=”Data Source=(localdb)\v11.0; Initial Catalog=Backborn_Todos_WebAPIContext-20131031155459; Integrated Security=True; MultipleActiveResultSets=True; AttachDbFilename=|DataDirectory|Backborn_Todos_WebAPIContext-20131031155459.mdf” providerName=”System.Data.SqlClient” />–>

    <!–SQL Azure–>
    <add name=”Backborn_Todos_WebAPIContext” connectionString=”Server=tcp:XXXXXXXXXX.database.windows.net,1433;Database=ZZZZZZZZZZ;User ID=EAPDB_User@XXXXXXXXXX;Password=YYYYYYYYYY;Trusted_Connection=False;Encrypt=True;Connection Timeout=30″ providerName=”System.Data.SqlClient” />

    </connectionStrings>

  11. 成功すると以下のようにWindows Azure Webサイト+SQL AzureでBackborn.js Todosアプリが動作します。
    http://vs-samples.azurewebsites.net/Home/Todos_WebAPI
    MVC5_VS2013_Backborn_SQLAzure0130

参考

ASP.NET Backbone Template 

Integrating Backbone.js with ASP.NET Web API

Single Page Application with Backbone.js and ASP.NET Web API

VisualStudio2013 MVC5 with Twitterbootstrapにおいて、Backborn.js でTodos のサンプルを組み込んでみた。

Visual Studio 2013 から MVC5でプロジェクトを作成するとデフォルトでTwitterBootstrap(CSS)のきれいなデザインが組み込まれます。

今回は、Visual Studio でBackborn.jsでサンプルが少ないことから(Knockout.jsは多いと思います)作成してみました。

※Backborn.js は有名なMVVMのフレームワークですので、省略します。

1. まずは、Backborn.jsのサンプルでおなじみのTodosを作ってみることにします。

http://localtodos.com/

Backborn_todos_0010

2.日本語の解析済みのサンプルソースコードはGitHubにありますので、これを参考にしながら、Visual Studio2013で作成します。

https://github.com/yuku-t/backbone-sample

3. Visual Studio 2013 でサンプルを作成してみました。

※私のサンプルは以下のGitHubにあげました!

https://github.com/snoro/VS2013_MVC_Sample/tree/master/Backborn_Todos

Backborn_todos_0020

4.Windows Azureの 実行結果は以下のようになります。

実際のWeb Site (Windows Azure)は以下です。

http://vs-samples.azurewebsites.net/Home/Todos

もとのデザインが、TwitterBootstarpでないので、デザインが壊れましたので?

いや、たぶん、HTML TemplateがMVC5にコピペしただけではだめそう?

後でTwitterBootstrapのデザインをきれいに修正しますが、こんな感じで動きます。

Backborn_todos_0030

5. 文字化けしていた原因がわかりました。

underscore.js のテンプレートを使用しているのですが。

Visual Studio にサンプルを張り付けると、自動でHTMLのソースを整形機能がきいていて、下記の赤い部分が自動で補完されていて表示が、化けていました。

※HTML貼り付け時、checkboxの後ろに自動的に [>]が補完される。

<input type=”checkbox”> <%= done ? ‘checked=”checked”‘ : ” %> />

後で、HTMLを手修正するか、Visual Studioの ツール/オプションの

テキストエディター/HTML/詳細設定 の貼り付けをFalseにすると自動成型しないです。

Backborn_todos_0040

Visual Studio 2013 GitHubの使い方

はじめに

最近よく聞く「GitHub」でVisual Studio 2013では標準で「GitHub」に接続できちゃいます。

そもそも「GitHub」は、GitというLinuxを作った人が、開発したオープンソースのバージョン管理ソフトです。

それを無料・有料でホスティングしているのがGitHubです。

そもそもGitHubとは一体何か?
http://jp.techcrunch.com/2012/07/15/20120714what-exactly-is-github-anyway/

Microsoftの少し前の技術ですと「Visual Source Safe」や、今ですと「Team Foundation Server」
などを使用していたと思いますが。

公開してオープンソースで開発するとなるとGitHubが便利です。
※公開しないプライベートでもできます。

自分のソースを公開したり、いっしょに開発したりするのによさそうです。

1. GitHubにユーザを登録しておきます。

githubvs0010

2. GitHubにからのリポジトリを作成しておきます。

Tabの[Repositories]で、[New]をおします。

githubvs0020

3. 今回は[Test3]でリポジトリを作成します。

githubvs0030

4. Visual Studio で、なんでもいいので、新規プロジェクトを作成します。

今回は[MVC5]で作成しました。

githubvs0040

5. Visual Studio の設定

[ツール][オプション]

[ソース管理][プラグイン選択][現在のソース管理プラグイン]を[Microsoft Git Provider] に設定する。

githubvs0050

6. GitHubへの接続設定

githubvs0060

ユーザ名、、電子メールアドレス等設定する。

githubvs0070

7. ソリューションを選んで右クリックしてコミットしてローカルリポジトリにソースを格納する。

githubvs0080

PCのローカルのリポジトリにコミットされます。

githubvs0090

8. リモートのGitHubと同期するために、[同期されていないコミット]ボタンを押す

最初のときだけGitHubのリポジトリのURLをきいてくるので入力します。

今回は https://github.com/snoro/Test3 と入力後発行します。

githubvs0100

そしてGitHubをみるとアップロードされています。

githubvs0110

補足1 GitHubのリモートアドレスの変更

GitHubのURLの設定のところは、ローカルリポジトリを作成後、同期のときの、1回しか、表示されないので、

もしかしたら、コマンド等でGitHub(リモートリポジトリ)のURLを変更しないといけないかもしれないのです。

わたしは、わからないので、ローカルリポジトリを新規作成して、GitHub(リモートリポジトリ)のURLを変更しています。

githubvs0120

補足2 カレントのローカルリポジトリの変更

ソリューション作成時は、カレントリポジトリにプロジェクトを作ります。

また、カレントローカルリポジトリは消せませんので、削除する場合等には切り替える必要があります。

その場合、電源プラグみたいなアイコンをクリックしてカレントにしたいローカルリポジトリをダブルクリックします。

githubvs0130

補足3 GitHubとの同期時に重複エラーが表示され、うまく同期でくなくなったら

GitHub側でReadme 等修正するとなぜか重複等で、同期が失敗する場合があります。

コマンドたたけば治せるのでしょうけど、

GitHub側を正としていいなら、簡単なのでGitHubから、もう一度複製しちゃってもいいです。

githubvs0140

参考

Create, Connect, and Publish using Visual Studio with Git

Windows 8.1+Visual Stduio 2013 ハブコントロールでストアアプリ作ってみた

概要

Visual Studio 213 RC でWindowsストアアプリのサンプルを作ってみた。

また、Visual Studio 2013 から作成できる「ハブコントロール」を試してみました。

※異なる種類のセクションを機能的にうまく表示させる画面にできるコントロール(トップページ、グループページ、項目の詳細ページ)

Windows ストアアプリといっても、Windows ローカルアプリをWPF(XAML) で作ったことがある人なら

簡単に作れます。(マウスじゃなくタッチを中心に考えて、タッチ領域は大きめにね。)

またHTML/CSSでもWindows ストアアプリは作れる。

WPF(XAML)については以下を参照

Windows 8.1インストール

  1. ダウンロード Windows 8.1 iso ファイル
    win81_vs2013_storeapp0010
  2. isoファイルの中にある「Setup.exe」を実行する
    win81_vs2013_storeapp0020
  3. 「引き継ぐ項目を選んでください」といわれるので、適当に選んで「次へ」
    win81_vs2013_storeapp0030
  4. 画面を次へ適当に進んで、インストール開始される30分ぐらいでで、インストールされます。
    例の「スタート」アイコンが表示されている。
    左クリックすると「スタート画面」が開きます。
    win81_vs2013_storeapp0040
  5. 右クリックするとOSシステムのメニューがでてくる。(いつも Windows+X 押してるやつね)
    win81_vs2013_storeapp0050
  6. IEもIE10からIE11になってた
    win81_vs2013_storeapp0110

Visual Studio 2013 RC にてハブコントロール Windowsストアアプリ作成

  1. Visual Studio 2003 起動します。
    win81_vs2013_storeapp0060
  2. Windowsストアアプリの「ハブアプリ(XAML)」 を新規作成します。
    win81_vs2013_storeapp0070
  3. 自動的にサンプルが作成されます。
    XAML のライブラリをいくつか取り込んでます。
    win81_vs2013_storeapp0080
  4. デザインをみてみますと、やっぱりXAMLです。
    win81_vs2013_storeapp0090
  5. Visaul Studio 2003から実行するとデバックできます。
    あとは中身を適当にいれればWindows ストアアプリ作成できます。
    簡単ですね。
    win81_vs2013_storeapp0100

Office365+SharePoint用アプリ+ASP.NET MVC5 で素早く簡単にかつ美しく作るアプリ by Visual Studio 2013

Office365+SharePoint用アプリ(Apps for SharePoint)+ASP.NET MVC5で作成すると、

標準でTwetterbootstrap(TwitterのきれいなCSS)の組み込み済みなため

簡単に、美しく、 また外部データベース(SQL Azure他なんでも)との連携も簡単に作れます。

また、MVC5は完全にクリーンなHTMLを出力するため、JavaScriptも書きやすく、外部のWebAPI(twitter,その他)との連携も簡単にできるでしょう!!

ここがいいです!!

Office365+SharePoint+Visual Studio 2013の相性抜群なのを確認して感動した。
難しかったクレームベース認証のところも、考えなくてもできた!!!

次回はこんな感じでやってみます。

Windows Azure(Webサイト) +SQL Azure(データベース) + Office365(SharePoint, Exchange, Lync) をベースに、
アプリで[SharePoint]と[SQL Azure]のデータを取得/設定できるアプリを作ってみたいともいます。

最終イメージ

自分のOffice365か Office365からアプリを起動しますと!

appsforsharepoint_1st_0010

SharePointの画面からASP.NET MVC5(SharePoint用アプリ)に切り替わる。

認証はそのままOffice365が継続されています。

以下はOffice365のユーザ名が取得してASP.NET MVC5(SharePoint用アプリ)に表示されています。

appsforsharepoint_1st_0020

準備

SharePointの用意、わたしは、当社のOffice365を使用しました。

もちろん、Office365 DeveloperでもOKですし、オンプレミスSharePointでもよいです。

とりあえず、デバック用に開発者サイトは準備しておいてください。

SharePoint管理センターからサイトの新規作成を行う

appsforsharepoint_1st_0030

開発者向けサイト を選んでください。

appsforsharepoint_1st_0040

必要であれば、実際にアプリを配置する。アプリカタログも作っておきます。
作成後こんな感じ

appsforsharepoint_1st_0050

開発

Visaul Studio2013/ファイル/新規/プロジェクト

Office/SharePoint/アプリ/SharePoint2013用アプリ

appsforsharepoint_1st_0060

準備でで作成した開発者向けサイトのURLを 「アプリのデバックに使用する SharePointサイトに指定します。」

SharePoint用アプリをホストする方法は、今回は、 「自動ホスト型」を選びます。

ASP.NET MVC5 は「プロバイダー向けホスト型」「自動ホスト型」のみ可能です。

自動ホストの場合は裏で自動的にWindows Azureに無料でホストしてくれます。
※デバック時はVisual StudioのビルトインASP.NETローカルサーバでホストされます。

appsforsharepoint_1st_0080

「ASP.NET MVC Webアプリケーション」を選ぶ

appsforsharepoint_1st_0090

Visual Studio 2013 のプロジェクトが作成されます。

SharePoint用アプリのマニュフェストファイル(XML)とASP.NET MVC5のサイトが作成されます。

appsforsharepoint_1st_0100

MVC5 のコントローラのところに、SharePoint2013から名前データを

クライアント オブジェクト モデルにて取得するプログラムが書かれています。

クライアント オブジェクト モデル(Client Object Model)は以下を参照

appsforsharepoint_1st_0110

Office365からユーザ名を取得してくるサンプルプログラム一部抜粋

using Microsoft.SharePoint.Client;

public class HomeController : Controller

{

[SharePointContextFilter]

public ActionResult Index()

{

User spUser = null;

var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);

using (var clientContext = spContext.CreateUserClientContextForSPHost())

{

if (clientContext != null)

{

spUser = clientContext.Web.CurrentUser;

clientContext.Load(spUser, user => user.Title);

clientContext.ExecuteQuery();

ViewBag.UserName = spUser.Title;

}

}

return View();

}

}

必要なのでWindowsアプリのパケットキャプチャーしてみた。

概要

ファイル権限デザイナーの製品についてネットワークポートのチェックが必要になり。

パケットキャプチャー(packet capture)してみました。

packetcapture_FAD0050

エンタープライズのお客様ですと、グローバルでネットワークを組み、パケットフィルタリング等も行っているので

使用ポート等の問い合わせを受けるときがあります。

予想されるポート

前回ブログ(ファイル権限デザイナーで使用しているNet系APIについての解説)のような関数を使用しており、

クライアントPCからファイルサーバの権限情報取得・設定、ユーザ情報の読み込みには

主に LDAP, SMB, DNS を使っていると想定されるます。

 パケットキャプチャーしてみよう。!

  1. 以下のサイトから [Microsoft Network Monitor 3.4]をダウンロードして、インストールします。
    http://www.microsoft.com/en-us/download/details.aspx?id=4865
    packetcapture_FAD0010
  2. インストール後(以下はWindows8の画面 )、管理者権限で起動します。
    packetcapture_FAD0020
  3. 新規作成してキャプチャーを開始します。
    packetcapture_FAD0030
  4. キャプチャー結果は以下のとおり正解でした!!!
    TCP 135 DHCP server, DNS server and WINS
    TCP 445 Microsoft-DS Active Directory, Windows shares(SMB2)
    TCP 389 Lightweight Directory Access Protocol (LDAP)
    packetcapture_FAD0040

 

次回

今回はポートを確認できましたので、次回は実際にFirewall 等を使用して、アプリの動作確認をしてみます。

参考

Windows 8 でパケットキャプチャ

ASP.NET MVC5 VisualStudio2013でJavaScriptデバッグ

Visual Studio 2013 ASP.NET MVC5 でJavaScriptはブレークポイントを置いてもうまく止まりません。

というこで調査してみました。debugger と書くとうまくいきました!!

MVC5_JS_debug0010

Internet Explorer で開発者ツール(F12)でブラウザーでデバックする方法もあります。

MVC5_JS_debug0020

以下のようにInternet Explorer の開発者ツール(F12)でブレークポイントをおいてデバックできます。

MVC5_JS_debug0030

なのですが。Office用アプリは開発者ツール(F12)使えない。

MVC5_JS_debug0040

そこでブレークポイントを置きたい場所にVisual Studio2013で

debugger と書きます。

以下は例

<script>

$(document).ready(function () {

$(“input:button”).click(function () {

debugger

$(“#test”).html(“Hello World!”)

});

});

</script>

<input type=”button” value=”テスト” />

JavaScriptがVisual Studioでデバックできるようになりました!。

MVC5_JS_debug0050

Office用アプリ+ASP.NET MVC5 で外部のアカウント連携(twitter, facebook, google, Microsoft Account, Office365等)

概要

Office用アプリ+ASP.NET MVC5 で外部のアカウント連携(Facebook等)をしてみました。

結果、いろいろありましたがうまくいきました!!

詳細

ASP.NET MVC5の最新のアカウント管理では簡単にFacebook, Twitter, Google, Microsoft Account, Office365 と連携できます。

普通のサイトでは以下のようにASP.NET MVC5 では以下のように認証する際にFacebook ならFacebook認証サイトにリダイレクト(redirect)します。

  • ASP.NET MVC5標準のFacebook連携ボタンを押す
    A4O_Autholization010

    Facebookの認証サイトにリダイレクトされます。
    ※URLが https://www.facebook.com/login.php?
    A4O_Autholization020

普通のサイトならリダイレクトされてもOKなのです。

しかしOffice用アプリでは、マニュフェストファイルにかいたURLのドメイン以外はIE Windowポップアップします(POPUP)!!

IE Windowポップアップしてしまうので認証がうまく連携しないのです!!

.

A4O_Autholization030

以下はOffice用アプリのマニュフェストファイルです。

  • Office用アプリの初期URL例:https://Test001.com/A4OTest001/ ←このドメイン以外ポップアップする

A4O_Autholization040

 

しばらくVisual Studio2013のOffice用アプリの設定をみていると以下のナイスな項目をみつけた!!

A4O_Autholization060 

「アプリで使用されるページのドメインを指定します。アプリで開かれたリモートページは、アプリと同じウインドウ内に表示されます。」

A4O_Autholization070

さっそく、アプリドメインに以下を追加してみて実行してみみる。

https://www.facebook.com

Office用アプリのマニュフェストはこんな感じです。

<?xml version=”1.0″ encoding=”UTF-8″?>
<!–Created:cb85b80c-f585-40ff-8bfc-12ff4d0e34a9–>
<OfficeApp xmlns=”http://schemas.microsoft.com/office/appforoffice/1.0″ xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:type=”TaskPaneApp”>
<Id>72b351ce-05dc-4569-86e4-a8d429ed90a4</Id>
<Version>1.0.0.0</Version>
<ProviderName>snoro</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<DisplayName DefaultValue=”Appli-AWeb_MVC_Main” />
<Description DefaultValue=”Appli-AWeb_MVC_Main Description”/>
<AppDomains>
<AppDomain>https://www.facebook.com</AppDomain>
</AppDomains>
<Capabilities>
<Capability Name=”Workbook” />
<Capability Name=”Presentation” />
<Capability Name=”Project” />
<Capability Name=”Document” />
</Capabilities>
<DefaultSettings>
<SourceLocation DefaultValue=”https://Test001/A4OTest001/” />
</DefaultSettings>
<Permissions>ReadWriteDocument</Permissions>
</OfficeApp>

https://www.facebook.com

ReadWriteDocument

実行した結果うまく外部のアカウント(Facebook)と認証できました!!

A4O_Autholization060

WordPress のPage View数の謎(プラグインにより12時間で51倍の差があった。)

WordPress のPage View の謎
とあるページのPVが過去15時間で以下のViewsになっていて

プラグライン:Site Stats=1 views

Wordpress_PV_020

プラグライン:Wordpress Popular=51 Views

Wordpress_PV_010

プラグインにより12時間で51倍の差があった。

カウントの仕方違うんだろうな、後で調べますが。

たぶん。

Page access でカウントしたら51 Viewsあるってこですかね?

検索エンジンとかにすいこまれたり。同じ人が再読み込みしたり重複排除したら 1Viewsってことかな?

モダンWebサイト(One ASP.NET)の新しい認証システム(クレームベース認証対応)

標準でクレームベース認証のサポート、まってました!! 

概要

Visual Studio 2013 から 新しい ASP.NET Identity が使えるようになった。

この認証システム基盤はマイクロソフトの戦略、One ASP.NET(マルチデバイス対応やモダンWebを実現するシステム)に基づいているようです。

Microsoft Blog (原文)

Introducing ASP.NET Identity – A membership system for ASP.NET applications

特徴としては、

  1. クレームベース認証(Claims Based)のサポート
    古いけどこの辺がわかりやすいかも。
    マイクロソフトのアイデンティティに関するビジョン
  2. ログイン連携
    Microsoft Account, Facebook, Twitter and Google 、独自認証に対応
  3. 権限管理
    認証済みかどうかだけではなく、ユーザの権限によってアクセス制限できる。

試しに Visual Studio 2013 RC でMVC5 プロジェクトを作成すると、認証系がそれで実装されます。

イメージは以下のような感じ

MVC5_Autholization

ただ。 現在 Viausl Studio 2013 がまだRCである。

ということで、検索してもほとんど情報がないので、以下のような機能がアプリでは必要になるが自力で実装しないといけない。

機能例:ユーザがパスワード忘れたときに、リセットするサンプルがないので自作しないといけない。

以下の関数が使えそうだが、マニュアルすらまだないので手探りで作らないといけない。

Microsoft.AspNet.Identity

PasswordManagerExtensions

ResetPassword(this IPasswordManager manager, string tokenId, string newPassword);

以下が認証系で使用しているライブラリ

using System.Security.Claims;
using Microsoft.AspNet.Identity;
using Microsoft.AspNet.Identity.EntityFramework;
using Microsoft.AspNet.Identity.Owin;
using Microsoft.Owin.Security;