新公式サイトのお話

  • Web
  • この記事はwamoが覚えている範囲内で非常に雑に書いた記事です。
    温かい目で見てやってください。(重箱の隅をつつくのはやめてください)

    目次
    1. 公式サイトができるまで
    2. は?
    3. 使った物
      1. Next.js
      2. Tailwind CSS ( + Headless UI )
      3. react-hook-form
      4. Typescript
      5. Ghost
      6. Sentry
      7. Appzi
    4. 開発中の問題
      1. i18nをexportできなかった
      2. カウントダウン機能がうまく動かなかった
      3. HTMLコメント
      4. 翻訳
    5. 終わりに

    公式サイトができるまで

    2022年01月08日 12:00

    wamo

    せや、新しいVCbornの公式サイト作ったろ

    あとNext.js久しぶりに触りたいからNext.js使ってやるわ

    2022年01月08日 15:00

    wamo

    あらかたできた

    2022年01月09日 12:30

    wamo

    あとは参加フォームのバリデーションとメール送信の機能追加して…

    2022年01月09日 17:30

    wamo

    クリエイターページのカードをjsonで生成するようにして…

    2022年01月10日 17:50

    wamo

    ローディング画面作って…

    2022年01月12日 20:00

    wamo

    せっかくだしGhostで管理できるようにするか…

    wamo

    後は404ページ作って…

    wamo

    よしゃ、完成や!

    は?

    そうですね、説明不足です。

    まず、以前のサイトと比べて良くなった点を紹介します。

    • ページ遷移が速くなった
    • 画像が自動で最適化されるようになった
    • ダークモードに対応した
    • ニュースをGhostで管理できるようになった
    • クリエイター一覧をjsonで管理できるようになった
    • ドロワーができた
    • Sentryでエラー追跡がしやすくなった

    悪くなった点としては、

    • 読み込みが遅くなった
    • Node.jsサーバーを用意しないといけなくなった(後述)

    などがあげられます。

    使った物

    Next.js

    https://nextjs.org/

    Reactベースのフロントエンドフレームワークです。

    Reactの環境構築で面倒な所を大体やってくれるので非常に楽です。

    Tailwind CSS ( + Headless UI )

    Tailwind CSSはこちらの記事で詳しく紹介しています。

    Headless UIはそれを使ったサンプルがあったので使いました。

    react-hook-form

    フォームのバリデーションに使用しました。

    正規表現を簡単にバリデーションに使えるので非常に便利です。

    Typescript

    Microsoftが開発しているJavascriptに型付けを追加したような言語です。

    エラーをある程度未然に防ぐことができ、またコードの読みやすさが向上するのでおすすめです。

    Ghost

    https://ghost.org/

    オープンソースのCMSです。

    今回はHeadless CMSとして使用しています。

    Sentry

    https://sentry.io/welcome/

    フロント/バックエンドでエラーが発生したときに自動で通知してくれるサービスです。

    Appzi

    https://www.appzi.com/

    フィードバック管理を楽にできるサービスです。

    日本語に対応していないのが難点。

    開発中の問題

    i18nをexportできなかった

    Next.jsのi18n-routingはnext exportをサポートしていないため、静的サイトとしての出力ができませんでした。

    他のライブラリを使えばいけないことはないのですが、面倒だったのでOCIでサーバーを新しく立てました。

    カウントダウン機能がうまく動かなかった

    これに関しては今も原因は良く分かっていないのですが、なぜかカウントダウンタイマー用のdivがカウントダウン終了後も残ってしまい、そのままページに適用されてしまいました。

    カウントダウンタイマーのdivをmainにしたらなぜか直りました。

    問題なければ全てヨシ!

    HTMLコメント

    面白い要素を入れたかったのでHTMLコメントでアスキーアートを作ったのですが、JSXではコメントが出力されません。

    しょうがないのでdangerouslySetInnerHTMLでコメントを出力するようにしました。

    (404ページのコーヒーマシンもライセンスをコメントで出力しています)

    翻訳

    この記事を参考にしました。

    https://zenn.dev/steelydylan/articles/nextjs-with-i18n

    利用規約などの長文を翻訳する方法に悩みましたが、私は馬鹿なのでこのようなやり方をしました。

    二度とやりたくありません。

    終わりに

    新しい公式サイトはこちらからご覧いただけます。

    https://vcborn.com

    もし改善案等ありましたら、右下のフィードバックボタンからご意見をお寄せください。

    アバター

    著者:wamo

    記事一覧

    ウェブ開発とか翻訳とかやってる人。

    コメントを書く

    メールアドレスが公開されることはありません。 が付いている欄は必須項目です

    日本語が含まれない投稿は無視されますのでご注意ください。