TwitterFacebookRSS Feed

Anti-Pattern Inc. Engineering Blog

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

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
GCP, Cloud Run, Go, always-on CPU

ついにCloud Run に always-on CPUが登場したぞ!!

※まだプレビュー版です(2021/09/18) Cloud Run gets always-on CPU allocation | Google Cloud BlogNew always-on CPU allocation for Cloud Run opens the doors to running workloads that use background processes.Google Cloud BlogSteren Giannini Senior Product Manager [https://cloud.google.com/blog/products/serverless/cloud-run-gets-always-on-cpu-allocation] 今まではRequestがきてからResponseを返すまでCPUの割当がされていました。しかしそれでは下記のSlackのような3秒以内レスポンスを返す必要があるケースにて困ることが多々有りました。基本的にこのようなAPIはレスポンスを先に返してしまい、あとで別途非同期で処理を実行するという形で対応していましたが、そ
Kohei Kondo
Kohei Kondo
5 min read

VSCodeでjestのスナップショットの簡易スニペットを作成

こんにちは、いわむらです 今回はタイトルにある通り、VSCodeでjestのスナップショットの簡易スニペットを作成してみようかと思います 自社のフロントエンド開発で新規コンポーネントには最低限のテストとして、スナップショットの作成が必須でして、新規コンポーネントを作成する時に毎回新しいテストを作成するのですが、基本的にはimport文などは共通だったりするので他のファイルからコピペしてました もう少し便利にできないかなと思っていたので今回初めてだったのですがスニペットを作成してみようと思い作成してみました 今回のスニペット作成環境は以下のバージョンで確認しました vscode: 1.58 nuxt: 2.14 jest: 27.0 typescript: 4.1 まず cmd + shift + pでコマンドパレットが開くのでそこで user snippetsと検索しましょう そうすると添付するキャプチャのように選択肢が絞られると思います 「Preferences: Configure User Snippets」を選択すると更にVSCodeを利用する時に必ず適応させる
Jun Iwamura
Jun Iwamura
2 min read
Go, golang, gomock

gomockでスライスのMatcherを作る

gomockでスライスを順不同で一致させるためにMatcherを自作しました。 ※追記 v1.6.0 から InAnyOrder というMatcherが用意されているので、不要になりました。 gomock package - github.com/golang/mock/gomock - pkg.go.devGo [https://pkg.go.dev/github.com/golang/mock/gomock#InAnyOrder]gomock GolangでUTを書く際に使います。 GitHub - golang/mock: GoMock is a mocking framework for the Go programming language.GoMock is a mocking framework for the Go programming language. - GitHub - golang/mock: GoMock is a mocking framework for the Go programming language. GitHubgolang [htt
Yu Takahashi
Yu Takahashi
3 min read
Slack

Slackのサイドバーをカスタマイズして使いやすく!

Slackの参加チャンネルが増えてきて、サイドバーがごちゃごちゃしてるのが嫌!もっと見やすくしたい!と思ったので、カスタムセクションや環境設定をいじってサイドバーを整理してみました。 整理する前 一番よく使うチャンネルは「スター付き」配下に、それ以外のチャンネルは「チャンネル」配下に、アルファベット順でただ並べている状態。 参加チャンネルが多くサイドバーが長い為、未読メッセージの確認をする時によくスクロールしてました... 整理した後 ①頻繁に投稿するチャンネルを「スター付き」配下に移動し、よく覗くチャンネルのみ「チャンネル」配下に入れるよう変更 (それ以外のチャンネルはカスタムセクションへ=>②) ②それ以外のチャンネル(=たまに覗けば良いチャンネル)は、ほぼミュートにして、部門や内容毎に「カスタムセクション」を作成、チャンネルの並べ替え設定で最近のアクティビティが上位に来るように設定 普段はカスタムセクションを閉じておけば邪魔にならないし、たまにカスタムセクション内を覗く時も、最近投稿があったチャンネルが上位に表示されるようになったので、上の方の動きのあるチャンネルだけチ
Sumomo Moriguchi
Sumomo Moriguchi
2 min read
gulp, Pug

gulp-sitemapを使ってsitemap生成を自動化する

やりたいこと ページが追加される度にsitemap.xmlをいちいち手入れするのは面倒なので自動化したい。 対象サイトの状況 パーツを共通化したかったのでPug+Scssを使っています。 それをgulpを使ってビルドするようになっています。 元から使っているパッケージ(一部) gulp gulp-pug やったこと gulp-sitemapの導入 ちょうど良さそうなパッケージがあったので利用することにしました。 gulp-sitemapGenerate a search engine friendly sitemap.xml using a Gulp streamnpm [https://www.npmjs.com/package/gulp-sitemap]使い方は見ていただいた通りです。 シンプルな機能なので、基本的には困らないと思いますが、コツはhtmlファイルがビルドされてから動作するようにすることです。そうでないと実行のタイミング次第では抜け漏れが出てしまいます。 今回対象の環境では、アウトプット先を一回空にして、その後各種ファイルをビルドするような処理の流れにして
YukiOzasa
YukiOzasa
1 min read

GitHub GraphQL API を利用してReview のコメントを抽出してみた

こおりやまです 以前、こちらのブログでPull requests のコメント取得しましたが、Reviewコメントが取得できていなくクエリを再検討しました。 GitHub GraphQL API を利用してPull requests のコメントを抽出してみたこおりやまです 以前、こちらのブログでGitHub GraphQL APIをさわってどのような情報を取得できるのか確認していたのですが、Pull requests のコメント取得が必要になりGoogle Apps Script(GAS)から呼び出しスプレッドシートに出力してみました。 GitHub GraphQL API をさわってみた まずは GraphQL API Explorer を利用して必要な情報が取得できるようQuery を検討します。 実行するクエリを作成したら、スクリプトを書いていきます。 書いたコードはこんな感じ (設定情報は環境に合わせて設定して下さい) /*…Anti-Pattern Inc. Engineering BlogHiroki Kooriyama [https://ghost.tech.ant
Hiroki Kooriyama
Hiroki Kooriyama
1 min read
AWS, transfer family, ftp, S3

AWS Transfer Familyで簡単FTPサーバ

FTP???と言われてしまいそうですが、とある案件でシステム間連携をする際にどうしてもFTPで接続したいんです。という要望を頂きまして構築した時のメモです。 DirectConnectで接続した先の環境からのFTP接続なので、通信経路のセキュリティ的な意味ではまあいっか?と。。。こちらで用意したFTPサーバに、システム間連携先のお客様サーバから接続してくるという構成です。 SFTP(もしくはFTPS)に変更してもそんなに工数かからないと思うのですが。SFTPにしちゃえばいいのに。。。というお話はしつつAWS Transfer Familyを使って構築していきます。 サーバを作成を押してインスタンスを作成します。 要件でFTPとなっているので、FTPにチェックを入れて次へ IDプロバイダー(FTPする際のユーザ管理)で、管理は楽にしたいのでサービスマネージドを選ぼうとすると、FTPSとFTPでは選べないと言われます。 早速イライラしながら、DirectoryServiceなんて使ってないので、カスタムを選択します。 カスタムプロバイダー(API GatewayのURL)を聞かれ
yuichi.kotani
yuichi.kotani
5 min read

Nuxt.js2.10+TypeScript環境構成をやってみた

初めまして、あやんです! Nuxt.js2.10+TypeScriptで自社開発をやっていくのでローカルの開発環境を作ってみました! 参考: https://typescript.nuxtjs.org/guide/ https://nuxtjs.org/guide https://www.npmjs.com/package/vue-property-decorator 新しいNuxtプロジェクトを作成しましょう * ターミナルで yarn create nuxt-app <projectName> * 選択肢を選ぶ時にスペース押すと複数を選択することができるので、下記のように設定 作成が終わったらプロジェクトのフォルダーに移動し、yarn devでローカルにデプロイをしてみましょう。 初回設定のデフォルト画面これからTypeScriptの設定を紹介していきます! 1. プロジェクトにTypeScriptのパッケージを追加 yarn add --dev @nuxt/typescript-build 2. プロジェクトの設定 * nuxt.config.jsのbuil
hayes.ayan
hayes.ayan
3 min read

Nuxt.js 2.13 + Firebase

-------------------------------------------------------------------------------- 今回 nuxt バージョン 2.13 のプロジェクトに Firestore と Firebase Hosting の設定をご紹介していきたいと思います! プロジェクトの初期設定で Typescript を選択できるようになったので、より楽になりました! -------------------------------------------------------------------------------- Nuxt.js 2.13+Typescript のプロジェクト初期設定 新しい Nuxt プロジェクトを作成しましょう! InstallationNuxt.js is really easy to get started with. A simple project only needs the nuxt dependency. To get started quickly…nuxtjs.org [htt
hayes.ayan
hayes.ayan
4 min read

NuxtJs2.13 + FirebaseプロジェクトをDockerを使ってコンテナ化

-------------------------------------------------------------------------------- NuxtJs2.13 + FirebaseプロジェクトをDockerのコンテナ化 今回のプロジェクトをDockerのコンテナで管理することにしました。開発環境のためのディレクトリーを作っておきます。 下記のようなディレクトリー構成にしました。 ├── docker ├ ├── node ├── Dockerfile ├ ├── firestore_saver ├── Dockerfile ├ ├── firebase │ ├── firestore │ ├── Dockerfile │ ├── firestore-run.sh │ ├── export ├──firebase-export-metadata.json │─
hayes.ayan
hayes.ayan
5 min read

Firestoreセキュリティルール設定

Firestoreを使うことによってセキュリティールールを設定する必要があります! 基本設定からご説明します firestore.rulesのファイルでルールの管理ができる。ローカル環境でFirestoreのエミュレーターが起動している時に動的に読み込んで更新してくれる。 2020年7月の時点でバージョンは2となっていますが、 Firebaseの公式ドキュメントによるバージョンをチェックしましょう。 Get started with Cloud Firestore Security Rules | FirebaseWith Cloud Firestore Security Rules, you can focus on building a great user experience without having to manage…firebase.google.com [https://firebase.google.com/docs/firestore/security/get-started] FirebaseとGCPで様々なルール設定があるので、スコープを設定するためバ
hayes.ayan
hayes.ayan
2 min read