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を使ってスタイリングを行っています。
Web開発・課題解決について提案いたします
Web開発のご相談やお見積、事例についてなど、お気軽にお問い合わせください。
打ち合わせでのヒアリングも可能です。
クライアント
非公開
クレジット
フロントエンド:伊藤(FLAT)
使用技術
使用ツール