【初心者向け】Spiralでデジタル名刺を作ってみた！～フォーム作成からHTML表示までのまとめ～
こんにちは！
今回はローコード開発ツール「Spiral（スパイラル）」を使って、自分専用のデジタル名刺を作る方法についてご紹介します。
私はスパイラル初心者でしたが、ハッカソンをきっかけに初めて触ってみました。
この記事では、名刺データの登録からWebページでの見せ方まで、初心者目線で学んだことをまとめています。
まず実際に作成した名刺がこちらです。
📌 目次
- 今回Spiralを使ってやりたいこと
- データベースの作成
- フォームの作成とデータ登録
- データのWeb表示（HTMLテンプレート）
- 実際の表示イメージ
- つまずいたポイントと対処法
- まとめ
1. 今回Spiralを使ってやりたいこと
Spiralを使って、自分の名刺情報をオンラインで表示できるようにしたい！
具体的には以下の情報を表示したいと決めました：
- 名前
- 会社名
- 役職
- 住所
- メールアドレス
- 電話番号
- 会社のロゴ画像
- ホームページURL
目的は「フォームで入力→Webページで名刺として見せる」ことでした。
2. データベースの作成
① Spiralにログイン後、「DB」から「通常DBの新規作成」を選択しDBを作成しました。
② フィールドを追加
-
name（名前） -
company（会社名） -
position（役職） -
address（住所） -
mail（メールアドレス） -
tel（電話番号） -
logo（ロゴ画像）※画像フィールドとして設定 -
url（URL）
フィールドの「差替キーワード」を適切に設定しておくことで、後でHTMLに組み込めるようになります。
3. フォームの作成とデータ登録
① フォーム機能を選択
② フォーム編集画面にて、データ登録
例：name、company、mailなど
→ これで名刺情報を入力するフォームが完成！
③ 入力用フォームURLから、自分の名刺情報を登録
4. データのWeb表示（HTMLテンプレート）
先ほどの工程で、名刺情報を登録した後、どのように名刺の形で表示するのか（どこのcssを編集していいのか）わかりませんでした。
ここが一番学びが大きかったポイントです！
① 一覧表 の 単表の「設定」で単表のスタイルを変更できます。
② 「単票のソース編集」で編集可能です。
③ カスタマイズも行いました。
単表の編集エディタを使用して、「クリックした時に回転する」ようにカスタマイズしました。
クリックした時に180度回転します。
5. まとめ
基本の流れである「データベース作成 → フォーム作成 → テンプレート編集（単表）で表示」という3ステップを押さえれば、一気に理解が深まります。