XcodeでiPhoneアプリにUIパーツを追加する方法【初心者向け】

XcodeでiPhoneアプリに【UIパーツを追加する方法】を初心者向けに解説した記事です。主なUIパーツ8つも合わせて紹介しています。ボタンやラベルなどのパーツの種類と、実装方法を合わせて学びたい方は読んでみてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

XcodeではUIKitを使って、iPhoneアプリにUIパーツを追加することができます。UIパーツを使えば、ボタンやラベルなどを表示でき、アプリのUIデザインも簡単になります。

本記事では、UIパーツの一部を紹介し、Xcode上での追加方法について解説していきます。

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。

UIKitとは

UIKitとは、iOSアプリケーションの核となるフレームワークです。UIKitには画面の部品、加速度情報やフォント管理等、30を超えるクラスから構成されています。

Storyboardを選択すると画面右下のペインには、各種オブジェクトのリストが表示されます。これらはStoryboardのViewController上のViewや、Viewの上にある部品の上に載せて利用します。

UIKitのうち、この画像のように黄色い円形の背景を持つものはViewControllerですので、新しい画面をStoryboardに追加する時に使います。

XcodeScreenSnapz001

一方こちらはクラスオブジェクトの部品です。

XcodeScreenSnapz002

[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中

UIパーツの一部を紹介

Xcodeが提供するUIパーツは多数ありますが、よく使うものを中心にご紹介します。

リンクの先には詳細の設定方法の記事もあるので、合わせて参考にしてみてください。

Button（ボタン）

各種操作を指示するために使わることが多いボタンです。ボタンの文言や色も変えることができます。

XcodeでUIButtonを追加する方法

Date Picker

iOSシミュレータScreenSnapz001

日付や時間を選択するためのホイールです。表示するのを日付だけや時間だけにすることもできます。乗り換え案内アプリなどで見かけることも多いのではないでしょうか。

XcodeでUIDatePickerを追加する方法

Label（ラベル）

XcodeScreenSnapz004

画面上に静的な文字列を表示するのに利用するラベルです。文言は簡単に変更可能です。

XcodeでUILabelを追加する方法

Slider

XcodeScreenSnapz005

ある一定範囲（設定可能）の数値を変化させるのに利用するUIパーツです。

XcodeでUISliderを追加する方法

Switch

XcodeScreenSnapz006

ONとOFFの二つの状態を持ちます。設定画面等で利用することが多いです。

XcodeでUISwitchを追加する方法

Text Field

XcodeScreenSnapz007

読んで字のごとく、文字を入力するためのパーツです。

XcodeでUITextFieldを追加する方法

Image View

XcodeScreenSnapz008

画像を表示するためのパーツです。このサンプルのように画像ファイルを表示させたりして使います。気を付けなくてはならないのは、これが他の部品とは違い、Viewであるということです。

XcodeでUIImageViewを追加する方法

Web View

WEBページを表示するためのパーツです。標準ではURLを入力するフィールドはありませんので、別途TextFieldで作成する必要があります。

XcodeでUIWebViewを追加する方法

UIパーツの追加方法

最後に、UIパーツの追加方法をご紹介します。今回はLabelを使います。

画面右下にある「Label」をStoryboardのViewの上にドラッグ&ドロップするだけで配置できます。
XcodeScreenSnapz009

また、パーツの外観等は画面右側のペインで設定します。

XcodeScreenSnapz010

なお、これらのパーツをプログラムから扱うためにはIBOutletを作らなくてはなりません。具体的には部品からヘッダーファイルに右クリックでドラッグして名前を付けることになります。

XcodeScreenSnapz011

ボタンのようにタップされたことを検知するにはIBActionを作成しますが、操作方法はIBOutletの作り方と同じで、表示されるポップアップで種類をActionに変更するだけです。

いかがでしたか？

Xcodeの使い方の基礎がまだわからないという方は、ストーリーボードの使い方もご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

・調べてもほしい情報が見つからない
・独学のスキルが実際の業務で通用するのか不安
・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるようカウンセラーやエンジニア・デザイナーがあなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありませんので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！無料相談を予約する

【入門編】無料で学べる！初心者のためのSwift学習サービス10選

Swiftを入門から始めようとしている人に最適な学習サービスを10個まとめてみました。どのサービスも初心者向けに作られているので、Swiftを全くやった...

iPhoneアプリ開発

配列を覚える！Swiftで書くArrayの使い方【初心者向け】

初心者向けにSwiftで書くArrayの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Ar...

iPhoneアプリ開発

XcodeでUIAlertView追加する方法【初心者向け】

XcodeでiPhoneアプリを開発するときに、便利なUIパーツを追加する方法を紹介する記事です。初心者の方を対象としています。今回は、UIAlertV...

iPhoneアプリ開発

XcodeでUIImageViewを追加する方法【初心者向け】

iPhoneアプリの開発の際に便利な、UIパーツの使い方を初心者向けに紹介する記事です。今回は、XcodeでUIImageView（イメージビュー）を扱...

iPhoneアプリ開発

XcodeでUIActionSheetを追加する方法【初心者向け】

XcodeでUIパーツを追加することで、より使いやすいiPhoneアプリを開発することができます。そんなUIパーツのうち、「UIActionSheet（アクショ...

iPhoneアプリ開発

今さら聞けない！iPhoneアプリをApp Storeでリリースする方法【初心者向け】

Xcodeを使ってiPhoneアプリを開発し、シミュレーターでの確認と実機テストも終了したら、いよいよApp Storeでリリースしてみましょう。今回は...

iPhoneアプリ開発

あわせてよく読まれている記事

今さら聞けない！Xcodeをインストールする方法【iOSアプリの統合開発環境】現役エンジニアが解説

iPhone（iOS）用のネイティブアプリを開発するにはXcodeが必要です。しかし、Xcodeのインストール方法や開発環境の構築方法を知らなければ、iOS用ネイティブアプリを開発できません。今回は初心者向けにXcodeをインストールして、プロジェクトを作成、シミュレーターの起動までご説明します。目次 Xcode（エックスコード）とは Xcodeで開発できるアプリケーション Xcodeのインストール方法プロジェクトの作成シミュレーターの表示 Xcodeの学習方法 Xcode（エックスコード）とは Xcodeとは、iOS/Mac OS用アプリの統合開発環境です。 iPhoneやiPad向けのアプリは、Xcodeの環境から開発できます。 Xcodeは、Apple社がApp Storeで無償配布しています。 WindowsのPCではインストールができないので注意しましょう。また、実機の利用や、App Storeでアプリ配布をするには、別途デベロッパプログラム（年間11,800円）に登録する必要があるので注意しましょう。 [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中Xcodeで開発できるアプリケーション Xcodeは、Apple社が提供しているアプリケーション開発ソフトウェアです。そのため、Xcodeで開発できるアプリケーションは以下のOSで動作します。 iOS（iPhone、iPad） macOS （iMac、Macbook） watchOS（Apple Watch） tvOS（Apple TV）上記OSで動作しているものであれば、基本的にすべてのアプリケーションを開発できます。 Xcodeのインストール方法まずは、Xcodeのダウンロードページにアクセスします。画面を開くと「App Store.appを開きますか？」という確認が表示されるので、「App Store.appを開く」をクリックします。もちろん、直接、Mac App Storeから検索してインストールすることも可能です。そのまま「入手」のボタンをクリックし、続けて表示される「インストール」のボタンをクリックします。インストールには数分かかりますので、時間の余裕があるときにインストールしましょう。インストールが完了すると、自分のPCのアプリケーションにXcodeが追加されるので、起動してみます。このように表示されたらインストール完了です。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。コスパ・タイパ最適化の参考として、

iPhoneアプリ開発

UnityでiPhoneアプリ（iOS）向けにビルドする方法【初心者向け】

今回は初心者の方を対象に、iPhoneアプリ向けにビルドする方法を紹介します。 Unityで開発したゲームをビルドすることで、iPhone（iOS）アプリとして公開できます。実務でも、Unityを利用したiPhoneアプリ開発でビルドするので、ぜひ学習してみてください。目次UIKitとはUIパーツの一部を紹介UIパーツの追加方法そもそもUnityについてよく分からないという方は、Unityとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回はiOS向けにビルドする方法を練習するよ。大石ゆかり田島メンター！！iOSにビルドするときはどの機能を使うんですか〜？田島悠介最初の手順はAndroidのときと同じく「Build Settings」から始まるよ。その後、Xcodeで動作確認などを行うんだ。さっそくやってみよう。大石ゆかり分かりました！事前準備まずはUnityで開発したゲームのファイルの準備が必要です。今回は、このような迷路ゲームを例にして紹介します。 iPhone用にJoyStickも用意しています。また、iPhoneアプリにビルドする場合は、AppleのiOSデベロッパープログラムに登録している必要があります。有料ですが、必ず登録するようにしましょう。 AppleのiOSデベロッパープログラムに登録完了してから、実際の作業を行います。 Unity側での作業ここでは、Unity側の作業を解説します。ビルドターゲットの変更まずUnityのビルドターゲットを変更する必要があります。 [File]→[Build Settings…]を選択して画面を表示させます。現在のシーンを追加「Scenes in Build」に何も表示されていない場合は、「Add Current」ボタンをクリックして、現在のシーンを追加します。他にも必要なシーンがあれば随時追加してください。「Scenes in Build」にMaze.unityのようになにか表示されていれば、「Platform」の欄にiOSが表示されます。「iOS」を選択して「Switch Platform」をクリックしてください。この処理には多少時間がかかりますが、完了するとiOSの横にUnityのアイコンが表示されます。 Player Settingsの設定 Player Settingsを設定します。 Build Settings画面の「Player Settings…」ボタンをクリックして、Inspectorビューに情報を表示させます。画面の向き設定「Resolution and Presentation」を選択して、iPhoneでの画面の向きを決めます。今回はLandscape Leftを選択してみます。縦画面ゲームの場合はPortlaitで良いです。その他の項目はデフォルトのままで問題ありません。「Icon」や「Splash Image」で、アイコンなどの設定が可能です。その他の設定まず最初に設定するのが「Bundle Identifier」です。この内容は、iOS Developer PortalのIdentifiersで設定するApp ID及びBundle IDと一致している必要があります。したがって、先にiOS Developer PortalでApp IDの設定をしてください。また､ゲームの途中でHomeボタンが押された場合は、ゲームは即時に終了せずにバックグラウンドで待機状態になります。そのため､ゲームをしようと思ってアイコンをタップして起動すると､先ほどの続きからになってしまいます。これを避けるには「Exit on Suspend」にチェックを入れます。もちろん､マルチタスキング環境でバックグラウンドで待機させたい場合にはチェックを入れないでください。 Optimization Other Settingsの下段にあるOptimizationです。 Optimizationの「SDK Version」は、最初に「Simulator SDK」にしてください。こう設定しないとシミュレーターで動作させることができません。 Build Settings画面に戻るここで再びBuild Settings画面に戻り、「Build」ボタンをクリックします。プロジェクトの保存先と名称を指定するダイアログが表示されますので､設定して保存してください。 Build処理には少々時間がかかります。 Build処理が完了するとプログレスバーが消えて、指定した場所にXcodeのプロジェクトフォルダが作成されます。プロジェクトフォルダの中にある拡張子が「.xcodeproj」のファイルがXcodeのプロジェクトファイルです。これでUnity側での作業は完了です。田島悠介エラーが出る場合はPlayer Settingsの各項目などを確認しよう。また、この手順には少し時間がかかるよ。大石ゆかりビルドが完了して、何だかたくさんファイルの入ったフォルダが作成されましたね。田島悠介次はXcodeでの作業になるよ。作成されたフォルダの中から拡張子「.xcodeproj」のファイルを開いてみよう。 [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中Xcodeで確認ここでは、Xcodeの作業を解説します。 Xcodeの起動プロジェクトフォルダに保存した「.xcodeproj」のファイルをダブルクリックしてXcodeを起動してください。ターゲットシミュレーター指定ここで、ターゲットとなるシミュレーターを選択します。特に大事なのは､3.5-inchと4-inchで確認することです。なぜなら、App Storeへ提出するには、両方の画面のスクリーンショットが必要だからです。 Xcodeのシミュレーター起動ターゲットを設定したら、「cmd+R」のXcodeのショートカットで実行してみてください。これでXcodeのシミュレーターが起動します。 JoyStickもマウスで動かせますので、動作確認を行ってください。実機での確認最後に実機で確認を行います。再びUnityに戻り、Player SettingsでSDK VersionをDevice SDKに変更してBuildします。この時､シミュレーター用にビルドしたのとは違う名前で保存してください。保存が終わったら､実機用のビルドをXcodeで開き､ターゲットとして実機を選択してください。ターゲットの設定が終わったら、先ほどと同じく「cmd+R」で実行して実機で動作確認を行ってください。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。

Unity

Xcodeのストーリーボードを使う方法【iPhoneアプリの画面が簡単に作れる】

Xcodeを使ってiPhoneアプリを開発する際に使える「ストーリーボード（Storyboard）」という機能があります。これを使うと、視覚的かつ直感的にアプリの開発を進めていくことができます。今回はアプリ開発初心者でも使えるように、ストーリーボードの使い方をお伝えします。Storyboardの入門としてお読みください。なおこの内容は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプをもとに紹介しています。目次今回の記事は少し長いので、下記の順番で説明していきます。ストーリーボードとは Xcodeでプロジェクトを開始するストーリーボードの背景色を変えるストーリーボードに画面を追加するストーリーボードにボタンを設置するボタンをタップしたら画面が切り替わるようにするシミュレータで確認するストーリーボードとはストーリーボード（Storyboard）とは、Xcode4.2から導入された機能です。ストーリーボードを使うと、アプリ画面のUIパーツのレイアウトや画面遷移を視覚的に作成することができます。使う際にプログラミングの知識は不要ですので、ドラッグ&ドロップなどの操作で簡単に使うことができます。なお、本記事ではXcode5.1のバージョンを使用しています。 Xcodeのインストール方法がわからない場合は、Xcodeのインストール方法の記事をご覧ください。 [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中Xcodeでプロジェクトを開始するそれではストーリーボードを使ってみましょう。ストーリーボードを使うには、Xcodeでプロジェクトを開始する必要があるので、まずはそこから解説します。最初にXcodeを起動しましょう。最初に下のような画面が出てきますので、赤枠をクリックします。次に、どのようなプロジェクトにするか聞かれますので、赤枠（1）を選び、Next（2）をクリックしましょう。さらに、プロジェクト名や開発するAppの対象デバイスを入力（1）し、Next（2）をクリックします。最後にプロジェクトの保存先を聞かれます（1）ので、保存先を選択していきましょう。ここでCreate（2）をクリックすればプロジェクトが開始されます。ここまでは簡単ですね。プロジェクトが開始できたらいよいよストーリーボードを編集していきます。ストーリーボードの背景色を変えるストーリーボードは、「Main.Storyboard」を開いて操作することになります。 Xcodeの左ペイン、ファイルツリー表記にある、”Main.storyboard”をクリックしましょう。すると、ストーリーボード編集画面に切り替わります。ここで表示された画面の背景色を変更してみます。背景色の変更は、変更したいストーリーボードの画面を選択し、右ペインの(1)から”View”を開きます。すると、中段あたりに”Background”とあるのがわかると思います(2)。これをクリックすると、背景の種類を選択できるようになりますので、一番下にある”Other”をクリックします。ここでカラーパネルが表示されますので、好きな色に変更しましょう。今回はわかりやすいように、赤にしてみました。背景色の変更方法は以上です。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。コスパ・タイパ最適化の参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

iPhoneアプリ開発

Androidアプリ開発のRelativeLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。今回はそのなかの1つである、RelativeLayout（リラティブレイアウト・相対レイアウト）を追加する方法と基本的な使い方をご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。大石ゆかり田島メンター！！Androidアプリでボタンの並びを相対的に並べたいんですけど、何かいい方法ってないですか〜？田島悠介それならRelativeLayoutを使うとできるよ。パーツの位置を相対的に設置できるんだ。大石ゆかり RelativeLayout、ですか？ RelativeLayoutとは RelativeLayoutとは、基準となるパーツを決め、それとの相対的な関係で位置を決めていくというレイアウトです。 RelativeLayoutを配置する画面を最初から作成する場合は、xmlタブを開いてデフォルトで記述されているコードをすべて削除しておきましょう。 RelativeLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のRelativeLayoutを、プレビュー画面までドラッグしましょう。 [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中RelativeLayoutにパーツを配置する RelativeLayout上にパーツを配置してみましょう。一番最初に配置したパーツはレイアウトの基準として配置されています。次に配置したパーツは、一つ前に配置したパーツを基準に配置されます。また、基準にしているパーツは矢印で確認できます。パーツを移動させると、そのパーツを基準としている他のパーツも同じように移動します。 RelativeLayoutのコードを確認する最後に、RelativeLayoutで、下の画像のようにボタンを3つ配置した画面を作成しコードを確認してみましょう。 xmlタブでコードを確認すると、このようになっています。 <RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”match_parent” android:layout_height=”match_parent” > <Button android:id=”@+id/button1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_alignParentLeft=”true” android:layout_alignParentTop=”true” android:layout_marginLeft=”59dp” android:layout_marginTop=”56dp” android:text=”Button” /> <Button android:id=”@+id/button2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_alignLeft=”@+id/button1″ android:layout_below=”@+id/button1″ android:layout_marginTop=”80dp” android:text=”Button” /> <Button android:id=”@+id/button3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_below=”@+id/button2″ android:layout_marginLeft=”43dp” android:layout_marginTop=”68dp” android:layout_toRightOf=”@+id/button2″ android:text=”Button” /> </RelativeLayout> グラフィカルレイアウトでうまく微調整ができない場合は、コードを使って微調整をするようにしましょう。各コードを編集する際は、下記の内容を参考にしてください。レイアウトを基準に配置したい場合は、下記の属性を「true」にする android:layout_alignParentTop　：　レイアウトの上端に配置する android:layout_alignParentBottoｍ　：　レイアウトの下端に配置する android:layout_alignParentLeft　：　レイアウトの左端に配置する android:layout_alignParentRight　：　レイアウトの右端に配置する android:layout_centerHorizontal　：　レイアウトの水平方向の中央に配置する android:layout_centerVertical　：　レイアウトの垂直方向の中央に配置する android:layout_centerInParent　：　レイアウトの中央に配置するパーツを基準に配置をしている場合は、下記の属性に基準としているパーツIDを指定する layout_below　：　指定したパーツの下に配置 layout_alignLeft　：　指定したパーツの左に配置 ayout_toRightOf　：　指定したパーツの右に配置基準としたパーツやレイアウトからの距離を指定する場合は、下記の属性に距離を指定する layout_marginTop　：　上の距離 layout_marginBottom　：　下の距離 layout_marginLeft　：　左側の距離 layout_marginRight　：　右側の距離（指定がない場合は、基準のパーツの位置と揃えて配置します）今回の記事は以上です。さらに他のレイアウトを試したい場合はTableLayoutの使い方も合わせてご覧ください。大石ゆかり RelativeLayoutはとても使う場面が多そうなレイアウトですね〜♪ 田島悠介そうだね。絶対的な位置関係だと一つパーツをずらした時に他のパーツも動かさないといけないから、使うととても便利だね。大石ゆかりはい！ [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。プログラミングを独学で学習していて、このように感じた経験はないでしょうか？・調べてもほしい情報が見つからない・独学のスキルが実際の業務で通用するのか不安・目標への学習プランがわからず、迷子になりそうテックアカデミーでは、このような

Androidアプリ開発

今さら聞けない！iPhoneアプリをApp Storeでリリースする方法【初心者向け】

Xcodeを使ってiPhoneアプリを開発し、シミュレーターでの確認と実機テストも終了したら、いよいよApp Storeでリリースしてみましょう。今回は初心者向けにiPhoneアプリのリリース手順を解説していきます。なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。目次本記事は下記の手順で紹介していきます。 Member Centerでの事前準備 Xcodeでの作業 iPhoneアプリをリリースするには、Member Centerで必要事項を登録してから、Xcodeで作業する必要があるので順番に紹介していきます。 Member Centerでの事前準備まずは事前の準備を行います。 Developer PortalのMember Centerにアクセスして、左カラムのProvisioning ProfilesからDistributionを選択します。新規作成になりますので、画面右上の「+」をクリックします。表示された画面で「Distribution」の「App Store」を選択してContinueをクリックします。 App IDで配布するアプリを選択して、Continueをクリックします。さらにiOS Distuributionとして登録してあるユーザー（自分）を選択して、Continueをクリックします。登録方法は、iPhone(iOS)アプリを実機でテストする方法でも紹介しています。ここでProfile Nameを決めます。一意であれば何でも良いのですが、今回はわかりやすようにApp ID_distributionとしました。入力したらGenerateをクリックします。 Provisioning Profileが生成されますので、Downloadをクリックしてファイルをダウロードします。ダウンロードしたフィアルはダブルクリックしてXcodeに取り込みます。再びMember Centerを開いて、今度は「iTunes Connect」を選択します。 iTunes Connectをクリックして、サインインすると次の画面が表示されるので、「Manage Yoour Apps」をクリックします。この画面では左上の「Add New App」をクリックします。なお、過去にApp Storeに提出したアプリがあれば一覧が表示されています。次に表示されるApp Typeの画面では「iOS App」を選択します。 App Informationで､言語とApp Storeに表示される名前を入力します。 Bundle IDはApp IDを作成した時のものを選択して、Continueをクリックしてください。続いて、いつからアプリを利用できるか目安を入力してください。この日付に未来の日付を入れるとアプリの審査（Review）が遅くなる傾向にあります。さらに「Price Tier」でアプリの価格帯を決めます。Tierというわかりにくい単位ですが、1Tierが約100円と考えて選択してください。 Tierを決定すると各国の通貨でいくらになるかが表示されます。 Continueをクリックするとアプリの情報を入力する画面に遷移します。 Copyrightには個人の方はご自分のお名前を、法人の方は企業名を入力してください。 Categoryでは、アプリをApp Storeのどのカテゴリに表示するかを決めます。Primary Categoryは必須ですが、Secondory Categoryはオプションです。 Apple Content Descriptionsでは、暴力的でないか等のいくつかの質問があるので正確に答えます。 MetadataのDescriptionにはApp Storeに表示されるアプリの説明文を入力してください。Keywordsには検索で見つけて欲しいキーワードを「,」で区切って入力します。また、Support URLは必須となります。このページはアプリの審査時に存在していないと審査中断になりますので用意しておきましょう。 Contact Informationには自分の名前・姓・連絡先のメールアドレス・電話番号（日本は+81-市外局番先頭の0を取ったもの-局番-番号）を入力します。 Review Notesにはレビュアー（審査する人）に伝えたいことがあれば記入します。ここに記述した内容はApp Storeには表示されません。また、ログインを必要とするアプリの場合は、レビュアーが利用可能なデモアカウントを用意する必要がありますので、そのアカウントを「Demo Account Information」に入力します。 Uploadsでは、Large App Icon（1024pixel×1024pixel）と3.5-inchのスクリーンショットと4-inchのスクリーンショットを掲載します。また、iPadでも使えるUniversalアプリの場合はiPadのスクリーンショットも掲載します。ここまでの全て入力が完了したらSaveをクリックします。これでアプリケーションレコードと呼ばれる、アプリを申請するための器が用意されたことになります。さらに、Ready to Upload Binaryをクリックして、そこで表示される画面で全ての設問に答えてContinueをクリックします。最後に審査に通ったら自動でApp Storeにリリースするかマニュアルでリリースするかの問いがあります。自動にする場合は「Automatically release」を選択してSaveをクリックしましょう。これで事前の準備は完了です。 [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中Xcodeでの作業既に実機検証が終わっていることが前提ですが、Provisioning ProfileをXcodeに取り込んでおきます。 XcodeのBuild SettingsタブのCode Signingセクションにある「Provisioning Profile」で先ほど作成したApp Store提出用のものを選択し、Code Signing

iPhoneアプリ開発

XcodeでiPhoneアプリのシミュレーターを使う方法【初心者向け】

iPhoneアプリを開発する際に使うXcodeですが、iPhoneのシミュレーターを使うこともできます。そこで今回はiOSシミュレーターの使い方を解説します。 iPhoneアプリを開発するときは、必ず動作確認が必要ですので覚えておきましょう。ちなみに、スマートフォンサイトを閲覧するときのシミュレーターとしても役立ちます。なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。 XcodeでiOSシュミレータを起動する iOSシミュレーターはXcodeから簡単に起動することができます。やり方は2つあります。1つは⌘＋RのXcodeのショートカットキーで開発中のアプリを実行する方法です。もう1つはXcodeのメニューから起動させる方法です。スクリーンショットにあるように、Xcodeを起動したら、「Xcode > Open Developer Tool >iOS Simulator」と選択すると起動できます。なお、iPhoneのシミュレーターはPCの解像度によってiPhoneの外枠が表示されないことがあります。より大きな解像度のディスプレイを使っている場合は外枠が表示されます。表示されなくても動作に問題はありませんのでご安心ください。作成中のアプリを確認する iOSシミュレーターの役割は、作成中のアプリの動作を確認することです。開発が一段落したらアプリを起動して、自分の思い通りに動作をするか確認しましょう。起動するとこのように開発したアプリが選べるので、クリックするだけです。このデモでは、開発しているアプリのアイコンをTechAcademyに変えてみました。アイコンの変更の仕方はiPhoneアプリのアイコンを変える方法の記事をご覧ください。アプリのアイコンをクリックすると、このようにアプリの動作を確認できるようになります。また、マウスでクリックすることも可能です。 [PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中Safariを起動する裏ワザという程ではありませんが、アプリの確認方法以外にも便利な点があります。それは、iPhoneのシミュレーターからWebブラウザのSafariを起動できるところです。 URLの入力にも対応しているので、ご自身のサイトがiPhoneで閲覧するとどのように見られるのかを確認することもできます。デバイスを切り替える iOSシミュレーターはデバイスを追加して、バージョンを変更することも可能です。 Xcodeの左上にあるボタンをクリックすると、このようにデバイスの変更が可能です。iPhoneのサイズで4インチ、3.5インチなどを選べる他、iPadもここから選ぶことができます。前述の通り、Safariも開けるのでWebブラウザでどように表示されるかの動作確認にも便利です。また、デバイスは追加することも可能です。上記画像の「More Simulators」をクリックするとこのような画面が表示されます。ここで候補が表示されますので、各シミュレーターの横にある下矢印のボタンをクリックするとダウンロードが開始されます。ダウンロードが完了すると、選択できるデバイスに選択肢として追加されます。今回の記事は以上です。簡単に使えてとても便利なので、ぜひ使いこなしてみてください。シミュレーターの使い方がわかったら、iPhone(iOS)アプリを実機でテストしてみましょう。 [お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。プログラミングを独学で学習していて、このように感じた経験はないでしょうか？・調べてもほしい情報が見つからない・独学のスキルが実際の業務で通用するのか不安・目標への学習プランがわからず、迷子になりそうテックアカデミーでは、このような

iPhoneアプリ開発

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

XcodeでiPhoneアプリにUIパーツを追加する方法【初心者向け】

目次

UIKitとは