Archive for 6月 2014
SPA → アプリをやってみる
SPAはLoadしてしまへば、サーバー側に必要なのはWebAPIだけになる。
んだば、これはこのままアプリにできるんでね？ をやってみた。
HTML/Javascriptをアプリ化するツールを探す。
VS2013Update2で、VisualStudioでもMulti-Device Hybrid Appsできるアドインがあるらしい。
が、どうもオラの古いAndroidには対応してないらいしい(T.T)
簡単に動作を確認してみるだけなので、今回はMonacaで試してみた。
結論として、Javascriptコードを修正する必要もなくほぼそのままアプリ化できた。
bootstrapなスタイルまでそのまま移行したので見た目はイケてない。
流石にここはもうひと工夫が必要か。
としても、想像してた以上に簡単にできた… いいかも！
これができるってのが、単なるajaxじゃあないSPAな意味ってことでしょう！
SPA: postコマンドはどっちにバインドする？？
Formの入力を送信するvmEdit.postをバインドする方法は２つある。
Formにバインドする方法
<form class="form-horizontal" data-bind="submit: post">
buttonにバインドする方法
<button class="btn btn-primary" data-bind="click: post">編集を保存する</button>
どっちでも同じような気がするが、動かしてみると微妙に違う。
Formをsubmitすると、（サーバーへの送信が行われるわけではないが）
アドレスバーのURLがなんやら気持ち悪い感じに書き換えれられる；
ただそのおかげで、一覧へ戻ったときに行われるリストの更新は確実に行われる。
サーバーａｐｉへのリスト要求にキャッシュ応答が使われることがない！ような感じ。
buttonバインド方式だとpost前のリストが応答されることがある。（サーバー次第か）
でも、これがURL書換えの意図なのかどうか？は、まだわからない。
ページのURLが書き換えられても、その後もSPAとしては問題なく動作するようだが、
F5が…
SPAで一覧・詳細をやってみた
もっとも良くあるパターンをSPAではどうやるのか？をやってみた。
リストのリンクはどうなるの？は、
ViewModelのメソッドにBindすれば良いだけみたい。
<a data-bind="text: Name, click: $parent.edit"></a>
これだけで、行がBindしているModelをメソッドに渡してくれる。
クリックで起動するメソッドでは、受け取ったModelでEditビューを準備してナビゲートするだけ。
self.edit = function (fruit) {
app.Views.Edit.setModel(fruit)
app.navigateToEdit();
};
良い感じ！だと思います。
ajaxでやってもURLは変わらないわけで、それだってSPAと言えばSPAでしょ！なんだが、
リストのリンクをクリックしたときに、サーバーとの通信がまったくないのが大きな違いかな。
SPAはステートを持つのだ！ ←辺りを「SPA」と区別して呼ぶのだろう。
silverlightで普通にやってたことができるようになった。だけのような気もするが；
あとは、この同じコードをスマホアプリ化もできれば回り道した価値もあるってもんでしょ
ユーザー情報をAzure Table Storageに格納する
デモアプリをAzure Webサイトに発行してみることにする。
デモなので（もったいないので）、データはAzure Storageを使う方針にする。
ASP.NET Identityは、ユーザー情報の格納先も簡単に変えられるようになっているらしい。
Table Storage用プロバイダのパッケージがいくつか見つかる。
例えば、このパッケージをインストールして、この手順とおりにやればとても簡単に変更できる。
https://identityazuretable.codeplex.com/wikipage?title=Sample%20Mvc&referringTitle=Documentation
Googleアカウントを使用したOAuth2.0認証も問題ない。
これで、デモアプリからEntity Frameworkを削除できる。
SPA: 検証おわり
MVC5 SPA Templateに、出身地編集Viewを追加して、Meアプリを完成した。
いいと思う→SPA！
これで、Javascriptに取り組む準備がやっとできたような気がする。
ajax＆jqueryでviewをReplaceしてたときは気持ちのどこかが途方に暮れていた。
コードもViewに埋め込んだままで、デバッグも困難していた。
そのもやもやが一気に晴れてくるような気がする。
SPA: viewの切替え
MVC5 SPA TemplateにViewを追加して、_Homeとそれを切り替えるにはどうするの？
http://blogs.msdn.com/b/tsmatsuz/archive/2013/11/07/knockout-js-multiple-view-change-using-with-and-computed.aspx
新しいTemplateを使って開始したSPAで、松崎さんのこのエレガントな方法を使用する方法がわからない。
このtemplateのAppViewmodelにそれが組み込まれているのかどうか？
は、半分できてて未完成。みたいな。
app.viewプロパティが定義されているのに、その意味も、役割の説明も、使用されている箇所もない！
たぶんおそらく、これの役割はcurrentViewだと思う。
HomeViewがBindするapp.homeはko.computedで定義されているのに、
なぜか必ず、return app.Views.Home するようになっている。
これを、app.viewを判定して、app.view != app.Views.Homeのときはnullを応答するように、
↓を追加する。
if (self.view() !== self.Views[options.name]) return null;
これで、例えばHogeViewを追加して、HogeViewModelの中で、
Sammy(function () {
this.get(‘#hoge’, function () {
app.view(app.Views.Hoge);
});
});
としておいて、navigateToHoge()をすれば、ViewはHome→Hogeに切り替わるようになる。
（Homeが非表示になり、Hogeの表示が復活する）
Viewの切替はこれでOK。
ただ、SPAページがLoadされた時点でappインスタンスは未だない。ので、
SPAページに含まれるViewが一瞬全部表示されて見える。
は、SPAの外側（jqueryでdom操作をして）でコントロールする。
SPA: ナビゲーション
さて、ViewとViewModelの関係はだいたい見えた。
しかし、それだけでは、出身地が表示されるカラクリの説明には十分ではない。
apiにアクセスしてVMを更新する処理は、いったいどこから起動されたのだろう？
その処理はHomeViewModelの中にある。
MVC5 SPA Templateは、ここはSammy.jsを使うようになっているようだ。
でもって、app.addViewModelでVMをappに登録する際、
ViewのリンクやボタンにバインドできるnavigateTohogeコマンドも用意されるようになっている。
ただ、navigateTohogeは、location.hashを登録した名前（#hoge）に変更するだけで、
自動的にViewの切り替えを行ってくれるわけではない。（AppViewModel自体にその機能はない）
navigateTohogeしてlocation.hashが変わった時に何をするか？
は、HogeViewModelに自分で記述する必要がある。
が、そのハンドラーに一体どうゆうコードを書けば良いの？が、よくわからない；；
その中ででajaxでサーバーから新たなViewを取得して既存のViewを置き換えても良いのか？
を迷う。 この時点でko.applyBindingsは終了しているので、
その後にそれ（ViewのReplace）を行うのは思い切り違和感がある。
が、それができなければ、navigateToじゃないよな～とも思って、途方に暮れる；；
knockoutじゃなくkendoUIを使うサンプルがあって
http://msdn.microsoft.com/ja-jp/magazine/dn605877.aspx
こっちは、SPAフレームワークとしてナビゲーション時にViewを切り替えてくれる機能もある。
これを見てしまうと、VS2013の新しいSPA Templateがどこか欠陥品に感じてしまうのだが…
使用するViewは最初に全部ロードしておき、
VMを使って表示／非表示をコントロールしてViewを切り替えているように見せる。
が正解かもしれない。
http://learn.knockoutjs.com/#/?tutorial=webmail
このサンプルもそうしているので、これがknockoutの流儀でいいのだろう！
そう考えると、最初にまとめて読み込むViewがそのSPAを構成するViewの全て。となり、
SPAとその他MVCなViewの区分けも明確でとてもわかりやすいし、
SPAのサイズというか粒度も大きくなりすぎないように歯止めもかかって良いかもしれない。
結論、SPAでナビゲーションに使用するViewはSPAなページに全部含めてまとめてLoadする！
Viewの切替もVMでコントロールする。
SPA: View→ViewModelの関係
home/indexの応答でLoadされるScriptで、ViewModelインスタンスが準備されて、
Viewに定義されたBind属性でViewModelの各Objectに結びついて、
app.home.myHometownの内容がページに表示される。
でもって、この関係の目的というか理由というか。重要なことは、
Scriptで操作するのはViewModelだけ！
で、自分が書くコードでViewのDOMにアクセスしないということ。
スタート SPA
少し時間が取れそうなので、技術的補給をしておこうと思って、
SPA ・・・なにそれ？気持ちいいの？ をやってみている。が、手ごわい(T.T)
喫緊には、モバイルアプリ開発の方が優先要求なわけだが、
モバイルアプリがアクセスするサービスをどうするの？を考えるとweb apiはどうなの？
を片付けておく必要があって、でもって、
web apiなにそれ？に、つっこむと、SPAに着地するので避けられれない→SPA。
おそらくモバイルアプリにもMVVMは必要になるので無駄にはならない。というか重要か。
せっかくなので、VS2013からMVC5のSPA templateを指定してプロジェクトを開始する。
実行してみる → 「は、なに！なにが違うの？」 ここからオラはどこへ行けば良いの？いきなり迷子になる。
唯一の手がかりはこれ 
Templateで追加されたScripts/appフォルダの中のjsが表示しているのは間違いない！
が、それがどうゆうカラクリなのか？の説明はいまのところどこにも見つからない。うわーん
せめて、これくらいの説明でもあればずいぶん助かるのにと思うが、どうなんだろう？？http://stackoverflow.com/questions/23036762/how-do-i-add-a-new-view-to-a-asp-net-spa-project
SPAとは、あるURLに関連づくクライアント側のMVVMフレームワークとViewModel群で、
BundleConfigに定義する、bundles.Add(new ScriptBundle("~/bundles/app").Include(
が、Silverlightのxapに相当すると考えるとわかり易い気がする。
SilverlightにはViewも含まれるが、SPAの場合はViewだけ場所が異なるので、この辺りがわかり悪さの原因と思う。
とにかく、ひとつのWebの中にSPAはひとつだけとは限らないわけで。
SPA Templateを使ってWebアプリプロジェクトを開始すると、SPAという形式のWebアプリがあるように誤解するが、
Webアプリは普通に普通のWebアプリとしてあるだけで、その中のひとつのPage（URL）がSPAになる！ってことだ。よね？
生成されるSPAなjsファイルのうち、app.viewmodel.js, app.datamodel.js, _run.jsは、
SPAなフレームワークに属するもので、基本的に開発するものではない。よね？
開発するのは、_Home.cshtmlとhome.viewmodel.cs。つまり、Viewとそれに対応するViewModel。
SPAに新しいView／ViewModelを追加していくのがSPA開発の主作業になるというわけだ。
その開発で追加するViewModelを登録して管理するのがAppViewModel！という感じはわかるが、
説明がまったくないので、その使用方法は手探りだ。
というか、たったそれだけのコードなので見ればわかるでしょ！ってことなんだろうが、
何を話しているのかしっとも理解できない→JavaScript(T.T)
TypeScript版を希望します（どこかに既にあるのかもしれない）
nasu38yen
ピースペース 