Swift eLearning‎ > ‎

Chapter 02 Xcodeの使い方

プロジェクトエディタでよく使う項目
ナビゲータエリア(素材ファイルのインポート)
エディタエリア(アシスタントエディタとプレビュー)
インスペクタエリア
InterfaceBuilderとドキュメントアウトライン
AutolayoutとiOS画面サイズ
コンソール表示とデバッグ
IBActionとIBOutlet接続の方法

★Hello World!!
難しいことはさておいて、これからXcodeを使って「Hello World!!」アプリを作ってみます。
「Hello World!!」は、プログラマが新しい言語を学ぶときに最初に表示するお約束の儀式みたいな言葉です。
すべての基本は、ここから始まります。
作成するアプリは以下のようなものです。
1)iPhoneの画面にあるボタンをタップすると、画面上に「Hello World!!」と表示する
2)「Hello World!!」が表示されている状態で、ボタンをタップすると「Hello World!!」が消える
それでは、初めてのアプリ開発を始めましょう!

まずは、Mac(OSX)の標準機能である「Spotlight」を使って、Xcodeを起動します。
Spotlightは、Macの中にあるすべてのファイルやアプリケーションだけでなく、オンラインからも検索してくれる便利な機能です。

Spotlight起動
図)SpotlightからXcodeを起動する

Spotlight画面
図)Spotlightの検索画面

Xcodeを起動すると「Welcome to Xcode」が表示されます。
いわゆる「ようこそ画面」です。
「Create a new Xcode project」をタップすると、Xcodeのプロジェクトフォルダ作成画面が表示されます。
Welcome to Xcode画面
図)Welcome to Xcode画面


これから作成するアプリのタイプなどを決定していきます。
Xcodeでは、OSX(Macbookなど)のアプリ開発もできますが、今回はiOSを選択します。
すると、右側にテンプレートが表示されるので「Single View Application」を選択します。
テンプレートには他にもいくつがありますが、基本的には「Single View Application」ですべて対応可能です
テンプレート画面
図)アプリのテンプレートを選択する

プロジェクトの識別情報を入力していきます。
それぞれ、以下のようにしてください。
 Product Name MyFirstApp アプリの名前になります
 Organization Name ご自分の名前(半角英数字で) 開発者の名前になります
 Organization Identifier jp.Techool 所属組織
 Language Swift 使用するプログラム言語
 Device iPhone 動作するデバイスの種類
オプション画面
図)オプション入力画面

上記のオプション情報の入力が完了すると、プロジェクトの保存場所を選択する画面に移行します。
任意の場所へ保存してください。
保存が完了すると、Xcodeの基本画面が表示されます。
プロジェクト立ち上げ直後は、ナビゲータエリアで「MyFirstApp」が選択されているので「プロジェクトエディタ」が表示されています。
プロジェクトエディタ画面
図)Xcodeのプロジェクトエディタ画面

Xcodeの画面は、上記のように3つのペインで構成されています。
まずは、この仕組みを理解しましょう。
ナビゲータエリアにある「Main.Storyboard」を選択しましょう。(下図①)
すると、エディタエリアには「iPhoneの画面のようなもの」が表示されます。
この状態で、ドキュメントアウトラインの「View Controller」を選択(下図②)するとインスペクタエリアには、その詳細が表示されます。
ドキュメントアウトラインが表示されていない場合は、下図③のアイコンをタップしてください。
ストーリボード画像
図)ストーリボード画面

この「iPhoneの画面のようなもの」は、縦横のサイズ比こそ違いますが紛れもなく「iPhoneの画面」を表しています。
なぜ、縦横比が実際のiPhoneと異なっているかというと、iPhone5が登場して以降、iPhoneシリーズの画面サイズはバラエティ化しています。
そのため、開発工程においては抽象的に画面サイズを捉えることによって、今後も増えるであろう画面サイズの種類に対応していくという手法です。
このXcodeにおける「iPhoneの画面」をストーリボードといいます。
Xcodeでのアプリ開発は、ストーリボードに様々な部品(オブジェクト)を配置することで、画面を設計していきます。
この機能を「Interface Builder(インターフェイスビルダー)」と呼びます。

それでは、さっそくストーリボードにオブジェクトを配置しましょう。
iPhone画面に「Hello World!!」という文字列を表示するには、「UILabel」という部品(オブジェクト)を使います。
「UI...」とは「ユーザインターフェイス」のことで、ユーザがアプリを操作するために触れるすべての要素です(見た目から実際に触れるものまで)。
「UILabel」は、その名の通り「ラベル」なのでアプリの「見た目」を構成します。

iOSアプリ開発において、標準ユーザインターフェイスのオブジェクトはすべてXcodeの「オブジェクトライブラリ」に用意されています。
Xcode画面の右下、インスペクタエリアの下に注目してください。
オブジェクトライブラリがあります。
オブジェクトライブラリ
図)オブジェクトライブラリ

オブジェクトライブラリの中から「Label」を選択して、ストーリボードに配置しましょう。
オブジェクトは、ドラグ&ドロップで任意の位置に配置可能です。(以下、参考動画)
動画)UILabelをドラグ&ドロップで配置する

それでは、ストーリボードに配置したこのラベル(UILabel)の見た目を変更してみましょう。
ラベルを選択した状態で、インスペクタエリアに注目します。
インスペクタエリア上部にあるいくつかのタブから「アトリビュートインスペクタ」を選択してください。

インスペクタタブ
図)アトリビュートインスペクタのタブ

アトリビュートインスペクタには選択している「ラベルの情報(プロパティ)」が表示されています。
それぞのプロパティを以下のように編集してください。
 プロパティ 編集前 編集後
 Text Label 空欄
 Color Black 好きな色
 Font 17 任意のサイズ
 Alignment 左寄せ中央揃え 

ラベル編集
図)ラベルのアトリビュートインスペクタ

ストーリボードに配置したこのラベルには「Hello World!!」と表示することになっているので、サイズを調整しておきます。
ラベルを選択したときに表示される「◻︎」をドラグ&ドロップすると調整できます。(参考動画)
動画)オブジェクトのサイズ調整

つづいて、「Hello World!!」の表示・非表示を切り替える「ボタン(UIButtonオブジェクト)」をストーリボードに配置します。
ボタンもオブジェクトライブラリに用意されています。
ボタンオブジェクト
図)UIButtonのオブジェクト

ドラグ&ドロップでストーリボード上の任意の位置に配置したら、アトリビュートインスペクタを表示します。
Viewのプロパティを編集します。サイズもラベルと同じようにして調整すると良いでしょう。
 プロパティ 編集前 編集後
Background  Default 好きな色

ここまでの作業でラベルとボタンを配置したストーリボードが、以下の図のようになっているか確認してください。
ストーリボード
図)ラベルとボタンを配置したストーリボード

ここでストーリボードに配置された2つのオブジェクトはiPhone画面の中央に並んでいるように見えますが、実際にはそうではありません。
ストーリボードの画面サイズはあくまで抽象的なサイズなので、どんなデバイス画面サイズでもオブジェクトを画面中央に並べるには「制約」を使う必要があります。
「制約(Constraints)」とは、Xcodeの「Autolayout(オートレイアウト)」という機能の効果です。
今回は、2つのオブジェクトに対して「水平方向の中央に固定」する制約を付加します。
2つのオブジェクトを選択した状態で、Alignパネルを表示します。(図①、②)
そして「Horizontally in Container」の値を「Use Current Canvas Value 」に変更します。(図③)
その後、「Add 2 Constraints」をタップして変更を適用します。(図④)
ボタンとラベルに対して制約を付加するので、「Add 2 ...」となっています。

Autolayout_align
図)Alignパネルで制約を付加

以上で、見た目に関わる画面デザインの部分は完了です。
ここからは、プログラムを記述するための準備をしていきます。
ストーリボード上は2つオブジェクトを配置しましたが、プログラムには一切記述していません。
そこで、Interface Builderの機能をつかった直感的な操作で、プログラムにコードを入力します。
まずは、エディタエリアを「Assistant Editor」モードに切り替えます。
AssitantEditor
図)Assistant Editorを表示する

Assistant Editorは、エディタエリアの左側にストーリボード、右側にプログラムコードなどを同時に表示できるので、とても便利な機能です。
入力すべきコードは、2つのオブジェクト(ラベルとボタン)の情報です。
ラベルのコードを入力するには、ストーリボード上のラベルオブジェクトを「Controlキー」を押しながら選択します。
そして、エディタエリア右側のコード画面に向かってドラグします。
青いラインが伸びるので、「class ViewController: UIViewController {  」の次の行にドロップします。
表示されたパネルの「Name」に「myLabel」と入力します。(参考動画)
動画)ラベルをIBOutlet接続する

コード画面に「@IBOutlet weak var myLabel: UILabel!」と入力されたことを確認してください。
この操作を「IBOutlet接続」といいます。( IB  = Interface Builder)
つづいて、ボタンオブジェクトの情報をコードに入力します。
ラベルと同様に、「Controlキー」を押しながらコード画面にドラグします。
ただし、今度は最終行にある「 } 」の1行だけ上にドロップしてください。
表示されたパネルは以下の部分を変更します。(参考動画)
 Connection Action
 Name tapButton

動画)ボタンをIBAction接続する

ドロップした箇所に「 @IBAction func tapButton(sender: AnyObject) { [改行] }」が追加されたことを確認してください。
この操作は「IBAction接続」といいます。
Assistant Editorでの作業は以上です。
エディタエリアを元の状態に戻して、プログラムコードを表示します。
StandardEditor
図)Standard Editorに切り替える

エディタエリアには、ViewController.swiftのコードが表示されています。
さきほどAssistant Editorで編集した内容(下図、青字部分)が、コードに反映されていることを確認してください。
問題なければ、下図のオレンジ色の内容を追記してください。
コーディングに当たっては、大文字・小文字やスペースの有無にも気をつけてください。

 ViewController.swift
 class ViewController: UIViewController {
    @IBOutlet weak var myLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        myLabel.text = "Hello World!!"
        myLabel.hidden = true
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    

    @IBAction func tapButton(sender: AnyObject) {
        myLabel.hidden = !(myLabel.hidden)
    }

}

以上で、すべての作業は完了です。
最後に、Xcodeに搭載されているiPhoneシミュレータをつかって動作検証を行います。
シミュレータは、各種iPhoneが用意されているので任意の端末を選択できます。
ここでは、iPhone6で動作検証を行います。
シミュレータ選択パネル
図)iOSデバイスのシミュレータ

ビルド
図)ビルド

▶︎ボタンをタップすると、プログラム実行ファイルが生成(ビルド)されてシミュレータ上でアプリが起動します。
表示されたシミュレータ上のボタンをタップして、「Hello World!!」が表示・非表示になるか確認しましょう。(参考動画)
動作検証が完了したら、▶︎ボタンの横にある◼︎ボタンをタップしてシミュレータを終了しましょう。

動画)iPhoneシミュレータでの動作検証

Xcodeは、メニューバーから終了します。
作業内容は、自動的に随時保存がされています。
保存を任意のタイミングで実行したい場合は、「メニューバー > File > Save」を選択したください。
もしくは、キーボードから「⌘(コマンド)キー」+「Sキー」同時押しでも保存が実行できます。

Xcode終了
図)Xcodeのメニューバー

アプリが動かないとき!
まずは、コードの記述に間違いがないかをじっくり確認しましょう。
大文字と小文字の違いや、全角スペースが入っていいないかコードをサンプルコードと比べます。
それでもエラーが出てしまうときは、IBOutlet接続かIBAction接続がまちがっている可能性もあります。
ストーリボードを選択して選択して、ビューコントローラを選択します。(下図①、②)
コネクションインスペクタを表示して、正しく接続されているか確認しましょう。(下図③

コネクションインスペクタを確認する
図)コネクションインスペクタを表示する

問題なく接続されていれば、コネクションインスペクタは下図のようになっているはずです。
余計なオブジェクトと接続されている場合は、「×」印をタップしてコネクションを削除しましょう。

ビューコントローラのコネクションインスペクタ
図)ビューコントローラのコネクションインスペクタ


Comments