TIFのマイタイテっぽいサイトを作りました

3行まとめ

むかし、TIFのマイタイテをWeb上でポチポチ作れるサイトありましたよね？
今年は無かったので、自作してみました
JavaScript/CSSの勉強になったので、良かったです

https://soft.moo.jp/timetable/tif2023_0804/index.html

昔あった、ぽちぽちしてTIFのマイタイテ作れるサイト作りました。リロードしても消えない仕組みも入れてます。SKY入るのに何分かかるかは不明ですが、ご活用ください。https://t.co/cNbMvkBsEK#TIF #TIF2023
総制作時間10時間くらいで、バズったら8/5,6も作ります。

— む (@mrtpub) July 16, 2023

技術的なメモ

• HTML
  • こちらのサイトのタイムテーブルをベースに作っています。 https://tercel-tech.hatenablog.com/entry/2019/07/06/190452
    • CSSグリッドレイアウトと呼ぶようで、grid-columnやgrid-row属性でx,yの位置を決めています
    • 幅はspan属性で決めるようです。持ち時間はこれで指定しています。
  • まず外枠を作ってから、実際にタイテを入れる、という順番でサイトを作りました。
  • タイテはWebサイトをコピペしてきたものを、VSCodeで加工し、Pythonで加工することで、grid-columnやgrid-row属性を決定しています
    • データ確認の段階で、SKY STAGEは1日で35組出て最多…ということが分かったりしました
    • 必要なデータは、ステージ, 開始時刻, 終了時刻, グループ名です。これがあればタイテにできます
    • この工程が一番手作業が多いです。仕方ないですが。ゆえにめんどくさいです
• JavaScript
  • クリックしたときに、幅が大きくなるようにしています。grid-columnを広げているだけです。
    • もう一度クリックしたときに、元に戻るように、HTMLのカスタムデータ属性？（data-*ってやつ）に、元のgrid-columnの値を保持しています
    • 枠1つ1つに固有のidを降っています。idはsky_100のように、ステージ＋時間のようになっており、最初の文字列でクリック時の色をつけています
  • ページをリロードしても、クリックした内容が消えないようになっております
    • 選択内容をLocalStorageに保持しているため、また、読み込み時にLocalStorageの内容を読んできて、色をつけるという動作をしているためです
    • LocalStorageにはJSONで、{sky_100=1}のように、保持しています。実質的には左辺だけ使ってます。
    • 選択時にLocalStorageのJSONに追加、もう一度クリックしたときにLocalStorageのJSONから削除、しています
    • LocalStorageのJSONがNullだとエラーが起きるため、読み込み時にNullだった場合は、空のJSONを入れて初期化するようにしています。
    • 最初はCookieでやろうと思いましたが、めんどくさすぎたのとChromeはデフォルトでなんか追加してきたので、やめました。
  • 正直、例外を考慮していないので、変になることがある気がします。（開発中はなりました。）ので、LocalStorageをクリアして再読み込みする「選択全解除」ボタンをつけています
• CSS
  • あまりいじっていません。要らない要素も残っています
  • iPhoneのSafariだと、タイテをポチポチすると文字サイズが勝手に変わります。
    • -webkit-text-size-adjust: 100%;をbodyに設定すると、文字サイズが勝手に変わらなくて済むようです
  • 選択時、要素にmyTimetableというClassを追加します。これにより、選択・選択解除の判定と設定のコードが少なめになっています
  • ステージの色は、.hot、.skyなど一つ一つ手打ちです
  • すてキャの出番が色付き枠担っているのも、suteneko_skyなど、手打ちです
• その他
  • Twitterにリンクを貼ったときに、プレビューが出るように、metaに要素を記述しています