はじめに

みなさん、こんにちは！!

フロントエンドエンジニアの向宇(こう　う)と申します。 開発経験はまだ浅いですが、毎日楽しんで開発をチャレンジしています。

今回はSPACE CLOUDのスタイルガイドの開発について、お話しさせていただきますね。

開発目的

私気づいた問題点は、フロントの書き方と全体スタイルの統一性はよくないと感じました。

例えば、入力ボックスを実装する時に、 Reactを利用してComponentを作る人もいるし、 CakePHPのテンプレートで直接実装する人もいます。

書き方を統一して、コピペだけですぐ実装できるスタイルガイドがあると統一感を持たせることができると考え、 SPACE CLOUD専用のスタイルガイドを作成始めました。

開発流れ

スタイルガイドのトップページについて

まずはHTMLとCSSを利用して、トップページをオシャレにしました〜

出来上がったものはこんな感じです！ ちょっとだけアニメーションも追加しました。

スタイルガイドの各ページについて

まずReactを利用して、各ページの枠を作ります。 ソース構造と主なフォルダー説明は下記でございます〜

Atomic: SPACE CLOUD専用のReactコンポーネントのベースです

Component: スタイルガイドの各ページ用のコンポーネントです

Component/Pages: 最後各コンポーネントをまとめて表示するためのコンポーネント


アップロードのForm部品の例

Formの画像アップロードを例として説明しますね〜

下記はForm ImgUploadのReactコンポーネントの一部です。利用しているのはReactのライブラリreact-dropzoneです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div
  onMouseEnter={() => this.onMouseEnter(this.state.uploadStatus)}
  onMouseLeave={() => this.onMouseLeave(this.state.uploadStatus)}
>
  <Dropzone
    type={"field"}
    accept={"image/jpeg,image/png,image/jpg"}
    onDrop={this.onDrop}
    multiple={false} // 個別アップロード
    style={{ border: 0 }}
  >
    <div>{this.getContent()}</div>
  </Dropzone>
  <div>{this.getModifyModal()}</div>
</div>

マウスホバーする時に画像変更と削除処理ができるように、onMouseEnterとonMouseLeaveを作りました。 プラス画像アップロードの進捗を表示するために下記の処理も追加しました。

1
2
3
4
// ファイルの読み込み進捗を取得
reader.onprogress = files => {
  this.setState({ loadPercentage: files.loaded / files.total * 100 });
};

プレビュー状態を表示する時に、ProgressBarコンポーネントに渡します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// プレビュー状態を表示
if (
  this.state &&
  this.state.file &&
  this.state.file.image.preview !== "" &&
  this.state.file.image.dataURL !== "" &&
  this.state.error === ""
) {
  return (
    <div
      className={imageWrapper + imageActive}
      style={{ backgroundImage: `url(${this.state.file.image.dataURL})` }}
    >
      <ProgressBar percentage={this.state.loadPercentage}>
        アップロード中・・・
      </ProgressBar>
    </div>
  );
}

最後はImgUploadDefaultの中でImgUploadコンポーネントを呼び出します。 実用性を考え、コピー機能のコンポーネントも作りました〜

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div className={"c-item__container"}>
<h2>Image Upload 【画像アップロード】</h2>
<div
  className={"c-click-box"}
  role="button"
  onClick={() => this.onChangeState(FormText.ImgUploadText)}
>
<div className={"c-item-line"}>
    <ImgUpload showUploadImage={true} />
  </div>
</div>
<div id="button-item-text" className={"c-button-item-text"}>
  <CopyButton text={this.state.text} />
  <pre>{this.state.text}</pre>
</div>
</div>

出来上がったものはこんな感じです。

その他のコンポーネント

他の要素とページも上記と同じ感じで実装しました。 最後、一部のイメージ図を載せておきますね〜

  • ボタン
  • フォーム
  • カラー

終わりに

SPACE CLOUDは多くのコンポーネントが必要で、統一感のある実装が困難な状況でしたが、 スタイルガイドによって今後は統一することができるようになったと思います。

スタイルガイドの実装を通じて、本当に色々勉強になりました〜 やっとReactコンポーネントの基本とライブラリの使い方とかの基礎知識が分かってきましたと気がします。

今後の開発によって、スタイルガイドを変更したり、追加したりする可能性もありますが、 その時にまた記事を更新しますね〜

最後まで読んでいただきまして、誠にありがとうございました！！