見出し画像

(2)旅行アプリを「Travel」を作ろう

画像1

✓完成品の確認

まずは本チュートリアルで作成するTravelアプリを確認しましょう!

画像2

画像3

スクロールすると記事が出てくる旅行系アプリで

Retripantennaをイメージしています。

✓想定している読者

・SwiftはProgateドットインストールなどで勉強している。本チュートリアルではSwiftの文法については特に触れません。

iPhoneアプリ開発の基礎: Xcode入門編の内容を理解している。そんなに時間はかからないので目を通してみてください。ここでXcodeの基本的な使い方を解説しています。本チュートリアルは、このiPhoneアプリ開発の基礎: Xcode入門編読んでいるものとして進めます。

・iPhoneアプリ開発をやってみたいが、何となく難しそうとハードルを感じてしまっている方

・iPhoneアプリ開発を始めたものの、挫折してしまった方

・iPhoneアプリ開発を何から始めたら良いか分からない方

・分からないところが出てきたら、自分でも少し調べる気持ちがある方。なるべく網羅的に解説しますが、それでもカバーできないところがあるかもしれません(( _ _ ))

✓想定していない読者

・本コース終了後すぐにアプリを自力で作って公開したい方。本コースはiPhoneアプリ開発の入門チュートリアルです。このチュートリアでは、iPhoneアプリの開発の流れを理解するのが主目的です。本チュートリアル終了後、自力でアプリ開発の勉強に向かえる手伝いをしたいと考えています。

・Swiftの基礎を勉強していない方(Progateドットインストールで勉強できます。本チュートリアルではSwiftの文法等は触れません)

・プログラミング経験豊富なエンジニアの方(本コースは超初心者を想定しています。優秀なエンジニアの方から見たら不十分に思えるかもしれません)

✓本チュートリアル終了後、得られるもの

・Xcodeの基本的な使い方がわかる

・旅行系アプリなどがどのように作られているか、基礎を勉強できる

・iPhoneアプリ開発の勉強を始める準備ができる


✓本チュートリアルのゴール

本チュートリアルは、

iPhoneアプリの開発について、ほぼ何も分からない状態から、開発の流れが分かるようになることを目的にして作っています。

可能な限り丁寧に解説を行っていますが、それでももしかしたら理解できない箇所があるかもしれません。

それは当然のことで、はじめから100%理解できないからと言って不安に思わないでください。徐々に全体像が見えてきます。

なので繰り返しになりますが、本チュートリアルのゴールは、iPhoneアプリの開発の流れを掴むことです。

✓本チュートリアルを始める前に

以下の点を確認してください。

Macを持っていること。Macを使ってアプリを作ります。

Xcodeをインストールしていること。まだインストールが済んでいない方は、iPhoneアプリ開発の基礎: Xcode入門編を参考にXcodeのインストールを行ってください。

✓本チュートリアルの開発環境

Xcode 10.2.1

Swift 5.0.1


✓目次

1.プロジェクトの作成

2.確認事項

3.ナビゲーションバー(Navigation Bar)の作成

4.ナビゲーションバー(Navigation Bar)の見た目の設定

5.テーブルビュー(Table View)を作る

6.テーブルビューセル(UITableViewCell)を理解する

7.テーブルビューセルを作る

8.TableViewCellに部品を置く

9.全てのiPhoneでレイアウト崩れを起こさないようにAutoLayout(オートレイアウト)を設定する

10.セルに表示するタイトルと画像を用意する

11.テーブルビュー(TableView)をViewController.swiftに接続する

12.テーブルビューの初期設定をする

13.テーブルに表示するセルの件数を決める

14.表示するセクションの数を決める

15.セルに何を表示するか設定する

16.🎉🎉完成です🎉🎉

17.これからどうやって勉強を続けるか


1.プロジェクトの作成

Xcodeを起動して新規プロジェクトを作成します。

Create a new Xcode ProjectSingle View App

そして下のように設定します。

画像4

今回は旅行アプリなので、Travelという名前にします。(好きな名前にしてもOKです)

ここまでできたらNextCreateでプロジェクト作成完了です。

画像5


2.確認事項

本チュートリアルを始める前に確認事項が1点あります。

本チュートリアルでは、画面(UI)の作成でiPhoneXRの画面を使っているので、以下の手順で設定してください。

まず矢印の先のMain.storyboardファイルをクリックして開きます。

画像6

✓Main.storyboardはアプリのデザイン(UI)を作るところです。

次に矢印の先のView as iPhone XRの部分を確認してください。

画像7

iPhone XRになっている方はそのままでOKです。

違う種類になっている場合は、

View as iPhone 〇〇の部分をクリックします。

画像8

マウスを動かしていくと、iPhone XRと出てくるので、

クリックして、最後にView as: iPhone XRの部分をクリックして閉じます。

これで画面のiPhoneがXRになります。

※もし上の画像のようなものが出てこない場合は、Xcodeを画面いっぱいに広げてください。Xcodeのウィンドウが小さすぎると出てこないことがあります。


3.ナビゲーションバー(Navigation Bar)の作成

でははじめていきましょう!

アプリ上部のナビゲーションバーを作成していきます。

画像9


Main.storyboardを開きます。

矢印の先の黄色の丸ボタンをクリック

画像10


Editor → Embed In → Navigation Controllerをクリック

画像11


すると、左にNavigation Controllerができます。

画像12

もともとあった画面をよく見ると、

画像13

上にNavigation Barが追加されていることが分かります🎉


4.ナビゲーションバー(Navigation Bar)の見た目の設定

このセクションではナビゲーションバーにテキストを入れたりフォントの大きさや種類を設定していきます。


ViewController.swiftを開きます。

import UIKit

class ViewController: UIViewController {

   override func viewDidLoad() {
       super.viewDidLoad()
       // Do any additional setup after loading the view.
       
       
   }


}

viewDidLoadメソッド内を以下のように書き換えて下さい。

viewDidLoadメソッドはアプリが起動した時に呼ばれるメソッド

この続きをみるには

この続き: 18,860文字 / 画像89枚
この記事が含まれているマガジンを購入する
または、記事単体で購入する

(2)旅行アプリを「Travel」を作ろう

Plain_iOS(アプリ開発チャンネル)

1,500円

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
5
Swift/Xcode/iOSアプリ開発が趣味です。

こちらでもピックアップされています

0からはじめるiPhoneアプリ開発入門
0からはじめるiPhoneアプリ開発入門
  • 3本
  • ¥3,000
コメント (3)
購読者です。
ご質問してもよろしいでしょうか?
ナビゲーションバーに Travelを入れるところですが、なぜself.title = "Travel"のみで、navigationbar?がなくても、ナビゲーションバーに入るのでしょうか?
須藤英隼様

ご購入・ご質問ありがとうございます!

※まず補足で説明させてください🙇🏻‍♂️
タイトルの設定の仕方は、self.title = "Travel"に加えて、
self.navigationItem.title = "Travel"でも可能です。
本チュートリアルでは、よりシンプルな書き方のself.title = "Travel"を使っています。

■上記踏まえた上でご質問に回答させてください。
ご質問の、"navigationbar?がなくても"の部分についてですが、
✔︎navigationbarは基本的にナビゲーションバーの外観を設定するものになります。
・nabigationbar(UINavigationBar)→基本的に外観の設定(バーの色等)
・navigationItem(UINavigationItem)→基本的に表示文字列の設定(タイトル等)

なので、タイトルなど表示文字列系の設定はnabigationBarを使っていません。

■参考記事
以下の記事が参考になるので、是非目を通してみてください。
https://capibara1969.com/933/#toc2
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。