メインコンテンツまでスキップ

位置情報取得プラグイン

概要​

位置情報を取得し、特定のテキストフィールドにセットします。

活用例

日報登録などを行う際の現在地取得に使用できます。

注意事項​

  • このサイトに掲載しているサンプルプログラムは、参考用としてご提供しています。動作保証はしておりませんので、ご注意ください。
    なお、これらのプログラムを使用したことによるトラブルや損害については、責任を負いかねますので、あらかじめご了承ください。
    サポート窓口へお問い合わせいただいても、対応はできかねますのでご了承ください。
  • JavaScriptプラグインは、プロフェッショナルコースで使用できます。

制限事項​

  • レコード作成・レコード編集画面のみ動作します。
  • 対象フィールドにはテキストタイプのみ選択可能です。

プラグインの機能​

  • 設定画面
    テキストフィールドから、位置情報を入力するフィールドを選択します。

    プラグイン設定

  • プラグイン
    指定したフィールドに取得ボタンを配置します。
    取得ボタンを押下すると、現在の位置情報を入力します。

    プラグイン

開発手順​

STEP1：設定画面​

プラグインを追加したアプリのフィールド一覧を取得し、設定の選択肢として表示します。
フィールド一覧 の取得には、REST API を使用します。

プラグイン設定用にフィールド一覧を取得します。(config.js)
  // プラグイン設定情報する (アプリIDの取得用)
  const config = atPocket.plugin.app.getConfig();

　// フィールド一覧取得API実行する
  atPocket.api('apps/'+ config.appId +'/fields', 'GET', {}, function(result) {
    // 成功時に実行する処理を記載
    // セレクトボックスの選択肢にフィールド一覧をセットします
    ・・・
  }, function(result) {
    // エラー時に実行する処理を記載
    ・・・
  });
プラグイン設定表示用のHTMLを記載します。(config.html)
<div class="config_form">
  <div class="config_row">
    <div class="config_caption">
      対象フィールド
    </div>
    <div class="config_input">
      <select id="location_field" name="location_field">
      </select>
    </div>
  </div>
</div>

STEP2：プラグイン本体​

対象フィールドに取得用のボタンを配置します。ボタン押下時に位置情報を取得します。

レコード作成・レコード編集画面表示時に、取得ボタンを配置します。(plugin.js)
  // プラグイン設定を取得する
  const config = atPocket.plugin.app.getConfig();

  // レコード作成画面/編集画面表示時に実行する
  atPocket.events.on(['app.record.create.show', 'app.record.edit.show'], function(event) {  
    // 座標フィールド要素を取得
    const locationField = atPocket.app.record.getFieldElement(config.location_field);
    // 座標取得用ボタンを追加
    const locationButton = document.createElement('div');
    locationButton.id = 'posisionButton';
    locationButton.textContent = "取得";
    locationButton.addEventListener('click', function(){
      getLocation();
    });
    locationField.append(locationButton);
  });
位置情報を取得して、レコードの値にセットします。(plugin.js)
  // 位置情報を取得する
  function getLocation() {
    // レコードの値を取得
    const record = atPocket.app.record.get();
    // 位置情報取得
    navigator.geolocation.getCurrentPosition (
      function(location) {
        // 登録用に値を生成する
        var locationText = location.coords.latitude + "," + location.coords.longitude;
        // 対象フィールドの値に位置情報をセットする
        record[config.location_field].value = locationText;
        // レコードに値をセット
        atPocket.app.record.set(record);
      },
      function(error) {
        alert("error:" + error.message);
      }
    );    
  }

利用しているOSSのライセンス情報​

なし