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

TitaniumMobile勉強記

Web系エンジニア向けのキャリアアドバイザーやってましたが現在はフリーランスで開発含めて色々やってます。技術ネタとしてはRuby/RailsとJavaScript関連(Node.js、Titanium)あたり

ACSのPlaces試してみました

Titanium Mobile

タイトルそのままですが、ACSのPlaces機能を試してみました。

検証の目標

現在作ろうと思っているサービスを視野に入れてるので、現在の周辺の近くのお店を表示することができるか確認しました。

なお、お店の情報は、ACSの管理画面であらかじめ以下2件のお店の情報を登録して作業をすすめました

name ラ・カシェット
address 新宿区神楽坂1丁目10
city 東京
country 日本
latitude 35.700457
longitude 139.742207

name テイルズ エールハウス
address 文京区本郷3-16-5
city 東京都
country 日本
latitude 35.705263
longitude 139.761316

※自分の環境はTitanium SDK 2.1.0.GA、MacOSX 10.7.4 です。

$nearSphereのlongitude latitudeの順番ではまった

公式ドキュメントのサンプルを基本そのまま使っただけなので、簡単かと思ったのですが、1つだけはまった所がありました。

それは、

Cloud.Places.query({
  page: 1,
  per_page: 20,
  where: {
    lnglat: {
        '$nearSphere': [xxx, xxxx], 
        '$maxDistance': 0.00126
    }
  }

のnearSphereに設定するlongitude latitudeの順番。なんとなくこの類の位置情報サービス使う場合に、最初に緯度(latitude)、その後に経度(longitude)という思い込みがあったので

Cloud.Places.query({
  page: 1,
  per_page: 20,
  where: {
    lnglat: {
        '$nearSphere': [35.70, 139.76], 
        '$maxDistance': 0.00126
    }
  }

としていたのですが、ACSの場合には経度(longitude)が先なので上記指定だと該当するお店が検索できませんでした。

ひとまず出来たソース

前回作ったものをべーすに作ってるので、動作に必要そうな所だけピックアップしました

Titanium.UI.setBackgroundColor('#000');
var Cloud = require('ti.cloud');
var tabGroup = Titanium.UI.createTabGroup();

var win3 = Titanium.UI.createWindow({
  title:'Tab 3',
  backgroundColor:'#f2ead6'
});
var tab3 = Titanium.UI.createTab({
    icon:'KS_nav_views.png',
    title:'Tab 3',
    window:win3
});

Cloud.Places.query({
  page: 1,
  per_page: 20,
  where: {
    lnglat: {
        '$nearSphere': [139.76, 35.70], // [longitude latitude]
        '$maxDistance': 0.00126
    }
  }
}, function (e) {
  if (e.success) {
    var tableView = Ti.UI.createTableView({
      backgroundColor:'#f2ead6',
      separatorStyle:'NONE',
      width:300,
      top:5,
      left:5
    });
    var rows = [];
    console.log(e.places.length);
    for (var i = 0; i < e.places.length; i++) {
      console.log(e.places[i].name);
      console.log(e.places[i].updated_at);
      console.log(e.places[i].latitude);

      var row = Ti.UI.createTableViewRow({
        backgroundColor:'#f2ead6',
        width:320,
        height:60,
        left:0,
        top:0
      });
      var mainLine = Ti.UI.createLabel({
        bottom:0,
        width:280,
        left:5,
        height:1,
        text:'',
        backgroundColor:'#bbb882'
      });
      var subLine = Ti.UI.createLabel({
        bottom:1,
        width:280,
        left:5,
        height:1,
        text:'',
        backgroundColor:'#f2ead6'
      });
      row.add(mainLine);
      row.add(subLine);

      var nameLabel = Ti.UI.createLabel({color:'#595959',font:{fontSize:16,fontWeight:'bold'},width:200,height:30,top:5,left:5,text:e.places[i].name});
      row.add(nameLabel);
      var addressLabel = Ti.UI.createLabel({color:'#595959',font:{fontSize:12,fontWeight:'bold'},width:200,height:20,top:35,left:5,text:e.places[i].address});
      row.add(addressLabel);
      var dateLabel = Ti.UI.createLabel({color:'#595959',font:{fontSize:12,fontWeight:'bold'},width:100,height:30,top:5,left:210,text:'更新日付:\n'+e.places[i].updated_at});
      row.add(dateLabel);
      rows.push(row);
    }
    tableView.setData(rows);
    win3.add(tableView);
  } else {
    console.log('Error:\n' +
          ((e.error && e.message) || JSON.stringify(e)));
  }
});
tabGroup.addTab(tab3);
tabGroup.open();