クロスビットテックブログのフィード

https://zenn.dev/p/xbit

デスクレスワーカーのためのHR管理プラットフォームを開発・運営する株式会社クロスビットのテックブログです。記事は各エンジニアの裁量で発信しているものです。

フィード

記事のアイキャッチ画像
Sopsを触ってみた
クロスビットテックブログのフィード
Sops今年から社内でInfra勉強会が始まりました。その中でSopsという技術について学んだのでアウトプットを兼ねて紹介します👏 紹介すること/紹介しないこと紹介することSopsの概要基本的な使い方紹介しないこと実際の運用やベストプラクティス関連サービス(GCP KMSなど) 対象プロダクトの紹介 Sopsとは?暗号化ファイルのエディターです。YAML、JSON、ENV、INI、BINARY 形式をサポートしており、AWS KMS、GCP KMS、Azure Key Vaultなど、複数のクラウドサービスに対応しています。リポジトリ...
16日前
記事のアイキャッチ画像
初めてのソルベ(Sorbet) Part 1
クロスビットテックブログのフィード
私は主にJavaScript、TypeScript、およびJavaで仕事をしてきましたが、今回は初めてRakushifuプロジェクトに参加し、Ruby on RailsとSorbetを使用しています。 What is Sorbet?Sorbetは、コードが実行される前にミスをチェックすることで、開発者がより良いRubyコードを書くのを支援するツールです。コードのスペルチェッカーのようなものであり、エラーを早期にキャッチして後でのバグを防ぎます。コードに型注釈を追加することで、Sorbetはすべてが正しく組み合わさることを確認し、コードを理解しやすく、保守しやすくします。簡単に言う...
1ヶ月前
記事のアイキャッチ画像
Google Cloud Certificate ManagerでTLS証明書の取得に苦戦した
クロスビットテックブログのフィード
1.はじめに弊社のエンジニアメンバー増加に伴い、チーム専用の「ステージング環境」を新たに作成する必要がありました。このプロセスで出会った問題とその解決方法について話します。 2.経緯(やろうとしたこと)今回作成したステージング環境は、Google Kubernetes Engine(GKE)というサービスを使用しています。GKE内の同一クラスター上で、それぞれのチームが「namespace」という区切りを使って自分たちのステージング環境を持っています。その中で自分が作成したのは、図1の赤枠部分です。すでにある手順通りに作業を進めました。作業のポイントを抜粋すると以下の...
4ヶ月前
記事のアイキャッチ画像
らくしふのVue.jsアプリケーション設計
クロスビットテックブログのフィード
はじめに株式会社クロスビットのメインプロダクトである「らくしふ」のフロントエンド実装にはVue3を採用していますが、Vueエコシステムの変遷などに伴い、色々な実装方法を導入してきた歴史があります。具体的には、RailsのERBによるテンプレート + JavaScript 時代Vue2 + JavaScript + Vuex 時代Vue2 + TypeScript + Vuex 時代Vue3 + TypeScript + Composition API 時代Vue3 + TypeScript + Composition API + VuexORM 時代Vue3 + Ty...
4ヶ月前
記事のアイキャッチ画像
Rust製の組版システムTypstを使ってみた
クロスビットテックブログのフィード
TypstとはTypstは、論文・書籍等の執筆を行うためのソフトウェアである組版ソフトウェアの一つです。まだ誕生して1年も経っていない新興のソフトウェアになりますが、GitHubのリポジトリはすでにスター数24000に達するなど、すでに一定の評価を受けている様子です。この分野のソフトウェアとして最も有名なものにLaTeXがあり、卒業論文の作成などで利用した読者の方も少なくないのではと思います。私もLaTeXはある程度経験があるので、今回はLaTeXとの比較という観点からTypstの機能を眺めたいと思います。 インストールmacの場合、brew install typstでイ...
4ヶ月前
記事のアイキャッチ画像
Shiftキーを押しながらだとdraggableが効かない?!
クロスビットテックブログのフィード
はじめに「らくしふ」のシフト表には、シフトのドラッグ&ドロップによるシフトの移動機能があります。この機能をリリースして以降、せっかくなら「Shiftキーを押しながらドラッグ&ドロップしたらコピーされてほしい」という声も聞こえてきました。「おう、そんなの簡単やぞ。やったろやないか」 ということで実装してみたら、ブラウザの仕様?影響によりちょっと問題にぶち当たったので、その問題と解決方法のご紹介です。 ドロップ時の判定実装そもそも「コピー」か「移動」はどう判定すれば良いのでしょうか。それはdropイベント時のshiftKeyフラグを使えば簡単です。https://de...
5ヶ月前
記事のアイキャッチ画像
MySQLにおけるメタデータとは
クロスビットテックブログのフィード
注意こちらの記事は、2023年夏に執筆したものになります。(Advent Calendarのために掘り出しました😇) 背景こんにちは。残暑も残りわずかとなってきましたが、久々に怖い話を聞いたので、みなさまに共有させていただこうと思います。それはとある機能の要件定義の際、新しく追加するテーブルの設計に想像をめぐらせていた時のことでした。長時間のトランザクションは望ましくないという示唆を同僚からいただき、理由について説明していただきました。「トランザクションは短くあるべき」「なぜならトランザクションが長ければ、メタデータロックの危険性があるからだ。」「過去に一度、10...
5ヶ月前
記事のアイキャッチ画像
@vue/compatによりVue2モードで動いていたアプリケーションをVue3モードに変更した際に詰まった問題(`.native`)
クロスビットテックブログのフィード
はじめに2年ほど前に移行ビルドを使ってVue2からVue3にマイグレーションしました。しかしそれ以来そのままになっており、また他のライブラリを使ってる上で不具合が見受けられる(例:ElementPlusのel-tagのxアイコンが動作しない、etc..)ことから、流石にそろそろ標準ビルドへの切り替え(=完全移行)を決意しました。手順としては以下で進めました。移行ビルドのモードを3に切り替えてエラー箇所の対応移行ビルドの削除今回は手順1において遭遇したとあるbreaking changes問題について取り上げますVue.configureCompat({+ MODE:...
7ヶ月前
記事のアイキャッチ画像
(GCP) CloudFunctionsからPrivateなCloudSQLへ接続する
クロスビットテックブログのフィード
はじめにCloudSQLへの接続にPrivateIPを使用することには以下のようなメリットがあります。 セキュリティ面PrivateIPを使用するとCloudSQLインスタンスはインターネットに公開されません。これにより、インターネット経由の不正アクセスのリスクが軽減する。 パフォーマンス面VPC内のリソース間の通信が最適化されるため、レイテンシが低減するなどネットワークのパフォーマンスが向上する。特にレイテンシに関してはPublicIP、PrivateIPそれぞれを比較した面白い記事もありました。https://onl.bz/n9ReKuZその他コスト面...
7ヶ月前
記事のアイキャッチ画像
NeovimのFloating Windowで花火を打ち上げる
クロスビットテックブログのフィード
NeovimにはFloating Windowという機能があります。https://neovim.io/doc/user/api.html#api-floatwinこの機能で花火を打ち上げて遊んでみたので紹介します!(Neovim: v0.9.1) Floating WindowとはFloating Windowはv0.4あたりで入った機能です。通常のウィンドウ内ではなく、ポップアップのように重ねて配置できるウィンドウです。なんでもできる。 できたものfireworks.vim花火の点一つ一つがひとつのFloating Windowです。:call Firew...
8ヶ月前
記事のアイキャッチ画像
[serde] flatten + with&remote + rename
クロスビットテックブログのフィード
問題既存のJSONに xx_startやxx_endといった名前のフィールドが含まれているRustの(デ)シリアライズフレームワークであるserdeを用いて、これまでは単純にデシリアライズしていた可能であればstd::ops::Rangeなどに直接変換したい 結論withとremoterename (対象の構造体のメンバ変数が可視な場合)もしくは getterとstd::ops::From (対象の構造体のメンバ変数が不可視な場合)flatten または Newtypeパターンの構造体といったserdeの属性の濫用組み合わせで任意のデータ群と任意の構造体を...
9ヶ月前
記事のアイキャッチ画像
proptestによるテストケースの自動生成
クロスビットテックブログのフィード
この記事は、Rust言語のテストケース自動生成ライブラリであるproptestクレートの紹介記事です。 proptestとはコードのテストを書くとき、一般的には代表的な値や境界値を用いて、具体的な値を使ってテストを書くと思います。fn to_zero_only_100(x: u128) -> u128 { if x == 100 { 0 } else { x }}#[test]fn test_to_zero_only_100() { assert_eq!(to_zero_only_100(50), 50...
10ヶ月前
記事のアイキャッチ画像
知識ゼロからSafariのWebPushを実装してみた: 実装編
クロスビットテックブログのフィード
ご挨拶みなさまいかがお過ごしでしょうか。先日の私は上司との1on1にて「yamashitaさん、今年の3分の1が過ぎたよ!」というお知らせを受けて、ひどく動揺してしまいました😇(※記事を公開したタイミングでは今年の半分が過ぎていますw)前回はWebプッシュ通知をFCMでSafari向けに実装してみる、というトライをしましたが、まさかのSafari対応外という事実が実装後に判明、撃沈するオチを迎えました。https://zenn.dev/xbit/articles/97419981a61b29上記の記事の後は 少しでも楽をするために ライブラリを選定し直し、ついにSafar...
1年前
記事のアイキャッチ画像
npmパッケージ更新する前にちょっと待って!修正は最新版に含まれてる?の巻
クロスビットテックブログのフィード
emailバリデーションがおかしい?本日サポートチームから開発チームに「ユーザーのメールアドレス入力ができない」と問い合わせがきました。具体的には以下のパターンです。つまりサブドメ形式のメールアドレスで、-(ハイフン)が含まれるとバリデーションエラーに引っかかってしまうようです。このinput箇所はVeeValidateとZodを組み合わせてバリデーションを行っており、早速同僚が次のissueに気づいて共有してくれました。https://github.com/colinhacks/zod/issues/2193おお、既にこの問題は3/14にissueとして起票されており、...
1年前
記事のアイキャッチ画像
Google Cloud Datastreamを死活監視してみた
クロスビットテックブログのフィード
背景データパイプラインの一環でDatastreamを運用している中で、ボトルネックがあることに気づき、死活監視をすることにしました。これを記事としてまとめていこうと思います。ここでいうボトルネックとは以下の点です。リソースであるCloudSQLへの通信障害等により、その間のデータを連携することができなくなるDatastream自体の障害や、誤って停止してしまった場合に気付けないDatastreamはシングルリージョンしか設定できない 方法 構成構成は非常にシンプルです。CloudFunctionsには、DatastreamのステータスをチェックしてSla...
1年前
記事のアイキャッチ画像
意図的でない車輪の再発明の精神的ダメージはでかいって話 - Draggable and Resizable UI with React
クロスビットテックブログのフィード
はじめに車輪の再発明って楽しいですよね。しかし業務中は発明された車輪を用いて楽をしたいです。目的を果たす車輪がないと判断したときは自分で発明(開発)するしかないですが、再発明をしてしまった後にちょうどよく「発明されていた車輪」を発見すると(再発明の労力)-(発明されていた車輪での労力)=(精神的なダメージ)を喰らいます。欲しかった車輪の要件は以下の通りです。滑らかにドリフトができて(Draggable)外径が可変(Resizable)PowerPointやKeynoteなどのプレゼンツールの要素をイメージするとわかりやすいと思います。滑らかにというのはよく...
1年前
記事のアイキャッチ画像
知識ゼロからSafariのWebPushを実装してみた:SDKのサポートつまづき編
クロスビットテックブログのフィード
前置き先日(2023/03/27)Safariでのプッシュ通知実装がついに解禁されました。プッシュ通知がSafariにも来る…かもと話していたのが4年前だったと記憶しているので、ついにリリースされてやったね🎉という気持ちです。また最近ではTwitterのAPIもえげつない料金設定を引っ提げてきて、クライアントアプリで収益を得ている方にとっては阿鼻叫喚となった出来事がありましたね。私もお気に入りのクライアントアプリが召されて悲しかったです。さて、今回はこちらのプッシュ通知を使って「モチベーション爆上げアプリ」を作ります。匿名多数のネットの通りすがりの方が、押せば押すほどアプ...
1年前
記事のアイキャッチ画像
Google Search ConsoleからCloudflare Pagesへの所有権の確認は要注意!
クロスビットテックブログのフィード
あらすじGoogle Search Consoleでアカウントの「所有権の確認」がありますが、Cloudflare Pagesでホスティングしているサイトが対象の場合は、ダウンタイムが発生する可能性があるので要注意ですよという話です。https://support.google.com/webmasters/answer/9008080?hl=ja私は日中にこのダウンタイムを発生させてしまい、多くの人に迷惑をかけてしまったので、その戒めの記事でもあります。寿命が縮まりました。 背景Google Search Consoleに個人アカウントで登録してしまってたことから、...
1年前
記事のアイキャッチ画像
RubyエンジニアがPythonコードを1週間書いた感想
クロスビットテックブログのフィード
はじめにXbit Advent Calendar 2022 24日目の記事です。シフト管理SaaSであるらくしふを提供するクロスビットのバックエンドではRailsを採用することが多いですが、一部Pythonで書かれたAPIも存在します。WebフレームワークにはFastAPI、ORMにはSQLAlchemy、静的型解析にはmypyを使っています。私はここ数年はRubyやTypeScriptでコードを書くことが多いですが、今回初めてPythonで書かれたプロダクトを触る機会がありましたので、その際に感じた点の中からいくつかピックアップしてみます。 リスト(辞書)内包表記に慣れる...
1年前
記事のアイキャッチ画像
next-sitemapによるサイトマップ生成からCloudflare PagesとGoogle Search Consoleでの設定
クロスビットテックブログのフィード
はじめに会社のホームページのリニューアルを行いました。当初はFirebase Hostingの利用を考えていたのですがとある問題[1]に遭遇したので、Cloudflare Pagesでのホスティングを行っています。https://pages.cloudflare.com/さて、このホームページの公開に伴ってサイトマップの設定を行ったのでその時の手順やポイントを紹介しようと思います。開発にはnextjsのSSGを利用しましたhttps://nextjs.org/docs/basic-features/pages#static-generation そもそもサイトマップとは...
1年前