お気持ちの表明

思考を雑に外出していきます

在宅勤務の装備について

コロナの影響で3月からリモート生活を送っている。 自宅の環境構築も一通り整った気がするので、ちょろっとまとめてみる。

机まわり

全体はこんな感じ

f:id:symmt9302:20200506215336j:plain

IKEAの天板に昇降脚をつけてる

昇降脚にしてから、スタンディングできるのはもちろんいいのだけど、座ったときの机の高さも好きに調整できて便利だった。 以前までは、机の高さに椅子を合わせると足台がないと床に足がつかない状態で、肩や腰を痛めがちだった。 昇降脚で高さを合わせてから、それらがなくなったし、足台がうざったかったので捨てれてハッピーって感じ。 昇降脚はグレードが3段階あるけれど、一番高いやつが可動域が広くて、高くも低くもできるので良い。

ケーブル整理

配線をまとめるのにIKEAのケーブルオーガナイザーを直付けしてある

f:id:symmt9302:20200506215504j:plain

椅子

IKEAの椅子を使ってる。 5年目ぐらいになるけど、ヘタりとか感じていないので優秀。

キャスターをフローリング傷つきにくいやつにしてある

モニター

Type-Cで給電できるやつ買った。同じ系列のやつを会社で使っていて、その品番の新しいやつが3月にちょうど出たので、そっちを買った。 会社のPCがType-CなMBPなんだけど、自宅用のやつは2015年ぐらいのMBPでType-Cじゃないので合わせて買い替えたい今日このごろ。

モニターは、アーム買っていい感じに設置してる。 売り切れているっぽいけど、4000円ぐらいで買える割にめちゃいい商品だった。 モニターを机の端に設置したかったので、ポールに固定するタイプを買った。 根本からアームが生えているタイプだと、可動域が135°とかでアームの根本にモニター設置できないので、同じ思想の人は注意 😇 (一度買い替えた) 経ったり座ったり体制を変えると、モニターの高さもそれに合わせて変えたくなるので、ガス式のアームを買っておくと便利。

映像と音響まわり

配線多いけど、これでも減らしたつもり

f:id:symmt9302:20200506215351j:plain

SwitchとPS4と自宅MBPがHDMIなのでHubに接続をまとめて、HubでHDMIから音声分離してミキサーに流して、スピーカーとヘッドホンから音出すようにしている

↑このHub音声分離もできるし神!!!と思ったんだけど、アナログ出力の音声がハイカットされてる感じで率直にゴミだったので、DAC買って、光で出して変換したのをミキサーに流している。

ミキサーはkirinパイセンからいただいた。感謝やで。

BEHRINGER ミキサー XENYX 502

BEHRINGER ミキサー XENYX 502

  • 発売日: 2018/09/01
  • メディア: エレクトロニクス

あと、細いHDMIケーブルを買ったら取り回しが楽で神だったので、太いHDMIケーブルにしんどみある人は買い替えおすすめです

スピーカーはFostexのやつ(廃盤)

スピーカースタンドはCLASSIC PROの安いやつ

ヘッドホンは澪ホンのリケーブルできるやつ

その他

個人的なリモート作業捗らせるやつ

ステッパー

スタンディングデスクを買ったタイミングで買った

健康ヲタクなのでパレオな男DaiGoさんを購読しているんだが、ブログやら動画でこのステッパー踏みながら労働すると最高!!!って話を聞いて、「引きこもりで運動不足なりそうだし、解消のためにもアリでは???」となって買った。今は一日11000歩程度(8km程度)を目標にコーディング中やMTG中、モンハンをしながら踏みまくっている。安いステッパーだと連続稼働時間が20分とかで一日踏み続けられないが、これは無限に稼働させておkなのでずっと踏みまくっている。

使うときは、スタンディングデスクの高さをmaxまで上げて、机の下にステッパー入れて、机に肘付きながらタイピングをするって感じになっている。肘ついていればタイピングに支障なく踏みまくっていられる。今も踏みながら書いてる。

f:id:symmt9302:20200506215500j:plain

購入して2ヶ月経ったが、これのおかげか体脂肪が2kgぐらい減った。めでたい。

光療法ライト

着替えて散歩に出るのも面倒で陽に当たることが無さすぎて、体内時計が破壊された時期があった。 夜中目覚めて寝れなかったり、昼間に眠すぎて労働できなかったり、だいぶひどかった。 同僚が光療法ライト買ったら改善したって話をしてたので、ポチってみた。

買って数週間経つが、体内時計は整った気がしていて、夜に眠く、朝には目覚める人間になれた。 光療法的には、10000ルクスの光を30分浴びればいいらしい。 この商品だと実際に10000ルクス出るのはおそらく数センチぐらいで、普段遣いの距離だと実質5000ルクスぐらいだと思うので、仕事初めのタイミングで1時間タイマーをセットして、光に照らされながら労働している。

f:id:symmt9302:20200506215522j:plain

ソーダマシン

炭酸水好きなんだけど、家にいると飲みすぎて秒でケースがなくなる問題が起きた。 対策としてソーダマシンを買うぞ!!!となり、ドリンクメイトをかった。

強炭酸まではいかないが、普通の炭酸飲料程度の炭酸具合は出せるので便利。 レモン汁いれると実質レモンハイボールで、仕事中にレモンハイボールが飲める(要出典)。 強炭酸水が好きな人は、ソーダストリームを買ったほうが多分幸せ。

この動画がいい感じにまとまってるので、見てみるといいかも。

ドリンクメイト買ったのは、水以外の液体にも炭酸が入れれるから。ぶどうジュースやら日本酒、梅酒に炭酸入れて飲むと雰囲気変わって楽しい!!!!!! あと、ボトルの口のところを外して洗えるので衛生的。気になったら先の動画見ると買うときの指針になると思う。

スマートリモコンと二酸化炭素濃度計

スマートホームしたい!!!!となっていろいろ整えた。 NETATMOとSwitbot Hubが装備されている。

エアコンの近くに置いといてる

f:id:symmt9302:20200506215404j:plain

Google Homeがあるので、voice-overで電気つけたり、エアコンつけたりできるし、寝る前は設定しとけば一言で家電の電源を切れる。 1Kに住んでるのもあって二酸化炭素濃度はあがりやすいけど、NETATMOで監視してるので適切な環境で働けるので、最高です。 1000ppm以下をキープするようにしている。

NETATMOはhazeくんからもらった。活用しているよ。ありがとうやで。

おわり

引きこもり環境がオフィスより整いすぎて、人間にふれあえない以外は快適な生活を送っています!!!! 人の部屋覗くの、個性が現れて面白いし、いっぱいみたい!!!!!!(2ch見てた頃は部屋スレをよく覗いてた) 自分の最高のお家情報をみなさんshareしてくれ!!!!!!

React Nativeでパフォーマンスチューニングするときに役立ちそうなライブラリ紹介

この記事はReact Native Advent Calendar 2019の 12 日目の記事です。
10 日目は、React Native の iOS/Android ビルドする bitrise.yml を晒してみる&ビルド高速化などでした。

パフォーマンスチューニングをしようとした際に、Weak Point を調べるライブラリを調べていたので、紹介したいと思います 🤘

ライブラリ紹介

why-did-you-render

コンポーネントが再 Rendering されたときに、何が起因で再 Rendering が起こったのかを console に出してくれる君。
Statefull な Component が多いときに入れておくと便利そう。

使い方は、Root となる箇所で以下のように書いとくだけ。
すべての Component で更新がかかったときにログを出してくれる。

import whyDidYouRender from "@welldone-software/why-did-you-render"
import React from "react"

if (__DEV__) {
  whyDidYouRender(React)
}

React Hooks を使っている場合は、useWhyDidYouUpdateなるものを見つけたので、こちらを使ってみると良いかも。

react-native-slowlog

処理に 16ms 以上かかりフレーム落ちが発生した際に Yellow Box や console.log を出して知らせてくれる君。

こちらは、各 component の constructor で呼び出してやる必要がある。
whyDidYouRender のようにシュッといかないのがちょっと不便。

import slowlog from "react-native-slowlog"
import React from "react"

class Master extends Component {
  constructor(props) {
    super(props)
    // __DEV__を見て、よしなにログを出さないようにしてくれる
    slowlog(this, /.*/)
  }
}

React Profiler API

React 16.9 から導入された、Component の Rendering 時間を細かく出してくれる君。
公式なので追加ライブラリなしに使えて、とても良い気がしている。

チェックしたい Component を React.Profiler で Wrap してやると、実際に掛かった Rendering 時間をcallbackで返してくれる。

const component = props => (
  <React.Profiler id="MyComponent" onRender={onRenderCallback}>
    <MyComponent />
  </React.Profiler>
)

function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime,
  interactions
) {
  console.log(
    `id: ${id}, phase: ${phase}, actualDuration: ${actualDuration}, baseDuration: ${baseDuration}, startTime: ${startTime}, commitTime: ${commitTime}, interaction: ${interaction}`
  )
}

React Native v0.61 から React 16.9 になっているので、追従している人は使える。
Expo も数日前のリリースで v0.61 に追いついたので、Expo の人も更新すれば使える。

おわり

重くなりやすい大きめな画面に入れておいて、動作確認をシュッとできるようにしとくと便利で良いですね。 無駄にRenderingしないように気をつけていきましょう😇

明日はtsukueさんです!

戸越銀座お散歩

たまには日記的なの書いてみたくなった。

地元で売られている音更の餃子が食べたくなりました。 ggってみると、戸越銀座にアンテナショップ的なものがあると知りました。 そんなわけで、餃子ゲットを目標に戸越銀座にいってきました。

お昼ごはん

お昼時についたので、お友達がオススメしてたシチューを食べた。

マッシュポテト多すぎワロタ(美味しい)

ラムのシチューとソーダパン、マッシュポテトを頼んだ。 ポテトが小鉢程度と思ってたので量が多すぎワロタ。 たぶん、250gぐらいあった。 味はめちゃおいしくてQoLが上がった。

温泉に入りそこねた

戸越住みの人から「戸越は銭湯があって最高」という話をよく聞いてたので、いってきた。

が、雨降って寒かったせいか、人がいっぱいでロッカーが空かず、入れなかった😇どんまい

餃子巡り

本命の餃子を買った。 実家にいたときにたまに食べてた。 餃子鍋したくて「ネットでポチるかーーー」とggったら実店舗あると知ったので行く機運になった。 にんにくとニラがぎっしり目でビールが最高な餃子。

ほかにも、ここの餃子が美味しいと聞いたが荷物の都合で断念(戸越に店舗があるのだけどサイトがみつからんかった)。 次行ったらときには買いたい。

塩屋さん

「戸越のオススメください」と雑に聞いたところ教えてもらった。 粗塩ぐらいしか買ってないし、よさげなの買ってみるか!!と行ってみた。

が、なんかお店混んでたので断念😇

お菓子屋さん

「戸越のオススメください」と雑に聞いたところ教えてもらった。

f:id:symmt9302:20190304230953j:plain

田舎パイがオススメと聞いたので買った。 ノースマンっぽかった。

f:id:symmt9302:20190304231040j:plain

桃のお酒も買った

瀬尾商店

ぶらぶらしてたら発見したので入店。

おしゃな雑貨とDIY用品がいっぱいでときめいた。 売られてたコートにときめいて散財した。

楽天もあるそうな。

カルディ

カルディみつけると吸い込まれないですか???????

デイリーポータルの調味料選手権みたいな記事読んだばかりだったので、麻辣ペッパーミルと同僚がシラチャーソース美味しいと言ってたの思い出して買った。

f:id:symmt9302:20190304231144j:plain

おわり

ひとりでぶらっとお出かけするの、いいですね。雑にやって行きたいですね。 餃子と温泉のために、また近々再チャレンジしたい。

DroidKaigi 2019にて登壇しました

先日開催されたDroidKaigi2019で「React NativeとExpoを用いたクロスプラットフォーム開発入門」というタイトルで発表してきました💪 雑に振り返り記事を書いておきます。

資料とか動画とか

DroidKaigi2019のタイムテーブル

React NativeとExpoを用いたクロスプラットフォーム開発入門 - DroidKaigi 2019

スライド

元のスライド(原稿付き)

リンクをシュッと開きたい人は、ここから元のが落とせます Google Drive

動画

セッションについて

2日目の朝イチ&React Nativeの話しということで、あまり人いないんだろうなーーーと思ったのですが、多くの方が足を運んでくださって嬉しかったです! 発表手前、同僚の@seto_hiさんが絡んでくれたり、@nkznさんが毎年やっていた挙手アンケートやったり、和めました😌 発表は、早口だったのか発表は5分ぐらい早めに終わってしまいましたが、 内容については事前にテキストを書き出していたこともあり、伝えようと思っていたことはしゃべりきれたかなと思っています。 自分的には70点ぐらいはあげたいお気持ちです🙂

登壇してみた感想

発表までの3ヶ月がしんどかった...。 発表内容の大枠決めるまでのコレでいいの感、資料作っている最中のコレで伝わるの感、わかっていたつもりではいたが書き起こすとわかっていないことを自覚する虚無感など、 なんで発表申し込んでしまったんだ!!!!!!😇と思うこと多かったです。きっと登壇者あるあるでしょう。 これもあるあるでしょうが、発表のためにきちんとエビデンスをとっていったので、発表前よりはReact NativeやらExpoについての知識や理解は圧倒的成長した気がします。 最終的に、登壇しといてよかった!と思いました。

また、社内での発表練習も3回ほどやりました。 資料の校正から言葉遣い、説明が伝わらない点の指摘やスライドのフォントなど、発表慣れ&情報のまとめ方が下手くそなおかげで、無限にアドバイスをいただきました🙏 普段の業務のドキュメント書きやら、今後の発表の機会に活かせるような気づきをたくさん得れたので活かしていきたいですね!

おわり

当日発表を聞きにくださった方々、ありがとうございました!

また発表まで期間は、同僚である@tackeさん、@seto_hiさん、@tebasakyuさん、社外では@nkznさん、@hmktsuさんにとてもお世話になりました!ありがとうございました!

React NativeとExpoの話題でDroidKaigiに登壇することになりました

登壇することになりました

あばばばば。

前職で生React Nativeで音楽再生アプリを作ってて、最近は副業でExpoを触っている感じでした。 その流れで「Expo最高じゃん???」というお気持ちになっていたので、シュッとしました。

しゃべる予定の内容

https://droidkaigi.jp/2019/proposals/ からシュッと抜粋

React NativeとExpoを用いたクロスプラットフォーム開発入門
発表者: mrtry
近年、クロスプラットフォーム開発環境のひとつとしてReact Nativeに注目が集まっています。
2018年だけでも、React Native自体の大幅なアップデートや、react-native-domの登場、AirbnbのReact Nativeリプレイスなど、話題に事欠きません。
キャッチーな話題が多いReact Nativeですが、実際の開発まわりになると「触ったこと無いし、実際よくわからない」という方が多いのではないでしょうか。
そんな方に向けて、本セッションでは、React NativeとそのtoolchainであるExpoを用いたアプリ開発の実際について紹介します。
React Nativeを触ったことがない方が、実際にアプリを作るための足がかりになれば、と思っております。

■目次(仮)
- React NativeとExpoのそれぞれの概要
- React NativeとExpoを用いたアプリ開発の利点/欠点とユースケース
  - 利点
    - 環境構築の容易さ、便利なライブラリ群、Build設定まわりの管理移譲、など
  - 欠点
    - apkサイズ、OSS選定のつらさ、ネイティブ実装による独自拡張ができない、など
  - React NativeとExpoを採用できるユースケース
- Hello, Worldから味わうExpoでの開発の雰囲気
  - プロジェクトの作成
  - 利用するエディタ
  - Reactの雰囲気
  - Hot Reloading
  - など
- 実際に開発する上で知っておきたいTips
  - TypeScriptの導入
  - よく使われるライブラリの紹介
  - ライブラリの探し方
  - CI上でのBuildやテスト、配信
  - パフォーマンスチューニングの基礎
  - Over The Air 
  - など

受講対象者

- React Nativeを用いたクロスプラットフォームなアプリ開発に興味がある方
- Androidエンジニアの文脈で、React Nativeの良し悪しを知りたい方
- アプリエンジニアのリソースが不足しているチームでアプリ開発に取り組みたい方

気持ち的には、去年のkonifarさんのセッションのExpo版という感じになるかと思います。 スライド事前公開できたらいいなあ。

おわりに

やっていき💪

EdgeRouter設定記(とりあえずPPPoE接続するまで)

以前、EdgeRouterを買ってた

家のルーターにしてたけど、引っ越したときになんかつながらくなり、発狂していた(これはあとで、PPPoEの設定が変わったからということに気づく)。

リセットして再設定してみたので、その時の雑な作業ログ

やったこと

ほぼ、こちらに書かれているブログと同じことをしただけ - EdgeRouter X - 1. 初期設定 | yabe.jp

はまったところ

MacがUSB LANを認識しない

家のNintendo Switch用にUSB LANを元々持っていた

これを使って、EdgeRouterと接続を試みたが、つながらない

見たところ、そもそもMacに認識されてないようだった

ネットワーク機器の一覧を見てもそれっぽいのないし、

f:id:symmt9302:20180820230343p:plain

システム情報のUSBの項目見てもなにもない

f:id:symmt9302:20180820230410p:plain

結局、ドライバーがアレば良いということで、自分で落としてきて入れた。 以下のサイトのDriverのところのApple Mac OS X 10.9 and above Drivers Installerを落として入れた - AX88179 - USB 3.0 to Gigabit Ethernet (GbE,GigE) | ASIX

入れて再起動とかしたら、こんな感じで認識された f:id:symmt9302:20180820230716p:plain

EdgeRouterをうまくリセットできなかった

その後、今度は管理画面が開けなくて泣いた。 リセットボタンをテキトーに押してみても、どうも上手くいかなかった。 その後、公式ドキュメントを見つけて、落ち着いてその通りやったらできた。

EdgeRouterとWifiをつなぐも、Wifiがつながらない

NECWifiを使っているのだが、設定されたEdgeRouterからWifiのほうのWANにつないでも、つながらん。 Wifiの設定画面を見てみると、動作モードをPPPoEルーターにしてた。 これをローカルルータに戻して、ちゃんと動作することを確認できた。

f:id:symmt9302:20180820231203p:plain

やりはじめに、ルーターのIPがわからず発狂しかけたが、NECのルータのデフォルトのIPは192.168.10.1 or 192.168.0.1ということを知ったので、事なきを得た。

参考

鴨居フックとワイヤーネットでケーブルトレーもどきを実装する

机周りを整理しているとき、配線をきれいにしたいなと思いました。

ケーブルトレーあればキレイになるよね、なんて思いましたが、微妙に高い。

これ100均の何かでそれっぽいのできないかとやったメモです。

鴨居フックとワイヤーネットでいい感じやる

100均にいくと、鴨居フックなるものが売ってます。

鴨居のところにひっかけて、フックが増設できるというやつです。

こいつにワイヤーネットをかけて、棚つければ、いい感じでは?と思ったのです。

てなわけで、やってみました。432円の割にはいい感じです。

f:id:symmt9302:20180812171644j:plain

余った配線は、チューブでまとめるなり、ネットの穴を通せばいい感じになります。

配線もまとまって、足元の掃除もしやすくなったので、満足です( ˘ω˘)