モバイル版チェックイン予定表(4) – チェックイン時刻・オプションの変更

前記事に引き続いて、モバイル版のチェックイン予定表を作成する。実行サンプルはこちら。

• データストアに自動チェックインに関するプロパティを追加する
• chk_mode:

自動チェックインするかどうか
‘auto’:自動チェックインする、’manual’:自動チェックインしない

• chk_private:

チェックインを公開するかどうか(ロケタッチAPI)
’1′:公開しない、’0′:公開する

• chk_bcast:

チェックインを他SNSに連携するか(ロケタッチAPI)
‘-’:連携しない、’twitter’、’facebook’、’twitter,facebook’

• 画面を準備する


上記のプロパティをjQuery Mobileのウィジェット(フリップスイッチ、ラジオボタン)で入力できるようにする。チェックイン時刻はmobiscrollを利用する。

リンクをクリックすると、ロケタッチのスポットページにジャンプする。


• 画面を生成する

// JavaScript
$(document).on('pagebeforeshow', '#pgSpot', function(e){
  showSpot(curPlan);
});
function showSpot(plan){
  // 中略
  // リンクの追加
  $('#btnLinkSpot').attr('href', plan.spot_link);
  $('#btnLinkSpot').attr('rel', 'external');
  // 各項目(プロパティをlistviewに表示)
  $('#lvSpot').empty();
  lvItem = '<li>Spot Name:<span class="ui-li-aside">' + plan.spot_name + '</span></li>';
  lvItem += '<li>Category:<span class="ui-li-aside">' + plan.spot_category + '</span></li>';
  lvItem += '<li>Parent Category:<span class="ui-li-aside">' + 
    plan.spot_parent_category + '</span></li>';
  lvItem += '<li>Longtitude:<span class="ui-li-aside">' + plan.spot_lng + '</li>';
  lvItem += '<li>Latitude:<span class="ui-li-aside">' + plan.spot_lat + '</li>';
  $('#lvSpot').append(lvItem);
  $('#lvSpot').listview('refresh');

}

画面が最初に生成されるときのみデータストアからデータをロードして配列に保持する。以降は、配列の内容をこの関数で画面に表示する。

• 保存機能を実現する

もともとデータストアに保持していた内容と、この画面で保存する内容をinput要素にコピーし、gaedirectでデータストアを更新する。また、画面の内容を配列にもコピーしておく。

• ｢今すぐチェックインする」機能を実現する

チェックイン時刻を「現在時刻」に、チェックインオプションを「auto」にして、画面の内容をデータストアに保存する。

• チェックイン予定一覧画面に戻る

保存ボタンやキャンセルボタンがクリックされたら元の一覧画面に戻る。その際はキャッシュされた画面ではなく、再度画面を作成するべきなので、以下のようreloadPageオプションをtrueにしている。(効果未確認。)

// JavaScript
$.mobile.changePage($('#pgPlan'), { transition: 'slide', reverse: true, reloadPage: true });