【動作環境】
Swift2.2 Xcode7.3
【対象レベル】
超初心者
【学習内容】
地図や位置情報を使用して、指定した場所に行くと、
そこに設定した猫のキャラクターを集めるアプリの
開発方法をかんたんに解説しています。
動画の音声の書き起こし
はい、それでは、今回は地図を使ったアプリを作っていきたいと思います。
地図上にモンスターを配置して、それを集めて、集めたモンスターをCollection Viewという機能を使って表示するアプリにしていきたいと思います。
それでは、プロジェクトの方を新規作成しましょう。
XcodeのFileのProjectを選択しますと、このような画面になります。
iOSのApplicationのテンプレートから、Single View Applicationを選択します。
Nextをクリックします。
Product Nameを聞かれますので、今回は、ポケモンGOにあやかってCatsGoという名前にしてみましょう。
Organization Nameは個人名、Organization Identifierは個人を識別できる識別子を入れていきましょう。
わからない方は、ご自身のHPなどを逆から、com.tekuruなどを入れていただければいいかなと思います。
LanguageはSwiftを選択します。DevicesはiPhoneを選択します。
この3つに関しては、今回はチェックを入れなくて大丈夫です。
Nextをクリックて、保存場所を聞かれますので、Desktopなどを選択してCreateを押しましょう。
Createを押しますと、新しいプロジェクトが立ち上がりました。
それでは、まずStoryboardの方を使って画面の方を見ていきたいと思います。
ViewControllerを選択しまして、このままだと分かりづらいので、
iPhoneの4Inchの画面にします。IPhone5のサイズの画面になります。
それでは、まずこの画面にTab Barを入れていきます。Tab Bar EditorのEmbbed InのTab Bar Controllerを選択しますと、この画面の周りにタブバーコントローラーがつきます。
これは何かといいますと、画面角のタブで画面の切り替えができるようになります。
複数の画面を切り替えたいときに非常に便利な機能になります。
それでは、もう1つタブで切り替え可能な画面を追加していきたいと思います。
このアイテムと書かれている、ここをコピーしてペーストすると新たな画面が、画面上に追加されます。
2つが重なっていますので、ドラッグアンドドロップして、下の方に持っていきましょう。
そして、最初のこのタブバーコントローラーとひも付けます。
最初のタブバーコントローラからControlを押しながら、ドラッグアンドドロップして引っ張ってきて話します。そして、Relationship SegueのView Controllerを選択します。そうすると、このようにタブバーコントローラーから2つのView ControllerへSegueが繋がっていることが確認できます。
そしてタブバーコントローラーの角には、アイコンが2つならんでいることがわかります。
それでは、このアイテムの名前を変更してみましょう。まず最初の画面のアイテムはMapにします。で、2番目の画面のタブの名前は、Itemと書かれてここは捕らえた猫の一覧を表示するのでCatsという名前にしておきましょう。
こうなりましたね。それでは最初の画面にMapを加えていきます。
画面右下のライブラリーからこの地図の形をしたアイコンを見つけます。Map Kit Viewと書いてあります。これをドラッグアンドドロップしてこのように画面上にのせていきます。そしてAuto Layoutの設定をしますね。
右下のここですね、ここのボタンをクリックしてチェックを外して、上下左右の距離を全て0に設定します。4つの制約を追加すると、このような画面サイズのデバイスに対応可能になります。
このようになりますね。
それでは、コードを書いていきたいと思います。ViewController.Swiftの方を開いてください。このコードを上の方から解説していきます。
このCordinateと書いてあるところですね、この座標2つの座標、緯度経度を1つの
データにまとめたものですね。で、このSpanですね、これは範囲を表します。
0.01の緯度経度の範囲を地図上に表示してくださいという意味になります。
そして、MapViewですね、これを使って地図の制御ができます。ひも付けておきましょう。このMapのViewControllerを選択し、ここですね、このコネクションインスペクターのところにあるMapViewこれをひも付けておきます。この白い丸からドラッグアンドドロップしてMapViewにひも付けしますと、このように接続が完了したことが表示されます。
それではコードのほうに戻りますね。このように接続が完了していることがわかりますね。
まずView Did Loadこれは、この画面が表示されるときに読み込まれるときに実行されますので、最初に設定すべき設定はここで行います。
まずMapViewのDelegete Selfを設定します。
先ほど、ViewControllerの直後に、MKMapViewDelegeteと書いてありますけど、ここをこう書くことでMapViewのほうに、なんらかの処理が行われたタイミングで
このViewControllerの中の処理を行うことができることになります。
ちなみに、このMKMapViewDelegeteや先ほどここに書いたMKMapViewをCodeに書くためには、ImportMapkitと書く必要があります。これがないとエラーがでおきてしまいます。
そして、Regionを指定します。これは、最初に表示すべき領域です。で、これは、先ほど設定したCordinateとSpanの範囲と位置を表示します。そして、MapVIewにこのRegionを設定することで、その範囲が表示されます。
AnimatedがTrueになってますが、もし途中で座標や範囲を指定したとき、
AnimatedがTrueになっているとき、Animationしながら起動することになります。
で、次はAnnotationですね。Annotationは画面上に刺すピンですね。今回は画像を使ったAnnotationを画面上に配置していきたいと思います。
まずAnnotationを作りますね。MKPointAnnotationでAnnotationを作って、座標の指定を行います。先ほどと同じ、銀座の近くの京橋駅の座標ですね、そこを指定していきます。
そして、@AnnotationでここにAnnotationを追加していきます。
それでは、画像を投入していきましょう。
猫の画像を画面の地図上に配置していきます。
ドラッグアンドドロップでこのように猫の画像を取り込みます。取り込まれましたね。では、ここを見てみましょう。
MapView、ViewForAnnotation、Annotationという名のMethodですね。これは、MapViewの持っているDelegeteメソッドですね。MapViewdeAnnotationの読み込みがが行われるときに実行されるメソッドになります。
Annotationの位置が、ユーザーの位置と等しければ何も特に行いません。そして、それ以外の場合、まずAnnotationの識別子を設定します。Identifier識別子ですね。
でこのAnnotationView、MapViewから、Cat Annotationという識別子のAnnotationをとってきて、それが存在すればそれを返してあげます。もし存在しなければ新たに作ってやります。
AnnotationView、AnnotationReuse Identifier、このメソッドを使って新たにAnnotationViewを作りまして画像を指定してやります。
今入れたCat1という画像を指定してやります。そして、それを返してあげます。
こうすることで、猫の画像が、Annotationとして画面に表示されるようになることになるかと思います。
それでは、実際に実行してみて動作のほうを確認してみましょう。
シミュレーターが起動するまで少々時間がかかります。
はい、地図が表示されましたね。先ほど、座標で指定した通り、京橋駅の周辺が表示されています。そして、この京橋駅のところに、猫の画像のAnnotationピンが置かれていることがわかります。スクロールしても、この位置は変わりません。
そして、ピンチイン、ピンチアウトしてみても、この画像のサイズは変わらないままなので、
このように、地図の大きさを変えても猫の画像のサイズが変わらないことがわかります。
次回以降、猫の画像はある一定度の拡大率にならないと表示されないようにしていきたいと思います。
今回は、以上です。
Tekuruプログラミングスクールでは、
動画だけでは伝わりきらない、アプリ開発の楽しさや、
気軽に質問できる雰囲気で、プログラミングを学ぶことができます。
もっと深く、プログラミングを理解したい方は、ぜひ無料体験にお越しください。
どこよりも楽しく学べるアプリ開発スクールを運営しています。
フォローしてしてくれると、とてもうれしいです☆
https://www.facebook.com/techool
https://twitter.com/TekuruSchool
YouTubeチャンネル
https://www.youtube.com/channel/UCpQfWE0TpewbXYnGyxxBkow
毎週土曜日の夜に動画のアップロードをしています。
よければ、チャンネル登録お願いします！
ソースコードや、操作の仕方、などなど、
なんでも気軽にコメントください。
コメントをお書きください