大規模改修情報

つまみネットの大規模改修について説明します。

これは何?

これまでのつまみネットは HTML + CSS + JavaScript のほぼ完全手打ちで作成していました。

これはこれでとても勉強になって良かったのですが、 流石にやることが少なくなってきた (あるけど労力と成果が見合わなそうなことがたくさん) のとオタクのおすすめもあり、Next.js を使ってほぼ一から書き直しました。

今回、今までと比べてかなり軽いサイトができたので、 「古代技術で作られた今までの激重サイトから早く引越ししたい!」 と早期での移行を決めました。 というのも、いくつかのコンテンツは移行が終わっていません。(は?)

そのことも含めて、このページではいくつかの変更点を説明します。

なお、以前のサイトは old.trpfrog.net で公開しています。

無くしたもの

Statsの削除

今まで Web Storage API を用いて風船を割った数を記録してトップページに表示していましたが、 思ったよりも保存期間が短く、せっかく割っても記録があまり残りませんでした。 あと単純に面白くなかったので削除しました。(あと実装が面倒だった)

Walkingページの中身入れ替え

今までは過去の徒歩を全部紹介していましたが、 更新がつらすぎるのでブログ記事へのリンクまとめサイトに変えました。

クリックで変わるつまみアイコン

実装が面倒なのと重たすぎるのが理由で今回は実装を見送りました。 気が向いたらやるかもしれませんが、うーん……

新しい要素

相互リンク

相互リンクが増えてきてトップページが巨大になってきたので単独ページにお引越ししました。

Links

Works

作ったやつをまとめるページを作りました。

Works

ページ遷移トランジションの追加

ライブラリが使いやすくなったので「すごいだろう!」 がやりたいがためにトランジションを追加しました。 普通に見にくい気がするので気分で消すかもしれません。(は?)

リニューアル

デザインの変更

「緑の背景に黒い文字は読みにくいよね」ということで配色をかなり変えました。

それと現在いるページが分かりやすいようにナビゲーションバーのデザインも少し変えました。

アイコンメーカーのTypeScript移行

JavaScriptで書いていたアイコンメーカーをTypeScriptで書き直しました。

若干バグがあるので、気に食わない人は ここ から古いバージョンを使ってください。(まず使う人はいないが……)

風船コーナーのTypeScript移行

JavaScriptで書いていた風船コーナーをTypeScriptで書き直しました。

風船を増やす操作がリアルタイムでできて良い感じです。

画像置き場にCloudinaryを使用

Cloudinaryはデバイスに最適なサイズで画像を落とすらしいのでより軽いサイトになる……はずです。

未実装の要素

Random Notes (雑ブログ)

雑ブログは移行に難航しているため未実装です。過去の記事は old.trpfrog.net/notes から見られるようにしているのでゆるしてください。リダイレクトも設定しています。

できるだけ早く移行できるように頑張ります。

移行前の内容を表示

なぜ Next.js に移行するの?

  • HTML/CSS/JavaScript で一から作る温かみのあるサイト作りも楽しいけど、 周辺ツール作りでちょっとつらくなってきた
  • あと単純にNext.jsが面白そうだった

やってみてどう?

  • 共通部分を作るのが楽
  • ただフレームワークなしの方が融通が効くところもあり、ちょっと書くのがつらい
  • でも慣れと知識量の問題っぽくはある
  • 完全移植はまだ先が長そうでグエ-という感じ

移植状況

  • 2021/12/24
    • サイトの共通部分をだいたい移植した
    • 作業環境ページをほぼ100%移植した
  • 2021/12/27
    • リンク集を移植した
    • トップページの体裁を整えた 🎉
  • 2021/12/28
    • リンク集の形式を見やすく変えた
    • 画像サーバにCloudinaryを採用して高速化
      • 既知の問題: 設定が間違っているのかサーバの応答が異様に遅い
    • スタンプ一覧ページを追加
    • ストアリンクをトップページに追加
    • つまみのうた情報をトップページに追加
    • つまみのうたの歌詞を追加 🎉
    • プロフィールを追加 🎉
    • 仮のサイト内リンク集を作成
  • 2021/12/30
    • アイコン集のページを追加 🎉
    • スタンプ集・アイコン集に拡大表示を追加 🎉
    • 相互リンクが増えてきたので移動
    • トップページにアイコン紹介を追加
    • Statsの廃止に関する案内を追加
    • GlobalなCSSにSCSSを採用
  • 2021/12/31
    • ハンバーガーメニューを追加 🎉
    • 法律関係の文書ページを追加
    • デザインをかなり変更
      • やっぱり白地に黒字が一番読みやすいですよねという
      • ヘッダーのデザインを若干変更
        • つまみアイコンの位置を変更
        • PC用のヘッダーを薄くして小さい画面でも見やすくした
        • 実は更なる改善案を考えているが、実装が大変そうなのでまた今度
      • 更にフラットデザインを意識してぼけた要素(はっきりしない影)も排除した
      • li要素のbullet(箇条書きの点)のデザインもしっかり自分で用意した
      • ナビゲーションバーとヘッダーが重なるところも色を塗った(?)
        • スマホで上に素早くスクロールするとnavバーとヘッダーの間に一瞬白い隙間が見えるアレを改善
        • 超高速でやるとまだ見えるけどブラウザの仕様っぽいので流石にそれはどうしようもできない
      • 緑色のボタンのデザインをもっと丸く変更した
  • 2022/1/1
    • あけましておめでとうございます。本年もよろしくお願いします。
    • 風船ページを追加 🎉
  • 2022/1/3
    • Worksページを追加 🎉
    • 徒歩記事まとめページを追加 🎉
    • フッターの著作権の年を 2019 - 2022 に変更
    • ダウンロードコンテンツページを追加 🎉
    • アイコンメーカーをTypeScriptで書き直しました 🎉
    • トップに戻るボタンを追加
    • Twitterカード等のメタデータを追加
    • ナビゲーションバーのデザインを変更
    • ページトランジションを追加
      • あまり気に入っていない
      • 本当はクロスフェードにしたいがやり方がよくわからず……

Todo

  • 頑張るぞ
    • Random notesの移植
    • つまみログの移行
  • 簡単そうだから気が向いたらやるかも
    • 上に戻るボタンの移植