NestJS・Next.jsで作るリアルタイムビデオ診療 — 医師・患者・保護者が一つの診療室で出会うフルスタック
GregHan
PostgreSQLからSocket.IO・WebRTCによるビデオ通話、チャット、共有ホワイトボードまでを、一つの業務フローとして自ら完成させる
入門
HTML/CSS, JavaScript, React
設備データ画面をどこから作り始めればよいか途方に暮れている方のために、実際の製品ソースを読みながら概念を解説します。めっき炉の温度可視化、アラートの優先順位付け、韓国語・英語の切り替えまで、一つのプロジェクトで学びます。 C2I v7.9の実践ソースを一行ずつ読み、ビルドし、自分のプロジェクトに適用してアレンジする方法
TypeScriptで設備データ(めっき炉・ゾーン・アラート基準)の型契約を読み解いて設計する方法
D3でSVGを作成し、setDataで既存の要素を更新する流れをソースから追跡する能力
通知判定ルールと優先順位(全体OFF、緊急、警告、偏差)をコードと実行で検証する方法
韓国語・英語の多言語対応とブラウザ音声通知を構造的に処理する方法
新しいシナリオを直接追加し、型検査・ビルド・実行で検証する開発フロー
React、Vue、Svelt、Htmlで共通利用可能なコンポーネントの作成および技術習得
ソースを修正する場所(c2i_util_src)と使用される場所(dist)を区別し、修正後は build → verify → 画面確認の順で検証する
自分の設備値をIDynamicDataに変換するデータマッピングを作成する
オプションマップで実際に読み取られるオプションと落とし穴を把握し、レンダリング構造の限界を理解する
setDataの更新フローと通知の判定・統合・繰り返し解除をコードで追跡し、ルールを変更する
翻訳辞書の構造で新しい言語と音声を追加する
温度計・信号機・警告灯の基準と色を変更する
通知が外部へ出ていく境界と、サーバーの責任(権限・冪等性・再試行)を説明する
ライブラリオプションを直接追加し、ビルド・テスト・検証によって確認する
答えはソースを読む順序にあります。データが入力されて画面が描画され、アラートが判定されて警告灯や音声で出力されるまで――この流れを実際のソースに沿って追っていけば、どこを修正すれば何が変わるのかが見えてきます。
この講義では、C2I v7.9のめっき炉可視化コンポーネント(c2i_util_src)とHTML・React・Vue・Svelteの例を使い、ソースの行を一つずつ強調しながら読み、ターミナルで実際にビルドし、ブラウザで動作を確認します。最後には、ライブラリのソースに新しいオプションを直接追加し、ビルド・テスト・全体検証まで行います。
講師だけがコーディングするのではなく、講義と同じ順番で実際に手を動かしてみてください。修正し、壊して、もう一度確認することが、ソースを自分のものにする最も早い道です。
この講義を受講すべき方(1)
C2Iめっき炉コンポーネントのソースを利用し、自分の工程に合わせて改変して使いたい開発者
この講義を受講すべき方 (2)
D3をチャートのサンプルではなく、実運用向けのコンポーネントとして学びたい開発者
この講義を受講すべき方 (3)
温度のしきい値、状態通知、多言語・音声案内を1つのプロジェクトで学びたい方
ソースを修正する場所(c2i_util_src)と使用される場所(dist)を区別し、修正後は build → verify → 画面確認の順に検証する
自分の設備値をIDynamicDataに変換するデータマッピングを作成する
オプションマップで実際に読み取られるオプションと落とし穴を把握し、レンダリング構造の限界を理解する
setDataの更新フローと通知の判定・統合・繰り返し解除をコードで追跡し、ルールを変更する
翻訳辞書の構造に新しい言語と音声を追加する
温度計・信号機・警告灯の基準と色を変更する
通知が外部へ送信される境界と、サーバーの責任(権限・冪等性・再試行)を説明する
ライブラリのオプションを直接追加し、ビルド・テスト・検証で確認する
📌 説明するコードは、実際のソースの行を強調して示します。ターミナルの実行やブラウザの動作もそのまま見せます。
📌 ソースを修正する場所(c2i_util_src)と成果物(dist)を区別し、修正後にビルド → 検証 → 画面確認の順で確認する作業方法を身につけます。
📌 オプションマップ、レンダリング構造、通知ルールのように、変更時につまずきやすい部分を実際に実行して確認します。(例:オプションを指定しないと緊急通知が表示されない理由、溶解炉を10個以上に増やすとエラーになる理由)
📌 韓国語・英語の多言語対応とブラウザ音声案内がどのように動作するのか、新しい言語を追加するにはどこを修正するのかまで扱います。
📌 アラートがシステムの外部へ出ていく正確な位置(コールバック)と、ブラウザに機密情報を置かない責任分担について説明します。
💡 TypeScript + D3(SVG) + Vite + HTML/React/Vue/Svelte + 通知エンジン + 多言語/音声 + MES接続の境界
PLCなどで発生するデータをリアルタイムで表示します。スマートファクトリーなど、ほとんどの企業を歓迎します。
Windows (11)を基準に説明します。開発はmacOS、window11の両方でテストしました。
Cursor:3.24.18(vscode以外のほとんどのIDE)
D3.js v: v7.9.0
Node.js:v22以上、推奨はV24
提供する学習資料の形式(MD、テキスト、ソースコード、アセット、プログラムなど)
分量および容量、その他の学習資料に関する特徴や注意事項など
JavaScript・TypeScriptの基本文法とDOMの理解
npm install、npm run buildの実行経験(Node.js 20.19以上、Chromeなどの最新ブラウザ)
D3の基礎(セレクション・データバインディング)を知っていると、よりスムーズです
学習対象は
誰でしょう?
C2Iめっき炉コンポーネントのソースを持ってきて、自分の工程に合わせて改変して使おうとしている開発者
チャートのサンプルよりも、実運用向けのコンポーネントとしてD3を学びたい開発者
製造・MES画面の開発に初めて携わるフロントエンド開発者
温度しきい値、ステータス通知、多言語・音声案内を一つのプロジェクトで学びたい方
前提知識、
必要でしょうか?
HTML、CSS、Reactなどのフレームワーク技術を習得していると、なお良いです。
npm install、npm run buildの実行経験(Node.js 20.19以上、Chromeなどの最新ブラウザ)
D3の基礎(選択・データバインディング)を知っていると、より楽です
キャリア認証
長い間、技術の変化に対応しながら過ごしてきた経験が多くありますので、今では私が持つ技術と経験を初級・中級者の方々に微力ながら提供し、皆さんが迅速に成長できるよう共に歩んでいきたいと考えています。
-. モノレポ(Turbo: "^2.3.4")、FCM(Firebase Cloud Message)、WebHook、Redis、MQTT
-. MUI-X、Material-UIなどNext & ReactエコシステムのUI
-.OCR(Naver)、RIMS、Popbill、SNSログイン(Google、Naver、Kakao)
-.Js、Vue/Nuxt(VueX、Pinia)、AngularJS、React/Next(Redux、Zustand、Recoil)、Svelt、
D3、Three(WebGL)、C2i:青瓦台納品BIチャート、echarts、Vuetify、Quasar、Telerick(Progress)
IndexedDB & SqlLite, css, scss, sass, Tailwind, Bootstrap...
-.Leaflet.js、Cesium.js、Daum & Naverマップ
-.WebRTC & WebSocket、MQTT、Silverlight(C#) & ASP.Net
-.Node、Nest、Spring Boot、Docker、Git、pm2
-.AWS, Azure, nCloud(Naver)
-.Oracle, PostgreSQL, MySQL, MariaDB, MS-SQL, MongoDB(mongoose), InfluxDB, Supabase
-.Python、Numpy/Scipy、Jupyter、Django(DRF: Django Rest Framework)/Flask、
-.TensorFlow, Keras, ScikitRun, LangChain
IAM-Guardian – SGC + ML + AI + Graphプラットフォーム
IAM-MES – 個別・バッチ・連続製造を業種別に統合したフルスタックプラットフォーム
IAM-ERP – AI会計ERP · 証憑自動仕訳 · ロック台帳
IAM-FREE-BI – ショッピングモール・中小企業向け無料ブラウザBI
IAM-SPC – メタデータベースの汎用SPC · Edge+中央 · IATF 16949
IAM-VeloMap – AIベースのLidar後処理自動化ソリューション(+Guardian統合)
-.シティ・ワウ(City-Wow): 国土・国防・公共分野および病院・製造企業などの3Dシミュレーションおよび
リアルタイムモニタリングサービス ('23.10 ~ 現在; Three, Vanila.js)
-.씨유(SeeU): 業種別ビデオチャットサービス(病院、製造業など)(Google Meet + クロマキー、STT & TTSチャット)
('23.02〜23.10; WebRTC、WebSocket、Vue3 & Pinia、Quasar、Node、MySQL)
-.サーベイ・ワウ(Survey-Wow): Googleフォーム、MSフォーム、Naverフォームのアンケート結果を簡単に分析し
データ分析を共有するWebサービス ('22.03 ~ 23.01; Vue2 & VueX, Quasar, Node, MySQL)
-.データ・ワウ(Data-Wow): xls, json,csv , API連携などによる公共データの自動分析・可視化
('22.01 ~ 22.12; Vue2 & VueX, Vuetify, Node, MongoDB) - 行政安全部公共データ表彰
-.DDMV(Data-Dam Multi-Dimensional Vis-): データダム多次元探索的可視化分析サービス
('20.01 ~ 20.08; Vue2 & VueX, Vuetify, Node, MongoDB) - 仁川市公共データ表彰
-.シーツーアイ(C2i: Chart Inteiiligence Insights)チャートコンポーネント: チャートギャラリーメニュー
BIベースのチャート(with D3.js): '15.04 ~ 現在;D3.js(v3.3 ~ v7.9)を基盤としたBIパターンのチャートソリューション
(文在寅政権の雇用ダッシュボードを青瓦台に納品、モンゴル財政管理国家プロジェクトに納品。多言語対応)
-.(株)カジュアル・インサイト(Casual-Insights) CTO
-.元KISTI研究員
-.元LG-CNS Oracle Modeler、DBA &主任研究員
-.元極東(現代)石油情報処理室社員
**. データダム多次元可視化-.総合紹介(必須):https://youtu.be/noZ9H7wftsI
-.消費商圏-I(必須:百貨店店舗POSデータ-一般製造流通業者):https://youtu.be/ArL-Pv3U-40 -.消費/商圏-II(韓国KDX、食神データ提供):https://youtu.be/Wcpu29gI53Y
-.保健医療(韓国KDX、オンヌリH&Cデータ提供): https://youtu.be/I8WBqAFp9L4-
.公共データ(韓国・華城市庁の公共データ提供):https://youtu.be/2QCw_6aeRVE
*.D3 & ThreeJS チャートギャラリー:https://gregory-han.github.io/chart/
全体
13件 ∙ (2時間 6分)
講座資料:
1. パッケージ構造と実行
07:29
2. ライブラリビルドの解剖
08:26
6. オプションマップ
06:45
7. レンダリング構造
11:42
知識共有者の他の講座はこちら
同じ分野の他の講座を見てみましょう!
期間限定セール
¥54,450
50%
¥13,830