iOSアプリ開発体験会

カウントアプリを作ってみよう！！

本日は、カウントアプリを作成します🔥🔥
アプリ開発の一連の流れを掴み、普段自分が使っているアプリがどうやって動いているのか体感しましょう👍
↓完成図↓

では、、、、
Let's Geek!!!!!

開発環境

Swift 5.0.1
Xcode 10.1

開発準備

Xcodeを開き、
①を選択し、新しくプロジェクトを作成しましょう

②画像通りに選択して、Nextボタンを押しましょう！

③画像通りに項目を埋めて、確認が出来たらNextボタンを押しましょう！!

④アプリを作成する場所をわかりやすい「デスクトップ」に選択して、Createしましょう！！！

下の画像のようになっていたら、アプリがCreateできたことになります！！

⑤右側にあるファイルの中から、「Main.storyboard」を選択し、「View as iPhone〜」をタップし、自分の持っているiPhoneの機種と同じものを選びましょう！

これが出来たら コマンド+Rを押してシュミレーターを立ち上げて見ましょう👍
→自分のパソコンにiPhone出てくるのとてもでワクワクします🔥🔥🔥

これにて、開発準備は終了です！！

開発スタート！！！

①見た目

まずは、アプリの見た目を作成していきます。
Codeを書こうとしたそこのあなた！！！ちょっと待った！！！！
まだ、Codeは書きません。
なんとXocdeを使えば、アプリの見た目をドラッグ＆ドロップで作ることができるのです🔥🔥🔥
主に、Main.storyBoardを使用して作成します。
①右上の丸いボタンを押すと、「Objects」といった、いわゆるボタンや、テキストを入れれる部品を選ぶツールが開きます

②テキストを表示できる「Label」を検索し、それをスマホのような画面（ストーリーボード）にドラッグ&ドロップして配置します。

③Labelが配置できたら、ホームベースような所を押し、Labelの詳細設定をしてみましょう！！
例)
・テキスト内容を変えたい：Labelとなっている所を変更します。
・フォントを変えたい：Fontの所から選択する。
・背景色を変えたい：Backgroudから色を選択する。

④Try!!:画像のように、ボタンの部品3つ配置して、色やテキストを変更してみましょう！

これで見た目は完成！！！！

②コードを書く

見た目の部分ができたので、次はいよいよCodeを書いていきます🔥🔥
Codeの役目というと、例えば、ボタンを押した時にLabelのテキストが変更する、みたいなパーツにアクションを加える役目があります。
では早速、Codeを書いていきましょう👍
この章では、「ViewController.swift」を選択し、Codeを書いていきます。

⑴変数を宣言する
公式：「(＠IBOutlet) var (変数名): (型名) = (初期値)」
例)


⑵ラベルのテキストの初期値を設定する
viewDidLoad()の{ }内に書きます。
例)
※プログラミングにおいて、「=」は「等しい」という意味ではありません！「左辺を右辺に代入する」ということを表しています！(「等しい」を表すのは「==」です。)


⑶ボタンを押した時の動作(アクション)を設定する
公式：「＠IBAction func (関数名)() { (動きのコード) }」
例)


コードの全体図

③関連付け

ここまでやってきたことは、見た目のパーツを作ることと、Codeを書きました。
しかし、これはそれぞれバラバラで行っているので、Codeで書いたことをパーツに関連付けてあげないと動かないのです！！
なので、最後に関連付けを行って行きたいと思います👍
「Main.storyboard」を開き、ストーリーボードを選択します。そのストーリーボードに関連のあるCodeファイルを横に開くために、command+option+Enterをします！

【発展】画面遷移をしてみよう

カウントが100になったら、「おめでとう」という画面が表示されるようにしてみます。
⑴おめでとう画面を作る
LabelやButtonを配置した時と同じように、右上のボタンを押して、「ViewController」を配置しましょう。

次に、この画面に「おめでとう」というLabelと「戻る」ボタンを配置して、おめでとう画面を完成させましょう。
例)
⑵Segueの準備
おめでとう画面が完成したら、画面遷移のために、遷移したい画面同士をヒモで繋ぎます(これをSegue(セグエ)と言います)。

※画面上の黄色い丸を選択し、Controlキーを押しながら、おめでとう画面まで引っ張ります。今回は、「Present Modally」を選択しましょう。
Segueをつなぐことができたら、Identifier(IDのこと)を設定します。これは絶対忘れないように！！！

⑶おめでとう画面用のViewController(コードを書くやつ)を作成・設定
①左側で右クリックor「Control+クリック」して、「New File」を選択

②「Cocoa Touch Class」を選択して「Next」

③名前を入力(今回は「SecondViewController」)をして「Next」→「Create」


④おめでとう画面を選択し、右側のタブの左から三番目(新聞紙みたいなやつ)を選択して、今作ったSecondViewControllerを設定する

⑷コードを書く
ViewControllerを開き、以下のコードをplusボタンの続きに書きます。

Viewcontroller.swift

@IBAction func plus(){
 number +=1
 numberLabel.text = String(number)
 if number > 10 {
   performSegue(withIdentifier: "さっき書いたID", sender: nil)
 }

SecondViewControllerを開き、画像のようにアクションを書いてください。(今回、Labelはコード上で扱わないので、宣言は不要です)

※関連付けを忘れずに！！
⑸動かしてみる！
ここまでできたら、シミュレーターを立ち上げて、ちゃんと動くか試してみましょう！！

みんなで勝負してみよう！！！

今後

今回の体験会で学んだアプリ開発の流れは、どのアプリでも基盤になってくるものです🔥🔥
普段自分が作っているアプリがどんなパーツ構成になってるか想像してXcodeをいじってみると、とてもワクワクしてくると思います！！！
是非いろいろ触ってみて自分だけのアプリを作ってみましょう！