はてなブックマーク

こんにちは。フロントエンドエンジニアの shoko です。 昨年から野球観戦にハマり、毎日の楽しみとなっています⚾️ 今回は、キーボード操作時にどの要素がフォーカスされているかをユーザーに明確に伝えるために行ったフォーカスインジケータ改善の試行錯誤をご紹介します。 フォーカスが見えない問題 初期対応：CSSでフォーカスを見える化 新たな課題：背景に埋もれるフォーカス 最終改善：2色構成で視認性UP WCAG解説書・達成方法集からヒントを得る 2色構成のフォーカスインジケータ デフォルトのフォーカスインジケータを使わなかった理由 おわりに フォーカスが見えない問題 Tabキーなどを利用しキーボード操作でフォームやボタンを移動するとき、通常はフォーカスが当たった要素に枠線やハイライトが表示されます。しかし、「テックタッチ」の一部のコンポーネントでは、フォーカスが当たってもスタイルが変わらず、画

1. はじめに 2. なぜドキュメント管理？ 3. AI時代のドキュメント戦略 4. どのようにドキュメント戦略を適用したか？ 5. 導入してみて 6. ドキュメント管理に悩む人へ 7. まとめ 1. はじめに こんにちは。AI Central 事業部にてエンジニアをしております、ぽちぽちです。 AI Central 事業部では新規事業として、お客様の VoC データなどを LLM により構造化し、経営戦略・製品開発戦略等のアクションプランへ落とし込む「AI Central Voice」を開発しています。このようなサービスを作る上で、LLM を製品に組み込むことはもちろん、エンジニア、非エンジニア問わずチーム全員で意識的に LLM を活用し生産性を上げることを意識して、日々業務をこなしております。 今回はAI Central事業部にて、サービスのアーキテクチャやサービス仕様などを記載した開

はじめに テックタッチの SRE チームの tabito です。AWS IaC、Rust、最近は Terraform の AWS Provider の開発へのコミットが趣味になっています。 AWS のサーバーレスサービスの代表格である AWS Lambda。Lambda 関数を開発・運用している方も多いことと思います。 Lambda 関数を開発するときには、AWS にデプロイする前に、ローカルで動作を確認しておきたいものです。Web を検索すると、ローカルでの Lambda 関数の実行方法として、たとえば、以下のような方法が紹介されています。 コンテナイメージを作成して、そのコンテナイメージをローカルで実行する。 AWS SAM を使用して、aws sam local invoke コマンドでローカル実行する。 LocalStack を使用して、ローカル環境で AWS のサービスをエミュレ

取り組みのきっかけ 展示会準備の最適化 新しいプロセス 手応えと課題 AI 活用の模索 デザイナーチームの助言 ツールの検討 Dify で実現する「展示会プランナー AI 」 「展示会プランナー AI」の利用イメージ 実際に使ったマーケチームの声 最後に こんにちは、テックタッチのコミュニケーションデザイナー okiku です。最近収納ケース4箱分の断捨離をしました。身も心も晴れやかです✨ 本記事では、AI を活用してマーケティングチーム（以下マーケチーム）とデザインの協業プロセスをどのように革新したかをお伝えします。AI がすべてを解決するわけではありません。しかし、日々の業務を効率化する強力な後方支援として、その具体的な活用プロセスを深掘りします。 ぜひ最後までお読みいただき、協業プロジェクトのヒントにしていただけたらと思います。 取り組みのきっかけ 展示会準備の最適化 テックタッチの

アイキャッチ画像 はじめに こんにちは。テックタッチ株式会社でカスタマーサクセスエンジニア（ CSE ）チームのマネージャーをしております kirai です。2021年に当社の CSE チームが立ち上がった際の第一号社員として入社し、2023年よりマネージャーを務めています。 この記事では、 CSE チームが内製したナレッジ検索について、その誕生の背景から、構築時の工夫、そして社内に定着するまでの道のりを紹介します。 この記事が、「社内の情報が分散していて探しにくい」「問い合わせ対応を改善したい」「ナレッジベースを整備したいけど、何から始めれば…」「ナレッジ共有ツールへの投資へ踏み切れない」といった課題をお持ちの方に対して、少しでもヒントになれば幸いです。 ナレッジ検索システムを構築しようと思ったきっかけ この記事を読んでいただいている皆様も全く同じ課題感をお持ちかもしれませんが、ビジネス

はじめに テストケース管理の課題とツール導入 スイート単位での整理と優先度の見直し マニュアルテストからUT/ITへ移行 整理の結果と見えてきた成果 おわりに：次への布石 はじめに こんにちは、テックタッチで QA PM をしている shutty です。 この記事は 2024 年 9 月 26 日に開催した PayPay / Rakuten Group / Techtouch - QA Night #1 で発表した リグレッションテスト期間の短縮を目指して の続きです。当時進めていた取り組みが一段落したため、整理してみました。リグレッションテストのテストケース数に課題を感じている方にとって何かしらの解決のヒントになりますと幸いです。 現在テックタッチでは、「リリーストレイン」の考え方に基づいて、開発を進めています。個別開発案件の完了条件には「機能ごとの検証が終了しており、不具合の対応方針

バックエンドエンジニア taisa です。最近腸活によって少しだけ体重が減りました。テックタッチは最近クリーンアーキテクチャにおけるユースケース層の大規模なリニューアルを行いました。本記事では、リニューアルの際に工夫した内容を簡単に紹介します。 はじめに 前提条件 1. ユニットテスト・インテグレーションテストを用いた差分検証 ユニットテストの拡充 インテグレーションテストの拡充 2. 同時実行パターンによる差分検証 同時実行パターンとは AWS AppConfig とは 3. 動的な切り替え機能を利用した段階的な移行 まとめ はじめに テックタッチのバックエンドはクリーンアーキテクチャとドメイン駆動設計（DDD）を組み合わせた構成で開発を進めています。詳細な理由や背景は割愛しますが、開発生産性の向上を目的に、クリーンアーキテクチャにおけるユースケース層のリニューアルを実施しました。その際

はじめに 対象読者 DeepSeek-R1 の学習アルゴリズム 記号の準備 TRPO（Trust Region Policy Optimization） 補題1 補題1の証明 定理1 PPO（Proximal policy optimization algorithms） GRPO（Group Relative Policy Optimization） 不偏推定量(5)の導出 DeepSeek-R1 における GRPO の適用方法 正確さの報酬（Accuracy rewards） フォーマットの報酬（Format rewards） まとめ はじめに こんにちは！ML エンジニアの tsujiyan です。現在 DAP Lab とよばれるチームに配属しており、生成 AI 技術を使ったプロダクト開発に従事しています。 近年、生成AIの急速な発展に伴い、大規模言語モデル（LLM）は自然言語処理の

はじめに バックエンド API のテスト事情 バックエンドのテスト構成（これまでとこれから） テスト構成分類（これまで） テスト構成分類（これから） 「ちょうどいい API テスト」とは API テストに求める価値 実行の容易性 メンテナンスのしやすさ 技術選定のポイント runn の採用理由 Testcontainers の活用 実装例 API サーバー実体 APIテスト runn シナリオ APIテストコード おわりに はじめに バックエンドエンジニアの nome です。花粉症🤧なのでこの時期はリモート仕事の幸せを改めて実感しています。 テックタッチのバックエンドAPIでは、これまでユニットテストと Postman による API 統合テストを中心に自動テストを実施してきましたが、テストカバレッジの不足や実行・メンテナンスコストの課題がありました。 本記事では、これらの課題を解決する

はじめに robots.txt robots.txt の基本 robots.txt の限界 X-Robots-Tag X-Robots-Tag の仕様 X-Robots-Tag と robots.txt の組み合わせに注意 X-Robots-Tag の限界 さいごに 参照 はじめに こんにちは。SRE マネージャーの izzii です。最近会社でオフィスの引越しがありました。前のオフィスはコワーキングスペースで複数社で空間を分割するようなオフィスだったのですが、フロア丸々テックタッチというのが新鮮です！ エレベーターを上がると会社のロゴが大きく見えるのが嬉しい！ さて、私は一年ほど前にウェブセキュリティの文脈でクローラーについて調査することがありました。そこで robots.txt や meta tag に関する不正確であったり古い記事が、検索の上位に紛れ込んでいることに気がつきました。同

はじめに 型安全性と拡張性の両立 宣言マージの活用 宣言マージとは？ 宣言マージを使ってメッセージの型を拡張する 型エイリアスと Generics を使った方法との比較 宣言マージを使うことで実装と型の整合性を担保しやすくなる MUI での宣言マージの活用事例 注意点 VS Code 上の型チェックの表示が tsc の型チェックの結果と異なる場合がある ライブラリ側が空の interface のままだと困ることがある なぜ react-redux ではこのアプローチをやめたのか？ まとめ interface の宣言マージを活用することで はじめに こんにちは！Element チームでフロントエンドを担当している all-user です。 Elementチームとは、テックタッチのプロダクト開発の中でも主にDOMとのインタラクション周りの開発を担当しているチームで、Shadow DOM や i

はじめに 導入背景 Argilla とは なぜ Argilla を選んだか 実現したいこと 設計 実装方針 その他実装における工夫点 今後の課題 まとめ はじめに こんにちは。データエンジニアの acchan です。 現在 DAP Lab とよばれるチームに配属しており、生成 AI 技術を使ったプロダクト開発に従事しています。生成 AI の新たな可能性と課題に挑む私たちの取り組みについて、今回は AI 出力改善のワークフロー構築に Argilla と呼ばれるツールを組み込んだ背景や、具体的な機能などについて紹介します。 導入背景 弊社はノーコードWebシステム改善プラットフォーム「テックタッチ」を展開しています。 この「テックタッチ」に対して、DAP Labでは生成 AI を使った機能（以下、AI 機能）のリリースを控えています。 この機能は「テックタッチ」の利用効率化を目的としたものです

テックタッチでエンジニアリングマネージャーをやっている堀内です。 メンバーが成長を実感できていないという悩みをもつ EM は多いのではないでしょうか。 「成長」はリーダーがチームやメンバーと向き合っていると必ず遭遇する課題だと思っています。 私自身も課題に遭遇し、これまでメンバーの成長を意識してフィードバックすることを心がけてきました。 しかし、弊社プロダクトメンバーはフルリモート体制ということもあり、個々のメンバーが日々どのような言動を行っているかに気を配りきれないことも多々あります。 目立つ発言や行動についてはフィードバックもやりやすいですが、偏りもあるため注意が必要です。 この状態では、成長のためのフィードバックをすることに限界を感じてしまいます。 そこで、メンバーがお互いの成長を願ってフィードバックしあえれば、チームが加速的に成長すると思うようになりました。 もちろん、メンバー間で

フロントエンドエンジニアの 92thunder です。去年北海道旭川市に移住しまして、長らく打ち合わせを続けてきた家が10月にデプロイされたのでQoLが爆上がりしています。 テックタッチではデプロイ頻度を上げるためにテスト自動化に取り組んでいます。テスト自動化をQAエンジニアと進めていくためにテストの分類を策定する取り組みを始めました。この記事では、テックタッチにおけるフロントエンドのテストの分類とそれを策定するにあたって意識したポイントについて説明します。 デプロイ頻度改善のため、テスト自動化に取り組む なぜテストの分類が必要か テストの分類 コンポーネントテスト インテグレーションテスト テストの分類で意識したこと テストサイズを意識してコスパの良い自動テストへ 一般的な分類より、社内でのテストの呼び分けやすさを重視 おわりに デプロイ頻度改善のため、テスト自動化に取り組む テックタッ

はじめに なぜテックタッチはコミュニケーションデザイナーの募集をしたのか プロダクト以外のデザイン依頼が増加 新しいデザイナーの採用 テックタッチがコミュニケーションデザイナーに期待したこと コミュニケーションデザイナーとは 一般的にはどう定義されているか？ まとめてみると 入社後、実際にどんなことをやってる？ コミュニケーションデザイン窓口の運用 代表的な依頼 窓口に記載してもらう主な項目 依頼者とのコミュニケーション どんなコミュニケーションデザイナーを目指している？ 不動の信頼王 らしさの守護神 安心の対話派 おわりに こんにちは、テックタッチのコミュニケーションデザイナー okiku です。 今年走った朝ランの総距離が500kmを超えました🏃‍♀️毎日少しずつでも、積み重ねると結構な距離になりますね。 ちなみに朝ランコースは荒川の土手。広い川と空、そして水門を横目に走るコースはと

バックエンドエンジニア兼万年ダイエッターの taisa です。毎朝子どもの幼稚園バス送りのついでに短距離ダッシュして運動してます。はたから見ると変な人ですが、バスを追っかけるようにダッシュすると幼稚園バスの子どもたちは喜んでくれます。 テックタッチは以前、マイクロサービスの切り直し後に DB 統合を実施しました。本記事では、テックタッチがどういったプロセスで DB 統合を実施したかを紹介します。また、AWS DMS を利用する際に気をつけるポイントについても合わせて紹介します。 マイクロサービス切り直し記事のおさらい なぜ DB 統合したか Before After DB 統合の前提条件 やりたいこと 制約 DB の特徴 サービスの特性 AWS DMS（Database Migration Service）とは どのように DB 統合したか Phase1：DMS でレプリケーションを開始す

始めに 対象者 作成するアプリケーション構成 運用を見据えた構成とは 構成概要 各スタックの説明 ① SampleInfrastructureStack ② SampleContainerRepositoryStack ③ SampleTaskDefinitionStack ④ SampleServiceStack ⑤ SampleServicePreferenceStack ⑥ SamplePipelineStack 動作確認 正常にデプロイが完了する場合のCodeDeployの挙動 ロールバックが発生する場合のCodeDeployの動作 終わりに 始めに バックエンドの com です。 テックタッチでは Blue Green Deployment 構成の ECS クラスタを、AWS CDK によるコードで管理しながら本番運用で使っています。 ECS Blue Green Deploym

singleflight とは gin とは Middleware Context ２つの実装例 1. 同期待ち方式 2. 非同期待ち方式 まとめ こんにちは。SRE 兼 テックブログ編集長の izzii です。毎年お盆休みに連泊で登山するのですが今年は台風の影響で行けませんでした。悲しい！ さて、本記事ではパフォーマンス最適化の文脈で登場することの多い singleflight と、ウェブフレームワーク gin を組み合わせた実装例を紹介します。要素技術の概要とモチベーションに触れつつ、試行錯誤についてもお話しします。実装に関しては結局妥協が必要であり正解の形がないので GitHub で公開という形ではなく、ブログを通して自分の考えた２つの実装を紹介することにしました。この記事は Go に関する基礎知識を必要とします。 singleflight とは 複数のスレッド（go routine

テスト管理ツール導入を検討するまでのテストケース管理 テスト管理ツールに必要な機能とは何か？を考えてみた テストのモニタリングとコントロール テスト実装 テスト実行 その他、プロセスを問わない機能 4つのテスト管理ツールを比較した TestRail PractiTest QualityForward Qase Qase に移行して特に良かったこと チケットとテストケースの連携がスムーズだった テスト自動化が進めやすくなった 問い合わせ用のチャットが使いやすい Qase 移行後の課題 バージョンごとの管理ができない キーワード検索でテストスイート名を抽出できない Shared Steps を使いこなせていない おわりに QA エンジニアの mikaty です。 最近、キャベツの芯に砂糖水をあげていたら花が咲きました。 テックタッチでは2023年7月からテスト管理ツールの Qase をスタート

こんにちは、カスタマーサクセスエンジニア（CSE）の komo です。 この記事では CSE の主業務の１つにテクニカルサポートがありまして、それを効率化するために作ったツールの話をします。 具体的には Google Chrome 拡張機能で DevTools に独自パネルを追加して、トラブルシュートに有用な情報を表示させるツールです。実物をそのまま紹介はできないため、ひな形を別途作りました。作り方を書くので、同じようなカスタマー系エンジニアの方々に真似してもらって、役立ててもらえると嬉しいです。 ツールの説明 ひな形からの発展形 作り方 ステップ1：最小の拡張機能を作る ステップ2：パネルを追加する ステップ3：パネルに機能を追加する おまけ：動作確認・キャプチャ取得用に作ったHTMLとJSON おわりに 参考資料 ツールの説明 別途作ったひな形はこんなものです。 通信を監視して、特定の

はじめに なぜ VRT が必要なのか？ VRTとは？ Nx と Playwright で賢く VRT を実施する どう賢く実施したか 結果 まとめ 参考資料 はじめに 「食べログ ラーメン TOKYO 百名店」の全店舗訪問を目指してラーメン巡りを続けているフロントエンドエンジニアの kenshin です。 フロントエンド開発者の皆さん、新機能を追加したり、ライブラリをアップデートした後に UI が予期せず変更されてしまった経験はありませんか？このような問題を素早く検知し、未然に防ぐ方法として、ビジュアルリグレッションテスト（以下、VRT）があります。 この記事では、Nx と Playwright を用いて VRT を効率的に行う方法をご紹介します！ なぜ VRT が必要なのか？ フロントエンド開発では、新機能の追加やライブラリのアップデートにより、予期せぬ UI 変更が発生することがありま

tl;dr はじめに DuckDB とは DuckDB では何が読めるのか 使ってみる S3 上のJSON を読んでみる リレーショナルデータベース 他ツールではなく DuckDB を使うメリット しくじりポイント （特にリリースされたばかりの）バージョンには気をつける S3 のオブジェクト数が多い場合不都合がありがち スレッドの調整が必要な場合も Redshift には未対応 終わりに 付録 MySQL のデータを読み込む例の MySQL 側の準備 tl;dr DuckDB 便利だよ。分析以外でも使えるよ 色々な場所のデータを閲覧・結合できるよ。標準SQLも使えるよ ただし、細かい落とし穴は色々あるので気をつけてね はじめに2023年4月にデータエンジニアとして入社したmin（@not_rogue）です。暖かくなるにつれ、YouTube で見た南伊豆ロングトレイル | 松崎町に行く機運が

こんにちは、プロダクトマネージャーの yujiro です。 最近 Nintendo Switch を購入し、妻と一緒にスーパーマリオをプレイしてます。数少ない共通の話題が増えて嬉しいです。 はじめに 前提：テックタッチはハイタッチCSに支えられている 「 Showcase 」とは 事前準備 開催当日 得られる効果 さいごに はじめに テックタッチではおよそ3ヶ月に1度の間隔で新機能をリリースしており、その際にリリース内容共有会を開催してリリース内容の社内周知を行っています。このリリース内容共有会を社内では「 Showcase 」と呼んでいます。 この「 Showcase 」は、リリース内容の説明に留まらないプロダクトチームとビジネスチームをつなげるユニークなイベントになっています。本記事では、「 Showcase 」を通じてどのように両者の距離を縮め、一体感のあるカルチャーを生み出している

はじめまして、テックタッチで DataEnabling チームのエンジニアマネージャーをしているtaker です。 DataEnabling チームでは、社内の様々な組織のデータ活用をより推進し、プロダクト開発やカスタマサクセスを強化するためデータ基盤の改善や社内からの様々な依頼について日々取り組んでいます。 この記事ではそんな私達のチームが、チーム内でデータに関する知識を共有するプラクティスについて共有させていただくため、一筆したためました。 はじめに 取組内容について 進める上で気をつけている点 実施した結果良かったこと 終わりに はじめに データ活用を進める上では、プロダクトのデータ構造や機能とデータの対応関係について精通している必要があります。 例えば、カスタマーサクセス（CS）から「 xx の機能を有効にしている顧客数を知りたい」という問い合わせがあった際「 xx の機能」が「ど

こんにちは、PdM（プロダクトマネージャー）の shu です。 最近は暖かくなり、散歩が気持ちよくなってきた季節ですね🌸 自分のおすすめの散歩コースは、日比谷駅付近から丸の内方面へ歩いていくコースです。 b8ta Tokyoでおもしろい製品を見て・試してみたり、KITTE の屋上から普段とは違う角度で東京駅をみてみたり、皇居の近くで桜を見てみたりと、「都会と自然」両方を楽しめるコースになっているのでおすすめです。 さて今回は、プロダクトマネジメントチーム（以下PMチームと略します）が取り組んでいる「Product Ops」についてご紹介します。Product Ops は、PMチームが抱える組織課題に対する実践的なアプローチです。その目的は、PMチームの生産性と開発品質を確実に高めていくことにあります。 本記事では、Product Ops の具体的なアプローチや進め方を、できる限り分かりや

バックエンドエンジニア兼万年ダイエッターの taisa です。テックタッチは、以前マイクロサービスからモジュラーモノリスを経て新マイクロサービスへの切り直しを実施しました。本記事では、マイクロサービス・モノリスについて簡単に触れながらテックタッチがどういったプロセスでマイクロサービスの切り直しを実施したかを紹介します。 はじめに マイクロサービスとモノリス マイクロサービスとは マイクロサービスの利点 モノリスとは 単一プロセスモノリス モジュラーモノリス 分散モノリス テックタッチの場合 初期の頃の構成イメージ マイクロサービス切り直し前 特徴 モジュラーモノリス化 サービスの移行 別ドメイン境界でサービス切り直し イベントストーミング マイクロサービス切り直し後 DB 統合へ続く まとめ 参考 追記 はじめに テックタッチは初期の頃からマイクロサービスアーキテクチャを採用していますが、

はじめに CSE とはなにか？ 3年前からテックタッチCSEの役割はどう変わった？ もうすこし整理する もっと業務の詳細を紹介してみたい！ テックタッチにおける不具合対応とは？ 拡張機能の一括配布って何をするの？ 最後に、CSE の魅力とは CSE チームでマネージャーをしている kirai です。 生まれてから35年間住んだ東京を離れ、埼玉に引っ越す事になりました。新たなライフステージを、埼玉で翔んで楽しみたい思っています！ はじめに 2021年に 「CSE って何だ。Techtouch の Customer Success Engineer 職を紹介してみる」 という記事を執筆しました。 あれから3年が経過し、当時とチーム状況や役割の変化、他社でも CRE（Customer Reliability Engineer） や Customer 系エンジニアと、名前は違えど同様の職種の記事や

はじめに デザイナーの toshi です。少しずつ暖かくなり畑仕事も捗ります。（この前、ジャガイモの植え付けとネギを 200 粒蒔きました。おいしく育つといいな 🌱 ） さて、この記事では私のデザインワークを格段に上げる「 Eagle 」とその使い方を紹介できたらと思います。 私は 2018 年頃から Eagle を使い始めてデザインワークの初速が上がったり、画像・素材管理のストレスが確実に減りました。 みなさんは、競合調査やベンチマークにするデザインなど参考にするデータはどのように管理していますか？ ブックマークで管理？キャプチャ画像をフォルダで管理？画像管理アプリで管理？ はじめに なぜベンチマーク管理と参照が大切だと考えているか 時間の有効活用 自分の基準「だけ」で判断しない 質より量でアイデア出しの初速を高める Eagleを使う前 Eagle とは Eagle の使い方 Eagl