SPIRALで作るデジタル名刺：DB連携＆スワイプで裏面表示も！

### はじめに
こんにちは。最近はリアルの名刺を配るより、SNS交換の方が多くなってきたな〜と思う今日このごろ。 

そんな中、ローコードプラットフォーム「SPIRAL」を使ったハッカソンイベント[SPIRAL HackPlay](https://spiral-platform.connpass.com/event/356942/) に参加（というか主催）し、「SPIRALを使ってデジタル名刺を作る」というテーマに取り組みました。

できあがったのがこちら！  

👉 [デモ名刺](https://www.pi-pe.co.jp/area/card/104397/j8w0K8/M?S=oesdoe0n0k)

まるでリアル名刺のように「裏面」にひっくり返せる、ちょっとアソビゴコロあるやつです。  
しかもデータベース連携＆問い合わせフォームつき。お手軽だけど、ちゃんと実用的！

---

## こんな名刺です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201694/14893c1b-9d5d-416e-8c2b-c60a8d70520c.png)


- 📇 **SPIRALのDBからユーザー情報を取得して名刺を生成**  
- 🔄 **左右スワイプで裏面が見えるギミックあり**（名刺感！）
- 📱 **スマホで映える縦長デザイン**で、タップ操作も快適
- ✉️ **メールアドレスを出さずに連絡できるフォーム付き**

---

## どうしてこうなった？（背景）

### お題はこちら

> 「SPIRALを使ってデジタル名刺を作ってみよう！」

デジタル名刺か・・・最近プ◯ーリーとかの広告よく見るな・・・
- 所属が変わっても柔軟に変えられるし  
- プライベート用・仕事用も切り替えられるし  
- 最近紙配る機会も減ってるし

色々こだわって作れるかも！？

---

## こだわったところ

### 🧠 情報は全部DBから！

- SPIRALのDBに自分の情報を登録しておいて  
- 名刺を開いたときにその情報を**リアルタイムで取得**  
- 「会社モード」「趣味モード」「コミュニティ用」なども切り替え可能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201694/5deb2040-7a98-46c6-8096-b8a6778a4e83.png)

### 👆 スワイプで裏面に！

- **指で左右にスワイプすると名刺が裏返る**  
- 表には氏名や顔写真、裏には経歴やSNS、そして問い合わせフォーム
- 物理名刺にあった「裏面文化」を、デジタルに移植してみた感じです(**ChatGPTが作ってくれました**)
- 実は裏面にしたらボタンの色が変わります。（**これもGPTが作ってくれました**）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201694/cbf3ecd0-ae48-4de3-aa28-b281b7169914.png)
[デモ](https://www.pi-pe.co.jp/area/card/104397/j8w0K8/M?S=oesdoe0n0k)で試してみてね！

### 📱 スマホ最適化

- **縦型**にして、スマホでの見え方を優先
- 文字サイズや余白も調整
- タップしやすいボタン、読みやすいレイアウト、配色もちゃんと設計しました
- もちろんPCからでも見れるよ

### 🙅‍♂️ メアドは非公開で連絡OK

- 名刺にメールアドレス書くの、ちょっと抵抗あるときありますよね？
- なので**SPIRALのフォームを埋め込み**、そこからコンタクトを取ってもらえるようにしました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201694/d149fee2-a867-48f8-8e8a-da91a39472df.png)

---

## 使用技術まとめ

| なにに使ったか | 技術とかツールとか |
|----------------|------------------|
| ユーザーデータ管理 | SPIRAL 通常DB |
| 問い合わせフォーム | SPIRAL フォーム |
| 見た目の実装 | HTML / CSS / JavaScript（を**ChatGPTが組んでくれました**） |

---

## あとはNFCに登録するだけ！

iPhoneアプリからNFCの編集ができるので、NFCに書き込んだら、デジタル名刺の出来上がり！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201694/e4639117-7ad1-43a4-a402-baf43887a1be.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201694/a8612387-5279-465c-bd4d-2e1cf884f494.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201694/33bb2e4b-bd2b-4a41-ada8-d7dcdd00625f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201694/8d4e871a-698f-4577-96c1-23b6f49944b4.png)


僕は👇️を使いました。

https://apps.apple.com/jp/app/nfc-tools/id1252962749

Google Playストアは

https://play.google.com/store/apps/details?id=com.wakdev.wdnfc&hl=ja&pli=1

---

## まとめ

SPIRALのフォームとDBとバイブコーディング（ChatGPT）を組み合わせるだけで、こんなに**実用的でちょっと楽しいデジタル名刺**が作れました。  
紙の名刺にできて、デジタルにはなかった「裏返す」「使い分ける」「即連絡できる」などの体験、ちゃんと再現できたのでは？

しかもハッカソンで半日くらい（**期間は1週間くらいあったんだけどね・・・**）で作ったものなので、気になる人はぜひマネしてみてください！

---

## 🔗 デモはこちら！

📇 [https://www.pi-pe.co.jp/area/card/104397/j8w0K8/M?S=oesdoe0n0k](https://www.pi-pe.co.jp/area/card/104397/j8w0K8/M?S=oesdoe0n0k)

（スマホで見るのがオススメ！）

---

## 🛠️ 参加したイベントはこちら！

[SPIRAL HackPlay](https://spiral-platform.connpass.com/event/356942/)

今後も開催するかもなので、チェックしてみてください！

---

## SPIRALが気になる！という方は・・・
↓↓無料トライアルで作れますので、是非チャレンジしてみてください！↓↓

https://www.pi-pe.co.jp/regist/is?SMPFORM=man-lanerf-2473a633d82734eb22aa64cad426ae23&f000099824=https://www.spiral-platform.co.jp/service/spiralv1/&f000099864=Qiita%E8%A8%98%E4%BA%8B%E7%B5%8C%E7%94%B1%E3%81%AE%E7%94%B3%E3%81%97%E8%BE%BC%E3%81%BF%E3%81%A7%E3%81%99%E3%80%82&sales_flg=2
 
使い方はこちらもご参照を！👇
 
https://knowledge.spirers.jp/

こうした事例をもっと発信していけたらと思ってるので、よかったら  
**Qiitaフォローや「SPIRALナレッジサイト」もチェックしてみてください！**

- [Qiita: #spiral タグ](https://qiita.com/tags/spiral)
- [SPIRAL ナレッジサイト](https://knowledge.spirers.jp/)