HTML Canvasで文字を中央に配置する

HTML depp

タイトル通りですがCanvasで文字を中央に配置する方法です。

textAlign に center 、textBaseLine に middle を指定して開始位置を中心に持ってくるようにするだけです

export type Rect = { width: number, height: number, x: number, y: number };

const rect: Rect = {
    x: 20,
    y: 50,
    width: 160,
    height: 70,
};

// 背景
context.fillStyle = "#ffffff";
context.fillRect(rect.x, rect.y, rect.width, rect.height);

context.fillStyle = "#000000";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("再現CG", rect.x + rect.width / 2, rect.y + rect.height / 2, rect.width);

結果はこんな感じになります

f:id:cgig:20210123155207p:plain

鶏ハム（ガーリック＆オニオン ソルト）

unk お料理

はじめに

これは「ブロッコリー」「ほうれん草」「鶏ムネ肉」しか食べてはいけない呪いを掛けた方のエンジニアの料理の記録である

ちなみに呪いを掛けた当方は、別に食事制限はしていない

鶏ハム（ガーリック＆オニオン ソルト）

手っ取り早く鶏ムネ肉をコスパよく食べようと思うと、総合的にはサラダチキンが優秀です

ただ、半年ぐらい毎日食べているとなんとなく飽きて、低温調理器で鶏ハムを作る日がそのうち来ます それは太古の時代から決まっています

まずは鶏ムネ肉を用意します 重さは適当

f:id:cgig:20210116232314j:plain
トリニク

皮は宗教的な理由で取ります お好みで

f:id:cgig:20210116232439j:plain
余分な皮

大きすぎると中心に火が通るか不安になるので適当に切って開きます

f:id:cgig:20210116232738j:plain
意味があるかは知らない

味付けはこれだけ

f:id:cgig:20210116232858j:plain
にんにく強め

程よくふりかけて、軽く擦り込みます 味付けは悩んだら控えめに、足りないなら完成後に足せばいい

f:id:cgig:20210116233118j:plain
隙間にもすりこむ

ジップロックにIN チャックはまだしない

f:id:cgig:20210116233304j:plain
家にあったよくわからないジップロック

100均で200円で買ったバケツに低温調理器をセットします 色々試した結果、シンプルな粉系でやる場合（タレとかじゃない）は、61℃で1時間10分という謎設定にたどり着きました 機材や環境によって設定値は変わると思うので、自己責任で研究しましょう

f:id:cgig:20210116233417j:plain
最初はバケツ調理に抵抗があった

お湯が温度に達したらジップロックを下から沈めてチャックを密閉したら設定時間まで放置します これをするのはジップロック内から余分な空気を抜いた状態で密閉したいからです

f:id:cgig:20210116233736j:plain
あとは放置

できた

f:id:cgig:20210116234054j:plain
できた

水揚げしてジップロックから取り出します

f:id:cgig:20210116234143j:plain
とても熱いのでやけどしない速さで取り出した

あとはお好みの大きさにカットして完成

f:id:cgig:20210116234327j:plain
完成

これは出来たてが一番美味しいです ブリンブリンのホットでジューシーな鶏ムネ肉を楽しめます

おわりに

この「ガーリック＆オニオン ソルト」はとても美味しいですが、ガーリックはそれなりに強いです リモートワークの昨今におすすめの調味料です

【シリーズ☆エンジニアの筋肉メシ】ブロッコリーと卵のふわふわマヨ炒め

tsururin シリーズ☆エンジニアの筋肉メシ

はじめに

これは「ブロッコリー」「ほうれん草」「鶏ムネ肉」しか食べてはいけない呪いを掛けられたエンジニアの料理の記録である

毎日飽きずに食べ続けられるか、それだけに全振りした超雑記

特に料理の知識も栄養の知識もないので参考にしてはいけない（栄養は他でしっかり補ってます）

今日の一品「ブロッコリーと卵のふわふわマヨ炒め」

卵が食べたかったので作りました

以下を参考にしています

シンプルだけど美味しい！ ブロッコリーと卵のふわふわマヨ炒めのレシピ動画・作り方 | DELISH KITCHEN

f:id:cgig:20210113005503j:plain
使うもの
鶏肉も追加しました

f:id:cgig:20210113005512j:plain
卵の準備
鶏ガラを3振り位と、マヨネーズを適当にブチ込んで混ぜ合わせます

カロリーが気になるのでマヨ控えめです

f:id:cgig:20210113005521j:plain
鶏肉に焼き目をつける

f:id:cgig:20210113005531j:plain
ブロッコリーを投入して塩コショウで味を付けます

f:id:cgig:20210113005539j:plain
卵を投入
具材を寄せて、卵をふわふわに仕上げます

f:id:cgig:20210113005548j:plain
完成！
卵の焼き方を失敗しました

ふわふわではなく、ぼそぼそです

本日の撮れ高

味　　　　：☆☆☆☆☆ (5)
酒に合う度：★☆☆☆☆ (4)

美味しかったです。小さいフライパンが欲しい！

OpenListの技術的な話

Next.js TypeScript depp

はじめに

OpenListというWebサービスを公開したので技術的な記事を書いておきます

openlist.cgig.jp

Spec

使用しているものを列挙すると下記になります

  • Next.js
  • React
  • TypeScript
  • Google App Engine
  • Firebase Authentication
  • Firestore
  • Material-UI

同期方法

Firestoreを使用して更新しています（便利

firebase.google.com

Google App Engine

スタンダード環境でホスティングしています

今のところ無料（アクセスないんで

閲覧履歴

Firebase Authenticationの匿名ユーザーで管理してます

なのでブラウザごとになります

いつかTwitterログインつけて各環境から同じ閲覧履歴を参照できるようにしたい

デザイン

Material-UIをベースにデザイナーさんにデザインしてもらいました

おわりに

技術的に難しいこととかしてないので特に書くことなかった

【シリーズ☆エンジニアの筋肉メシ】ブロッコリーとしめじのバター炒め

tsururin シリーズ☆エンジニアの筋肉メシ

はじめに

これは「ブロッコリー」「ほうれん草」「鶏ムネ肉」しか食べてはいけない呪いを掛けられたエンジニアの料理の記録である

毎日飽きずに食べ続けられるか、それだけに全振りした超雑記

特に料理の知識も栄養の知識もないので参考にしてはいけない（栄養は他でしっかり補ってます）

今日の一品「ブロッコリーとしめじのバター炒め」

昨日はえのき茸だったので今日はしめじを買いました

f:id:cgig:20210111233755j:plain
使うもの

f:id:cgig:20210111233819j:plain
バターを敷いてしめじを投入
塩こしょうで濃いめに味付けしてます

f:id:cgig:20210111233857j:plain
ブロッコリーを投入
下茹でしてあるので後半に投入します

f:id:cgig:20210111234033j:plain
醤油
最後に醤油を焦がして香りづけ

f:id:cgig:20210111232532j:plain
盛り付け！

本日の撮れ高

味　　　　：★☆☆☆☆ (4)
酒に合う度：★☆☆☆☆ (4)

カロリーが気になるけどバターうまし！