Teaprog.com

とあるエンジニアの日々の記録。エンジニアと関係のないようなことも書きます。

iPhoneアプリ作成:簡単地図アプリ

目次

はじめに

 

今回もまたiPhoneのアプリ作成の練習です。

 

アプリ作成の書籍をやり込みながらその過程を残してくとともに、知見を共有できればと思っております。

 

アプリ作成に関しては挫折もあり、まだまだ初心者ですが、少しづつ進めていこうと思います。

 

 参考書籍

 

中古屋さんでたまたま見つけて面白そうなので買ってみました。

 

 

※筆者が購入したものは1つ前の第7版でしたが、ここでは現時点で新しいものを掲載させていただきます。

手順

 

とても簡単でしたので、初心者の方にも優しいのではないかと思います。

 

まず、xcodeを開いて、下に示したような画面が出たら、「Create a new Xcode project」をクリックします。

 

f:id:tk0137:20210705214437p:plain

図1

 

次に作成するアプリのテンプレートを決定します。

 

今回の場合は、「iOS」から「App」を選択します。

 

一番基本的なものですね。

 

選択したら、右下の「Next」をクリックして次へ進みます。

 

f:id:tk0137:20210705214454p:plain

図2

 

下の画面では、まずプロジェクト名を入力します。

 

それ以下の項目は基本的にはそのままでOKです。

 

一応、項目ごとの値を下に示します。

 

Interface:Storyboard

Life Cycle:UIKit App Delegate

Language:Swift

Use Core Data:オフ

Include Tests:オフ

 

f:id:tk0137:20210705214508p:plain

図3

 

次は保存場所を選びます。

 

基本的にはxcodeファイルの配下で良いと思います。

 

「Create」をクリックし、保存します。

 

f:id:tk0137:20210705214522p:plain

図4

 

以上の作業が終了すると、アプリの編集画面に移ります。

 

まず、地図を表示するObjectを貼り付けます。

 

画面右上の「+」をクリックします。

 

すると、新しいウィンドウが出てきますので、その中の「Object」から「Map Kit View」を選び、storyboard上にドラッグします。

 

f:id:tk0137:20210705214534p:plain

図5

 

今回、地図は画面いっぱいに表示させたいので、「Map Kit View」をスマホ画面全体に広げます。

 

この画面ぴったりの状態をキープしたいので、制約を加えます。

 

編集画面右下にアイコンがあります。

 

そのアイコンの右から2番目をクリックします。

 

すると「Add Missing Constraints」という項目が現れますので、これをクリックします。

 

f:id:tk0137:20210705214848p:plain

図6

 

そうすると、制約が「View Controller」配下に現れました。

 

正しく「View Controller」配下に設置されていない場合は、「View Controller」を選択してから再び制約を付け直してください。

 

f:id:tk0137:20210705214912p:plain

図7

 

以上で作業は終わりです。

 

あまりにも短かったので少し驚きました。

 

しかし、アプリ作成の一連の流れを掴むにはちょうど良いのではないでしょうか。

 

 実行の仕方

 

アプリの実行の仕方もいたって簡単です。

 

編集画面左上の再生マークをクリックすると、シミュレータが起動してアプリが実行されます。

 

しかしその前に、以下の図のように、storyboardとシミュレータの実行端末の種類が同一であることを確かめておくと良いでしょう。

f:id:tk0137:20210705232315p:plain

図8

 

もしシミュレータの実行端末の種類が一致していない場合、実行ボタンの右の隣の隣にある「iPhone~」と表示されている箇所をクリックしてください。

 

すると、プルダウンメニューが出てきて、シミュレーターのバージョンを変更する事ができます。

 

f:id:tk0137:20210705232336p:plain

図9

 実行結果

 

以下に実際にアプリを実行してみた結果を示します。

 

iPhone12のシミュレーションを実行しています。

 

最初に日本本土全体が表示され、ズームも問題なく動作しました。

最後に

 

簡単ですが、地図アプリの作成の手順を追ってみました。

 

まだアプリを作成したことはないが、挑戦してみたい方は是非試してみてください。

 

以上、最後までありがとうございました。