はじめに この記事はテックタッチアドベントカレンダー12日目の記事です。 こんにちは、QA PM (Quality Assurance Project Manager)のshuttyです。2021年10月に入社して3ヶ月目ですが、非常に濃い時間を過ごしていて、今も入社後2回目のリリースに向けて活動中です。入社エントリーも先日公開していますので、ぜひご覧ください。昨日はバックエンドエンジニアのmisuさんによるチケットモデリングをしてレビュー会してみた話でした。モデリングって難しいんだなぁという感想と、QAとしてはディシジョンテーブルを書きたくなる内容でした。 この記事では専任の1人目QAとして参画して、2ヶ月でやってきたこととこれからやっていくことを紹介します。 はじめに バグチケットの分析・可視化 ラベルをつける ラベルの認識を合わせる 集計・分析する E2Eテストの準備 スコープを決め

テックタッチアドベントカレンダー 13 日目を担当する taisa です。少しずつ減らしていった体重が 2 ヶ月で 6 kg リバウンドして完全に元に戻りました。 さて今年、AWS CDK v2 の開発者プレビューで Go を使えるようになり、CDK for Terraform でも Go を実験的（experimental）に使えるようになりました。 これらは、まだ開発者プレビューや実験的であるため本番においては投入できませんが、アドベントカレンダーをきっかけに触ってみました。また他にも Go が利用できる IaC（Infrastructure as Code） プラットフォームとして Pulumi があるので合わせて触ってみました。 aws.amazon.com www.hashicorp.com www.pulumi.com 各フレームワーク・ライブラリの概要 AWS CDK CDK

この記事はテックタッチアドベントカレンダー9日目の記事です。 こんにちは、バックエンドエンジニアのcanalun(twitter: @i_am_canalun_)こと佐藤可奈留です！ 最近はいまさらマンガでナルトを読んで、ストーリーはもちろん、コマ割りやカメラワークがもたらす演出の妙に感銘を受けました！ナルト、めちゃくちゃ面白いですね！？面白すぎて、気に入った戦闘シーンはアニメでも確認しています🥷ﾆﾝﾆﾝ! この記事の内容と目的 注意点 そもそも業務内容はどう違うのか 働き方についてどのような違いを感じるか 成果物の仮説性 作業時間の見積もり方 コミュニケーションと作業のバランス 知の在り方 おわりに この記事の内容と目的 さて、ナルトの話は置いておいて。 本稿では、2ヶ月前まで経営コンサルタントとして働いていた私が、エンジニアとして働く中で感じたエンジニアとコンサルタントの仕事の違いに

この記事はテックタッチアドベントカレンダー 8 日目の記事です。 フロントエンドエンジニアの taka です。Amazon Black Friday でフットウォーマーを買ったのですが、冷え性の自分には最高でした。冷え性の方には是非使ってみてもらいたいです。 今回は、モダンなツールである Playwright と Puppeteer、Cypress を実際に触ってみたので、そこから得られた知見を紹介したいと思います。 要件の整理 一般的な要件 テックタッチ特有の要件 機能ごとの比較 テストツールの有無 複数タブ / ウィンドウ ShadowDOM ブラウザ拡張 要素の特定 スクリーンショット 動画 実行速度 まとめ 要件の整理 テックタッチはブラウザ拡張であるため、一般的な Web アプリケーションとは少し要件が異なってきます。以下に、一般的な要件とテックタッチ特有の要件を書き出しました。

この記事はテックタッチアドベントカレンダー7日目の記事です。 こんにちは、フロントエンドエンジニアの tsune です。 みなさんは年末といえば何を連想しますか？僕はお笑いが好きなので、今年の M-1 は誰が優勝するかな〜？とワクワクしています。個人的にはオズワルド推しなので頑張ってもらいたいです！ さて、本日の記事では僕が作った SlackBot について紹介したいと思います。 どんな Bot なの？ アーキテクチャ heroku firebase SlackBot にまつわるフレームワーク Bolt BlockKit おわりに どんな Bot なの？ 冒頭でも書いたとおり僕はお笑いが好きなので、会社の人と大喜利がしたくてしたくてたまりませんでした。その夢を叶えるために社内コミュニケーションツールの一環として作成したのが、今回紹介する Slack 上で大喜利ができるようになる Bot で

この記事はテックタッチアドベントカレンダー3日目の記事です。 プロダクトマネージャーの zak です。皆さん、ブラックフライデーでは何を買いましたか？私はflexispotのエアロバイク付きのチェアを購入しました。来年の今頃に「買ってよかった」と言えるようにバリバリ漕ぎたいです。 さて、昨日の記事 tech.techtouch.jp の続編です。 定例会議も スムーズに 弊社では、「ちょっと話したい」というアドホックなコミュニケーションだけでなく、予め予定が決まっているミーティングでも Tandem を利用しています。 Googleカレンダー連携で会議場所に直行できる Googleカレンダーに登録した情報を元に、Tandem 上にミーティング部屋が自動的に作成されます。参加者は開始時間にそこへ集まるだけでOKです。また、Googleカレンダー上に設定してある情報を元に、Google Mee

この記事はテックタッチアドベントカレンダー４日目を担当する misu です。最近ミニマリストに興味が出て、より少ない生き方という本を読んでいます。モノを減らすと豊かになるらしいです。 この記事について 前提 ペアプロの目的 ペアプロの進め方 １人作業と比較してのペアプロのよさ オンラインでのペアプロセットアップ オフラインでもやってみた まとめ この記事について リモートでペアプログラミングをするにあたっての設定やペアプログラミング（以下、ペアプロ）自体のメリットなどを紹介します。 前提 今回ペアで作業する misu と同僚はペアプロ初めて エディタは Code (Visual Studio Code)。 開発言語は Go。インフラ設定で Cloudformation。 同僚は入社したばかりでプロダクションコードに詳しくない。misu は 2 年在籍なのでコードの見通しはつく。 ペアプロの

テックタッチアドベントカレンダー6日目の記事です。 エンジニアの roki です。朝ラン愛好家なのですが、今年は初秋にひざを故障してしまい3ヶ月ほどお休みの後、全快とは言えないものの最近復活しました。気がつけば木枯らしが身にしみる季節。体は大事にしたいものです。 この記事では、ブラウザ拡張がPC内の他のプロセスと通信を行うための技術 Native Messaging の概要と、これを使ったデモアプリケーションの紹介をします。 Native Messaging とは manifest ファイルの準備 ブラウザ拡張内の処理 Native messaging プロトコル デバッグ時に気をつけること デモアプリケーション Native Messaging とは Native Messaging を用いると、Web ブラウザとは別に、ユーザーのPCにインストールされたネイティブアプリケーションとブラ

テックタッチアドベントカレンダー 5日目を担当する K です。私は今年4月にテックタッチに入社し、現在PdM/プロダクトオーナーをしております。（入社に至った背景はこちらの入社エントリーにあるので、ご興味ありましたらご覧ください！） 最近は、社内のシャッフルランチで、4日目の記事を担当した misu に自らオススメした『深夜特急』(沢木耕太郎著) を自身でも読み直しており、貧乏旅行に出たくてウズウズしていますww さて本日は、テックタッチプロダクト開発において今年から使い始めたプロダクトマネジメントツール「Productboard」について、その導入理由やこれまでの活用方法について話をしたいと思います。 プロダクトマネジメントツール導入に至った理由 2019年2月にテックタッチ正式版を開始して以来の約2年間、顧客要望や機能開発の要件は、カスタマーサクセスチームでは Spreadsheet

テックタッチのフロントエンドチームです。 今回はテックタッチの機能の表現の幅を広げるために WYSIWYG 機能を実装しました。 本記事では、Draft.js を用いて WYSIWYG 機能をどのように実装したか、どういう難しさがあったかなどを紹介します。 WYSIWYG とは Draft.js とは テックタッチについて WYSIWYG を使って実現したこと 表現力の向上 テックタッチ独自の UI の実現やテックタッチの機能との連携 実際に Draft.js を導入してみて WYSIWYG データの永続化対応 カスタムエレメント対応 画像の対応 サンプルコード ShadowDOM 問題への対応 今後の課題 テスト IME 対応 まとめ WYSIWYG とは WYSIWYG とは、簡単にいうと、 Markdown などの独自記法を用いて、、編集画面とは別画面で文書表現（UI）の設定をするの

この記事はテックタッチアドベントカレンダー1日目の記事です。 フロントエンドエンジニアの kuni です。今年は Vue から React への大規模リファクタリングを完了して開発スピードが向上する、5ヵ月間のスクラムマスター経験でチーム開発への意識が高まる、子供が生まれるなど実りの多い１年でした。 この記事では、今年、自分のチームの日々の開発業務の中で取り入れたプラクティスを紹介します。テックタッチでは1年半ほどリモートワークで開発を進めています。 1. 実装に困った時の駆け込み寺 2. 夕方の定例ミーティングで困りごとを解決 3. 技術スタックごとのチーム定例 まとめ 1. 実装に困った時の駆け込み寺 リモートワークを始めたての時期や新しくジョインしたメンバーがいる時に、「誰かに相談すればすぐに解決することに時間をかけすぎてしまう」という課題がありました。 テックタッチでは tande

テックタッチのバックエンドエンジニアの taisa です。 社内勉強会で、Visual Studio Code（以降 VSCode と記載）ナレッジ共有会を実施したのでその内容を紹介します。 今回の趣旨は「VSCode で各自がよく使う機能やショートカット、ちょっとしたノウハウを共有することで開発効率を向上させたい」というものです。自分自身 VSCode を使いこなせておらず、他のメンバーの使い方に興味がありました。共有会では、みんなで順番に画面共有しながら進めていきました。 コマンドパレット編 シンボル検索編 ショートカット編 最近開いたプロジェクトを開く 最近開いたファイルを開く / ファイルを検索する サイドバーを開く/ 閉じる、パネルを開く/ 閉じる、エクスプローラを開く 指定のエディタに移動する Grep する 特定の文字列を選択して置換する 定義へ移動、直前の場所に戻る、直前の

はじめまして。テックタッチで約1年間、インターンとしてQAエンジニアの仕事をさせていただいた山野井と申します。今回は、この1年間で携わった自動テストについての経験を記したいと思います。 テスト自動化の当初の目標 自動テストのツール - Katalon Studio 工夫1: data 属性での要素特定 工夫2: Xrayとの連携 自動テストの苦悩 複数ブラウザでのテスト プロダクトのバージョンアップによって自動テストが壊れる テストコードの管理 Katalon の難しさ data 属性 最終的な成果物 経験から思ったこと さいごに テスト自動化の当初の目標 僕がインターンとして最初*1に頂いた仕事は、いままで手動で行っていたリリース前の手動テストを自動テストに書き換えるというものでした。テストケースの総数は 1,300 件以上、スプレッドシートにして27シート分ほどでした。このテストケース

フロントエンドエンジニアのshioriです。 テックタッチでは、約1年前からアプリケーションを丸ごと作り直す再設計プロジェクトを進めており、そのタイミングでデザインシステムを導入しました。 この記事では Material-UI を使ったデザインシステム導入の経緯や導入して良かったことなどを紹介したいと思います。 なぜデザインシステムを導入することにしたのか デザインシステムができあがるまでの流れ スタイルの共通化 コンポーネントの実装 Material-UI を使う上で苦労したこと 導入して良かったこと さいごに なぜデザインシステムを導入することにしたのか テックタッチのプロダクトはデザインファーストで開発を行なっています。デザイナーが Figma で UI/UX をデザインし、それをエンジニアが実装するという流れです。 また、テックタッチは Material Design 等のデザイン

この記事はテックタッチアドベントカレンダー21日目の記事です。 プロダクトオーナーの尾崎です。今年のクリスマスは肉のハナマサの冷凍丸鶏をローストチキンにして楽しみました。オーブンさえあれば意外と簡単なのでおすすめです。 おいしく焼けました この記事では、AWS Elasticsearch Serviceへの分析用クエリをSQLで記述し、Redashから利用できるか検証した顛末をご紹介します。 背景 テックタッチではデータストアとしてMySQL, AWS Elasticsearch Service、BIツールとして Redashを利用*1しています。 私自身も各種分析のためにクエリを書くことがあるのですが、Elasticsearchのクエリになかなか馴染むことが出来ず、毎回それなりに時間をかけて*2クエリを書いているため、より効率的に業務を進めるためにリサーチすることにしました。 Open

この記事はテックタッチアドベントカレンダー19日目の記事です。 デザイナーの大吉（おおよし）です。 ここ1年、ギターを手にとる回数よりもダンベルを手にとる回数のほうが圧倒的に多くなってきました。 10代の頃の自分が知ったらびっくりすると思います。 高校生の頃の僕は Red Hot Chili Peppers が大好きで、アメリカのミュージシャンはみんな筋肉ムキムキで体もデカい、それなのに何故あんな繊細な音楽が作れるんだろう？といつも頭を抱えていました。 でも最近は、全盛期のシュワちゃんと比較するとやっぱり小さく見えるよな、という整理に落ち着きました。 それでは参ります。 はじめに 現在のテックタッチのロゴについて なぜリニューアルしようとしたのか リニューアルに失敗した理由 最後に はじめに 当記事では、現在のテックタッチのロゴの由来と、それのリニューアルに踏み切った経緯、そしてリニューア

この記事はテックタッチアドベントカレンダー 17 日目の記事です。 SRE チームの taisa です。韓国ドラマの「スタートアップ」が最近 Netflix で最終話までみれるようになりましたね。最近はぼちぼち来年の抱負を考えるようになりました。懲りずにまた英語をやろうかと考え中です。 今回は「GORM v2 触ってみた Major Features 編」の続きで「Breaking Changes 編」です。 GORM v2 リリースノート Breaking Changes Tags Soft Delete BlockGlobalUpdate ErrRecordNotFound Updating with struct Migrator Count Transactions まとめ GORM v2 リリースノート 1 系から移行する場合は少なくともこちらにある内容の対応をする必要があります

この記事はテックタッチアドベントカレンダー16日目の記事です。 15日目は terunuma サンによる Chrome 拡張の Overview of Manifest V3 を翻訳しました でした。Greasemonkey 黄金期の牧歌的な時代を過ごしてきた身なので、ブラウザの拡張がどんどん肩身が狭くなっていくのは少し寂しかったりします。セキュリティ上仕方ないということなのかもしれませんが。 エンジニアの jigsaw です。今夏からパートタイムでテックタッチさんのお手伝いをしています。もうすぐ人生初のマイカーが納車されるので、今からどこへ行こうか考えながら床につく日々を送っています。 テックタッチでのガイド等を作成するウェブページ(いわゆる管理画面)は Nuxt で作られていました。ブラウザの拡張が Vue で書かれていたので当然のチョイスといえます。しかし、拡張が React ベース

この記事はテックタッチアドベントカレンダー15日目の記事です。 14日目は kenyu による 開発組織におけるマネージャの責務を分解し、チーム運用してみる でした。 SET の @terunuma です。買い過ぎたパスタを有効活用しようと重曹（かん水の代用）で茹でたところ、ストレートな中華麺を生成することに成功しました。魚介系醤油のスープとの相性が抜群に良いです。 今年の12月9日（現地時間）に米Googleより「Google Chrome 88」ベータ版で“Manifest V3”が利用可能になったとの発表がありました。（ニュース: 窓の杜、記事: Chromium Blog）。 これに先駆けて、11月2日に「Overview of Manifest V3」が公開されています。この記事を日本語に翻訳したものを以下に記します。 弊社プロダクトでも主な提供方式の一つとして Chrome 拡

この記事はテックタッチアドベントカレンダー13日目の記事です。 SREチームの taisa です。韓国ドラマにハマっていましたが、沢山みたので結構満足しました。最近は「よくおごってくれる綺麗なお姉さん」をみました。 今回は、前回の「GORM v2 触ってみた Major Features 編」で触れられなかった Prometheus 連携機能について書きます。 SRE 本を読んでいると Borgmon という Google 内部で利用されているモニタリングツールがよく出てきます。気になるものの Borgmon 自体は使えませんが、Prometheus は Borgmon をルーツとして元グーグルのエンジニアが作った OSS で、Borgmon に似た機能を持っているようです。触ってみたい気持ちが高まります。 ドキュメント Prometheus をセットアップする GORM v2 の Pro