地図アプリ を自作してiPhoneで動かしてみる

地図アプリ をiPhoneで動かしてみる

どうもこんばんは。

肉球 (@nikuq299com) です。

 

先日の記事に続き、今回は実機で動かせるアプリの作成を行ってみます。

iOSアプリ 開発のコツ。

iOSアプリ を作る上で知っておくと良いこと

2018年8月12日

 

今回の記事は4です  (順番を変えて「部品の使い方」は次回説明します) 。

今回の記事はスクロールが長いですが、ほとんどが画面のスクリーンショットなので、サクサク読めると思います。

また、当初に予定していた説明順ですが、「4. 部品の使い方」「5.地図を表示してみる」の順番を逆にします (部品の使い方は、簡単なサンプルアプリを作成してから説明したほうが分かりやすいと判断したため)。

  1. iOSアプリ開発の前準備
  2. Xcodeを使って簡単なプログラムを動かしてみる
  3. iOSアプリの基礎
  4. 地図を表示してみる (← 今回ココ)
  5. 部品の使い方 (← 説明順番入れ替え)
  6. SNS機能を呼び出してみる
  7. カメラを使って写真を保存してみる

 

はじめに

ポイント1

プログラムコードを書かずにiPhoneで動くアプリを作ってみます!

 

今回の地図アプリは、プログラムコードを1行も書かずに作成します。

機能はとてもシンプルですが、それでもコードを書かずにここまでのアプリを作れるという事を共有できればと考えています。

 

地図アプリ の作り方

ポイント2

Xcodeを使ってアプリを作成する!

 

まずは下準備する

Xcodeを起動すると下記の画面を表示するので、「Create a new Xcode project」をクリックして、新規プロジェクトを作成します。

Xcodeでプロジェクトを新規作成する。

 

続いて、プロジェクトのテンプレートを選ぶように言われますので、「iOS」の「Single View App」を選択して、右下のNextボタンをクリックしてください。

アプリのテンプレートを選ぶ。

 

開発に必要な情報を入力してください。詳細は表1を参照してください。

開発に必要な情報を入力する。

 

表1. 各項目の設定値

項目名設定値備考
Product NameSampleMapアプリ名。ここではSampleMapとしています。
Team自身のApple IDはじめてXcodeを立ち上げた時は、「Add account」という表示が出るので、クリックしてApple IDを登録してください。
Organization Name自身の名前自身の組織名、または個人名を入力してください。
Organization Identifier独自ドメイン名、またはメールアドレス (単語を逆に並べる)世界で1つとなるIDを設定してください。独自ドメインを持っていない場合は、自身のメールアドレスなら必ずユニークになります。
Bundle Identifier識別ID世界で1つとなるアプリの識別IDを設定する。Organization Identifier + Product Nameを自動で設定してくれる。
LanguageSwiftプログラム言語はSwiftを選択する。3つのチェックボックスはサンプルで使わないので無視して良い。

 

次に、プロジェクトを保存する場所を指定してください。

プロジェクトの保存場所を設定する。

 

地図アプリを作り込む

この画面には、ここまでに設定した内容を表示しています。

続いて、地図部品を使うために、画面中央下にある、「Linked Frameworks and Libraries」欄の「+」をクリックします。

設定内容の確認と、地図部品を使う準備をする。

 

MapKit.frameworkを選択して、「Add」ボタンをクリックする。

MapKitを取り込む。

 

メインの画面に戻るので、先程「+」ボタンをクリックしたLinked Frameworks and LibrariesにMapKit.frameworkを表示していればOKです。

Linked Frameworks and LibrariesにMapkitが存在することを確認する。

 

いよいよ、開発に入ります。

画面左側にある「Main.storyboard」を選択すると、画面中央にViewControllerという矩形を表示します。

この矩形が画面レイアウトなので、ココに部品を貼り付けていきます。

画面右側下にあるリストから、「Map Kit View」(以降、地図部品) を画面にドラッグ&ドロップしてください。

この時、配置する部品が中央に来るように、画面に十字の破線が出たところで部品をドロップしてください。

地図部品を画面に登録する。

 

画面レイアウト上にドロップした地図部品の四隅をドラッグ&ドロップして、画面レイアウトいっぱいに引き伸ばしてください。

画面に配置した地図部品を画面いっぱいに引き伸ばす。

 

アプリを実機で確認する

これでアプリの開発は終了なので、続いて、実機で確認を行います。

メイン画面左上にある停止ボタンの右側をクリックすると、実機、またはシミュレータを選択できます。

確認端末を選択する。

 

そうすると、実機とシミュレータから確認対象とする端末を選べるので、好きな端末を選びます。

一番上のDeviceに乗っている端末が実機です。

端末を選択する。

 

実行対象の機器を選定したら、メイン画面左上の再生ボタンをクリックしてください。

アプリを実行する。

 

実機の設定を行う

はじめてiOSアプリをXcodeからインストールする場合は、「信頼されていないデベロッパ」という表示が出て、アプリを実行できません。

これは、初期設定のiOSが正規のルート (App Store) からのみのアプリインストールを許可する設定になっているためです。

自作アプリを稼働させるため、セキュリティ設定を変更する。

 

 

自作したアプリを稼働させるためには、設定の「一般」>「プロファイルとデバイス管理」>「Apple ID」の順でタップします。

 

自作アプリを稼働させるため、セキュリティ設定を変更する。
自作アプリを稼働させるため、セキュリティ設定を変更する。
自作アプリを稼働させるため、セキュリティ設定を変更する。

 

Xcodeに登録したApple IDを信頼するよう、「”Apple ID”を信頼」をタップしてください。

自作アプリを稼働させるため、セキュリティ設定を変更する。

 

ポップアップ画面で再度Apple IDを信頼してよいか確認されますので、「信頼」をタップしてください。

ポップアップ画面の「信頼」をタップする。

 

SampleMapが「検証済み」と表示していれば、アプリを稼働することができます。

SapleMapが検証済みとなっていることを確認する。

 

ホーム画面に戻り、改めてSampleMapアイコンをタップしてください。

改めて、SampleMapのアイコンをタップする。

 

Apple のマップアプリと同じ地図を表示すれば、アプリは正しく稼働しています。

地図を表示すれば、正常可動しています。

 

ピンチアウト、ピンチインもできます。

マップをピンチアウトする。
マップをピンチインする。

 

まとめ

まとめ

iOSのアプリを部品の切り貼りだけで作れました!

今回は地図アプリを作成してみましたが、シンプルなアプリであれば、今回のようにプログラムコードを1行も書かなくても作成できました。

また、今回作成したXcodeプロジェクトはGitHubにSampleMapというリポジトリ登録していますので、時間がない方はGitHubからプロジェクトをダウンロードして動作確認をしてみてください。

 

位置情報など、純正のマップアプリの機能を使いたい場合は、これらの部品もMapKitに組み込まれていますので、調べた上で使ってみてください。

もし、本格的にプログラミング食でべていきたい場合は、TEACH ACADEMYの iPhoneアプリコース などのオンライン学習プログラムを使うことも、費用対効果的に検討対象に入れることをおすすめします。

 

 

それでは。ごきげんよう。

 

コメントを残す