{"id":1169,"date":"2025-02-21T10:51:49","date_gmt":"2025-02-21T01:51:49","guid":{"rendered":"https:\/\/route-zero.com\/recruit\/route\/1169\/"},"modified":"2025-04-21T10:56:19","modified_gmt":"2025-04-21T01:56:19","slug":"1169","status":"publish","type":"route","link":"https:\/\/route-zero.com\/recruit\/route\/1169\/","title":{"rendered":"JavaScript\u3060\u3051\u3067AI\u753b\u50cf\u8a8d\u8b58\uff01TensorFlow.js\u3067\u4f5c\u308b\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u5206\u985e\u30a2\u30d7\u30ea"},"content":{"rendered":"
\n

\u306f\u3058\u3081\u306b\uff5cJavaScript\u3060\u3051\u3067AI\u3092\u4f53\u9a13\u3067\u304d\u308b\u6642\u4ee3<\/h2>\n

\u300cAI\u3092\u4f7f\u3046\u306b\u306fPython\u3084\u9ad8\u5ea6\u306a\u6570\u5f0f\u304c\u5fc5\u8981\u300d\u2015\u2015\u305d\u3093\u306a\u6642\u4ee3\u306f\u3082\u3046\u7d42\u308f\u308a\u307e\u3057\u305f\u3002
Google\u304c\u958b\u767a\u3059\u308b TensorFlow.js \u3092\u4f7f\u3048\u3070\u3001JavaScript\u3060\u3051\u3067\u30d6\u30e9\u30a6\u30b6\u4e0a\u306bAI\u3092\u7d44\u307f\u8fbc\u3080\u3053\u3068\u304c\u53ef\u80fd<\/strong>\u3067\u3059\u3002\u3057\u304b\u3082\u3001Web\u30ab\u30e1\u30e9\u3092\u4f7f\u3063\u3066\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u7269\u4f53\u3092\u5206\u985e<\/strong>\u3067\u304d\u307e\u3059\u3002<\/p>\n

\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001TensorFlow.js\u3068MobileNet\u30e2\u30c7\u30eb\u3092\u4f7f\u3063\u3066\u3001\u30ab\u30e1\u30e9\u306b\u6620\u3063\u305f\u7269\u4f53\u3092\u81ea\u52d5\u3067\u5206\u985e\u3059\u308b\u30a2\u30d7\u30ea<\/strong>\u306e\u4f5c\u308a\u65b9\u3092\u3001HTML\u30d5\u30a1\u30a4\u30eb1\u679a\u3067\u5b8c\u7d50\u3059\u308b\u5f62\u3067\u89e3\u8aac<\/strong>\u3057\u307e\u3059\u3002<\/p>\n

\n

\u5b8c\u6210\u30a4\u30e1\u30fc\u30b8<\/h2>\n
    \n
  • \n

    HTML\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u304f\u3060\u3051\u3067\u30ab\u30e1\u30e9\u304c\u8d77\u52d5<\/p>\n<\/li>\n

  • \n

    \u6620\u3063\u3066\u3044\u308b\u7269\u4f53\u3092AI\u304c\u81ea\u52d5\u5206\u985e<\/p>\n<\/li>\n

  • \n

    \u30e9\u30d9\u30eb\u3068\u78ba\u7387\u304c2\u79d2\u3054\u3068\u306b\u66f4\u65b0\u3055\u308c\u308b<\/p>\n<\/li>\n

  • \n

    \u7279\u5225\u306a\u74b0\u5883\u30fb\u30b5\u30fc\u30d0\u30fc\u30fb\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u306f\u4e0d\u8981<\/p>\n<\/li>\n<\/ul>\n

    \n

    \u5fc5\u8981\u306a\u3082\u306e<\/h2>\n
      \n
    • \n

      Web\u30d6\u30e9\u30a6\u30b6\uff08Chrome\u63a8\u5968\uff09<\/p>\n<\/li>\n

    • \n

      \u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u63a5\u7d9a\uff08CDN\u7d4c\u7531\u3067\u30e9\u30a4\u30d6\u30e9\u30ea\u8aad\u8fbc\uff09<\/p>\n<\/li>\n

    • \n

      HTML\u30d5\u30a1\u30a4\u30eb1\u679a\u3060\u3051\uff01<\/p>\n<\/li>\n<\/ul>\n

      \n

      \u30b3\u30fc\u30c9\u5168\u6587\uff08\u30b3\u30d4\u30da\u3067\u3059\u3050\u8a66\u305b\u308b\uff09<\/h2>\n

      \u4ee5\u4e0b\u304c\u3001\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u753b\u50cf\u5206\u985e\u3092\u884c\u3046HTML\u30b3\u30fc\u30c9<\/strong>\u3067\u3059\uff01<\/p>\n

      <!DOCTYPE html>\r\n<html lang=\"ja\"<\/span>>\r\n  <head>\r\n    <meta charset=\"UTF-8\"<\/span> \/>\r\n    <title>\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u753b\u50cf\u5206\u985e<\/title>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tensorflow\/tfjs@4.10.0\"<\/span>><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tensorflow-models\/mobilenet@2.1.0\"<\/span>><\/script>\r\n    <style>\r\n      body {\r\n        font-family: sans-serif;\r\n        text-align: center;\r\n        margin-top: 20<\/span>px;\r\n      }\r\n      video {\r\n        width: 224<\/span>px;\r\n        height: 224<\/span>px;\r\n      }\r\n      p {\r\n        font-size: 16<\/span>px;\r\n        margin-top: 10<\/span>px;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <h2>\u30ab\u30e1\u30e9AI\u5206\u985e<\/h2>\r\n    <video id=\"video\"<\/span> autoplay muted playsinline><\/video>\r\n    <p id=\"result\"<\/span>>\u30e2\u30c7\u30eb\u3092\u8aad\u307f\u8fbc\u307f\u4e2d...<\/p>\r\n\r\n    <script>\r\n      const<\/span> video = document.getElementById(\"video\"<\/span>);\r\n      const<\/span> result = document.getElementById(\"result\"<\/span>);\r\n\r\n      async<\/span> function init<\/span>(<\/span>)<\/span> {\r\n        const<\/span> stream = await<\/span> navigator.mediaDevices.getUserMedia({\r\n          video: { width: 224<\/span>, height: 224<\/span>, facingMode: \"environment\"<\/span> },\r\n          audio: false<\/span>,\r\n        });\r\n        video.srcObject = stream;\r\n\r\n        const<\/span> model = await<\/span> mobilenet.load();\r\n        result.innerText = \"\u5206\u985e\u4e2d...\"<\/span>;\r\n        const<\/span> classify = async<\/span> () => {\r\n          const<\/span> predictions = await<\/span> model.classify(video);\r\n          result.innerText = predictions.length\r\n            ? `${predictions[0<\/span>].className} (${(predictions[0<\/span>].probability * 100<\/span>).toFixed(1<\/span>)}%)`\r\n            : \"\u5206\u985e\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\"<\/span>;\r\n          setTimeout(classify, 2000<\/span>);\r\n        };\r\n\r\n        classify();\r\n      }\r\n\r\n      init();\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
      \u89e3\u8aac\uff5c\u3053\u306e\u30b3\u30fc\u30c9\u304c\u3084\u3063\u3066\u3044\u308b\u3053\u3068<\/h3>\n