Android JSONObjectとかJSONArrayとか

半年ぐらい前に作ったAndroidアプリを最近見てみたら、データ取得に失敗していた。
よく見てみると、JSONデータ取得でExceptionになっていた。

アプリとしてはWebAPIをたたいてそこから帰ってくるJSONデータを加工してListViewに表示するもの。そのListViewに表示する際のJSON形式がいつのまにやら変わっていたのが原因っぽい。（連絡してよ～）

で、修正しようと思ったけど久々にAndroid触ったこともあって、手間取ったので一応まとめておく。


◆JSONObject
  JSONデータを扱うためのクラス。コンストラクタにJSONデータを渡すことで、
  getJsonString()等のメソッドでデータを取得できる。


◆JSONArray
  JSONデータのArray形式のデータを取得できるクラス。コンストラクタにJSONのArray形式の
  データを渡すことで、getJSONObject()等のメソッドでJSONObjectクラスを取得しそこから
  データを取得していく。

■変更前
今までは、JSONArrayでデータを渡すことでデータを取得できていた。

＜データ形式＞

  [{"key":"01","name":"sakura"},{"key":"01","name":"sakura"}]

＜ソース＞

	
    JSONArray coupon = new JSONArray(data);
    int len = coupon.length();
    for(i=0;i<=len;i++){
      JSONObject jCoupon = coupon.getJSONObject(i);
      ResponseDataCoupon rd = new ResponseDataCoupon(jCoupon);
      ListItem tmpItem = new ListItem(rd);
      list.add(tmpItem);
    }

しかし、形式が変わったため、以下のように一旦JSONObectからkey値を取得し、それからその キー値でgetJSONObjectを指定することでJSONデータの各レコードを取得するように変更した。 ■変更後 ＜データ形式＞

  {"1":{"key":"01","name":"sakura"},"2":{"key":"01","name":"sakura"}} ＜ソース＞

    JSONObject obj = new JSONObject(data);
    Iterator it = obj.keys();
    while(it.hasNext()){
      JSONObject jCoupon = obj.getJSONObject((String)it.next());
      ResponseDataCoupon rd = new ResponseDataCoupon(jCoupon);
      ListItem tmpItem = new ListItem(rd);
      list.add(tmpItem);
    }

ふー。そろそろAndroid再開じゃ。

jQuery ajaxでXMLとかJSONとかJSONPとか取得 - 2

今回はJSONPの取得。

JSONP…scriptタグを使用してクロスドメインなデータを取得する仕組み。

通常ブラウザなどに実装されている「同一生成元ポリシー（SOP）」という制約により、 Webページは自分で生成したドメイン以外のドメインのサーバと通信することはできない。

じゃどうするか、というとサーバ側ではまず

1. 読み込ませたいJSONデータを任意の関数の引数として定義
2. そのデータをxxx.jsonpみないにファイルに保存

を行う。
一方の呼び出し側では

1. javascriptタグのsrcにxxx.jsonpを指定
2. サーバ側の任意の関数を定義

する。

そうすることで呼び出し側からは、SOPの制約に引っかかることなくデータを取得できるようになる。

ではこれをjQueryをつかったら～、ということで以下ソースなど。

読み込まれるデータ

cb({"familylist":[
  {
  "name":"磯野",
  "father":"波平",
  "children":[
    "child":"サザエ",
    "child":"カツオ",
    "child":"ワカメ"
    ]
  },
  {
  "name":"さくら",
  "father":"ヒロシ",
  "children":[
    "child":"さきこ",
    "child":"ももこ"
    ]
  }
]})

jQueryでの読み込み処理

// ロード時に呼び
$(window).load(function(){
  $.ajax({
    type: "GET",         // HTTP通信 GET/POST
    url: "http://xxxxx/familylist.jsonp?callback=cb",   // リクエストURL
    dataType: "jsonp",    // データ型 xml/json/jsonp/script/text
    jsonp: "cb"  // コールバック関数
  });
});

// コールバック関数
function cb(json){

  // ループ処理 Family要素でループ
  for( i = 0; i < json.familylist.length; i++ ) {

    $("#familyList").append(json.familylist[i].name);
    $("#familyList").append("父:" + json.familylist[i].father);

    // 子供でループ
    for( j = 0; j < json.familylist[i].children.length; j++ ){

      $("#familyList").append("子:" + json.familylist[i].children[j].child + "
");
    }

  }
}


// 以下に書き込まれる

以上でOK！！


これでJSONP用にデータを提供したいときの定義方法もわかった。
それと何よりjQueryを使用するとチョー簡単にリクエストが作れるってことが
改めてわかった。当分はこれ使えそう。

以上

jQuery ajaxでXMLとかJSONとかJSONPとか取得 - 1

JavascriptのライブラリjQueryでXMLとかのデータを取得するまとめ。

jQuery・・・JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。

　　　　　　　　　ライブラリでは一番有名かも。

今回はjQueryでXMLファイルの読み込み。

基本jQueryのajax関数を使用してデータを取得し、それを要素にappendしていく。

  波平
  
    サザエ
    カツオ
    ワカメ
  


  ヒロシ
  
    さきこ
    ももこ
  

ではよくある読み込み処理

// ロード時に呼び
$(window).load(function(){
  $.ajax({
    type: "GET",         // HTTP通信 GET/POST
    url: "sample.xml",   // リクエストURL
    dataType: "xml",    // データ型 xml/json/jsonp/script/text

    // 成功時に呼び出せる処理
    success: function(xml) { readXML(xml); }
  });
});

// 読み込み処理
function readXML(xml){
  // ループ処理 Family要素でループ
  $(xml).find("family").each(function(){
    $("#familyList").append($(this).attr("name"));
    $("#familyList").append("父:" + $(this).find("father").text() + "
");
    // 子供でループ
    $(this).find("child").each(function(){
      $("#familyList").append("子:" + $(this).text() + "
");
    });
  });
}

// 以下に書き込まれる

今回はここまで

PHPで写真共有サイト構築 -1 ファイルアップロード前準備 ファイル選択やらlastModifiedDateやら

では今回は実際に今回作成した写真アップロード処理だー。

＜機能＞

• アップするフォルダを選択可能
• 複数ファイルを選択可能
• サムネイル一覧を表示可能
• サムネイル一覧から複数選択でダウンロード可能
• サムネイル選択後、実サイズの写真表示時に次ボタン、前ボタンでサムネイル一覧の前後の写真を表示

上記機能を実現するにあたり以下の機能も必要

• アップ時にサムネイル用画像作成
• 実ファイルも一定サイズを超えるとサーバに負荷がかかるため、一定サイズで圧縮
• アップするファイル名は写真撮影時の情報でソートできるように撮影時の時間でリネイムする

ではまずは今回はファイルのアップロードを作成するに必要な処理を説明。


ファイルをアップロードするには当然ユーザに

1. ローカルファイルを選択させ
2. 送信ボタンを押下

させる必要あり。でユーザが２送信ボタンを押下したところで、htmlのformをつかってphpのファイルアップロード処理を呼び出す。

今回2を送信する前にやるべきことについて。
ポイントは、

1. ファイル選択させる方法として、HTML5から可能になった複数ファイル選択させる
2. ファイル選択した際にファイル属性からファイル作成日を取得しておく

1はHTML5の機能なので簡単。以下参照。

  HTML5 基礎 複数ファイル選択

２はJavascriptのlastModifiedDateで取得可能
以下ソース。

function setFileCnt(form){
  var files = document.getElementById("selectFile").files;
  var fileCnt = form.fileCnt;
  var h = "";
  var n = "";
  var fName = "";
  var fileLen = files.length;
  for (var i = 0; i < fileLen; i++) {
    var file = files[i];

    // 最終更新日を取得
    var modifileDate = file.lastModifiedDate;
    var date = new Date(Date.parse(modifileDate));
    var yy = date.getYear();
    var MM = date.getMonth() + 1;
    var dd = date.getDate();
    var hh = date.getHours();
    var mm = date.getMinutes();
    var ss = date.getSeconds();
    if (yy < 2000) { yy += 1900; }
    if (MM < 10) { MM = "0" + MM; }
    if (dd < 10) { dd = "0" + dd; }
    if (hh < 10) { hh = "0" + hh; }
    if (mm < 10) { mm = "0" + mm; }
    if (ss < 10) { ss = "0" + ss; }
    fName += yy + MM + dd + "_" + hh + mm + ss + "";
    fName += ":";
    form.filesName.value = fName;
  }    
}

ポイントはファイルfile属性のlastModifiedDateで取得したデータをnew DateでData型にしてから日付を編集すること。以下が実際にできるファイル名。

  元ファイル名：IMG_2186.JPG

  作成日：2011/05/21 09:16 40秒

  作成されるファイル名：20110521_091640_IMG_2186.JPG

どす。これでファイルアップロードした先でもソート楽ちん！！