見出し画像

(3)ファッションアプリ「PoPoTown」を作ろう!

画像1

✓完成品の確認

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

画像2

画像3

スクロールできるファッションアプリです。

別にどこかのファッション通販アプリを参考にしているわけではありません😏笑

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

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

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

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

可能であれば、iPhoneアプリ開発の基礎: Xcode入門編旅行アプリを「Travel」を作ろうを先にやっていると良いです。このチュートリアルより簡単で、基礎的です。

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

本チュートリアルは、

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

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

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

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

✓想定している読者

・SwiftはProgate等で勉強している。本チュートリアルではSwiftの文法等は触れません。Swiftが全く分からないという状態でなければOKです。

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

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

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

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

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

Xcode 10.2.1

Swift 5.0.1

Xcodeのインストールがまだの方は、下の記事を参考にインストールをしてください。

・ iPhoneアプリ開発の基礎: Xcode入門編


✓目次

1.新規アプリの作成

2.NavigationBarの作成

3.CollectionViewを使って画面を作る

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

5.セル用のファイルを作る

6.画像・ラベルをセルファイルにつなげる

7.画像を用意する

8.CollectionViewの設定を行う

9.おわりに


1.新規アプリの作成

このセクションでは新規アプリの作成を行います。

Xcodeを開きます。

画像4

Create a new Xcode projectを選択。

画像5

Single View Appを選択して、Next

画像6

Product Name(アプリ名) → PoPoTown

Team → None

Organization Name(組織名) → PoPoTown(なんでもOKです)

Organization Identifier(組織ID) → PoPoTown(なんでもOKです)

Language → Swift

Next

画像7

アプリの保存場所を決めて、Create

これで指定した場所に新規アプリが作成されます。

画像8


2.NavigationBarの作成

このセクションでは下の赤枠の部分のNavigationBarを作成します。

画像9


まず画面(UI)を作るMain.storyboardを開きます。

画像10


デフォルトではNavigationBarはついていないのでつけていきます。

まず赤で丸をつけている黄色のボタンをクリックします。

画像11

この続きをみるには

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

(3)ファッションアプリ「PoPoTown」を作ろう!

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

1,500円

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

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

0からはじめるiPhoneアプリ開発入門
0からはじめるiPhoneアプリ開発入門
  • 3本
  • ¥3,000
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。