SPIRAL ver.1 でデジタル名刺を作ってみた！

自分のプロフィールを画像として保存＆共有できる自己紹介カードを作ってみた!!

先日、弊社がHACKPLAYを開催しました。
https://spiral-platform.connpass.com/event/356942/

~~仲のいい友たちも参加したので、自分も参加しました~~
会社の行事なので、しっかり作ろうと思って頑張りました (公式)

参加するには、ちょっと自分も作ってみたいものにした!! 

ぽい!(っ'-')╮=͟͟͞͞ﾌﾞｫﾝ

https://www.pi-pe.co.jp/area/card/104345/0jFje0/M?S=oescqa0l0k

## こんな方に向けて書いてます

- SPIRAL ver.1 を使って何か作ってみたい方
- 簡単なアプリを試作したい方
- 自己紹介・プロフィールカードをデジタルで管理・共有したい方
- SPIRAL一覧表の「単表表示」の活用例を知りたい方


## ✅こんなことができる

- SPIRALに登録された情報を名刺のように見せる
- Contact（連絡先）と About Me（自己紹介）の切り替え表示
- ワンクリックで名刺の情報を**画像化してダウンロード** ←私の気に入りポイント

## 🛠 使用技術と構成
### 使用技術

- **SPIRAL ver.1**
  - 一覧表と単表表示によるデータ管理
  - 差し替えキーワードでのデータ表示

- **Stitch (HTML / Tailwind CSS)**
  - モバイル対応の柔軟なデザイン
  - レスポンシブなボタンとレイアウト
  - ※ Stitchで生成したデザインより、上記の修正を行う
  
- **JavaScript**

  - タブの表示切り替え処理（DOM操作）
  - 画像保存機能の連携（html2canvas）

- **html2canvas**
  - 表示内容をそのまま画像化し、クライアントサイドでダウンロード

### 構成

①　入力フォームからデータ入力し、
②　一覧表から出力し、そこの1データを単票として出力させる
③　単票のHTML、CSSを整いたい
④　デザインをStitchから生成


![pic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2959760/27200469-39ea-43aa-98d7-cc8607dc41c1.png)




## 実装ポイント


### SPIRALの差し替えキーワード

テンプレート内でデータを差し込むため、SPIRALの差し替えキーワードを使用しています。

例：

```html
<p>%val:usr:full_name%</p>
<p>%val:usr:email%</p>
<p>%val:usr:bioprofile%</p>
```

SPIRALの一覧表に登録された値が、このような形式でテンプレートに差し込まれます。

SPIRAL側では、HTMLテンプレートを設計するときにこれらのタグが「自動置換」される仕組みになっているため、 データを更新しても常に最新の状態が反映されます。


### 一覧表と単表の性質

- 今回は「**単表**」の形式で表示
- 1レコードのみを表示することで、名刺として完結したデザインを実現
- 複数ユーザーの一覧化が不要な場合、「単表」は非常に便利！

また、SPIRALの単表では「差し替え対象のレコード」をあらかじめ限定できるので、 **1ユーザーの固定情報を表示する用途**にぴったりです。


### SPIRALの利便性

- ノーコード／ローコードでテンプレートを組める
- データベース側で情報を一元管理できる
- 差し替えキーワードにより、データの自動更新が可能
- 外部HTMLと組み合わせれば、リッチな表現も実現可能
- スマートフォン表示にも強く、UI対応が柔軟


## タブ切り替えで情報を整理

2つのボタンで `Contact` と `About Me` の表示を切り替えています。

```js
contactBtn.addEventListener("click", () => {
  contactSection.classList.remove("hidden");
  aboutSection.classList.add("hidden");
});

aboutBtn.addEventListener("click", () => {
  contactSection.classList.add("hidden");
  aboutSection.classList.remove("hidden");
});
```

TailwindCCS でボタンの色やアクティブ状態も制御でき、**スマートなUX**を実現（￣+ー￣）



## ワンクリックで名刺全体を画像に

`html2canvas` を使って、現在表示されている名刺画面全体をキャプチャします。

```js
html2canvas(document.getElementById("card-wrapper")).then(canvas => {
  const link = document.createElement("a");
  link.download = "namecard.png";
  link.href = canvas.toDataURL("image/png");
  link.click();
});
```
実際このようなスクショが作成できます🔻
![yamadahanako_namecard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2959760/afc602d7-b02e-40e4-aa0e-f4d990abdf10.png)


### 💾 保存できる仕組み

- Contact／About Me両方の情報を**すべて表示した状態**にしてキャプチャ
- 表示の整形、テキストの折り返しも含めて丁寧にレイアウト
- ダウンロードされた画像はそのままSlackやLINEで共有可能

> ※名刺全体を画像化するため、一時的に非表示エリアも表示 → キャプチャ → 再非表示、という流れをJSで制御します。

## デザインをStitchより生成
Stitchにデジタル名刺のイメージを伝えて、叩き台を作成してもらう。
![スクリーンショット 2025-06-21 0.09.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2959760/3a46b967-40d4-4c49-8d60-abc1328cd8f3.png)

Stitchの凄さは、Figmaのデザインファイルもコードも作成してくれた!
![スクリーンショット 2025-06-21 0.10.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2959760/e6986893-15cc-4a6f-99b7-33316542766a.png)

すごいですが、レスポンシブの部分ややおかしいので、
そこらへんは自力で....

![スクリーンショット 2025-06-21 0.16.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2959760/46ac2d1a-4882-478e-9083-d49874576897.png)

About meをタブしたら、ちゃんと変わります。

![スクリーンショット 2025-06-21 0.17.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2959760/3d945ec9-68c9-4411-a725-434b8a874ea9.png)


## 活用

NFCタグにリンクを保存して、人に会う時に、読み込んでいただきます。
気になっていただけたら、その場でXをフォローしていただいてもいいですし、
その場でスクショを撮っていただいて、写真として保存してもらってもいいです。

便利!! 

## 🧹 まとめ

SPIRAL ver.1 の一覧表（単表）を使って、

- 自己紹介アプリのような名刺画面を作成し
- ワンクリックで画像として保存できる

というシンプルかつ実用的なアプリを作ってみました。

SPIRALのテンプレート機能は柔軟なので、
**小規模なツールや情報発信の入り口としてもかなり有用**です！


## 🔖 補足：一覧表の構成

| フィールド名        | 内容例                                                              |
| ------------- | ---------------------------------------------------------------- |
| full\_name    | 山田 花子                                                           |
| job\_title    | ぺいぺい                                                            |
| organization  | すぱいらる株式会社                                                         |
| image         | プロフィール画像URL                                                      |
| email         | [yamada@example.com](mailto\:yamada@example.com)                 |
| twitter\_url  | [https://twitter.com/yamada](https://twitter.com/yamada)         |
| linkedin\_url | [https://linkedin.com/in/yamada](https://linkedin.com/in/yamada) |
| skills        | JavaScript, Python, SQL                                          |
| hobby         | バイク、料理                                                           |
| bioprofile    | Web開発歴10年、○○で活躍中。                                                |


作った名刺、ぜひ見てみてくださいねー!! 

https://www.pi-pe.co.jp/area/card/104345/0jFje0/M?S=oescqa0l0k

## おまけ＆宣伝

無料トライアルでSPIRALを試せるので、気になる方もぜひ〜

https://www.pi-pe.co.jp/regist/is?SMPFORM=man-lanerf-2473a633d82734eb22aa64cad426ae23&f000099824

簡単に構築できるコンテンツもあって、すぐ試せます! 
ローコードですぐデプロイしたいなら、結構するできちゃいます。

https://knowledge.spirers.jp/special/detail/11680

ではでは〜!