自分のプロフィールを画像として保存＆共有できる自己紹介カードを作ってみた!!
先日、弊社がHACKPLAYを開催しました。
https://spiral-platform.connpass.com/event/356942/
仲のいい友たちも参加したので、自分も参加しました
会社の行事なので、しっかり作ろうと思って頑張りました (公式)
参加するには、ちょっと自分も作ってみたいものにした!!
ぽい!(っ'-')╮=͟͟͞͞ﾌﾞｫﾝ
こんな方に向けて書いてます
- SPIRAL ver.1 を使って何か作ってみたい方
- 簡単なアプリを試作したい方
- 自己紹介・プロフィールカードをデジタルで管理・共有したい方
- SPIRAL一覧表の「単表表示」の活用例を知りたい方
✅こんなことができる
- SPIRALに登録された情報を名刺のように見せる
- Contact（連絡先）と About Me（自己紹介）の切り替え表示
- ワンクリックで名刺の情報を画像化してダウンロード ←私の気に入りポイント
🛠 使用技術と構成
使用技術
-
SPIRAL ver.1
- 一覧表と単表表示によるデータ管理
- 差し替えキーワードでのデータ表示
-
Stitch (HTML / Tailwind CSS)
- モバイル対応の柔軟なデザイン
- レスポンシブなボタンとレイアウト
- ※ Stitchで生成したデザインより、上記の修正を行う
-
JavaScript
- タブの表示切り替え処理（DOM操作）
- 画像保存機能の連携（html2canvas）
-
html2canvas
- 表示内容をそのまま画像化し、クライアントサイドでダウンロード
構成
① 入力フォームからデータ入力し、
② 一覧表から出力し、そこの1データを単票として出力させる
③ 単票のHTML、CSSを整いたい
④ デザインをStitchから生成
実装ポイント
SPIRALの差し替えキーワード
テンプレート内でデータを差し込むため、SPIRALの差し替えキーワードを使用しています。
例：
<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 の表示を切り替えています。
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 を使って、現在表示されている名刺画面全体をキャプチャします。
html2canvas(document.getElementById("card-wrapper")).then(canvas => {
const link = document.createElement("a");
link.download = "namecard.png";
link.href = canvas.toDataURL("image/png");
link.click();
});
実際このようなスクショが作成できます🔻
💾 保存できる仕組み
- Contact／About Me両方の情報をすべて表示した状態にしてキャプチャ
- 表示の整形、テキストの折り返しも含めて丁寧にレイアウト
- ダウンロードされた画像はそのままSlackやLINEで共有可能
※名刺全体を画像化するため、一時的に非表示エリアも表示 → キャプチャ → 再非表示、という流れをJSで制御します。
デザインをStitchより生成
Stitchにデジタル名刺のイメージを伝えて、叩き台を作成してもらう。
Stitchの凄さは、Figmaのデザインファイルもコードも作成してくれた!
すごいですが、レスポンシブの部分ややおかしいので、
そこらへんは自力で....
About meをタブしたら、ちゃんと変わります。
活用
NFCタグにリンクを保存して、人に会う時に、読み込んでいただきます。
気になっていただけたら、その場でXをフォローしていただいてもいいですし、
その場でスクショを撮っていただいて、写真として保存してもらってもいいです。
便利!!
🧹 まとめ
SPIRAL ver.1 の一覧表（単表）を使って、
- 自己紹介アプリのような名刺画面を作成し
- ワンクリックで画像として保存できる
というシンプルかつ実用的なアプリを作ってみました。
SPIRALのテンプレート機能は柔軟なので、
小規模なツールや情報発信の入り口としてもかなり有用です！
🔖 補足：一覧表の構成
| フィールド名 | 内容例 |
|---|---|
| full_name | 山田 花子 |
| job_title | ぺいぺい |
| organization | すぱいらる株式会社 |
| image | プロフィール画像URL |
| yamada@example.com | |
| twitter_url | https://twitter.com/yamada |
| linkedin_url | https://linkedin.com/in/yamada |
| skills | JavaScript, Python, SQL |
| hobby | バイク、料理 |
| bioprofile | Web開発歴10年、○○で活躍中。 |
作った名刺、ぜひ見てみてくださいねー!!
おまけ＆宣伝
無料トライアルでSPIRALを試せるので、気になる方もぜひ〜
簡単に構築できるコンテンツもあって、すぐ試せます!
ローコードですぐデプロイしたいなら、結構するできちゃいます。
ではでは〜!