サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
tech.techtouch.jp
テックタッチアドベントカレンダー 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」という名前を与えられた。 残念ながら、南極大陸で未知の怪物と闘うようなチームにとって、これから記されることはまったく役に立たないだろう。 しかし、スタートアップの宇宙を旅する私たちのようなチームからすれば事情は違うはずだ。な
テックタッチアドベントカレンダー 18 日目担当の yokochin です。 今年になって JavaScript の新しいランタイムである Bun をよく目にするようになりました。 Node.js、Deno に続く JavaScript ランタイムの新勢力となるわけですが、それぞれどのように違うのか、それぞれが生まれた背景やコンセプトから理解していこう!というのがこの記事の趣旨です。 Node.js 開発の背景 余談:ブロッキングとSSR Node.js の後悔と Deno の登場 Deno のモジュールシステム そのほかの特徴 Bun の登場 Bun のパフォーマンス そのほかの特徴 JS ランタイムの互換性 Deno の Node.js 互換 Bun の Node.js 互換 終わりに Node.js 開発の背景 Node.js は 2009 年にリリースされ、現在最も広く使われている
テックタッチアドベントカレンダー17日目を担当する kenshin です。 今年もあと少しで終わりですね。今年を振り返るのために2022年に食べたラーメンの杯数を数えてみると121杯(執筆時点)でした。年末までにあと何杯食べられるかな。 さて、今回は React18 で追加された useSyncExternalStore を使ってみました。 useSyncExternalStore とは 利用場面 使い方 実際に使ってみよう 最後に useSyncExternalStore とは React18 で新たに追加された React フックです。 React コンポーネントの多くは props、state、context からデータを参照します。 ただし、React 外部のデータソースから値を参照する必要がある場合も存在します。 このような場合、 useSyncExternalStore を使う
テックタッチアドベントカレンダー16日目を担当する、デザイナーの keita です。 私の日課のひとつが NBA 観戦なんですが、今シーズン大活躍中の渡邊雄太選手から目が離せません!ネッツの背番号18のジャージ買って、一緒にブルックリンに応援しに行く人いませんか? はじめに これまでの我々の開発プロセスは、兎にも角にも競合調査が中心でした。 ユーザーの課題を解決するためにはどういうソリューションが必要なのかを検討し、要件が薄ら見え始めた頃、競合他社には同じような機能がないかを調査します。そして UI や技術要件などが固まったら開発スタート!という流れでした。 課題 これまでのプロセスで特に問題ないと思っていたんですが、自分たちが「こうだ!」と自信満々にリリースした機能が、ユーザーの利用シーンを想定しきれていなかったためファーストリリースから芯を食った機能にできなかった、ということがありまし
テックタッチアドベントカレンダー15 日目担当の teru です。今年の個人的ベスト家電はスマートフォンで見れるネットワークカメラでした。子ども達が寝室で寝ている様子を確認しながら家事ができるのでとても便利です。 きっかけ 輪読会の準備 輪読会の実施 やってみてどうだったか 良かった点 気になった点 終わりに きっかけ 13 日目の記事 でも触れているように、弊社でデータ分析基盤のモデリング用途に dbt の利用が始まりました。私の所属する分析運用チームでもこの流れに乗って、dbt を使って分析業務に関わる範囲のデータテーブル構築を自分たち自身で行えるように取り組むことにしました。 分析運用チームには、この記事を書いている時点で私を含む 2 名が在籍していました。二人とも BI ツールを用いて SQL クエリを書いたりレポートを作成したりといったデータアナリストの業務経験はありましたが、d
初めに URL の標準を知るためのポイント あ!やせいの URL がとびだしてきた! ライブラリを比較 validators (Python) regex-weburl.js (Javascript) url.Parse (Go) 最後に 初めに テックタッチアドベントカレンダー 14 日目を担当する izzii です。最近個人 PC の SSD を増設したのですが、CPU やマザボも換装しようかなーなどと考えている今日この頃です。 さて、 Web エンジニアの方ですと、集計処理やセキュリティ運用のために、 URL バリデーション URL エンコーディング URL パース など URL の文字列を操作・評価したことがあるしょう。しかし、抽象化されたライブラリを利用することで、具体的な実装をあまり意識されたことはないのではないでしょうか?というのも自分達で設計した URL を弄る上で壁にぶつ
テックタッチアドベントカレンダー 13 日目を担当しますデータエンジニアの acchan です。 この間完全個室型のサウナに初めて行ってきまして、贅の極みを堪能してきました。みなさんもこの 1 年間頑張ってきた自分のご褒美にいかがでしょうか。 はじめに Elementaryとは チュートリアルをやってみる 下準備 パッケージのインストールと Elementary の初期設定 Elementary テストの追加 テストの実行とレポートの生成 Slack通知を試してみる さいごに はじめに 弊社では最近、データ分析基盤のモデリング用途として dbt を使い始めました。まだ間もないですが、モデルの共同開発が以前より活発になり、導入したことによるメリットが実感として現れつつあります。 しかし、作成されたモデルは本当に正しいデータを持っているのか?定義された指標通りに集計がされているのか?といった品
テックタッチアドベントカレンダー 12 日目を担当する、フロントエンドエンジニアの taka です。 今回は TanStack Query を利用する上でパフォーマンスの問題に遭遇してしまったので、その内容について共有したいと思います。 tl;dr TanStack Query (react query) とは 遭遇したパフォーマンス問題 react query で再描画を抑制するためのポイント object rest destructuring を利用してはいけない プロパティ参照は描画中に行う selector を使って必要なデータのみを参照する おわりに tl;dr useQueryの返り値を非同期処理内で参照してしまっていたのが原因だった react query でパフォーマンス問題に陥らないために、useQuery を利用する際は以下のポイントを抑えておきましょう 返り値のobj
テックタッチアドベントカレンダー 11 日目を担当する、フロントエンドエンジニアの tsune です。今年の M-1 は男性ブランコに期待しています! さて、テックタッチでは最近 Material-UI の v4 から v5 へのアップデートを実施しました。本記事では、このアップデートで lab から core に移り本番利用しやすくなった Skeleton コンポーネントを使って、UX がどのように変化するのか見ていきたいと思います👀 Skeleton コンポーネントとは? 期待されるメリット デモ おわりに Skeleton コンポーネントとは? Skeleton サンプル(公式ドキュメントより抜粋) 画像のように、コンテンツを読み込んでいる状態をユーザーに伝えるためのコンポーネントです。みなさんも普段使っているアプリケーションで似たようなものを見たことがあるのではないでしょうか?
テックタッチアドベントカレンダー9日目を担当する roki です。最近マネージャとして動き始めました。なかなかに難しい仕事ですが学びのある日々を過ごしています。 今回は、一転技術的な話で Go の GC(Garbage Collector)におけるパラメータ GOGC と GOMEMLIMIT(メモリ制限) について学んだことをまとめます。参考にした文書は Go 公式の GC に対するガイドで、Go 1.19 に対するものです。 tip.golang.org GCにまつわるコストを理解するために必要な概念の整理と、GOGC, GOMEMLIMIT がどのような役割を果たすのかを見ていきます。GOGC はメモリの使用量と CPU コストのトレードオフを制御し、GOMEMLIMIT はメモリ使用量に制限を与えます。特に、GOMEMLIMIT は GOGC で調整しにくかったメモリ制限を実現しま
テックタッチアドベントカレンダー 5日目を担当する kirai です。 皆さんの今年の一番のヒット商品はありますか? 自分はMISTELの分離型キーボードでした。 このキーボードを使い始めてから、肩こりがかなり軽減されたので本当おすすめです。 これまでのCSEについて これまで、テックブログで CSE の職種紹介記事や業務で実際に使っているツール紹介記事を執筆してきました。 今回、私がテックタッチの CSE 一人目として入社してから チームにどの様な事があったのか簡単に振り返ってみたいと思います。 CSEの歴史 2021年2月 CSEがテックタッチで誕生する フロントエンジニアとして入社したTさんが社内の要請を受けてCSEとして立ち上がる 2021年4月 CSE採用1人目としてKiraiがテックタッチにジョイン まずは社内外の問合せを集約・対応するエンジニアとしての役割を負う しかし、創立
テックタッチアドベントカレンダー8日目を担当する kenyu です。 今回は Puter という Web ベースの OS 上でアプリをつくってみました。 Puter ってなに? Puter とは Web ブラウザ上で動作するデスクトップ OS のようなサービスです。 puter.com これまでも Web ベースの OS はありましたが、Puter は JavaScript の SDK が提供されており、開発した Web アプリケーションを Puter 上のデスクトップアプリケーションのように使えるところが特徴です。 作成したアプリケーションは他の Puter ユーザーも利用できます。面白そうなのでさっそく試してみました。 とりあえず ToDo アプリつくってみるか ということで、Next.js で ToDo アプリをつくってみます。 なぜ Next.js?React でもよくない?と思わ
こんにちわ! エンジニアリングマネージャーのkobaanです。 本日はアドベントカレンダー4日目です、皆さんはそろそろクリスマスケーキの予約終わりました?今年はケーキにチキンではなく、お寿司で和風に祝いたいなと思っています。 前回はScrumチームを分割したときの話をしましたが、LeSSを採用した経緯とLeSSってなんだと言うのをお話できればと思います。 複数のスクラムチームをうまく回す 調整ポイント 制約 大規模スクラムの検討 LeSSが良かったポイント LeSSで変わること・変わらないこと 今から思う、LeSSに求められる資質 ①開発者のプロセス熟達 ②スクラムマスターのアジャイルコーチ力 ③ボトルネックにならないPO戦略 Ready to scale ! 複数のスクラムチームをうまく回す これ、スクラムに限らず、複数チームを運営することは経験上めちゃくちゃ難易度高いと思っています。
こんにちは、プロダクトマネージャーのzakです。 ブラックフライデーで購入した指紋で解錠できるスマートロックがいい感じで嬉しいです。 本記事では、私が開発した社内用のSlackアプリについて説明します。 なぜ作ったか 現在、テックタッチの従業員は週に1-2日程度の頻度で出社しているのですが、私自身も含めて以下のような悩みがありました。 ※過去の社内アイディアソン/ハッカソンで発表したアイディアの一部です 番宣:テックタッチではハッカソンを定期的に開催しています tech.techtouch.jp また、以下のような事情も合わさり、過去のアイディアを形にしたい思いが再燃してきました。 テックタッチは2022年11月に新しいオフィスへ移転(新橋駅から徒歩3分!)し、出社を促進するためにランチ代を会社が補助する制度(上限、条件あり)が開始されました。 いわゆるアドベントカレンダー駆動開発 何を作
テックタッチアドベントカレンダー 6日目を担当する taisa です。 W杯日本代表惜しかったですね。自分は本田さんの解説と三笘さんのプレーが大好きになりました。 今回は、Kong バージョンや Blue-Green デプロイメントによるバージョンアップについて調べてみたのでまとめてみます。Kong についての詳細は、以前書いた記事「 OSS 版 API Gateway、Kong Gateway をつかってみる」を参照してください。 また、余談ですが先日「デジタル庁が、Kong Gateway を推奨 API ゲートウェイに認定する」といったプレスリリースが出されていました。 prtimes.jp 本記事の目的 CHANGELOG サマリ v1.0.0 v1.1.0 v1.3.0 v1.5.0 v2.0.0 v2.1.0 v2.2.0 v2.4.0 v2.8.0 v3.0.0 Blue-G
テックタッチアドベントカレンダー2日目を担当する misu です。W杯面白いですね。見ていて気持ちがいいので最後までよく走るチームが好きです。 概要 比較 production 導入 クラスタリング スナップショット マルチテナント運用 キャパシティプランニング tips 参考 概要 2022/12 月時点の情報です。version は 0.29.0。 こんな検索体験を提供できるようになる。(公式が提供しているデモデータ(約30,000件)が英語なので頑張って日本語訳した) 検索 API を提供する middleware。以下のような点をウリにしている。特徴より一部抜粋。 高速に検索結果を返す(50ms以下) カスタマイズ可能な検索 ランキング表示を変更できる タイプミスやスペルミスを理解する キーストロークごとに検索ができる。prefix-search 検索クエリをデータセット内の各単語
テックタッチアドベントカレンダー1日目を担当する kuni です。今年もがんばっていきましょー! この記事では、自分が開発で仕様書が重要だと感じている理由や作る上で気をつけていることを紹介します。 テックタッチではエンジニアが仕様書を作成 仕様書を開発の中心に置くべき理由 仕様をまとめる上で気をつけていること 課題・背景を理解する 連絡係にならない おわりに テックタッチではエンジニアが仕様書を作成 テックタッチでは仕様書のことを Product Wiki と呼んでいて社内で使っている Notion 上に記述しています。ここではユーザ目線で対象にしている機能がどのような期待結果をもたらすかについて記述していてエンジニア目線の内部の仕組みなどには触れません。入力項目を確定できない条件やエラーとなる条件なども説明しています。 テックタッチでは、開発している機能にもよりますが多くの場合エンジニア
デザイナーの keita です。この記事では、チームではじめてデザインスプリントを実施したときの様子を紹介します。 デザインスプリントとは なぜやることになったのか 前提・制約 やったこと アイスブレイク 1. 理解 2. 発散 3. 決定 4. 検証 よかったこと 1. 意見交換が活発だった 2. 機能の前提にあるユーザーや課題への共通認識を持てた 3. 開発のモチベーションにつながった 改善ポイント 1. ステークホルダーに参加してもらう、もしくはレビューのタイミングを増やす 2. 時間内にワークを終える意識を持つ 3. 始める前にデザインスプリントの共通認識を持つ機会を作る まとめ デザインスプリントとは デザインスプリントとは、新しいサービスや機能をリリースする際のリスクを減らすことを目的として、Google(現 Alphabet)傘下のベンチャーキャピタル部門である GV(旧 G
チーム分割って難しい エンジニアリングマネージャーのkobaanです ついにフィットするオフィスチェアを手に入れました。KnollのGenerationというプロダクトで背もたれがいい感じに曲がるのでとても重宝しています 今回はScrumチームを分割したときのお話ができればと思います。 チーム人数肥大化によるリスクの顕在化 多人数化したスクラムにおけるイベントの非効率性 案件認知負荷の増大 チーム分割の方針策定 もともとのチーム構成 転機の時 コードレベルまで至らなかったコンポーネントチームの罠 参考)ComponentチームとFeatureチームの違い ユーザーストーリーの特性に合わせたFeatureTeam 考えた結果としてのプロダクト基盤チーム 複数チームの運営 結果はどうだったか? 最後に チーム人数肥大化によるリスクの顕在化 弊社では順調に採用で人数を伸ばしていましたが、一方で開
はじめに Go Secure Coding Practice とは コンテンツ一覧 良かったところ 注意すべきところ 最後に はじめに こんにちは。SRE の izzii です。 テックタッチのエンジニア規模もそれなりに拡大し、若手の採用も進んできたため、セキュアコーディングを徹底していきたいという思いがあり、まずは意識改革ということで勉強会を実施しました。セキュアコーディングを目的とした場合には教育だけでなく Static application security testing (SAST) の導入といった方法もあるのですが、まずは自分を含めた開発メンバーにノウハウをインストールすることにしました。セキュアコーディングへの意識が高まれば、いづれ SAST の導入の際に抵抗感も少ないだろうと考えています。いきなり SAST を導入しても、誤検知が煩くて浸透しないリスクもありうると考えてい
初めに 注意 導入の背景 ルールの選定 AWS の用意しているマネージドルールセット(AMR) サードパーティベンダーのマネージドルールセット(有償) マネージドサービスに付随するルール カスタムルール エージング 観測用の WAF を実環境に適用する ログを観測分析する ルールの調整 ルールのアクションを変更する ラベルを利用して特定のパターンのみ COUNT とする デプロイ 最後に 初めに こんにちは。SRE の izzii です。 テックタッチで AWS WAF を導入した手順を備忘録がてら記述したいと思います。 一応自分は元々 WAF を売る側の人間だったので、 流儀はあるかもしれませんが、参考になるのではないかと自負しています😀 注意 本記事において、 テックタッチのセキュリティ構成については、詳細を明かさないように記述しています。 なのであくまで手順の紹介であり、事例の紹介
ヒアリングから見えた課題 定義したブランチ保護ルール GitHub API を利用した監査スクリプトの作成 終わりに こんにちは。SRE チームの izzii です。 つい先日、テックタッチでは GitHub リポジトリの利用ポリシーを定めました。創業から数年間、アクセル全開で開発して気がついたら、Owner 権限を持つ人間が増えてしまっていたことへの違和感を解消するためです。 ヒアリングを通して問題を分析し、リポジトリ利用ポリシーを定め、最終的には GitHub API を使って監査結果を Slack に通知する仕組みを作りました。 本記事はあくまで「リポジトリの利用ポリシー」の話に閉じます。GitHub の利用全般に及ぶ話に興味がある方は、Flatt Security さんが最近公開されたスライドが良さげなのでオススメしておきます。 https://blog.flatt.tech/en
SLO 導入の背景 具体例から知る SLO エラーバジェットポリシーとは? SLO 導入の目的 SLO の定義で考えたこと ユーザー体験を反映するSLIを利用すること シンプルであること バックエンドで計測すること 逆に無視したプラクティス クリティカルユーザージャーニー(CUJ)から設計する メトリクスの S/N 比を考慮する エラーバジェットポリシーの定義で考えたこと 最後に 参考 こんにちは。SRE チームの izzii です。本記事では私にとって弊社での最初の取り組みの一つである SLO の導入について、事例として紹介いたします。 先日、自分の取り組みの答え合わせを目的として、SRE NEXT 2022 に視聴者として参加いたしました。そこで得られた学び気づきも載せていきたいと思います。 SLO 導入の背景 テックタッチでは、昨年の冬に開発チームからの独立という形で、SRE 組織が
このページについて そもそも ent / atlas ってなに ent atlas 実行例 前提 初期 schema セットアップ atlas を利用して schema 変更管理 まとめ このページについて ent の migration に atlas を使ってみた所感や、そもそも atlas ってどんなものかということを紹介しています。 そもそも ent / atlas ってなに ent OSS のデータアクセスフレームワーク。Goコードで任意のデータモデルまたはグラフ構造を簡単に定義でき、データアクセス周りの CRUD 処理などが自動生成可能。 本記事では深く踏み込まないのでこのくらいの紹介にさせてください。 atlas OSS のデータベーススキーマ管理ツール。CLI と GUI が提供されている。 特徴 AtlasDDL でデータベーススキーマを管理する HCL 構文で記述できる
みなさん、こんにちは。エンジニアリングマネージャーの Kobaan です。 最近、急に腕時計が欲しくなったのですが、腕時計(スマートウォッチ含)はしょっちゅう紛失する前科があるため、高級ではないけどしっかりして、かと言って安っぽくない腕時計を探したのですが、結果として CASIO の Databank で満足しきりの今日このごろです。 なぜこの記事を書いたか 先日社内ハッカソン(通称 HackTouch )を実施したのですが、内容的にも面白かったので、実際にどのように準備し、どんな案件をやっていったのか?を振り返りも兼ねて雰囲気がわかるようにご紹介していきたいと思います。 なぜこの記事を書いたか きっかけ 何をやるべきか?エンジニアリングマネージャー・スクラムマスターとしての悩み 社内ハッカソンの計画を立てて準備をする 当日のようす ハッカソンテーマと発表 チーム A 社内用語を管理してく
CTOの jun です。今年から釣りを始め、10回は海に足を運んでいるのですが、一匹もつれていません。 近くに多くのベテラン釣り人もおり、釣り場としては成立していると思うのですが、あまりにも釣れないので何か根本的に間違いを侵しているような気がしてきました。 周りに頼らず自分の頭で考えて来年は鯵の一匹でも釣り上げたいと思います。 この記事では開発体制の変更について書きます。 プロダクトが拡張されていくのと同時に、プロダクト開発に関わる関わる人も増えてきており、自分たちがどのように考えて開発体制を変更してきたのか書こうと思います。 技術スタック型のチームからの脱却 過去テックタッチでは、フロントエンドとバックエンドで分けた2チームのスクラム体制をとっていました。これには2つの背景があり、創業当時から、フルスタックエンジニアではなく各領域にどっぷりつかったエンジニアの採用が進んだという背景と、テ
次のページ
このページを最初にブックマークしてみませんか?
『Techtouch Developers Blog』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く