サトリクのこだわりのモノ紹介

超絶簡単なアプリを作成してみよう【Swift5/Xcode】『Step4』

超簡単なアプリを作成してXcodeに慣れよう!

前回の講座で作成したプロジェクト『practice』で超簡単なアプリを作成しようと思います。

サトリク

こんな感じのを作成します

進むボタンを押したら次の画面に遷移し、戻るボタンを押したら前の画面に戻るアプリ

単純で簡単なアプリですが、基本操作を覚えるにはこのくらいのアプリでちょうどいいです。

では早速作成していきましょう

超簡単なアプリ作成手順

手順1:画面とボタンを配置しよう!

STEP.1
Main.storyboardを選択

画面1はあらかじめ作成されているので、まずは、画面2を作成しましょう。

Main.storyboardを選択しましょう。

項目がない場合は、以下の2つの事象が考えられます。

事象①:ナビゲーターエリアが非表示になっている場合

解決方法command + 1でナビゲーターエリアを表示する。

事象②:プロジェクトの作成時にstoryboardではなく、SwiftUIを選択してしまった場合

解決方法:プロジェクトを作成し直す。

STEP.2
View Controllerを配置

①右上の+ボタンを押し、Objectsウィンドウを表示します。

ショートカットキーでObjectsウィンドウを表示するなら、

command + shift + Lだぜ!

コマンドマン

②ViewContorollerを見つけたら上記の画像のようにドラッグ&ドロップしましょう

こんな感じになっていれば成功です。

STEP.3
「進む」ボタンを配置

先ほどと同じ手順で、次はボタンを配置しましょう。

ボタンを配置したら、ボタン名を「進む」に変更しましょう

buttonをダブルクリックすると名前を変更できます。

STEP.4
画面1へのボタンを配置

今度は、画面2にボタンを配置します。

もう一回同じ手順で、配置してもいいのですが、それじゃめんどくさいので、先ほど配置した進むボタンを画面2に複製しましょう。

やり方は簡単で、進むボタンにカーソルを合わせて、optionを押しながら画面2にドラッグ&ドロップするだけです。

画面2にボタンが配置されたら、名前を「戻る」に変更しましょう。

STEP.5
ボタンの文字の大きさを変更

ボタンが少し小さいので、ボタンの大きさを大きくしましょう。

以下の作業で、画面1、画面2のボタンの大きさを変更しましょう。

①ボタンをクリックし、選択します。

(Show the attributes inspector)を選択

③Fontの「System 15.0」を「System 40.0」に変更

完了

こんな感じに、2つの画面にボタンが配置されたら成功!

サトリク

次は、ボタンが押されたら画面繊維するようにしてみましょう!

手順2:画面繊維させよう!

サトリク

画面繊維は、基本中の基本なので、しっかりと覚えておきましょう。

STEP.1
画面1から画面2へ繊維

まずは、画面1から画面2へ繊維するプログラムを作ります。

やり方は簡単です。

進むボタンにカーソルを合わせてcontrolを押しながら画面2にドラッグ&ドロップします。

 

そうすると、左のようなウィンドウが出てきます。ここでは、Present Modallyを選択しましょう。

画面と画面の間にこのような矢印ができていたら成功です。

この矢印は、segue(セグエ)と言います。Xcodeではよく出てくる用語なのでしっかりと覚えましょう。

STEP.2
実行して確認

しっかりと画面繊維されているか確認しましょう。

左側の実行端末がiPhoneになっていることを確認し、再生ボタンを押しましょう。

ちなみにショートカットキーで実行するなら、command + rだぜ!

コマンドマン

実行すると、シュミレーター(Simulator)が開くきます。

起動に少し時間が掛かるので落ち着いて待ちましょう。

進むボタンを押すと画面2に切り替わることを確認してください。

今の状態だと、戻るボタンは何も反応しません。

STEP.3
画面2から画面1へ繊維のプログラムファイル作成

次は、戻るボタンを押すと画面1に戻るようにします。

まずは、戻るボタンようのプログラムファイルを用意します。

左上バーのFile→New→File…を選択しましょう。

ショートカットキーでやるなら、command + nだぜ!

コマンドマン

次に、ファイルのテンプレを選択します。

今回は、Cocoa Touch Classを選択してNextをクリックしましょう。

次は、クラスの名前をつけます。今回は、戻るボタンのクラスなので、>BackViewControllerという名前にします。

続いて、ファイルを作成する場所を選択します。

プロジェクトがpracticeになっていることを確認し、Nextをクリックしましょう。

左のように、BackViewControllerができてれば成功

STEP.4
storyboardとViewControllerを連携

作成した画面(画面2)と、作成したファイル(BackViewController)を連携させます。

構造としては、1つの画面に1つのファイルがあるイメージです。

サトリク

現在の構造としてはこんな感じです。

画面1は、最初からViewControllerに連携されています。

しかし、今回作成した画面2はまだファイルに連携されていないので、自分で連携させないといけません。

やり方は簡単で、Main.storyboardを選択し、画面2のViewControllerを選択し、classをBackViewControllerにするだけです。

サトリク

これで連携されました!

STEP.5
戻るボタンを押した時の繊維

次は、先ほど作成したファイルに戻るボタンを押された時、画面1に戻る命令をします。

画面が狭いので、見やすくするために、一旦他のウィンドウを非表示にします。

右上にこのようなウィンドウを表示非表示できるボタンがあります。一旦ここを全て白色(非表示)にしておきましょう。

この作業はショートカットキーでやったほうが早いぜ!

コマンドマン

command + 0で表示切り替え

:command + shift + yで表示切り替え

:command + option + 0で表示切り替え

僕は、1つのファイルで集中してコードを書くときは、command + 0、command + shift + y、command + option + 0で一瞬で非表示にして書きます。

覚えておいたほうが絶対いいショートカットキーの1つですね。

画面2のバーを選択し、command + option + controlを押しながらenterを押します。

そうすると以下の画像のように、右側にコードの画面が出てきます。

しかし、表示したいのは、このファイルではなく先ほど作成したBackViewControllerなので、コードをBackViewControllerに切り替えます。

右上の「<」を押してBacViewControllerを表示させましょう。

続いて、ボタンとファイルを連携します。

戻るボタンにカーソルを合わせて、controlを押しながら17行目と18行目の間にドラッグ&ドロップします。

そうすると、小さなウィンドウが立ち上がるので、NameをbackBtnと記入してConnectを押します。

Connectを押すと、ファイルにこのようなコードが追加されます。

BackViewController変更前

このコードを以下のように変更しましょう。

BackViewController変更後

このように記述したら完成です!

実行してみましょう。

STEP.5
実行してみる

左上の再生ボタンを押すか、command + rで実行してみてください。

成功していれば、進むを押すと、画面2に進み、戻るを押すと、画面1に戻るはずです。

完了

お疲れ様でした!これで超簡単なアプリが完成しました!

今までやってきたのは、超基本的な作業なので、慣れるまで繰り返しやってみてもいいかもしれません。

 

サトリク

僕はこの作業を3分以内でできるまで繰り返しました。

今では、2分20秒くらいでできます。笑

コメントを残す

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