Rust.Tokyoで友達100人作るためにRustacean用の名刺を作った！！

# 前置き
こんにちは。細々とプログラミングをしている[sotanengel](https://x.com/sota_eng_prog)で、

なんていつも通りの挨拶してる場合じゃねえ！
日本で年に一度開催されるRustのカンファレンスが11月30日に開催予定だ！！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1758960/b144a757-8cff-fc45-3c41-25cee9ee6c1d.png)

まだまだ実務でRust使える会社が少ない中でも、色んな知見が得られそうでオラワクワクが止まらねえぞ👊
<font color="red">p.s. 当方、大会の運営者とかでは全くないです←</font>


https://rust.tokyo/

ちなみに現地チケットはもう売り切れたっぽい？んですが、オンラインであれば無料で視聴できるそうなんで、RustラブなRustaceanの方々は以下をご確認ください。

https://rust.connpass.com/event/332570/


# はじめに
さて、一旦落ち着きまして。
私はオフラインチケットをゲットしたので、現地に行く予定なんですが、
「せっかく対面でRustaceanに会えるのであれば名刺作ってみるか〜」と思ったので、
- 紙の名刺
- デジタル名刺

の2パターンを簡単に作れるサイトを作ってみました。
もしも同じように使ってみたい方がいれば、以下参考にしてください👀

# 使い方
## 紙の名刺
※すみません、GitHubページでいい感じに実装するつもりではいたのですが、GitHubのリポジトリ情報を取得する部分がうまくいかなかったのでダウンロードしてお手元でお試しください🙇
(改善したかったがイベントの開催が近いので、現時点での最善バージョンを共有します)

### 1. コードをダウンロード
以下のリポジトリのファイルをダウンロード or gitクローンします。 

https://github.com/sotanengel/engineer-meishi-generator

### 2. ダウンロードしたフォルダ内でHTTP サーバーを起動
私の場合はNode.jsの実行ツールを利用

```bash
cd engineer-meishi-generator
npx http-server .
```

### 3. 起動したサーバーのindex.htmlにアクセスし、必要な情報を埋める
以下のような画面が出てくると思うので、必要な情報を埋めてください。
| 入力欄 | 説明 | 例 |
|---|---|---|
| 肩書き | 自分の本業や役職などを書いてください | バックエンドエンジニア |
| 名前 | 名刺の表記名 | sotanengel |
| 興味のあること | 興味のあることを書いてください | Rustのバックエンド開発 |
| メールアドレス | メールアドレス | example@gmail.com |
| GitHubのプロフィールURL | GitHubのプロフィールのURL | https://github.com/sotanengel |
| QiitaのURL | QiitaのプロフィールのURL | https://qiita.com/sotanengel |
| XのURL | XのプロフィールのURL | https://x.com/sota_eng_prog |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1758960/b8287414-0a47-da2a-3cb1-58c5fe0c1bbd.png)


### 4. プレビューを確認したら、PDFをダウンロード
こんな感じで結果が出力されます！
1枚目のプロフィール画像はGitHubの画像から自動的に配置されます。

また、ちょっと遊び心を入れたいと思っていたのでRustのカニさんにも登場してもらいました。
GitHubのRustを使ったリポジトリのスター数に応じて色が変化するようになってます👀

QRコードには後述するデジタル名刺のURLが格納されているので、こっちを作る方が手間としては楽です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1758960/8e960683-4996-3f6d-f2cd-d6906e96cac6.png)


### 5. (お好み)ラクスルで印刷する
ラクスルのサイトでダウンロードしたPDFを入稿しましょう。

1. [名刺作成ページ](https://design.raksul.com/products/business_card)へ移動
2. 「白紙から作成」→オンライン作成ページは空白のまま「確認して注文に進む」→「名刺購入に進む」
3. 用紙の種類を選び、カートに入れる
4. カート画面でデータを入稿し、購入する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1758960/0d7e4ac1-2289-6a29-856c-5fa6dfab7300.png)

## デジタル名刺
### 1. 名刺に載せたい情報を整理します

| キー名 | 説明 | 例 |
|---|---|---|
| name | 名刺の表記名 | sotanengel |
| github | GitHubのアカウント名 | sotanengel |
| email | メールアドレス | example@gmail.com |
| qiita | Qiitaのアカウント名 | sotanengel |
| x | Xのアカウント名 | sotanengel |
| repo1 | 名刺に表示するRustを使ったリポジトリ名(1個目) | rustlings-jp |
| repo2 | ``(2個目) | typo_checker |
| repo3 |``(3個目) | class-creator-rust-wasm |

### 2. URLに上記のパラメータを追加します

```bash
https://sotanengel.github.io/engineer-meishi-generator/digital_meishi/20241107_for_rust_tokyo.html?name=sotanengel&github=sotanengel&email=example@gmail.com&qiita=sotanengel&x=sota_eng_prog&repo1=rustlings-jp&repo2=typo_checker&repo3=class-creator-rust-wasm
```

### 3. URLにアクセスしてちゃんと機能するか確認
以下のような感じで、各種SNSへのアクセスボタンとRustを使ったリポジトリへのリンクが表示されます！
Rustaceanに紹介&自慢したいRustリポジトリを登録して、みんなに見てもらおう👀
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1758960/3b4b1571-8c7d-de7f-9077-33ac137ad372.png)

### 4. (お好み)NFCカードなどに書き込み
NFCカードにURLを書き込んでおくと、スマホにカードをかざすことで上記のページにアクセスできるようになります。
私は以下のページを参考にして、カードに上記のURLを登録しました！

https://note.com/yas_bizdev/n/n9802449a1536

# さいごに
現地で参加される方はお会いできるの楽しみにしてます！！
(友達100人できるかなWAKUWAKU)

p.s. デジタル名刺、ちょっとダサいので誰かHTMLﾁｮｯﾄﾜｶﾙRustaceanがいらっしゃれば、PRなどで改善案出していただけると助かります🙇

https://github.com/sotanengel/engineer-meishi-generator/pulls