TwitterFacebookRSS Feed

Anti-Pattern Inc. Engineering Blog

Anti-Pattern Inc.(株式会社アンチパターン)のエンジニアブログです。

Reactを使ってinputの余白を動的に変更する方法

こんにちは、いわむらです 今回はinput内の余白を動的に変更する方法をご紹介しようと思います まずなぜ動的に余白を変更する必要があるのか?となると思うんですが、 以下の要件を満たす要素を作成しようとした時にテキストフィールド内に表示するアイコンの幅に合わせて余白を動的に変更する必要があったためです * 検索用のテキストフィールドがほしい * テキストフィールドは独自のスタイルをあてたいのでtype=textで作成 * テキストフィールドに入力内容があれば実行を促すアイコンを設置 * テキストフィールドに入力内容があれば内容を空にできるアイコンを設置 * アイコンの表示順は 1.実行 2. リセット で表示する * 入力内容と各アイコンは位置が被らないこと それでは実際にReactを使ってinput内の余白を動的に変えていこうと思います 今回利用するパッケージのバージョンを記載しておきます パッケージバージョンreact17.0.2react-dom17.0.2typescript4.4.2 @fortawesome/fo
Jun Iwamura
Jun Iwamura
3 min read

Amazon Cognito でメールアドレス変更する際の注意点

Amazon Cognito のメールアドレス変更には以下のような問題があります。 Cognitoでメールアドレス編集するとログインできなくなる問題Zennハトすけ [https://zenn.dev/dove/articles/78ecf08b51ee0c]> * 新しいメールアドレスを申請して、メールで検証をする前にその新しいメールでログインできてしまう * 逆に検証が成功していないのに古いメールアドレスでログインできない * つまり間違ったメールアドレスをリクエストするとその時点で詰む(ユーザーロックというらしい) これを回避する方法は上の記事やissue [https://github.com/aws-amplify/amplify-js/issues/987] にいくつか書かれています。 以下では、個人的にベターと思う方法を書きました。 今回Golangのサーバーで実装していますが、同じロジックでlambdaでの実装もできると思います。 基本的な方針は以下を参考にしました。 Change email with AWS Cognito and Amplify - Jo
Yu Takahashi
Yu Takahashi
2 min read
docker, exec, peco, alias, awk

pecoでdocker exec を快適にする

Dockerを使って開発していると、docker execすることが結構あると思いますが、地味に面倒なのでpecoを使って簡単に出来るようにしてみました。 pecoを使う前はこんな感じでdocker exec していると思います。 pecoを使うとこんな感じになります。 1文字打つだけでコンテナに入れます、早くて楽で良いですよね。 それでは設定していきたいと思います。 まずpecoをインストールします。 ※今回はbrewを前提にしてますので、brewが使えない場合は別途brewをインストールしてください。(windowsの人はbrewないので手順変わります、ごめんなさい) brew install peco これだけでpecoが使えるようになります。pecoは別のコマンドの結果を受け取って選択できるようにしてくれる、そして選択した結果だけを返してくれるコマンドになります。 以下がお試ししてみたキャプチャになります。docker psの結果をpecoに渡すことで、その結果を行選択出来るようになってます。お試しの場合だとappコンテナを選択しているので、最終的にはdocker
yuichi.kotani
yuichi.kotani
2 min read
Ubuntu, SSD

UbuntuのHDD 2TBからSSD 512GBへのLarger HDD to Smaller SSD換装を行う

動機 10年前から使っているデスクトップPCがある。いろいろガタが来ていたがBTOなので、OSの変更(windows7→Ubuntu20.04)、電源の交換(750w)、メモリの増設16GB→32GBによりパッチを当てて使っていたが、ついにPCの起動はまだしもcd がめちゃくちゃ遅いことがきにってきたので、HDD から SSDへのcloneを行うことにした。 ※おそらくfish shellでのgit情報の読み込みの兼ね合い 0からセットアップするのがめんどくさいためcloneを選択 移行前の起動時間は約127秒。遅い… 注意: 2TB HDD → 512GB SSDですが、実際にHDDに入っているデータが200GB程度とSSDの容量よりも少ないので今回の方法でいけます。 準備するもの * USB 16GB以上 (UbuntuのLive USB用) Amazon | バッファロー【国内メーカー】 USBメモリ 32GB USB3.2(Gen1)/3.1(Gen 1)/3.0/2.0 充実サポート RUF3-K32GA-BK/N【Amazon.co.jp限定】 | バッフ
Kohei Kondo
Kohei Kondo
5 min read

GitHub の Review のコメントが取得できたのでスプレッドシートに出力する

こおりやまです 前回、こちらで GitHubのReviewコメントを抽出するクエリーを作成したので、そのクエリーを利用してスプレッドシートにレビュー、コメント情報を出力してみました。 GitHub GraphQL API を利用してReview のコメントを抽出してみたこおりやまです 以前、こちらのブログでPull requests のコメント取得しましたが、Reviewコメントが取得できていなくクエリを再検討しました。 GitHub GraphQL API を利用してPull requests のコメントを抽出してみたこおりやまです 以前、こちらのブログでGitHubGraphQL APIをさわってどのような情報を取得できるのか確認していたのですが、Pull requests のコメント取得が必要になりGoogleAppsScript(GAS)から呼び出しスプレッドシートに出力してみました。 GitHub GraphQL API をさわってみ…Anti-Pattern Inc. Engineering BlogHiroki Kooriyama [https://tech.anti
Hiroki Kooriyama
Hiroki Kooriyama
3 min read

GORM を使って監査ログを出す!

こんにちは!矢ヶ崎です! さて、今日は監査ログのお話です。 Web アプリケーションのバックエンドを作成していると、センシティブな情報を持っているときには、アプリケーションからも監査ログを出す必要がでてきたりしますよね。 そんなとき、Go言語 ( Golang ) で 実装していた場合にはどうすればよいのか?GORM と各種 Web Framework (今回はecho) の Middleware を使ってやってみました! 今回の監査ログの目的 ・いつ ・誰が ・どんなデータに ・何をしたか を追えるようにする。つまり機密情報アクセスのトレーサビリティを確保するということだとします。 そして、今回は個人情報は全て RDB に入っているという設定で、 SQL のレベルでの全ログを取得し、その SQL 操作をアプリケーションのどのユーザが行ったか?( DB のユーザではなく、アプリケーションのユーザ)を記録していきたいと思います。 DB 側やインフラ側での監査ログでは、アプリケーションのどのユーザが利用したのかを記録するのはなかなか難しいです。 DB 自体のユーザを出力すること
Akihiro YAGASAKI
Akihiro YAGASAKI
1 min read
GitHub

GitHubのprojects(beta)を触ってみたらプロダクトの思想が見えて嬉しくなった話

こんにちは、小笹です。スクラムマスターとして日々より良い開発者体験を追求しております。その中でGitHubの新機能を触ってみたのでブログにしてみました。 触ってみた感想 もう少し機能が拡充したら積極的にこちらへ載せ替えたいです。 具体的にはWorkflowの設定が細かくできるようになって自動化できそうになったら移行します。 projects(beta)について Issueをトラッキングできるシート機能で、パブリックベータ版として一部機能が利用できるようになっています。 Organizationの下にあるProjectsページで新しいprojects(beta)を作りましょう。 ISSUEのインポート機能が現状はないのでISSUE側からポチポチ紐付けていきます。 ISSUEを紐づけるとスプレッドシートが展開されます。 デフォルトで * Title * Assignees * Status が表示されます。 ここでいうStatusはこのprojects(beta)で扱うデータになります。 デフォルトで * Todo * In Progress *
YukiOzasa
YukiOzasa
2 min read

GORMのCreate V2

こんにちは、Anti-Pattern Inc.の塚本です。 弊社では自社サービスの開発でGORMを使用しています。 V2の機能で関連するレコードも一度に登録できるようなので、試してみました。 例えば、この様なデータ構造です。ユーザはスキル情報を持っています type userDTO struct { gorm.Model Name string Email *string Skills skillDTOs `gorm:"foreignKey:UserID"` } type skillDTO struct { gorm.Model UserID uint64 Name string } ユーザ情報、スキル情報を設定してCreateを実行します user := userDTO{ Name: "testUser", Email: func() *string { s := "test@test.com"; return &s }(), Skills: []skillDTO{ {Name: "skill1"}, {Name: "skill
takeshi tsukamoto
takeshi tsukamoto
2 min read
OpenAPI, Go, golang

OpenAPIのサーバーでインテグレーションテストを書く

自社のサービスではOpenAPIを使ってサーバーを書いています。 https://swagger.io/specification/ ほぼ全てのエンドポイントに影響のあるリファクタリングをした時に、動作確認が辛すぎたのでインテグレーションテストを書くことにしました。 できたものは以下になります。 integration-test/integration_test at main · yutakahashi114/integration-test Contribute to yutakahashi114/integration-test development by creating an account on GitHub.GitHubyutakahashi114 [https://github.com/yutakahashi114/integration-test/tree/main/integration_test] 以下、簡単に説明を書いていきます。 サンプルアプリケーション 以下のschemaを元にサーバーを実装します。ユーザーの一覧取得、ID指定の取得、登録、更
Yu Takahashi
Yu Takahashi
10 min read
Shopify, Shopify Theme, ThemeKit

Shopifyのローカル開発環境を準備する(Mac)

ローカル開発環境を準備することが何回かあったため手順をまとめます 2021年6月に発表されたShopifyCLIではなく、ThemeKitでの手順です。 online Store2.0を使用している場合はShopifyCLIを使用してください。 ThemeKit 1.3.0 darwin/amd64 Shopify接続するためのAPIキー・パスワードを生成する アプリ管理 ↓ プライベートアプリを管理する ↓ 新しいプライベートアプリを作成する 必要事項を入力して権限を付与する 非アクティブなAdmin API権限を表示する ↓ テーマテンプレートとアセットを表示または管理する 「読み取りおよび書き込み」を選択 保存する ↓ アプリを作成する これでAPIキー、パスワードが生成されます ThemeKitをインストールする $ brew tap shopify/shopify $ brew install themekit brew tapでshopifyが公開しているリポジトリをインストールできるようにする テーマをダウンロードする すでにShopifyアカウント内に存在する
Ami Yamamoto
Ami Yamamoto
2 min read

ECS Fargate でコンテナ間通信

ローカル環境でdocker composeを使って開発していた環境を、 AWSのECS(Fargate)環境で動作させる時に、 コンテナ間の通信をどう設定するのか迷って調べたのでその時のメモです。 構成はNginx、php-fpmを使った環境で、設定ファイルは以下となります。 version: '3' services: nginx: build: ./nginx ports: - "80:80" depends_on: - phpfpm phpfpm: build: ./phpfpm FROM nginx COPY default.conf /etc/nginx/conf.d/default.conf server { listen 80; root /var/www/html; index index.php index.html; access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log; lo
yuichi.kotani
yuichi.kotani
3 min read
AWS, Proton, DevOps

AWS Proton を使って快適に開発をしたいのです!

いつもお世話になっております。株式会社アンチパターンの矢ヶ崎です。 さて、今回は AWS Proton について書いてみたいと思います。まだ日本語の情報も少なく、あまり有名になっていない気がするサービスですが、日本のエンジニアリングの状況にとってもマッチしている気がしていますので、活用が進むといいな〜と思っております。 開発と運用・アプリとインフラの各チームの関係性 よく DevOps という言葉を聞く場面があるかと思います。雑に言うと、開発(Dev)・運用(Ops)の垣根をなくそうぜ!人的にも組織的にもカルチャー的にもツールやプラクティス的にも!そうするとアジリティが上がるからいろいろいいぜ!みたいな感じです。しかし、さらにアプリとインフラという分けも出てくるので実際の事象は複雑です。 AWS Well-Architected フレームワークでは、運用上の優秀性の柱の組織の領域において、運用モデル 2 x 2 の表現として以下のような4つの運用モデルを示してくれています。 https://docs.aws.amazon.com/ja_jp/wellarchitected/lat
Akihiro YAGASAKI
Akihiro YAGASAKI
6 min read