LoginSignup
4
4

More than 5 years have passed since last update.

SwiftをXcodeで使ってみる

Last updated at Posted at 2015-05-14

Xcodeの使い方もままならないので、まずは基本準備から。
参考にしたURLは以下のサイト
Xcodeの使い方を基礎から学ぼう
Xcodeのストーリーボードを使う方法

Xcodeでswiftが使えるようにするために

  1. プロジェクトを作る

    今回は「Create a new Xcode project」を選択します
    スクリーンショット 2015-04-16 17.43.52.png

  2. アプリのテンプレートを選択

    今回は最もシンプルな「Single View Application」を選択
    他のテンプレートは最初から便利な機能が組み込まれているそうです。
    スクリーンショット 2015-04-23 17.43.16.png

  3. Languageを選択

    一番の肝!
    LanguageはSwiftを選択!!
    Product Nameは適当に日付をつけました。
    スクリーンショット 2015-04-23 17.58.16.png

  4. プロジェクトを保存する場所指定して「Create」

以上で最低限必要なファイルやフォルダが自動生成されて以下の様な画面がでます。
スクリーンショット 2015-04-23 18.05.40.png

準備は出来ました。
あとはスクリプトを書くだけ!!!
ですが、Xcodeは「iPhoneアプリの画面が簡単に作れる」ストーリーボード(Storyboard)という機能があるとのこと。
せっかくなので、ストーリーボードで作業をしてみます。

Xcodeで作業するための確認

画面の呼び名は以下のようによばれているようです。
・左側:ナビゲーターエリア
・下側:デバックエリア
・右側:ユーティリティエリア
・中央:エディタエリア
スクリーンショット 2015-04-28 14.31.39.png

画面右上、ツールバーにある四角いアイコン、青は表示、黒は非表示です。
クリックして中央のエディタエリアを広くできます。
スクリーンショット 2015-04-23 18.19.47.png

ナビゲータエリア「ViewController.swift」ファイルを選択すると
エディタエリア(中央)にソースコードが表示されます。
ViewController.swift:画面の制御。
スクリーンショット 2015-05-14 15.23.30.png

ナビゲータエリア「Main.storyboard」ファイルを選択すると
エディタエリア(中央)にメニューっぽいバーと四角のエリアが表示されます。
Main.storyboard:オブジェクトの配置や画面遷移の設定。
スクリーンショット 2015-05-14 15.27.37.png

ストーリーボードを使って作業してみる。

参考にしたURL
http://qiita.com/Kta-M/items/087b3cc4bca1fbf6c77a

1.Main.storyboardとViewController.swiftを並べる

右上の丸が重なったアイコンをクリックする
スクリーンショット 2015-05-14 15.33.10.png
すると、横に並んでくれます。
作業がしやすいようにデバックエリアは非表示にしました。
スクリーンショット 2015-05-14 15.38.40.png

2.ユーティリティエリアの下にある部品を選択しストーリーボードにドラックする
スクリーンショット 2015-05-14 15.49.22.png

3.Controlを押しながら部品をソースへドラッグする
そうするとラベルの変数名やボタンの関数名を設定するダイアログっぽいのが出てきます。
スクリーンショット 2015-05-14 15.55.01.png
適当に名前をつけて「Connect」を押すとソースに反映されます。
スクリーンショット 2015-05-14 16.04.33.png

Labelを例に見ると
ストーリーボードとソースがつながるとソースの左側に丸が出てきて中黒になってる。
ユーティリティエリアの上の→マークみたいなのが押されている状態だと、
リレーションマップみたいなのでつながっていることがわかります。
スクリーンショット 2015-05-14 16.10.08.pngスクリーンショット 2015-05-14 16.17.41.png

4.Buttonにアクションを加える
ストーリーボードのButtonを選択すると、ユーティリティエリアにアクションリストが表示されます。
アクションリストから今回は「Touchdown(押す)」のアクションの◯を選択し、ソースにドラック。
このとき、ソースに差し込む位置はButton変数宣言よりも下にないとおかしくなります。
関数名をつけて、「Connect」を押すとソースに反映されます。
スクリーンショット 2015-05-14 16.20.42.png
反映されるとユーティリティのところはこんなかんじになりました。
スクリーンショット 2015-05-14 16.28.00.png

5.ボタンが押された時の動作を書く
Labelの文言を変えてみるソースをかきます。
スクリーンショット 2015-05-14 16.32.40.png

6.ビルドして再生する
左上の再生ボタンを押すとビルドされてシミュレータが立ち上がります。
スクリーンショット 2015-05-14 16.34.46.png

もしかするとデバックを許可するようにダイアログが出てくるかもしれません。。

とりあえず、できあがり。
スクリーンショット 2015-05-14 16.39.33.png ー>スクリーンショット 2015-05-14 16.40.01.png

さて、swiftの言語の作法とXcodeの作法が全くちんぷんかんぷんなので、
これからじっくり調べていきます。
文法の参考に
http://qiita.com/chatii0079/items/33e74c1225e0ce6c103b

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4