Fly Away: 2011-06-12

2011年6月18日土曜日

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

今回はJSONPの取得。

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

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

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

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

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

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

する。

そうすることで呼び出し側からは、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() + "
");
    });
  });
}

// 以下に書き込まれる

今回はここまで

2011年6月17日金曜日

GAE(Google App Engine)　環境構築-2 プロジェクト作成とデプロイ

今回はＥｃｉｐｓｅでのＧＡＥのプロジェクト作成と作成したプロジェクトの
クラウドへのデプロイまで。

以下手順

Eclipse用意
Eclipse plugin（google plugin）とSDKインストール
EclipsePluginの設定
プロジェクト作成
Eclipseで動作確認
ディプロイ
クラウドで動作確認

=== ①Eclipse用意 ===
http://mergedoc.sourceforge.jp/

3.6 Helios使用しましょ。

=== ②Eclipse plugin(google plugin)とSDKインストール ===
Eclipseのメニュ->ヘルプ->新規ソフトウェアのインストール
で以下のパスを指定

http://dl.google.com/eclipse/plugin/3.6

ここからgoogleのSDKとPluginをインストールする。

=== ③プロジェクト作成 ===
Eclipseのウィンドウ->設定->Google->Appエンジンにインストールしたプラグインのパスを設定。
Eclipseがインストールされているディレクトリのplugins->com.google.appengine.eclipse.sdkbundle.1.4.2_1.4.2.v201102111811
を指定。

=== ④プロジェクト作成 ===
ではやっとプロジェクトの作成。
ファイル->新規->Web アプリケーション・プロジェクトでプロジェクト作成

以下の画面でプロジェクト名とパッケージ名を指定し完了でプロジェクト作成。

=== ⑤Eclipseで動作確認 ===
とりあえず何も修正せずにコンパイルしてローカルで動作確認をする。

まずコンパイルする必要があるので、Eclipseのツールバーに出ている
以下のボタンを押下。

以下の画面でそのままコンパイル実行。

あとはEclipseのプロジェクトを右クリックし、実行。

http://localhost:8888/でアクセス可能！

=== ⑥ディプロイ ===
いよいよデプロイ。
デプロイはチョー簡単。

⑤のiconの一番右のAppエンジン・プロジェクトのデプロイを押下。

作成したプロジェクトを選択し、googleアカウントで登録したメールアドレスと
パスワードを設定しApp Engin project settingsを押下

アプリケーションIDにGAEのアプリに登録した名前を指定しＯＫ押下。

最後に配置ボタンを押下。
するとコンソールにアップしてます的なログが次々に出てきて以下がでたらＯＫ！！

Deployment completed successfully

=== ⑦クラウドで動作確認 ===

以下のサイトの管理画面のCurrent Versionにある数字をクリックして④のEclipseからの
実行画面と同じものが表示されればＯＫ！！

https://appengine.google.com/

以上

2011年6月16日木曜日

Redmine　入門　やらアジャイルやら

今のプロジェクトにRedmineを使ってみよう。
まえのプロジェクトでも使っていたけど、利用者側だったので今回は管理者として
いろいろためしてみたい。ついでにRailsの勉強にもなるし。

ということでとりあえずRuby環境を構築。

インストールしたのはall-in-oneの
すぐに使えるのがいい。

で参考にしているのが以下のサイト。

3年使ったRedmineの使い方について共有したい10のこと

アジャイルって前から興味があったけど、これから少しずつ勉強していこう。