運営感想 - サイトについて2

参加者一覧の書き換え

はじめにでも述べたように、エントリーの受付はちょっぴり手間な仕事ですが、参加者としては受理されたことをなるたけ早く確認したい…かと思うので、そこに気を遣うなら参加者一覧の更新は頻繁に行うことになります。そのため、参加者一覧だけは簡単に更新できるよう工夫してあります。そんなに簡単になってないという説もあります。

参加者一覧のページは/src/pages/performersですが、表示する情報の本体は/src/components/performer.jsonにあります。

中身はサンプルに書き換え済み。各項目について説明します。ほぼそのまんまですが。

• name: もちろん参加者名を入れます。
• _id: ニコニコアカウントのID（数字の部分のみ）を入れます。参加者一覧にはユーザーページのリンクが表示されます。
• url: ニコニコIDの代わりに別のサービスのアカウント等をもらっている場合は、ここに（URL全文を）入れます。
• comment: コメントを入れます。改行は<br>に置き換える必要があることに注意。というか生のhtmlが入るので、実は多少の無茶振りにも対応できます。
• movie: 大会当日、動画が投稿されたらID（sm含む）をここに入れましょう。それまでは空白で。（[""]でも[]でもOK）

空白の項目が2つあるのは、「空白に新しい参加者の情報を追加→空白項目をコピー」という流れでスムーズに追加を行うためです。「空白コピーを忘れて参加者情報を追加して空白を埋めてしまった」ということにならないのがポイント。

参加者一覧にはもういくつか大事な要素があります。エントリーナンバーとアイコン画像です。

• エントリーナンバー

エントリーナンバーは、なんとjsonの記載順に自動で割り振られます。つまりナンバーを受付順に割り振るなら、新しい参加者はただ一番下に追加していくだけで正しい番号を振ってくれるわけです。便利！
ただし代償として、参加者一覧ページで番号をコピペすることができないため動画の編集とかでちょっとだけ不便。箇条書きの頭とかと同じで疑似要素っていうやつらしいです。
なお空白項目を入れても番号が飛ばされることはありません。
（あと、jsonが要素の順番を保持してるのは実はデータベースの設計思想的なアレに対してイレギュラーで、利用するのはあんまり良くないらしいです。ごめん）

• アイコン画像

画像はニコニコアカウントから取得します。
編集時点での仕様では、こんな感じ（運営のアイコン）で、https://dcdn.cdn.nimg.jp/nicoaccount/usericon/に「(IDの下四桁を除いた数字)/(ID).jpg」をつけることで取得できます。これをリポジトリの、/static/imgに追加しましょう。
これだけでOKです。というのも、参加者一覧ページは、「jsonに記入したユーザーIDと同名の画像」を参照して表示します。そして、上記のページのアイコンの名前は、URLの通りIDとなっています。この仕様のおかげで、画像を参照する工程をまるまる省くことができたのですね。 え、画像のアップロードもしないでweb上の画像を直接表示すればいいじゃないかって？いやそれは…参加時点のアイコンを残しておいた方がいいかなって…
なお_idが空の場合はname（参加者名）と同名の画像を参照します。今回このケースはありませんでしたが、その際は画像の名前をユーザー名に合わせましょう。ファイル名にできない文字列が入ってたら配慮を求めるかソースを書き換えて。jsonの上にあるperformer.jsが各データを表示するパーツ部分です。

この辺りが一番無駄に時間をかけた仕様です。よければ使ってね。
最後に、jsonはカンマの配置とか厳しいのでうっかり余計な書き換えをしないよう注意。

更新情報の書き換え

メインページの下にある更新情報は、/src/pages/blog内のmd（Markdown）ファイルの内容を表示しています。

ファイル名はURLに。中身を見てみましょう。

Markdownファイルなので成形された画面が出てしまいますが、右のRawか編集画面からテキストを見ることができます。

dateで投稿日を指定。トップページにはこの順で並びます。
titleはもちろんページのタイトル。
本文の記法はMarkdownを勉強してね。

記事の削除はmdファイルごと削除するだけ。ファイルは残したまま記事を生成しないようにする、みたいな仕組みは用意してないので悪しからず。

その他

その昔（恐らく2019年度）大会サイトを初めて訪れたとき、情報の少なさに驚きました。実際には情報は無かったのではなく、ただ気付かなかったのです。スマホの画面右上のハンバーガーメニューの存在に。（確か当時はコミュニティを見ることで解決しました。そもそも情報の中心はそこだった）
サイトは他にも、スマホだとコンテンツが異様に縦長になったり、PCでも画面上端のメニューに気付きにくかったり（これは私があほなだけ）と気になるところはあったものの、それらを除けばとても好きなデザインだったため、運営に際し、この初代運営のサイトをベースとしつつアレンジを加えたサイトを作ることにしました。

知識ゼロからネットの海を彷徨い、勘でGatsbyを選んだわけですが、これは正直言って失敗でした。何しろ、Gatsbyによるサイト制作に必要な知識は「html, cssの知識」「Node.jsの知識」「Reactの知識」「Gatsbyの知識」などなどが積み重なってできており、やりたいことや分からないところのためにどのレイヤーを調べれば良いのかがさっぱり分からなかったのです。これらの何れに対しても初心者だったので猶更。結果的には多少の便利機能の恩恵を受けられているような気もしますが、謎のエラーに悩まされていた時間を考えれば、一から作るならこの道には来るんじゃないと言わざるを得ない。
ちなみに初代運営のサイトは、よく見ると分かりますが（サイト作り始めてから気付いた）NetlifyとHugoからできているらしいです。雛形を使う場合はまた変わってくるかと思いますが、いずれにせよGatsbyよりはマシなんじゃないでしょうか。

あとはもうちょっと細かい内容について書いていきます。

• 背景色が赤っぽいのは、何故かそんな気がしていたからです。もう一つの背景色である灰色は元サイトの明るい方の色で、スポイトしてみて初めて知ったのですがカラーコードが#252525となっています。意図してなのかは知らんけど。
• メニューの表示は、最初ハンバーガーメニューを検討していたけど実装の難しさと不便さから諦めてこうなりました。項目が少ないので分かりにくいけどスマホでは左右にスクロールするようになっていて、これはVOCALOMAKETS公式サイトを参考にしています。
• 左（スマホならホームのトップ）のスケジュールのハイライトは時期に合わせて変えていました（ここなど）。StLinkがサイト内リンクのタグ（aタグより速くなる）。面倒ならハイライトは消しておきましょう。
• 404（無いページを指定すれば飛べるけどまず踏む機会がない）には過去の動画をランダムで表示するようにしていますが、ソースを見ると分かるように、表示する動画リストは手打ちです。でも2022年度の動画も既に追加してあるので安心！いやまあ、面倒なら動画を表示する部分ごと消しといてください…。
• なんか一時期リンクとか色がバグってました。今は直ってるかも知らん。
• サイトのURL表記に「~.gatsbyjs.io」と「~.gtsb.io」が混在していることに気づいたでしょうか。一応gatsbyjsの方が正しいドメイン、gtsbの方はビルドの履歴を収めていてサイトと同名だと常に最新のビルドが入る、という仕様らしいのですが、恐らく違いはありません。強いて言うならgtsbはデフォルトで検索に出ないようになっているらしいのですが、gatsbyjsの方もこのサイトは何故か検索できないので結局違いはありません。（修正できないこともなさそうだけど、Twitterとかニコニコとか出るしいいかなって）以前gatsbyjsの方がアクセスできなくなったことがあり、その時にgtsbの方に置き換えたのですが、そちらも404が見られないとかの不具合が出たり出なかったりしており、よくわかんないです。

他にも色々とあるけど、大体見たままなのでここまでにしておきます。行き当たりばったりで書いていたので大分分かりにくくなりました。サイトを使いたいけど分からないことがある、というときには気軽に相談してください。