時計を作ってみよう【AIと学ぶ プログラミング】/ Chat GPT4

プロンプトエンジニアリング

ドイツ時間

アナログ時計を簡単に作れるサイト

アナログの時計のコードを作るのは少し難しそうです。よって、まずは簡単にHTMLコードで作れるサイトを紹介します。

ClockLink.com 

ClockLink.comは、ブログを無料で特別に彩ります。

HTMLタグを簡単に貼り付けるだけで、ブログに瞬時に時計を表示できます。お好みのタイムゾーンを指定して表示することができます。見た目の美しさだけでなく、実用性も抜群です。

使い方

  • 好きな時計タイプや色を選ぶ
  • タイムゾーン（あるいは都市）と大きさを選ぶ
  • HTMLタグをコピペする

デジタル時計を作る

日本
ドイツ

こちらは、プログラミング初心者である私が、ChatGPT４と対話しながら作ったものです。

デジタル時計はChatGPT４と対話しながら、比較的簡単にコードを作ることができます。

おすすめは、「デジタル時計の簡単なコードを作って」とコマンドした後、そのコードを基準にして自分で欲しい機能をお願いしましょう。

ドイツと日本のデジタル時計のコード 【ワードプレス用】

HTML
<!-- 時刻表のスタイル -->
<style>
.time-display-container {
    width: 60%;
    margin: 0 auto;
    padding: 30px;
    border-radius: 20px;
    background-color: #F0F8FF; /* 淡い水色の背景 */
    box-shadow: 0px 3px 15px rgba(0,0,0,0.1);
}

div.time-display-container .timeTitle {
    font-size: 24px;
    color: #87CEFA; /* 水色 */
    margin-bottom: 10px;
    border-bottom: 2px dotted #B0E0E6;
    padding-bottom: 5px;
}

div.time-display-container .timeBox {
    font-size: 22px;
    border: 2px solid #B0E0E6; /* 淡い水色のボーダー */
    padding: 15px;
    border-radius: 20px;
    color: #3baff7;
    margin-bottom: 30px; /* 時刻ボックス間のスペース */
}
</style>

<div class="time-display-container">
    <!-- 日本の時刻表示 -->
    <div class="timeTitle">日本</div>
    <div class="timeBox" id="currentTimeJapan"></div>
    <!-- ドイツの時刻表示 -->
    <div class="timeTitle">ドイツ</div>
    <div class="timeBox" id="currentTimeGermany"></div>
</div>

<!-- 現在の日本とドイツの時刻を表示するjQueryコード -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
(function($) {
    jQuery(document).ready(function() {
        function updateCurrentTime() {
            // 日本の時刻
            const japanTime = new Date().toLocaleString("en-US", {
                timeZone: "Asia/Tokyo",
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
            $('#currentTimeJapan').text(japanTime);
            // ドイツの時刻
            const germanyTime = new Date().toLocaleString("en-US", {
                timeZone: "Europe/Berlin",
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
            $('#currentTimeGermany').text(germanyTime);
        }
        updateCurrentTime();
        setInterval(updateCurrentTime, 1000);  // 毎秒時刻を更新
    });
})(jQuery);
</script>
【ポイント】こちらのコードは、ワードプレスのHTMLカスタムにそのままコピペすれば使えます。テーマや、jQueryのバージョンなどが異なり、使えない場合がありますので気をつけてください。このコードをコピペして、変えてほしい部分（国をアメリカ・イギリスにする／形を変える）をChatGPPTに伝えると修正したコードを教えてくれます。また、jQueryのバージョンの調べ方も、ChatGPTに頼めば教えてくれます。

対話のポイント

  • 日本語で構いませんが、コードを見せても対応してくれます。
  • 出来るだけ詳細に前提や、作りたいものを明確にすること。
  • わからないことがあれば、その都度それに関して質問をして答えてくれます。
  • コードがうまく動かない場合も、その点を直接尋ねて見ましょう。対話していくうちに、ChatGPTあるいは自分自身で答えを見つけることができます。
どこのWEBで使うのか（ワードプレス）/ どんな機能が欲しいのか（日本とドイツのデジタル時計を並べる）/ 色やデザインもコマンドしないとシンブルなコードが返ってきます。（パステルカラー・淡い水色とピンク・丸みがある四角など）

楽しく製作しながら、ChatGPTと対話しながら構造を学び、スキルを伸ばそう！

Advertisement