Portfolio

DataArranger_web

数値シミュレーションの結果を解析するためのWebアプリケーションです。

有限差分時間領域（FDTD）法を用いたシミュレーションの結果を、単純な数値計算の結果と合わせてグラフに表示します。 データの選択をダイアログで行えるようにし、データを保存する際にもダイアログで名前や保存先を選択できます。 アプリケーションを各端末にインストールせずとも、ブラウザから簡単に数値シミュレーション結果を確認できます。

AWSにデプロイしているものと、Render.comにデプロイしているものは同じです。 Render.comはHobbyプラン（フリープラン）で利用しているため、サーバーがスリープ状態の場合は起動に30秒から1分程度かかる場合があります。

機能

• シミュレーション結果を、実験での測定と比較可能な形でグラフ化（1/4波長板の角度に対する光強度のグラフ）
• シミュレーション結果の偏光状態を3Dグラフ化（Poincare球表示）
• グラフを画像として保存（png, svg, jpeg, webp形式）
• 1/4波長板の角度に対する光強度のデータをjson形式で出力
• Stokesパラメータをjson形式で出力

動作環境

• Android OSでの動作確認はしていません。

開発

開発期間: 2025年7月20日 - 2025年11月17日 （運用中）

使用言語:
Python（バックエンド）, TypeScript（フロントエンド）

使用ライブラリ等:
NumPy, SciPy, Pandas, FastAPI, Uvicorn, React, React Router, React plotly.js, shadcn/ui

使用ツール:
pyenv, pyenv-virtualenv, pip, npm, Git, Docker

使用サービス:
GitHub, Render.com, AWS Amplify, Amazon Elastic Container Registry, Amazon Elastic Compute Cloud, Amazon CloudFront, Amazon Route 53

開発経緯:
以前、PySide6を用いて開発を行っていましたが、三次元グラフの実装において技術的な課題に直面しました。 そこで、ライブラリが充実しており、参考になる技術情報も豊富なWeb技術を活用することで、この課題を解決できると考えWebアプリケーションへの移行を決意しました。 また、Webアプリケーション化により端末ごとのインストールが不要で手軽にシミュレーション結果を確認できるなど利便性の向上も期待できました。 本開発は、これらの課題解決に加え、Webフロントエンド開発において広く普及しているReactの習得も兼ねてスタートしました。

技術選定理由等:
フロントエンドには、情報量が豊富で開発の知見が得やすいReact（TypeScript）を採用しました。 アプリケーションの規模を考慮して大規模なフレームワークではなくReact Routerを採用し、UIコンポーネントには導入が容易かつ機能が充実しているshadcn/uiを使用しました。 GitHub連携により、コードをプッシュするだけでビルドからデプロイまでが自動的に行われ、かつHobbyプランにより無料で運用開始できるため、最初のデプロイ先にはRender.comを選びました。 その後、広く用いられているAWSを用いた開発経験を積む目的で、フロントエンドをAWS Amplifyで、バックエンドをAmazon ECR、Amazon EC2等で再構築しました。 併せて、ポートフォリオサイトのためにAmazon Route 53で取得したカスタムドメインを利用して、URLをわかりやすいものにしました。

技術的にこだわった点や工夫した点

• 3Dグラフの描画とモダンUIによるUXの向上
  Web技術の強みである豊富なライブラリを活用し、フロントエンドにはReactとplotly.jsを採用しました。 これにより、3Dグラフを自由に回転・拡大縮小できるインタラクティブなUIを実現しました。 また、UIコンポーネントにshadcn/uiを採用し、研究ツールであってもストレスなく操作できるモダンな画面設計にこだわりました。
• 処理内容に適したシステム構成の検討
  Render.comからの移行に伴いAWSでのバックエンド構築を行った際、当初は学習も兼ねてWeb開発のモダンな構成として定評のあるAWS LambdaとAPI Gatewayを用いたサーバーレス構成での実装を試みました。 しかし、NumPyやSciPyなどの数値解析に必要なライブラリのサイズが大きいためか、コンテナの起動処理が終わらずにタイムアウトし続け、APIからデータを取得することができないという問題に直面しました。 設定の見直し等も試みましたが、この構成では計算処理を完了できないと判断しました。 そこで、特定の構成に固執せず機能の実現を最優先し、常駐型のAmazon EC2とECRを用いる構成へ切り替えました。 この経験から、技術の普及度や学習意欲といった動機で技術を選定する際にも、計算量やライブラリの規模などを考えて実行したい処理内容に適した技術かどうかを検証する重要性を学びました。
• システム構成の刷新に伴うコールドスタート問題の解消
  初期はRender.comのHobbyプラン（無料プラン）でデプロイしていましたが、スリープ状態からの復帰に約1分かかるコールドスタートによる待ち時間が、スムーズな解析作業を阻害していました。 この課題を解消すること、そして業界で広く採用されているAWSの技術を実践的に習得することを目的として、システム構成の刷新を決意しました。 フロントエンドをAWS Amplify、バックエンドを前述の経緯を経て常時稼働のEC2へ移行した結果、待ち時間を解消し、いつでも即座に解析結果を確認できる環境を実現しました。