react-sketchapp で新規プロジェクトを作ってsketchに描画する


## やったこと
react-sketchapp/examples 内にディレクトリを作って、sketch上に描画できるようにしました。

### 前提

#### 知識
- node, npm はなんとなくわかります
- sketchは使ったことありません
- react, redux は実務で触ったことあります

#### 環境
- sketch 43.2(trial)
- node.js 6.9.1
- npm 3.10.8
- react-sketchapp/examples/original で新規ディレクトリを作成

### 1. package.json作成, npm install
他のサンプルからコピーして,name,main,authorを書き換えます。mainはjsファイルではなくスケッチプラグインにします。

```json:package.json
{
  "name": "original",
  "private": true,
  "main": "original.sketchplugin",
  "manifest": "src/manifest.json",
  "scripts": {
    "build": "skpm build",
    "watch": "skpm build --watch",
    "render": "skpm build --watch --run",
    "render:once": "skpm build --run",
    "link-plugin": "skpm link"
  },
  "author": "DesignChips <info@designchips.net>",
  "license": "MIT",
  "dependencies": {
    "chroma-js": "^1.2.2",
    "react": "^15.4.2",
    "react-sketchapp": "^0.10.0",
    "react-test-renderer": "^15.4.2",
    "react-with-styles": "^1.4.0"
  },
  "devDependencies": {
    "skpm": "^0.8.0"
  }
}

```

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

```
$ npm i
```

### 2. manifest.json作成
これも他のサンプルから流用します。以下は、styleguideからコピーしてnameを変更し、menuの部分は消したものになります。

```json:src/manifest.json
{
  "compatibleVersion": 1,
  "bundleVersion": 1,
  "commands": [
    {
      "name": "react-sketchapp: Original",
      "identifier": "main",
      "script": "./main.js"
    }
  ]
}

```

### 3. main.js 作成
- Artboardはsketchのアートボード
- Textは文字を入れる div
- ViewはTextやLabelを囲むdiv
- Labelはstyleguideのサンプルからsrc/components にコピーしたものを使用(marginBottomを変更しました。)
- render は ReactDOM.render のレンダリング対象がsketchになったもの（だと思います）
- Articleは独自に作成したコンポーネントを利用


```js:src/main.js
import React from 'react';
import { render, Text, Artboard, View } from 'react-sketchapp';

import Label from './components/Label';

const App = props => (
  <Artboard>
    <Text style={{ fontFamily: 'Comic Sans MS', color: 'hotPink' }}>
      { props.message }
    </Text>
    <View name="Intro" style={{ width: 420, marginBottom: 30 }}>
      <Label>
        This is an example react-sketchapp document, showing how to
        render a styleguide from a data representation of your design system.
      </Label>
    </View>
  </Artboard>
);

export default (context) => {
  render(<App message="Hello world!" />, context.document.currentPage());
}
```

### 4. 試しに表示してみる
sketchであらかじめnew Documentを作成した状態にし、original/ で以下を実行。sketchを

```
npm run render
```

![スクリーンショット 2017-04-28 10.08.48.png](https://qiita-image-store.s3.amazonaws.com/0/130741/1ab01867-c4bf-963c-18dd-4074a1f58390.png "スクリーンショット 2017-04-28 10.08.48.png")


### 5. 独自に定義したコンポーネントを追加

``` js:src/main.js(変更後)
import React from 'react';
import { render, Text, Artboard, View } from 'react-sketchapp';

import Label from './components/Label';
import Article from './components/Article';

const App = props => (
  <Artboard>
    <Text style={{ fontFamily: 'Comic Sans MS', color: 'hotPink' }}>
      { props.message }
    </Text>
    <View name="Intro" style={{ width: 420, marginBottom: 30 }}>
      <Label>
        This is an example react-sketchapp document, showing how to
        render a styleguide from a data representation of your design system.
      </Label>
    </View>
    <Article/>
  </Artboard>
);

export default (context) => {
  render(<App message="Hello world!" />, context.document.currentPage());
}
```

```js:src/components/Article.js(新規作成)
import React from 'react';
import { View, Text } from 'react-sketchapp';

const Article = () => {
  const styles = {
    articleWrap: {
      width: 960,
      flexWrap: 'wrap',
      flexDirection: 'row',
      justifyContent: 'flex-start',
    },
    article: {
      width: 460,
      padding: 10,
      margin: 10,
      flexWrap: 'wrap',
      flexDirection: 'row',
      justifyContent: 'flex-start',
    },
    thumbnail: {
      width: 120,
      height: 90,
      marginRight: 15,
      backgroundColor: '#eee',
      flexShrink: 0,
    },
    title: {
      color: '#333',
      fontWeight: 'bold',
      fontSize: 24,
      lineHeight: '1.3em',
    },
    content: {
      color: '#333',
      fontWeight: 'normal',
      fontSize: 16,
      lineHeight: '1.5em',
    }
  };

  const strings = {
    image: '',
    title: '記事のタイトルが入ります。',
    content: '記事の本文が入ります。',
  };

  return (
    <View style={styles.articleWrap}>
      <View style={styles.article}>
        <View style={styles.thumbnail}/>
        <View>
          <Text style={styles.title}>{strings.title}</Text>
          <Text style={styles.content}>{strings.content}</Text>
        </View>
      </View>
      <View style={styles.article}>
        <View style={styles.thumbnail}/>
        <View>
          <Text style={styles.title}>{strings.title}</Text>
          <Text style={styles.content}>{strings.content}</Text>
        </View>
      </View>

    </View>
  );
};
export default Article;
```

### 6. sketchの描画を確認
![スクリーンショット 2017-04-28 10.14.50.png](https://qiita-image-store.s3.amazonaws.com/0/130741/3cff6822-232e-195b-2592-b9e67dbada77.png "スクリーンショット 2017-04-28 10.14.50.png")

## できたこと・できなかったこと

### できたこと
- examples 内に新規プロジェクトの作成
- 独自に作成してコンポーネントの描画
- examples の外側に移動しても動きました（~/Desktop で確認）

### できなかったこと
- styleguideのサンプルで使われている<code>{...css(styles.container)}</code>の使用
	- withStylesの利用方法がよくわかりませんでした。themeを作れば動くかもしれません。
- <code>const Article ...</code> の外でスタイルを定義
	- サンプルではwithStylesで行っていましたが動かし方がわかりませんでした。react-reduxのconnectと同じような考え方のもの？

## 使ってみた感想
自分はReactは動かすぐらいはできますが、デザインができないので、react-sketchappをうまく使いこなせそうにはないです。

やっぱり海外のデザイナーさんはReactもできて当然なのでしょうか。

View や Text がsketchへの描画だけでなく、通常のアプリ内でも使えるのであれば便利だと思いました。

以上です。