ReactのWebComponentsでslotされたものを使い回す

この記事は Uzabase Advent Calendar 2023の18日目 の記事です。

はじめに

UzabaseのProduct Divisionではプロダクトのフロントエンドコンポーネントを他のプロダクトでも再利用できるようWebComponentsを利用しています。WebComponentsにはスロットという機能があり、slotタグによって外部から要素を渡すことができます。

たとえば、ローディングスピナーを表示するspinner-slotという自作要素をlitで作ってみます。2つ上下にローディングスピナーは出ますが、下の方はslotによって外部から差し込まれたスピナーに置き換わっています。

次のように表示されます。

業務の中で、このスロット機能を利用して複数の場所で差し込まれた要素を使おうとしました。今回は名前付きslotを利用して、spinner-slotの中で2つの名前付きslot(another-icon)を表示するようにしてみます。

次のように表示されます。

あれれ、これはうまくいきません。どうやら子要素は1つのslotにしかアサインされないようです。ということは、another-icon-1のように数字をつけたりしてslot nameを変えて欲しいだけの要素を差し込むしかないみたいです。同じものを出したいだけなのにスッキリしないですよね。なので、どうにかして1つの要素を差し込むだけでOKにしてみます。

これが完成形だ！？

業務ではReactを使ってWebComponentを作っていたので、今回はReactで表現してみます。

サンプルコード(github: react-slot)

isEvenという名前の要素を1つ差し込むだけで、slotにアサインされている要素をuseRefで参照しています。

Templateコンポーネントの中で、参照した要素をcloneNodeでコピーして表示するようにしました。

ただ、この方法でやりたいことはできましたが、描画の最初のほうでアサインされた元のslotが一瞬見えてしまう課題がでてきました。

おわりに

今回は1つの要素を差し込むだけで複数のslotに表示させてみました。ただし、課題も残っています。スクリプトをロードするまで描画しないようにしたら解消できるかもしれません。解決した方はコメントをお願いします。

ちなみに、atomicoというフレームワークで用意されているuseSlotを参考に作りました。そちらでは自前で実装する必要はなさそうです。atomicoもぜひご覧ください。

psqlとmysqlで接続を楽にしたいよね？しよっか

※記憶ベースで書いているところがほとんどなので、うまく行かない場合は参考情報をみていただけると大変助かります。

はじめに

運用・開発でデータベースに接続する機会は結構あるもので、いろんなところに接続しなきゃならないときがあります。でも、接続先とかユーザーとかパスワードとか覚えてられないですよね？接続を楽にしたいですよね？しましょう。

今回は僕がよく使っているMySQLとPostgreSQLで接続を楽してみます。

mysql

mysql_config_editorというものがあり、そこに接続プロファイルを書いてもらいます。プロファイルはホームディレクトリ下の~/.mylogin.confに難読化されて保存されます。

接続プロファイルを記録する

mysql_config_editor set -G ${profile-name} -h ${host} -P ${port} -u ${user} -p

mysql_config_editor set -G mydatabase-profile -h localhost -P 3306 -u akio -p

でパスワードを聞かれるので答えてください。これで記録されます。

使うときは

mysql --login-path=mydatabase-profile

で接続できるはずです。

mysql参考

より詳細なQiita記事はこちらにあります。

MySQLへの接続を楽にする - Qiita

mysql_config_editorに使えるオプションはこちら。print -allでプロファイル一覧を出せます。

MySQL :: MySQL 8.0 リファレンスマニュアル :: 4.6.7 mysql_config_editor — MySQL 構成ユーティリティー

psql

パスワードと接続プロファイルをホームディレクトリ下の2つのファイルに分けて管理します。

接続プロファイルは ~/.pg_service.conf に次のように書きます。

[mydatabase-profile]
host=localhost
port=5432
user=akio
dbname=mydb


パスワードは ~/.pgpass に次のように書きます。

localhost:5432:mydb:akio:mypassword

~/.pgpassは chmod 600 しておきます。これよりゆるくするとpsqlに読み取ってもらえなくなります。

接続するときは次のように書きます。

psql  "service=mydatabase-profile" -w

-wでパスワードを聞かれなくなりますが、その代わり.pgpassを探しに行ってくれます。

ちなみに、.pgpassの中身をパスワード以外の部分で一致させて探すので少しでもserviceの内容と違うと取ってこれないかも...と思っています。ワイルドカードは使えそうなので適宜使うと良いのかもしれません。

psql参考

.pg_service.confにかける他パラメータはこちら。

データベース接続制御関数

.pgpassについて詳細なQiita記事はこちら。

psqlでパスワード入力を省略する - Qiita

pgpassについての公式はこちら。

パスワードファイル

psqlのオプションはこちら。

psql

おわりに

mysqlとpsqlで接続プロファイルの保存方法に違いがあることが少々気になりました。mysqlは難読化している一方、psqlはファイル権限制御で読み取られにくくしています。目的は同じでも実装方法が異なる点が、どういう経緯でそうなったのか興味をひきました。誰か教えてください。(´・ω・`) <-(そこまで知りたいとは思っていない顔)

「くもんのうた200えほん」をカメレオンリーダーのような音声タッチペンで便利にする

こんにちは。

先日、妻が「カメレオンリーダー」というものを紹介してくれました。

今回の成果物の図

カメレオンリーダーとは

カメレオンリーダーと「くもんのうた200えほん」を組み合わせて、音声タッチペンで童謡がいつでも聴けるというのです。

それは便利だ、と思い「いいじゃん、買っちゃえば？」と言ったら

「でも、高い」と。

え、そうなの？と商品サイトを見てみると、シールセット + タッチペンで 18,700円！

確かに高い...。

でも、この仕組みはどこかで見たことあるなーと思い、類似品を検索すると「G-Talk」という製品があるらしいです。くもんやZ会にも同じような仕組みのペンがあるらしいのですが、だいたいこのG-Talkの系列とのこと。しかし、G-TalkもAmazonで12,100円と高い...。

もう少し調べると、Z会のエブリスピークを英語の絵本用に改造した人がいました。

エブリスピークは中古で流通しているようで、メルカリで1400円で買えました。また、シール自体はとても安く、Amazonで1500円(送料込み)で買えます。合計3000円弱で、カメレオンリーダーと同じことができるのです。

MaiYaPenが欲しかったけど高いのでZ会のエブリスピークで代用してみた – BeeLabo

音声タッチペンの作り方

まず、「くもんのうた200えほん」の楽曲データをダウンロードしてきます。Amazonで妻が買ったのですが、妻曰く、「Webで楽曲データを落とすのはバグがあって大変だからAmazon Musicのアプリで落とした方がいい」とのこと。Web版はどうもチェックボックスにバグがあって一括ダウンロードができないらしいです。

ダウンロードしてきたら、次はエブリスピークのmicroSDに楽曲データを入れます。これは所定のフォルダ名とファイル名にしないといけません。200曲全部を処理するのは大変なのでプログラムを組みました。こちらは自由にお使いください。Macを持っていたらPython3が入っているはずなので動かせると思います。ディレクトリはこのように配置すると良いです。

プログラムを動かすとこんな感じで作られます。

1シート目の127番目が「およげ、たいやきくん」になっていたら成功だと思います。

最後に、シールを貼ったら完成です。妻が頑張りました。

細かいところは参考に上げたリンクをご覧ください。

MaiYaPenが欲しかったけど高いのでZ会のエブリスピークで代用してみた – BeeLabo

カメレオンリーダー vs エブリスピーク

一応、カメレオンリーダーと比較しておくと

1. かわいさはカメレオンリーダーの方がいい。

2. SDカードのキャップはネジで閉じられているエブリスピークの方がいい。

3. 音質は気にならない。(youtubeなどの紹介では録音のためか音が割れている気がする)

4. 乾電池(エネループも可)のエブリスピークの方が外出先で比較的楽だと思う。(ちなみに、カメレオンリーダーは充電式だけど、USB type-Cじゃないので使いにくそう)

というわけで、1歳になったばかりの娘とこれで遊びたいと思います。

子供が1才を迎えて変化したこと

こんにちは。前回は5月に投稿していたので3ヶ月ぶりの投稿です。

1年前の写真と一緒に撮ると変化がわかりやすいらしい

娘がついに1才を迎えました。去年の今頃、台風の夜中に生まれたことが懐かしく思い出されます。

生まれた時はわりとこれ

伝い歩きするし、「あうあう、バブー」言ってるので運動・知能共に成長しています。

今回は1年経ってどんな変化があったか書きます。

哺乳瓶がいらなくなった

おそらく9ヶ月頃からミルクを飲まなくなりました。もともと離乳食で栄養が賄えているはずなので積極的にあげることはしていませんでしたが、お風呂の後には飲み物を欲することがあり、少し余っている粉ミルクをあげていました。しかし、ある時からミルクを拒否して麦茶を飲みたがるようになりました。たぶん麦茶のボトルがストローなので、哺乳瓶と比べてすぐにたくさん飲めるからなのだと思います。でもおっぱいは飲むんですけどね、不思議です。

ベッドを我が物にする

娘はお風呂に入ってすぐに眠くなります。だいたい8時過ぎにはベッドで寝ています。

ところで、我が家のベッドはソイネールというベビーベッドが隣接(写真参照)していて、ソイネール上で寝かせています。

我が家のベッド環境

そういった環境の中で、娘は非常に寝相が悪く、ソイネールから飛び出して私たちのベッドの上でコロコロ寝返りをうっています。なので、私たちが寝るころには私たちのベッドの中央で寝ていたりします。

娘の状態によってしばしばこうなる

ちなみに、柵をつけていない代わりにベッドの高さは最低にし、下にはクッションマットを敷き詰めて転落してもなんとかなるようにしています。

お風呂が平気になる

髪を洗ったり洗顔したりすると嫌がって泣いていましたが、今では平気になりました。おそらく、保育園で水遊びをしているため、水に慣れてきたことで顔に水がついても平気だと気づいたのだと思います。サンキュー保育園。

伝い歩きもできるので、今ではバスチェアにつかまりながら洗えるようになって楽になりました。

大人でも食べられそうなご飯を食べる

ツナのクリームマカロニパスタという離乳食レシピがあり、よく作っているのですが、大人でも食べられるレベルで美味しいです。離乳食はわりと素朴味が多いのですが、最近は味がついているご飯を食べられるようになっています。

娘は食べる時に自分でちゃんとスプーンを使えたり、手づかみができるようになってきました。もし親が一方的にスプーンで与えようとすると少し嫌そうにします。

ただし、食べ方はまだ赤ちゃんなので辺りに大量に撒き散らしています。手にヨーグルトつけたまま目をゴシゴシしようとすると少しヒヤッとします。

大 惨 事

というところで変化を書いてみました。

もう1年たったのか、と同時に、これからどう成長するのか楽しみです。

離乳食のおやきを作りたくない妻の話

娘に食べられるために生まれてきたおやき群

9ヶ月頃の離乳食には手づかみ食べをするためにおやきが候補にあがってきます。おやきはジャガイモの皮を向き水にしばらくさらしアクを取った後に茹でてマッシュし、さらにここに他の材料を加えて手ごねで形成しフライパンやらで焼いていくのだが、もうたくさんである。やりたくない！そう妻が申しておりました。

しかし、そんなおやき作りに技術革新、またはイノベーション、あるいはブレークスルーが訪れました。

和光堂のおやきミックス。

指定分量の粉と水をまぜ、必要な材料を加えていくだけで粘り気のあるおやき生地が完成します。ジャガイモをあれこれしなくてよい。最強である。

100均で買ったミニフライ返しも使って焼く。あんなに「もうおやきは作りたくない！」と申していた妻がウッキウキで踊りながらおやきを量産している。

妻に踊られているフライパン

ちなみに、ホットケーキミックスも同様に最強でした。

ただし、分量が少ないのでお得サイズのミックスを出してほしいー。

あと、株主優待に入れてほしいー。

スプレッドシートでWebサイトをスクレイピングしてセルの中できれいに整形する (IMPORTXML, TEXTJOIN)

はじめに

Googleのスプレッドシートは表計算するだけでなく、あるセルの言語を翻訳したり、データに対してクエリを発行したりできます。

面白い使い方として、IMPORTXMLのような関数を使うと簡単にWebスクレイピングができるので書いておきたいと思います。

スプレッドシートでWebスクレイピング

今回はYahoo! ニュースのトップページにある主要記事のリストを取得しようと思います。

ちなみに重要なことなのですが、スクレイピングを許可していないサイトもありますし、たくさんスクレイピングすると相手に迷惑なので、ほどほどにしましょう。

まず新規でスプレッドシートを作成します。意外に知られてないのですが、ブラウザのURLにsheet.new と書くと自分のGoogle Driveにスプレッドシートが新規作成されます。

シートのセルに対象となるURLを書きます。

　初手B2

Excelの新規データ作成するときの「初手」ってあるじゃないですか。私はB2が初手であることが多いんですが定石はA1ですか？？ pic.twitter.com/SkiqN904zs

— 影総務部長@特定社会保険労務士 (@ShadowSR1976) May 10, 2023

スクレイピングしたい対象のXPathを取得します。ブラウザの検証ツール(開発者ツールともいう?)を出し、対象の位置で右クリックをします。するとコピーが出てくるので、そのツリーの中にあるXPathのコピーを選びます。(フルXPathじゃなくていいです)

取得したい箇所を選ぶ

Copy XPathを選ぶ

任意のセルにIMPORTXMLを書くと、少々のローディングのあとに対象である主要記事リストが取れます。

ただ、このままでは読みにくいのでTEXTJOINを使って整形していきます。理想形としては、1つのセルに縦にニュースが並んでいてほしいです。なので、次のようにTEXTJOINを書きます。

これで縦に並んで読みやすくなりました。

おわりに

WebスクレイピングだとBeautiful Soapの印象が強くて「コード書くのかー」という気分になるのですが、それはそれで楽しいのですが、サクッとやりたいことだけやりたいときにスプレッドシートを見ると面白い関数があって良いです。

8ヶ月目までのメモ(育休復職明け1ヶ月)

 こんにちは。世間はGWが始まっていますが私は有給温存で平日出勤です。

前回の2月から2ヶ月が経ち、前の記事を読んでいると娘の成長に驚かされます。

また、復職してどうだったのかも書いてみたいと思います。

しなぷしゅ探検隊

成長

お座りができるようになりました。これはすごい成長です。椅子に座れるということです。

椅子に座れるということで、我が家にはベビーハイチェアが来ました。さいたま市のパパママ応援ギフトが原資です。ありがとう、ありがとう。

お座りもできますが、最近ではつたい歩きもできるようになりました。運動不足解消用にトランポリンを兼ねたクッションがあるのですが、それがつたい歩きに丁度良い高さで、娘はこの周りをぐるぐるしています。もうしばらくしたら二足歩行するかも。

PCに夢中

4月から保育園に行くようになりました。園ではベビーカーに乗って外を散歩できるようで、私達がやると絶対に嫌がって抱っこすることが必死だったので、保育園ってすごいなぁと思います。今では私達がベビーカーを使っても全然嫌がらなくなりました。

慣らし保育の期間が2週間ありました。最初は先生に抱っこされると泣いてしまっていました、今では笑顔を見せられるまで慣れました。どちらかというと、私のほうが慣らし保育って感じで、登園時に荷物をどこに置けばいいのか、あたふたしていました。今ではサササッとできます、多分。

最近は離乳食が進んできています。園からいつまでに何を食べさせてほしいかをもらっていて、それを妻が頑張って日々のメニューに落とし込んでいます。私がボーッとしている間にめちゃくちゃ頭を捻っています。

この前には雑炊を食べたり、おやつにはヨーグルトを食べたりしています。離乳食中期頃は喉越しが重要らしく、とろみがあると食べてくれるみたいです。娘は好き嫌いなく何でもパクパク食べてくれるので助かっています。

おやつにはせんべいをよく食べていて、保育園でもよくハイハインを食べるようです。家でハイハインを見せると狂ったように興奮します。他にも野菜スナックを食べるのが好きで、私と妻と娘で分け合いながら(いや、妻のほうが1/2くらい)食べています。ベビーフードは美味しくて時短で最高です。すりつぶして裏ごししていた頃が懐かしい。ベビーフード万歳。

離乳食が進んでくると当然ですが、うんちが臭くなってきます。私が最も娘が成長したと感じました。それまではほぼ匂いがないので、人間になってきたんだなぁと妻と話していました。

復職

前回の記事では3つ不安なポイントがありました。

仕事ができるかどうかについては、会社のチームと仕組みが優秀で、良くも悪くも私が居ようが居まいが物事は進むので、仕事ができてもできなくても問題ない、という結果なりました。

もちろん、仕事をする上で成果を出していきたいので、できそうだと思っていることは何でもやるつもりです。

仕事以外では、園からの呼び出しや、妻の復職による生活の変化があり、まだ不安はあるものの、問題に直面するまではあまり考えないようにしようと思っています。

少なくとも、妻と話した上で、お金は多少使っても娘との時間を増やそうという話をしています。ですので、今後はnoshのようなデリバリーを含めて検討していきたいと思っています。

とりあえず復職して収入が増えたので幸せです。お金は重要。

というわけで、また次回。

6ヶ月目までのメモ

こんにちは。今年ももう3月になろうとしています。

アドベントカレンダーをやっていたので1月はブログを書かなかったのですが、その間に娘は成長し続けています。

また、そろそろ復職なので心境も綴っておきます。

沖縄旅行に行きました

6ヶ月ごろの成長

5ヶ月ごろから寝返りができるようになりました。最初は仰向けからひっくり返るだけで、戻れなくなってワンワン泣くという繰り返しでした。最近ではうつ伏せから戻れるようになり、寝る前はずっとコロコロ転がっています。転がりすぎてミルクをゲロしないかが心配です。

検診時に注射するのですが、比較的泣かなくなった気がします。もちろん泣くのですが、泣く時間が減った気がします。なんとなく僕が注射されるのが嫌いではない(献血とか採血とか平気)ので、遺伝なのか？と思ったりもします。

ちなみに、最近の赤ちゃんは注射されまくりです。たぶん僕達が子供の時の2倍くらいは打っている気がします。特に娘は早産児なのでシナジスもやっていて、ちょっと可愛そうだなと思ったりしています。注射を見る分には楽しいです。

参考: 予防接種スケジュール- Know VPD!

2月頃から娘と一緒にお風呂に入るようになりました。妻と交代で一緒に入っています。湯船に一緒に入っているので家族だなぁ...とシンミリします。

娘が退院したての頃は顔を洗うときにシャワーを使っていてギャン泣きされてお風呂どころではなかったのですが、今ではビビリこそするもののシャワーが平気になりました。

また、2月頃から離乳食を始めています。10倍粥から始まり、ニンジン、カボチャ、ほうれん草を食べています。

妻が見つけてきた「ステップ離乳食」というアプリが便利で、離乳食の献立表があるので、いつ、どれくらい食べるのか、どれくらい食べたか記入したり共有したりできます。データ同期は自動でやって欲しいですが...手動同期しかないようです。

言葉についてですが、「あうあう」言っているだけですが、妻曰く「だっこ」は理解しているらしいです。とにかくめちゃくちゃに文句を言っているときに、「抱っこ？抱っこか？」と聞くと無言になるときがあるので、そうかもしれない。

自分で哺乳瓶を持ちはじめた

今後はお座りができるようになると思うので、椅子を買って座ってもらうことで離乳食が楽になる...かも？いや、バンバン叩いて皿を下に落としているのが目に浮かぶ...。そろそろブロッコリーという新食材が出てくるので反応が楽しみです。

復職について

正直、不安が大きいです。たぶん3つ不安があって、

・仕事ができるか

・保育園から呼び出しがこないか

・生活がバタバタしてこないか

という感じです。

仕事については、6ヶ月間ほとんどプログラミングをしていなかったのでKotlinとかRustとか忘れたかもしれないです。リスキリングは自分を律せなかったので、英単語とアーキテクチャ本しか読めなかったです。

仕事が始まることで期待感もあります。収入が増えるし、目標を持って開発ができるので。

いろいろ相談しながらやっていきたいです。