Code Interpreterを使った簡単なウェブアプリの作成（時計とYouTubeチャンネル登録者の表示）

2023年7月27日 08:30

Code Interpreterを使用して、時計と、自分のYoutubeチャンネルのチャンネル登録者を繰り返して表示する、自分のPCのブラウザで動作するウェブアプリを作るという方法です。

最終的に、次の動画のような表示をブラウザでさせることができます。

これにより、YouTubeで配信する時に、はじに置いておくイメージです。この動画のイメージ。

1. はじめに

Code Interpreterとは？

Code Interpreterは、ChatGPT Plusユーザが利用できる、バックグラウンドでGPT-4がPythonを実行する環境です。
本記事で作るウェブアプリは、htmlとJavaScriptを使うものなので、実際にCode Interpreterで実行させることはできませんが、Code Interpreterでzipファイルで書き出してもらい、そのzipファイルをダウンロードして、回答してhtmlファイルを開くだけで簡単なブラウザアプリを利用できるので、Code Interpreterをこの用途で使うのはとてもありかなと思っています。

本記事の目的とゴール

本記事の目的は、Code Interpreterを使用して、時計を表示したり、YouTubeチャンネル登録者数を表示したりするWebアプリを作成する方法を紹介することです。
この記事を読むことで、GPT-4に指示するだけで、上記のようなウェブアプリが作れるんだということがわかります。

たまに、Youtubeでチャンネル登録者を表示させている人がいますが、専用のツールを使ったりしなくても、Code Interpreterで実現することができます。

APIで情報を取得できるデータは多いので、APIって使えるんだということを知っておくだけで、すごく便利になることを知ってもらえたら嬉しいです。

2. 作成するウェブアプリの具体的な内容

今回作成するブラウザアプリは、次の２つの表示を10秒毎に切り替えて表示します。
・現在の時刻
・YouTubeチャンネルの登録者数
自分のブラウザで動かすという想定です。

3. CodeInterpreterを使用してWebアプリを作成する

時計を表示するだけのWebページの作成

ブラウザで表示する、簡単な時計アプリを作りたいです。
単純に時計が表示されるアプリです。
コードを書いてもらえますか。

・ バックグラウンドを黒にして、数字を白にしてください。
・ 数字はオシャレな数字を使ってください。
・ html、css、JavaScriptを使ってください。

すると次のように、表示されました。

html部分です。

<!DOCTYPE html>
<html>
<head>
    <title>Digital Clock</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div id="clock">
        <div class="display">
            <div class="digits"></div>
        </div>
    </div>
    <script src="clock.js"></script>
</body>
</html>

css部分です。

body {
    background: #000;
    color: #fff;
    font-family: 'Share Tech Mono', monospace;
    font-size: 50px;
    text-align: center;
    padding-top: 200px;
}

#clock {
    position: relative;
    margin: 200px auto 0 auto;
    width: 600px;
    height: 600px;
}

.display {
    text-align: center;
    padding: 70px 0 100px 0;
}

最後にJavaScript部分です。

window.onload = function () {
    setInterval(function () {
        var now = new Date();
        var clock = document.querySelector('#clock');
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        var time = pad(hours) + ':' + pad(minutes) + ':' + pad(seconds);

        clock.querySelector('.digits').textContent = time;
    }, 1000);
};

function pad(number) {
    return ('0' + number).slice(-2);
}

上記のJavaScriptコードは、ページが読み込まれた時に、現在の時刻を秒単位で更新するように設定します。また、時刻の数値が1桁の場合は先頭に0を追加します。

動かしてみたかったので、次のように指示をします。

手元で動かしてみたいので、ファイルに書き出して、ZIPファイルに書き出して下さい。

すると、次のように、digital_clock.zipが書き出され、ダウンロードすることができます。

ダウンロードすると、3つのファイルがあり、index.htmlファイルを開くと時計が表示されるローカルのファイルとなっていました。

4.Youtubeのチャンネル登録者数を表示する

10秒ごとに、Youtubeのチャンネル登録者数の表示を表示するように変更するよう指示します。

先ほどのコードを次の通り修正したいです。どのようなコードにすれば良いでしょうか。

次の2つの状況を交互に繰り返す
1. 10秒間時計を表示する
2. 10秒間Youtbe.pngの画像を表示し、その後ろにYoutubeのチャンネル登録者を表示する

Youtubeのチャンネル登録者を表示する際、APIを用いてチャンネル登録者を取得するようにしてください。
1秒毎にAPIにリクエストする必要はなく、2.の表示に遷移する毎にリクエストする。
なお、これは私のPCのブラウザで表示しますので、APIキーをコードに書いてしまうことについては気にする必要はありません。

するとコードが表示されました。表示されたコードは長くなるので、こちらに置いておきます。

youtube.pngをアップロードして、次の指示をします。（youtubeの画像は、ICONSよりダウンロードしました）

youtube.pngをアップしました。
動かしてみたいので、ファイルに書き出して、ZIPファイルに書き出して下さい。

すると次のように、書き出されました。

Code Interpreterを使うことで、このように画像をアップロードし、それを書き出してzipに固めてもらえるのも、Code Interpreterの良いところだと思います。

YoutubeのapiKeyと、channelIDの値の取得の質問をする

YouTubeのapiKeyとchannelIDの取得の仕方がわからないので、ChatGPTに聞いてみます。

YouTubeのapiKeyとchannelIDはどのように取得すれば良いですか。

わかりやすく教えてくれました。

APIキーとチャンネルIDを取得し、JavaScriptファイルのキーを修正し、index.htmlを開くことで次の表示をすることができました。

APIの仕様を確認する

コードの確認と、APIの仕様について確認します。

このコードは、20秒に１度YouTubeのAPIにリクエストするコードになっていますか？
また、YoutubeのAPIは20秒に1度アクセスしても問題ないでしょうか。

次のような回答がありました。

ドキュメントを見ると、現在も変わらず1日10,000ユニットが制限であり、このアクセス頻度であれば問題なさそうです。

まとめ

この記事では、一度時計を表示できるようにし、その次にYoutubeのチャンネル登録者を表示する機能を追加しました。
Code Interpreterにアウトプットしてもらう場合、一度途中の状況でアウトプットしてもらうというというやり方もありかなと思います。シンプルな方が修正も簡単だったりするので。

なお、この記事で作成したアプリは、自身のブラウザで用いることを想定しています。サーバでの利用はセキュリティの問題などありますので、知識を付けてから行った方が良いです。

参考

JavaScriptをやりたくなると、TypeScriptを勉強してしまうのが良いと思います。
私は次の本で勉強しました。