0からはじめるiOSアプリ開発入門!Xcodeの導入からやさしく解説!



0からはじめるiOSアプリ開発入門!Xcodeの導入からやさしく解説!

今回はiOSアプリ開発に必須のツールであるXcodeの使い方を紹介しながら、実際にプロジェクトを作成して「Hello World」の文字を表示するアプリを0から作成してみます。

image

目次
  1. Xcodeとは
  2. Xcodeのインストールに必要なもの
  3. Xcodeのインストールと起動
  4. Xcodeを使ってスマフォアプリを作って見る
  5. 作ったアプリをシミュレータで動かして見る
  6. まとめ

Xcodeとは

Xcodeとは、Apple社が提供するMac OS X向けの統合開発環境になります。ソースコードの編集だけでなく、デバック機能やiOSシュミレーターを利用した端末での挙動確認などが行えます、。それ以外にもiPhoneアプリ開発に必要な作業を強力にサポートしてくれるツールとなっています。

Xcodeのインストールに必要なもの

  • Mac PC
  • Apple ID
  • ハードディスク容量 約 5 GB

Apple IDの登録がまだの方は、こちらから行えます。

Xcodeのインストールと起動

xcode-hero_2x

iTunesストアから Xcode をダウンロードします。

スクリーンショット 2015-04-27 17.17.39

Xcode ダウンロード

ダウンロードが完了し、インストールできたら Xcode を起動します。

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

起動すると、図1のようなWelcome to Xcodeと書かれた初期起動画面がでます。今回はアプリの新規作成ですので、「Create New Xcode Project」を選びます。

1 図1

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

2

図2

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

3

図3

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

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

5

図4

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

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

5

図5

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

6

図6

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

7

図7

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

6

図8

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

[swift]
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.

    }

[/swift]

文字を表示するクラスを追加するだけです。

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

9

図9

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

10

図10

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

以上で文字を表示するアプリの開発は完了です。

お探しの記事は見つかりませんでした

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

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

11

図11

ここでエラーが出た場合、デバックが必要です。エラーがなく無事に通過した場合、シミュレータが動作します。
シミュレータ上に図12のような文字が表示されました。これで完成です。

12

図12

まとめ

以上、今回はXcodeの使い方と簡単なスマフォアプリの作成を行いました。今回はコンピュータ言語については触れていませんが、Xcodeの操作自体は簡単ですので、Objextive-CやSwiftが扱えるのであれば、スマフォアプリの開発は難しくありません。これを参考にして皆さんもスマフォアプリの開発にチャレンジしてみましょう。

image

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp