jq.mobiでアプリを作ろう
ちょっと作ってみたいアプリがあったので、モック程度でいいやと軽い気持ちで始めたのが最後でした・・・。
進めれば進めるほど「あれがしたい、これもしたい」ユーザが自分の中に生息していたことに気づきました。全く困ったものです。自分にとって何が大切なのか、完成させることなのか技術を学ぶことなのか、面白ければ期日なんて関係ないのか、などスコープを見定める必要がより、存在するという事です。
さて、前置きが長くなりましたが、今回はjq.mobiをチョイスしました。
データを表示するだけのはずだったんですが、そのデータをHTMLに全て書くなんてちょっとナンセンスだよね、と内なる顧客Aが言うので、JSONも取り入れる事にしました。
はじめはDBからデータを取得してJSONに吐き出すとこも考えてたのですが、モック作成を優先しようよと、内なる顧客Bが怒りだしたので、よしわかったよ、ごめんねと伝えて、htmlにJSON形式で直書きして使うことにしました。
1.Kitchen thinkをごにょごにょしていく
tagやidは置換して、不要なとこは削り、必要なとこは流用してくリプレイス型のお仕事です。
2.jsonファイルを作ろう。
実は作ったことはない(既存のwebAPIを使ったとこまで)ので、形式がわかりませんでした・・・。あきらめかけてたころに、ふと眺めたサイトにありました。マーフィーですね。
json.html
{item: [ {"title" : "aaa", "author" : "bbb", "text" : "ccc"}, {"title : "ddd", "author" : "eee", "text" : "fff"} ] }
http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter03/006/
3.読み込み元を修正しよう
ここが地味にはまりました。やっぱりコピー&ペーストはよくないですね。自分で解決しようと思って考えたらすぐに解決しました。
index.html
<!-- NG --> function doJSON(num, target){ $.getJSON(webRoot+'json.html', function(data){ var items = []; $.each(data[num], function(key, val){ items.push('<liid='" + key + '"]]>' + val + '</li>'); }); $(target).html(JSON.stringify(items)); })}; <!-- ok --> function doJSON(num, target){ $.getJSON(webRoot+'json.html', function(data){ // 配列により、不要なカンマが出力されてたので文字列に変更 var items; $.each(data.item[num], function(key, val){ items += '<li id="' + key + '">' + val + '</li>'; }); // わざわざJSON形式に変換してたので削除 $(target).html('<ul>' + items + '</ul>'); }) };
まぁ、つまり自分とkitchen thinkに邪魔されてたというわけです。やれやれ〜。
さて、次に進みやすくなったわけですが、疲れたので今日はここまでー。
ああだこーだ考えたこともあり、11pomodoroでしたとさ。