vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

iOSアプリ開発超入門!Xcodeの導入からSwiftを使ったHello Worldまで

      2017/01/31

LINEで送る
Pocket

start-ios-swift
以前はiOSアプリ開発に「Objective-C」が使われていましたが、現在は2014年にAppleから発表された「Swift」が新しく使えるようになりました。

今回はSwift言語を使って「Hello World」の文字を表示するアプリを1から作成してみます。

iOSアプリを作成するにはXcodeが必要ですので、まずはXcodeをインストールしていきましょう。

スポンサーリンク

Xcodeのインストールと起動

App Storeを開きます。

start-swift

App Store内右上の検索から「xcode」と入力。Xcodeが表示されるのでインストールします。

start-swift2

インストールが完了したら、Finderから「アプリケーション」→「Xcode.app」でXcodeを起動します。

start-swift3

ライセンスの同意画面が表示されたら「Agree」をクリック、ユーザログイン画面が表示されたらパスワードを入力して「OK」を押して下さい。

下記画面から「Create a new Xcode project」を選択。

start-swift4

次回以降は、Xcode上で「File」→「New」→「Project」から新規Projectを作成できるので覚えておきましょう。

start-swift5

Xcodeが立ち上がり、Project作成ダイアログが表示されます。「Single View Application」を選択して「Next」をクリック。

start-swift6

作成するProjectの情報を入力します。まずは下記の通りに入力してみましょう。

start-swift7

  • Product Name
  • アプリの名前を入力

  • Organization Name
  • 組織名を入力。空欄でもOK

  • Organization Identifier
  • その組織が持っているドメインを入力。「sample.net」を持っていた場合は「net.sample」になる

  • Language
  • 利用する言語を選択

  • Devices
  • 利用するデバイスを選択

「Use Core Data」は今回使用しないのでチェックを外した状態でOKです。「Next」をクリックします。

次にプロジェクトを保存する場所を選択します。ご自身の管理しやすい場所を選択しましょう。今回は「書類」フォルダの中に「iOSApps」フォルダを作成してそこに保存しました。

start-swift8

これで新しいプロジェクトが作成されました。

ちなみに画面下部の「Create Git repository」にチェックがついていると、アプリのバージョンを管理する「Git」というアプリが設定されます。ここではあまり意識せずに、チェックを入れておけばOKです。

言語を日本語に設定

デフォルトの言語を日本語に変更しておきましょう。画面左部のナビゲータエリアにある「Supporting Files」の左の「▼」をクリックして、表示された「Info.plist」を選択します。

start-swift9

中央のエディタエリアが切り替わるので、「Localization native development region」のValueを「Japan」に変更します。

start-swift10

これでアプリで利用する言語を日本語に変更できました。

コンソールにHelloWorldを表示

ではSwift言語を使って「Hello World」と表示させてみましょう。

ナビゲータエリアにある「ViewController.swift」を選択します。中央のエディタエリアにある「viewDidLoad()」中に下記コードを追加しましょう。その後、左上にある「スタートボタン」をクリックします。

println("Hello World");

start-swift11

シミュレーターが立ち上がり、プログラムが実行されます。エディタエリアの下にあるデバッグ(コンソール)エリアに「Hello World」と表示されれば成功です。

start-swift12

デバッグエリアには表示されましたが、シミュレーターの画面は真っ白の状態でした。次はシミュレーター上に「Hello World」と表示できるようにアプリを変更していきましょう。

シミュレーターにHelloWorldを表示

シミュレーター上にHello Worldを表示させてみましょう。

「Main.storyboad」を選択するとエディタエリアに「View Controller」が表示されます。どこでもいいのでView Controllerの中をクリックしておきましょう。

start-swift13

次に、右側のユーティリティエリアから「◎」に似た形のマークを選択し、その下から「Label」を探します。見つけたらLabelをView Controllerの中にドラッグ&ドロップしましょう。

start-swift14

View Controllerにラベルを追加できました。しかし、位置がきちんと定まっていないので、どのデバイスでも画面中央にラベルを表示できるように設定していきます。

ラベルを選択した状態で、エディタエリア右下にある長方形が2つ重なったマークをクリックします。

start-swift15

次のように「Horizontal Center in Container」「Vertical Center in Container」にチェックを入れ、「Add 2 Constraints」をクリック。これでラベルが画面中央に固定される制約をつけることができます。

start-swift16

制約はすぐに適応されないので、エディタエリア右下の三角形のマークから「Update Frames」を選択します。

start-swift17

ラベルが画面中央に移動し、黄色い線が青く変化しました。

start-swift18

ラベルをダブルクリックして「Label」を「Hello World」に書き換えます。

start-swift19

実行ボタンをクリック。

start-swift20

シミュレーター上に「Hello World」と表示されれば成功です。

start-swift21

まとめ

Xcodeをインストールして最初のプロジェクトを作成しました。また、「HelloWorld」を「こんにちは」に変更してもちゃんと表示されますので試してみてください。

最初のうちは制約周りに難しさを感じますが、解像度が違うデバイスでも簡単にレイアウトを保てる便利な設定ですので、ここで慣れておきましょう。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
どんな言語でもとりあえず「HelloWorld」はしておきたいですね。僕もiOSアプリ開発初心者なので、一緒に頑張りましょう。

 - iOSアプリ開発, Swift

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

[iOS開発] swiftでFontAwesomeKitライブラリを使う

こんにちは、okutani(@okutani_t)です。 iOSアプリを作成する …

[Xcode6.3] CocoaPodsでAlamofire-SwiftyJSONを導入 (エラー対処あり)

CocoaPodsがv0.36.0より、Swiftライブラリに対応しています。 …

swiftで簡単にアニメーションを実装できるSpringライブラリ使い方

こんにちは、okutaniです。今回はアニメーションを手軽に実装する「Sprin …

[iOS開発] Xcode7から無料で実機デバッグができるようになったよ!

こんにちは、okutani(@okutani_t)です。Xcode7から無料で実 …

複数バージョンのXcodeを入れる方法。ダウングレードは不要です

こんにちは、okutani(@okutani_t)です。Xcodeは1つのMac …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。