Discordアイコン"風"ジェネレーターの作成

GitHub Pageを使用した静的Webページの公開

初めに

エンジニアになったのでWebサイトを作りたいな～と思いました。
特に作りたいサイトはなかったのですが、個人的にDiscordの初期アイコンが好きで
様々な色のアイコンがほしいと思ったので、Discordアイコン"風"ジェネレーターを作りました。

作成したサイト

https://onoshii.github.io/discord-avatar-generator/

手順

1.GitHubアカウントの作成

割愛します。

2.コードの作成

GitHub Pageは静的なサイトしか作れないと何処かに書いていたので
HTML,CSS,JSのシンプルな作りにしました。フレームワークやライブラリは一切使ってないです。
というかほとんどAIで書きました。

今回のWebページ作成で特徴的なのは下記部分

      <div id="svg-container">
        <svg
          id="discord-icon"
          fill="none"
          height="368"
          width="368"
          viewBox="0 0 92 92"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="m0 0h91.5618v91.5618h-91.5618z" fill="#5865f2" />
          <path
            d="m62.4748 30.774c5.3952 7.9886 8.0596 16.9995 7.0636 27.3732-.0042.0439-.0269.0842-.0627.1106-4.0857 3.0213-8.0441 4.8549-11.947 6.0708-.0304.0093-.063.0088-.093-.0014-.0301-.0103-.0563-.0297-.0748-.0557-.9017-1.2635-1.721-2.5955-2.4388-3.9943-.0412-.0824-.0035-.1816.0812-.2141 1.3012-.4937 2.5385-1.0854 3.7286-1.786.0937-.0554.0997-.1907.0131-.2556-.2526-.1889-.5028-.3873-.7422-.5858-.0448-.0366-.1051-.0439-.1559-.0192-7.7264 3.5932-16.1903 3.5932-24.008 0-.0508-.0229-.1111-.015-.1547.021-.2388.1985-.4896.3951-.7398.584-.0866.0649-.0795.2002.0149.2556 1.1901.6873 2.4274 1.2923 3.7267 1.7884.0842.0325.1242.1293.0824.2117-.7022 1.4006-1.5215 2.7326-2.4399 3.9961-.04.0511-.1057.0746-.1678.0553-3.8844-1.2159-7.8428-3.0495-11.9285-6.0708-.034-.0264-.0585-.0685-.0621-.1124-.8324-8.9731.8641-18.0586 7.057-27.3732.015-.0246.0377-.0439.0639-.0553 3.0473-1.4084 6.3118-2.4446 9.7239-3.0363.0621-.0096.1242.0192.1564.0746.4216.7517.9035 1.7157 1.2296 2.5035 3.5965-.5533 7.2493-.5533 10.9211 0 .326-.771.7912-1.7518 1.211-2.5035.0149-.0275.0381-.0495.0662-.0629s.0597-.0175.0902-.0117c3.4139.5935 6.6785 1.6297 9.7233 3.0363.0268.0114.0489.0307.0621.0571zm-20.2455 17.0609c.0376-2.6527-1.8828-4.8477-4.2934-4.8477-2.391 0-4.2929 2.1758-4.2929 4.8477 0 2.6713 1.9395 4.847 4.2929 4.847 2.3915 0 4.2934-2.1757 4.2934-4.847zm15.8732 0c.0376-2.6527-1.8828-4.8477-4.2928-4.8477-2.3916 0-4.2935 2.1758-4.2935 4.8477 0 2.6713 1.9395 4.847 4.2935 4.847 2.41 0 4.2928-2.1757 4.2928-4.847z"
            fill="#fff"
          />
        </svg>
      </div>

PNGで色を塗ると画質が悪いので、SVGでDiscordのアイコン"風"の内容を作成し
色が塗られている部分を変更する処理にしました。

詳しくはリポジトリを見てください。
https://github.com/onoshii/discord-avatar-generator

3.Push

コードを作成し終わったらGitHubにPushします。
VscodeでPushをすればボタンをポチポチしているだけで良いので割愛

4.GitHub Pageの設定

Repository>Settings>Pagesに移動し、GitHub Actionsを選択します。
.github/workflowsが作成されれば完了です。

作成後もう一度Pagesを確認すればURLが公開されています。

5.ページにアクセス

見たことがないDiscord初期アイコンカラーを作成できます。
正直実用性は皆無です。

終わりに

とりあえず記事を作成してみたかったので作成してみました。
参考にはしないでください。

おわり