❤️‍🔥

サーバーに'入る'だけでプロフィールページを生成したい!

2025/02/02に公開

なにを作ったの?

とあるDiscordサーバーに"入る"だけで自分のプロフィールが表示されるようなWebアプリを作りました!
https://github.com/L4Ph/Anchor

どう使うの?

1. LanyardのDiscordサーバーに参加します。

2. DiscordのユーザーIDを取得する。

Discordの開発者モードを有効化し、ユーザーIDを取得する必要があります。
ユーザーIDの取得の仕方はDiscordのサポートページを参考にしてください。

Go your web site!

参加し、ユーザー名が取得できたら、
https://anchor.deno.dev/users/あなたのユーザーID
にアクセスしてみましょう。

たとえば私のDiscordのユーザーIDは481507352357634049なので、
https://anchor.deno.dev/users/481507352357634049になります。

下記のようなページが表示されているはずです。

カスタマイズする

慣れてきたら、Lanyardの#kv-commandsチャンネルを見てみましょう。

ここではコマンドを入力することで、KV(Key Value)の値を変更することができます。

.set profile 設定したいプロフィール

とコマンドを入力すると、下記のように、APIレスポンスにKVが設定されます。

{
  "data": {
    "kv": {
      "github": "https://github.com/L4Ph",
      "profile": "Keyboard otaku in 🗾"
    },
  },
}

現在はGitHubとプロフィールの表示のみですが、今後少しずつ表示内容を増やす予定です!(X、Facebook、Youtubeあたりはすぐにサポートします!)

Lanyardってなに?

DiscordのPresence(プロフィールや、アクティビティ諸々)をDiscordボットが監視し、これをもとにAPIエンドポイント(api.lanyard.rest/v1/users/:your_id)や、WebSocketとして出力するサービスです。

DiscordのAPIは認証他いろいろがまぁまぁ面倒なので、参照だけを行いたい場合は非常に便利です。

https://lanyard.eggsy.xyz/ にアクセスしてみて、自分のユーザーIDを打ち込んでみると以下のようにAPIレスポンスが見れます。

{
  "data": {
    "kv": {
      "github": "https://github.com/L4Ph",
      "profile": "Keyboard otaku in 🗾"
    },
    "discord_user": {
      "id": "481507352357634049",
      "username": "l4.ph",
      "avatar": "1e7da090bcc678de9a61a9d72c140ce0",
      "discriminator": "0",
      "clan": null,
      "avatar_decoration_data": null,
      "bot": false,
      "global_name": "LaPh",
      "primary_guild": null,
      "display_name": "LaPh",
      "public_flags": 128
    },
    "activities": [],
    "discord_status": "online",
    "active_on_discord_web": false,
    "active_on_discord_desktop": true,
    "active_on_discord_mobile": false,
    "listening_to_spotify": false,
    "spotify": null
  },
  "success": true
}

一番短い状態だと、このような形で表示されます。

https://github.com/phineas/lanyard

オープンソースなので、セルフホスティングも可能です。
Dart、React Hooks、SWR向けのReact Hooks、VueプラグインやSvelteやGo向けのラッパーなど、色々あるので、使ってみたい方はCommunity Projectsの欄を見てみてください。

非公式ですが、APIドキュメントは以下にあります。

https://lanyard.eggsy.xyz/api/introduction

使った技術的なお話

使ったのは以下です。

  • Hono
  • Deno
  • TailwindCSS

後述しますが、少しミスったなーと思わなくもない技術選定だったので、そのうち修正するかもしれません。

Hono

めちゃくちゃいいです。
とてもよい。

もともとはReadmeにNow Playingの画像を返すだけのAPIエンドポイントを作ろうと思っていたのですが、その延長線上で使っています。

APIを書くのがとても楽です。
あとはデプロイ先の選択肢が多いのが個人的に少しうれしい部分でした。

hono/jsx

めちゃくちゃいい
APIといいつつも、Viewされるものがあるので、とても体験がよいです。

API書いてて、ちょっとUI返したいな~とか、値受け取るUI表示したいな~ってときにとても便利です。

ミスったなーと思ったところ。

結構ガッツリフロント書いてしまったのがミス。
HonoX使っておけばよかったな...という後悔(HMRないとかいろいろ)
後述する問題もある。

Deno

よくもなければ悪くもない。
node_modulesなし、デフォルトでtsサポートは嬉しいし、とても開発体験がよい。

Deno Deployも使いやすいし、シンプル。

ミスったなーと思ったところ。

ユーザー名をコピーするためのコンポーネントを作ったが、これがちゃんと動いてくれない。
@skanehiraさんのdeno-clippyも使わせていただいたのですが、サーバー側のコンポーネントだからなのか、上手く動かず、一度断念しました。
多分自分の実装ミスってるだけなんでしょうけど...

https://zenn.dev/skanehira/articles/2022-08-22-deno-clipboard

clipboard周りの実装がDenoに入ってないのなんで~~~となっています。
わかる方いらっしゃったら、コメントなり、Xでのリプライなりお待ちしております。

TailwindCSS

悪くはない。
よくもない。

ミスったなーと思ったところ。

依存関係として含めて使うには、かなりゴニョゴニョしないといけない部分がかなり厄介。

https://zenn.dev/5t111111/scraps/36dade8c26f5c6

CDNからTailwind使うと、かなりパフォーマンスの観点でよろしくない印象があるので、そのうちなにかしらに移行したいです。
Twindが無難だとは思うんですが、どこまでサポートされてるのかわからない...

その他気になったところ。

HonoXに乗り換えれば問題なくTailwindも使えるとは思うんですが、そうなると次はDeno Deployにどうデプロイするんだろう???となっています。

Pages / Workersでもよいといえばよいのですが、いまのところDenoを触るためにDeno Deployを使っている形なので、わざわざDeno使う理由もなくなってきてしまって、破綻しそうなので迷っています。

今後やりたいこと

  • kvで表示できるものを増やす。
  • HonoXなりに移行する(?)
  • キャッシュをちゃんと活用してあげたい

とくに最後はちゃんとやりたいですね...
毎回APIリクエスト吐いてるのはちょっとよろしくないように感じています...

総括

Honoはいいぞ(いいぞ)

今回作成したアプリケーションは下記でソースコードを公開しています!
Starください!!!

https://github.com/L4Ph/Anchor

ここの実装気になるなぁとか、これ直したよ!!!があれば、issue、PRお待ちしています。
興味が出たら、ぜひ使ってください!!!

特に問題がなければ、無料か少しコストがかかるくらいで使えるので、当面は維持する予定です!

Discussion