Category: ASP.NET MVC

Microsoft GraphAPI(formerly “Office 365 unified API”) されたのでアプリをAzureWeb SiteにUPしました。

ついに、Microsoft GraphAPI(formerly “Office 365 unified API”) がGAされましたので、 いまのところがREST APIがメインなのでC#にて作成してみました。 Microsoft GraphAPI(formerly “Office 365 unified API”) GAのニュースは以下から Introducing the Microsoft Graph –The Azure AD GraphAPI goes big time http://blogs.technet.com/b/ad/archive/2015/11/19/introducing-the-microsoft-graph-the-azure-ad-graphapi-goes-big-time.aspx 作成したアプリ概要 Microsoft GraphAPI(formerly “Office 365 unified API”)  のV1.0リリース版を使用して、グループとユーザを取得してExcelにてグループとユーザマトリックスを作成しました。 作成したアプリの場所 https://o365info.azurewebsites.net 作成したアプリの画面イメージ ログイン後 実行画面 ダウンロードしたExcelを表示   作成したアプリの作成で参考になったサイトを集めたところ https://www.facebook.com/groups/office365developer/  

デモアプリ「Office365 Unified API」+「AzureWebサイト」+「EXCEL Format」にてGroup/User Matrixを作成しました。

概要 「ユーザがどこの配布グループ・セキュリティグループに属しているの?」とよく聞かれます。 実際には、システム管理者が、PowerShell等を使用してマニュアルでエクセルで作成している管理者も多いと思います。 Office365 Unified API(Beta)を使用して、Group/UserをOffice365から取得して、Excelでマトリックスにしてみました。 とても扱いやすい関数ですので、みなさんも作ってみましょう!! デモサイトは以下です。 注意)ユーザ100件以上のユーザは時間がかかるかもしれません。 https://o365info.azurewebsites.net/   Download Excel ボタンをクリックします。 以下のようにExcelフォーマットでダウンロードされます。 別のシートにグループ一覧、ユーザ一覧も出力しています。     プログラムについて以下のサイトが参考になります。 Office 365 unified api を使いこなそう Office 365 unified API (PREVIEW) Examples of Office 365 unified API calls (preview) とりあえず、動かしてみたいなら。 https://apisandbox.msdn.microsoft.com/   プログラムの詳細は時間のあるときに書きます。 内部ではUnified APIを使用して、AccessToken一つで Tenant情報/Group一覧/Groupメンバー/User一覧/Userプロフィールを取得しています。 Office365 Unified API便利ですので使ってみてください。

Visual Studio 2013 Update2、ユーザIDがメールアドレスになり、多要素認証が登場

ユーザに「アカウントが登録されました」や「パスワードリセット時」に重要なメールアドレスなのですが 前のVisual Studio ASP.NET MVCで作成すると、メールアドレスがログインアカウントでなかったので、別でメールアドレスを登録させるところを作ったり、手間だったのですが、なんと、Visual Studio 2013 Update2から、ログインIDがメールアドレスになりました!! また、多要素認証の項目がでててきた。涙~うれしいー 開発者が困っているところは、着々と改善されますね。   詳しくはMicrosoft Virtual Academyをみるとよくわかります。 最新の Visual Studio & .NET によるモダン Web アプリケーション開発 ASP.NET Identity   画面 電子メールアドレスが、ユーザのログインIDに!これで、メールアドレス必須にできるので、パスワードリセットや通知等に使える!!   ASP.NETのテーブル(AspNetUsers) TwoFactorEnabledという多要素認証の項目が!  

Knockout.js でTodoアプリ (Visual Studio2013)

概要 Todoアプリのハンズオンを行うための資料です。 /Views/Home/ index.cshtml @{ ViewBag.Title = “Knockout_Todos”; } <h2>knockout – Todo</h2> <div class=”container”> <div class=”col-lg-12″> <div class=”input-group”> <input type=”text” class=”form-control” data-bind=”value: title”/> <span class=”input-group-btn”> <button class=”btn btn-info” data-bind=”click: addTask”>Add</button> </span> </div> </div> <div class=”col-lg-12″><h3>Task List</h3></div> <div class=”col-lg-12″> <ul class=”list-group” data-bind=”foreach: tasks”> <li class=”list-group-item”> <span data-bind=”text: title”></span> <a href=”#” data-bind=”click: $parent.deleteTask” class=”pull-right”> delete </a> </li> </ul> </div> </div> @section scripts{ <script type=”text/javascript” src=”~/Scripts/knockout-3.1.0.js”></script> <script type=”text/javascript” src=”~/Scripts/test.js”></script> } /Scripts/ test.js $(function () { function Task(title) { this.title = title; } function ViewModel() { var self = this; self.title = ko.observable(“”); self.tasks = ko.observableArray([]); //配列の変更を検知する self.addTask = function () { var task = new Task(self.title()); self.tasks.push(task); self.title(“”); }; self.deleteTask = function (task) […]

Knockout.js で足し算アプリ (Visual Studio2013)

概要 足し算アプリのハンズオンを行うための資料です。 /Views/Home/ index.cshtml @{ ViewBag.Title = “Knockout_Caluculate”; } <h2>knockout – Caluculate</h2> <div class=”container”> <p> <input data-bind=”value:value1″ type=”text” /> + <input data-bind=”value:value2″ type=”text” /> = <span data-bind=”text:result”></span> </p> </div> @section scripts{ <script type=”text/javascript” src=”~/Scripts/knockout-3.1.0.js”></script> <script type=”text/javascript” src=”~/Scripts/test.js”></script> } /Scripts/ test.js $(function () { //Modelを定義 function ViewModel() { var self = this; self.value1 = ko.observable(0); self.value2 = ko.observable(0); self.result = ko.computed(function () { return parseInt(self.value1()) + parseInt(self.value2()); }); } //binding (View – VIewMode) ko.applyBindings(new ViewModel()); }); 参考 ´http://www.slideshare.net/tanago3/knockout-handson

Windows Azure のWebサイトでExcelを操作してダウンロード実験してみました。(Visaul Studio 2013 ASP.NET MVC5 + SpreadSheetGear)

概要 有料のExcel操作ツールでのSpreadSheetGear で Windows Azure Webサイトで実験してみました。 このツールのすばらしいところは、10万ちょいの開発ライセンスを買えばWebサーバでも使えること。(一部制限事項あり詳細は以下のサイトから) http://www.xlsoft.com/jp/products/spreadsheetgear/ 実験結果 Windows Azure Webサイトの環境にて、ASP.NET MVC5 (C#)にてサーバサイドで Excelを操作してダウンロード Excelファイルをダウンロードの結果 C#のプログラム通りにExcelが編集さされています。 環境 Windows Azure Webサイト(無料) Visual Studio 2013 Professional ASP.NET MVC5 .NET Framework 4.5.1 SpreadSheetGear 2010 プログラムソース Test.cshtml HomeController.cs

ログインでセッションをつかうのか? for ASP.NET MVC5

最初に ログオンの状態とかサーバのセッション変数を実現するにはASP.NETやPHP等でも、セッションIDをクッキーに保存するか、セッションIDをURL文字列に書くのは昔から変わっていないようですが。 最新のASP.NET MVC5でももう一度、確認のため実験してみました。 自分のもってたiPhone3とかはたしかDefaultでCookie 読み込まないしどうしたものか? でも、Cookie非対応のモバイルブラウザーはGoogleさんも非対応といっているぐらいだからいいか!? Google https://support.google.com/a/answer/2473579?hl=ja Google のユーザー名とパスワードを入力すると、モバイル ブラウザに認証トークンが届きます。これにより、ユーザーは Gmail、Google カレンダー、その他の Google サービスにそのつどログインしなくてもアクセスすることができます。通常、認証トークンは Cookie として保存されます。一部の古いモバイル ブラウザでは Cookie がサポートされていないので、Google で従来の認証メカニズムを一時的に保持していましたが、新しい機能の開発に力を注ぐために、この従来のメカニズムを終了することになりました。 豆知識 HTTP.HeaderのBasic認証の項目を利用して「Cookie」「URLストリングキー」の回避する方法もあります。 詳しくないですが、もう一つの方法としては、HTTP.HeaderのBasic認証の項目を使ってキーをやり取りする方法があるようです、都度XHTTPRequestのたびにJavaScriptでHeaderのBasic認証の項目にキーを追加して、サーバでそのキーを確認する。 セッション(Session)と クッキー(Cookie)についての基礎学習は以下が参考になります。 http://www.geocities.jp/sugachan1973/doc/funto62.html 基本的な実験(Cookie Session) Visual Studio2013+MVC5 でプロジェクトを作成する。 Web.config にセッション使用しますとかきます。(session) HomeController.cs でセッション使う 実行してFidderで監視します。 ブラウザー側からWebサーバへのRequest でCookieeを使ってセッションIDを送り込んでいます。これでサーバはこのセッションID(SessionID)からサーバ内のセッション(Session)変数を使えるようになります。 Request 基本的な実験(Cookieless session) クッキーレスセッション(cookieless session)にしてみます。 Web.config にクッキーレスセッション使用しますとかきます。(cookieless session) そうすると、Cookie をつかわずに、セッションID(session)をURLでわたします。 それで、Session変数をサーバ側で参照できるようになります。 http://localhost:49506/(S(snioge0aumu1souuueuane5n))/ ログオンの実験(ASP.NET MVC ログオンの実験) ブラウザーで、クッキーうけいれないように設定してから、ASP.NET MVC5 をデバック実行する。 やはり、クッキーうけいれないようにしたらエラーがでた。 Fiddler でみるといかのクッキーをリクエストしていた。 ASP.NET MVC5 の標準のログインはクッキーは必要ですね。 Request sent 634 bytes of Cookie data: ASP.NET_SessionId=mpf5oa5sq2x4krnwp2x1kasd; __RequestVerificationToken=xXXc5ZqoikiPcPYr509GbN_AlowCcADWBtufwx_dStVo1zAO2jg_Yce0daLANcNih-gKtTfMqDcdJpe8AR4qKzaYUbGAS6OYmzPsQGU6OO81; .AspNet.ApplicationCookie=7kMtLtGm2zyXqsyHA1HGB1d59U18FormsU17_PGi7AiIbppv-VpTBvyw25VObzi8plEOfPF1deXzJPIl56bvtpyX-oOzjYvuXheQNS06hco_cH506pQPANnl5R7Bv5K5P98UmUrMgY-_Cgg8bxK0SlO8N096pURbWPAAyTl4AH4hrw6crgbCITcl4l3k9AG4dfzDVoDwFYFTnQBEU1NcF_YlMjkbTekEAk0eWgFariBbYVCgmMexT2EJth0IraFo-2zUfZjqX_Ht2yAe8Tdp65y7zzasci_uHeqGfLjcujr_eB2gSTgkqCsq3j-M9JBip645ARStBy9dYqGRPL4eGIVnEOMpOE3_A3xuZyXkXcJ5r1tPEmVAJ6-66CI47WXe6hAFt2ugGlbY1ygXT793kN4U6s_Z7qVmFndB3-lrnBU

Windows8 Phone(Nokia) のTwitterbootstrap の対応方法

通常はこのタグがあれば、PC/Iphone/Android 対応してくれますが。 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> なぜかWindows8 Phone だけ対応してくれない。 PCの画面が縮小された感じになる。 これにJavaScriptでおまじないをいれるとAndroid/IphoneのようにWindows8Phoneも対応してくれます。  以下をHTMLのHeadに追加する。 <script type=”text/javascript” src=”/Scripts/Users/bootstrap-fix-winphone8.js”> bootstrap-fix-winphone8.js  bootstrap-fix-winphone8.js 

SPA(Single Page Application) for knockout.js + TwitterBootstrap + Sammy.js + SQL Azure + Visual Studio2013

概要 Mobile(携帯)、PC/Tabletでも動作し、かつローカルアプリのように”さくさく”動かすためにには JavaScriptでSPAで、一生懸命かかないといけないです。 今回、簡単にSPA(Singe Page Application)ができるよに再利用可能な ベースクラスを作成してみました。 MITライセンスでご自由に改変して使ってください。 以下のサイトを事前にみておくと理解が早いです。 Visual Studio 2013 の Single Page Application (SPA) テンプレートを使った開発 (Knockout) Knockout.js で Multiple View (Partial View) をエレガントに切り替える方法  要件 iPhone/Android/PC/Tabletで動作すること レシンポンシブルデザインにするためTwitterBootstrapを使用し各種端末に対応する。 SPAの実現のために、JavaScriptを使用する Jquery + Knockout.js を使用して各種端末に対応する。 戻るボタン等のURL履歴に対応のこと Sammy.js により、URL履歴に対応する。 デバックしやすくするためにVisual Studio 2013を使用する データベースはSQL Azureを使用する。 WebサイトはWindows Azure 簡易Webサイトを使用する。 Demo Web Site(デモサイト) http://vs-samples.azurewebsites.net/Home/SPA010 Program Source(プログラムソース) サンプルコードは以下のGitHubに保存しました。 https://github.com/snoro/VS2013_MVC_Sample/tree/master/Backborn_Todos_WebAPI イメージ 一覧画面 新規作成をクリックすると新規作成画面へ 明細をクリックすると更新画面へ 新規作成画面 更新画面 課題 データの読み込み時、更新時にLoading画面を表示してボタンを押せないようにする。 一覧画面にページング処理をいれる。 明細データの取得や設定のコードを書かないでいいように改良する。 入力時に日付等にデートピッカーをつける ソース抜粋 SPA010.cshtml.cshtml   knockout-SPA-0.1.1.js 参考 Visual Studio 2013 の Single Page Application (SPA) テンプレートを使った開発 (Knockout) Knockout.js で Multiple View (Partial View) をエレガントに切り替える方法  [Sammy.js]URLによって処理を分割する  ASP.NET MVC 4 : モバイル デバイスの検出とビューの切り替え機能 (2)  ASP.NET MVC 3 で jQuery Mobile を使ってみる (インデックス)  スマホ対応初心者に送るjQuery Mobileの使い方“超”入門  ノンデザイナーも必見!Twitter BootStrapの特徴と導入前に確認すべき事  Twitter Bootstrap Button Generator  […]

Knockout.js でSQL Azureに一覧表示、データ更新のサンプル(VisualStudio2013 MVC5 with Twitterbootstrap)

前回 Knockout.js でSQL Azureに一覧表示、データ追加のサンプル(VisualStudio2013 MVC5 with Twitterbootstrap) 今回 Knockout.js でSQL Azureへ一覧表示とデータ更新するサンプルをVisual Studio2013で作りました。 以下はイメージです。 Eidtボタンを押すと編集モードになります。 Web Siteは以下です。 http://vs-samples.azurewebsites.net/Home/Knockout_WebAPI2 サンプルコードは以下のGitHubに保存しました。 https://github.com/snoro/VS2013_MVC_Sample/tree/master/Backborn_Todos_WebAPI Knockout_WebAPI2.cshtml 参考 Simple data binding with Knockout, Web API and ASP.Net Web Forms http://www.dotnetjalps.com/2013/05/Simple-data-binding-with-Knockout-Web-API-and-ASP-Net-Web-Forms.html Building a Knockout.js based client for Web API services in an ASP.NET MVC app http://www.devcurry.com/2013/08/building-knockoutjs-based-client-for_16.html Hello world, with Knockout JS and ASP.NET MVC 4! http://blogs.msdn.com/b/amar/archive/2012/12/12/hello-world-with-knockout-js-and-asp-net-mvc-4.aspx Building Single Page Apps with ASP.NET MVC4 – Part 1 – Basic Desktop Application http://bartjolling.blogspot.jp/2012/02/building-single-page-apps-with-aspnet.html