【かけ出しiPhoneアプリ開発】Googleマップを使ってみよう



【かけ出しiPhoneアプリ開発】Googleマップを使ってみよう

iPhoneアプリ開発をはじめたばかりの方にお届けする 【かけ出しiPhoneアプリ開発】 シリーズ。
今回は 『Googleマップ』 の使い方をご紹介します。

アプリ内で地図を使う際に役立つ知識になるでしょう。

本稿で使用する XCode のバージョン: XCode 10.1、 Swift 4.2

目次
  1. 【かけ出しiPhoneアプリ開発】Googleマップを使ってみよう
  2. 【今回の目標】アプリでGoogleマップを表示
  3. XCodeでのGoogleマップの使い方
  4. GoogleマップとMapKit
  5. まとめ

【かけ出しiPhoneアプリ開発】Googleマップを使ってみよう

【今回の目標】アプリでGoogleマップを表示

image

今回は単純に、アプリ内で Googleマップを開くだけのアプリ制作が目標です。ただ地図を開くだけなのですが、 Google APIを使ったり、ライブラリ管理の CocoaPods を使ったりと作業項目はたくさんあります。アプリ開発初心者の方にとっては色々参考になると思いますよ。

XCode Google Map サンプル App のコード

XCodeでのGoogleマップの使い方

Step.1 新規プロジェクトの用意

image

まず最初に新規プロジェクトを作成しましょう。 XCode 起動後、 「Create New Xcode Project」 → 「Single View App」 で新規プロジェクトが作成できますね。

Step.2 Googleマップを使うための準備(CocoaPods)

image

XCodeでGoogleマップを使おうと思うと、一定の設定手順を踏む必要があります。

まずは Googleの公式ページ にもあるように、ライブラリ管理の CocoaPods というソフトをパソコンにインストールする必要があります。

こちらのコードをコピーして、ターミナルに貼付け、実行します。

image

sudo gem install cocoapods

image

CocoaPods のインストールが完了すると上図のように 「・・ gems installed」 と表示。次は XCode のプロジェクトで Googleマップ を使えるように設定を行います。

Step.3 Googleマップを使うための準備(Podfile)

image

Googleの公式ページに従って、次は Podfile を作成します。Podfile 内に記載するコードは、以下の通り。

source 'https://github.com/CocoaPods/Specs.git'
target 'プロジェクト名' do
pod 'GoogleMaps'
pod 'GooglePlaces'
end

Podfile・・・CocoaPodsでライブラリを管理する際に必要な設定ファイル

image

Podfileの作成は、 XCode画面左サイドバー内にあるファイル群の中の一番上にある 「プロジェクト名」(青色アイコン) を右クリック。そして 「New File...」 を左クリック。

image

次の画面では 「Empty」 を選択。

image

ファイル名は、 Podfile と記載。 画面上は 『Podfile.xib』 になると思います。 これで Create。

image

Podfile を扱う上で、 .xib のファイル形式は違いますので、 .xib をプレーンテキストに変換します。

image

ファイル形式の変換は、Xcode右サイドバー内の 「Type」 をクリック。するとたくさんのファイル形式が表示されますので、その中から Text 項目内の 「Plane Text」 を選択。そしてファイル名の拡張子を削除して 「Podfile」 だけにします。

image

これで Podfile の完成です。

Step.4 Googleマップを使うための準備(Podfileの編集)

image

デフォルトの Podfile では使えないので、中身を編集する必要が。まず Podfileを開かないといけないのですが、開き方は 「Podfileファイル上で右クリック → Open in New Tab」 で Podfile を開きます。 すると XML形式のコードが書かれていますが、一旦全部消します。

image

そして Googleの公式ページにもある Podfile のコードをコピー&ペースト。

source 'https://github.com/CocoaPods/Specs.git'
target 'YOUR_APPLICATION_TARGET_NAME_HERE' do
  pod 'GoogleMaps'
  pod 'GooglePlaces'
end

target 部分を自分のプロジェクト名に変更します。

image

これで Podfile の設定は完了。次はプロジェクトに必要なライブラリを Podfile を使ってインストールします。

Step.5 Googleマップを使うための準備(ライブラリのインストール)

image

Googleマップの使用に必要なライブラリをインストールするため、 Podfile を実行します。 まずは Podfile を実行するために、ターミナル画面から Podfile があるディレクトリに移動。

Podfileを左クリックしたまま、ターミナル上にドラッグ&ドロップしてみましょう。

image

すると上図のようにディレクトリが自動で表示されます。ただこれではダメなので、文頭に cd を加え、文末の Podfile を消します。

image

そして実行。次は Podfile を実行します。

image

Podfile の実行は、

pod install

これだけですが、私の場合、 インストール完了に約 30分かかりました。

image

インストールが無事完了すると上記のような画面が。最後の注意書きを見てみますと、

[!] Please close any current Xcode sessions and use `GoogleMap-Test.xcworkspace` for this project from now on.
【Google訳】 現在のXcodeセッションをすべて閉じて、今後このプロジェクトでは `GoogleMap-Test.xcworkspace`を使用してください。

指示に従って Xcode を一旦閉じましょう。

image

Step.6 Googleマップ用XCodeの起動

image

Podインストール時にあった

 「今後このプロジェクトでは `GoogleMap-Test.xcworkspace`を使用してください。」

を実行するためにターミナルからコマンドを実行します。

open GoogleMap-Test.xcworkspace

image

すると上図のように今までとちょっと違った画面が表示。今まではプロジェクト名のフォルダしかなかったのに、新しく 「Pods」 というフォルダが登場。フォルダを開いてみると以下のように。

image

アプリの開発は今までどおり、 プロジェクト名下のファイル群で行っていきます。

ちなみにフォルダでプロジェクトの構成を確認してみると以下のように。

image

Googleマップを使ったアプリ開発を行う際は、 プロジェクト名.xcodeproj ではなく 『プロジェクト名.xcworkspace』 をダブルクリックして XCode を起動する必要がありますね。

Step.7 APIの設定

image

アプリ開発で Googleマップを使う場合、 Googleの APIキー を取得する必要があります。 APIキーの取得は、公式ページに書かれているリンクをクリック(上図参照)。

image

Continue をクリック。

image

選択欄が 「Maps SDK for iOS」 になっていることを確認し、 「What credentials do I need?」 をクリック。

image

すると APIキー が表示されますので、 「Done」 ボタンで完了します。

image

APIキーが作成できたら上図のように表示されますので、 APIキーをコピーしておきます。

Step.8 プログラミング

image

それでは Googleマップの開発環境が整ったところで、 Googleマップを表示するプログラムを作成していきましょう。

まずは ViewController.swift を開きます。そして

super func viewDidLoad()

の下にAPIキーを記述。

GMSServices.provideAPIKey("APIキー")

image

後は Google公式ページに記載されているコードをコピー&ペースト。

Google公式ページのコード

import UIKit
import GoogleMaps

class YourViewController: UIViewController {

  // You don't need to modify the default init(nibName:bundle:) method.

  override func loadView() {
    // Create a GMSCameraPosition that tells the map to display the
    // coordinate -33.86,151.20 at zoom level 6.
    let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
    let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
    view = mapView

    // Creates a marker in the center of the map.
    let marker = GMSMarker()
    marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
    marker.title = "Sydney"
    marker.snippet = "Australia"
    marker.map = mapView
  }
}

【ViewController.swift】

image

let camera の部分で地図の場所を特定し、 marker.position の部分で ピンの場所を決めています。そしてピンをタップすると情報が表示されるように marker.title と marker.snipet でテキスト情報をセット。

地図の大きさは、 let camera の zoom という値で制御。実際にシミュレーター起動した画面がこちら。

image

デフォルトの状態ではシンプルですが、これをベースにお店情報を表示させたり、自分の場所を自動ロードさせたり色々機能を追加可能。本稿では、ここまでの Googleマップの使い方とさせて頂きます。

GoogleマップとMapKit

image

iPhoneアプリ開発で地図を使う代表的な方法に、 「Googleマップ」 と iOS純正の 「MapKit」 があります。 どちらも使ってみれば、それぞれの良し悪しを実感できるのですが、主だった違いをピックアップしてみました。

  • AndroidとiPhone、共通レイアウトなら Googleマップ
  • Googleマップの豊富な情報量
  • Googleマップの方がマイナーロードをカバーしている
  • MapKitに比べると Googleマップはやや不安定
  • MapKitは CocoaPods のような事前設定なしで、すぐに使える

あえて iOS純正の MapKit を使わず Googleマップ を使う理由としては、やはり 「Android と iPhone で統一されたレイアウトを保てる」 という点でしょうか。また Googleマップ上の豊富な情報量は無視できませんね。

デフォルト時のマップ表示は、上図のように Googleの方がシンプルです。ナビゲーション機能やスポット機能など自分好みにカスタマイズしたくなりますね。

まとめ

Googleマップは、導入こそ面倒くさいものの、日頃から使っていることもあり、機能に慣れているメリットがあります。また今後アプリ開発を行う中で、サンプルに ○○.xcworkspace とあっても適切に対処できそうですね。

「マップを使ったアプリを作ってみたい」「Swiftを自由に使いこなしたい」と思っているあなた、 Swiftの基礎はお済みでしょうか?

最短かつ最適に Swift のスキルを身につけるなら、やはり「プログラミング・スクール」がいいのではないでしょうか?中でも「オンライン型」のプログラミング・スクールは 「時間」 と 「場所」 の制約を極力減らし、負担にならない学習環境を提供。

「オンラインのプログラミング・レッスンなんて受けたことない」という方、 Swift を早く身に着けたいなら一度お試ししてみませんか? CodeCamp では、オンライン学習の特徴を知ってもらうために 無料体験や無料相談 を実施中。一度公式ページから様子を見てみませんか?

関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp