こんにちは。Eight事業部で主にフロントエンドを担当している青山です。 今回はEightのWebフロントエンドコンポーネント集にVisual Regression Testingを導入した事例を紹介します。 他社さんの事例や勉強会を見るに敷居も下がってきているようで、遅ればせながらDX(開発者体験)向上を見据えて環境を構築していきました。 Visual Regression Testing とは Visual Regression Testing (以下、VRT) は日本語で画像回帰テストと呼ばれています。対象の修正前後の画像を比較し、差分がないこと、もしくは差分が正しいことをチェックします。 GUIアプリケーションの場合、最終的にユーザーが触れるのは画面であり、この状態をスナップショットでチェックできるのはとても安心できるものだと思います。 Eightのコンポーネント集 今回導入対象と

はじめに Wordpressサーバーを運用するにあたり、セキュリティー対策として、AWS　WAFを導入する機会があったのですが、思わぬエラーが出たため、書き留めます。 環境構築図 WAFの概要 流れ WAFの導入 導入直後、サイト閲覧 導入後、画像アップロード時、エラー uploadのパスのみ、コアルールセットを適用しない方法 導入後、問い合わせフォームでのエラー ログの保存方法 WAFの導入 WAFの導入方法についてはこちらの記事を参考にしてください。 ルールの詳細はこちら 導入方法でも説明されていますが、WAF導入時は必ずCountアクションに設定してください。 正しくWordPressのサイトを閲覧していても、どこかでBLOCKされる可能性があります。 私が今回導入したルールは、こちらです。 Wordpress application SQL database PHP applica

CX事業本部@大阪の岩田です。 API GatewayのHTTP APIがついにGAされました。 [アップデート] より高速に！より低コストに！プライベート統合も可能に！API Gateway の HTTP API が GA されました！ HTTP APIの魅力的な機能の1つとしてJWT オーソライザーが挙げられます。REST APIではCognitoユーザープール以外の認証プロバイダを利用する場合はLambdaオーソライザー(カスタムオーソライザー)が必要でしたが、HTTP APIではLambdaの実装無しにCognitoユーザープール以外の認証プロバイダが利用可能です。 Amazon API Gatewayの新機能「HTTP API」のJWT Authorizersを理解する #reinvent REST APIではCognitoユーザープールがある意味「特別扱い」されていたのですが、

こんにちは、うさみ(@tadsan)です。標記の通り、ピクシブ株式会社はThe PHP Foundation(@ThePHPF)への継続的な財政支援を開始しました。 opencollective.com 支援額は月間1000ドル、年間で12000ドルになる計画です。 PHPは言わずと知れたオープンソースのプログラミング言語処理系であり、誰もが無料で自由に利用できます。そのため、多くの個人ホームページ、ウェブサイト、百科事典、ゲームのAPIサーバー、広告システム、大規模な業務システムに至るまで世界中の多くのプログラムがPHPで稼動しています。 西暦2000年前後においてはLinux, Apache (HTTP Server), MySQL, P* (Perl, PHP, PythonなどPから始まるプログラミング言語)による構成はLAMPスタックと呼ばれ、無料のソフトウェアの組み合せによって

はじめに 私事ですが11月12日に結婚式をあげました。 私達夫婦はよく一緒にアプリを作っているので、今回もなにか一緒に作れないかと思い、余興のクイズアプリを作ることにしました。 ついでに席札もQRコードにして、webアプリ内でメッセージも入れれるようにしました。 作ったもの ユーザーに配布用のサイトと、披露宴会場で投影する用のサイトの２つを作りました。 ユーザーに配布用のサイト 当日はこういう↓感じの席札を用意しました。 この席札は名刺サイズで印刷して一人ひとりラミネートしたのですが、地味に大変な作業でした。 QRコードを読み取ると、以下DEMO動画のようなサイトが現れます。 ちなみにクイズに関してはスクリーンに問題が表示されるまでは回答できないようになっています。（DEMO動画では省略） ページの表示速度を上げたかったので、uuid、名前、メッセージ等に関してはcsvでダウンロードしてか

大分時間が経ってしまいましたが、2022/8/31 に開催された stand.fm 主催の TECH STAND #9 GitHub イベントに参加しました。 その際に呟いたやつが今回の記事の内容です 有り難いことに直ぐにフォロー頂きました。 あまり纏まった記事が見当たらなかったので、自分用のメモとしてまとめます。 他のCIにはあったアレ GitHub Actionsを利用する前は、TravisCIやCircleCIを利用していました。 移行してから随分使ってないので、記憶が定かではないのですが という機能が標準であった気がします。 この機能の名前は何と呼ぶのでしょうか？地味だけれども、ないと困るアレですｗ GitHub Actionsのリリース直後にこちらの機能と [ci skip] が使えずに後発なサービスなのにーと不満を覚えていました。 その後にアレの機能を実装したカスタムアクション

こんにちは、kintone.comのバックエンドエンジニアをしている@ueokandeです。 いきなりですが、メールって難しいですよね。 普段HTTPに慣れていると、メール周りのプロトコルの理解は難しく、トラブルにも見舞われることも少なくないです。 またメールプロトコルの性質上、メールを送った後にもトラブルは起こりがちです。 グローバル向けkintone.comはAWSで運用しており、メールの機能はAmazon Simple Email Service（SES）を利用しています。 この記事ではkintone.comのメール基盤の全貌と、Amazon SESを利用する上での運用プラクティスを紹介します。 kintone.comとメール kintone.comでは、ユーザーの招待やkintone上の更新を知らせるためにメールを利用し、メール送信は重要な機能の1つです。 kintone.comは

クリエイティブ関連のAIサービスを手掛けるラディウス・ファイブ（東京都新宿区）は8月29日、AIイラストメーカー「mimic」（ミミック）β版の提供を開始した。同じイラストレーターが描いた15枚程度のイラストをもとに、絵の個性を反映したイラストを無限に生成できるとうたう。 mimicは、イラスト制作の参考資料やSNS／ファンコミュニティなどへの用途を想定したイラスト生成サービス。ディープラーニングを使い、少ない枚数から特定のイラストレーターの個性を捉えることを実現している。通常、サンプル数が少ないと、テイストが偏ったり、品質が低下するなどの問題が出るものの、学習パラメーターを細かく変更しながら多段的に進行させることで解決した。 学習用のイラストをアップロードすると、約2時間程度でAIイラストメーカーが完成する。最小学習枚数は15枚だが、枚数が多いほど精度は向上する。正面を向いている、ヘルメ

Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams Collectives™ on Stack Overflow Find centralized, trusted content and collaborate around the technologies you use most. Learn more about Collectives

はじめに 最近、意図的に「単体テスト」「結合テスト」という呼び方を避け、Google Testing Blogで紹介されてるTest Sizesによる分類（small / medium / large）に従った呼び方でテストを呼んでいる。 この分類方が自分の身の回りに徐々に浸透してきて、実際のチーム内のテスト戦略も一歩進んだ議論ができるようになってきたので、改めてまとめる。 ちなみにこの記事の話は手動で行われるテストではなく、自動テストを対象としているが本質はあまり変わらないと思う。 続き書きました。 akito0107.hatenablog.com 「単体テスト」「結合テスト」という呼び方について ソフトウェア開発に従事していれば必ず聞く言葉だと思う。改めて他のサイトから引用する形で定義をまとめておく。 単体テストとは *1 単体テストとは、プログラムを検証する作業の中でも、プログラムを

「詳解Go言語Webアプリケーション開発」という書籍を執筆し、2022/07/22にC&R研究所様より発売しました。 全国書店やAmazonで購入できます。本記事では本の内容の紹介や執筆経緯、執筆してみての感想など書きます。 https://www.c-r.com/book/detail/1462 本の内容について 本著は大きく分けて二部構成になっています。 第一部は次のようなテーマにまつわるトピックを中心にまとめました。 他の言語を経験していると不思議になるGoの言語仕様 最近Goを始めた方は知らない過去の経緯や歴史的背景 第二部ではGoを用いたWebアプリケーションのコードをハンズオン形式で解説しました。 テストコードを書き段階的な変更を繰り返しながらAPIサーバの実装を試みています。 Docker Composeを使ったローカル開発環境の構築 github.com/cosmtrek/

select ID,@rn := @rn+1 as Rn from IDTable,(select @rn := 0) as Init order by ID; +----+------+ | ID | Rn | +----+------+ | 1 | 1 | | 3 | 2 | | 5 | 3 | | 10 | 4 | | 20 | 5 | | 30 | 6 | | 40 | 7 | +----+------+ マニュアル(日本語)より引用 http://download.nust.na/pub6/mysql/doc/refman/5.1/ja/user-variables.html MySQL 5.1 リファレンスマニュアル :: 8.4 ユーザによって定義された変数 ユーザ変数の評価順序は定義されておらず、与えられたクエリ内の要素に基づいて変更されることがあります。 SELECT @

Production のように、Sentry だけにソースマップを読んでほしい環境がある時の備忘録。 環境、サンプル Node v14.5.0 webpack 5.25.0 @sentry/webpack-plugin 1.14.2 @sentry/react 6.2.2 SaaS 版 Sentry サンプルコードはこちら Sentry ソースマップの扱い ブラウザでソースマップを認識するには、バンドル内にリファレンス用のコメント（pragma）を含めるか、Sourcemap または X-SourceMap ヘッダーを追加する必要がある。 Use a source map - Firefox Developer Tools | MDN SourceMap - HTTP | MDN 一方 Sentry ドキュメントの Source Maps for JavaScript によれば、スタックト

VTeacher 所属の Satomi です。 ※各項目をできるだけ3行以内にまとめています。 （出来る限り短く説明するReactJS入門 に合わせて書いています） 昨年（2021年）くらいから Tailwind CSS の話題が増え出し、最近はReactと一緒に使われる場面が増えてきたと思います（私も昨年から使い始めました）。 Vercel Next.js as the React framework / NextAuth.js for authentication Vercel for deployment PlanetScale as the database (MySQL) Prisma as the ORM for database access Tailwind for CSS styling 👈 本投稿は、React + Tailwind CSS の基礎知識をさらっと確認で

Amazon Web Services ブログ AWS 上のマルチテナント SaaS 環境におけるセキュリティプラクティス この記事は Security practices in AWS multi-tenant SaaS environments を訳したものです。 SaaS (Software-as-a-service) アプリケーションのセキュリティ保護は、すべてのアプリケーションアーキテクトと開発者にとって最優先事項です。複数のテナントによって共有される環境のセキュリティ保護は、特に困難な場合があります。アイデンティティフレームワークとその概念を理解するには時間がかかることがあり、これらの環境でテナント分離を形成するには、さまざまなツールやサービスを深く理解する必要があります。セキュリティはあらゆるソフトウェアアプリケーションの基本要素ですが、SaaS アプリケーションには Saa

ユーザに対して、そのユーザ名のサブドメインやメールアドレスを払い出すWebサービスがあります。 しかし、特定のサブドメインやメールアドレスは特別な用途で使われているものもあります。そのようなサブドメインやメールアドレスを一般ユーザに払い出してしまうと危険です。 現在、IETFでは仕様上利用用途が決められている、それらのラベルをとりまとめる「Dangerous Labels in DNS and E-mail」というdraftが提出されています。 今回はそれを眺めていきます。 （あくまでIETFの取り組みであり、仕様上定義されているものをとりまとめています。クラウドサービスや特定ベンダーで特別利用しているものは現在含まれていません。） サブドメイン ここでとりあげるサブドメインは、利用用途が決まってるため一般ユーザに払い出すべきではありません。(例: mta-sts.example.com)

ブログに画像を貼るのに、保存してリサイズして名前変えて、アップロードして… という作業がめんどくさい。 なので、Gyazo を使っていた。でも、Gyazo を使い続けるのもなんかアレなんで、代替の手段を考えていた。 macOS Monterey に「ショートカット」が入ったので Automator より触りやすいと試していたら、いつの間にか「Gyazo もどき」ができた。 バックエンドに S3、フロントの API サーバー に Cloudflare Workers を使った。 これ、なかなか面白いので紹介する。 デモ 右上のメニューバーより起動できる。 macOS のショートカット 最初に macOS の「ショートカット」アプリをどのように構成しているかを説明する。以下の通りである。 インタラクティブにスクリーンショットを撮る スクリーンショットを1000 x 自動高さ設定 のサイズにサイ

はいさい！ちゅらデータぬオースティンやいびーん！ 今回の記事は筆者に珍しく、技術紹介ではなく、僕の個人的な意見を書きます。あくまでも、自説です。 React自体は画期的で、プログラミング界に貢献したプロジェクトだと思っていますし、完全に否定したいわけではありません。 Reactに対する違和感＝芽生えては大きく育った種 筆者はReactがとても好きでした。JavaScriptが好きになったきっかけもReactでした。何から何までもReactで書き直して、Custom Hooksを作って、refを子部品に渡したり、バリバリ満喫していました。 Vueも仕事の関係で習得せざるを得なくなったのですが、Vueは最高に大嫌いでした。これならReactで書き直してやるぅ！と思ったりも。 Reactについて社内でも導入を推進したり、React入門の勉強会を開いたりもしています。 しかし、そんな筆者は、最近に

Apollo Client は複雑 Apollo Client が向いているケース 一休.com に Apollo Client は必要ないかもしれない では何を使えばいいの？ 複雑なアプリケーションには Apollo を使えばいい？ もう一つのリッチなクライアント、Relay の話 結局、何を使えばいいのか この記事は一休 × 出前館 Frontend Meetup でお話した内容をブログにまとめたものです。 user-first.ikyu.co.jp speakerdeck.com GraphQL クライアントと聞いて一番に思い浮かぶライブラリは何でしょうか？ 多くの方にとっては Apollo Client ではないかと思います。npm trends を見ても Apollo Client のダウンロード数は urql や relay などほかのクライアントと比べ圧倒的です。 実際、一休