モバイルアプリで場所や住所の入力を容易にするオートコンプリートウィジェットをリリース

[この記事は Florian Bertele, Product Manager, Google Places API による Geo Developers Blog の記事 "New Autocomplete widget helps users with places and address entry in mobile apps" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]

米国時間 12 月 17 日、Google は、アプリ内でユーザーが場所や住所をより素早く入力できるようにする機能の提供を開始しました。ユーザーが場所の名前や住所を入力している途中で、自動的に補完するオートコンプリート機能であり、次の 2 つの方法で提供します。一つは、オートコンプリート ウィジェットです。iOS（英語）と Android に対応しており、わずかなコーディング作業でオートコンプリート機能をアプリケーションに追加できます。もう一つは、オートコンプリート機能を追加した Place Picker です。

オートコンプリート ウィジェットとは

今回リリースしたオートコンプリート ウィジェットの UI には、オーバーレイとフルスクリーンの 2 つのタイプがあります。

オーバーレイ タイプのオートコンプリート ウィジェット

フルスクリーン タイプのオートコンプリート ウィジェット

Android では、オートコンプリート ウィジェットはフラグメント（英語）として追加することができます。イベント リスナーを追加し、オートコンプリートされたプレイスのリファレンスをアプリケーションにて受け取ります。あるいは、オートコンプリート ウィジェットをインテント（英語）で起動することもできます。
アクティビティのXML レイアウト ファイルにフラグメントを追加する方法：

<fragment
  android:id="@+id/place_autocomplete_fragment"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"
  />

アクティビティの onCreate() メソッドにイベント リスナーを追加する方法：

// 
PlaceAutocompleteFragment fragment = (PlaceAutocompleteFragment)
    getFragmentManager().findFragmentById(R.id.place_autocomplete_fragment);

fragment.setOnPlaceSelectedListener(new PlaceSelectionListener() {
   @Override
   public void onPlaceSelected(Place place) { // 選択したプレイスを処理
   }
   @Override
   public void onError(Status status) { // エラーを処理
   }

オートコンプリート ウィジェットを起動するインテントを作成する方法：

try {
   Intent intent =
            new PlaceAutocomplete.IntentBuilder(PlaceAutocomplete.MODE_FULLSCREEN)
           .build(this);
   startActivityForResult(intent, PLACE_AUTOCOMPLETE_REQUEST_CODE);
} catch (GooglePlayServicesRepairableException e) {
   GooglePlayServicesUtil
           .getErrorDialog(e.getConnectionStatusCode(), getActivity(), 0);
} catch (GooglePlayServicesNotAvailableException e) {
   // 例外を処理
}

iOS（Objective-C）では、オートコンプリートのデリゲートを実装してプレイス選択に対応します。

@interface MyViewController () 
@end

@implementation ViewController
.
.
.
- (IBAction)onLaunchClicked:(id)sender {
  // ボタン押下時にオートコンプリート ビュー コントローラーを表示
  GMSAutocompleteViewController *acController = [[GMSAutocompleteViewController alloc] init];
  acController.delegate = self;
  [self presentViewController:acController animated:YES completion:nil];
}

- (void)viewController:(GMSAutocompleteViewController *)viewController
    didAutocompleteWithPlace:(GMSPlace *)place {
  // ユーザーがプレイスを選択
  [self dismissViewControllerAnimated:YES completion:nil];
}

- (void)viewController:(GMSAutocompleteViewController *)viewController
    didAutocompleteWithError:(NSError *)error {
  [self dismissViewControllerAnimated:YES completion:nil];
}

// ユーザーがキャンセル ボタンを押下
- (void)wasCancelled:(GMSAutocompleteViewController *)viewController {
  [self dismissViewControllerAnimated:YES completion:nil];
}

@end

Swift の場合：

import UIKit
import GoogleMaps

class MyViewController: UIViewController {
    
    @IBAction func onLaunchClicked(sender: AnyObject) {
        let acController = GMSAutocompleteViewController()
        acController.delegate = self
        self.presentViewController(acController, animated: true, completion: nil)
    }
}

extension MyViewController: GMSAutocompleteViewControllerDelegate {
    
    func viewController(viewController: GMSAutocompleteViewController!, didAutocompleteWithPlace place: GMSPlace!) {
        // ユーザーがプレイスを選択
        self.dismissViewControllerAnimated(true, completion: nil)
    }
    
    func viewController(viewController: GMSAutocompleteViewController!, didAutocompleteWithError error: NSError!) {
        self.dismissViewControllerAnimated(true, completion: nil)
    }
    
    func wasCancelled(viewController: GMSAutocompleteViewController!) {
        self.dismissViewControllerAnimated(true, completion: nil)
    }
}

Place Picker にもオートコンプリートを

今回、場所名や住所、地図上の位置など、自分の現在地を知らせるのに便利な UI ウィジェット Place Picker にもオートコンプリート機能を追加しました。ユーザーは場所名や住所の一部を入力するだけで、目的の場所をさらに素早く選択できるようになります。

なお、すでにアプリで Place Picker を利用している場合は、自動的にオートコンプリート機能が実行されますので、開発者側では何もする必要はありません。

まずはドキュメントとコード サンプルをご覧ください。ご質問やご意見、ご提案などがありましたら、Stack Overflow（英語）または Google Maps API のバグ報告用掲示板（英語）にてお知らせください。

Posted by 丸山 智康 (Tomoyasu Maruyama) - Google Maps Solution Architect, Google Maps API for Work