テックタッチアドベントカレンダー 22 日目を担当する、フロントエンドエンジニアの shoko です。クリスマスが大好きで、12 月に入ってからは毎日うきうきしています！ 本日のテーマは「アクセシビリティ」です。 アクセシビリティとは？ アクセシビリティとは、Web システムやサイトを可能な限り多くの人が利用できるようにすることを意味します。 「可能な限り多くの人」というのは、ハンディキャップを持つ人々だけではなく、さまざまな状況や環境も含まれます。例えば、モバイルデバイスや回線の遅いネットワークを利用する場合、屋外の光が眩しい場所でデバイスを利用する場合、機械の故障でマウスが使えずキーボードで操作する場合…などです。このような状況や環境になることは誰でも考えられることであり、アクセシビリティを改善することは多くの人にとってメリットがあります。 しかし、アクセシビリティに興味を持っても、「

テックタッチアドベントカレンダー21 日目を担当するデザイナーの toshi です。 今年、テックタッチはグッドデザイン賞に応募しました。本記事では、審査でプロダクトの魅力を伝えるために考えた点を紹介します。 特に、二次審査は非公開で 3 日間行われ、いつ審査されるか分からない緊張感がありました。 テックタッチとは？ テックタッチの目指す世界 グッドデザイン賞の5つの理念 テックタッチを伝える 一次審査 二次審査 さいごに テックタッチとは？ 始めに、グッドデザイン賞にエントリーしたテックタッチを紹介します。 テックタッチは、ノーコードであらゆる Web システムに操作ガイドを作成・再生できたり、システムの利用状況などを可視化・分析できます。 テックタッチの目指す世界 すべてのユーザーがシステムを使いこなせる世界に 世の中には、ユーザーの課題を解決する魅力的なサービスが数多くあります。 一

テックタッチアドベントカレンダーの 20 日目を担当させていただく matchy です。 最近は趣味でアプリケーションの UI デザインを Figma で作るのが楽しくてつい時間を忘れてしまいます。 近ごろ Astro や今回紹介する Qwik など、MPA フレームワークの話をよく SNS などで見かけるので、気になり調べてみました。 Qwikとは？ 公式 特徴をまとめてみる ん？ Hydration を使用しない？ Hydration の課題 Resumable という概念 プロジェクト作成をしてみる Qwik City とは 最後に 参考資料 Qwikとは？ builder.io が開発している Web フレームワーク Web サイトやアプリケーションの構築に使用できる SSR ベース 公式 特徴をまとめてみる 約 1 KB の JS で起動できる 最小限のアプリケーションをダウンロ

本稿は、テックタッチアドベントカレンダー 19 日目の記事です。担当は canalun (twitter: @i_am_canalun_) です。 …… Why don't we just... wait here for a little while... see what happens? 「もう少しここで待って、何が起きるか見てみよう」 ―― MacReady, from The Thing(邦題: 遊星からの物体X) 1982年、南極大陸にて基地隊員が得体のしれない物体との死闘を展開。その正体は未だ明らかになっておらず、それ（・・）はひとまず「遊星からの物体X」という名前を与えられた。 残念ながら、南極大陸で未知の怪物と闘うようなチームにとって、これから記されることはまったく役に立たないだろう。 しかし、スタートアップの宇宙を旅する私たちのようなチームからすれば事情は違うはずだ。な

テックタッチアドベントカレンダー 11 日目を担当する、フロントエンドエンジニアの tsune です。今年の M-1 は男性ブランコに期待しています！ さて、テックタッチでは最近 Material-UI の v4 から v5 へのアップデートを実施しました。本記事では、このアップデートで lab から core に移り本番利用しやすくなった Skeleton コンポーネントを使って、UX がどのように変化するのか見ていきたいと思います👀 Skeleton コンポーネントとは？ 期待されるメリット デモ おわりに Skeleton コンポーネントとは？ Skeleton サンプル(公式ドキュメントより抜粋) 画像のように、コンテンツを読み込んでいる状態をユーザーに伝えるためのコンポーネントです。みなさんも普段使っているアプリケーションで似たようなものを見たことがあるのではないでしょうか？

エンジニアリングマネージャーのkobaanです この間「葬送のフリーレン」を７巻まで一気読みしましたが、しっかりと各人物に背景が作り込まれてて、モブキャラがおらず、使い捨てられてないのがすごくよかったです。 今更感がありますが2022の個人的ベスト漫画に躍り出てます。 スプリントゴールに感じていた課題感 スクラムガイドでの定義 スプリントゴールに必要な要素 スクラム３本柱の実現 スプリントゴールに求めたい価値基準を満たす スプリントゴールの作り方 手順 スプリントゴールのフォーマット例 短期（スプリント期間内）で成果が出せる： 短期（スプリント期間内）で成果が出せない： テックタッチ流スプリントゴールのチェックリスト 策定後のスプリントゴールの扱い 最後に スプリントゴールに感じていた課題感 唐突ですがスプリントゴールってみなさんどう設定されていますか？ 我々もなんとなくスプリントゴールを

はじめに Go Secure Coding Practice とは コンテンツ一覧 良かったところ 注意すべきところ 最後に はじめに こんにちは。SRE の izzii です。 テックタッチのエンジニア規模もそれなりに拡大し、若手の採用も進んできたため、セキュアコーディングを徹底していきたいという思いがあり、まずは意識改革ということで勉強会を実施しました。セキュアコーディングを目的とした場合には教育だけでなく Static application security testing (SAST) の導入といった方法もあるのですが、まずは自分を含めた開発メンバーにノウハウをインストールすることにしました。セキュアコーディングへの意識が高まれば、いづれ SAST の導入の際に抵抗感も少ないだろうと考えています。いきなり SAST を導入しても、誤検知が煩くて浸透しないリスクもありうると考えてい

みなさん、こんにちは。エンジニアリングマネージャーの Kobaan です。 最近、急に腕時計が欲しくなったのですが、腕時計（スマートウォッチ含）はしょっちゅう紛失する前科があるため、高級ではないけどしっかりして、かと言って安っぽくない腕時計を探したのですが、結果として CASIO の Databank で満足しきりの今日このごろです。 なぜこの記事を書いたか 先日社内ハッカソン（通称 HackTouch ）を実施したのですが、内容的にも面白かったので、実際にどのように準備し、どんな案件をやっていったのか？を振り返りも兼ねて雰囲気がわかるようにご紹介していきたいと思います。 なぜこの記事を書いたか きっかけ 何をやるべきか？エンジニアリングマネージャー・スクラムマスターとしての悩み 社内ハッカソンの計画を立てて準備をする 当日のようす ハッカソンテーマと発表 チーム A　社内用語を管理してく

みなさん、こんにちは。エンジニアリングマネージャーの Kobaan です。 最近チェアのせいか腰が痛いため、オフィスチェアを研究しているのですが、お値段が天井で選ぶのに困り果てています。何かおすすめがあったらおしえてください。 前回アドベントカレンダーで書き残したことの続きです。 リリーストレインを使ってデリバリーマネジメントを行うことで非常に楽になってきたので、せっかくなので記事にしようかなと思って筆を取りました。 リリーストレインを行うきっかけ これはわかりやすくて、以前は１チームの開発物しかリリースプロセスに乗らなかったので、割とうまくいっていたのですが、会社が拡大するうちに 複数の機能開発アウトプットをリリースプロセスに載せる必要があった Biz チームからリリースタイミングの未来日付が求められるようになった などがあり、お客様にプロダクトを届けるまでをしっかりマネジメントするとい

テックタッチアドベントカレンダー21日目の記事です。 CSE の kirai です。皆様、昨日の Kobaan さんのテックタッチに入社後１ヶ月でSRE部隊を作った話はもう読まれましたか？ 。 普段から協働が多い SRE チームのお話になるので、是非読んで頂けると幸いです。 この記事では、Techtouch の1人目の Customer Success Engineer ( 以下 CSE ) として入社した自分が 、CSE がどんな仕事をしているのか簡単に紹介したいと思います。 まだまだ世間一般的に CSE という職種が認知されていないため、少しでも参考になればと思い執筆しております。 ※2024年4月追記：サポートに留まらない。テックタッチCSE（CRE）の仕事と魅力を紹介という記事を新たに作成しましたので、是非ご参照ください！ CSE って何？ それで、具体的にどんな仕事をしてるの？

この記事はテックタッチアドベントカレンダー18日目の記事です。 はじめまして、テックタッチアドベントカレンダー12月18日担当のyassanですよろしくお願いいたします。 普段は、テックタッチの管理画面を中心に、フロントエンドエンジニアとして業務に携わっています。 本稿では、業務で使用したChart.jsをReactにProviderを使用して組み込んだ際の備忘録として、簡潔にサンプルコードをまとめていきたいと思います。 Chart.jsとReactの間のデータの流れを中心に取り上げていこうと思います。 Chart.js自身のカスタマイズなどは取り扱いません。 主に扱うライブラリに関して 取り扱うライブラリに関して、念の為の補足をいたします。 React Meta（旧Facebook）が開発したユーザーインターフェイス構築のためのJavaScriptライブラリです。 Chart.js Ja

この記事はテックタッチアドベントカレンダー17日目の記事です。 デザイナーの keita です。 先日、社内のメンバー10人くらいで体育館を借りてバスケをしました。バスケ自体はおよそ20年ぶりでしたが、日頃の筋トレのおかげか、3ポイントは昔よりも余裕でゴールに届きました。ゲーム中にはたったの1本しか決まりませんでしたが。来年は、テックタッチのステフィン・カリー、もしくは三井寿と呼ばれるよう、嫌いな下半身の筋トレをがんばろうと思います（シューティング練習しないんかい）。 さて、この記事では「Techtouch User Interface Guidelines」として一旦完成（まだまだブラッシュアップ中）したガイドラインの、作成にまつわるアレコレを紹介します。ぜひ、最後までお付き合いください。 きっかけ 目的 共通言語を定義し、プロダクトの一貫性を保つ どうやって作ったのか デファクトスタン

この記事はテックタッチアドベントカレンダー15日目の記事です。 エンジニアの kenyu です。最近ウェブでもエッジコンピューティングが流行っていますね。AWS の Lambda@Edge や、ちょっと前に発表された Vercel の Edge Functions などなど、エッジでサーバサイドの処理をするのがトレンドになりつつあるのかなと感じています。 そこで気になるのは「RDB などのデータストアとどのように通信すればよいのか？」ということですが、先月 Cloudflare よりエッジから RDB に接続するためのソリューションが発表されました。 せっかくなのでどんな感じか試してみたいと思います！ 引用元：Relational Database Connectorsのご紹介 イメージはこんな感じ。tunnel ごしに Worker と RDB がつながるイメージですね。 今回は Clo

エンジニアの macchii です。この記事はテックタッチアドベントカレンダー 14 日目の記事です。 テックタッチでは React を利用して WEB フロントエンドを開発しています。あわせて、リモートデータの取得、更新、キャッシングには React Query を導入しています。本記事では、簡単なタスク管理アプリを題材に、「React Query の再レンダリングを最適化するテクニック」紹介します。 ja.reactjs.org react-query.tanstack.com TL;DR はじめに React Query は取得データを厳密に比較（deep compare）する 参照していないプロパティの変更でも再レンダリングが発生する notifyOnChangeProps オプション select オプション まとめ TL;DR React Query は取得データを厳密に比較（

テックタッチアドベントカレンダー 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 で

テックタッチアドベントカレンダー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