初心者から始める位置情報アプリの作り方（2/4）

はい、それでは前回の続きを行っていきます。

今回は、3匹の猫が地図上の各位置に表示されるようにしていきたいと思います。

 

前回と同じ手順で、Cat2、Cat3の画像をXcodeにまず追加します。

追加できたら、次にPlistファイルを追加していきます。

これは、プロパティリストと呼ばれるものですね。各データを格納するときに非常に便利な機能になります。もうすでに出来上がってるものがあるんですけど、一から作っていきたいと思います。

Controlを押しながらクリックして、New File、iOSのResourseのProperty Listを選択します。Nextを押して、このように名前をつけて、プロパティリストを追加します。

この、Targetsのところにチェックがついていることを忘れないでください。

 

このようにCat2 Plistができましたね。そうしたら、RootのところをArrayに変更します。

+を押して、各要素を追加していきます。Item0は、Dictionaryにします。DictionaryのValueを追加していきますね。

この+を押して、新たにDictionaryの要素を追加していきます。Nameとします。Nameで猫の名前が出てきますね。そして、次に、Image、猫の画像名ですね。

ここは、Cat1、Cat2、Cat3に対応したものを入れていきます。

そして、緯度、軽度を入れていきますね。ここには、適当な値を今は入れます。この、緯度、軽度の値なんですけど、Wikipediaに各場所の緯度軽度の固定的な値が載っていますので、それらを参考にしてただければ、各場所の緯度軽度は調べやすいかなと思います。

このように、各猫の設定ができましたら、これを丸ごとコピーアンドぺーすとします。

この位置に作っていって、各猫の設定を変えていきます。

Cat2.png、 Cat3.pngですね。

緯度、軽度と、猫の名前をそれぞれ書いていきます。

出来上がったものがこちらになりますね。古いものは捨ててしまいましょう。

こうですね。

猫太郎、猫二郎、猫三郎ができました。緯度と軽度が各猫に設定されています。画像も設定されていますね。このようにして、プロパティリストのファイルができました。

 

それでは、コードを見ていきましょう。

まず、必要な変数をたしていきます。

まずCatsという名前の列ですね。空の配列は、このようにカドカッコ[]を並べて置いて作ることができます。

次に、Imagesという名前のDictionaryですね。KeyがString、値がStringになります。

このKeyの値を使って値を取り出すことができます。

空のDictionaryを挿入する場合は、このような書き方をします。

そして、今作ったPropertyListを読み込んでみます。

 

まずFilePathを指定しますね。MSBundle.mainBundleで最初からこのProjectに入っている画像のPathを指定することができます。cats.plistという名前のファイルですね。そこまでのPathを取得しまして、そこから配列を取得します。contentsOfFileで取得することができます。

そして、mapView.delegete＝self、このあたりは前回と一緒ですね、mapView.setRegionで範囲を指定します。そして、各猫に対して、構文を使ったLoopを使って設定していきます。

まず、猫をCats配列から、CatというDictionaryを取り出します。そしてこれをDictionaryにCastします。そしてNameとImageと、LattitudeとLongitudeを取り出します。NameとImageというKey、LatとLonというKeyを使います。そしてそれぞれStringとDoubleにCastします。

で、前回書いたこのあたりですね、annotationですね、annotationに関しても、このように書き換えます。このあたりは一緒ですね、MKPointAnnotationを使って、Coordinateを指定します。そして、ここも追加となります。annotationのタイトルですね。titleをnameにします。そして、MapViewにこのannotationを加えてやるというのも前回と一緒ですね。そして、Imagesという先頭のほうで宣言したこのDictionaryですね、DictionaryにnameというKeyでImageを指定してあげます。

これを使うことで、後々、Keyを使って画像を取り出すことができるようになります。

 

そして、前回作りましたMapViewが持っているMKMapViewが持っているDelegeteメソッド、MapView ViewforAnnotationですね、この中身を一部変えますね。前回の内容をこのように変更します。AnnotationViewというものを宣言しまして、dequeveReusableAnnotationViewwithIdentifierでそれが取り出した場合は、このAnnotationViewを aViewとします。そして、取り出せなかった場合は、このAnnotationViewを新しく作ります。そのとき使うIdentifierは、このCatAnnotationですね。これを使ってやります。そして、ここはこれでもいいですね、ここはCatAnnotationをつかってもいいですね。

 

そして、let title = annotation.title。そこからImageを取り出します。Images、Dictionaryからこのtitleに対応した画像の名前を取り出しまして、それをUIImageをつかって画像データにしてあげます。

そしてannotationViewのImageをそれに指定してあげることで、このAnnotationに画像が表示されることになります。

このannotationViewを返してやることで、地図上に猫の画像が各場所に表示されることになります。

それでは、実際に実行を押してみて動作を確認してみましょう。

 

IPhone4sあたりのシミュレーターを選択して、実行を押してみます。シミュレーターが起動するまで少々時間がかかります。

annotationに関しては再利用しますので、その際の手続きが少々難しいかもしれませんけど、再利用された際に前の画像が残っていることもありますので、常に画像はそのとき使うものを指定してあげるようにしていきます。

今地図のほうが読み込まれています、読み込まれましたね。この京橋駅の周辺にこの猫がいることが確認できます。これは前回と一緒ですね。

それでは、他の場所もみてみましょう。

 

2匹目の猫は、国会議事堂のあたりにおきました。あっ、いましたね、このシャム猫が国会議事堂のあたりにいました。

それでは3匹目の猫、3匹目の猫は上野公園のあたりにおきました。あっ、いましたね。上野公園の弁天堂あたりに3匹目の猫がいましたね。

 

今回は、annotationをつかって、様々な場所に猫を配置してみました。

また、猫の画像は、PropertyListをつかって効率よく管理してみました。

次回以降この猫を捕獲できるようにしていきたいとおもいます。

 

Tekuruプログラミングスクールでは、

動画だけでは伝わりきらない、アプリ開発の楽しさや、

気軽に質問できる雰囲気で、プログラミングを学ぶことができます。

もっと深く、プログラミングを理解したい方は、ぜひ無料体験にお越しください。

 

どこよりも楽しく学べるアプリ開発スクールを運営しています。

フォローしてしてくれると、とてもうれしいです☆

Facebook

https://www.facebook.com/techool

 

Twitter

https://twitter.com/TekuruSchool

 

YouTubeチャンネル

https://www.youtube.com/channel/UCpQfWE0TpewbXYnGyxxBkow

 

毎週土曜日の夜に動画のアップロードをしています。

よければ、チャンネル登録お願いします！

ソースコードや、操作の仕方、などなど、

なんでも気軽にコメントください。