読者です 読者をやめる 読者になる 読者になる

Re:Start

いまはディレクターやってます

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でしたとさ。