Category: Git

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  […]

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

前回 Backborn.jsのTodosアプリでAzure SQL(クラウド)+MVC5(VS2013)の組み込み。 今回 前回はBackborn.js(MVVMフレームワーク)+Todosアプリは、、今回はKnockout.jsにて作成してみます。 C#とかVBAとかに慣れている私にとっては、非常にとっつきやすく、とても簡単なのが印象的でした。 DOMの要素(button, input, だいたいなんでも) に data-bindすれば、 foreachや埋め込み変数など使えますし。 http://kojs.sukobuto.com/docs/introduction ko.observableをつかえば、データが変更したイベントを受け取りViewを更新することもできます。 http://kojs.sukobuto.com/docs/observables 以下はイメージです。 Web Siteは以下です。 http://vs-samples.azurewebsites.net/Home/Knockout_Todos サンプルコードは以下のGitHubに保存しました。 https://github.com/snoro/VS2013_MVC_Sample/tree/master/Backborn_Todos_WebAPI /Views/Home/index.cshtml @{ ViewBag.Title = “Knockout_Todos”; } <h2>Todo: Knockout.js with Twitterbootsrap</h2> <div class=”container”> <input type=”text” placeholder=”Enter Todo” value=”” data-bind=”value: todoInputValue” /> <button data-bind=”click:addTodo”>Add</button> <table class=”table table-hover”> <thead> <tr> <th>Todo</th> <th>Delete</th> </tr> </thead> <tbody data-bind=”foreach: todoList”> <tr> <td data-bind=”text: todoText”></td> <td><button class=”btn btn-default” data-bind=”click:$root.removeTodo”>削除</button></td> </tr> </tbody> </table> </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 TodoModel(value) { var self = this; self.todoText = ko.observable(value); } //ViewModelを定義 function TestappViewModel() { var self = this; self.todoList = ko.observableArray(); //todoの配列 self.todoInputValue = ko.observable(”); //todo 入力値 //Todo追加 self.addTodo […]

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にユーザを登録しておきます。 2. GitHubにからのリポジトリを作成しておきます。 Tabの[Repositories]で、[New]をおします。 3. 今回は[Test3]でリポジトリを作成します。 4. Visual Studio で、なんでもいいので、新規プロジェクトを作成します。 今回は[MVC5]で作成しました。 5. Visual Studio の設定 [ツール][オプション] [ソース管理][プラグイン選択][現在のソース管理プラグイン]を[Microsoft Git Provider] に設定する。 6. GitHubへの接続設定 ユーザ名、、電子メールアドレス等設定する。 7. ソリューションを選んで右クリックしてコミットしてローカルリポジトリにソースを格納する。 PCのローカルのリポジトリにコミットされます。 8. リモートのGitHubと同期するために、[同期されていないコミット]ボタンを押す 最初のときだけGitHubのリポジトリのURLをきいてくるので入力します。 今回は https://github.com/snoro/Test3 と入力後発行します。 そしてGitHubをみるとアップロードされています。 補足1 GitHubのリモートアドレスの変更 GitHubのURLの設定のところは、ローカルリポジトリを作成後、同期のときの、1回しか、表示されないので、 もしかしたら、コマンド等でGitHub(リモートリポジトリ)のURLを変更しないといけないかもしれないのです。 わたしは、わからないので、ローカルリポジトリを新規作成して、GitHub(リモートリポジトリ)のURLを変更しています。 補足2 カレントのローカルリポジトリの変更 ソリューション作成時は、カレントリポジトリにプロジェクトを作ります。 また、カレントローカルリポジトリは消せませんので、削除する場合等には切り替える必要があります。 その場合、電源プラグみたいなアイコンをクリックしてカレントにしたいローカルリポジトリをダブルクリックします。 補足3 GitHubとの同期時に重複エラーが表示され、うまく同期でくなくなったら GitHub側でReadme 等修正するとなぜか重複等で、同期が失敗する場合があります。 コマンドたたけば治せるのでしょうけど、 GitHub側を正としていいなら、簡単なのでGitHubから、もう一度複製しちゃってもいいです。 参考 Create, Connect, and Publish using Visual Studio with Git http://blogs.msdn.com/b/visualstudioalm/archive/2013/02/06/set-up-connect-and-publish-using-visual-studio-with-git.aspx