「アプリはアプリエンジニアに任せればええや」
というスタンスで逃げ切ろうと思っていた私ですが、
「１人でアプリからweb、インフラまで出来たらかっこいいじゃん」
という中二病モード入ったので、アプリの勉強をはじめました。
まずは、お決まりの「Hello World」を画面に表示するまでを勉強してみたので、本日は
「swiftとXcodeを使って、iphoneシミュレーターにHello Worldを表示する」
方法を紹介します！
Xcodeでプロジェクトを作成する
MacにXcodeをインストールして、起動。
真ん中の「Create a new Xcode project」を選択すると、以下の画面に遷移するので、「Single View App」を選択してプロジェクトを作成しましょう。(※プロジェクト名等は適当で大丈夫です)
以上で、swiftのプロジェクトが作成できました！
Main.storyboardにLabel(文字)を設置する
プロジェクトの作成が完了したら、左側のサイドバーから「Main.storyboard」を選択しましょう。
選択すると、
このような画面になります。
この画面がアプリを開いたときに表示されるページで、ここに様々なUIパーツを設置してアプリを制作していきます。
今回は、「Hello World」という文字を表示することがゴールなので、LabelというUIパーツを設置していきます。
右下の二重丸のマーク(Object library)から、「Label」を選択して、ドラッグ・アンド・ドロップでUI画面にパーツを設置します。
設置すると、以下のような画面になります。
文字を編集する
Labelという文字をUIに表示することは出来ました。最後に、このLabelという文字を「Hello World」に変更しましょう。
「Main.storyboard」を選択した状態で、右上の○が２つ重なっているアイコン(Show the assistant editor)を選択すると、以下の画面になります。
この状態で、左側のLabelパーツを「control」ボタンを押しながら、右側のソース部分にドラッグ・アンド・ドロップ。
すると、
このような吹き出しがでるので、上記のような設定でConnectを選択。
|
1 |
@IBOutlet weak var helloWorldLabel: UILabel! |
というコードが自動挿入されます。
これで、UIの表示をソースで変更できるようになりました！
最後に、Labelという文言をHello Worldに変更しましょう。viewDidLoad()関数の中に
「helloWorldLabel.text = “Hello World”」
というソースを追加します。
これで、Labelという文字がHello Worldに変更されます。
※viewDidLoad()関数はアプリ起動時に一度だけ実行される関数です。
全体のソースは以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. helloWorldLabel.text = "Hello World" } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } @IBOutlet weak var helloWorldLabel: UILabel! } |
simulatorに表示する
これで完成しました！
自分で作ったプロダクトをSimulatorで確認しましょう。
左上の「再生マーク」を押すとsimulatorが起動され、以下のようにiphone画面に「Hello World」の文言が！！
※「Hel…」のように文字が省略されてしまう方は、XcodeのLabelの横幅をぐいっと引っ張って広げてください。
以上で、swiftを使ってiosアプリでHello Worldを表示するチュートリアルは終了です。
「iphoneアプリってWebアプリと違ってめんどくさそう」
というイメージだったのですが、意外とサクサク進められて楽しかったです！
よいアプリライフを♪
