works動画eラーニングシステム

プロジェクト概要

Summary

動画を活用したeラーニングの配信システムです。企業や団体が教育・研修・情報共有コンテンツを低コストで視聴者限定で配信できます。
弊社は、システムに組み込むためのコンポーネントを開発しました。

クライアントの課題

Business Issue

ユーザー画面や管理画面など、複数のアプリケーションで流用できるコンポーネント集を開発したい。
システムに組み込みやすいように、画面は完全に静的なHTMLとして生成してほしい。

達成成果

Achievements

Storybookとministaというライブラリを使って、システム組込に最適化したコンポーネントと静的なHTMLを開発しました。

Web開発・課題解決について提案いたします

Web開発のご相談やお見積、事例についてなど、お気軽にお問い合わせください。
打ち合わせでのヒアリングも可能です。

お問い合わせはこちら

コンポーネントカタログの提供

今回のプロジェクトでは、UIコーディングとシステム組込を完全に分業し、別工程で行うこととなりました。既に実装したコンポーネントを基にシステム開発が進むため、コンポーネントの管理と確認のコストを最小限に抑える必要があります。そのため、Storybookを使ってコンポーネントカタログを開発しました。

システム組込に最適化された静的なHTML

Storybookを導入するために、Reactから完全に静的なHTMLとアセットを生成する必要があったので、ministaというフレームワークを使用しました。ministaは、Viteというモダンな開発環境を使いながら、Reactで書かれたコードから完全に静的なHTMLを生成できます。JSXはテンプレートエンジンとして非常に優れており、ministaを導入することで短期間で多くのコンポーネントを効率的に開発できました。

また、CSSを別ファイルとして出力するために、UIライブラリとしてMUI Unstyled componentsを採用し、CSS Modulesを使ってスタイリングを行っています。