knockoutのview model変数へのアクセス

View Model定義
var appViewModel = function() {
    var self = this;
    self.cards = ko.observableArray([]);
    self.editMode =  ko.observable(false);
    self.selectedItems =  ko.observable(0);
};

Binding
window.vm = new appViewModel();
ko.applyBindings(vm,document.getElementById("#mycardpage"));

アクセス
window.vm.cards([]);

jqm knockoutによるbuttonのenable

knockoutのenableによって、buttonのenable/disableできるが、jqmと併用する際、いくつかの注意点がある。

1)jqm <a  class="ui-btn ui-icon-info ui-btn-icon-left ui-btn-inline">情報</a>
のようの,<a>にはそもそもdisableできない。

2)<input type="button" data-icon="info" class="ui-btn ui-icon-info ui-btn-icon-left ui-btn-inline">を使用すると、なぜかiconが表示されない。深く考えず、<button>を使うことで解決した。

JQMにてlistviewの中にbuttonを表示させる

Listviewの中に、buttonを追加しようと思って、下記ではボタンの形はでてきない。

<div class="ui-block-d">
                            <a href="#" data-role="button" data-icon="gift">情報</a>
</div>

そこで、以下のように変更したところで、解決できた。

<div class="ui-block-d">
                            <a href="#" class="ui-btn ui-icon-gift ui-btn-icon-left">情報</a>
                        </div>

jquery mobileとknockout併用際checkboxレイアウト崩れる対応

jquery mobileとknockout併用し、APPを開発しているが、getMyCards()実行したら、konckoutでvisible: falseをbindingしているcheckboxは表示されてしまった。もう一度getMyCards()実行すると、ちゃんと表示しなくなった。

<li><a href="#mycardpage" data-theme="a" onclick="getMyCards();">Myカード</a></li>

そこで、以下の2つ方法があった。

1)getMyCards()の最初に$.mobile.changePage("#mycardpage");追加
2) onclickのところを以下のように変更
<li><a href="#mycardpage" data-theme="a"
                       onclick="$(document).on('pageinit','#mycardpage',function(){
                                                                       getMyCards();
                                                                       });">Myカード</a></li>

konckoutによるjquery mobile listviewへのbinding

いろいろ試した結果、いくつかの発見を纏める。
・checkboxをlabelの中に入れると、visible bindingが効かなくなる
・「$index」そのまま使うと、文字列操作の式でfunctionの文字列が使われる。0からの値で利用したい場合は「$index()」を使う

JS
var appViewModel = { cards: ko.observableArray([]),
                   addMode: ko.observable(false)};

ko.applyBindings(appViewModel);

HTML
 　　 <ul data-role="listview" id="card_list" data-inset="true" data-bind="foreach: cards">
                <li>
                    <a href="#">
                        <input type="checkbox" name ="card-to-add"
                                       data-bind="visible: $root.addMode,
                                                  attr: {id: 'checkbox-'+$index()}">
                        <label data-bind="attr: {for: 'checkbox-'+$index()}">
                            <span data-bind="text: CARDNAME"></span>
                        </label>
                    </a>
                </li>
            </ul>

jquery mobileのcheckboxを選択できる状態にする

jquery mobileを使って、JSで動的にcheckboxを追加しても、クリックしても何も反応はない。そこで、以下のJSを挿入することで解決できた。

$("[type=checkbox]").checkboxradio(); //add this line to enable checkbox

phonegap開発フロー

開発フロー 

cordova create pg_triplan com.caihongtown.trip "trip plan"

cd  pg_triplan

cordova platform add android

cordova build

emulatorを起動後 

cordova emulate android

cordova run android（端末にインストール） 

pluginの管理

cordova plugin（インストールしたpluginの表示）

cordova plugin search KEYWORD（使用できるpluginの検索） 

cordova plugin add org.apache.cordova.inappbrowser（追加）

cordova plugin rm org.apache.cordova.console（削除） 

phonegapをブラウザーでデバッグ

jsがブラウザーでデバッグできると便利。phonegap desktopは実現してくれる。

https://github.com/jxp/phonegap-desktop

使い方：

1）Copy debugdata.json into the root www folder of the project

2）Use the phonegap-desktop.js in place of the standard phone gap library

3）web serverを起動。pythonを利用すれば便利。python -m SimpleHTTPServer 8080

4）そして　http://localhost:8080/　にアクセス

UPDATE column from other columns

sql serverにLATとLNGをfloatとして保存した。位置情報をNULLになっていたGPSLOCに保存したい。

update [dbo].SHOPINFO
set GPSLOC = geography::Point(LAT,LNG,4326)
GO

SSMS経由でExcelデータをAzure SQLへインポート

２つテクニックがあります。
１）データインポートのメニューを出すために、ローカルDBに接続し、そのDBの名前を右クリックすると、「タスク→データのインポート」選択できる。その後、変換先のサーバー名をAzure SQLを指定すれば良い。

２）Azure SQLのテーブルには、[id]列は必須です。「マッピングの編集→SQLの編集」で
「[id] int identity primary key,」を追加。


詳細な操作は下記ビデオをご覧ください。

http://www.youtube.com/watch?v=QAd2uAGNHPw

Azure sql server上保存された場所を現在地からの距離順で表示

Azure sql serverのtableに場所名とその位置情報を保存している。
現在地からの距離順で場所を表示させる方法。

Azure mobile serviceのtableスクリプトを利用する。
読み取り操作に、以下のスクリプトを入れる。
requestのパラメータとして、現在地の経度と緯度をserver scriptに渡す。
SHOPINFOのGPSLOC列から位置情報を取り出し、距離を計算する。

function read(query, user, request) {
    var lat = request.parameters.lat;
    var lng = request.parameters.lng;
    var sql = "DECLARE @g geography;"+
              "SET @g = geography::Point(?,?, 4326);"+
              "SELECT *,round(@g.STDistance(GPSLOC),0) as DIST from [dbo].SHOPINFO order by DIST;"
    mssql.query(sql,[lat,lng],{success: function(results) {
        request.respond(200,results);
    }
    })
}

アプリから、get methodで以下のURLにアクセスする。
https://abcdef.azure-mobile.net/tables/shopinfo?lat=latitudeFromGps&lng=longitudeFromGps


参考になったページ：http://hatsune.hatenablog.jp/entry/2014/02/06/092155

既存のAzure上テーブルをmobile serviceにリンクさせる

Azureのsql server管理ポータルでmobile serviceと同じ名前のキスーマに追加し、編集してあるテーブルをmobile serviceにリンクさせるには、mobile serviceのDATAタブの「CRAETE」をクリックし、既存のテーブル名を指定するだけで、リンクできる。

以下のURLには、もっと詳しい情報がある。
http://blogs.msdn.com/b/jpsanders/archive/2013/05/24/using-an-existing-azure-sql-table-with-windows-azure-mobile-services.aspx

sql serverによる２点間の距離を出す

位置gとsql serverに保存している位置h間の距離を出すには、以下のTransact-SQLを使用

DECLARE @g geography;
DECLARE @h geography;
SET @g = geography::Point(35.66263195952044,139.7095092421263, 4326);
set @h = (select location from [dbo].[Landmark] where id=1);
SELECT @g.STDistance(@h);

sql serverにおける位置情報の保存

Azure mobile serviceのDBはsql serverとなっている。アプリで位置情報を扱うため、その保存方法を調べてみた。以下の文章に、３つが書かれている。
http://www.sql-server-helper.com/sql-server-2008/convert-latitude-longitude-to-geography-point.aspx

• 方法1、STPointFromTextを使用

ALTER TABLE [dbo].[Landmark]
ADD [GeoLocation] GEOGRAPHY
GO

UPDATE [dbo].[Landmark]
SET [GeoLocation] = geography::STPointFromText('POINT(' + CAST([Longitude] AS VARCHAR(20)) + ' ' + CAST([Latitude] AS VARCHAR(20)) + ')', 4326)
GO

ここは、経度Latitudeより緯度Longitudeが先に来ている。

• 方法2、STGeomFromTextを使用

UPDATE [dbo].[Landmark]
SET [GeoLocation] = geography::STGeomFromText('POINT(' + CAST([Longitude] AS VARCHAR(20)) + ' ' + CAST([Latitude] AS VARCHAR(20)) + ')', 4326)
GO

STGeomFromText は、POINT以外 POLYGON, LINESTRING, MULTIPOINT, MULTIPOLYGON, MULTILINESTRING and GEOMETRYCOLLECTIONもサポートしている。

• 方法3、geography::Pointを使用

UPDATE [dbo].[Landmark]
SET [GeoLocation] = geography::Point([Latitude], [Longitude], 4326)
GO

ここは、経度Latitudeが先で、一番使いやすいと思う。

• 方法4、geography::Parseを使用

UPDATE [dbo].[Landmark]
SET [GeoLocation] = geography::Parse('POINT(' + CAST([Longitude] AS VARCHAR(20)) + ' ' +
                    CAST([Latitude] AS VARCHAR(20)) + ')')
GO

geography::STGeomFromText と唯一の違いは、spatial reference ID (SRID) 4326の指定は不要。

PhoneGapをインストールには

PhoneGapをインストールには、まずnode.jsをインストール
Android開発には、Eclipse with ADTが必要、そして、PATHにはADTツールを通す
環境変数JAVA_HOMEを設定（ADTはJAVAベース）
Ant（JAVA build用）をインストール、ANT_HOMEを設定、antをPATHに通す

apkファイルをエミュレータにインストール

Genymotionを入れた。Eclipseのエミュレータよりずっと速かった。
apkファイルをインストールには、エミュレータを起動してから、以下のコマンドとなる。

adb install xxx.apk