🔖

【Swift UI】NFC名刺を自作する！

2024/03/27に公開

きっかけ

最近、コロナも収束しオフラインのイベントによく行くようになりました。イベントでは名刺を交換することが多いのですが、NFCタグやNFCカードを使って自身のホームページやSNSを見てもらっている人を見かけて、自分も真似したくなりました。とはいえ、業者に発注するとちょっと予算がかかるので、自分で自作してみました。

用意するもの

NCFカード (1枚200円くらい)
書き込むためのアプリ。(無料)
Webページを作る(無料)
シールを作る(印刷代 100円くらい？)

シールはまだ作成していないので、値段は予想です。

NFCカード

こちらで購入しました。3枚で570円でした。サイズは免許証と同じです。

アプリをつくる

サクッと作りたかったので、便利なパッケージを利用させていただきました。
https://github.com/1998code/SwiftNFC

URLを書き込むだけの超シンプルなUIです。(読み込みもありますが、iPhoneはNFCの読み込み機能が備わっているので、かざすだけでOK)

その場でSNSを開いフォローできれば良いのですが、忘れちゃうこともあるかと思い、今後は交換した人の一覧も作っていけたらなあと思います。

拙いコードですが、サンプルコードはこちら👇

サンプルコード

import SwiftUI
import SwiftNFC

struct ContentView: View {
    @State var inputUrl:String = ""
    @State var readedUrl:String = ""
    @FocusState var isFocused: Bool
    @ObservedObject var NFCR = NFCReader()
    @ObservedObject var NFCW = NFCWriter()
    
    
    func read() {
        NFCR.read()
        readedUrl = NFCR.raw
        print(readedUrl)
    }
    
    
    
    func write() {
        NFCW.msg = inputUrl
        NFCW.write()
    }
    
    var body: some View {
        NavigationView {
            VStack {
                
                Text("\(readedUrl)")
                
                Spacer()
                TextField("URLを入力してください", text: $inputUrl, axis: .vertical)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .focused($isFocused)
                    .keyboardType(.URL)
                
                Spacer()
                
                HStack {
                    Button(action: {
                        write()
                        NFCW.type = "U"
                        isFocused = false
                    }, label: {
                        Text("書き込み")
                            .font(.system(size: 20,weight: .bold,design: .default))
                            .padding()
                    })
                    .foregroundColor(.white)
                    .background(.blue)
                    .cornerRadius(10.0)
                    .padding()
                    
                    Button(action: {
                        read()
                    }, label: {
                        Text("読み込み")
                            .font(.system(size: 20,weight: .bold,design: .default))
                            .padding()
                            .overlay(
                                RoundedRectangle(cornerRadius: 10)
                                    .stroke(Color.accentColor, lineWidth: 3)
                            )
                    })
                    .foregroundColor(.accentColor)
                    .background(.white)
                    .padding()
                }
                Spacer()
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    NavigationLink(destination: ListView()) {
                        Text("交換した人一覧")
                    }
                }
            }
            .padding()
        }
        
    }
}

#Preview {
    ContentView()
}