どうも！スカーレット坊やです！
ウェブサイトの構築に挑戦したいと思った時、コーディングの知識がないと手が出ないことって多いですよね。そんな時に強力な味方となるのが、WordPressのプラグイン「Elementor」と話題のAI「ChatGPT」の組み合わせ。これまでの常識を覆す驚きの結果が待っています。コレはマジで凄かった、是非一緒に見ていきましょう。
スカ坊ボタンを5回押したら画像を変えたい。
オープニングシャッターを入れたい
うーーん、条件付きの機能なんてどうすりゃいいのさ
コロElementorの弱点はウィジェットに無い事を要求されたときですよね…ふむ、ChatGPTが役に立つのではないですか？
スカ坊あの今話題のAI、ChatGPTですか？コロさん何考えてるのかな…？
このブログで解決できること
- ChatGPT と Elementorの効果的な連携術
- HTMLウィジェットがマジで神ウィジェットになった
- ここまで読んでくれた人の続き（笑
Elementorとは？－ これ一つでウェブサイト作成が可能
ウェブサイト作成を考えているときの、コードの書き方がわからない、デザインのセンスがない、時間がない…そんな悩みを一掃してくれるのがWordPressのプラグイン「Elementor」です。Elementorの詳しいことはこちらを見てね！
Elementorは、手軽にウェブサイト作成を可能にするツールです。Elementorを使えば、絵画を描くかのように、自由自在にウェブサイトのデザインが行えます。この直感的な操作感が、Elementorを全世界で500万以上のユーザーに愛される理由となっています。コードを使わないのでノーコードツールなどと言われますね。
今回紹介するのは何も最新機能という訳じゃありません。ずっと前からある「HTMLウィジェット」です。このウィジェットを使えば、カスタムHTMLコードをウェブサイトに追加できるようになります。CSSやJavaScriptも使えますよ！
しかし、そこで必要となるのが、HTMLなどの基本的な知識。ここで新たな問題が生じますよね。
それが「コードが書けない。」
でも、その問題もAIの力を借りれば解決可能です。そこで、AI「ChatGPT」の登場です。
今回は、Elementorとの連携にスポットを当てたいので、ChatGPTの始め方・使い方についてはこちらを参考にしてね
スカ坊GPT-4なら言うことなしだけど、GPT-3.5（無料モデル）でもかなり使えるよ！
ChatGPTのチカラ – コードが書けないあなたを救う「AI」
さて、いよいよ使っていきましょう、OpenAIが開発したAI「ChatGPT」です。ChatGPTは、大規模なデータを学習して、人間が書いたような文章を生成できるAIです。また、人間の言語を理解し、それに適切な返答をすることも可能です。このような能力を活用すれば、コードが書けなくとも「代わりに書いてもらう」事ができるのです。
具体的には、あなたがウェブサイトに欲しい機能やデザインをChatGPTに伝えると、それに対応するHTMLコードを生成します。たとえば、「ID：buttonというボタン と ID：imageという画像があります」
ボタンを5回クリックしたら画像が変わるようにしたと言われた時、Elementorのウィジェットではなかなか大変なことじゃないかと思います。ましてや、さらに5回クリックしたら元の絵に戻してと言われたらどうしましょう？
このような時に、ChatGPTに聞いてみましょう。
「ID：button」というボタンを5回押した時に「ID：image」の画像をAからBに変えたい。これを実行できるコードを書きなさい
とChatGPTに投げ込むと…
<script>
// ボタンが押された回数をカウントする変数
let buttonPressCount = 0;
// ボタンの要素を取得
const button = document.getElementById('button');
// 画像の要素を取得
const image = document.getElementById('image');
// ボタンがクリックされたときのイベントリスナーを追加
button.addEventListener('click', function() {
// ボタンが押された回数をカウントアップ
buttonPressCount++;
// ボタンが5回押されたときに画像を変更
if (buttonPressCount >= 5) {
image.srcset = 'imageB.jpg';
}
});
</script>
このコードでは、「button」のIDが付いたボタンがクリックされるとカウンターが1増えます。カウンターが5に達したとき、「image」のIDが付いた画像のソースセットが imageB.jpg に変更されます。
なお、このコードを適切に動作させるためには、imageA.jpg と imageB.jpg というファイル名の画像が同じディレクトリに存在することが必要です。また、ボタンを押した回数が5を超えても画像は更に変更されません。それ以上の変更を必要とする場合は、このコードを適宜変更してください。
スカ坊ちょっと要注意！ 画像ウィジェットの高度な設定でIDやclassを指定できるんですが、Elementorの画像をコードで変える場合は、srcではなくsrcsetです！ これは検証でコード確認すると分かるのですが、srcに関わるタグがいくつかあります。その中で反応するのは『srcset』なんですよ！
ElementorのHTMLウィジェットにChatGPTを投入！
具体的な利用法とちょっとの注意点
さて、具体的にどのようにしてElementorとChatGPTを組み合わせればいいのでしょうか。以下に手順を説明します。
- WordPressにElementorプラグインをインストールします。
- 新しいページを作成し、Elementorを起動します。
- Elementorを使ってページをどんどん構築していきましょう
- HTMLウィジェットを選択し、ページ上の好きな場所に配置します。（読み込んでほしいタイミングの場所に設置しましょう。適切な場所に置かないと変な挙動したりします。）
- ChatGPTにウェブサイトの説明をしましょう。そこから自分がどうしたいのか、という要望を伝え、コードを書いてもらいましょう。
- 生成されたコードをHTMLウィジェットに貼り付けます。
- コードがちゃんと動いているかどうかを、ページ更新して確認しよう。編集画面よりもプレビュー、プレビューよりも実際のライブサイトです。ライブサイトがある場合はそちらで確認するようにしましょう。
これだけです。あなたが直面していた「コードが書けない」という壁を、ChatGPTがあっという間に取り払ってくれます。僕の使用感からすると、CSSを書いてもらうのが特にオススメです。JavaScriptはちょっとの事で動かに事が多いです。
先程出てきたsrcsetもそうですが、「普通こうだ」って思っていたことがちょっと違っていたりします。その時にChatGPTに書いてもらったコードを書き換える必要があります。
対してCSSの場合は「ID:◎◎◎◎ のオブジェクトがその場でふわふわ動くCSSを書きなさい」という指示を出せば、保温度の場合そのままコピペが可能です。
あとは、対応するオブジェクトのIDにちゃんと◎◎◎◎を付けてあげましょう！
スカ坊コードが動かなかった時の必殺プロンプトは、
「Wordpressのプラグイン、ElementorのHTMLウィジェットに下記のコードを入れましたが動きません。修正してください」
これで直してくれたりしますよ！
即制作・即反映 ChatGPTに書かせたコードを紹介
ID：buttonを常にページ上でふわふわ動くようにするCSS
以下のようなコードをCSSスタイルシートに追加してください。ふわふわ動かしたいものに IDを付けましょう。付けるIDは button です。
#button {
position: relative;
animation: float 2s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}このCSSでは、まず#buttonにposition: relative;を設定して、ボタンの位置を動かせるようにしています。その上で、animationプロパティを使用して、ボタンにアニメーションを適用しています。
ここで使用しているfloatはアニメーションの名前で。2sはアニメーションの期間（2秒）ease-in-outはアニメーションのタイミング関数（始まりと終わりを滑らかに）infiniteはアニメーションを無限に繰り返すことを指定しています。
そして、@keyframesルールを用いてfloatアニメーションの動作を定義しています。
0%（開始時）、50%（中間）、100%（終了時）の3つの時点で、transform: translateY()を用いてボタンの位置を上下に動かしています。translateY(-10px)はボタンを上に10ピクセル動かすことを意味します。
これで、指定したボタンがふわふわと上下に動くアニメーションが完成します。
スカ坊HTMLもCSSもJavascriptも、なんだって書いてくれますが、指示の出し方は非常に重要です。詳細であればあるほどいいです。
ボタンを５回クリックすると画像が変わり、10回クリックすると元の画像に戻るJavaScript
指定したボタンがクリックされた回数に応じて画像を切り替えるためのJavaScriptコードを以下に示します。ここでは、ボタンのIDが”button”、画像のIDが”myImage”であると仮定します。
let clickCount = 0;
document.getElementById('button').addEventListener('click', function() {
clickCount++;
if (clickCount === 5) {
document.getElementById('myImage').srcset = 'second-image.jpg'; // 5回目のクリックで画像をsecond-image.jpgに変更
}
if (clickCount === 10) {
document.getElementById('myImage').srcset = 'original-image.jpg'; // 10回目のクリックで画像をoriginal-image.jpg（元の画像）に戻す
clickCount = 0; // カウントをリセット
}
});
このコードではまず、クリックされた回数をカウントするための変数clickCountを定義しています。そして、getElementById()メソッドとaddEventListener()メソッドを用いて、指定したボタンにクリックイベントリスナーを設定しています。
その中で、クリックされるたびにclickCountを1増やし、クリックの回数に応じて画像のsrc属性を変更する処理を行っています。そして、10回クリックされたらclickCountをリセットし、再度5回目と10回目のクリックで画像が変わるようにしています。
なお、このコードを実装する際は、画像のパス（’second-image.jpg’と’original-image.jpg’）を適切に設定し、JavaScriptファイルがHTMLファイルのボタンと画像の要素を読み込んだ後に実行されるようにしてください。
スカ坊ここで紹介するコードは環境によっては動かない場合もあります。そんな時は適宜修正してもらいましょうね！
まとめ
ここまで、WordPressのプラグイン「Elementor」を使ったウェブサイト構築と、その際にChatGPTを利用してコードを書く手法について解説してきました。この組み合わせがコードが書けないあなたにどのように役立つのか、具体的な手法と例を通じてご紹介してきました。
最初に、ChatGPTの素晴らしい能力を認識することから始めました。ChatGPTは、簡単なHTMLとCSSのコードを書くことができ、ElementorのHTMLウィジェットに貼り付けるだけで美しく機能的なウェブサイトを作り上げることができます。それだけでなく、あなたの指示に従って特定の動作を実行したり、具体的な要求に応えてコードを生成したりすることも可能です。
次に、具体的な手法について解説しました。ChatGPTにどのように指示を出すのか、そしてその結果どのようなコードが生成され、それがどのようにウェブサイトに反映されるのかを明確に理解しました。また、カスタムCSSやJavaScriptについても簡単に説明し、ChatGPTがこれらのコードを生成できることを確認しました。
これらの情報を通じて、ChatGPTとElementorの強力な組み合わせが、ウェブサイトの作成における新たな可能性を切り開くことを確信していただければ幸いです。コードが書けないあなたでも、これらのツールを駆使すれば、プロ級のウェブサイト作成が可能であることを覚えておいてください。
スカ坊これはヤバいですね、指示の仕方は本当に大切ですが、Elementorにない機能などの補完がすごく簡単にできます！
コロAIは利用の仕方によって力強い味方になってくれます。プログラムが書ける書けないというのはありますが、『代わりに書かせる』のも立派なスキルですよ！
AIの凄さに驚いているのか？
「坊やだからさ」
それではまた！
