2021買ったものまとめ

2021年買ったものをまとめつつ振り返る。やはりコロナ禍+引っ越しというのが影響が大きくてお家時間を快適するものを買っていた。

今年あんまり服買わなかった。仕事はいつもシャツだし、パーカー来てるしですり減らなかったな。という感じ。来年はスニーカーとか買って外出とかしたい

デロンギ(DeLonghi) 全自動コーヒーメーカー マグニフィカS

今年一番使った家電はこれ。場所が必要だったり音が少し大きかったりするけど、平日ほぼ毎日飲んでいたような気がする。豆は妻がSTORESなどで買ってきてくれたので無限に出てくる。

www.amazon.co.jp

まだ買って間もないけどコーヒーが冷めるのが微妙だったので、コーヒーカップウォーマーにも期待している

www.amazon.co.jp

デロンギ(DeLonghi)電気ケトル アイコナ カフェ グレー 温度設定機能 / 保温機能付き 1.0L

同じデロンギから。ティファール電気ケトルを使っていたがだいぶ使い込んでいたので買い替え。保温できるのがよい。あとなんと言っても60℃, 80℃,100℃と分けられるのがとてもよい。○○茶だと60℃でXX茶だと70℃みたいな使い分けをしてる

www.amazon.co.jp

タイガー魔法瓶(TIGER) 炊飯器 3.5合 一人暮らし用 土鍋圧力IH ご泡火炊き 本土鍋

東日本大震災で炊飯器が壊れて以来買ってなかったけど、家に引きこもってるので温かいごはんを食べたいなと言うことで購入。下手に安いものを買って悪い体験するよりもいい体験を得たかったのでこれにした。ミネラルウォーターで炊くと水道水とぜんぜん違うことに気づく。いろんな種類のお米を試しながら楽しんでいる。

www.amazon.co.jp

[幅160] パソコンデスク 引き出し付き 天然木使用 ヴィンテージ調 インダストリアル 書斎

去年100cmの机を買ったけど、引っ越しでだいぶスペースが取れたので思い切って160cmの机を購入。ホワイトボードなどを余裕持っておけるので思考するスペースが取れた。

www.low-ya.com

その他

高校時代にやっていたテニスを2x年ぶりに再開したのでテニスラケットを購入。ラファエル・ナダルのプレイスタイルが好きだしスピンをかけるスタイルだったのでこちらを購入。

www.babolat.com

以上、買ったものでした。来年も経済回していくぞ!!

Railsでwicked_pdf/wkhtmltopdf-binaryを使ってPDFファイルを出力する2021

RailsアプリでPDFファイルを出力することがあってそのときにハマったことをメモする

対象バージョン

wicked_pdf (2.1.0)
wkhtmltopdf-binary (0.12.6.5)

HTMLファイルでデバッグ的な何かをする

PDFでデザイン崩れを修正するのは一苦労なので、render時に show_as_html を渡す。 そうするとHTMLでデザインが見れるのでブラウザのdev toolsでCSSをいじって微調整ができる。

ただし!あくまでもブラウザで見えるだけであり、実際のPDFとはまた見え方が違うので過信しすぎてはいけない

respond_to do |format|
  format.pdf do
    render pdf: name, template: template, 
           show_as_html: params[:debug].present? && !Rails.env.production?
  end
end

Flexboxを使うときにはベンダープレフィックスが必要

github.com

タイトルの通りFlexboxを使うときはベンダープレフィックスが必要となる。これはwkhtmltopdfが古いブラウザエンジンを使っているため。

例えばこういう書き方が必要となってくる

.flex-row-container{
    display: flex;
    justify-content: space-between;
    align-items: center;

    display: -webkit-box;
    -webkit-box-pack: justify;
    -webkit-box-align: center;
}
.flex-column-container {
    display: flex;
    flex-direction: column;

    display: -webkit-box;
    -webkit-box-orient: vertical;
}

画像を埋め込む

Base64で埋め込むことになる。理由としては、画面から見えるときはいつもの癖で <img src="http://localhost:3000/some_image.jpg"> みたいにしてもできることはできるが、sidekiqなどの非同期処理で画像を埋め込むことを考慮すると(http://localhost:3000しても画像はみえないため)Base64で埋め込んだほうが良い。wicked_pdfがヘルパーを作っているので、assetからは以下のようにして読み出せる。

<%= image_tag wicked_pdf_asset_base64("some_image") %>

wicked_pdfではwebpacker用のヘルパーもあるが、上記の理由で使ってはいない。SGVファイルを埋め込むヘルパーがチームで用意されていたのでそれを使っている。

<%= embedded_svg(asset_pack_path("some_image.svg")) %>

def embedded_svg(filename, options = {})
  File.open("public/#{filename}", 'rb') do |file|
    doc = Nokogiri::HTML::DocumentFragment.parse file.read
    svg = doc.at_css 'svg'
    svg['class'] = options[:class] if options[:class].present?
    doc.to_html.html_safe
  end
end

マシンパワーで頑張ってもらう

ローカル環境で開発するときはやはり遅いのでマシンパワーで頑張ってもらう

未解決: AWS Amplify + Cognito + Google + Angularでログイン画面を作りたかった

やりたかったこと

AWS Cognito を用いてプロバイダをGoogleにしてログイン画面を作りたい。将来的にFacebookログインも作りたい。Amplifyを使うのはAWS CognitoのデフォルトUIはちょっと ダサい アレなので独自でクライアント側を持ちたかった

f:id:hs_hachi:20211024221957p:plain
ログイン画面

やったこと

AnuglarとAmplify のインストール

npx ng new boyaki
npm install --save aws-amplify @aws-amplify/ui-angular
  • Angular 12.2.0
  • aws-amplify 4.3.2
  • @aws-amplify/ui-angular 1.0.29

が入る

GoogleのOAuth クライアント ID の作成

GCPの「APIとサービス」→「認証情報」からOAuthクライアントIDでWebアプリケーション選択しクライアントIDとシークレットを作成する。あとで、「承認済みの JavaScript 生成元」と「リダイレクトURL」に http://localhost:4200 と Cognitoで作られたAmazon Cognito ドメインを指定する。

ユーザープールへのソーシャル ID プロバイダーの追加 - Amazon Cognito

amplify init

amplify initをするがCloud Formation, IAM Roleなどを作るので結構強い権限が必要になる。この時点でうーん... となってた。3分ぐらいするとAmplifyのアプリケーションができる

amplify add auth

f:id:hs_hachi:20211024222834p:plain
amplify add auth のコンソール画面

先程作ったGoogle側のクライアントIDとシークレットIDをコピペする

amplify push

これでCognitoなどが作られる

Googleログインボタンを作る

最初は AmplifyDoc などを読んでいたけど、RubyMineのオートコンプリート機能を使ってAPIを探していると amplify-google-button ボタンがあるということに気づく

app.component.htmlに

<amplify-google-button [clientId]="<Google側のクライアントID>"></amplify-google-button>

と書くと冒頭のボタンがでる

躓いたエラー

Sign With Google」ボタンを押すとConsoleログに POST https://cognito-identity.us-east-1.amazonaws.com/ 400NotAuthorizedException: Token is not from a supported provider of this identity pool が出る。

終わりに

amplify delete をしてお片付け

感想

よくよく考えればAngular側にGoogleのクライアントIDを渡している時点でCognitoで吸収できてなくね?という疑問に早く気付けばよかったです まる

10年以上ぶりに引っ越しをした

4月末に10年以上ぶりぐらいに引っ越した(賃貸→賃貸)のでそのまとめ

引っ越しした理由

今まで1Kだったが、単純に物が増えてきて手狭になったことと、リモートワークになって生活と仕事がより身近になって仕事場の横にベッドがある状態であんまり休まらなかったことの2つがある。物が増えてきたのはもう何年も前から少し物件を探していたけど、リモートワークになったことが決め手になった

どうやって探したの?

SUUMO https://suumo.jp/をつかった。ISUCON 10 でSUUMOを題材にした問題が出たことがあって記憶に残っていた。

やったこと

インターネット!インターネット!インターネット!!

今まで共有回線で下りが30Mbpsぐらい出ていたので最低でもそれぐらいは欲しいと考えて、SUUMOで「高速ネット」を検索条件にして入れてたけど、だいたい出てくるのは無料インターネット(ただし遅い)みたいな物件ばかりだった。なので、不動産屋さんには「個別回線引けますか?」とずっと聞き続けていた。

個別回線引いていいよーという聞けたときは「勝った」というお気持ちになってた。引っ越し当日に業者さんが「うーん、これ難しいかも…」と言ってたときは本当にどうしようか焦って開通したときには拍手してしまった

f:id:hs_hachi:20210808152513p:plain
10倍だぞ!10倍!

気持ちを切り替えられるスペースをつくる

これは今の心身の状態によるのだけど、昔みたいにずっと働くことは無理で休みをとることが必要な状態になっている。なので、寝室と仕事をする場所を分けてスイッチを切り替えれるようにした。また、リビングが広いのでテニスの素振りをすることもできる。

いつも行く場所から近いところにする

2週に1回カイロプラティックと毎週テニスに行ってるのでそこからあまり遠くないところを選んだ。基本出不精なのでちゃんと行き続けるためにはこういうところから。

わかったこと

洗濯乾燥機のサイズを見くびってはいけない

洗濯乾燥機の横幅とかは測ってたので大丈夫だったけど、扉を開いた時の奥行きを測ってなかった。まぁ大丈夫やろーと思ってたら案の定厳しくてギリギリ入るサイズになってしまった。不満と言ったらそれぐらいであとは特に不満らしい不満はない

新しく導入したもの

デロンギ

仕事場でコーヒーを飲むことが多かったのでついに導入。音は大きく、大分場所はとるもののコンビニでコーヒー買うよりもコスパはきっといい。デロンギを置く台はニトリで購入。

www.nitori-net.jp

Fire Stick

これはいただきものなのだけど非常によかった。Amazon Prime Videoの他にもWowowのオンライン配信がテレビで見えるのは非常に良い体験。これでテニスのWowowオンデマンド配信を見てる。

Committee + Open APIでYAMLファイルを分割する 2021年夏版の続き

続きがあった。

openapi: 3.0.3
info:
  title: Title
  description: Title
  version: 1.0.1
servers:
  - url: 'http://localhost'
paths:
  /api/token/{id}:
    $ref: './token.yaml#/paths/~1api~1token~1{id}'

このように/api/token/{id} という風に{} を入れると URI::InvalidURIError: bad URI(is not URI?): "./token.yaml#/paths/~1api~1token~1{id}" が発生する。 これは{%7b}%7dという形でエスケープする必要がある

Committee + Open APIでYAMLファイルを分割する 2021年夏版

やりたいこと

OpenAPIでAPIを定義したいが、ファイルを分割して管理したい

バージョン

  • Committee 4.0.0(committee-rail 0.5.1)
  • Open API 3.0.3

最初にやったこと&課題

Open APIの仕様に則ってAPIを(ここではopenapi.yamlとした)を定義した

openapi: 3.0.3
info:
  title: Title
  description: Title
  version: 1.0.1
servers:
  - url: 'http://localhost'
paths:
  /api/token:
    get:
      description: get access token
      responses:
        200:
          description: success
          content:
            application/json:
              schema:
                type: object
                required:
                  - token
                example: { token: 'access token' }
                properties:
                  token:
                    type: string

RailsのRequestSpecはこんな感じ

require 'rails_helper'

RSpec.describe 'Api::Token', type: :request do
  include Committee::Rails::Test::Methods

  it 'GET /token' do
    get api_token_path

    expect(response).to have_http_status 200
    assert_response_schema_confirm 200
  end
end

かんたんな文字列を返すAPIを定義した。ただこれだとみんなで触るときにコンフリクトとかが頻発するのでわけたい。

ファイルを分割する

$ref というのがOpenAPIに定義されているので、それが使えそう。$ref の使い方のドキュメントを読むとpaths直下には入れられないので、get以降を切り出す。

openapi.yaml

openapi: 3.0.3
info:
  title: Title
  description: Title
  version: 1.0.1
servers:
  - url: 'http://localhost'
paths:
  /api/token:
    $ref: 'token.yaml'

token.yaml

get:
  description: get access token
  responses:
    200:
      description: success
      content:
        application/json:
          schema:
            type: object
            required:
              - token
            example: { token: 'access token' }
            properties:
              token:
                type: string

これでテストを実行すると以下のようなエラーが出て怒られる。redoc からHTMLを生成するときちんと生成されるのが余計にわからん...

NoMethodError: undefined method `set_path_item_to_operation' for #

  0) Api::Token GET /token
     Failure/Error: assert_response_schema_confirm 200

     NoMethodError:
       undefined method `set_path_item_to_operation' for #

エラーを読んでみる

set_path_item_to_operation for # なので、path itemが足りない?となってドキュメント読んだりしてた。

結論

pathsとURLを分割先のファイルに記載して書けばよかった。ドキュメントや探してみてもCommitteeのIssuesを見ても特にチケット上がってなかったのでよくわからんが動いた

openapi.yaml

openapi: 3.0.3
info:
  title: Title
  description: Title
  version: 1.0.1
servers:
  - url: 'http://localhost'
paths:
  /api/token:
    # ~1は`/` のエスケープ
    $ref: './token.yaml#/paths/~1api~1token'

token.yaml

paths:
  /api/token:
    get:
      description: get access token
      responses:
        200:
          description: success
          content:
            application/json:
              schema:
                type: object
                required:
                  - token
                example: { token: 'access token' }
                properties:
                  token:
                    type: string

Intellij IDEAで効率よくdirenvを使う

環境変数.envrc ファイルに書いて読み込ませるdirenvがあるがこれをサポートするIntellij IDEA系のプラグインがほとんどないのでうまいやり方を考える。Direnv Integration はあるが.envrcファイルを新規作成したときしかうまく動いてないぽいのでちょっと様子見。

github.com

Railsプロジェクトでやったが、Javaでも使えると思う。

手順

  1. .envrc ファイルを作成する。この時点で テスト用 の設定ファイルを書いておく。例えば export foo=test と書く。
  2. ターミナルを開いて idea コマンドで起動する。この時点でIDE には環境変数 foo=test が読み込まれている。
  3. テストでは複数のRun Configurationを使いたいが都度書き換えるのがめんどくさいので、IDEからテストを起動するときはIDEに上述の設定をそのまま使う。
  4. IDEからrailsを起動するときはRun Configurationの Environment Valuesで foo=test を上書きして起動させる

新規に設定するときはIDEを起動し直さないといけない&Toolboxから起動できないのがネック。