読者です 読者をやめる 読者になる 読者になる

Nukindex 開発ブログ

アダルトサイトNukindexの開発ブログです

全体的な View の作成が終わった

全体的な View の作成が終わった。

作成したもの

source/renderer/components/ 以下の view ファイル、 style ファイル

期待する動き

現行ページのレイアウトを再現する。

結果

成功

手順など

コンポーネントディレクトリの下には view.js と style.css が配置されている。

ROOT_DIRECTORY/
  + node_modules/
  + build/
  + source/
  |   + renderer/
  |   |   + components/
  |   |   |   + app/
  |   |   |   + header/
  |   |   |   + main/
  |   |   |   + footer/
  |   |   |   + advertisement/
  |   |   |   + ranking-actress/
  |   |   |   + search-entry/
  |   |   |   + entries/
  |   |   |       + view.js
  |   |   |       + style.css
  |   |   |
  |   |   + renderer.js
  |   |
  |   + styles/
  |   |   + reset.css
  |   |
  |   + index.html
  |
  + gulpfile.babel.js
  + .babelrc
  + package.json

source/renderer/components/app/view.js

ページ全体の骨組みを作る。

import React from "react";
import styles from "./style";

import HeaderComponent from "../header/view";
import MainComponent from "../main/view";
import FooterComponent from "../footer/view";

export default class Component extends React.Component {
  render() {
    return (
      <div className={styles.container}>
        <HeaderComponent />

        <MainComponent />

        <FooterComponent />
      </div>
    );
  }
}

source/renderer/components/header/view.js

ヘッダー部分のコンポーネント

import React from "react";
import styles from "./style";

export default class Component extends React.Component {
  render() {
    return (
      <header className={styles.container}>
        <h1 className={styles.title}>
          <a href="/">Nukindex</a>
        </h1>

        <p className={styles.description}>
          毎日のおかずを提供するサイトです
        </p>
      </header>
    );
  }
}

source/renderer/components/footer/view.js

フッター部分のコンポーネント

import React from "react";
import styles from "./style";

export default class Component extends React.Component {
  render() {
    return (
      <footer className={styles.container}>
        <p className={styles.row}>
          Copyright © 2017 Nukindex. All rights reserved.
        </p>

        <p className={styles.row}>
          Contact:
          <a href="mailto:ura.katz.1988@gmail.com">ura.katz.1988@gmail.com</a>
        </p>
      </footer>
    );
  }
}

source/renderer/components/main/view.js

メインコンテンツを入れるコンポーネント

import React from "react";
import styles from "./style";

import RankingActressComponent from "../ranking-actress/view";
import AdvertisementComponent from "../advertisement/view";
import SearchEntryComponent from "../search-entry/view";
import EntriesComponent from "../entries/view";

export default class Component extends React.Component {
  render() {
    return (
      <main className={styles.container}>
        <RankingActressComponent />

        <AdvertisementComponent>
          <a href="http://track.bannerbridge.net/click.php?APID=138222&affID=88332&siteID=172583" target="_blank">
            <img src="http://track.bannerbridge.net/adgserv.php?APID=138222&affID=88332&siteID=172583" />
          </a>
        </AdvertisementComponent>

        <SearchEntryComponent />

        <EntriesComponent />

        <AdvertisementComponent>
          <a href="http://track.bannerbridge.net/clickprod.php?adID=1661429&affID=88332&siteID=172583" target="_blank">
            <img src="http://track.bannerbridge.net/adgprod.php?adID=1661429&affID=88332&siteID=172583" />
          </a>
        </AdvertisementComponent>
      </main>
    );
  }
}

source/renderer/components/advertisement/view.js

広告部分のコンポーネント

import React from "react";
import styles from "./style";

export default class Component extends React.Component {
  render() {
    return (
      <div className={styles.container}>
        <h2 className={styles.title}>
          広告
        </h2>

        <div className={styles.ads}>
          {this.props.children}
        </div>
      </div>
    );
  }
}

source/renderer/components/ranking-actress/view.js

女優ランキング部分のコンポーネント

import React from "react";
import styles from "./style";

export default class Component extends React.Component {
  render() {
    const actressRankingData = getActressRankingData();

    const actressRankingItems = actressRankingData.map(actress => {
      return (
        <li className={styles.item}>
          <a href="#">{actress}</a>
        </li>
      );
    });

    return (
      <div className={styles.container}>
        <h2 className={styles.title}>
          私的女優ランキング
        </h2>

        <p className={styles.description}>
          個人的な女優ランキングです。
        </p>

        <ol className={styles.list}>
          {actressRankingItems}
        </ol>
      </div>
    );
  }
}

function getActressRankingData() {
  return [
    "跡美しゅり",
    "橋本ありな",
    "市川まさみ",
    "月本れいな"
  ];
}

source/renderer/components/search-entry/view.js

検索部分のコンポーネント

import React from "react";
import styles from "./style";

export default class Component extends React.Component {
  render() {
    return (
      <div className={styles.container}>
        <h2 className={styles.title}>
          動画検索
        </h2>

        <p className={styles.row}>
          <input className={styles.field}
              placeholder="動画を検索" />
        </p>
      </div>
    );
  }
}

source/renderer/components/entries/view.js

動画リスト部分のコンポーネント

import React from "react";
import styles from "./style";

export default class Component extends React.Component {
  render() {
    const entriesData = getEntriesData();

    const entryItems = entriesData.map(entryData => {
      const tagItems = entryData.tags.map(tag => {
        return (
          <li className={styles.item_tag}>
            {tag}
          </li>
        );
      });

      return (
        <li className={styles.item_entry}>
          <h2 className={styles.title_entry}>
            {entryData.title}
          </h2>

          <ul className={styles.list_tags}>
            {tagItems}
          </ul>
        </li>
      );
    });

    return (
      <div className={styles.container}>
        <ul className={styles.list_entries}>
          {entryItems}
        </ul>
      </div>
    );
  }
}

function getEntriesData() {
  return [
    {
      "videoId": 12345678,
      "imageId": 0,
      "title": "動画タイトル",
      "tags": ["タグ1", "タグ2"]
    }
  ];
}

いろいろ調べながら書いた。 React の基本的な描画機能は使えていると思う。

次はデータの外部化と Redux の導入を頑張りたい。

nukindex.com