Code 2012 のアンケート表示Webアプリを作成しました

今日、明日と Code2012 という素晴らしいイベントが開催されています。

催し物の一つとして、イベント開催前よりアンケートのAPIが公開され、
数人の方がクライアントアプリを作成されています。

ということで、私もアンケートを表示するだけのアプリを作ってみました。

http://miso.cloudapp.net/

MVC4
MVC4 Web API
Json.Net
knockout.js
twitterのbootstrap

を使いました。
サーバ側でWebClientでhttp://code-survey.herokuapp.com/surveys.jsonからjsonを取得し、
MVC4のApiControllerでデータを公開、
jQueryよりそのjsonを取得し、knockout.jsでバインドさせています。

つっかかったところ

WEB APIがはくJson

{
 app_name: "native",
 created_at: "2012-07-06T05:32:29Z"
}

{
 app_name: "native",
 created_at: "2012-07-06T05:32:29Z",
 free_comment: "",
 how_year: 1,
 id: 1,
 languages: "",
 locale: "",
 updated_at: "",
 why: ""
},

プロパティがnullだったり、空だったりすると、前者のようにプロパティオブジェクトが取得できませんでした。
普通のControllerのJsonResultだと、そんなことはなかったのですが…。

http://forums.asp.net/t/1811144.aspx/1
ここのサイトを参考にして、
App_Startにて

{
GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings = new JsonSerializerSettings();
}

とかくと直りました。これでよいのでしょうか…。

knockout.js

knockout.jsを初めて使いました。
複雑な処理をしようとすると、難しくなりそうという印象です。

コードはこんな感じです。

.js

$(function () {

    var answerLoadUrl = "/api/answer";

    var data = [];
    var viewModel = {
        answers: ko.observableArray(data)
    };
    ko.applyBindings(viewModel);

    $.ajax({
        url: answerLoadUrl,
        success: function (answers) {
                     
           viewModel.answers(answers);
        }
    });

});

html

<ul id="answers-content" data-bind="foreach: answers" class="unstyled">
    <li>
        <div class="why">
            <span class="title label large">なぜ？</span>
            <div class="content">
                <ul data-bind="foreach: why_reasons">
                    <li data-bind="text:$data"></li>
                </ul>
            </div>
        </div>
        <div class="how-year"">
            <span class="title label">コード歴</span>
            <div class="content" data-bind="text:how_year"></div>
        </div>
        <div class="locale" >
            <span class="title label">活動拠点</span>
            <div class="content" data-bind="text:locale"></div>
        </div>
        <div class="free-comment" >
            <span class="title label">コメント</span>
            <div class="content" data-bind="text:free_comment"></div>
        </div>
        <div class="info">
            <span class="by label">app by</span>
            <div data-bind="text:app_name"></div>
            <span class="creation-date label">日付</span>
            <div data-bind="text:created_at"></div>
        </div>
    </li>
    <li>
        <hr />
    </li>
</ul>

実際に使っていくとなると、しばやんさんの
knockout.js の注意すべき点
がとても参考になりそうです。

よかったところ

Htmlの修正が楽だった！

例えば、

<div>
  ....
  ....
</div>

これをspanタグに直したい！ってなった時に、
Visual Studio 2012 RC だと、最初のdivをspanに直しただけで、
後ろの閉じタグも同時に直してくれます！
これはとても感動しました！

scriptやcssの読み込みが楽だった

MVC4の機能の１つです。

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
 "~/Scripts/jquery-1.*"));

と書くと、jquery-から始まるすべてのスクリプトを読みこんでくれます。
これも大変楽になりました。

Azureデプロイが簡単だった

プロジェクト作成→Configファイル取得→デプロイ
という流れだけでAzureにあげることができました。
（以前試した時は、なかなかできなかったのですが…）
今度は、DB接続にチャレンジしたいところです。

miso_soup3 Blog

主に ASP.NET 関連について書いています。