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


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

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

image

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

Xcodeを用意する

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

初心者のための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のようにナビゲートの中からヴューコントローラーを選択してのソースコードを表示させ、エディターに以下のソースコードを記述します。


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

9

図9

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

10

図10

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

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

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

11

図11

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

12

図12

まとめ

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

プログラミングを勉強している方によく読まれています!

image


関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp