강의

챌린지

멘토링

로드맵

커뮤니티

TypeScriptとD3で作るリアルタイムMESめっき炉モニタリング — ソースを読み、自分の工程に合わせて変更する

設備データ画面をどこから作り始めればよいか途方に暮れている方のために、実際の製品ソースを読みながら概念を解説します。めっき炉の温度可視化、アラートの優先順位付け、韓国語・英語の切り替えまで、一つのプロジェクトで学びます。 C2I v7.9の実践ソースを一行ずつ読み、ビルドし、自分のプロジェクトに適用してアレンジする方法

3名 が受講中です。

難易度 初級

受講期間 無制限

React
React
TypeScript
TypeScript
Svelte
Svelte
d3.js
d3.js
Vue 3
Vue 3
React
React
TypeScript
TypeScript
Svelte
Svelte
d3.js
d3.js
Vue 3
Vue 3

受講後に得られること

  • 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などで発生するデータをリアルタイムで表示します。スマートファクトリーなど、ほとんどの企業を歓迎します。

受講前の参考事項

実習環境

  1. Windows (11)を基準に説明します。開発はmacOS、window11の両方でテストしました。

  2. Cursor:3.24.18(vscode以外のほとんどのIDE)


  3. D3.js v: v7.9.0

  4. 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の基礎(選択・データバインディング)を知っていると、より楽です

こんにちは
GregHanです。

キャリア認証

長い間、技術の変化に対応しながら過ごしてきた経験が多くありますので、今では私が持つ技術と経験を初級・中級者の方々に微力ながら提供し、皆さんが迅速に成長できるよう共に歩んでいきたいと考えています。

技術スタック

-. モノレポ(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パターンのチャートソリューション

(文在寅政権の雇用ダッシュボードを青瓦台に納品、モンゴル財政管理国家プロジェクトに納品。多言語対応)

 

データマート&ウェアハウス、ROLAP、BI、可視化、クラウドインフラなど、さまざまな技術スタックと

業務分析、Oracle(v6.3 ~ )のモデリングおよびチューニング分野に関する専門知識と経験を有する。

 

-.(株)カジュアル・インサイト(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/

*・受賞歴

1999.08 ハンギョレ新聞 & UTC ベンチャー21 本賞受賞(賞金5,000万ウォン)
2000.10 ㈱ソフトダイム 大統領賞受賞(PowerSi OLAP)
2002.11 韓国e-ビジネス大賞 産業資源部長官賞受賞
2020.08 仁川市公共データ表彰
2022.12 行政安全部公共データ表彰
もっと見る

カリキュラム

全体

13件 ∙ (2時間 6分)

講座資料:

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価が集まっていない講座です。
ぜひ最初のレビューをお寄せください。

GregHanの他の講座

知識共有者の他の講座はこちら

似ている講座

同じ分野の他の講座を見てみましょう!

期間限定セール

¥54,450

50%

¥13,830