はじめに
Swiftの学習を兼ねて、簡単なSNSアプリを作ってみました。
Xcodeが必要なので、環境はmacOSです。
要件
- 投稿できる
- 投稿したら、いいねがたくさん付く
- いいねの数は、10〜10,000の間でランダム
準備
プロジェクトの作成方法は、Swift & SwiftUIでタロットカードアプリを作る を参照してください。
User InterfaceはSwiftUI
を選択しました。
今回のディレクトリ構成
ContentViewだけ修正してます。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F407770%2F1af2f7dc-ef71-df29-f539-df02027b0892.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=46d614e802500b0f616b7cb7ab535f41)
実装
今回はこれだけです。
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()
}
}
動作確認
それでは、動かしてみましょう!
起動直後の状態。
右上のひよこマークをタップすると、入力画面に遷移します。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F407770%2F4b376e10-ef58-7274-19b3-11cc7a50046e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5081c1e7d7bcf93a3a991b03a6e25dd8)
入力画面。
頭に浮かんだことを入力して、ポストします。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F407770%2Ff2f7a8aa-b83d-5522-6c8a-d41e2a4f74d8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c11b0f79c1fd02399dd2f0e3c2b7f558)
いいねがたくさん付きました!
どんどんポストしてみましょう!
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F407770%2F20368206-3135-2d95-38cd-f3709612d439.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=48406932696dd9d9bfe2efddfe4815c9)
これだけいいねしてもらえると、気分がいいですね😃
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F407770%2Fdb08e277-6ab5-332b-0f3d-7170c87e6d9d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=161a3f93477677b6b569b26f1a90fb5b)
目指せ、1万いいね!
まとめ
今回は、絶対に炎上しない、自分専用のSNSを作ってみました。
何を書いても褒めてもらえるので、気分転換に使うといいかもしれません。
まだまだ改良の余地があるので、また別の機会にチャレンジしてみようと思います。
みなさんも一緒にがんばりましょう🙂