canva 2025 update AI機能
canvaがとてつもないアップデートですなんとプログラミングも他の生成AIと同じくできてしまいます。他の生成AIとの違いは、なんたってデザインがいいことです。いろんなことが使えるようになりましたサンプル、とってもデザイン性が高いです共有もできるんですプログラミングもできるんですフロントエンドの部分を作ってくれますさすが、デザインはきれいですねバックエンドもお願いしてみました自分のサーバにいれたら、ちゃんと動きましたcopilot,chatgptと同じにできます。ソースは他の生成AIより長いです違いはフォームのデザインが他よりきれいです生成されたHTML<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>イベント申し込みフォーム</title> <script src="https://cdn.tailwindcss.com"></script> <style> body { background-color: #f0f9ff; font-family: 'Hiragino Sans', 'Meiryo', sans-serif; } .form-container { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } </style></head><body> <div class="min-h-screen flex items-center justify-center p-4"> <div class="form-container bg-white rounded-lg p-8 w-full max-w-md"> <div class="text-center mb-6"> <h1 class="text-2xl font-bold text-blue-800">イベント申し込みフォーム</h1> <p class="text-gray-600 mt-2">以下のフォームに必要事項を入力してください</p> </div> <div id="responseMessage" class="hidden mb-4 p-4 rounded"></div> <form id="eventForm" class="space-y-4" action="register.php" method="post"> <div> <label for="name" class="block text-sm font-medium text-gray-700 mb-1">お名前</label> <input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> </div> <div> <label for="email" class="block text-sm font-medium text-gray-700 mb-1">メールアドレス</label> <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> </div> <div> <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">電話番号</label> <input type="tel" id="phone" name="phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> </div> <div> <label for="event" class="block text-sm font-medium text-gray-700 mb-1">参加イベント</label> <select id="event" name="event" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> <option value="">選択してください</option> <option value="event1">春のワークショップ (4月15日)</option> <option value="event2">夏のセミナー (7月20日)</option> <option value="event3">秋の展示会 (10月5日)</option> </select> </div> <div> <label for="message" class="block text-sm font-medium text-gray-700 mb-1">メッセージ (任意)</label> <textarea id="message" name="message" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> </div> <div class="pt-2"> <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-300 ease-in-out transform hover:scale-105"> 申し込む </button> </div> </form> <!-- 確認モーダル --> <div id="confirmationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> <div class="bg-white rounded-lg p-8 max-w-md w-full mx-4"> <h2 class="text-xl font-bold text-gray-800 mb-4">申し込み内容の確認</h2> <div id="confirmationDetails" class="text-gray-700 mb-6"></div> <div class="flex justify-end space-x-3"> <button id="closeModal" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300"> 戻る </button> <button id="confirmSubmit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"> 送信する </button> </div> </div> </div> <!-- 完了メッセージ --> <div id="completionMessage" class="hidden"> <div class="text-center py-8"> <svg class="mx-auto h-16 w-16 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> </svg> <h2 class="text-2xl font-bold text-gray-800 mt-4">お申し込みありがとうございます！</h2> <p class="text-gray-600 mt-2">確認メールをお送りしました。</p> <p class="text-gray-600">ご入力いただいたメールアドレスをご確認ください。</p> <button id="newRegistration" class="mt-6 px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"> 新しい申し込みをする </button> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('eventForm'); const confirmationModal = document.getElementById('confirmationModal'); const confirmationDetails = document.getElementById('confirmationDetails'); const closeModalBtn = document.getElementById('closeModal'); const confirmSubmitBtn = document.getElementById('confirmSubmit'); const completionMessage = document.getElementById('completionMessage'); const newRegistrationBtn = document.getElementById('newRegistration'); const responseMessage = document.getElementById('responseMessage'); // イベント名のマッピング const eventNames = { 'event1': '春のワークショップ (4月15日)', 'event2': '夏のセミナー (7月20日)', 'event3': '秋の展示会 (10月5日)' }; form.addEventListener('submit', function(e) { e.preventDefault(); // フォームデータの取得 const name = document.getElementById('name').value; const email = document.getElementById('email').value; const phone = document.getElementById('phone').value; const eventValue = document.getElementById('event').value; const eventName = eventNames[eventValue] || '選択されていません'; const message = document.getElementById('message').value; // 確認モーダルの内容を設定 confirmationDetails.innerHTML = ` <p><strong>お名前:</strong> ${name}</p> <p><strong>メールアドレス:</strong> ${email}</p> <p><strong>電話番号:</strong> ${phone || '未入力'}</p> <p><strong>参加イベント:</strong> ${eventName}</p> <p><strong>メッセージ:</strong> ${message || '未入力'}</p> `; // モーダルを表示 confirmationModal.classList.remove('hidden'); }); closeModalBtn.addEventListener('click', function() { confirmationModal.classList.add('hidden'); }); confirmSubmitBtn.addEventListener('click', function() { // モーダルを非表示 confirmationModal.classList.add('hidden'); // フォームデータを取得 const formData = new FormData(form); // Ajaxリクエストを送信 fetch('register.php', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { if (data.success) { // 成功時: フォームを非表示にして完了メッセージを表示 form.classList.add('hidden'); completionMessage.classList.remove('hidden'); } else { // エラー時: エラーメッセージを表示 responseMessage.textContent = data.message; responseMessage.classList.remove('hidden'); responseMessage.classList.add('bg-red-100', 'text-red-700', 'border-l-4', 'border-red-500'); // 3秒後にメッセージを非表示 setTimeout(() => { responseMessage.classList.add('hidden'); }, 3000); } }) .catch(error => { // 通信エラー時 responseMessage.textContent = 'サーバーとの通信中にエラーが発生しました。'; responseMessage.classList.remove('hidden'); responseMessage.classList.add('bg-red-100', 'text-red-700', 'border-l-4', 'border-red-500'); // 3秒後にメッセージを非表示 setTimeout(() => { responseMessage.classList.add('hidden'); }, 3000); }); }); newRegistrationBtn.addEventListener('click', function() { // フォームをリセット form.reset(); // フォームを再表示して完了メッセージを非表示 form.classList.remove('hidden'); completionMessage.classList.add('hidden'); }); }); </script><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'94063582a0f4eb82',t:'MTc0NzM0OTU4Mi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body></html>生成されたPHP<?php// データベースファイルのパス$db_path = 'inq.db';// データベース接続関数function connect_db() { global $db_path; try { // SQLiteデータベースに接続 $db = new PDO('sqlite:' . $db_path); // エラーモードを例外に設定 $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // テーブルが存在しない場合は作成 $db->exec('CREATE TABLE IF NOT EXISTS event_registrations ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, email TEXT NOT NULL, phone TEXT, event TEXT NOT NULL, message TEXT, registration_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP )'); return $db; } catch (PDOException $e) { // エラーメッセージを表示して終了 die('データベース接続エラー: ' . $e->getMessage()); }}// フォーム処理用のPHPif ($_SERVER['REQUEST_METHOD'] === 'POST') { // POSTデータを取得 $name = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_STRING); $email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL); $phone = filter_input(INPUT_POST, 'phone', FILTER_SANITIZE_STRING); $event = filter_input(INPUT_POST, 'event', FILTER_SANITIZE_STRING); $message = filter_input(INPUT_POST, 'message', FILTER_SANITIZE_STRING); // 必須項目の検証 if (empty($name) || empty($email) || empty($event)) { $response = [ 'success' => false, 'message' => '必須項目を入力してください。' ]; echo json_encode($response); exit; } // メールアドレスの形式を検証 if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { $response = [ 'success' => false, 'message' => '有効なメールアドレスを入力してください。' ]; echo json_encode($response); exit; } try { // データベースに接続 $db = connect_db(); // データを挿入するためのSQL文を準備 $stmt = $db->prepare('INSERT INTO event_registrations (name, email, phone, event, message) VALUES (:name, :email, :phone, :event, :message)'); // パラメータをバインド $stmt->bindParam(':name', $name); $stmt->bindParam(':email', $email); $stmt->bindParam(':phone', $phone); $stmt->bindParam(':event', $event); $stmt->bindParam(':message', $message); // SQLを実行 $stmt->execute(); // 確認メールを送信 send_confirmation_email($name, $email, $event); // 成功レスポンスを返す $response = [ 'success' => true, 'message' => '申し込みが完了しました。確認メールをお送りしました。' ]; echo json_encode($response); } catch (PDOException $e) { // エラーレスポンスを返す $response = [ 'success' => false, 'message' => 'データベースエラー: ' . $e->getMessage() ]; echo json_encode($response); } exit;}// 確認メール送信関数function send_confirmation_email($name, $email, $event_code) { // イベント名のマッピング $event_names = [ 'event1' => '春のワークショップ (4月15日)', 'event2' => '夏のセミナー (7月20日)', 'event3' => '秋の展示会 (10月5日)' ]; $event_name = isset($event_names[$event_code]) ? $event_names[$event_code] : 'イベント'; // メールの件名 $subject = '【イベント申し込み確認】' . $event_name; // メール本文 $message = <<<EOT{$name} 様イベントにお申し込みいただき、ありがとうございます。以下の内容で申し込みを受け付けました。■イベント名: {$event_name}■お名前: {$name}■メールアドレス: {$email}イベントの詳細や当日の案内については、後日改めてご連絡いたします。ご不明な点がございましたら、このメールにご返信ください。---------------------------イベント運営事務局Email: event@example.comTel: 03-1234-5678---------------------------EOT; // メールヘッダー $headers = 'From: イベント運営事務局 <event@example.com>' . "\r\n"; $headers .= 'Reply-To: event@example.com' . "\r\n"; $headers .= 'Content-Type: text/plain; charset=UTF-8' . "\r\n"; // メール送信 mail($email, $subject, $message, $headers);}?>
