更新日: 2017年09月26日
公開日: 2015年07月10日

アプリを作ってみよう！初心者のためのXcode使い方講座

iPhoneアプリは、Macのパソコンと統合開発環境であるXcodeさえあれば、開発できます。Xcodeの操作自体は簡単ですので、アップル社のネイティブ言語であるObjective-CかSwiftを扱えるのであれば、iPhoneアプリの開発は難しくありません。それではXcodeを使って実際にiPhoneアプリを作ってみましょう。

Xcodeを用意する
Xcodeを使ってスマフォアプリを作って見る
作ったアプリをシミュレータで動かして見る
まとめ

Xcodeを用意する

iOSで動作するネイティブアプリを開発するために必要なものは、アップル社のMacパソコンと、統合開発環境であるXcodeです。この２つがなければ開発できません。したがって、まずMacのパソコンを準備し、次にアップルストアサイトからXcodeをダウンロードしてください。Xcodeのインストール方法を知りたい方は、こちらの記事をご参照ください。

初心者のためのXcodeインストールと環境構築方法

Xcodeを使ってスマフォアプリを作って見る

まずデスクトップにあるXcodeをクリックし立ち上げます。そうすると図１のようなWelcome to Xcodeと書かれた初期起動画面がでます。今回はアプリの新規作成ですので、「Create New Xcode Project」を選びます。

図1

次に図２のようなテンプレート画面が出ますので、iOSのアプリケーションを選び、テンプレートとして標準の「Single View Application」を選択します。

図2

そうすると図３のようなアプリの基本情報入力画面が出ます。

図3

Product Nameにアプリの名称を、Organizetion Nameに会社名を、Organizetion Identifierに識別ＩＤを入力します。なお識別ＩＤはアップロストアで販売する場合、重要な情報になりますが、ここでは省略します。プログラムのコーディングはアップル社のネイティブ言語であるObjectiv-CとSwiftのどちらでもできますが、今回はSwiftでコーディングします。

Nextボタンをクリックするとプロジェクトが自動生成されます（図４）。

図4

画面の構成は、上部が基本操作を配置しているツールバー、左側がファイルを編集するナビゲート、中央がプログラムをコーディングするエディター、右側が画面の部品を設定するユーティリティです。

画面左側にあるナビゲートの中からデリゲートを選択すると、図５のデリゲートのソースコードが表示されます。

図5

次にナビゲートの中からヴューコントローラーを選択すると、図６のヴューコントローラーのソースコードが表示されます。

図6

さらにナビゲートの中からメインストリーボードを選択すると、図７の画面レイアウトが表示されます。

図7

以上で準備ができましたので、それではアプリの開発に取り組んでみましょう。今回は、文字を表示するアプリを作ってみます。

図8

まず、図８のようにナビゲートの中からヴューコントローラーを選択してのソースコードを表示させ、エディターに以下のソースコードを記述します。


import UIKit

//ここから
class HelloWorld: UIView {

    override func drawRect(rect: CGRect) {

        let attrs = [NSFontAttributeName: UIFont.systemFontOfSize(24)]

        //　表示する文字を入力する

        let str = "Hello, World!"

        let nsstr = str as NSString

        nsstr.drawAtPoint(CGPointMake(100, 100), withAttributes: attrs)

    }

}

//ここまでを追加

class ViewController: UIViewController {

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view, typically from a nib.

    }

文字を表示するクラスを追加するだけです。
次に、図９のようにナビゲートの中からデリゲートを選択してデリゲートのソースコードを表示させます。プログラムによっては、デリゲートエディタにソースコードを記述しますが、今回は修正不要です。

図9

最後に、図１０のようにナビゲートの中からMain.Storyboardを選択し画面レイアウトを表示させ、画面の部品にHelloWorldを選択します。

図10

次に右上に「show the identity inspector」という四角い青いボタンがありますので押すと、上にクラスという項目が表示されますので、クラスから「Hello World」を選択します。これは画面が呼ばれた時に、ビューコントローラに記述したHelloWorldというクラスを読みだすという意味です。
以上で文字を表示するアプリの開発は完了です。

作ったアプリをシミュレータで動かして見る

それでは、作った文字を表示するアプリをＭａｃパソコンのシミュレータで動作確認してみます。
まず対象となるiPhoneの機種を選びますが、画面のサイズが違うだけでので、どれでもかまいません。
なお、スマフォを所有しているならば、実機と接続するとスマフォ上で動作確認することもできます。
対象となる機種を選んだら、次に左上の矢印ボタンを押すと、ビルドが始まります（図１１）。