【Swift/Xcode超入門Part2】HelloWorldと表示させるだけのアプリを開発しよう。~Xcodeの画面構成把握~

 

サトリク

簡単なアプリを作成してみましょう!

確認済動作環境

item Version
Swift 5.2.4
Xcode 11.6

バージョンの確認方法

この講座の完成イメージ

アプリを起動すると、画面に「HelloWorld」と表示します。

ただそれだけの簡単なアプリです。

アプリ開発手順

フォルダを作成

これから、このサイトで作っていくプロジェクトをいれるフォルダーを作りましょう。

今回は、デスクトップ(任意)に作ります。

STEP.1
新規フォルダを作成

デスクトップで右クリックして新規フォルダを作成しましょう

STEP.2
名前を変更

名前は、Practiceにしましょう。

完了
これからこのサイトの入門講座でプロジェクトを作るときはこの中に作っていきましょう!

プロジェクトを作成

STEP.1
Xcodeを起動

下のDockからXcodeを起動しましょう。

STEP.2
新規作成

今回は、新しくプロジェクトを作成するので、真ん中のCreate a new Xcode projectをクリックしましょう

Get started with a playground

Playgroundとは、「遊び場」という意味で、Swiftのコードを簡単に書いて試してみるときに使います。

基本つかわないです。

Create a new Xcode project

新規のプロジェクトを作成します。

Clone an existing project

gitを使って、他の方が作ったプロジェクトをここで開くことができます。こちらも初心者の方は基本使いません。

STEP.3
テンプレートを選択

ここでは、プロジェクトのテンプレートを選んでいます。

今回は、一番シンプルなSingle View Appを使います。

①iOSを選択

②Single View Appを選択

③Nextをクリック

STEP.4
プロジェクトの設定

項目名 説明 今回の設定
①Priduct Name プロジェクトの名前です。なるべく英語でつけましょう。 HelloWorld
②Team 登録済みのAppleIDを選択します。初めて登録する方は、Add accountを押して、AppleIDを追加してください。 任意
③Organization Name 会社名、組織名を入力します。 任意
④Organization Identifier 一意なIDをつける必要があります。通常、ドメイン表記を逆にした記述を入力します。satoriku.comならcom.satorikuなど。 任意
⑤Bundle Identifier これがアプリのIDになります。
⑥Language プログラミング言語を選択できます。SwiftとObjective-Cがありますが、これからObjective-Cを選択することはないでしょう。 Swift
⑦User Interface レイアウトをGUIで作るか、CUIで作るかを選択します。現在は、Storyboardが多いですが、これからSwiftUIが増えてきそうです。 Storyboard
⑧Use Core Data,Include Unit tests, Include UI Tests ここでは、高度な開発で必要になるデータベースやテストコードを使うときにチェックを入れます。 チェックなし

上記の表の通り、入力したらNextをクリック

STEP.5
プロジェクトの保存

プロジェクトの保存先を選択します。

①デスクトップ(Desktop)を選択

Practiceを選択

③上のところがPracticeになっていることを確認できたら、Createをクリック

完了

これでプロジェクトが作成できました!

Labelを配置

Labelとは、画面に表示されるテキストのことです。

STEP.1
Main.storyboardを選択

左のメニューからMain.storyboardを選択しましょう。

これは、Mainという名前のstoryboardファイルです。storyoboardファイルは、主にアプリのレイアウトを作成するファイルです。

STEP.2
Labalを設置

①右上の「+」ボタンをクリック

②Labelを画面の中央にドラッグ&ドロップ

STEP.3
実行

では、Labelうまく配置されているか確認しましょう。

左上の再生ボタンかcommand + rで実行してみましょう。

STEP.4
確認

このiPhoneみたいなのを、シミュレーターといいます。

レイアウトや機能が動いているか確認するためにあります。

Labelが配置されているか、確認しましょう。

このように、Labelがだいたい真ん中らへんに表示されていたら成功です。

完了

Labelを真ん中に配置

Xcode上では、真ん中に配置しているのに、シミュレータ上では、右下に寄ってしまいます。

理由は、Xcode上では、iPhone11のレイアウトで、シミュレータは、iPhoneSE2なので画面の大きさが違うからです。

では、iPhone11、iPhoneSE両方で、真ん中に配置されるようにしましょう。

STEP.1
AutoLayoutを設定

①Labelを選択

をクリック

③「Horizontally in Container」と「Vertically in Container」にチェックをいれる

④Add 2 Constraintsをクリック

これで、Labelはどの端末でも真ん中に表示されるようになりました。

STEP.2
もう一度実行

左上の再生ボタンか、command + rで実行しましょう。

このようになっていれば成功です。

STEP.3
iPhone11でも実行

左上のiPhone SE(2nd generation)のところをiPhone11に変更しましょう。

 変更したらもう一度右上の再生ボタンをクリックするか、command + rで実行しましょう。

このように表示されたら成功です。

完了

LabelをHelloWorldに変更

次は、LabelをHelloWorldに変更しましょう。

STEP.1
Labelを編集

①Labelを選択

(Show the Attribute inspector)を選択

③TextをHelloWorldに変更

④FontをSystem 25.0に変更

⑤中央揃えに変更

STEP.2
実行

左上の再生ボタンか、command + rで実行しましょう

このようになっていれば成功です。

完了

これで、世界に挨拶するだけのアプリが完成しました!

もし、うまくいかなかったら、プロジェクト作成からやり直してみましょう。 大抵、どっかで間違った設定をしてしまってる可能性があります。

まとめ

世界に挨拶するだけのアプリを作成できましたでしょうか?

わからない部分があれば、TwitterのDMか、コメントで質問して貰えばすぐ返します。(コメントはレス遅いかも)

次の講座では、ボタンを使ったアプリを開発していきます。

コメントを残す