Dashcode使ってGAEアプリのインターフェースfor iPhone を作る。

XcodeとObjCをいじった結果、コンパイラーがやっぱり嫌いなんだなぁと、痛感した。このままじゃ、のー成果になっちゃうので、Dashcodeを利用して、GAEアプリのiPhoneインターフェースを作ってみました。

アプリは、単語帳的なモノでそれぞれの単語名（タイトル）と意味（内容）を見るというもの。
リストページ（forPC)
詳細編集ページ（forPC)

下準備

GAEで、api的なものを作り、JSONを返すようにしておく。今回は配列で返したかったので、

class Api_get_all(webapp.RequestHandler):
  def get(self):
    res = []
    cards = Card.all()
    for i in cards:
      res.append({'name':i.title, 'location':i.body})
    self.response.content_type = 'application/json'
    self.response.out.write("%s" %
        (simplejson.dumps(res, ensure_ascii=False)))

なコードを書いた
今回は、/pn/api/get_all にアクセスすると全データをjsonで返すようにした。

Dashcode作業

新規プロジェクト作成
ブラウザテンプレートを選択
タイトルとかを適当に変更
JSファイルを弄る

jsの中身は、ほとんどテンプレートのまんま使った。
変更したところは、resortsというhashが、ハードコードされていたところ

var resorts = [
    { name: "Alta", location: "Alta, Utah" }, 
     ・・・
    { name: "Vail", location: "Vail, Colorado" }
];

をざっくりコメントアウトして、xhrでjsonゲットしてくるファンクションを作って食わせた。

var resorts = goXHR();

function goXHR(){
    var _xhr = new XMLHttpRequest();
    if (_xhr) {
      _xhr.onreadystatechange = function() {
        if (_xhr.readyState == 4 && _xhr.status == 200) {
            resorts = eval(_xhr.responseText);
            return json_data;
        }
      };
      _xhr.open('GET', '/pn/api/get_all');
      _xhr.send(null);
    };
}

とりあえづ、これで動くと思ったが動かない。

すんなり、json持ってきてオリジナルのハッシュを書き換えれば住むと思ったらクロスドメイン引っかかった。（あたりまえか？）gae側をJSONP対応にしてみようと思ったけど、読み込みの仕方をダイナミックするやり方が分からなかったので、ファイル自体ををGAEのサーバーにアップしてしまい、すべてのファイルを静的に扱う事で対応した。ドメイン越え無し。

app.yamlに以下の様なモノを追加した。

- url: /pnc
  static_dir: pnote/pn_client

これで、/pnc アクセスすれば、ドメイン越えもなく使えるようになった。めでたしめでたし。
リストページ（for iPhone)
詳細ページ（for iPhone)

Dashcodeは、あまり弄られてないソフトな気がするけど、非常に使いやすい。なにげに、配備まで出来てしまう。デプロイ先は、WebDAVが使えるサーバーか.Macが選択出来る。適当にコーディングして、ポチっと押したら配備終了。マジ簡単。

PC用ページ＞http://a2c.appspot.com/pn
iPhone用ページ＞http://a2c.appspot.com/pnc/index.html
safariのみ対応みたい

When it’s ready.

出来るまで出来ない

Dashcode使ってGAEアプリのインターフェースfor iPhone を作る。

下準備

Dashcode作業