投稿

9月, 2019の投稿を表示しています

React Routerを理解するのに有用なMaterial UIサンプルアプリ

React Router(ページ遷移)のいいサンプルがないものかと探しているときの覚書。

環境: CentOS 7.6, Node.js v12.10.0

Material UIの公式サイトからFREEのものをダウンロード。
React Templates | Material-UI Themes

こちらのテンプレートを選んだ。
Material Dashboard React: Free Material-UI Dashboard @ Creative Tim
v1.8: React v16.9.0, Material UI v4.3.2, React Router v5.0.1

展開してインストール
$ unzip material-dashboard-react-master.zip
$ cd material-dashboard-react-master
$ npm install

package.jsonを確認。start実行
$ less package.json
$ npm run start

ブラウザで表示すると。。。動いた。


ちゃんとFunction Componentで書かれているので読みやすい。
Reactのダッシュボードサンプルアプリとして非常に助かる。

あとはコードを読む。
React初心者はチュートリアルをやった後でないと意味が分からないと思う。


かなり時間の節約になったので、投げ銭的な意味でプレミアム版を買った。6,800円。
プレミアム版にはForm Validationなど、さらにサンプルが豊富なので買って正解。
ドキュメントも割としっかりしている。


【関連記事】
【React】Function ComponentでstateやcomponentDidMountも可能Reactを使ったUIコンポーネント「Material-UI」

Facebookの友達申請用QRコード生成

イメージ
名刺にFacebook用のQRコードを表示しようと調査したときの覚書。

QRコードをスキャンするとFacebookアプリが起動して、簡単に友達申請できるようにしたい。
さらにFacebook用QRコードだと分かるような見た目にしたい。

1.Facebookアプリから自分のプロファイルへのリンクを取得 手順
Facebookアプリを起動して、右上の虫眼鏡をタップ「qr」と入力して検索「QRコード」が表示されるので選択(下図参照)「マイコード」を選択して自分のQRコードを表示シェアでPCに送付PCでQRコードを表示して、スマホのQRコードリーダーでスキャンURLを保存メモ
Facebookアプリでの検索結果


QRコードに埋め込まれているURL形式は
https://www.facebook.com/qr?id=100000123456789
という感じ。


2.QRコードを生成する 下記サイトが色とかロゴも追加できて使いやすい。
Design QR Code generator - Free - Unitag
Facebookのロゴは公式サイトから。
Facebookブランドリソースセンターアセットおよびブランドガイドライン 名刺は「印刷用パッケージ」に当てはまるのか迷ったけど大丈夫だと思う。


3.調査してる過程で分かったこと いろいろ彷徨った記録
FacebookのプロファイルページのURLをQRコードにしてもブラウザが起動するだけ「メッセンジャーコード」というメッセンジャー専用のコードがある。
→ QRコードではない(Messengerアプリでないと読み込めない)。
→ 2019年10月末で廃止予定(参考:Messengerコード - Messengerプラットフォーム - ドキュメンテーション - Facebook for Developers)「m.me」という仕組みでQRコードを生成する方法がある。
→ Messengerアプリが必要。Messenger Liteでは起動しない(参考: m.meリンク - Messengerプラットフォーム - ドキュメンテーション - Facebook for Developers)「fb://」のURI Schemeではアプリ起動しない(?よく調べてない)

LINEのQRコードも載せてたけど、仕事の名刺はFacebookだけで良さ…

ReactのMaterial UIのtheme構造

makeStylesの引数であるthemeの構造が知りたくて調査したときの覚書。

環境: React v16.9.0, Material UI v4.4.1

公式サイトでtheme構造が公開されている。
Default Theme - Material-UI
画面右上のヘッダーにあるテーマ切り替えボタンで、light/darkを切り替えるとそれに合わせて表示のtheme値も変わる。


例えばNavLinkで適用された文字装飾と文字色を戻すときは、
  linkText: {
    textDecoration: 'none',
    color: theme.palette.text.primary,
  } これを適用する。


【関連記事】
Reactを使ったUIコンポーネント「Material-UI」


Error: ENOSPC: System limit for number of file watchers reached

Reactの開発をしているときにOSのファイルを開く上限に達したときの覚書。

環境: CentOS 7.6

開発アプリをwatchしながら、別のサンプルアプリを起動したら下記エラー。
Error: ENOSPC: System limit for number of file watchers reached, watch '/home/httpd/httpdocs/material-dashboard-react-master/public'
    at FSWatcher.start (internal/fs/watchers.js:165:26)
    at Object.watch (fs.js:1274:11)
参考になったサイト
Increasing the amount of inotify watchers · guard/listen Wiki

現在の設定値を確認
# cat /proc/sys/fs/inotify/max_user_watches

設定変更
# echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

無事動いた。


本番環境でシステムが開くファイルの上限を拡張するときは、nginxの「worker_rlimit_nofile」設定も見直しが必要かも。


【関連記事】
CentOS7 + Nginx + PHP7 + MariaDB + Node.jsの環境を構築する手順まとめカゴヤ・クラウドVPS(CentOS)の初期設定

WordPressのnonceの有効期限

WordPressのフロントエンドの管理画面をReactで開発しているときの覚書。
Ajax通信するときはWordPressのnonceを使った方がいいじゃないかと思い、nonceの有効期限を調べてみた。

「wp_create_nonce」で作成したnonceの有効期限はデフォルトで最大24時間。

UNIX時刻のAM0時とPM0時を2つ超えた時点で無効になる。
なので実質12~24時間。

詳しくは公式サイトで。
WordPress Nonces | WordPress Codex フックを使えば有効期限を任意に変更できる。


CSRF(シーサーフ)対策のためにも、DBに書き込む処理はnonceをチェックした方がいい。
クロスサイトリクエストフォージェリ - Wikipedia

【関連記事】
WordPressのXML-RPCとREST API(WP-JSON)を無効にする(Nginxの設定)

Reactの日付処理を「moment.js」で。日本語設定も

React開発で日付処理のライブラリを探したときの覚書。

環境: React v16.9.0, Material UI v4.4.0

Moment.jsが安定
Moment.js | Home

ドキュメントが充実していて、日付の足し算、引き算、経過日数などやりたいことは全てできる。

日本語設定も標準で配布されているので、importして設定すれば曜日を日本語表示可能。
設定方法は下記サイトで。
webpackでmoment.jsを日本語設定したものをimportする - Qiita


【関連記事】
ビルドツール「Webpack」を試す。LESSをCSSにビルド[Titanium] メモリリークを起こさないために気をつけること

【React】Function ComponentでstateやcomponentDidMountも可能

サンプルのFunction ComponentをClass Componentに書き直しているときに、Function Componentで状態を管理できるし、componentDidMountも出来るようになって、しかも実行速度が速い。
という衝撃の事実が発覚したときの覚書。

環境: React v16.9.0, Material UI v4.4.0

この仕組みを提供するのがHooks。
React v16.8からの新機能。
詳しくは公式サイトで。
フックの導入 – React
Class Componentで悩んだ経験がないと「動機」に書いてあることが理解できないかもしれない。
「ビデオによる紹介」がとても分かりやすいので見とくのがおすすめ(英語)。


フックを使ってデータ取得を行うサンプルはこちら。
フックでデータの取得をどのように行うのですか?|フックに関するよくある質問 – React

これからはFunction Component + Hooksが主流になる。


【関連記事】
Reactを使ったUIコンポーネント「Material-UI」React.jsを学ぶ。買った本とVueとの比較。

Reactを使ったUIコンポーネント「Material-UI」

ReactのUIコンポーネントを探しているときの覚書。

仕事ではBootstap v3を使っている。
なので、React Bootstrapにしようかと思ったけど、Reactを使う場面はアプリのようなUIがいいのではと思い、「Material-UI」を試してみることにした。
Material-UI: A popular React UI framework

特徴(Bootstrapユーザーの目線から)
CSSがJSファイルに埋め込まれているCSS-in-JSに少し抵抗がある。参考: Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
→ 出来るだけ標準スタイルを利用する。独自部分は色だけ。それがマテリアルデザイン。React全般にいえることだけどPHPと連携しづらい(後日追記予定)


インストール 前の記事で作ったチュートリアル用アプリを元にして、公式サイトを参考にする。
$ cd react-demo
$ npm install --save @material-ui/core @material-ui/icons

前に作ったApp.jsxを編集してみる。
$ less src/App.jsx
import React, { Component} from "react"; import Button from '@material-ui/core/Button'; //import "./App.css"; class App extends Component{ render(){ return( Hello World ); } } export default App;
ビルド
$ npm run build

ちゃんとスタイルされたボタンが表示された。
スタイルを含め全部bundle.jsに出力されているみたい。
これだけでもbundle.jsは1.5Mになった。

CSSを書かなくていいのが不思議な感じ。

あとは公式のTemplatesにソースコードが公開されているので参考にする。
Free React Templates - Material-UI

Dashboardサンプルを試す Githubからgit …