【身近に感じるAI】ChatGPTでHTMLコードを作ってみた！

近年では身近なところでAIの活用が増えており、以下のような例があります。

1. スマートフォンのAIアシスタント: スマートフォンのAIアシスタントとして、Siri（Apple）、Googleアシスタント（Google）、Amazon Alexa（Amazon）などがあります。
2. オンラインショッピングのAI推薦: オンラインショッピングサイトやアプリでは、AIを活用した商品の推薦が行われています。
3. ソーシャルメディアのAIフィルタリング: ソーシャルメディアプラットフォームでは、AIを活用したコンテンツのフィルタリングが行われています。

これらの例の他にも、AIの活用がますます増えており、生活やビジネスの様々な場面で身近に感じることができるようになっています。

今回は「ChatGPT」を使ってHTMLコードを作成してみます。

サインアップにはグーグルアカウントでも可能なので、グーグルアカウントがあればすぐに開始できます。
▼「ChatGPT」についてはこちらの記事も合わせてお読み下さい。

ChatGPTを”チョコっとだけ”触ってみた！

さっそくHTMLコードを作成してみます

「Chat GPTの公式ページ（https://openai.com/blog/chatgpt/）」へアクセスして開始します。

現在（2023年04月17日）では下記の部分から開始することができます。

アコーディオンメニューのHTMLコード

よく使われるアコーディオンと呼ばれる（クリックしたら開く）メニューのHTMLコードを作成してみます。
「アコーディオンメニューのHTMLコード」と入力します。

3つの異なるセクションを持つアコーディオンメニューを作成しています。各セクションには、ボタンとパネルの2つの要素が含まれます。ボタンは、クリックすると対応するパネルを表示/非表示に切り替えるためのトリガーとして機能します。JavaScriptのコードでは、ボタンがクリックされたときにパネルの表示/非表示を切り替えるようにプログラムされています。また、CSSスタイルシートを使用して、アコーディオンメニューの見た目をカスタマイズしています。

テキストでは上記のように返答してくれます。
実際に作成されたコードをHTMLとして保存したページは下記のリンクからご覧いただけます。

サンプルページはこちら

Javascriptまで自動で生成されます。
見出しの部分はホバーまで設定されていて細かいですね。

ハンバーガーメニューのHTMLコード

続いてはスマートフォンの表示で定番のハンバーガーメニューのHTMLコードを作成してみます。
「ハンバーガーメニューのHTMLコード」と入力します。

ハンバーガーアイコンをクリックすると、メニューがスライドインして表示されるシンプルなハンバーガーメニューです。

テキストでは上記のように返答してくれます。
アコーディオンにくらべてシンプルです。

サンプルページはこちら

ハンバーガーメニューと入力しただけですが、レスポンシブの仕様になってました。
PCサイズではメニューが表示され、スマホサイズではハンバーガーメニューになります。

簡単にHTMLコードも作成できる

上記のように「〇〇のHTML」と入力するだけで簡単にHTMLコードとJavascriptまで作成できます。
細かいところを自分で調整する必要もありますが、充分使える形で作成されますね。

必要最小限のコードを作成してくれるので、HTMLを勉強中の方も、ChatGPTにHTMLコードを作成してもらって参考にすることもできそうです。
欲しいサンプルコードを探すのは意外と難しかったりしますからね。

まとめ

AIとの関わりが身近になることは、今後ますます増えると予想されています。
AI技術の進化やデジタル化の進展により、AIが私たちの日常生活やビジネスに深く関与することが予想されています。
これからAIの活用方法を勉強していきたいと思います。

おまけ（Stable Diffusion）

AIによる画像生成や最近では動画生成までできるようです。
※AIによる生成物の著作権については使用するツールなどの規約をきちんと読みましょう

フリーでお試しすることもできます。
https://stablediffusionweb.com/

きれいな画像を生成するには設定は必要ですが、生成してみました。

画像をもとに画像を生成することもできます。
見事に別人にしてくれました。

AIを理解して正しく使っていきましょう！