こんにちは！

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

今回は、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;

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

了解しました。「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}

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

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