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つのコンポーネント

React native の Android release build で起動しても落ちる時の解決法

React nativeをandroid向けにRelease buildして署名済みapkを生成する方法は基本的に公式ドキュメントに書いてあるようにすればいいが、そのままやっても起動後すぐに落ちるようになってしまった。結果的には、jsファイルがうまくbundleされてなかったらしいので、自分でやる。

公式ドキュメント中のGenerating the release APKで ./gradlew assembleRelease を実行した直後のタイミングで、プロジェクト直下で react-native bundle –platform android –dev false –entry-file index.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res/ を実行する。この時、./gradlew assembleReleaseを実行する前にbundleしてはいけない。必ず後にやる。

その後 react-native run-android –variant=release で実機にデプロイしテストするが、このとき入れてるnodeモジュールによってはエラーが出る。エラーメッセージが Error: Duplicate resources なら、このメッセージの直前に出力されるファイルパスの該当ファイルをすべて削除すれば動くはず。

React-Native( Expo )を使って作るアプリ開発の導入方法

アプリのインストール

まず初めに、Expoを使うのでスマホにExpoの公式アプリをインストールする。
インストールしてアプリを起動すると、アカウントを作るように言われるのでアカウントを作成する。

アプリのひな型を作成

作成したら次に、コンソールでnpmを使ってcreate-react-native-appをインストールする。


$ > npm i -g create-react-native-app

次に任意のフォルダーに入って、react-nativeのひな型を作成


$ > cd 任意のフォルダー
$ > create-react-native-app 任意のプロジェクト名

typescriptを使う場合は、以下を実行


$ > cd 任意のフォルダー
$ > create-react-native-app 任意のプロジェクト名 --scripts-version=react-native-scripts-ts

アプリを実行

上記で、ひな型を作成したら作成されたフォルダーに入って npm start をする。
するとコンソール上QRコードが出てくるので、それをスマホのカメラを使ってスキャンする。


$ > cd 任意のプロジェクト名
$ > npm start
/*
* ここのQRコードをスマホのカメラを使ってスキャンする
*/

QRコードをスキャンするとさっきインストールしたExpoのアプリが起動するので、そこでcreate-react-native-appで作成されたアプリを実行することができる。

デバッグ方法

デバッグなどは、スマホを振ると管理画面が出てくるので一番下にあるDebug Remote JSをクリックするとPC側でブラウザが起動するのでそこでデバッグすることができる。

設定や便利なnpmモジュール

vsCode

React Native Tools

npmモジュール

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が設定されている

[Unity] AndroidでMeshFilterを生成するとFPSが下がる

Unityで、MeshをPointで生成しようとして以下の処理をスクリプトに記述。
Androidでビルドして実機確認したら、FPSが物凄く低下した。

MeshFilter meshFilter = GetComponent();
meshFilter.mesh.SetIndices(meshFilter.mesh.GetIndices(0), MeshTopology.Points, 0);

上記の処理が無い時のFPSは60FPS前後であるのに対して、
ある場合は、3FPSにまで低下した。

※原因がわかり次第記事にします。

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を有効にしてあげる

Unityのコード編集にVSCodeを使う

VSCodeがとても使いやすくて、「UnityでもVSCodeつかえないかなぁ・・・」っと思っていたらやっている人いたので自分もやってみることにした。

参考記事
今日からUnity + Visual Studio Codeを用いた快適な開発生活(随時更新中)

VSCodeでの設定

i. VSCodeの拡張機能から、以下のプラグインをインストールする。

ii. VSCodeのデバッグアイコンから歯車をクリックしたら、Unity Debuggerを選択。

操作説明

Debugger選択

デバッグするときにUnity Editorを選択するとデバッグできる。

Debug選択

iii. UnityからEdit -> Preference -> External Tools -> External Script Editor をVSCodeに変更。

iiii. 以上!

REALSENSE D415 を使ってUnityでモーションを取るまでのセットアップ

※今回はWindowsの説明だけしかしません。その他のOSは以下を参照↓
http://download.3divi.com/Nuitrack/doc/index.html
https://github.com/IntelRealSense/librealsense

モーションを取るのには、公式のSDKでは難しそうなので、NuitrackというSDKを使います。

公式のSDKも入れておいたほうがいいので、入れときましょう。
公式SDKのgithub
公式SDKのインストールファイル場所

公式SDKを入れたら、次にNuitrackを入れて行きます。

まず最初に、Nuitrackから、自分のOSにあったものをダウンロードしましょう。有料版と無料版があります。

無料版

有料版

ダウンロードしたら、次はインストールをしましょう。

ダウンロードしたファイルを解凍すると、OpenNI~~~ というインストールファイルがあるのでそれを実行してインストールします。

インストールが完了したら、次に解凍したファイルの中にnuitrackというフォルダーがあるのでそれをC:\直下にコピーします。( 人によっては D:\ )

コピー出来たら、今度はそれにPATH(環境変数)を通します。

PATHは二つ入れます。
一つは、” NUITRACK_HOME ” という名前で、値を C:\nuitrack にして環境変数にいれます。

もう一つは、環境変数のPathに C:\nuitrack\bin を追加してください。

以上でPathの登録は終了です。

次にUnityのSDKを入れます。
以下のDownload SDK and SamplesをクリックするとSDKをダウンロードできます。

ダウンロードしたら今度はそれを解凍したら、その中にある ” NuitrackSDK.unitypackage “をUnity(2017.3.1f1)にインポートしましょう。

以上でセットアップの完了です。

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のステータスが保留中に変更してあれば完了

Algoliaでネストされた値をフィルタリングする方法

Algoliaでindexからネストされた値をもとにフィルタリングするには、

AlgoliaのダッシュボードにあるdisplayタブにあるFaceting項目のAttributes for facetingに下のようにフィルタリングしたい値を設定して、

※ダッシュボードの変更は、セーブしないと適用されないのでちゃんとセーブしましょう。セーブボタンは、右上あたりに出てると思う。( 多分 )

index.search({
    facetFilters: ” ここにダッシュボードで設定したキーをいれる”
},
(err,content) => {
    if(err) throw err;
    console.log( content );
});
のように、facetFilters:” 設定したキー”で、フィルタリングした値が取れる。