WEB制作の疑問をChatGPTで解決したプロセスをご紹介
この画像は写真ACのAI生成画像です。やっぱり勝手に作ってくれたほうが楽ですね。
ぬこファクトリーは一人親方の個人事業主ですのでいつも作業は一人です。でもWEB制作作業では「ちょっとここ誰かに聞きたい」ということが多々あります。
ググればいいのでしょうけど、そこまでするのも面倒だし会社勤めをしていた頃のように隣にいる同僚に「ねぇねぇ」というノリで聞きたい時があるのですが、かといってSNSで誰かに聞くのも気が引けるし、仮に答えてくれたとしても正しく答えてくれるとも限らないし、はてなとかの人力検索は時間かかるし・・と悶々としていたところChatGPTの登場でようやくそれが可能になりました。
というわけで今回はちょっとしたWEB制作の疑問をChatGPTで解決したプロセスをご紹介します。ちなみにバージョンはフリー版である3.5です。
ではスタート！
↓
目次
ChatGPTにHTMLでやりたいことを聞く
私：bootstrap5でスマホでカラムの順序を逆に表示させたい
ChatGPT：Bootstrap 5では、Flexboxを使用してレスポンシブなデザインを作成できます。スマートフォンでカラムの順序を逆に表示させるには、Flexboxのorderプロパティを使用します。
以下は、Bootstrap 5を使用して、スマートフォンでカラムの順序を逆にする例です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Reverse Order on Mobile</title>
<style>
/* Custom CSS for reversing order on mobile */
@media (max-width: 767px) {
.order-reverse-mobile {
order: -1; /* Set the order to -1 to reverse the order */
}
}
</style>
</head>
<body>
<div class="container mt-4">
<div class="row">
<div class="col-md-6 order-md-1 order-reverse-mobile">
<div class="p-3 bg-primary text-white">Column 1 (On mobile, this will be second)</div>
</div>
<div class="col-md-6 order-md-2 order-reverse-mobile">
<div class="p-3 bg-secondary text-white">Column 2 (On mobile, this will be first)</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
この例では、order-reverse-mobileクラスを使用して、スマートフォンのビューポート幅が767px以下の場合にorderプロパティを設定しています。orderを-1に設定することで、カラムの順序が逆になります。
サンプルコードを入力して具体的な修正案を求める
私：このソースのカラムをレスポンシブで順序を逆に表示させたい。
<div class="site-section">
<div class="container">
<div class="row">
<div class="col-md-5 ml-auto pl-md-5 order-md-1 order-reverse-mobile">
<span class="text-cursive h5 text-red">ぬこファクトリーとは</span>
<h3 class="text-black">愛媛県松山市のフリーランス</h3>
<p><span>ぬこファクトリーとは愛媛県松山市のフリーランスのおっさんです。趣味は自転車で重度のコミュ障です。</span></p>
<p class="mt-5"><a href=hoge.html" class="btn btn-success py-4 btn-custom-1" target="_blank">ぬこファクトリー</a></p>
</div>
<div class="col-md-6 mb-6 mb-md-0 order-md-2 order-reverse-mobile">
<img src="hoge.png" alt="ぬこファクトリー" class="img-fluid btn-custom-1">
</div>
</div>
</div>
</div>ChatGPT：Bootstrap 5を使用して、カラムの順序をレスポンシブに逆に表示させるには、質問に記載されているようにorder-reverse-mobileクラスを作成し、それを使用して必要なカラムにorderプロパティを設定します。
以下が修正されたコードです：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Reverse Order on Mobile</title>
<style>
/* Custom CSS for reversing order on mobile */
@media (max-width: 767px) {
.order-reverse-mobile {
order: -1; /* Set the order to -1 to reverse the order */
}
}
</style>
</head>
<body>
<div class="site-section">
<div class="container">
<div class="row">
<div class="col-md-5 ml-auto pl-md-5 order-md-1 order-reverse-mobile">
<span class="text-cursive h5 text-red">ぬこファクトリーとは</span>
<h3 class="text-black">愛媛県松山市のフリーランス</h3>
<p><span>ぬこファクトリーとは愛媛県松山市のフリーランスのおっさんです。趣味は自転車で重度のコミュ障です。</span></p>
<p class="mt-5"><a href="hoge.html" class="btn btn-success py-4 btn-custom-1" target="_blank">ぬこファクトリー</a></p>
</div>
<div class="col-md-6 mb-6 mb-md-0 order-md-2 order-reverse-mobile">
<img src="hoge.png" alt="ぬこファクトリー" class="img-fluid btn-custom-1">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
このコードでは、スマートフォンのビューポート幅が767px以下の場合に、order-reverse-mobileクラスが適用され、orderプロパティが-1に設定され、カラムの順序が逆になります。
ChatGPTが修正案を提示したが正しく動作しなかったので修正を求める
私：スマホで順序が逆に表示されていません
ChatGPT：申し訳ありません。おそらく、Bootstrap 5のFlexboxの機能を利用していないことが原因かもしれません。以下のように、orderプロパティを適切に設定するために、d-flexとflex-column-reverseクラスを使用してみてください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Reverse Order on Mobile</title>
</head>
<body>
<div class="site-section">
<div class="container">
<div class="row d-flex flex-column-reverse flex-md-row">
<div class="col-md-5 ml-auto pl-md-5">
<span class="text-cursive h5 text-red">ぬこファクトリーとは</span>
<h3 class="text-black">愛媛県松山市のフリーランス</h3>
<p><span>ぬこファクトリーとは愛媛県松山市のフリーランスのおっさんです。趣味は自転車で重度のコミュ障です。</span></p>
<p class="mt-5"><a href="hoge.html" class="btn btn-success py-4 btn-custom-1" target="_blank">ぬこファクトリー</a></p>
</div>
<div class="col-md-6 mb-6 mb-md-0">
<img src="hoge.png" alt="ぬこファクトリー" class="img-fluid btn-custom-1">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
このコードでは、d-flexクラスでFlexboxを有効にし、flex-column-reverseクラスでスマートフォンでの表示時に列の順序を逆にします。また、flex-md-rowクラスを使用して、中サイズのビューポート以上では通常の横向きの表示となります。これにより、スマートフォンでの表示時に順序が逆になります。
見事正解にたどり着いたので報告と謝意を伝える
私：出来ました！ありがとうございます！
ChatGPT：どういたしまして！お役に立てて良かったです。他に質問があればいつでもどうぞ。成功をお祈りしています！
まとめ
最後に修正されたコードで見事に正しく動作してこのやり取りは終了しました。一連のプロセスの中で質問者の意図を理解し解決策を提示しようとしているのが分かりますね。特に間違っていた場合それを指摘したら即座に修正案を再提示してくるのはAIならではの動作で最初はとても感動しました（いや〜すごいなぁ）。
しかもお礼を言うとちゃんと返してくれるのもかわいいというか、すごいというか・・。
AIの民間活用はまだまだこれからですが、これはまさに革命です。過去のITはあくまでツールであって有効に活用できていたかというと疑問ですが、今後AIが様々な場面で活用されることでITが社会の中で活かされていくことと思います。民間のみならず政府をはじめ社会インフラでも導入を進めていって欲しいものです。
個人的にはChatGPTの有料版であるGPT-4の利用料金が500円〜1,000円くらいになってくれないかなぁと密かに期待しています。
来年は本格的なAI導入の時代になりそうですね。
それではまた。
Follow me!
