アプリ開発したい人にオススメのプログラミングスクール

【Swift5/Xcode】超絶簡単なアプリを作ってみよう!『Step3』

サトリク

この記事では、超初心者向けの記事です。

超初心者でもわかりやすいように手順を解説していきます。

 

動作環境

item Version
Swift 5.1.3
Xcode 11.3

バージョンの確認方法

超絶簡単なアプリのイメージ

サトリク

超絶簡単です。

Buttonを押したら、上部のLabelってとこがHelloWorldになるというアプリです。

超絶簡単なアプリ制作手順

まずは、プロジェクトを作成します。

プロジェクト作成

STEP.1
Xcode起動しプロジェクト作成

Xcode起動

Xcodeを起動し、「Create a new Xcode project」を選択

STEP.2
テンプレート選択

Single View Appを選択する画像

①「Single View App」を選択

②「Next」をクリック

ここでは、テンプレートを選択します。

今回は、とにかく簡単なアプリですので、まっさらな状態のSingle View Appを選択します。

STEP.3
プロジェクトの基本設定

プロジェクト設定の画像

①「Product Name」にSampleAppと入力

②「User Interface」でStoryboardを選択

(そのほかは任意です。)

③「Next」をクリック

STEP.4
プロジェクトファイルの保存先選択

保存先を指定して、「Create」をクリック

(保存先はどこでもいいです。)

完了
これで、プロジェクトの作成は完了です。

storyboard(画面レイアウト)を作成

次は、ストーリーボード(画面レイアウト)を整えます。

STEP.1
Main.storyboardを選択

左側のメニューから、「Main.storyboard」を選択

STEP.2
Labelを配置

①右上のプラスボタンか、command + shift + Lを押して、Objectウィンドウを表示

Labelをボードにドラッグ&ドロップ

Labelというのは、文字列を表示するためのオブジェクトです。

STEP.3
Buttonを配置

①右上のプラスボタンか、command + shift + Lを押して、Objectウィンドウを表示

Buttonをボードにドラッグ&ドロップ

Buttonというのはその名の通り、押したら何かしらのアクションが起こるボタンです。

STEP.4
Labelの範囲を大きくする

選択しやすいように、Labelの範囲を広げておきましょう。

STEP.5
LabelのFontサイズを大きくする

Labelを選択

②「Font」をsystem 30.0にし、「Alignment」を中央揃えにする

STEP.6
Buttonの範囲を大きくする

選択しやすいように、Buttonの範囲を広げておきましょう。

STEP.7
ButtonのFontサイズを大きくする

Buttonを選択

②「Font」をSystem 30.0に変更

STEP.8
Labelの位置を決める

Labelを選択

を選択

③上:100、左:0、右:0に設定し、赤色の線にする

Add 3 Consrraintsをクリック

ここでは、Labelの位置を的確に決めます。今回は、Labelの上の空間が100で、左右が0で固定します。

これをすることによって、iPhoneの様々なサイズに対応できます。

STEP.8
Buttonの位置を決める

Buttonを選択

を選択

③「Horizontally in Constraints」と「Vertically in Constraints」にチェックを入れ、

 「Add 2 Constraints」をクリック

完了

ストーリーボード(画面レイアウト)の設定はこれで終わりです。

コードと紐付け

次は、コードとstoryboardのオブジェクトを紐付けをします。

STEP.1
画面を2分割

command + control + option + enterで画面を2分割しましょう

基本的に画面はstoryboardファイルとswiftファイルの2つのファイルで作成します。

先ほどのショートカットキーを押すと、このストーリーボードに紐づくswiftファイルと2画面に分割します。

STEP.2
Labelの紐付け

Labelを選択し、controlを押しながら、11行目と12行目の間にドラッグ&ドロップしましょう。

Nameにlabelと入力し、「Connect」をクリック

これで、Labelの紐付けが完了しました。

STEP.3
Buttonの紐付け

Buttonを選択し、controlを押しながら、18行目と19行目の間にドラッグ&ドロップしましょう。

Nameにbtnと入力し、「Connect」をクリック

これで、Buttonの紐付けも完了しました。

完了

コーディング

Buttonを押した時に、Labelの文字列を変更する処理を書きます。

以下のように記述してみてください。

シミュレーター起動

command + rを押してシミュレーターを起動しましょう。

サトリク

おそらくうまくできたはずです!

できなかったら何かが違うので、繰り返しやって慣れましょう!

 

コメントを残す

メールアドレスが公開されることはありません。