備忘録。
材料
梅
無印良品 福井県産 紅映梅（梅のみ）1kg
酒
合同酒精 ホワイトリカー ゴードー [ 焼酎 35度 1800ml ]
![合同酒精 ホワイトリカー ゴードー [ 焼酎 35度 1800ml ]](https://m.media-amazon.com/images/I/41uTHhQC-hL._SL500_.jpg "合同酒精 ホワイトリカー ゴードー [ 焼酎 35度 1800ml ]")
氷砂糖
写真撮り忘れ。1kg
今後
半年くらい寝かせる。
たまに瓶を動かしてやると良いらしい。
写真
Bose Noise Cancelling Headphones 700
Bose Noise Cancelling Headphones 700（以下NCH700）を購入した。
2年前に購入したQC 35 IIからの乗り換え。2019年の春に購入してから2年間ほぼ毎日使っていたせいか耳あてもボロボロ、右耳からキーンという音が聞こえたり、（これはMac miniのせいな気もするが）Bluetoothの音声も途切れてしまうという状況で、どうしようか迷っていたところにAmazonで安くなっていたのでポチッてしまった。
オープンオフィスとか呼ばれる、壁を取り払った開放的な執務スペースでの作業に集中できず発狂しそうになったので購入したノイズキャンセリングヘッドフォン。リモートワークが中心となった今では、エアコンや換気扇のゴーッという音をシャットダウンするのに役立ってくれている。
QC 35 IIが2017年11月発売、今回購入したNCH700が2019年9月発売なので、後継品が今年の秋頃に発売される気もするが、まあ今使ってるものが壊れつつあるし、ほしいときが買い時って言うし……。
音質などに拘りはないが、装着感・ノイズキャンセリング性能ともに満足。QC 35 IIもNCH700も同時に2台接続が出来て、iPhoneとMac miniに接続しているのだが、前作はMac miniでビデオ会議中にiPhoneの音がなると音声が全部奪われてつらいということがあったが、今作はそのへんうまくソフトウェアで空気を読んでくれているっぽいので良さそう。
NCH700の対抗馬としてよく出てくるSONYのWH-1000XM4とも迷ったが、いくつかWeb上のレビューを読んだところNCH700の方がマイクの性能が良いという評判だったので、まぁビデオチャット多いしなということでNCH700にした感じ。
横須賀
後輩をタイムズカーシェアに紹介したらもらえた60分無料券が今月末で切れてしまうので、ドライブに行ってきた。行き先は横須賀。日帰りで行ってそれなりに楽しめそうなこと、backspace.fmのドリキンさんの出身地であることなどが理由。
僕の住んでいる横浜市青葉区からは車で1時間半ほど。
ランチにはどぶ板通り商店街（すごい名前だ）にあるTSUNAMIというレストランに行った。
横須賀名物のネイビーバーガーや、海軍カレーなどを楽しめる。2年前にKing & Princeのメンバーが取材してた*1ほか、有名人がいっぱい来ているお店らしい。
僕が頼んだのは「ジョージワシントンバーガー」というやつ。めちゃくちゃデカい。
他にもトランプバーガーやらロナルドレーガンバーガーやらがあった。大統領の名を冠したハンバーガーでは、ジョージワシントンバーガーが一番小さかった気がするが、それでこのボリューム。
かなり人気の店らしく、入店は30分待ちだったが予約システムが秀逸で外に並ばされることがなかった。MyTurnというやつを使っているようで、予約処理をしたらあとはその辺をぶらぶらしていれば良く、時間になったら電話やSMSで教えてくれる。
昼食後、少しどぶ板通り商店街を散策する。スカジャンの聖地というだけあってスカジャン屋がめちゃくちゃあった。その他おみやげ屋やバー、ミリタリーショップもあって楽しかった。
自分へのお土産用に、9mm弾を買っておいた。使用済みの本物で、下を見ると撃鉄によって叩かれ雷管が凹んでいるのがわかる。
午後はコースカベイサイドストアーズという大きなショッピングモールに行った。わざわざ横須賀まで来てショッピングモール……？と思ったけど、それはそれで楽しかった。
夕方には横須賀美術館へ。海と山に挟まれたロケーションにある美術館だった。
僕も同居人も美術には疎いけど、わかってないなりにああでもないこうでもない言いながら絵を見ていくのは楽しかった。（基本的に作品の撮影は禁止だったので、写真は無し。）
そして一番の目的は、King & Princeの「君を待っている」という曲の聖地巡礼だったらしい。MVの撮影で使われているらしく、なにやら楽しそうに写真を撮っていた。撮影禁止エリアと許可エリアが明示的に分かれているので、そのあたりは注意が必要。
最後に美術館前の海でぼーっと過ごして、暗くなる前に帰ることにした。
良いドライブだった。今度はまた別の神奈川県の有名スポットに行ってみたい。
土曜日
土曜日、おそらく小学校の遠足以来やってなかったピクニックというのをやってみた。
朝、サンドイッチを作る。適当にベーコンと卵を焼いてレタスと一緒にパンに挟むというのをやったことはあるけれど、真面目にサンドイッチを作ったことはなかったかもしれない。
てぬキッチンというYouTubeチャンネルのレシピを参考にたまごサンドを作った。卵をボウルに割り入れて電子レンジでチンして諸々を混ぜるだけ。
同居人の方はベーコンレタスサンドを作っていた。僕のよりも高度なことをやっていた。
なお両方写真を撮り忘れていた。
僕らの住む横浜市青葉区にはちょっとした公園がたくさんあり、今回はそのうちのひとつ「桜台公園」に行った。
でかい池のある公園で、青葉区には他にも2つほど池のある公園があるらしい。池が汚いのは雨の多い時期だからなのかもともとなのかよくわからない。
公園内では子供が釣りをしていたり、他の家族連れがピクニックしていたりなどしていた。特別人が多いという感じはしなかった。井の頭公園などのように県外から観光客が来るほど有名な公園ではたぶんないだろうし。
大きめのベンチがあったのでそこに陣取らせてもらって作ったサンドイッチを食べていた。目の前に池に続く小川があり、水の音を聞きながらの食事だった。自然の中で食事するという体験は心が洗われる感じがしてなかなか良い。本当に食べ物の写真を撮り忘れたので、周辺の写真を貼っておく。
わりと大きめの公園で、森と池、小川の自然コーナーっぽいのもありつつ、丘の上に行くと広場でバスケしたり滑り台で遊んだりみたいなのができる。
ピクニックに行くというのはわりと突発的に決まった用事だったので、特にそれ用の道具を持っていたとかではなかったが、今回なかなか体験が良かったので、サンドイッチを入れるのにちょうど良さそうなランチボックスくらいは買っておいても良いかもな、と思ったのであった。
Cursor-basedなページネーションをやめてpage-basedなページネーションに
先日作り直したPodcastのWebサイト。
GraphQL APIのepisodes一覧のfield（言い回しが正しいのか自信なし）を、Cursor-basedなページネーションで実装してしまったせいでPrev / Nextなページネーションしか出来ず使いにくくなっていた。
これを、Page-based（前のブログではOffset-basedと言っていたが、同じ意味）に作り変えた。
こんな感じ。
これで少しは使いやすくなったはず。……なのだけど、本番のデータでやってみると、横幅がオーバーしてしまっていたり、スマホだともう崩壊していたり。
開発環境だけでなく、本番同様のデータでテストする重要性を噛み締めた出来事であった。
ちなみにgraphql-rubyでいい感じにpage-basedなページネーションをやるのに、graphql-paginationというgemがあったのでそれを使った。メンテされているかどうか判断するのに微妙なラインだったけど、最悪自分で実装できそうだったので一旦採用してみることにした。
PodcastのWebサイトをNext.js + GraphQL APIで作り直す
はじめに
Next.jsやGraphQLを学ぶ機運の高まりがあったので、GWの期間を使ってゆるふわPodcastのWebサイトを作り直してみた。Rails on HerokuなMPA（SPAの対義語としてMulti Pages Applicationと言うらしい）から、Next.jsによるSPA + GraphQL APIという感じ。
ユーザに見える部分（ yuru28.com ）をNext.js on Vercelで構築し、従来のRailsアプリにはapi.yuru28.comとしてGraphQL APIと管理画面をやってもらうことにした。
フロントエンド（Next.js, Apollo Client, Chakra UI）
`npx create-next-app yuru28-com` してガシガシ作っていくだけ。デフォルトだとただのJSなので、TypeScript対応*1もしておいた。ページごとにSG（静的HTML生成）、SSR（サーバサイドレンダリング）、そしてCSR（クライアントサイドレンダリング、普通のSPA的な）を選択したり組み合わせたりすることができる。今回の要件だとTOPページ以外はSGで構築することが出来た。
後述するGraphQL APIを叩くために、Apollo ClientというGraphQLのライブラリを使用している。Next.jsとApollo Clientを組み合わせる方法は、Apollo公式のブログにわりと丁寧に書いてあった。SG、SSR、CSRそれぞれの場合のApollo Clientの使い方が書いてあるので読んでおくと良さそう。
Getting Started With Apollo Client in Next.js - Apollo Blog
UIフレームワークとしては、プロフィールサイトを作り直したとき*2に素振りしたChakra UIを採用した。Bootstrapを使っても良かったが、今だとChakra UIの方が流行りらしいということでこっちにした。ネイティブでTypeScript対応していたりするおかげで、コーディング時の体験はなかなか良かった印象。Bootstrapのようにクラスを当てていくのではなく、ReactらしくComponentをimportして使っていくので、そのへんがちょっとめんどくさかった。基本的には、公式のドキュメントをざっと見てどういうComponentがあるのかを頭に入れておいて、作りながら良さそうなComponentを使っていくというスタイルで開発を進めた。
GraphQL API
GraphQL APIは、既存のRails製Webサイトに生やした。RailsでGraphQLといえば、graphql-rubyを使うのが定番らしい。公式のドキュメントを流し読みした後、良さげな入門Qiita記事*3があったのでそれにそって基本のAPIを構築してみた。
ひたすらTypeを定義して、fieldを追加し、必要に応じてresolverを書くという作業ゲー。管理画面もNext.jsで作るとなるとMutationとか必要になるけど、一旦はユーザに見えるページだけをNext.js化して管理画面はそのままなので、今回はQuery書くだけだった。ある程度API側が出来た段階で api.yuru28.com にデプロイし、既存の管理画面以外のページを削除した。
何故かGraphQLのAPIのpaginationはCursor-basedでやるものだという先入観があったので、そういう感じでエピソード一覧のAPIを実装してしまったのだけど、普通にOffset-basedでやればよかったなという後悔がある。Cursor-basedでpaginationをやってしまうと、以下のGIF画像のように、常に prev or next のページ遷移しか出来ずに不便。週イチでしか増えないエピソードというデータに対して、cursor-basedなpaginationは明らかに向かない。あとでOffset-basedな感じに作り直そうと思う。
デプロイ
フロントエンドのコードは、Vercelにデプロイしている。特に特別なことはしていないが、GitHub経由でログイン後にリポジトリを指定し独自ドメインまわりの設定をするだけで動いてくれて便利。
サーバサイドのコードは引き続きHerokuで動かしている。
おわりに
GW後半の3日間でサクッと実装することが出来た。ひとまずPodcastのユーザ側に見える部分だけNext.js化したので認証は無いのだが、管理画面もNext.js化してそのあたりの知見を溜めておきたい。Auth0でも使いたいなぁ。
Next.js、Apollo Client、Chakra UI、GraphQLと、新しい技術が盛り沢山だったが楽しくものを作ることが出来た。今後もサイトの改善をしつつ、働き始めてからあんまり出来ていなかった雑なWebアプリ量産なんかもこの技術スタックでやっていきたいなと思っている。
コアラマットレスとコアラピロー
二人暮らしをはじめて約1ヶ月。同居人が来る前に、ソファとテーブル、そしてテレビを揃えたのだけど、寝床についてはシングルベッドに無理やり二人で寝るという感じだった。どう考えてもリビングまわりよりもベッドの方が優先順位高いだろと思うのだけど、きっと頭の中から抜け落ちてしまっていたのだろう。
案の定睡眠の質は下がり、日々つらい思いをしていたのだが、一念発起してダブルのベッドとマットレスを購入することにした。
そんな中、YouTube依存症の同居人がはじめしゃちょーの動画で見たコアラマットレスがほしいと言い出した。名前だけは知っていたがまさか自分が買うとは思ってなかったので、価格を調べてみるとなんとダブルで92000円。みんな大好きニトリで適当なポケットコイルマットレスでも買おうかと思っていたので僕にとってこの価格は高すぎた。ベッドとマットレス、布団やシーツなど諸々含めて10万円という予算で脳内稟議を通したのに、マットレスだけで約10万円というのはキツい。というわけで最初は反対したのだけど、まぁ強い要望やらなんやらがあって最終的には購入した。
で、1週間寝てみたのだけど、これがまたなかなか良い。あまりその辺りに対する意識というか、モノを見る目があまりないので詳細なレビューは出来ないのだけど、なんとなく体が浮いているような心地よさを感じることが出来ている。寝起きのだるい感じも特にない。ただ、ニトリのシングルマットレスからコアラマットレスのダブルに移行したので、今回手に入れた良好な睡眠体験が、シングル→ダブルによってもたらされたものなのか、ニトリ→コアラによってもたらされたものなのか、あるいはその両方なのか確実なことが言えない。その辺りの価値検証をちゃんとやるなら、A/Bテストをするべきだが、そうするためにはニトリのダブルマットレスとコアラのシングルマットレスとコアラのダブルマットレス、そしてそれらに対応した寝具各種をそれぞれ購入する必要があり、合計費用が20万円以上かかってしまう上、良質な睡眠というKGIに対して何をKPIとすべきかがよくわかっていないので、その辺りの検証は割愛させてもらうことにした。
さて良いマットレスを手に入れてしまうと、良い枕もほしくなってきた。そもそも自分は枕を使わないタイプの人間で、タオルケットを適当にまるめて枕代わりにしていたのだが、いい感じに体が沈み込むようになった今、タオルケットで寝ることに違和感を覚えるようになってしまった。なんとコアラのシリーズに枕もあるらしいということで、一瞬迷った末にコアラピローも購入した。
枕に12000円も払うのは正直言って異常だと思ったが、そもそもマットレスに10万払ったあとなので金銭感覚が麻痺しており、迷いなく購入まで進むことが出来た。結果これもかなり良い感じで、頭を含めた全身が浮いているような気持ちで睡眠をすることが出来ている。また、中には低反発のジェルが入っているらしく、ひんやり系の質感が好きな僕にはぴったりだった。
そんなわけで、最初は購入に反対していたコアラマットレスだが、見事虜になり最終的には枕まで購入してしまった。これはよくあるパターンで、最初はペットを買うのに反対していた父親が実は一番散歩や餌やりを熱心にやっているみたいな話である。
この記事を読んで自分もそのマットレスを試してみようと思った人は、下記リンクから購入ページに遷移すると1万円引きでマットレスを購入することができる。僕も3000円引きでコアラ製品を買えるようになる。いわゆるWin-Winなので、買おうと思っている人は頭の片隅に入れておくべし。
