2019年 4月の投稿一覧

2019.04.20

microSDカードが本物かmacOSで検証する

GWのロングツーリングに向けて色々準備しています。アクションカムでずっと撮影しながら旅をしようと思っているのですがネックになるのはSDカード。結構なファイル容量になるのでポータブルSSDを持ち歩いて定期的にコピーすることも考えましたが、正直面倒なので大量のmicroSDカードを持っていくことにしました。

アクションカム用のmicroSDXCを準備中。追加で発注したのであと2枚増える予定w pic.twitter.com/tEDGmfiGf6
— 勝部麻季人 🐟 (@katsube) 2019年4月20日

microSDを大量購入するのは良いのですが、昨今よく耳にする偽物のSDカードが紛れている問題をどうクリアするか。特にAmazonで頻発しているようですが例えば容量の半分も記録できなかった、仮に本物だったとしても不良品だったなんてことももあります。旅先で初めて気がついた日には精神的に落ち着かないですし、家電量販店を探して買いに向かうリカバリーに時間を使うのももったいない。というかそもそも田舎だと売ってないｗ何よりも帰宅したあとに記録できていなかったことに気がついたときの喪失感と言ったらもうねｗ

そんなわけで今回はSDカードの全領域に書き込み/読み込みを行い、正常に動作するか確認したいと思います。

2019.04.19

macOSにJMeterをインストールする

サーバに大量のリクエストを投げたり、こちらが指定した順番でURLを叩くなど言わゆる「負荷試験」を行う際によく利用されるJMeterを今回はmacOSにインストールしてみます。
続きを読む

2019.04.11

はじめてのReact #30 「CSSフレームワークを導入する」Material-UI テーマをカスタマイズ編

「はじめてのReact」一覧に戻る

前回はアイコンやテキスト情報を表示しましたが、色を直接指定することができませんでした。primaryやerrorなど意味を示す物でしたよね。今回はデフォルトで定義されている色などを変更するテーマ機能を触ってみます。

2019.04.08

はじめてのReact #29 「CSSフレームワークを導入する」Material-UI アイコンと文字スタイル編

「はじめてのReact」一覧に戻る

Material-UIシリーズ第三回は文字のスタイルをあれこれいじってみたいと思います。
SVGアイコンを表示したり、テキストを様々な形で表示します。

2019.04.08

はじめてのReact #28 「CSSフレームワークを導入する」Material-UI グリッド編

「はじめてのReact」一覧に戻る

前回はMaterial-UIのインストールと基本的な利用方法について取り上げました。今回は画面のレイアウトを行う際に利用するグリッドシステムです。

この手のCSSフレームワークの醍醐味の一つはグリッドが用意されていることですね。最近はflexboxが使えるようになってずいぶん楽になりましたが、細かい制御をやってくれるので中々重宝するんですよね。
続きを読む

2019.04.08

はじめてのReact #27 「CSSフレームワークを導入する」Material-UI インストール編

「はじめてのReact」一覧に戻る

Reactでは通常のWebサイトと同様、自由自在にCSSを記述し反映することができるわけですが、ゼロから書き始めるのは個人的に正直ダルい。そんなときにタグにクラス名を適当に指定すればチャチャッといい感じに表示してくれるCSSフレームワークを導入したいと思います。

今回はよく名前を見かけるMaterial-UIを使ってみることにします。長いものには巻かれろ精神。

The world's most popular React UI framework - Material-UI

https://material-ui.com

React Components that Implement Google's Material Design.

material-ui.com

2019.04.04

はじめてのReact #26 「ルーティングに対応する」設定をJSONにまとめる編 react-router@v5

「はじめてのReact」一覧に戻る

これまでルーティング関連の記事では以下のような内容を取り上げてきました。

第23回基本的なReactRouterの使い方
第24回 URLの一部をパラメーターとして受け取る
第25回認証とリダイレクト

今までは以下のように直接<Route>を書いてルーティングの定義を行ってきましたが、今回はこれらの設定をJSONなどで定義し、いつでも外部のファイルに出せるようにします。

<!-- befor -->
<Switch>
  <Route exact path="/" component={Home} />
  <Route exact path="/auth" component={Auth} />
  <Route path="/area/:cd" component={Meisan} />
</Switch>

このままでも動くんですけどね。ロジックと設定は分離して置いた方がメンテしやすくなりますからね。

2019.04.04

はじめてのReact #25 「ルーティングに対応する」認証とリダイレクト編 react-router@v5

「はじめてのReact」一覧に戻る

前々回では基本的なReactRouterの使い方を、前回でURLの一部をパラメーターとして受け取ってみました。

今回はユーザーの状態に合わせてページの出し分けを行います。
具体的には

認証済みのユーザーにだけページを表示
未認証のユーザーにはログインページを表示

という仕様になります。
続きを読む

2019.04.04

はじめてのReact #24 「ルーティングに対応する」URLパラメーター編 react-router@v5

「はじめてのReact」一覧に戻る

前回はReact Routerの基本的な機能を利用し簡単な図鑑アプリを作成しました。

今回はリクエストを受けたURLの一部をパラメーターとして受け取ってみます。
例えばブログやTwitterのようなアプリで特定のIDの記事を表示したい場合/posts/view/123といった形式のURLにアクセスするとします。ここで問題になるのは1000個の記事があった場合、1000個の<Route>を定義する必要が出てくるのかという点ですね。こういった場合に特定のパターンのURLは一部の文字列をパラメーターとして設定することができます。