SE奮闘記

React Router（ページ遷移）のいいサンプルがないものかと探しているときの覚書。 環境： CentOS 7.6, Node.js v12.10.0 Material UIの公式サイトからFREEのものをダウンロード。 React Templates | Material-UI Theme s こちらのテンプレートを選んだ。 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コードを表示しようと調査したときの覚書。 QRコードをスキャンするとFacebookアプリが起動して、簡単に友達申請できるようにしたい。 さらにFacebook用QRコードだと分かるような見た目にしたい。 １．Facebookアプリから自分のプロファイルへのリンクを取得 手順 Facebookアプリを起動して、右上の虫眼鏡をタップ 「qr」と入力して検索 「QRコード」が表示されるので選択（下図参照） 「マイコード」を選択して自分のQRコードを表示 シェアでPCに送付 PCでQRコードを表示して、スマホのQRコードリーダーでスキャン URLを保存メモ Facebookアプリでの検索結果 QRコードに埋め込まれているURL形式は https://www.facebook.com/qr?id=100000123456789 という感じ。 ２．QRコードを生成する 下記サイトが色とかロゴも追加できて使いやすい。 Design QR Code generator - Free - Unitag Facebookのロゴは公式サイトから。 Facebookブランドリソースセンターアセットおよびブランドガイドライン 名刺は「印刷用パッケージ」に当てはまるのか迷ったけど大丈夫だと思う。 ３．調査してる過程で分かったこと いろいろ彷徨った記録 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:/

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」

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のフロントエンドの管理画面を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開発で日付処理のライブラリを探したときの覚書。 環境： React v16.9.0, Material UI v4.4.0 Moment.jsが安定 Moment.js | Home ドキュメントが充実していて、日付の足し算、引き算、経過日数などやりたいことは全てできる。 日本語設定も標準で配布されているので、importして設定すれば曜日を日本語表示可能。 設定方法は下記サイトで。 webpackでmoment.jsを日本語設定したものをimportする - Qiita 【関連記事】 ビルドツール「Webpack」を試す。LESSをCSSにビルド [Titanium] メモリリークを起こさないために気をつけること

サンプルの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コンポーネントを探しているときの覚書。 仕事では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