比較検索なら 天秤AI byGMO
ライバー事務所の公式ホームページを作成!!

ライバー事務所の公式ホームページを作成!!

JavaScriptとCSSを使用しライバー事務所の公式サイトを作成します!!

推奨モデル - GPT-4o
1
0
79
5
user_63462521900974080
がお気に入り登録しました。

投稿日時:

    • プロンプト実行例
    ライバー事務所の公式ホームページを作成!!

    こんにちは!

    こんにちは!

    ライバー事務所の公式ホームページを作成!!

    こんにちは!ウェブサイト構築に関心を持っていただきありがとうございます。さて、ライバー事務所の公式ウェブサイトを作成するための具体的なコードを生成していきましょう。まずは、基本的な構造から始めて、順次機能を追加していきます。

    今回は、Reactをフロントエンドフレームワークとして使用し、Express.jsとNode.jsをバックエンドとして使用します。データベースはMongoDBを利用し、RESTful APIでデータを提供します。

    プロジェクトの基本セットアップ

    1. プロジェクトのディレクトリ構造

    1/live-office
    2  /client
    3    /public
    4    /src
    5      /components
    6      /pages
    7      App.js
    8      index.js
    9  /server
    10    /models
    11    /routes
    12    server.js
    13  package.json
    14  .gitignore

    2. パッケージのインストール

    bash
    1# プロジェクトディレクトリを作成
    2$ mkdir live-office
    3$ cd live-office
    4
    5# クライアントサイドのセットアップ
    6$ npx create-react-app client
    7
    8# サーバーサイドのセットアップ
    9$ mkdir server
    10$ cd server
    11$ npm init -y
    12$ npm install express mongoose cors body-parser
    13
    14# MongoDB接続用のパッケージをインストール
    15$ npm install mongoose
    16
    17# プロジェクトのルートに戻る
    18$ cd ..

    3. バックエンドのセットアップ

    server/server.js
    JavaScript
    1const express = require('express');
    2const mongoose = require('mongoose');
    3const cors = require('cors');
    4const bodyParser = require('body-parser');
    5
    6const app = express();
    7const port = process.env.PORT || 5000;
    8
    9// Middleware
    10app.use(cors());
    11app.use(bodyParser.json());
    12
    13// MongoDB Connection
    14mongoose.connect('mongodb://localhost:27017/liveoffice', { 
    15  useNewUrlParser: true, 
    16  useUnifiedTopology: true 
    17});
    18
    19const db = mongoose.connection;
    20db.on('error', console.error.bind(console, 'MongoDB connection error:'));
    21db.once('open', () => {
    22  console.log("Connected to MongoDB");
    23});
    24
    25// Routes
    26app.get('/', (req, res) => {
    27  res.send('Hello from the backend!');
    28});
    29
    30// Starting the server
    31app.listen(port, () => {
    32  console.log(`Server is running on port: ${port}`);
    33});
    server/models/Liver.js
    JavaScript
    1const mongoose = require('mongoose');
    2
    3const LiverSchema = new mongoose.Schema({
    4  name: { type: String, required: true },
    5  bio: { type: String },
    6  image: { type: String },
    7  socialLinks: {
    8    twitter: { type: String },
    9    instagram: { type: String },
    10    youtube: { type: String }
    11  },
    12  stats: {
    13    viewers: { type: Number },
    14    followers: { type: Number }
    15  },
    16  schedule: [{ date: { type: Date }, event: { type: String } }]
    17});
    18
    19module.exports = mongoose.model('Liver', LiverSchema);
    server/routes/livers.js
    JavaScript
    1const express = require('express');
    2const router = express.Router();
    3const Liver = require('../models/Liver');
    4
    5// Get all livers
    6router.get('/', async (req, res) => {
    7  try {
    8    const livers = await Liver.find();
    9    res.json(livers);
    10  } catch(err) {
    11    res.status(500).json({ message: err.message });
    12  }
    13});
    14
    15// Get a liver by ID
    16router.get('/:id', async (req, res) => {
    17  try {
    18    const liver = await Liver.findById(req.params.id);
    19    res.json(liver);
    20  } catch(err) {
    21    res.status(500).json({ message: err.message });
    22  }
    23});
    24
    25// Create a new liver
    26router.post('/', async (req, res) => {
    27  const liver = new Liver(req.body);
    28  try {
    29    const newLiver = await liver.save();
    30    res.status(201).json(newLiver);
    31  } catch(err) {
    32    res.status(400).json({ message: err.message });
    33  }
    34});
    35
    36module.exports = router;
    server/server.js (ルートを追加)
    JavaScript
    1// Routes
    2app.use('/api/livers', require('./routes/livers'));

    4. フロントエンドのセットアップ

    client/src/App.js
    JavaScript
    1import React from 'react';
    2import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
    3import Navbar from './components/Navbar';
    4import HomePage from './pages/HomePage';
    5import LiverProfilePage from './pages/LiverProfilePage';
    6import SchedulePage from './pages/SchedulePage';
    7import LiveVideoPage from './pages/LiveVideoPage';
    8import ContactPage from './pages/ContactPage';
    9import BlogPage from './pages/BlogPage';
    10
    11function App() {
    12  return (
    13    <Router>
    14      <div>
    15        <Navbar />
    16        <Switch>
    17          <Route path="/" exact component={HomePage} />
    18          <Route path="/profile/:id" component={LiverProfilePage} />
    19          <Route path="/schedule" component={SchedulePage} />
    20          <Route path="/live" component={LiveVideoPage} />
    21          <Route path="/contact" component={ContactPage} />
    22          <Route path="/blog" component={BlogPage} />
    23        </Switch>
    24      </div>
    25    </Router>
    26  );
    27}
    28
    29export default App;
    client/src/components/Navbar.js
    JavaScript
    1import React from 'react';
    2import { Link } from 'react-router-dom';
    3
    4const Navbar = () => {
    5  return (
    6    <nav className="navbar">
    7      <ul>
    8        <li><Link to="/">ホーム</Link></li>
    9        <li><Link to="/schedule">スケジュール</Link></li>
    10        <li><Link to="/live">ライブビデオ</Link></li>
    11        <li><Link to="/contact">お問い合わせ</Link></li>
    12        <li><Link to="/blog">ブログ</Link></li>
    13      </ul>
    14    </nav>
    15  );
    16}
    17
    18export default Navbar;

    ここまでで、基本的な構造を持ったウェブサイトのフロントエンドとバックエンドのセットアップが完了しました。次に、各ページの具体的な実装に取り掛かりましょう。質問や特定の部分についてのリクエストがあればお知らせください。

    HTMLとCSS等を使用してサイト本体を高品質なデザインにし生成

    事務所名「LifeLIVE」

    ライバー事務所の公式ホームページを作成!!

    了解しました。「LifeLIVE」事務所の公式ウェブサイトの高品質なデザインをHTMLとCSSで実装していきましょう。以下に、全体的な構成と重要なコンポーネントを示します。

    ディレクトリ構造

    フロントエンド(React)部分を中心に実装し、主にHTMLやCSSファイルを用意します。

    1/live-office
    2  /client
    3    /public
    4    /src
    5      /components
    6        Navbar.js
    7        LiverCard.js
    8        ScheduleCalendar.js
    9        LiveVideoPlayer.js
    10        ContactForm.js
    11      /pages
    12        HomePage.js
    13        LiverProfilePage.js
    14        SchedulePage.js
    15        LiveVideoPage.js
    16        ContactPage.js
    17        BlogPage.js
    18      /styles
    19        App.css
    20        Navbar.css
    21        LiverCard.css
    22        ScheduleCalendar.css
    23        LiveVideoPlayer.css
    24        ContactForm.css
    25        HomePage.css
    26      App.js
    27      index.js
    28    package.json
    29  /server
    30    /models
    31    /routes
    32    server.js
    33  package.json
    34  .gitignore

    1. 共通スタイル (App.css)

    css
    1body, html {
    2  margin: 0;
    3  padding: 0;
    4  font-family: 'Roboto', Arial, sans-serif;
    5  background-color: #f4f4f9;
    6  color: #333;
    7}
    8
    9a {
    10  text-decoration: none;
    11  color: #007bfc;
    12}
    13
    14.container {
    15  width: 90%;
    16  margin: 0 auto;
    17}
    18
    19h1, h2, h3, h4, h5, h6 {
    20  margin: 0;
    21}

    2. ナビゲーションバー (Navbar.js, Navbar.css)

    Navbar.js

    JavaScript
    1import React from 'react';
    2import { Link } from 'react-router-dom';
    3import './Navbar.css';
    4
    5const Navbar = () => {
    6  return (
    7    <nav className="navbar">
    8      <div className="logo">
    9        <Link to="/">LifeLIVE</Link>
    10      </div>
    11      <ul className="nav-links">
    12        <li><Link to="/">ホーム</Link></li>
    13        <li><Link to="/schedule">スケジュール</Link></li>
    14        <li><Link to="/live">ライブビデオ</Link></li>
    15        <li><Link to="/contact">お問い合わせ</Link></li>
    16        <li><Link to="/blog">ブログ</Link></li>
    17      </ul>
    18    </nav>
    19  );
    20}
    21
    22export default Navbar;

    Navbar.css

    css
    1.navbar {
    2  width: 100%;
    3  background-color: #007bfc;
    4  padding: 1rem 0;
    5  display: flex;
    6  justify-content: space-between;
    7  align-items: center;
    8}
    9
    10.navbar .logo {
    11  margin-left: 2rem;
    12  font-size: 1.5rem;
    13  font-weight: bold;
    14  color: #fff;
    15}
    16
    17.navbar .nav-links {
    18  list-style: none;
    19  display: flex;
    20  margin-right: 2rem;
    21}
    22
    23.navbar .nav-links li {
    24  margin: 0 1rem;
    25}
    26
    27.navbar .nav-links li a {
    28  color: #fff;
    29  font-size: 1rem;
    30  transition: color 0.3s ease;
    31}
    32
    33.navbar .nav-links li a:hover {
    34  color: #ffd700; /* ゴールド */
    35}

    3. ホームページ (HomePage.js, HomePage.css)

    HomePage.js

    JavaScript
    1import React from 'react';
    2import './HomePage.css';
    3
    4const HomePage = () => {
    5  return (
    6    <div className="home-container">
    7      <h1>ようこそ、LifeLIVEへ</h1>
    8      <p>私たちは、最高のライバーたちをサポートする事務所です。</p>
    9      <div className="highlight-livers">
    10        {/* ここに注目のライバーのスライダーを追加する */}
    11        <h2>注目のライバー</h2>
    12        {/* 例: <LiverSlider /> */}
    13      </div>
    14    </div>
    15  );
    16}
    17
    18export default HomePage;

    HomePage.css

    css
    1.home-container {
    2  text-align: center;
    3  padding: 2rem;
    4  background-image: url('/path/to/your/background-image.jpg');
    5  background-size: cover;
    6  background-position: center;
    7  color: #fff;
    8}
    9
    10.home-container h1 {
    11  font-size: 2.5rem;
    12  margin-bottom: 1rem;
    13}
    14
    15.home-container p {
    16  font-size: 1.2rem;
    17  margin-bottom: 2rem;
    18}
    19
    20.highlight-livers {
    21  background-color: rgba(0, 0, 0, 0.6);
    22  padding: 2rem;
    23  border-radius: 10px;
    24}

    4. ライバーカード (LiverCard.js, LiverCard.css)

    ライバー個々のプロフィール情報を扱うカードです。

    LiverCard.js

    JavaScript
    1import React from 'react';
    2import './LiverCard.css';
    3
    4const LiverCard = ({ liver }) => {
    5  return (
    6    <div className="liver-card">
    7      <img src={liver.image} alt={liver.name} className="liver-image" />
    8      <h3>{liver.name}</h3>
    9      <p>{liver.bio}</p>
    10      <div className="social-links">
    11        {liver.socialLinks.twitter && <a href={liver.socialLinks.twitter}>Twitter</a>}
    12        {liver.socialLinks.instagram && <a href={liver.socialLinks.instagram}>Instagram</a>}
    13        {liver.socialLinks.youtube && <a href={liver.socialLinks.youtube}>YouTube</a>}
    14      </div>
    15      <div className="stats">
    16        <p>視聴者数: {liver.stats.viewers}</p>
    17        <p>フォロワー数: {liver.stats.followers}</p>
    18      </div>
    19    </div>
    20  );
    21}
    22
    23export default LiverCard;

    LiverCard.css

    css
    1.liver-card {
    2  background-color: #fff;
    3  border-radius: 10px;
    4  padding: 1rem;
    5  margin: 1rem;
    6  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    7  text-align: center;
    8}
    9
    10.liver-card .liver-image {
    11  width: 100%;
    12  height: auto;
    13  border-radius: 50%;
    14}
    15
    16.liver-card h3 {
    17  font-size: 1.5rem;
    18  margin: 1rem 0 0.5rem;
    19}
    20
    21.liver-card p {
    22  font-size: 1rem;
    23  color: #666;
    24}
    25
    26.liver-card .social-links a {
    27  margin: 0 0.5rem;
    28  color: #007bfc;
    29  transition: color 0.3s ease;
    30}
    31
    32.liver-card .social-links a:hover {
    33  color: #ffd700;
    34}
    35
    36.liver-card .stats p {
    37  font-size: 0.9rem;
    38  margin: 0.5rem 0;
    39  color: #333;
    40}

    5. スケジュールページ (SchedulePage.js, ScheduleCalendar.css)

    SchedulePage.js

    JavaScript
    1import React from 'react';
    2import './SchedulePage.css';
    3import ScheduleCalendar from '../components/ScheduleCalendar';
    4
    5const SchedulePage = () => {
    6  return (
    7    <div className="schedule-container">
    8      <h1>ライブスケジュール</h1>
    9      <ScheduleCalendar />
    10    </div>
    11  );
    12}
    13
    14export default SchedulePage;

    ScheduleCalendar.js

    JavaScript
    1import React from 'react';
    2import './ScheduleCalendar.css';
    3
    4const ScheduleCalendar = () => {
    5  // ここにカレンダー形式でスケジュールを表示するロジックを実装
    6  return (
    7    <div className="calendar">
    8      {/* カレンダーコンテンツ */}
    9      <p>カレンダーはここに表示されます。</p>
    10    </div>
    11  );
    12}
    13
    14export default ScheduleCalendar;

    ScheduleCalendar.css

    css
    1.calendar {
    2  background-color: #fff;
    3  border-radius: 10px;
    4  padding: 2rem;
    5  margin: 2rem 0;
    6  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    7}
    8
    9.calendar p {
    10  text-align: center;
    11  font-size: 1.2rem;
    12  color: #666;
    13}

    6. ライブビデオページ (LiveVideoPage.js, LiveVideoPlayer.css)

    LiveVideoPage.js

    JavaScript
    1import React from 'react';
    2import './LiveVideoPage.css';
    3import LiveVideoPlayer from '../components/LiveVideoPlayer';
    4
    5const LiveVideoPage = () => {
    6  return (
    7    <div className="live-video-container">
    8      <h1>ライブビデオ</h1>
    9      <LiveVideoPlayer />
    10      {/* 過去のアーカイブビデオリンクを追加 */}
    11      <div className="archive-videos">
    12        <h2>過去のアーカイブビデオ</h2>
    13        <ul>
    14          {/* アーカイブビデオリンクをリスト表示 */}
    15          <li><a href="#0">アーカイブビデオ 1</a></li>
    16          <li><a href="#0">アーカイブビデオ 2</a></li>
    17          <li><a href="#0">アーカイブビデオ 3</a></li>
    18        </ul>
    19      </div>
    20    </div>
    21  );
    22}
    23
    24export default LiveVideoPage;

    LiveVideoPlayer.js

    JavaScript
    1import React from 'react';
    2import './LiveVideoPlayer.css';
    3
    4const LiveVideoPlayer = () => {
    5  return (
    6    <div className="video-player">
    7      <iframe
    8        width="100%"
    9        height="400"
    10        src="https://www.youtube.com/embed/example_video_id"
    11        title="YouTube video player"
    12        frameBorder="0"
    13        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    14        allowFullScreen
    15      ></iframe>
    16    </div>
    17  );
    18}
    19
    20export default LiveVideoPlayer;

    LiveVideoPlayer.css

    css
    1.video-player {
    2  width: 100%;
    3  background-color: #fff;
    4  padding: 1rem;
    5  border-radius: 10px;
    6  margin: 2rem 0;
    7  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    8}
    9
    10.archive-videos {
    11  background-color: #fff;
    12  padding: 1rem;
    13  border-radius: 10px;
    14  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    15  margin: 2rem 0;
    16}
    17
    18.archive-videos h2 {
    19  font-size: 1.5rem;
    20  margin-bottom: 1rem;
    21}
    22
    23.archive-videos ul {
    24  list-style: none;
    25  padding: 0;
    26}
    27
    28.archive-videos ul li {
    29  margin: 0.5rem 0;
    30}
    31
    32.archive-videos ul li a {
    33  color: #007bfc;
    34  font-size: 1rem;
    35  transition: color 0.3s ease;
    36}
    37
    38.archive-videos ul li a:hover {
    39  color: #ffd700;
    40}

    7. お問い合わせページ (ContactPage.js, ContactForm.css)

    ContactPage.js

    JavaScript
    1import React from 'react';
    2import './ContactPage.css';
    3import ContactForm from '../components/ContactForm';
    4
    5const ContactPage = () => {
    6  return (
    7    <div className="contact-container">
    8      <h1>お問い合わせ</h1>
    9      <ContactForm />
    10      <div className="contact-info">
    11        <h2>事務所の連絡先情報</h2>
    12        <p>住所: 1234 ライブ通り, 東京都</p>
    13        <p>電話: 03-1234-5678</p>
    14        <p>メール: info@lifelive.jp</p>
    15      </div>
    16    </div>
    17  );
    18}
    19
    20export default ContactPage;

    ContactForm.js

    JavaScript
    1import React, { useState } from 'react';
    2import './ContactForm.css';
    3
    4const ContactForm = () => {
    5  const [formData, setFormData] = useState({
    6    name: '',
    7    email: '',
    8    message: ''
    9  });
    10
    11  const handleChange = (e) => {
    12    setFormData({ ...formData, [e.target.name]: e.target.value });
    13  }
    14
    15  const handleSubmit = (e) => {
    16    e.preventDefault();
    17    // フォーム送信ロジックを追加
    18
    19    console.log('Form submitted:', formData);
    20  }
    21
    22  return (
    23    <form className="contact-form" onSubmit={handleSubmit}>
    24      <div>
    25        <label htmlFor="name">名前:</label>
    26        <input
    27          type="text"
    28          id="name"
    29          name="name"
    30          value={formData.name}
    31          onChange={handleChange}
    32          required
    33        />
    34      </div>
    35      <div>
    36        <label htmlFor="email">メールアドレス:</label>
    37        <input
    38          type="email"
    39          id="email"
    40          name="email"
    41          value={formData.email}
    42          onChange={handleChange}
    43          required
    44        />
    45      </div>
    46      <div>
    47        <label htmlFor="message">メッセージ:</label>
    48        <textarea
    49          id="message"
    50          name="message"
    51          value={formData.message}
    52          onChange={handleChange}
    53          required
    54        ></textarea>
    55      </div>
    56      <button type="submit">送信</button>
    57    </form>
    58  );
    59}
    60
    61export default ContactForm;

    ContactForm.css

    css
    1.contact-form {
    2  background-color: #fff;
    3  padding: 2rem;
    4  border-radius: 10px;
    5  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    6  margin: 2rem 0;
    7}
    8
    9.contact-form div {
    10  margin-bottom: 1rem;
    11}
    12
    13.contact-form label {
    14  display: block;
    15  font-size: 1rem;
    16  margin-bottom: 0.5rem;
    17}
    18
    19.contact-form input,
    20.contact-form textarea {
    21  width: 100%;
    22  padding: 0.5rem;
    23  border: 1px solid #ddd;
    24  border-radius: 5px;
    25  font-size: 1rem;
    26}
    27
    28.contact-form button {
    29  background-color: #007bfc;
    30  color: #fff;
    31  padding: 0.7rem 1.5rem;
    32  border: none;
    33  border-radius: 5px;
    34  font-size: 1rem;
    35  cursor: pointer;
    36  transition: background-color 0.3s ease;
    37}
    38
    39.contact-form button:hover {
    40  background-color: #005bb5;
    41}
    42
    43.contact-info {
    44  background-color: #fff;
    45  padding: 2rem;
    46  border-radius: 10px;
    47  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    48  margin: 2rem 0;
    49}
    50
    51.contact-info p {
    52  font-size: 1rem;
    53  margin: 0.5rem 0;
    54}

    ここまでで、各ページと主要なコンポーネントのスタイルが完成しました。必要に応じて他のページやコンポーネントを追加・編集してください。

    もし特定の機能やページについてさらに詳しい実装が必要であれば、お知らせください。

    コメント 0

    他のプロンプトもチェック