magcho's blog

昨日したらvirtualboxがアップデートできなかったので対応をメモ。 エラー文 VBoxUSBでエラーなので、類似事例を探すと以下のフォーラムが見つかった。 https://forum.macbidouille.com/index.php?showtopic=420332 接続してるBluetoothデバイスを外すといいと書いてある。ほんとかよと思いながらも接続していたトラックパッドとマウスのBluetoothを設定からペアリング解除し接続しているUSBデバイスを全て外したのち、再起動し するとすんなりアップデートできた。 Bluetoothのペアリングをやり直して今回は対応終了。 最後に ザーッと検索したところ類似のエラーが起こっている人が少なかっので、自分が追加でインストールしているExtention Packに要因があるのかもしれないと思った。検証はしてないので予想。

続きを読む

本を読んで誰かにおすすめしたくなったのに、いざ人に会うと本の名前を思い出せなくて困るのでここにメモしていきます。 Atomic Design: 堅牢で使いやすいUIを効率良く設計する https://www.amazon.co.jp/dp/477419705X 小さいところから段々と大きく考えていくAtomic Designの概念の説明に加えて、汎用性のあるコンポーネントの書き方などのサンプルコードがたくさん。 発行年が2018年だからかStorybookのサンプルコードがほとんどビルドできないので自力でちょっと直す必要があるかも。 今まではページの共通部分を切り出してコンポーネントにするぐらいにしか考えていなかったので、UI…

続きを読む

JWTを用いたAPIリクエストをするSPAをReactで作っていた中で、全てのAxiosのリクエストのヘッダーにJWTを付与してさらにレスポンスに型をつけたかった。 SPAからバックエンドサーバーに通信する際のリクエストヘッダーにを付与したく、さらにはJWTの有効期限が切れている場合は勝手にJWTを更新した上でリクエストをする仕組みが欲しかった。 axiosのレスポンスに型をつける Axiosの型定義を見るとといった形でレスポンスの型情報に型パラメータが使える。 しかし、Axiosは非同期的に使うと思うのでの返り値はですが、以下のような型定義なので同じとみなせます。 ということは、以下のようなコードがかけます。 のレスポンスが以下の型である時 リクエストするAxiosのコードは Bearerヘッダーを付与・JWTの有効期限も考慮する axiosのインスタンスを作り、そこにBearer…

続きを読む

バッテリー残量を確認したい ついこないだやっとBig Surにアップデートをしました。アップデートしてから気がついたんですがBig Surはメニューバーにバッテリー残量の数値を出せなくなっていました。 アイコンの満ち欠けでなんとなくの残量はわかりますし、マウスでクリックすれば数値を確認することはできるのですが常時表示されていないとなんとなく不安です。 そこで以前利用していたBattery Monitorを入れてバッテリー残量が20%を下回ったら通知バナーを出すように設定していました。しかし最近導入した大きめのディスプレイで作業していると右上の通知バナーに気がつかず、「いきなり画面が消えた!」と思って本体の画面を見たら赤い電池マークが点滅していることが何度もあり、どうにかしたかった。 Cloud Batteryで出来ること 探すとCloud Battery…

続きを読む

今日においてWEB APIといえばREST or GraphQLといったところですが、他にもいろいろな方式が考案され普及し衰退していったようです。そんな中でも衰退した方のSOAPのAPIを使うことになったけど日本語情報が少なくて困ったので覚書です。 SOAPはRPCの一種でネットワーク越しに何らかの関数を呼ぶような感覚で使えました。SOAPはRESTとは違い1つのエンドポイントに対して所定のXMLにて引数を組み立てPOSTなどで送ることで利用できます。 この所定のXMLですがプロトコル上人間が組み立てるのではなくライブラリが自動でXMLを生成してやり取りすることを想定しているようです。なのでライブラリにこの定義を読み込ませるためのスキーマーとしてWSDLというものがあります、中身はXML形式でリクエストやレスポンスの形式が定義されておりAPI…

続きを読む

2021年3月にGatsby.jsのv3がリリースされました、多少の破壊的な変更はあるもののv1からv2の時ほどの苦労はなくアップデートできた気がします。 いくつか進化がありますが、一番にビルド速度が一段と早くなった気がします。HotReloadが特に早くなりエディタからブラウザに画面を切り替えるとすでにリロードされており待ち時間が無くなっているように感じます、すごい。さらにはブラウザ上にエラーメッセージがモーダルでしっかり表示されるようになりました。これで開発も一段と楽になった気がします。また、いよいよincremental buildが正式に使えるようになりました。deployにかかる時間が大幅に短縮されるのではないでしょうか。 v2からv3への更新にあたっていくつかの破壊的な更新があるため多少修正しないとビルドが通りませんでした。内容は公式のマイグレーションガイドに従えばOK…

続きを読む

開発検証のために本番環境ドメイン(example.com)のサブドメインに PR 名を付与した(PR-1.example.com)を staging 環境として公開した手順メモ 今回は 1 台の VPS 内に Jenkins を用い PR 数分の docker-compose コンテナ群を作り、空いている任意のポートに公開したのち Nginx を用いて{PR 名}.example.com へのアクセスを 127.0.0.1:{公開中のポート}にリバースプロキシしていきます。 概要 vps 内で稼働している DB に以下のようにサブドメインと port 番号のペアを登録しておき、これらを Nginx から読み込んでへのアクセスをへ転送する。 構成 ubuntu18.04.5 Nginx(Openresty) lua-nginx-module mysql-nginx-module MySQL…

続きを読む

イベントについて 先週Bug Shooting Challenge #5 ONLINEに参加させてただきました。 問題の背景としては、すでにリリースされているwebゲームのCREチームとして配属され、ユーザーからのお問い合わせや社内の調査チームからの報告を元にバグを探していくというものです。 お題のゲームはRailsで作られており、コードとdocker-compose.ymlが入ったgitリポジトリーを渡されます。さらに、サーバーのログがBigQueryに蓄積されているので、参考にできます。 問題は全3問あり、ペアでチームを組みそれぞれで問題に取り掛かります。ログを解析をした経験もBigQuery…

続きを読む

こんにちは、あっという間に12月です。もういくつか寝るとお正月になります。アドベントカレンダーの時期なので毎日はつらいですができるだけたくさんの記事を書いていけたらなと思います。 そんなことで今月1つ目の記事は「今年買ってよかったもの」です。いつにも増しておうちで過ごす時間が長かった今年ですが少しでもお家を快適に過ごそうといろいろなものを買っていました。そんなものの一部を紹介 買ってよかったもの DJスタンド 自作キーボード Lily58 Jabra Talk25 TEPRA Pro クッションメーカー DJスタンド https://www.soundhouse.co.jp/products/detail/item/56833/ ずっと家にいるので必然的にPCを見続けている時間が増えました。今メインで使っているのは去年買ったMacBookProなのでPC…

続きを読む

Chatworkさんの2020年夏のインターンシップのフロントエンドコースに参加させていただきましたレポ。オンライン開催ということでどんな3週間になるのかと不安と期待でいっぱいでしたがとても楽しくたくさんのことを得られたと感じています。 この手のエントリーは守秘義務契約に違反してしまいそうで避けていたのですが、自分が実際にエントリーするときに過去の参加者のレポを参考しましたし、これも誰かの参考になればと思いレポします。 Chatworkさんのインターンシップ自体が2019年に初めて行われ、内容はバックエンド(Scala)のコースのみだったようです。2回目となる2020年には去年に引き続きバックエンドと合わせてフロントエンドコース(React.js…

続きを読む

google analyticsを導入しています