Repolode
投稿する
SeanWong17

SeanWong17/Future-Style-Periodic-Table

TypeScriptとViteで構築された、3D軌道モデルやヒートマップ、二言語UIを備えるサイバーパンク風のインタラクティブな118元素周期表。

GitHub で見る公式サイト
スター
616
フォーク
80
未解決の Issue
0
最終コミット
9 日前

これは何？

Future Style Periodic Tableは、暗くサイバーパンクを思わせるビジュアルに、元素カテゴリをネオンカラーで強調した表示やグラスモーフィズムのパネルを組み合わせた、ブラウザで使えるインタラクティブな周期表です。118種類すべての元素を掲載し、各元素を開くと原子番号、原子量、電子配置、同位体、代表的な酸化状態を確認できます。

原子半径、電気陰性度、イオン化エネルギー、融点、沸点などの性質に応じて表の色を変えるヒートマップモードもあります。元素をクリックすると、CSS 3D transformsで作られた簡易的な3Dボーア模型が開きます。ドラッグして回転でき、全画面表示ではホイールでズームできます。このモデルは学習用であり、実際の確率に基づく電子雲を表すものではないとプロジェクトでは説明しています。

サイトはTypeScriptとViteで実装され、表のレイアウトにはCSS Gridを使用しています。中国語と英語を切り替えられます。npmでローカル実行できるほか、GitHub Pages向けにビルドしたり、Dockerコンテナから配信したりできます。

主な機能

  • 01118元素すべてを網羅したインタラクティブな周期表。カテゴリでの絞り込みや、元素記号・名前・原子番号での検索に対応。
  • 02電気陰性度や融点などの性質に応じて元素を色分けするヒートマップモード。
  • 03回転でき、全画面表示とズームにも対応した簡易的な3Dボーア型原子モデル。
  • 04電子配置、同位体、代表的な酸化状態を表示する詳細カード。
  • 05中国語と英語の切り替えに対応し、デスクトップとモバイルに適応するレイアウト。

ユースケース

  • 一般化学の授業や、学生への周期表の導入。
  • ヒートマップで元素の性質を視覚的に比較する。
  • CSS 3D transformsやTypeScriptとViteを使ったプロジェクトの参考にする。
  • GitHub PagesまたはDockerを使って、自分で周期表のリファレンスをホスティングする。

クイックスタート

  1. 1

    リポジトリをクローンする

    git clone https://github.com/SeanWong17/Future-Style-Periodic-Table.git
  2. 2

    プロジェクトフォルダーに移動する

    cd Future-Style-Periodic-Table
  3. 3

    依存関係をインストールする

    npm install
  4. 4

    開発サーバーを起動し、http://localhost:5173/ を開く

    npm run dev

使う前に知っておきたいこと

  • 3D原子モデルは教育用に簡略化したボーア模型の可視化であり、実際の電子雲の分布を表すものではありません。

収録されている特集

オープンソースの教育・学習ツール図表・ダイアグラム・アニメーション可視化ツール

トピック

#periodic-table#education#chemistry#visualization#typescript#vite#css3#interactive#3d-models#cyberpunks

よくある質問

Future-Style-Periodic-Table とは？
TypeScriptとViteで構築された、3D軌道モデルやヒートマップ、二言語UIを備えるサイバーパンク風のインタラクティブな118元素周期表。 Future Style Periodic Tableは、暗くサイバーパンクを思わせるビジュアルに、元素カテゴリをネオンカラーで強調した表示やグラスモーフィズムのパネルを組み合わせた、ブラウザで使えるインタラクティブな周期表です。118種類すべての元素を掲載し、各元素を開くと原子番号、原子量、電子配置、同位体、代表的な酸化状態を確認できます。
Future-Style-Periodic-Table は無料で使えますか？ライセンスは？
Future-Style-Periodic-Table は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
Future-Style-Periodic-Table は今もメンテナンスされていますか？
活発にメンテナンス中。Future-Style-Periodic-Table の最終コミットは 2026年10月29日 です。
Future-Style-Periodic-Table は何に使えますか？
一般化学の授業や、学生への周期表の導入。 ヒートマップで元素の性質を視覚的に比較する。 CSS 3D transformsやTypeScriptとViteを使ったプロジェクトの参考にする。 GitHub PagesまたはDockerを使って、自分で周期表のリファレンスをホスティングする。
Future-Style-Periodic-Table のインストール方法は？
リポジトリをクローンする: git clone https://github.com/SeanWong17/Future-Style-Periodic-Table.git プロジェクトフォルダーに移動する: cd Future-Style-Periodic-Table 依存関係をインストールする: npm install 開発サーバーを起動し、http://localhost:5173/ を開く: npm run dev
Future-Style-Periodic-Table はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/SeanWong17/Future-Style-Periodic-Table

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト