電子名刺を自作すると、リンクで飛ばすページは自分で自由に選べます。
例えば、以下
・リンクで飛ばすサイトを自作する
・自分の一押しサイトを登録する
・QiitaのようなサイトリンクがＴＯＰページに表示できるサイトを登録する
自作サイトも欲しいな～と思っていたので、
今回は、Markdown AI（簡単にWebサイトを作成できる画期的なWebアプリケーション）を使用して自己紹介サイトを作成しようと思います。
ついでにそのサイトでは、
今日の天気を教えてくれるAIを実装し、
そのAIにある合言葉を入力すると、秘密の言葉を教えてくれる隠し要素も実装しようと思います。
Markdown AIとは？
Markdown AIとは？
Markdown AIは、Qiitaでも採用されているMarkdown記法を使い、簡単にWebサイトを作成できる画期的なWebアプリケーションです。
HTML/CSS、JavaScriptにも対応しており、さらに、2024年11月29日にアップデートされたロボットAI(画像生成AI)機能により、プロンプトを入力するだけで簡単にオリジナル画像を生成できます。
Markdown AIの使い方
やってみよう
WEBページ用のmarkdownを作成
公開する自己紹介ページもせっかくなので、生成AIを使用して作成します。
今回はプレビュー表示がデフォルトで実装されているclaude.aiを使用します。
こんな感じ
プロンプト
イケてるシステムエンジニア用の自己紹介ページをmarkdown形式で作成してください。
SNSのリンクを一番上にしてください。
作成されたmarkdown（一部存在するアカウントリンクが作成されてしまったので置換済み）
# ジャスミン茶 - システムエンジニア
[](https://github.com/sonzaisinai)
[](https://twitter.com/sonzaisinai_dev)
[](https://linkedin.com/in/sonzaisinaiamada)
## 👨💻 About Me
クラウドネイティブな環境でスケーラブルなシステムの設計・開発に携わるバックエンドエンジニアです。新しい技術のキャッチアップが趣味で、週末はOSS活動やtech blogの執筆をしています。
## 🛠 Technical Skills
### 言語
- Go | Python | TypeScript | Java
- SQL | GraphQL
### インフラ/クラウド
- AWS (Solutions Architect Associate 認定)
- Kubernetes | Docker
- Terraform | Ansible
### ツール/フレームワーク
- gRPC | REST
- Redis | PostgreSQL | MongoDB
- GitLab CI/CD | GitHub Actions
- Prometheus | Grafana
## 💼 職歴
### シニアバックエンドエンジニア @ TechCorp (2020 - 現在)
- マイクロサービスアーキテクチャの設計と実装
- パフォーマンス最適化によるレスポンスタイム50%改善
- チーム規模を3名から10名に拡大、テックリード就任
### ソフトウェアエンジニア @ StartupX (2017 - 2020)
- Goによるバックエンドシステムの開発
- CI/CDパイプラインの構築
- アジャイル開発プロセスの導入
## 📚 Education
- 工学修士（情報工学）- XX大学 (2017)
- 情報工学学士 - XX大学 (2015)
## 🌟 Personal Projects
### CloudNative Dashboard
オープンソースのKubernetesモニタリングツール
- GitHub Stars: 500+
- 月間アクティブユーザー: 1,000+
- Go + React + Prometheus
### Tech Blog
[blog.sonzaisinaiamada.dev](https://blog.sonzaisinaiamada.dev)
- 週1回のtech記事投稿
- 月間PV: 10,000+
- 主な話題: Go, Kubernetes, システム設計
## 📫 Contact
- Email: taro@example.com
- Location: 東京
- 稼働形態: フルタイム（リモートワーク可）
ちなみにV０もプレビューできるので好きな生成AIを活用してみてください。
Markdown AIでWEBページを作成
「＋」ボタンでページを新規作成
上記で作成したmarkdownをコピペ
「View」ボタンでプレビュー
いい感じですね。
「Save」ボタンで保存しましょう。
編集したい場合は、「Markdown」ボタンで編集画面へ戻れます。
「Save」ボタンが黒い場合は、未保存です。
編集内容が破棄されないように定期的に保存しましょう。
逆に「Save」ボタンを押さない限り保存されないので、適当に遊びたい場合でももとに戻すのが簡単です。
※保存内容と編集内容に乖離がない場合のアイコン色
※保存済みの場合のアイコン色
隠し要素を追加
このセクションは、普通にサイトを作成して公開するだけの人は飛ばしてください。
生成AI要素を追加したい方には参考になるかと思います。
必要に応じて参考にしてみてください。
Markdown AIで今日の天気を教えてくれる生成AIを実装
このサイト用のAIを作成
このサイトで使用する生成AIを作成します。
ロボットのアイコンをクリックします。
好きなAIモデルを選択して、AIに名前を付けます。
プロンプトを入力します。
画面の一番したの「create」ボタンを押下します。
このボタン名について、
ちょこちょこアップデートがかかって名称変更があるのか、
現時点で公式が作成しているQiitaの記事が、作成済みのAIについての手順になっているのか、
どちらかわかりませんが、名称が一致しないかもしれません。
ページ一番したのそれっぽいボタンを押してください。
保存されたので、サイト作成ページに戻ります。
作成したAIをサイトに追加
とりあえずサイトの一番下に追加しようと思います。
「おまけ」セクションを追加して、追加したい場所にカーソルを置きます。
「Insert」ボタンをクリックします。
先ほど作成したAI用のサンプルScriptを追加するために、「Script」ボタンをクリックします。
先ほど作成したAiを選択して、「Insert」ボタンをクリックします。
Scriptが追加されました。必要に応じで修正して保存してください。
今回はこんな感じにしてみました。
※ちなみにリアルタイム天気予報は教えてくれないみたいでした。
お天気AIに隠し要素を実装
再度ロボットのアイコンをクリックします。
編集対象のAIを選択します。
プロンプトに以下を追加します。
編集内容を保存します。
保存されたので、サイト作成ページに戻ります。
更新内容の確認
都道府県を入力した場合
※気分が乗ったのか答えてくれるようになりました。
秘密の言葉を入力した場合
WEBを公開
以下でURLをコピーして電子名刺のリンクを更新しましょう。
公開設定
一度公開したサイトは、非公開にすることも可能
「Private」をクリックすると非公開に戻せます。
公開していたURLは使用できなくなりますので、注意してください。
公開→非公開→公開をすると異なるURLが採番されます。（後述）
※先ほどの公開ページのＵＲＬでは、ページが表示できなくなる。
まとめ
簡単にサイトを解説できるツールがたくさん出てきましたね。
今回は、markdown形式で、HTMLの知識も不要なので、直観的に非エンジニアもサイトが作成できるのではないでしょうか。