1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

(初心者向け)Swift3.0で初アプリ - 最初のアプリを作ってみる

Last updated at Posted at 2017-06-20

Swift3.0を使って簡単なiPhoneアプリを作ってみます

#1. Xcodeでアプリを作ってみます

  • Xcodeを起動し、「Create a new Xcode project」を選択します
    スクリーンショット 2017-06-20 10.35.39.png
  • 「Single View Application」を選び、「Next」を押します
    スクリーンショット 2017-06-20 10.36.13.png
  • 「Product Name」を適当に指定します
  • 「Team」のプルダウンメニューで、Apple Developer Programに登録したIDを選択します(Apple Developer Programに登録していないとこの後のステップでiPhoneにアプリをインストールできません)
  • 「Organization Name」は自分の名前などを指定します
  • 「Organization Identifier」は自分の社名を逆に読んだ文字列を指定するのが一般的です。たとえば"com.xxx"などになります
  • 「Language」は「Swift」を選択します
  • 「Device」は「iPhone」を選択します
  • 「Next」を押します
  • プロジェクトを保管するフォルダーを選択します
  • アプリが作成されました。下記のような画面が表示されます
    スクリーンショット 2017-06-20 10.42.35.png

#2. 画面を作ってみます

  • 画面左側のメニューから「Main.storyboard」を選択します。下記のような画面が表示されます
    スクリーンショット 2017-06-20 10.44.20.png
  • (18/11/02追記) Xcode10?から右下の入力欄が廃止?され表示されなくなっています。参照→【XCode】XCode10からの変更で、右下のアイツがいない
  • 画面右下の入力欄に"label"と入力すると、その上に「Label」が選択肢として表示されます
    スクリーンショット 2017-06-20 10.45.43.png
  • 表示された「Label」を選択し、画面中央のストーリーボードへドラッグ&ドロップします。ラベルが作成されます
    スクリーンショット 2017-06-20 10.47.21.png
  • このままではラベルの文字が小さくて見にくいので、画面右上のメニューからフォントのサイズを大きくします。またストーリーボード上のラベル領域が小さいのでドラッグして拡張し、文字列を変更する、中央に揃えるなどします
  • 画面の背景部分を選択し、右側のメニューから色のメニューを選択し色を設定します。色のメニューの最下部の「Other」を選択すると、任意の色を設定可能です

スクリーンショット 2017-06-20 10.53.29.png

#3. シミュレーターで確認します

  • Xcode画面左上のビルドターゲットとして"iPhone7"などが選択されていることを確認します

スクリーンショット 2017-06-21 10.11.36.png

  • [Command]+R(もしくは「▶」ボタン)を押してビルドを実行します。"Build Succeeded"のメッセージが表示されビルド(コンパイル)がうまくいったことがわかります。
  • Xcodeとは別にシミュレーターのプログラムが起動しているので、画面を切り替えてシミュレーターを表示(前画面)にします。ラベルに設定したとおり「こんにちは」と表示されていることを確認します

スクリーンショット 2017-06-21 10.18.38.png

#4. iPhoneで実行してみます

  • iPhoneをMacbookに接続します
  • Xcodeの画面左上のビルドターゲットから接続した自分のiPhoneを選択します。表示されるプルダウンの選択肢の一番上のほうにあります
  • [Command]+R(もしくは「▶」ボタン)を押してビルドを実行します。"Build Succeeded"のメッセージが表示されビルド(コンパイル)がうまくいったことがわかります。
  • iPhoneにアプリがインストールされ、画面が表示されることを確認します。
IMG_3586.PNG

次のステップへ

#関連ページ

1
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
1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?