以下のようにテキストを左寄せではなく、均等に割り当てを行いたい このときtext-align: justifyを利用すればできると思っていたができなかったので調査した https://www.w3.org/TR/css-text-3/#text-align-property 仕様をみるとtext-align-lastで特に指定…

jestで書いていたテストをtypescript化しようと思うが、あるエラーが発生しておりできずにいた ただ、さすがに不便になってきたので調べてみる 事象はエディタ（IntelliJ IDEA）で次のようなエラーメッセージが表示される Cannot find name 'test'. Do you n…

firebaseであるサービスをホスティングしようとしたところ、ビルドしてアップ後に次のようなファイルが生成されていた .firebase/hosting. ALPHANUM.cache ※ALPHANUMはランダムな文字列 これは何なのかとコミットするべきかを調査したところ同じことをstacko…

根本解決してないが、調査したことのメモ ある施策を実装したと、CloudBuildでビルド中に失敗した 原因はnpm install中に以下のエラーが発生してとまっていた npm ERR! Maximum call stack size exceeded 調べると記事はいろいろでてきて、npmのキャッシュが…

前回GISオブジェクトのデータ（緯度経度）を検索条件に検索することを行った uga-box.hatenablog.com 今度は他の検索条件で緯度経度を取得することを考えた 当初DTOにPoint型のプロパティを用意すればいい感じにやってくれると思ったがうまくいかなかった pr…

PostGISの利用準備ができたのでデータをいれたい uga-box.hatenablog.com データの作成 以下のようなcsvファイルを作り、COORDINATEテーブルに格納する COORDINATE_ID LAT_LNG 5085f82b-680d-4d30-bf17-29fa7e5aeee3 SRID=4326;POINT(43.0230805 141.3223676…

データベースに位置情報などを格納しておき、ある範囲（定点やkm圏内、好きな図形の中）に含まれるデータを検索したい PostgreSQLを使っている場合はどうやらPostGISというのがよさそうということで使ってみることにした PostGIS PostGISはPostgreSQLの拡張…

UI の一部に JavaScript エラーがあってもアプリ全体が壊れてしまわないようにしたい Reactではどうなっているのか調べたら、React 16 から“error boundary”というのが導入されていた ja.reactjs.org どういうものか調べてみた error boundary error boundar…

以前にUrlFetchAppを使って、GAS（Google Apps Script）でスクレイピングをするようなことを考えたことがあったが uga-box.hatenablog.com POST送信のやり方がわからなかったので調べた developers.google.com ドキュメントにあった送り方サンプル // Make a…

CypressでStorybookのcavasに表示されているページのフルスクリーンのキャプチャを撮りたい しかし、このページのURLでは左にコンポーネントツリーが見えているし、下までスクロールすることができない ちょっと調べた結果、左上のアイコンを押すとcanvasだ…

MSW（Mock Service Worker）というライブラリを知ったので調べてみた mswjs.io MSWは、Service Worker APIを使用して実際のリクエストをインターセプトするAPIモックライブラリ キャッシュの目的でリクエストをキャプチャするというService Workerの機能を使…

この記事ですが、スマホの実機でみたらアイコンが表示されなくなってしまったので、使えませんでした。デスクトップPCだけなら問題ないです。 いままでReactでSVGスプライトをインラインで使うため、react-svg-inlineというモジュールを利用していたが3年ほ…

過去にgulpをつかってsvgスプライトを作っていたが、久々にアイコンを更新しようと思ったらgulp taskが動かなかった もはやgulpに依存しなくて良いと思うので、別の方法を探してみる 調べた感じsvg-sprite-generatorを使うのがよさそう github.com だが、軽…

FigmaでデザインされたものからHTMLやCSSに変換するプラグインをつくりたい そのための実装方針を考えたい FigmaのNode Figmaのレイヤー構造はnodeというもので表される www.figma.com プラグインコードでは、ほとんどの場合SceneNodeとも呼ばれるページ内に…

前回Figmaのプラグインについて調べた uga-box.hatenablog.com このときはテンプレートをダウンロードしたときの実装済みの挙動を確認しただけだったが、今度はもう少し自分で書いてFigmaからHTMLとCSSを出力するようなプラグインをつくってみたい このとき…

Figmaで自作プラグインがつくれるみたいなので簡単に触ってみる プラグインの仕組みは下のドキュメントを読んだ www.figma.com そして、実装はこちらの記事が分かりやすかったので、これを読んでの自分用メモ zenn.dev バージョンが違うからか、ちょっと記事…

Figmaの運用を考えてみた ブランチ運用 Figmaにはブランチ機能があるが、使えるのはOrganizationプランだけだった www.figma.com なのでブランチ運用をプロジェクト独自で考えないといけない 調べると様々な工夫をされているチームの記事があってとても参考…

FigmaのVariants機能が便利そうなので試してみる https://help.figma.com/hc/en-us/articles/360056440594 この機能はどのチームまたはプランでもサポートされているが、ライブラリへの公開は無料アカウントではできない 簡単に言うと、コンポーネントにプロ…

前回Figmaの練習でファイルをつくってみた uga-box.hatenablog.com ただ、このとき無料プランのアカウントの方で作ったので、別ファイルでコンポーネントやスタイルを共有することを試すことができない ※有料プランであれば別ファイルでComponentとStyleが参…

参画しているプロジェクトのデザインツールがFigmaになるので触ってみる サイトデザインはハードルが高いので、前々からやってみたかった↓の方のコードサンプル付きのサムネを作ってみる A lot of you have been asking how I make these thumbnails/coding …

サーバーサイドの実装でドメインモデル貧血ぎみなのもそうだけど、そもそもドメインモデルのあるべき状態がわからなくなっていた そのとき次の記事で、あるべき姿と、あるべき姿にトレードオフがあるということがわかった scrapbox.io ドメインモデルのある…

pixivのデザインシステムの記事を拝見 inside.pixiv.blog いま参画しているプロジェクトにまさに下のようなモチベーションになりつつあるので参考になった ピクシブには多数のサービスがありますが、使っているサービスが変わっても「これは pixiv のサービ…