create-react-app でreact-styleguidist をつかってReactコンポーネントのスタイルガイドを作成する

先日スタートアップカフェコザで行ったセッション(コンポーネント指向UI開発で学ぶReact入門 沖縄フロントエンド塾 in スタートアップカフェコザ)で紹介したReactコンポーネントのスタイルガイドの作成を記載します。
ボタンのコンポーネントを作成してスタイルガイドで表示するまでの手順です。

プロジェクトの作成

プロジェクトを作成

create-react-app ui-react

ui-reactフォルダに移動
styleguidistとnode-sassを入れます

yarn add react-styleguidist

package.json

scriptsに追記


"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "styleguide": "styleguidist server"//これを追加
  }

ボタンのコンポーネントの作成

src/components/atoms/btn/
でフォルダを作成して、


Btn.jsx
Btn.scss
Btn.md

のファイルを作成

ボタンのjsx作成


import React from 'react';
import './Btn.scss';
export const Btn =(props)=>{
  return(
    <div 
      className='btn'
      onClick={(e)=>{this.props.handleClick(e)}}
    >
      {props.children}
    </div>
  )
}

ボタンのscss作成


@mixin btn {
  border-radius:4px;
  padding:4px;
  font-sie:12px;
  text-align:center;
  &:hover {
    cursor:pointer;
    font-weight:bold;
  }
}

.btn {
  @include btn;
}

ボタンのmd作成

このファイルにスタイルガイドに表示するものを記述
いろいろ設定できます(Documenting components)


```jsx
<Btn handleClick={}>.btn</Btn>
```

スタイルガイド作成


yarn styleguide

コンパイルすると、


yarn run v1.7.0
$ styleguidist server
Loading webpack config from:
D:\work\FrontendJ\react-styleguidist\node_modules\react-scripts\config\webpack.config.dev.js

You can now view your style guide in the browser:

  Local:            http://localhost:6060/
  On your network:  http://172.24.138.209:6060/

 DONE  Compiled successfully!

 
 


http://localhost:6060/

このurlを開くと表示されます。
 
 

 
 

気をつけること

  • 1つの.jsxに1つのコンポーネント

HerokuでSendgridのアドオンを設定するのにハマったので備忘録

  • SendGridのアドオンを追加するにはクレジットカード登録が必要
  • 環境変数のSENDGRID_NAME、SENDGRID_PASSWORDを先に設定しない
  • 先にSENDGRID_API_KEYを設定する

SendGridアドオン設定手順

  1. まずSendGridでAPIキーを作成、コピーする
  2. Heroku管理画面で、Settings > Config Vars で 環境設定のSENDGRID_API_KEYにさきほどコピーしたAPIキーを登録する
  3. Heroku管理画面で、Resources > Add-onsにSendgridを入力して一覧に表示された選択する
  4. Provisionのポップアップができるので、Provisionを押す
  5. 完了する

この時点でSENDGRID_NAME、SENDGRID_PASSWORDが設定されている

herokuにGoogle domainsのドメインを設定する

Google Domains + HerokuでSSL通信を使ったオリジナルドメインサイトのための設定のための設定
https://qiita.com/hidehiro98/items/b1bf98e0921b0d47e2c2

こちらを参考に設定。

たぶん複数のappがある場合は、heroku cliで、


heroku domains:add www.yourdomain.com --app appname

と直接設定してあげる

追記:

Herokuに独自ドメインのSSL接続を無料で導入できるようになった話(有料Dynoのみ)
こちらの手順でSSLを有効にしてあげる

Firebase Hostingに Google Domains でサブドメインを設定する

ここからFirebase
1. Firebase の Hostingにもろもろデプロイする
2. Firebaseコンソールに入って、Hostingを選択
3. ドメイン > ドメインを接続
4. 設定しようと思っているサブドメインを入力(sub.mydomain.com)、「次へ」をクリック
5. Aレコードタイプが2つ表示される

ここからGoogle Domains
6.mydomain.comのDNSを選択
7.カスタム リソース レコードの@にsubを入力
8.カスタム リソース レコードのIPv4アドレスに、先ほどのFirebaseのAレコードタイプの1つ目のIPアドレスを入力
9.次に入力したIPアドレスの右にある「+」をクリックして入力枠を追加
10. 追加された入力枠に2つ目のIPアドレスを入力

ここからまたFirebase
11. ドメイン接続画面の「終了」をクリック
12. Hostingに戻ると、ドメイン欄のsub.mydomain.comのステータスが保留中に変更してあれば完了

[xcode] フレームワークの実機ビルドエラーとitunes connectのリジェクトを回避したときのメモ

carthageで入れたいくつかのライブラリで、実機ビルドでエラーがでたり、エラーを回避してもiTunes Connectでリジェクトされたりして、ハマったのでメモ。

SwiftyDropboox.framework
SocketIO.framework
Starscreem.framework

あたりをCarthageでいれてる。いろいろやったのでどれが効果があったのかはっきりよく覚えてないので、やったことをメモ。

Alamofire.frameworkで実機ビルドでエラー
=> Embedded FrameworkにAlamofire.framework追加して回避

Alamofire.frameworkがiTunes connectでリジェクト
=> Embedded Frameworkから外して、Run scriptでコピーで回避
=>Alamofire.frameworkのswiftmoduleからi_386,x86_64を削除

[Unity] CanvasScalerと座標

uGUIやRectTransformを使った画面のレイアウトをスクリプトから制御しようと思うと、座標の扱い方で混乱することがあるのでメモ。

mousePositionやtouchesの座標 > 画面の解像度座標
uGUI(RectTransform) > CanvasScaler内の座標

なので、座標の変換が必要

[VirtualBox][npm][webpack][Browsersync] windows10で突如Browser syncでExternalで接続できなくなった時の対処

  • ネットワーク設定をプライベートにしているか
  • プライベートネットワークのファイアウォールを切っているか

このあたりをまずチェック。それでもダメで半日いろいろとやっててわかったのは、

VirtualBoxのネットワーク設定で、環境設定>ネットワーク>ホストオンリーネットワークの中でアダプターがIPアドレス固定していると、browsersyncがそのIPアドレスでExternalを作る

なのでアダプターの設定を削除。

VirtualBox使うときにはまた追加しましょう。