[{"data":1,"prerenderedAt":1320},["ShallowReactive",2],{"posts-ja":3},[4,598],{"id":5,"title":6,"authors":7,"badge":12,"body":13,"date":588,"description":589,"extension":590,"image":591,"meta":593,"navigation":264,"path":594,"seo":595,"stem":596,"__hash__":597},"posts\u002Fblog\u002Fja\u002Fiot.md","Vue 3 と Vite を活用した MQTT による IoT デバイス接続監視システムの実装",[8],{"name":9,"avatar":10},"Neil Tsai",{"src":11},"https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F12755093?v=4&size=64",null,{"type":14,"value":15,"toc":583},"minimark",[16,20,31,34,45,48,52,59,70,79,83,86,92,95,98,104,112,115,170,541,549,557,565,573,579],[17,18,19],"h2",{"id":19},"mosquitto",[21,22,23,24,30],"p",{},"まず、 ",[25,26,19],"a",{"href":27,"rel":28},"https:\u002F\u002Fmosquitto.org\u002Fdownload\u002F",[29],"nofollow"," をダウンロードしてインストールします。",[21,32,33],{},"インストール完了後、PowerShell またはコマンドプロンプト（CMD）で正常にインストールされていることを確認します：",[35,36,41],"pre",{"className":37,"code":39,"language":40},[38],"language-text","cd \"C:\\Program Files\\mosquitto\"\n\n.\\mosquitto.exe -h\n","text",[42,43,39],"code",{"__ignoreMap":44},"",[21,46,47],{},"バージョン情報およびコマンドラインオプションの説明が表示されれば、インストールは正常に完了しています。",[17,49,51],{"id":50},"mqttx","MQTTX",[21,53,54,55,30],{},"次に、 ",[25,56,51],{"href":57,"rel":58},"https:\u002F\u002Fmqttx.app\u002F",[29],[21,60,61,62],{},"インストール完了後、MQTTX を起動し、Connections の「＋」をクリックして New Connection を選択し、新しい接続を作成します。\n",[63,64],"img",{"alt":65,"className":66,"height":68,"src":69,"width":68},"MQTTX建立新連線",[67],"rounded-lg",350,"\u002Fimages\u002Fblogs\u002Fiot\u002Fmqttx.png",[21,71,72,73],{},"以下の内容を入力し、Client ID は指定せず、そのまま Connect をクリックします：\n",[63,74],{"alt":75,"className":76,"height":77,"src":78,"width":77},"MQTTX 輸入內容",[67],800,"\u002Fimages\u002Fblogs\u002Fiot\u002FmqttxInput.png",[17,80,82],{"id":81},"vue3-vite","Vue3 Vite",[21,84,85],{},"ブラウザでは WebSocket 接続が必要なため、例えば以下のように設定します：",[35,87,90],{"className":88,"code":89,"language":40},[38],"ws:\u002F\u002Flocalhost:9001\n",[42,91,89],{"__ignoreMap":44},[21,93,94],{},"そのため、Mosquitto のインストールディレクトリに戻り、mosquitto.conf ファイルを探します。",[21,96,97],{},"WebSocket リスナーを追加するため、以下の設定を追記します：",[35,99,102],{"className":100,"code":101,"language":40},[38],"listener 1883\nprotocol mqtt\n\nlistener 9001\nprotocol websockets\n\nallow_anonymous true\n",[42,103,101],{"__ignoreMap":44},[21,105,106,107],{},"次に、タスクマネージャーを開き、Mosquitto サービスを再起動します。\n",[63,108],{"alt":109,"className":110,"height":77,"src":111,"width":77},"mosquitto服務",[67],"\u002Fimages\u002Fblogs\u002Fiot\u002FmosquittoService.png",[21,113,114],{},"Vue 3 + TypeScript のコードを以下のように作成します:",[35,116,120],{"className":117,"code":118,"language":119,"meta":44,"style":44},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Ch3>接收到的訊息：{{ receiveMessage }}\u003C\u002Fh3>\n\u003C\u002Ftemplate>\n","html",[42,121,122,138,161],{"__ignoreMap":44},[123,124,127,131,135],"span",{"class":125,"line":126},"line",1,[123,128,130],{"class":129},"sMK4o","\u003C",[123,132,134],{"class":133},"swJcz","template",[123,136,137],{"class":129},">\n",[123,139,141,144,147,150,154,157,159],{"class":125,"line":140},2,[123,142,143],{"class":129},"  \u003C",[123,145,146],{"class":133},"h3",[123,148,149],{"class":129},">",[123,151,153],{"class":152},"sTEyZ","接收到的訊息：{{ receiveMessage }}",[123,155,156],{"class":129},"\u003C\u002F",[123,158,146],{"class":133},[123,160,137],{"class":129},[123,162,164,166,168],{"class":125,"line":163},3,[123,165,156],{"class":129},[123,167,134],{"class":133},[123,169,137],{"class":129},[35,171,175],{"className":172,"code":173,"language":174,"meta":44,"style":44},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue';\nimport mqtt, { type MqttClient } from 'mqtt';\n\nconst receiveMessage = ref();\n\nconst client: MqttClient = mqtt.connect('ws:\u002F\u002Flocalhost:9001');\n\nclient.on('connect', () => {\n  console.log('MQTT connected');\n\n  client.subscribe('factory\u002Fmachine01\u002Fdata');\n});\n\nclient.on('message', (topic, message) => {\n  receiveMessage.value = message.toString();\n  console.log(topic, message.toString());\n});\n\u003C\u002Fscript>\n","typescript",[42,176,177,198,228,259,266,286,291,331,336,366,390,395,419,429,434,472,496,522,531],{"__ignoreMap":44},[123,178,179,181,184,187,190,194,196],{"class":125,"line":126},[123,180,130],{"class":129},[123,182,183],{"class":152},"script setup lang",[123,185,186],{"class":129},"=",[123,188,189],{"class":129},"\"",[123,191,193],{"class":192},"sfazB","ts",[123,195,189],{"class":129},[123,197,137],{"class":129},[123,199,200,204,207,210,213,216,219,222,225],{"class":125,"line":140},[123,201,203],{"class":202},"s7zQu","import",[123,205,206],{"class":129}," {",[123,208,209],{"class":152}," ref",[123,211,212],{"class":129}," }",[123,214,215],{"class":202}," from",[123,217,218],{"class":129}," '",[123,220,221],{"class":192},"vue",[123,223,224],{"class":129},"'",[123,226,227],{"class":129},";\n",[123,229,230,232,235,238,240,243,246,248,250,252,255,257],{"class":125,"line":163},[123,231,203],{"class":202},[123,233,234],{"class":152}," mqtt",[123,236,237],{"class":129},",",[123,239,206],{"class":129},[123,241,242],{"class":202}," type",[123,244,245],{"class":152}," MqttClient",[123,247,212],{"class":129},[123,249,215],{"class":202},[123,251,218],{"class":129},[123,253,254],{"class":192},"mqtt",[123,256,224],{"class":129},[123,258,227],{"class":129},[123,260,262],{"class":125,"line":261},4,[123,263,265],{"emptyLinePlaceholder":264},true,"\n",[123,267,269,273,276,278,281,284],{"class":125,"line":268},5,[123,270,272],{"class":271},"spNyl","const",[123,274,275],{"class":152}," receiveMessage ",[123,277,186],{"class":129},[123,279,209],{"class":280},"s2Zo4",[123,282,283],{"class":152},"()",[123,285,227],{"class":129},[123,287,289],{"class":125,"line":288},6,[123,290,265],{"emptyLinePlaceholder":264},[123,292,294,296,299,302,305,308,310,313,316,319,321,324,326,329],{"class":125,"line":293},7,[123,295,272],{"class":271},[123,297,298],{"class":152}," client",[123,300,301],{"class":129},":",[123,303,245],{"class":304},"sBMFI",[123,306,307],{"class":129}," =",[123,309,234],{"class":152},[123,311,312],{"class":129},".",[123,314,315],{"class":280},"connect",[123,317,318],{"class":152},"(",[123,320,224],{"class":129},[123,322,323],{"class":192},"ws:\u002F\u002Flocalhost:9001",[123,325,224],{"class":129},[123,327,328],{"class":152},")",[123,330,227],{"class":129},[123,332,334],{"class":125,"line":333},8,[123,335,265],{"emptyLinePlaceholder":264},[123,337,339,342,344,347,349,351,353,355,357,360,363],{"class":125,"line":338},9,[123,340,341],{"class":152},"client",[123,343,312],{"class":129},[123,345,346],{"class":280},"on",[123,348,318],{"class":152},[123,350,224],{"class":129},[123,352,315],{"class":192},[123,354,224],{"class":129},[123,356,237],{"class":129},[123,358,359],{"class":129}," ()",[123,361,362],{"class":271}," =>",[123,364,365],{"class":129}," {\n",[123,367,369,372,374,377,379,381,384,386,388],{"class":125,"line":368},10,[123,370,371],{"class":152},"  console",[123,373,312],{"class":129},[123,375,376],{"class":280},"log",[123,378,318],{"class":133},[123,380,224],{"class":129},[123,382,383],{"class":192},"MQTT connected",[123,385,224],{"class":129},[123,387,328],{"class":133},[123,389,227],{"class":129},[123,391,393],{"class":125,"line":392},11,[123,394,265],{"emptyLinePlaceholder":264},[123,396,398,401,403,406,408,410,413,415,417],{"class":125,"line":397},12,[123,399,400],{"class":152},"  client",[123,402,312],{"class":129},[123,404,405],{"class":280},"subscribe",[123,407,318],{"class":133},[123,409,224],{"class":129},[123,411,412],{"class":192},"factory\u002Fmachine01\u002Fdata",[123,414,224],{"class":129},[123,416,328],{"class":133},[123,418,227],{"class":129},[123,420,422,425,427],{"class":125,"line":421},13,[123,423,424],{"class":129},"}",[123,426,328],{"class":152},[123,428,227],{"class":129},[123,430,432],{"class":125,"line":431},14,[123,433,265],{"emptyLinePlaceholder":264},[123,435,437,439,441,443,445,447,450,452,454,457,461,463,466,468,470],{"class":125,"line":436},15,[123,438,341],{"class":152},[123,440,312],{"class":129},[123,442,346],{"class":280},[123,444,318],{"class":152},[123,446,224],{"class":129},[123,448,449],{"class":192},"message",[123,451,224],{"class":129},[123,453,237],{"class":129},[123,455,456],{"class":129}," (",[123,458,460],{"class":459},"sHdIc","topic",[123,462,237],{"class":129},[123,464,465],{"class":459}," message",[123,467,328],{"class":129},[123,469,362],{"class":271},[123,471,365],{"class":129},[123,473,475,478,480,483,485,487,489,492,494],{"class":125,"line":474},16,[123,476,477],{"class":152},"  receiveMessage",[123,479,312],{"class":129},[123,481,482],{"class":152},"value",[123,484,307],{"class":129},[123,486,465],{"class":152},[123,488,312],{"class":129},[123,490,491],{"class":280},"toString",[123,493,283],{"class":133},[123,495,227],{"class":129},[123,497,499,501,503,505,507,509,511,513,515,517,520],{"class":125,"line":498},17,[123,500,371],{"class":152},[123,502,312],{"class":129},[123,504,376],{"class":280},[123,506,318],{"class":133},[123,508,460],{"class":152},[123,510,237],{"class":129},[123,512,465],{"class":152},[123,514,312],{"class":129},[123,516,491],{"class":280},[123,518,519],{"class":133},"())",[123,521,227],{"class":129},[123,523,525,527,529],{"class":125,"line":524},18,[123,526,424],{"class":129},[123,528,328],{"class":152},[123,530,227],{"class":129},[123,532,534,536,539],{"class":125,"line":533},19,[123,535,156],{"class":129},[123,537,538],{"class":152},"script",[123,540,137],{"class":129},[21,542,543,544],{},"MQTTX の Published を選択し、以下の図のように入力します：\n",[63,545],{"alt":546,"className":547,"height":77,"src":548,"width":77},"在MQTTX選Published並輸入",[67],"\u002Fimages\u002Fblogs\u002Fiot\u002Fpublished.png",[21,550,551,552],{},"Web ページでは、下図のようにメッセージを受信できます：\n",[63,553],{"alt":554,"className":555,"height":77,"src":556,"width":77},"web收到訊息",[67],"\u002Fimages\u002Fblogs\u002Fiot\u002FreceiveMessage.png",[21,558,559,560],{},"このようにして、IoT デバイスのネットワーク接続監視をシミュレートすることができます。さらに、高度な IoT 設備向けダッシュボードのイメージは以下のとおりです：\n",[63,561],{"alt":562,"className":563,"height":77,"src":564,"width":77},"iot 機台儀表板",[67],"\u002Fimages\u002Fblogs\u002Fiot\u002FiotMachineDashboard.gif",[21,566,567,568,572],{},"ご興味をお持ちいただけましたら、ぜひ下記の連絡先までお気軽にお問い合わせください。お客様の課題やご要望に合わせて、ソリューションのデモンストレーションおよび詳細なご説明をさせていただきます",[25,569,571],{"href":570},"\u002Fsolutions\u002Faiot","AIoT スマートコネクテッドネットワーク","  。",[21,574,575],{},[25,576,578],{"href":577},"\u002FcontactUs","お問い合わせ",[580,581,582],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":44,"searchDepth":140,"depth":140,"links":584},[585,586,587],{"id":19,"depth":140,"text":19},{"id":50,"depth":140,"text":51},{"id":81,"depth":140,"text":82},"2026-10-08","まず、MQTTブローカーとして Mosquitto をインストールします。次に、MQTTX を使用して MQTT の動作をシミュレートします。その後、Vite を利用して Vue 3 の新規プロジェクトを迅速に作成し、mqtt.js を導入して MQTT ブローカーとの接続を確立します。最後に、設備・機器から送信されたデータを受信し、画面上にリアルタイムで表示します。","md",{"src":592},"images\u002Fblogs\u002Fiot\u002FiotDashboard.png",{},"\u002Fblog\u002Fja\u002Fiot",{"title":6,"description":589},"blog\u002Fja\u002Fiot","HHcttlHIEcohkgLKYGs29SbjK6CAdmaYTfBSdQ1hD2U",{"id":599,"title":600,"authors":601,"badge":12,"body":604,"date":1311,"description":1312,"extension":590,"image":1313,"meta":1315,"navigation":264,"path":1316,"seo":1317,"stem":1318,"__hash__":1319},"posts\u002Fblog\u002Fja\u002FplotlyJs.md","Vue 3 + Vite + JavaScriptでPlotly.jsを利用した統計グラフの実装 ～ P管理図（不良率管理図）を例として ～",[602],{"name":9,"avatar":603},{"src":11},{"type":14,"value":605,"toc":1309},[606,609,612,618,621,627,630,633,636,639,642,649,652,698,1273,1281,1289,1292,1295,1302,1306],[21,607,608],{},"製品やプロジェクトの開発において、Plotly.js を利用して統計管理図を実装する必要がある場合があります。本記事では、シンプルな統計管理図である P管理図（不良率管理図） を例に、その実装方法を紹介します。",[21,610,611],{},"まず、コマンドプロンプトを起動し、Vue 3 の新規プロジェクトを作成します。プログラミング言語には JavaScript を選択します。",[35,613,616],{"className":614,"code":615,"language":40},[38],"npm create vite@latest\n",[42,617,615],{"__ignoreMap":44},[21,619,620],{},"Visual Studio Code のターミナルを開き、以下のコマンドを入力して Plotly.js をインストールします。",[35,622,625],{"className":623,"code":624,"language":40},[38],"npm i plotly.js\n",[42,626,624],{"__ignoreMap":44},[21,628,629],{},"SPC（統計的工程管理）における P-chart（不良率管理図） （以下、「P管理図」）には、以下の4本の線が必要です：",[21,631,632],{},"中心線 CL(Center Line)",[21,634,635],{},"管制上限 UCL（Upper Control Limit",[21,637,638],{},"管制下限 LCL （Lower Control Limit）",[21,640,641],{},"不良率",[21,643,644,645],{},"数式の参考 ",[25,646,647],{"href":647,"rel":648},"https:\u002F\u002Fwww.itl.nist.gov\u002Fdiv898\u002Fhandbook\u002Fpmc\u002Fsection3\u002Fpmc332.htm?utm_source=chatgpt.com",[29],[21,650,651],{},"グラフ作成の参考コード例：",[35,653,655],{"className":117,"code":654,"language":119,"meta":44,"style":44},"\u003Ctemplate>\n  \u003Cdiv ref=\"chart\">\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[42,656,657,665,690],{"__ignoreMap":44},[123,658,659,661,663],{"class":125,"line":126},[123,660,130],{"class":129},[123,662,134],{"class":133},[123,664,137],{"class":129},[123,666,667,669,672,674,676,678,681,683,686,688],{"class":125,"line":140},[123,668,143],{"class":129},[123,670,671],{"class":133},"div",[123,673,209],{"class":271},[123,675,186],{"class":129},[123,677,189],{"class":129},[123,679,680],{"class":192},"chart",[123,682,189],{"class":129},[123,684,685],{"class":129},">\u003C\u002F",[123,687,671],{"class":133},[123,689,137],{"class":129},[123,691,692,694,696],{"class":125,"line":163},[123,693,156],{"class":129},[123,695,134],{"class":133},[123,697,137],{"class":129},[35,699,703],{"className":700,"code":701,"language":702,"meta":44,"style":44},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport Plotly from 'plotly.js\u002Fdist\u002Fplotly.js';\nimport { onMounted, ref } from 'vue';\n\nconst chart = ref(null);\n\nvar ucl = {\n  x: [1, 2, 3, 4, 5],\n  y: [9.88, 9.88, 9.88, 9.88, 9.88],\n  mode: 'lines',\n  name: 'UCL管制上限',\n};\n\nvar cl = {\n  x: [1, 2, 3, 4, 5],\n  y: [3, 3, 3, 3, 3],\n  mode: 'lines',\n  name: 'CL中心線',\n};\n\nvar lcl = {\n  x: [1, 2, 3, 4, 5],\n  y: [0, 0, 0, 0, 0],\n  mode: 'lines',\n  name: 'LCL管制下限',\n};\n\nvar values = {\n  x: [1, 2, 3, 4, 5],\n  y: [3, 2, 4, 2, 3],\n  mode: 'lines+markers',\n  name: '不良率(%)',\n};\n\nvar data = [ucl, cl, lcl, values];\n\nvar layout = {\n  title: { text: 'P-Chart' },\n};\n\nonMounted(() => {\n  Plotly.newPlot(chart.value, data, layout);\n});\n\u003C\u002Fscript>\n","js",[42,704,705,716,721,742,746,751,755,763,798,827,841,855,861,865,872,898,925,937,950,956,961,969,996,1025,1038,1052,1059,1064,1072,1099,1126,1140,1154,1161,1166,1172,1177,1185,1208,1215,1220,1228,1256,1264],{"__ignoreMap":44},[123,706,707,709,711,714],{"class":125,"line":126},[123,708,130],{"class":129},[123,710,538],{"class":133},[123,712,713],{"class":271}," setup",[123,715,137],{"class":129},[123,717,718],{"class":125,"line":140},[123,719,720],{"class":152},"import Plotly from 'plotly.js\u002Fdist\u002Fplotly.js';\n",[123,722,723,726,729,732,734,737,739],{"class":125,"line":163},[123,724,725],{"class":152},"import ",[123,727,728],{"class":129},"{",[123,730,731],{"class":152}," onMounted",[123,733,237],{"class":129},[123,735,736],{"class":152}," ref ",[123,738,424],{"class":129},[123,740,741],{"class":152}," from 'vue';\n",[123,743,744],{"class":125,"line":261},[123,745,265],{"emptyLinePlaceholder":264},[123,747,748],{"class":125,"line":268},[123,749,750],{"class":152},"const chart = ref(null);\n",[123,752,753],{"class":125,"line":288},[123,754,265],{"emptyLinePlaceholder":264},[123,756,757,760],{"class":125,"line":293},[123,758,759],{"class":152},"var ucl = ",[123,761,762],{"class":129},"{\n",[123,764,765,768,772,774,777,779,782,784,787,789,792,795],{"class":125,"line":333},[123,766,767],{"class":152},"  x: [",[123,769,771],{"class":770},"sbssI","1",[123,773,237],{"class":129},[123,775,776],{"class":770}," 2",[123,778,237],{"class":129},[123,780,781],{"class":770}," 3",[123,783,237],{"class":129},[123,785,786],{"class":770}," 4",[123,788,237],{"class":129},[123,790,791],{"class":770}," 5",[123,793,794],{"class":152},"]",[123,796,797],{"class":129},",\n",[123,799,800,803,806,808,811,813,815,817,819,821,823,825],{"class":125,"line":338},[123,801,802],{"class":152},"  y: [",[123,804,805],{"class":770},"9.88",[123,807,237],{"class":129},[123,809,810],{"class":770}," 9.88",[123,812,237],{"class":129},[123,814,810],{"class":770},[123,816,237],{"class":129},[123,818,810],{"class":770},[123,820,237],{"class":129},[123,822,810],{"class":770},[123,824,794],{"class":152},[123,826,797],{"class":129},[123,828,829,832,834,837,839],{"class":125,"line":368},[123,830,831],{"class":152},"  mode: ",[123,833,224],{"class":129},[123,835,836],{"class":192},"lines",[123,838,224],{"class":129},[123,840,797],{"class":129},[123,842,843,846,848,851,853],{"class":125,"line":392},[123,844,845],{"class":152},"  name: ",[123,847,224],{"class":129},[123,849,850],{"class":192},"UCL管制上限",[123,852,224],{"class":129},[123,854,797],{"class":129},[123,856,857,859],{"class":125,"line":397},[123,858,424],{"class":129},[123,860,227],{"class":152},[123,862,863],{"class":125,"line":421},[123,864,265],{"emptyLinePlaceholder":264},[123,866,867,870],{"class":125,"line":431},[123,868,869],{"class":152},"var cl = ",[123,871,762],{"class":129},[123,873,874,876,878,880,882,884,886,888,890,892,894,896],{"class":125,"line":436},[123,875,767],{"class":152},[123,877,771],{"class":770},[123,879,237],{"class":129},[123,881,776],{"class":770},[123,883,237],{"class":129},[123,885,781],{"class":770},[123,887,237],{"class":129},[123,889,786],{"class":770},[123,891,237],{"class":129},[123,893,791],{"class":770},[123,895,794],{"class":152},[123,897,797],{"class":129},[123,899,900,902,905,907,909,911,913,915,917,919,921,923],{"class":125,"line":474},[123,901,802],{"class":152},[123,903,904],{"class":770},"3",[123,906,237],{"class":129},[123,908,781],{"class":770},[123,910,237],{"class":129},[123,912,781],{"class":770},[123,914,237],{"class":129},[123,916,781],{"class":770},[123,918,237],{"class":129},[123,920,781],{"class":770},[123,922,794],{"class":152},[123,924,797],{"class":129},[123,926,927,929,931,933,935],{"class":125,"line":498},[123,928,831],{"class":152},[123,930,224],{"class":129},[123,932,836],{"class":192},[123,934,224],{"class":129},[123,936,797],{"class":129},[123,938,939,941,943,946,948],{"class":125,"line":524},[123,940,845],{"class":152},[123,942,224],{"class":129},[123,944,945],{"class":192},"CL中心線",[123,947,224],{"class":129},[123,949,797],{"class":129},[123,951,952,954],{"class":125,"line":533},[123,953,424],{"class":129},[123,955,227],{"class":152},[123,957,959],{"class":125,"line":958},20,[123,960,265],{"emptyLinePlaceholder":264},[123,962,964,967],{"class":125,"line":963},21,[123,965,966],{"class":152},"var lcl = ",[123,968,762],{"class":129},[123,970,972,974,976,978,980,982,984,986,988,990,992,994],{"class":125,"line":971},22,[123,973,767],{"class":152},[123,975,771],{"class":770},[123,977,237],{"class":129},[123,979,776],{"class":770},[123,981,237],{"class":129},[123,983,781],{"class":770},[123,985,237],{"class":129},[123,987,786],{"class":770},[123,989,237],{"class":129},[123,991,791],{"class":770},[123,993,794],{"class":152},[123,995,797],{"class":129},[123,997,999,1001,1004,1006,1009,1011,1013,1015,1017,1019,1021,1023],{"class":125,"line":998},23,[123,1000,802],{"class":152},[123,1002,1003],{"class":770},"0",[123,1005,237],{"class":129},[123,1007,1008],{"class":770}," 0",[123,1010,237],{"class":129},[123,1012,1008],{"class":770},[123,1014,237],{"class":129},[123,1016,1008],{"class":770},[123,1018,237],{"class":129},[123,1020,1008],{"class":770},[123,1022,794],{"class":152},[123,1024,797],{"class":129},[123,1026,1028,1030,1032,1034,1036],{"class":125,"line":1027},24,[123,1029,831],{"class":152},[123,1031,224],{"class":129},[123,1033,836],{"class":192},[123,1035,224],{"class":129},[123,1037,797],{"class":129},[123,1039,1041,1043,1045,1048,1050],{"class":125,"line":1040},25,[123,1042,845],{"class":152},[123,1044,224],{"class":129},[123,1046,1047],{"class":192},"LCL管制下限",[123,1049,224],{"class":129},[123,1051,797],{"class":129},[123,1053,1055,1057],{"class":125,"line":1054},26,[123,1056,424],{"class":129},[123,1058,227],{"class":152},[123,1060,1062],{"class":125,"line":1061},27,[123,1063,265],{"emptyLinePlaceholder":264},[123,1065,1067,1070],{"class":125,"line":1066},28,[123,1068,1069],{"class":152},"var values = ",[123,1071,762],{"class":129},[123,1073,1075,1077,1079,1081,1083,1085,1087,1089,1091,1093,1095,1097],{"class":125,"line":1074},29,[123,1076,767],{"class":152},[123,1078,771],{"class":770},[123,1080,237],{"class":129},[123,1082,776],{"class":770},[123,1084,237],{"class":129},[123,1086,781],{"class":770},[123,1088,237],{"class":129},[123,1090,786],{"class":770},[123,1092,237],{"class":129},[123,1094,791],{"class":770},[123,1096,794],{"class":152},[123,1098,797],{"class":129},[123,1100,1102,1104,1106,1108,1110,1112,1114,1116,1118,1120,1122,1124],{"class":125,"line":1101},30,[123,1103,802],{"class":152},[123,1105,904],{"class":770},[123,1107,237],{"class":129},[123,1109,776],{"class":770},[123,1111,237],{"class":129},[123,1113,786],{"class":770},[123,1115,237],{"class":129},[123,1117,776],{"class":770},[123,1119,237],{"class":129},[123,1121,781],{"class":770},[123,1123,794],{"class":152},[123,1125,797],{"class":129},[123,1127,1129,1131,1133,1136,1138],{"class":125,"line":1128},31,[123,1130,831],{"class":152},[123,1132,224],{"class":129},[123,1134,1135],{"class":192},"lines+markers",[123,1137,224],{"class":129},[123,1139,797],{"class":129},[123,1141,1143,1145,1147,1150,1152],{"class":125,"line":1142},32,[123,1144,845],{"class":152},[123,1146,224],{"class":129},[123,1148,1149],{"class":192},"不良率(%)",[123,1151,224],{"class":129},[123,1153,797],{"class":129},[123,1155,1157,1159],{"class":125,"line":1156},33,[123,1158,424],{"class":129},[123,1160,227],{"class":152},[123,1162,1164],{"class":125,"line":1163},34,[123,1165,265],{"emptyLinePlaceholder":264},[123,1167,1169],{"class":125,"line":1168},35,[123,1170,1171],{"class":152},"var data = [ucl, cl, lcl, values];\n",[123,1173,1175],{"class":125,"line":1174},36,[123,1176,265],{"emptyLinePlaceholder":264},[123,1178,1180,1183],{"class":125,"line":1179},37,[123,1181,1182],{"class":152},"var layout = ",[123,1184,762],{"class":129},[123,1186,1188,1191,1193,1196,1198,1200,1203,1205],{"class":125,"line":1187},38,[123,1189,1190],{"class":152},"  title: ",[123,1192,728],{"class":129},[123,1194,1195],{"class":133}," text",[123,1197,301],{"class":129},[123,1199,218],{"class":129},[123,1201,1202],{"class":192},"P-Chart",[123,1204,224],{"class":129},[123,1206,1207],{"class":129}," },\n",[123,1209,1211,1213],{"class":125,"line":1210},39,[123,1212,424],{"class":129},[123,1214,227],{"class":152},[123,1216,1218],{"class":125,"line":1217},40,[123,1219,265],{"emptyLinePlaceholder":264},[123,1221,1223,1226],{"class":125,"line":1222},41,[123,1224,1225],{"class":152},"onMounted(() => ",[123,1227,762],{"class":129},[123,1229,1231,1234,1236,1239,1242,1244,1246,1248,1251,1253],{"class":125,"line":1230},42,[123,1232,1233],{"class":152},"  Plotly",[123,1235,312],{"class":129},[123,1237,1238],{"class":280},"newPlot",[123,1240,1241],{"class":152},"(chart",[123,1243,312],{"class":129},[123,1245,482],{"class":152},[123,1247,237],{"class":129},[123,1249,1250],{"class":152}," data",[123,1252,237],{"class":129},[123,1254,1255],{"class":152}," layout);\n",[123,1257,1259,1261],{"class":125,"line":1258},43,[123,1260,424],{"class":129},[123,1262,1263],{"class":152},");\n",[123,1265,1267,1269,1271],{"class":125,"line":1266},44,[123,1268,156],{"class":129},[123,1270,538],{"class":133},[123,1272,137],{"class":129},[21,1274,1275,1276],{},"結果は以下の図のとおりです：\n",[63,1277],{"alt":1278,"className":1279,"height":77,"src":1280,"width":77},"Plotly.js畫出的基本P-Chart",[67],"\u002Fimages\u002Fblogs\u002FplotlyJs\u002FbasicPChart.png",[21,1282,1283,1284],{},"さらに高度な実装例として、不良率が管理上限（UCL）を超えた場合に、赤いポイントと赤いラインで警告を表示することができます。表示例は以下の図のとおりです：\n",[63,1285],{"alt":1286,"className":1287,"height":77,"src":1288,"width":77},"Plotly.js畫出的進階P-Chart",[67],"\u002Fimages\u002Fblogs\u002FplotlyJs\u002FpChartAdvantage.png",[21,1290,1291],{},"上記のグラフは、他の統計管理図にも応用することができます。例えば、：",[21,1293,1294],{},"C-Chart,\nNP-Chart,\nU-Chart\nXBar-R-Chart\nXBar-S-Chart\nXMed-R-Chart\nX-MR-Chart,\nMA-Chart\nI-MR-Chart",[21,1296,567,1297,1301],{},[25,1298,1300],{"href":1299},"\u002Fsolutions\u002Fspc","SPC"," 。",[21,1303,1304],{},[25,1305,578],{"href":577},[580,1307,1308],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":44,"searchDepth":140,"depth":140,"links":1310},[],"2026-10-05","まず、Vite を使用して Vue 3 の新規プロジェクトを素早く作成します。プログラミング言語はデフォルトの JavaScript を使用し、その後、Plotly.js を順を追ってインストールして導入します。今回は P管理図（不良率管理図） を例に、統計的工程管理（SPC）で使用される管理図の実装方法を説明します。",{"src":1314},"images\u002Fblogs\u002FplotlyJs\u002FpChartAdvantage.png",{},"\u002Fblog\u002Fja\u002Fplotlyjs",{"title":600,"description":1312},"blog\u002Fja\u002FplotlyJs","dQqGsbZOIz-4kNX1iM5p7NFJ6zfMMmoRjAPS4RhVUP4",1791796703176]