どうもこんばんは。
肉球 (@nikuq299com) です。
先日の記事に続き、今回は実機で動かせるアプリの作成を行ってみます。
今回の記事は4です (順番を変えて「部品の使い方」は次回説明します) 。
今回の記事はスクロールが長いですが、ほとんどが画面のスクリーンショットなので、サクサク読めると思います。
また、当初に予定していた説明順ですが、「4. 部品の使い方」「5.地図を表示してみる」の順番を逆にします (部品の使い方は、簡単なサンプルアプリを作成してから説明したほうが分かりやすいと判断したため)。
- iOSアプリ開発の前準備
- Xcodeを使って簡単なプログラムを動かしてみる
- iOSアプリの基礎
- 地図を表示してみる (← 今回ココ)
- 部品の使い方 (← 説明順番入れ替え)
- SNS機能を呼び出してみる
- カメラを使って写真を保存してみる
はじめに
プログラムコードを書かずにiPhoneで動くアプリを作ってみます!
今回の地図アプリは、プログラムコードを1行も書かずに作成します。
機能はとてもシンプルですが、それでもコードを書かずにここまでのアプリを作れるという事を共有できればと考えています。
地図アプリ の作り方
Xcodeを使ってアプリを作成する!
まずは下準備する
Xcodeを起動すると下記の画面を表示するので、「Create a new Xcode project」をクリックして、新規プロジェクトを作成します。

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

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

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

地図アプリを作り込む
この画面には、ここまでに設定した内容を表示しています。
続いて、地図部品を使うために、画面中央下にある、「Linked Frameworks and Libraries」欄の「+」をクリックします。

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

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

いよいよ、開発に入ります。
画面左側にある「Main.storyboard」を選択すると、画面中央にViewControllerという矩形を表示します。
この矩形が画面レイアウトなので、ココに部品を貼り付けていきます。
画面右側下にあるリストから、「Map Kit View」(以降、地図部品) を画面にドラッグ&ドロップしてください。
この時、配置する部品が中央に来るように、画面に十字の破線が出たところで部品をドロップしてください。

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

アプリを実機で確認する
これでアプリの開発は終了なので、続いて、実機で確認を行います。
メイン画面左上にある停止ボタンの右側をクリックすると、実機、またはシミュレータを選択できます。

そうすると、実機とシミュレータから確認対象とする端末を選べるので、好きな端末を選びます。
一番上のDeviceに乗っている端末が実機です。

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

実機の設定を行う
はじめてiOSアプリをXcodeからインストールする場合は、「信頼されていないデベロッパ」という表示が出て、アプリを実行できません。
これは、初期設定のiOSが正規のルート (App Store) からのみのアプリインストールを許可する設定になっているためです。

自作したアプリを稼働させるためには、設定の「一般」>「プロファイルとデバイス管理」>「Apple ID」の順でタップします。
Xcodeに登録したApple IDを信頼するよう、「”Apple ID”を信頼」をタップしてください。

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

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

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

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

ピンチアウト、ピンチインもできます。
まとめ
iOSのアプリを部品の切り貼りだけで作れました!
今回は地図アプリを作成してみましたが、シンプルなアプリであれば、今回のようにプログラムコードを1行も書かなくても作成できました。
また、今回作成したXcodeプロジェクトはGitHubにSampleMapというリポジトリ登録していますので、時間がない方はGitHubからプロジェクトをダウンロードして動作確認をしてみてください。
位置情報など、純正のマップアプリの機能を使いたい場合は、これらの部品もMapKitに組み込まれていますので、調べた上で使ってみてください。
もし、本格的にプログラミング食でべていきたい場合は、TEACH ACADEMYの iPhoneアプリコース などのオンライン学習プログラムを使うことも、費用対効果的に検討対象に入れることをおすすめします。
それでは。ごきげんよう。
コメントを残す