Swift：Maps SDK for iOSでAPI取得からGoogle Maps（グーグルマップ）表示まで

今回はAPIを取得してGoogleMapsを表示する方法を書いていこうと思います。

というのも、やり方を忘れる→もう一度調べる→実装完了と毎回調べるのが面倒なので、備忘録として残すかたちになります。😅

初めての方は参考になれば幸いです。

■Podfileの作成とGoogleMapsのインストール

まず該当プロジェクトのターミナルを開きます。

「pod init」と入力してPodfileを作成します。

＊もしCocoaPodsのインストールができていなければ、まずはそのインストールからお願いします。やり方は検索すればすぐに出てくるはずです。

プロジェクトフォルダの中に作成したPodfileを開き、「pod 'GoogleMaps'」と入力して保存しましょう。

そして先ほどの該当プロジェクトのターミナルをまた開き、「pod install」と入力しPodfileで入力したことをインストールします。下記画像のように黄緑文字でインストール完了のメッセージが出てきたら、ターミナルを閉じましょう。

＊初めてPodfileとターミナルを利用される方は、二つとも似ているように見えて区別に混乱するかもしれませんが慣れていきましょう。僕も最初は混乱してました、、、😅

■APIの取得（キー作成）

次はAPIを取得していきます。

（1）プロジェクトの作成

そのために「Google Cloud Platform」で新規プロジェクトを作成しましょう。

＊もしアカウント未登録の場合はまず登録からお願いします。

（2）APIの有効化

プロジェクトを作成したら、ホームのサイドバーの「APIとサービス」→「ライブラリ」と進んでいきましょう。

そこに各種APIがあり、「Maps SDK for iOS 」をクリックします。

開いたら、赤い枠で囲った部分を「有効」にします。

＊これが有効になっていないと、実装しても使用できません。

＊（2）と（3）はもしかしたら逆かもしれません。また有効化を先にしたとしても、そこからAPIキー作成の画面に移動できるかもしれません。曖昧で申し訳ありません🙇‍♂️

（3）APIキーの作成

APIキーの作成していきます。

ホーム→「APIとサービス」→「認証情報」→「＋認証情報の作成」→「APIキー」と進んだいきます。

すると、自動でキーを作成し下記画面のように表示されます。そこから「キーを制限」をクリックし、APIを使用する対象のXcodeプロジェクトなどを設定します。

下記画面が表示されますので、今回はiOSアプリにチェックをし、対象のXcodeプロジェクトのバンドルIDをコピペしましょう。

＊バンドルIDは下記画像の箇所に記載されています。

入力が終わったら、完了ボタンなどを押して閉じましょう。

もう一度ホーム→「APIとサービス」→「認証情報」と進んでいくと下記のように作成したAPIキーが表示されているはずです。

このキー値をXcodeプロジェクトにコピペします。

＊キー値の横の四角いマークをクリックすればコピーできます。

＊「APIキー1」の左に緑でチェックマークが入っていることを確認してください。この表示になっていないと恐らく使用できないと思いますので、有効化の確認、バンドルIDの入力漏れがないかなど再確認しましょう。

■マップの実装

Xcodeプロジェクトを開いたら、AppDelegateファイルにて下記画像の赤線部分を追加していき、先ほど作成したAPIキー値をコピペします。

GMAServices.provideAPIKey("ここにコピーしてきたAPIキー値")

次はViewControllerにてマップを表示させるコーディングをしていきます。

＊最初に映し出す位置を指定してマップを表示するコーディングのみです。

シミュレータで実行すると無事、表示されました！😃

以上、見ていただきありがとうございます。

Xcodeが開かない時の対処方法

今回はXcodeを起動しても中々開かない状態の対処方法を書いていきます。

他の方も書かれている対処方法と一緒ですが、記事が少なかった印象だったので書くことを決めました。

Xcodeを利用されている方でしたら、誰しもが経験すると思いますので参考になれば幸いです。

Xcodeまたはプロジェクトを開いたら、普段は下記画像のように画面に表示されると思います。

しかし偶にこれが中々開かない時があり、渦巻き状態で止まってしまうことがあります。一旦Xcodeを閉じたり、パソコンの再起動をしても変わりませんでした。

いつになったら開くのやら、、、😔

そこで対処方法の一つが「ファイルの削除」です。

下記に従って、一部のファイルを削除することで改善できました！

まずFinderにて「〇〇.xcodeproj」を右クリックします。

＊「〇〇.xcworkspace」ではありません。

そして「パッケージの内容を表示」をクリックします。

中身の「project.xcworkspace」をゴミ箱に入れて削除します。

このファイルはなくても、Xcodeやプロジェクトを開いて作業する上で支障は来たしませんでした。

これでもう一度Xcodeやプロジェクトを開いてみると、無事に開くことができるはずです。私はこの方法で開くことができました！😃

以上、見ていただきありがとうございました。

Swift：UIScrollViewを使った縦スクロールの実装方法（Main.Storyboardのみ操作）

今回はUIScrolleViewを使って縦スクロールの実装方法を備忘録として残していきます。

細かい部分の理由については私も詳しくは理解できていませんので、「とりあえずスクロールできた」という方法を書き残していきます。

今回はMain.Storyboardのみで作業していきます。

まずLibraryを開いてUIScrollViewをUIViewの上に設置します。

UIScrollViewをSafe Areaのサイズに合わせてピンを引っ張ります。

その後AutoLayoutで上下左右を「0」に設定します。

ここでUIScrollViewでエラーが出ますが今は無視します。

次はUIViewをUIScrollViewの上に設置します。

下の画像のようにUIViewをUIScrollViewのサイズに合わせてピンを引っ張ります。

続いて、UIViewのAutoLayoutを設定します。先ほどと同じように上下左右「0」に設定するのですが、ここで注意があります。

下の画像のように上下左右のプルダウンボタン🔽を押して、対象を「Scroll View(current distance = 0)」に✅を入れてください。

「Frame Layout Guide(current distance = 0)」にしたままだと、UIScrollViewのエラーは解消されず、スクロールできない状態になってしまいます。おそらくUIScrollViewの外側の枠に固定してしまうので動かない状態になってしまうためだと思います。詳しい理由は他で調べてみてください。

次はUIScrollViewとUIViewの横幅を等しくし、固定します。

下の画像のようにViewから「control」キーを押しながらドラッグ＆ドロップします。

そしたら、下の画像のように選択リストが表示されますので、「Equal Widths」を選択します。

これで横幅のエラーの解消とともに縦方向にのみスクロールできるようになります。

今度はUI部品を設置します。

今回はUILabelとUIButtonを設置します。 

UILableのAutoLayout

上左右を設定

UIButtonのAutoLayout

上下左右を設定

UI部品の上下の制約がついたことで、UIScrollViewの高さの制約が決まったのでエラーが解消されました。

あとはUILabelにテキストを記述していきます。

行は複数に表示されるようユーティリティエリアのAttributes inspectorの「Lines」を「0」にします。そしてテキトーに記述します。

改行したい場合は、「control」＋「Q」＋「Enter」でできます。

今回はしてません。

これで終わりです！！

出来上がりはこんな感じです！！（動画じゃなくてごめんなさい🙇‍♂️）

無事できました！！😃

見ていただいてありがとうございました！

Swift：入力した値を画面遷移先へ値渡しする方法

こんにちは！😃

Swift言語の勉強をし始めて、約2ヶ月になる初心者です。

今回は入力した値を遷移先に渡す方法の一例を書いていこうと思います。

今では簡単にできることですが、最初は各々のメソッドや変数などがどのような存在でどのように作用しているのか中々理解できず、苦労しました。😫

これから始める方に少しでもお役に立てれば嬉しいです！

まずはMain.storyboardでUI部品を設置していきます。

Laibraryを開いて、ViewControllerの任意の位置にUITextField、UIButtonをドラッグ＆ドロップして設置します。

UITextFieldをOutlet接続します。

Outlet接続することにより、Main.storyboard上のUITextFieldとコードを記述するエディタエリアをつなげます。これは遷移先に値を渡す処理をエディタエリアにて記述するために必要な接続になります。

次は遷移先のViewControllerを設置します。

同じくLaibraryよりドラッグ＆ドロップしていきます。

設置したViewControllerにUIViewControllerを継承し、他のViewControllerと区別するための名前を実装していきます。

ナビゲーターエリアで右クリックして「New File...」をクリックします。

今回はUIViewControllerを継承するので「Cocoa Touch Class」を選択して「Next」

名前は任意で記述します。今回は「ConsequenceViewController」とします。

先ほど設置した遷移先のViewControllerの下の画像左の赤線部分をクリックして、ユーティリティエリア上部バーの「identity inspector」（赤線）をクリックし、Classを選択します。リスト内に先ほど自身で決めた名前があるので、選択します。

これで設置した遷移先のViewControllerはUIViewControllerを継承できました。

 ＊継承とはいろいろな機能が詰まった工具箱を持たせたみたいな感じです。今回UIViewControllerという工具箱を持たせたことによって、その中にあるいろいろな機能を使用することが可能になります。

今度は、画面遷移処理です。今回はSegueという遷移方法を実装します。

画像の左がViewController（遷移元）、右がConsequenceViewController（遷移先）です。

遷移元のUIButtonを「control」キーを押しながら、遷移先のView（どこでもいい）にドラッグ＆ドロップします。そうすると「Action Segue」と表示がでるので、その中の「Show」を選択します。これで遷移元のUIButtonをタップしたら、遷移するという動作ができるようになりました。

続いて、遷移先から遷移元に戻る処理を実装します。

その前に遷移先にUILabel（値を受け取る文字列）とUIButton（タップして遷移元に戻る）をMain.storyboardで設置します。

それでは遷移元に戻る処理を実装します。

まず遷移元のUIButtonを「control」キーを押しながらソースコード上にドラッグ＆ドロップします。

Connectionを「Action」に選択します（おそらく設置箇所から自動でなっているはず。）。ボタン名を任意で決めて設置します。

設置した後、画像の赤線部分を「Any」→「UIStoryboardSegue」に変更します。

ViewController.swift

次はMain.Storyboard上で遷移先のUIButtonを「control」キーを押しながら、画像のようにドラッグ＆ドロップします。＊画像みづらくすみません、、、。😅

そうすると、下の画像のように遷移元のエディタエリアでAction接続したOkButtonが表示されます。これをクリックしたら、遷移先から遷移元に戻る処理は完了しました。

最後に、

遷移元（ViewController）：遷移先に値を渡す処理を記述

遷移先（ConsequenceViewController）：値を受け取って画面に反映する処理を記述

をしていきます。

まず、遷移先で値を受け取る処理（準備）をします。

・値を表示するUILabelをOutlet接続します（名前は任意、今回はreceiveLabel）。

・値を受け取る変数を設定します（プロパティ宣言、receiveValue）。＊１）

・受け取った値をUILabelに表示する処理を記述します。＊２）

ConsequenceViewController.swift

＊１）var receiveValue: String = ""でString型と指定することで、受け取る値を明確にします。""はreceiveValueがどんな値を持った変数なのかを宣言するとともに、入力がない場合も考慮してこのような記述をしております。この他にもvar receiveValue: String?と記述することも可能です。「？」を入力することでオプショナル型（nil＝入力がない場合も可能）になります。

＊２）receiveLabel.textの「.text」で「文字列を代入する」という意味になります。そして変数を""内に記述する時は\( )をつけて記述します。

もしプロパティ宣言でvar receiveValue: String?という表現をした場合は、こちらではreceiveLabel.text = "ハロー、\( receiveValue! )！"と「！」をつけ、アンラップします。

アンラップについては検索して調べてみてください。

次は遷移元で値を渡す処理を下の画像のように記述します。

渡す遷移先を取得し、遷移先のreceiveValueにtextFieldで入力した内容を「.text!」をつけて代入（渡す）します。

これで完成です。

こちらViewControllerの全体です。

ConsequenceViewControllerの全体です。

こちらシミュレータの一部画像になります。

以上が遷移元で入力した値を遷移先に渡す一例です。

最初でも話たのですが、今では簡単に思えても最初の頃はこんな簡単なことでも中々理解できず、時間がかかりました。

僕と同じように初めて右も左もわからない方のお役に少しでも立てれば嬉しいです！😃

見ていただいてありがとうございました！