地図アプリを作る！

前回まででアプリ開発を始める準備がようやく整いました。今回からは実際にXcodeを使ってアプリ開発を進めていきたいと思います。

そう言って、いきなり用語の説明などを１から始めても面白くないし実践的ではないので「作りながら覚える」と言うことをモットーに進めていきたいと思います。進めていく途中でたくさん分からないことが出てくると思いますが、取り敢えずはスルーで大丈夫です。何度も繰り返しているうちに感覚的にわかってくることがほとんどですのであまり気にする必要はありません。それに絶対にわかっていた方が良いと思うことは説明していくので安心してもらって大丈夫だと思います。それでは、スタートです。

1.Xcodeを起動して「Create a new Xcode project」を選択する。

2.上から「iOS」「Single View App」が選択されていることを確認したら「Next」をクリックします　⇨「iOS」の部分は製作したアプリがどのOSで動くものかを決めています。watchOSにすればappleWatch用のアプリ、macOSにすればMac用のアプリと言った具合です。「Single View App」の部分は製作するアプリのテンプレートを決めます。これをGameにすればゲームを、Augmented Reality AppにすればARを使ったアプリを作れると言った具合ですが、取り敢えずはSingleViewAppで十分です。

3.productNameを設定します。好きな名前で大丈夫です。Organization Nameは他の人とかぶらないものを設定してください。languageがSwift、その下の３つのボックスにチェックがついていないことを確認したらNextをクリックしてください。次に保存する場所を設定するタブが出てくるので自分が保存したい場所を選択して「Source Control」項目のチェック欄にチェックが入っていないことを確認して、Createをクリックして下さい

4.ここからが本番です。画面左側のMain.storyboardをクリックしてください。ここではアプリに表示される画面を作っていきます。画面中央のViewControllerという文字の下の白いスペースがまさに表示されるアプリの画面です。ここに地図を配置しアプリが起動された時に地図が表示されるようにします。画面右上の右から７個目の四角を丸で囲った記号をクリックしてください。ここでアプリに用いる様々なツールを取得することができます。ここの検索窓にmapと入力してください。出てきたMapKitViewが地図を表示するのに使うツールです。

5.MapKitViewをViewControllerの上にドラック＆ドロップしてください。そしてそれを画面いっぱいに広げてください。そして画面左上の左の[testMap >] の右側をクリックし、iPhoneXを選択してください。製作中のアプリを起動するシミュレーターを選びます。iPhoneX以外でも問題はありません。iPhone本体がPCと接続されている場合、自分のiPhoneにアプリを起動することもできます。そして画面左上、左端の再生ボタンをクリックしてください。シミュレーター上にアプリを起動します。

6.シミュレーターが起動しました。アプリの完成です。と、行きたいところですが画面下部に見栄えの悪い白い部分があります。これを解消したいと思います

7.画面右下の|-□-|をクリックしてください。そこで下の画像のように設定してください。そして、Add 4Constraintsをクリックしてください。もう一度先ほどのようにシミュレーターを起動してください。

8.見栄えの悪かった白い部分が消え画面いっぱいに地図が表示されているのがわかります。これにて、完成です。シミュレーターを使って遊んでみてください。

どうでしたか？？上手く動きましたか？想像されていたよりも簡単にできたのではないでしょうか？アプリ開発と言うと一部の限られた人間だけができる特別なもののように思えるかもしれませんが実際はそんなことはなく、作ろうと思えばこのように簡単につくることができるのです。アプリ作りって面白いと思ってもらえたら嬉しいです。

最後まで読んでいただきありがとうございました。次はこの地図アプリをもう少しレベルアップさせていきたいと思います。