ブログ名

Swiftで地図アプリを開発してみよう!

開発環境

  • Xcode 10.2.1
  • Swift 5.0.1

概要

今回の目的はSwift言語初心者の方向けで誰でも簡単に地図アプリをXcodeのシュミレーター(iPhone)に表示でき、楽しくXcodeの操作を学べる講座になります。

画面上に世界地図を表示する”地図アプリ”を作成します。 MacOS上で地図を拡大・縮小することができます。
※ 今回プログラムは行いません。

難易度

・ やさしい

Xcodeとは?

Xcode(エックスコード)とは、Apple社が開発・リリースしているソフトウェアです。MaciPhoneiPad向けのアプリケーション開発に特化していて、デスクトップアプリやスマホアプリを制作する際には必須とも言えるほどメジャーな開発ツールです。

地図アプリを作ろう!

1. 新しいプロジェクトを作成

1-1. Xcodeを開き【Create a new Xcode project】をクリックする。

f:id:shizuuuka0202:20200317211327p:plain

1-2. Single View Appを選択後、【Next】をクリック。

f:id:shizuuuka0202:20200317211359p:plain

1-3. Teamの【Add account...】をクリックする。

f:id:shizuuuka0202:20200317211434p:plain

1-4. Apple IDを入力後【Next】をクリック。
1-5. Passwordを入力後、再度【Next】をクリック。

f:id:shizuuuka0202:20200317211509p:plain

f:id:shizuuuka0202:20200317211534p:plain

1-6. Apple IDが、Xcodeに登録されました。
1-7. ”Accounts”画面の左上にある×ボタンで一旦画面を閉じます。

f:id:shizuuuka0202:20200317211622p:plain

1-8 .Teamにアカウント情報が表示されるので選択します。

f:id:shizuuuka0202:20200317211651p:plain

1-9 .【Project Name】に任意のプロジェクト名を入力。
1-10. 【Language】から”Swift”を選択。←多分されてる。
1-11. 【Next】をクリック。
Organaization Nameには個人名または、企業名を記入         Organaization Identifierにはメールアドレス(逆記載)
例→com.example.someone等

f:id:shizuuuka0202:20200317211719p:plain

1-12. プロジェクトを作成するフォルダを新規に作成します。(任意のフォルダで可)

f:id:shizuuuka0202:20200317211742p:plain

新しくプロジェクトが作成されました!!
では次は本格的に、地図アプリの開発に移ります。
とその前に、Xcodeについて少し解説します。

2.Xcodeについて

2-1.エリアについて

f:id:shizuuuka0202:20200317211833j:plain

f:id:shizuuuka0202:20200317215632p:plain

2-2.ツールバー

f:id:shizuuuka0202:20200317211907p:plain ・Runボタン
▶︎となっている部分(実行ボタンとも呼ばれる) Xcodeは最初にアプリを組み立てる作業を行う。
そのあとに、組み立てたアプリを起動する作業を行う。( これを ビルド とも呼ぶ)
・Stopボタン

□となっている部分(停止ボタンとも呼ばれる) その名の通り、起動中のアプリを停止することができる。

Schemeメニュー

スキーム(構成)は開発中アプリをシュミレータで実行するか、iPhoneの実機で実行するかの選択をすることができる。

・Activeビューア

開発しているアプリがどのシュミレータ(iPhoneiPad)で画面がビューされているかを表示する。

・エディタ設定ボタン

エディタボタンは、エディタの表示方法を変更することができるボタン。

ワークスペース設定ボタン

f:id:shizuuuka0202:20200317215943p:plain


・ビューボタン
ビューボタンをクリックすると、ナビゲータエリアやインスペクタエリア、デバッグエリアを表示/非表示に切り替えることができる。
実際にクリックして確認してみてください。

2-3. デバッグエリア

デバッグエリアは、アプリの開発途中でプログラムの状況を確認できたり、プログラムのバグを修正する際に使用するエリア。

通常時は非表示にしておいて問題ないですが、プログラムが意図した通りに動かない際は利用する機会があります。

2-4. ナビゲータエリア

f:id:shizuuuka0202:20200317212008p:plain

ナビゲータエリアは編集対象のファイルを選択するためのエリアです。
選択されたファイルの内容が中央のエディタエリアに表示されます。

・ナビゲータバー

9つあるボタンの詳細(上の画像左から)

 1. プロジェクトナビゲータ
  プロジェクトを構成するファイルが表示される。(一番使用するナビゲータ)
 2. シンボルナビゲータ
  プログラムの構成(クラス、プロパティ、メソッドなど)が表示される。
 3. 検索ナビゲータ
  プロジェクトの中の文字列を検索できる。
 4. 問題ナビゲータ
  警告やエラーの一覧が表示される。
 5. テストナビゲータ
  テストプログラムを操作、実行できる。
 6. デバッグナビゲータ
  アプリが動作中にCPUやメモリなどんリソース、メソッドや関数の呼び出し階層を表示することができる。
 7. ブレークポイントナビゲータ
  プログラムを一時停止させるための停止条件などを設定することができる。
 8. レポートナビゲータ
  ビルドや実行、テスト実施などの各種履歴を表示できる。
 9. ソースコントロールナビゲータ(画像になし)
  プログラムの変更履歴を操作することができる。

・本体領域
ナビゲータに応じた情報を表示します。

・フィルタバー
本来領域の表示内容を絞り込みます。

3.地図アプリの開発

Xcodeの操作画面の説明をしてきましたが、本題である、地図アプリの作成を行います。
今回は、MacOS上のシュミレータに表示されることまでを確認するまでにします。

3-1.Map Kit Framework

機能として、地図にピンを置いたり、検索機能をつけたり、注釈機能をつけることができます。

3-2.Linked Frameworks and Libraliesを選択します。

Xcodeからプロジェクトを開いたら、Linked Frameworks and Libraliesを選択する f:id:shizuuuka0202:20200317221308p:plain

3-3.MapKit.Frameworkを追加します。

検索機能を使い ”Map”と検索ですぐ出てきます。 f:id:shizuuuka0202:20200317221352p:plain

3-4.追加後にMain.storyboardを開きます。

iPhoneの画面のようなものが出てきました。
ストーリーボードで最初は紙で言えば白紙の状態です。 f:id:shizuuuka0202:20200317221505p:plain

3-5.LibraryボタンからFrameworkをストーリーボードにドラッグ&ドロップします。

画面右上□で囲っている枠の名称をLibraryボタンといって、テキストや、ボタン機能をストーリーボード上で位置や、サイズの大きさなどを決めることができます。 f:id:shizuuuka0202:20200317221543p:plain

3-6.画面いっぱいにMapkitを広げます。

f:id:shizuuuka0202:20200317221612p:plain

f:id:shizuuuka0202:20200317221636p:plain

3-7. ビルドする。

シュミレータ上にマップを表示させるために、ビルドさせて表示させます。

▶︎を押してビルドしてください。

f:id:shizuuuka0202:20200317221716p:plain

表示されました!

画面を拡大、縮小させることも可能になります。

f:id:shizuuuka0202:20200317221737p:plain

Xcodeの画面に戻し、■の停止ボタンでMap機能を終了させることができます。

f:id:shizuuuka0202:20200317221753p:plain

停止させた後はこのような画面になり、よく見たことがある画面になると思います。

4.次回

マップに特定の場所へピンさせるということをやってみたいと思います!
次回からはSwiftのコードを使っていくので難易度が少しずつ上がっていきますが、思ったようにビルドして動いたり、表示してくれたりすると、楽しくなってきますよ!

Xcodeのバージョンによってはうまく動かないこともあるのでバージョンについては注意してください!