ChatGPTに会議記録アプリの作成をお願いしてみた

## ChatGPTの力で業務課題を解決したい
こんにちは、小売企業に勤めているnaripokです:raised_hand:

今回は身近な業務課題の解決を目指し、ChatGPTの力を借りて、アプリを作ってみました。

会議の音声を録音し、テキスト化するアプリです。

ぜひ読んでいただけると嬉しいです。

## 作成したアプリ

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">╋━━ <br>　 　　会議記録アプリをつくってみました👨‍💻<br>　　　　　　　　　　　　　　　　　　　　　━━━╋<br> <a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/ChatGPT?src=hash&amp;ref_src=twsrc%5Etfw">#ChatGPT</a> <a href="https://twitter.com/hashtag/CodePen?src=hash&amp;ref_src=twsrc%5Etfw">#CodePen</a> <a href="https://twitter.com/hashtag/%E4%BC%9A%E8%AD%B0%E8%A8%98%E9%8C%B2?src=hash&amp;ref_src=twsrc%5Etfw">#会議記録</a> <a href="https://t.co/ojRQ4pbSwU">pic.twitter.com/ojRQ4pbSwU</a></p>&mdash; Ka4128 (@Ka4128_1) <a href="https://twitter.com/Ka4128_1/status/1733559169880649855?ref_src=twsrc%5Etfw">December 9, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>




## なぜ今回このアプリを作ったか

私はシステム関係の仕事をしており、
仕事柄、日々、他企業との打ち合わせや社内の会議をおこなっています。

会議の内容は新人さん達がメモとって、打合せ後には、議事録にまとめ、
参加者に共有をしてくれます。

しかし、**その会議内容を正確にメモするのがとても大変です。**

専門用語が飛び交う中、新人さん達はメモを取りますが、まだ理解が伴っていないため、
内容がでたらめになってしまうことが多く、後から確認をおこないます。

**音声のメモを自動でとってくれるロボットがあればいいのに・・・**

そんな身近な小さな課題を解決すべく、音声データをテキストとして生成してくれる
アプリの作成をしてみました。




:::note info
今回使用したツール
- [ChatGPT](https://chat.openai.com/)
- [CodePen](https://codepen.io/features/)

<details>
  <summary><font color="Blue">詳細はクリック</summary>

 - ChatGPTとは
　　OpenAIが開発した自然言語処理のモデルです。
  　　プロンプトといわれる指示を入力することで、
    　　チャット形式で回答を出力します。
    　　→　今回は**コード作成**する役割


- CodePenとは
　　ウェブ開発者がコードをテストし、プロトタイプを作成し、
  　　他の開発者とコードを共有するためのプラットフォームです。
   　　→　今回は**コード読み込み、アプリのプロトタイプの作成**する役割
     
</details>

::::

## 作成手順
ChatGPTに作成したいアプリについて指示を入力し、出力されたコードを
CodePenに実装していきます。

入力したプロンプト文です。
**会議での音声をテキスト変換し、議事録を作成するHTML文の生成**をお願いしました。

![スクリーンショット (157).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/fa620702-9e7e-4217-be90-6a5bd89a3f21.png)

ChatGPTが以下回答を提示してくれました。

![スクリーンショット (158).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/ca307740-8ff4-9e89-03eb-de9dfe9f5145.png)



<details><summary><font color="Green"><b>生成されたHTMLコード</b></font></summary>

```html:HTMLコード<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>音声録音アプリ</title>
  <style>
    #startBtn, #stopBtn {
      padding: 10px;
      font-size: 16px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <button id="startBtn">録音開始</button>
  <button id="stopBtn" disabled>録音停止</button>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // Recorder.jsの初期化
      var audioContext = new (window.AudioContext || window.webkitAudioContext)();
      var recorder;

      // ユーザーのデバイスが録音をサポートしているか確認
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ audio: true })
          .then(function (stream) {
            // 録音ボタンのイベントリスナー
            document.getElementById('startBtn').addEventListener('click', function () {
              startRecording(stream);
            });

            // 停止ボタンのイベントリスナー
            document.getElementById('stopBtn').addEventListener('click', function () {
              stopRecording();
            });
          })
          .catch(function (err) {
            console.error('録音がサポートされていません: ', err);
          });
      }

      function startRecording(stream) {
        recorder = new Recorder(stream);
        recorder.record();
        document.getElementById('startBtn').disabled = true;
        document.getElementById('stopBtn').disabled = false;
      }

      function stopRecording() {
        recorder.stop();
        recorder.exportWAV(function (blob) {
          // 録音が終了した後の処理
          var audioURL = URL.createObjectURL(blob);
          var audioElement = new Audio(audioURL);
          audioElement.controls = true;
          document.body.appendChild(audioElement);

          // 以下は議事録の作成などの処理を追加できます
        });

        recorder.clear();
        document.getElementById('startBtn').disabled = false;
        document.getElementById('stopBtn').disabled = true;
      }
    });
  </script>
</body>
</html>

```
</details>
CodePenにコードを貼り付けて、作成した結果はこちら。


![スクリーンショット (160).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/c09bb46e-990a-1ae4-cbe5-465bc5c14f21.png)
味気ない画面になってしまいました。
また、音声を録音するのみで再生もできず何の意味もありません。
読み取った音声をテキスト化したいです。

そこで、追加でプロンプトを入力しました。



![スクリーンショット (162).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/6721a300-cf4b-cc6c-008b-376d3fd15472.png)

![スクリーンショット (166).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/53112db1-be53-6a25-ab7c-48ca93bcdfcd.png)

![スクリーンショット (165).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/458fa3cf-79b9-75d8-ec21-b24348d81588.png)


<details><summary><font color="Green"><b>生成されたHTMLコード</b></font></summary>

```html:HTMLコード<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>音声認識アプリ</title>
  <style>
    #startBtn, #stopBtn {
      padding: 10px;
      font-size: 16px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <button id="startBtn">音声認識開始</button>
  <button id="stopBtn" disabled>音声認識停止</button>
  <div id="output"></div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var recognition = new webkitSpeechRecognition(); // Google Chrome用のプレフィックスを使用
      recognition.continuous = true;
      recognition.lang = 'ja-JP'; // 認識言語を日本語に設定

      // 認識開始ボタンのイベントリスナー
      document.getElementById('startBtn').addEventListener('click', function () {
        startRecognition();
      });

      // 認識停止ボタンのイベントリスナー
      document.getElementById('stopBtn').addEventListener('click', function () {
        stopRecognition();
      });

      // 認識結果を処理
      recognition.onresult = function (event) {
        var result = event.results[event.results.length - 1][0].transcript;
        document.getElementById('output').textContent = result;
      };

      // 認識エラー時の処理
      recognition.onerror = function (event) {
        console.error('認識エラー:', event.error);
      };

      function startRecognition() {
        recognition.start();
        document.getElementById('startBtn').disabled = true;
        document.getElementById('stopBtn').disabled = false;
      }

      function stopRecognition() {
        recognition.stop();
        document.getElementById('startBtn').disabled = false;
        document.getElementById('stopBtn').disabled = true;
      }
    });
  </script>
</body>
</html>


```
</details>


作成されたアプリがこちら。
![スクリーンショット (170).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/10fc0ad9-5a6d-b597-5449-099db4e3fc70.png)

パソコンのマイクを使い、音声を入力してみます。
![スクリーンショット (169).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/1d5ca4c1-3a20-efa2-f6c5-e54a9e0d3b39.png)
おお、見事読み取れている！少し感動です。
ただ、アプリの画面が味気ない為、ChatGPTに以下指示をしてみました。


![スクリーンショット (172).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/7e322adf-38b5-3c90-6db5-116cdc10f670.png)

![スクリーンショット (173).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/ac276bdb-1b49-29b8-e73a-10f0ce802787.png)


<details><summary><font color="Green"><b>生成されたHTMLコード</b></font></summary>

```html:HTMLコード<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>音声認識アプリ</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      background-color: #f2f2f2;
      text-align: center;
      margin: 0;
      padding: 20px;
    }

    button {
      padding: 10px;
      font-size: 16px;
      margin: 10px;
      cursor: pointer;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
    }

    button:disabled {
      background-color: #ddd;
      color: #666;
      cursor: not-allowed;
    }

    #output {
      margin-top: 20px;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <button id="startBtn">音声認識開始</button>
  <button id="stopBtn" disabled>音声認識停止</button>
  <div id="output"></div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var recognition = new webkitSpeechRecognition();
      recognition.continuous = true;
      recognition.lang = 'ja-JP';

      document.getElementById('startBtn').addEventListener('click', function () {
        startRecognition();
      });

      document.getElementById('stopBtn').addEventListener('click', function () {
        stopRecognition();
      });

      recognition.onresult = function (event) {
        var result = event.results[event.results.length - 1][0].transcript;
        document.getElementById('output').textContent = result;
      };

      recognition.onerror = function (event) {
        console.error('認識エラー:', event.error);
      };

      function startRecognition() {
        recognition.start();
        document.getElementById('startBtn').disabled = true;
        document.getElementById('stopBtn').disabled = false;
      }

      function stopRecognition() {
        recognition.stop();
        document.getElementById('startBtn').disabled = false;
        document.getElementById('stopBtn').disabled = true;
      }
    });
  </script>
</body>
</html>


```
</details>

見た目を変更したアプリ画面がこちら。
![スクリーンショット (175).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/e1b18985-75f3-2c5c-0a09-ccee999e21db.png)
全然カッコよくない・・・。
プロンプトを追撃してみました。

![スクリーンショット (178).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/3b9d6ccc-da21-c0ec-bece-de1707476161.png)



![スクリーンショット (179).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/f642fd56-2d99-b7ea-a854-56cf84d70c64.png)



<details><summary><font color="Green"><b>生成されたHTMLコード</b></font></summary>

```html:HTMLコード<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>音声認識アプリ</title>
  <style>
    body {
      font-family: 'Helvetica', 'Arial', sans-serif;
      background-color: #f7f7f7;
      color: #333;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    #app-container {
      background-color: #3498db;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      text-align: center;
      max-width: 400px;
      width: 100%;
      margin: auto;
    }

    h1 {
      color: white;
    }

    button {
      padding: 15px 20px;
      font-size: 18px;
      margin: 10px;
      cursor: pointer;
      background-color: #2ecc71;
      color: white;
      border: none;
      border-radius: 4px;
      transition: background-color 0.3s;
    }

    button:disabled {
      background-color: #ddd;
      color: #666;
      cursor: not-allowed;
    }

    #output {
      margin-top: 20px;
      font-size: 24px;
      background-color: white;
      padding: 10px;
      border-radius: 4px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="app-container">
    <h1>音声認識アプリ</h1>
    <button id="startBtn">音声認識開始</button>
    <button id="stopBtn" disabled>音声認識停止</button>
    <div id="output"></div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var recognition = new webkitSpeechRecognition();
      recognition.continuous = true;
      recognition.lang = 'ja-JP';

      document.getElementById('startBtn').addEventListener('click', function () {
        startRecognition();
      });

      document.getElementById('stopBtn').addEventListener('click', function () {
        stopRecognition();
      });

      recognition.onresult = function (event) {
        var result = event.results[event.results.length - 1][0].transcript;
        document.getElementById('output').textContent = result;
      };

      recognition.onerror = function (event) {
        console.error('認識エラー:', event.error);
      };

      function startRecognition() {
        recognition.start();
        document.getElementById('startBtn').disabled = true;
        document.getElementById('stopBtn').disabled = false;
      }

      function stopRecognition() {
        recognition.stop();
        document.getElementById('startBtn').disabled = false;
        document.getElementById('stopBtn').disabled = true;
      }
    });
  </script>
</body>
</html>


```
</details>


作成したアプリがこちら。
![スクリーンショット (185).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/6650c5fb-b382-dcb1-9092-36233e6585a0.png)
少し良くなりました。枠ができて色付くだけで全然見た目は変わります。
ただ、まだシンプルすぎる為、後でもっとアレンジします。
その前に一つ忘れていた機能を追加します。

追加した指示はこちら。
![スクリーンショット (182).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/2f65e66a-8555-9bef-1de8-6022ef373a19.png)

![スクリーンショット (183).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/5d3d693c-c6b6-fd58-2f97-7c83d2bb2a5b.png)



<details><summary><font color="Green"><b>生成されたHTMLコード</b></font></summary>

```html:HTMLコード<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>音声認識アプリ</title>
  <style>
    body {
      font-family: 'Helvetica', 'Arial', sans-serif;
      background-color: #f7f7f7;
      color: #333;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    #app-container {
      background-color: #3498db;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      text-align: center;
      max-width: 400px;
      width: 100%;
      margin: auto;
    }

    h1 {
      color: white;
    }

    button {
      padding: 15px 20px;
      font-size: 18px;
      margin: 10px;
      cursor: pointer;
      background-color: #2ecc71;
      color: white;
      border: none;
      border-radius: 4px;
      transition: background-color 0.3s;
    }

    button:disabled {
      background-color: #ddd;
      color: #666;
      cursor: not-allowed;
    }

    #output {
      margin-top: 20px;
      font-size: 24px;
      background-color: white;
      padding: 10px;
      border-radius: 4px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    #transcript {
      margin-top: 20px;
      font-size: 18px;
      white-space: pre-line;
      text-align: left;
    }
  </style>
</head>
<body>
  <div id="app-container">
    <h1>音声認識アプリ</h1>
    <button id="startBtn">音声認識開始</button>
    <button id="stopBtn" disabled>音声認識停止</button>
    <div id="output"></div>
    <div id="transcript"></div>
    <button id="exportBtn" disabled>テキスト出力</button>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var recognition = new webkitSpeechRecognition();
      recognition.continuous = true;
      recognition.lang = 'ja-JP';

      var transcript = ''; // 議事録として保持する変数

      document.getElementById('startBtn').addEventListener('click', function () {
        startRecognition();
      });

      document.getElementById('stopBtn').addEventListener('click', function () {
        stopRecognition();
      });

      document.getElementById('exportBtn').addEventListener('click', function () {
        exportTranscript();
      });

      recognition.onresult = function (event) {
        var result = event.results[event.results.length - 1][0].transcript;
        document.getElementById('output').textContent = result;
        transcript += result + '\n'; // 議事録に結果を追加
        document.getElementById('transcript').textContent = transcript;
        document.getElementById('exportBtn').disabled = false; // ボタンを有効にする
      };

      recognition.onerror = function (event) {
        console.error('認識エラー:', event.error);
      };

      function startRecognition() {
        recognition.start();
        document.getElementById('startBtn').disabled = true;
        document.getElementById('stopBtn').disabled = false;
      }

      function stopRecognition() {
        recognition.stop();
        document.getElementById('startBtn').disabled = false;
        document.getElementById('stopBtn').disabled = true;
      }

      function exportTranscript() {
        var blob = new Blob([transcript], { type: 'text/plain' });
        var url = URL.createObjectURL(blob);

        // ダウンロード用のリンクを作成し、クリックする
        var a = document.createElement('a');
        a.href = url;
        a.download = '議事録.txt';
        a.click();

        // オブジェクトURLを開放する
        URL.revokeObjectURL(url);
      }
    });
  </script>
</body>
</html>


```
</details>



![スクリーンショット (187).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/191f3e9d-b6a2-da6b-b911-fdd179b52bca.png)
テキスト出力ボタンが追加されました。
音声を取り込んで、テキスト出力をしてみます。

![スクリーンショット (190).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/a08b4c9a-9004-51d1-cef9-b2cf6135e598.png)

![スクリーンショット (193).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/36ce7893-8641-5992-a395-53281458bc2d.png)
テキストも問題なく出力できました。想定通りになりました。
<br>

最後に、このダサいアプリ画面に手を加えていきます。

まずは背景から変えてみます。
調べてみると、**CSS枠にコードを貼り付けるだけで好きな背景を設定できるサイト**が
ありました。

https://deshinon.com/2019/03/03/simpl-searchbox-default-css/


<details><summary><font color="Green"><b>背景として選んだCSSコード</b></font></summary>

```CSS:CSSコード<!DOCTYPE html>
body {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/41294/hero.jpg) no-repeat center center fixed; 
  background-size: cover;
}

// SEARCH BEGINS
.search {
  width: 500px;
  height: 40px;
  margin: 150px auto;
  background: #444;
  background: rgba(0,0,0,.2);
  border-radius:  3px;
  border: 1px solid #fff;
  
  input {
    width: 370px;
    padding: 10px 5px;
    float: left;
    color: #ccc;
    border: 0;
    background: transparent;
    border-radius: 3px 0 0 3px;
    &:focus {
      outline: 0;
      background:transparent;
    }
  }
  
  button {
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 120px;
    color: #fff;
    background: transparent;
    border-left: 1px solid #fff;
    border-radius: 0 3px 3px 0;
    &:hover {
      background: #fff;
      color:#444;
    }
    &:active {
      box-shadow: 0px 0px 12px 0px rgba(225, 225, 225, 1);
    }
    &:focus {
      outline: 0;
    }
  }  
}
// SEARCH ENDS

```
</details>



背景はこれで決定です。


あとは、アプリボタンの枠の色を背景に合うように変えていきます。
ChatGPTに変え方を聞いてみました。




![スクリーンショット (195).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/7f08677d-4ac5-6696-703c-32ff1e168880.png)


![スクリーンショット (196).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/39964e28-8821-d2d4-0157-a9ac45a149eb.png)


<details><summary><font color="Green"><b>生成されたHTMLコード</b></font></summary>

```html:HTMLコード<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>音声認識アプリ</title>
  <style>
    body {
      font-family: 'Helvetica', 'Arial', sans-serif;
      background-color: #fafafa; /* ページ全体の背景色 */
      color: #444; /* ページのテキスト色 */
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    #app-container {
      background-color: #3498db; /* 大きな枠の背景色 */
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      text-align: center;
      max-width: 400px;
      width: 100%;
      margin: auto;
    }

    h1 {
      color: #fff; /* タイトルのテキスト色 */
    }

    button {
      padding: 15px 20px;
      font-size: 18px;
      margin: 10px;
      cursor: pointer;
      background-color: #27ae60; /* ボタンの背景色 */
      color: #fff; /* ボタンのテキスト色 */
      border: none;
      border-radius: 4px;
      transition: background-color 0.3s;
    }

    button:disabled {
      background-color: #ddd;
      color: #666;
      cursor: not-allowed;
    }

    #output {
      margin-top: 20px;
      font-size: 24px;
      background-color: #fff; /* 認識結果の背景色 */
      padding: 10px;
      border-radius: 4px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    #transcript {
      margin-top: 20px;
      font-size: 18px;
      white-space: pre-line;
      text-align: left;
      color: #333; /* 議事録のテキスト色 */
    }

    #exportBtn {
      padding: 15px 20px;
      font-size: 18px;
      margin-top: 10px;
      cursor: pointer;
      background-color: #e74c3c; /* ボタンの背景色 */
      color: #fff; /* ボタンのテキスト色 */
      border: none;
      border-radius: 4px;
      transition: background-color 0.3s;
    }

    #exportBtn:disabled {
      background-color: #ddd;
      color: #666;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <div id="app-container">
    <h1>音声認識アプリ</h1>
    <button id="startBtn">音声認識開始</button>
    <button id="stopBtn" disabled>音声認識停止</button>
    <div id="output"></div>
    <div id="transcript"></div>
    <button id="exportBtn" disabled>テキスト出力</button>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var recognition = new webkitSpeechRecognition();
      recognition.continuous = true;
      recognition.lang = 'ja-JP';

      var transcript = ''; // 議事録として保持する変数

      document.getElementById('startBtn').addEventListener('click', function () {
        startRecognition();
      });

      document.getElementById('stopBtn').addEventListener('click', function () {
        stopRecognition();
      });

      document.getElementById('exportBtn').addEventListener('click', function () {
        exportTranscript();
      });

      recognition.onresult = function (event) {
        var result = event.results[event.results.length - 1][0].transcript;
        document.getElementById('output').textContent = result;
        transcript += result + '\n'; // 議事録に結果を追加
        document.getElementById('transcript').textContent = transcript;
        document.getElementById('exportBtn').disabled = false; // ボタンを有効にする
      };

      recognition.onerror = function (event) {
        console.error('認識エラー:', event.error);
      };

      function startRecognition() {
        recognition.start();
        document.getElementById('startBtn').disabled = true;
        document.getElementById('stopBtn').disabled = false;
      }

      function stopRecognition() {
        recognition.stop();
        document.getElementById('startBtn').disabled = false;
        document.getElementById('stopBtn').disabled = true;
      }

      function exportTranscript() {
        var blob = new Blob([transcript], { type: 'text/plain' });
        var url = URL.createObjectURL(blob);

        // ダウンロード用のリンクを作成し、クリックする
        var a = document.createElement('a');
        a.href = url;
        a.download = '議事録.txt';
        a.click();

        // オブジェクトURLを開放する
        URL.revokeObjectURL(url);
      }
    });
  </script>
</body>
</html>


```
</details>


指示通り、各部のカラーコードを変更していきます。
カラーコードは以下サイトを参考にしました。

https://beginners-hp.com/color-code.html

画面の表題もHTMLコード内で変え、出来上がった画面がこちら。

![スクリーンショット (199).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3575594/1066e9fc-0a71-a522-e1e4-be43701ee17c.png)

センスがないという声がどこから聞こえてきそうですが、こちらで完成です。

- <font color="#1e90ff">以下、実際にお試しできます</font>
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="bGzzxGv" data-user="ka_can" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ka_can/pen/bGzzxGv">
  会議記録_ver16</a> by ka_can (<a href="https://codepen.io/ka_can">@ka_can</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



## 作ってみての感想

ChatGPTすげー！

ChatGPTがプログラムを書けるとはよく聞きますが、コードの書き方も知らずに最終的に
こんなアプリが作れるとは思っていませんでした。
正直、コードの手直しなどかなり知識が必要だと考えていました。

<br>

ただ、やはり始めから思い描いたものを作るのはかなり難しかったです。
プロンプトの書き方や、ChatGPTにできる範囲を自分がわかっていなかったことが原因だと思いますが、何度も失敗しました。



:::note info
(失敗１)読み込んだ音声をテキスト化し、**要約までしてくれる機能**をつけようと考えていた。　
 
ChatGTPの回答より、[Google Cloud Console](https://cloud.google.com/cloud-console?hl=ja)からSpeech-to-Text APIキーを発行し、HTMLコードに埋め込もうと進めていたが、最後の段階でCodePenにAPIキーを入れるのは、他者への情報公開となり、かなり危険であるとわかった。(うまくいかず、何度もChatGPTと会話している最中に教えてくれた。)※CodePen非公開化は有料で断念
::::

:::note info
(失敗２)音声をより正確に拾えるよう**実用的なアプリ**の作成をChatGPTに指示してしまった。
　
ChatGPTが出力したPythonのコードを実行できるように、[Windows版Python](https://www.python.org/)をインストールし、[Google Colab](https://colab.research.google.com/?hl=ja)上で動かそうと実行したが、何度やってもうまくいかなかった。(実装するだけの知識が全く足りなかった。)
::::


理想を実現するためには他に方法があったかもしれませんが、今回ChatGPTからは答えを見つけられませんでした。
ChatGPTへの理解と、まだまだ自分の力をわかっていなかったことが原因だと思います。

<br>

また、今回ChatGPTを使ってみてわかった事があります。

:::note info
出力されたコード結果に対して、さらに機能追加の要望をすると、新たに作成されたコードでは、前回できたことができなくなっている場合がある。

(体験例）ボタンが機能しなくなった
::::

これからChatGPTにチャレンジする方に、これらの体験談が少しでもお役に立てればうれしいです。
 
## 最後に

 理想としているものが作れなかったのは、すごく悔しいです。

 おそらく、今の音声言語の識別精度では会議の会話をほとんど拾えません。
 マイクに向かってはっきりと話せば言語識別するレベルです。 
 ※実際の会議でテストするタイミングが今回はとれませんでした。
 <br>
悔しいので、ChatGPTの力を借りて、本当に実用的に使えるものを作っていくことに今後もチャレンジしていきたいと思います。

応援よろしくお願いします:pray:
それでは、また:raised_hand: