LoginSignup
6
2

はじめに

Swiftの学習を兼ねて、簡単なSNSアプリを作ってみました。

Xcodeが必要なので、環境はmacOSです。

要件

  • 投稿できる
  • 投稿したら、いいねがたくさん付く
  • いいねの数は、10〜10,000の間でランダム

準備

プロジェクトの作成方法は、Swift & SwiftUIでタロットカードアプリを作る を参照してください。

User InterfaceはSwiftUIを選択しました。

今回のディレクトリ構成

ContentViewだけ修正してます。

実装

今回はこれだけです。

ContentView.swift
//
//  ContentView.swift
//  MyPiyotter
//

import SwiftUI

struct ContentView: View {
    @State private var showingInputView = false
    @State private var posts: [Post] = []

    var body: some View {
        NavigationView {
            List {
                ForEach(posts) { post in
                    PostView(post: post)
                }
            }
            .navigationTitle("MyPiyotter")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                        showingInputView = true
                    }) {
                        Text("🐥")
                            .font(Font.system(size: 70)) // 大きめにする
                    }
                }
            }
            .sheet(isPresented: $showingInputView) {
                InputView(isPresented: $showingInputView, posts: $posts)
            }
        }
    }
}

struct InputView: View {
    @Binding var isPresented: Bool
    @Binding var posts: [Post]
    @State private var inputText = ""

    var body: some View {
        NavigationView {
            VStack {
                TextEditor(text: $inputText)
                    .padding()
                Spacer()
            }
            .navigationTitle("新規投稿")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button("キャンセル") {
                        isPresented = false
                    }
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("ポストする") {
                        let newPost = Post(content: inputText, likes: Int.random(in: 10...10000))
                        posts.insert(newPost, at: 0)
                        inputText = ""
                        isPresented = false
                    }
                }
            }
        }
    }
}

struct PostView: View {
    let post: Post

    var body: some View {
        VStack(alignment: .leading) {
            Text(post.content)
                .padding(.bottom)
            HStack {
                Image(systemName: "heart.fill")
                    .foregroundColor(.red)
                Text("\(post.likes)")
            }
        }
        .padding()
    }
}

struct Post: Identifiable {
    let id = UUID()
    let content: String
    let likes: Int
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

動作確認

それでは、動かしてみましょう!

起動直後の状態。
右上のひよこマークをタップすると、入力画面に遷移します。

入力画面。
頭に浮かんだことを入力して、ポストします。

いいねがたくさん付きました!
どんどんポストしてみましょう!

これだけいいねしてもらえると、気分がいいですね😃

目指せ、1万いいね!

まとめ

今回は、絶対に炎上しない、自分専用のSNSを作ってみました。
何を書いても褒めてもらえるので、気分転換に使うといいかもしれません。

まだまだ改良の余地があるので、また別の機会にチャレンジしてみようと思います。

みなさんも一緒にがんばりましょう🙂

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2