この章では、第4.写真撮影機能を使用してみようまでのところで作成した名簿管理機能に、GPSを利用した機能を追加します。

第1節.GPS機能を利用する準備

それではGPS機能を利用して開発を進めたいのですが、GPS機能を使用する際も、カメラ機能同様に、準備が必要になります。

第2節.GPS機能を使用する

それでは、GPS機能を利用する準備が完了しましたので、実際にGPS機能を利用した機能の実装を行いたいと思います。今回は新規作成画面、編集画面で、GPSをもとに、住所が入力されるようにしたいと思います。新規作成、編集画面で「住所を取得」ボタンをクリックしたら、Ajaxを使用して、住所項目に値が入るようにします。

 

Ajaxを使用しますので、Javascriptファイルを修正します。

Roster/public/js/application.jsファイルを開いてください。以下のように内容を変更して保存してください。

 

01 |function setFieldValue(field, value) {

02 |  document.getElementById(field).value=value;

03 |}

04 |function popupAddress(url) {

05 |  $.get(url);

06 |  return false;

07 |}

 

[[file/rosp_tutorial/image054.jpg]] 

 

次に、先ほど修正したJavascript読み込むようにします。Roster/app/layout.erbファイルを変更します。以下の1行を53行目に追加してください。

 

53 | <script type="text/javascript" charset="utf-8"

       src="/public/js/application.js"></script>

 

これで先ほど修正したapplication.jsファイルが読み込まれます。

それでは次に、住所を取得してテキストフィールドに入れる処理を実装します。

Roster/app/Roster/roster_controller.rbファイルを開いてください。以下を追記してください。

 

84 | def set_address_ajax

85 |    if GeoLocation.known_position?

86 |      @latitude = GeoLocation.latitude

87 |      @longitude = GeoLocation.longitude

88 |    else

89 |      # テスト用で現在地が取得できない環境では、

90 |      # システム工房エムの現在地を入れる

91 |      @latitude = 35.459667

92 |      @longitude = 133.078492

93 |    end

94 |    geo = Rho::AsyncHttp.get(

95 |      :url => "http://maps.google.com/maps/geo?oe=utf

       -8&ll=#{@latitude},#{@longitude}&output=json"

96 |    )

97 |    if geo["status"] == "ok"

98 |      geo_body = Rho::JSON.parse(geo["body"])

99 |      place = geo_body["Placemark"].detect do |pl|

100 |        pl["AddressDetails"]["Country"]["AdministrativeArea"].has_key

         ?("Locality")

101 |      end

102 |      if place

103 |        # 返ってきたJSONファイルから住所を取得

104 |        pref = place["AddressDetails"]["Country"]["AdministrativeArea"

         ]["AdministrativeAreaName"]

105 |        local = place["AddressDetails"]["Country"]["AdministrativeArea"]

        ["Locality"]

106 |        city = local["LocalityName"]

107 |        address = local["DependentLocality"]["DependentLocalityName"]

108 |        address += local["DependentLocality"]["Thoroughfare"

         ]["ThoroughfareName"]

109 |        address = pref + city + address

110 |        # Javascriptを実行

111 |        WebView.execute_js("setFieldValue('roster[address]', '#{address}')")

112 |        render :string => ""

113 |      end

114 |    else

115 |      Alert.show_popup("現在地が取得できませんでした。")

116 |    end

117 |  end

 

今回はGoogleGPS情報を送るとJSON形式で住所を返してくれる機能を利用しています。

 

[[file/rosp_tutorial/image056.jpg]]

 

つぎに、住所情報を設定するAjaxアクションを呼び出すために、画面を修正します。

Roster/app/Roster/new.erb28行目に以下の1行を追加してください。

 

28 | <input type="button" value="現在地から住所を取得"

        onClick="popupAddress('/app/Roster/set_address_ajax');" />

 

[[file/rosp_tutorial/image058.jpg]]

 

同様に、Roster/app/Roster/edit.erb30行目に以下の1行を追加してください。

 

30 | <input type="button" value="現在地から住所を取得"

        onClick="popupAddress('/app/Roster/set_address_ajax');" />

 

[[file/rosp_tutorial/image060.jpg]]

 

追記が完了しましたら、ビルドをしてエミュレータへの転送を行ってください。

•       新規作成画面

 

 

[[file/rosp_tutorial/image062.jpg]]

 

•       編集画面

 

[[file/rosp_tutorial/image064.jpg]]