はてなブックマーク

こんにちは。iOS Developer の katoです。 2024年5月16日は 世界各地でアクセシビリティを考える1日、GAAD（Global Accessibility Awareness Day）でしたね。 GAAD Japan 2024、アクセシビリティの祭典 2024 など様々なイベントが開催され、私もオンラインで参加しました。 その中で紹介されたアクセシビリティ対応の進め方として「完璧でなくても、できることから取り組む」という考え方があります。 そもそも世の中には様々な人・状況などが存在しするため、アクセシビリティを完璧にすることは非常に難易度が高いです。 「現状よりもちょっと良く」を繰り返して、いまよりもアクセシブルな世界を目指すという考え方です。 そこで今回は、たった5分で、エンジニア主導で始められる、簡単に実装できるアクセシビリティについて、いくつか紹介します。 「反転

この記事はGoodpatch Advent Calendar 2023 15日目の記事です。 株式会社グッドパッチでエンジニアをしているちげと申します。Strap というオンラインホワイトボードサービスの開発に携わっています。最近は小学生時代にハマっていたレゴを触って懐かしさと構造設計の奥深さに浸っています。 product.strap.app 今回はFigmaやWebで文字の表示位置がズレるいくつかの問題について取り上げて解説したいと思います。 時間がない人向けサク読み ハーフリーディングを削ることで、文字をぴったり上揃えできる。※(行間の高さ - フォントサイズ) ÷ 2 = ハーフリーディング Figmaのトリミング機能は現状Webでは実装できない。 Figmaが小数点以下のピクセルを四捨五入する影響で、Webの実装と 0.Npx 分ズレたり、完璧に中央に揃わなかったりする。 上記の

この記事はGoodpatch Advent Calendar 2023の10日目の投稿になります。 こんにちは、Goodpatchで中途採用のリクルーターをしている 宍戸 です。 エンジニアのリクルーターや、採用の数字集計や可視化を担当しています。 今回は、採用管理システムの応募者データをLooker Studioでダッシュボード化したときに工夫してよかったことをまとめました。 ダッシュボードの作成は1年半前で、その後運用しながら都度アップデートしています。 誰の役に立ちそうな記事か 採用管理システムとは やってよかったこと 1.見たい指標の優先度・Whyをすり合わせる 2.職種、応募経路、ステータスなどの定義テーブルを作る 3.応募者CSVの変換用シートを作る 「有効」列 選考のカウント列 部署列・職種列・応募経路列 選考ステータス列 4.入力規則を統一する(複数シートで採用情報を管理し

こんにちは！エンジニアの藤井（touyou）です！ この記事はGoodpatch Advent Calendar 2023の二日目の記事になります。 今回テーマにするのは昨年末のChatGPTリリースに始まり全世界を巻き込む社会現象となった「AI」についてのお話です。 ChatGPTの影響が大きかった一番の要因はチャット形式かつその性能の高さが今までAIに直接触ってなかった層を巻き込めるようになったから、というのはわりとメジャーな見方かと思いますが、一方でこれによってAIもとい機械学習がどういう仕組みで動いているのかという理解があまりないまま生成AIを触っている人も増えてきたのかなと思います。 自分は以前にChatGPTに書かせた技術記事に赤入れしてみた - Goodpatch Tech Blogという記事を書いたように、ただ生成AIに盲目的に乗っかっていくだけの動きには比較的懐疑的な立場

こんにちは！エンジニアの藤井（touyou）です！ ついに2023年9月19日、iOS 17がリリースされましたね🙌 連絡先がiPhoneを近づけるだけで交換できる機能など、コミュニケーション面でのアップデートが目立った今回のアップデートでしたが、みなさんは何に注目したでしょうか？ 弊社ではiOS/iPadOS 17の天気アプリに追加された、あるマイナーアップデートが注目を集めました。 それがこちらです。 かなりわかりにくいのですが、以前からあったパネルの上部に雨粒が上から当たって跳ねるアニメーションに加えて、パネルの裏側に水滴がついて滴るような演出が追加されています。 切り抜いて明るくしてみるとこのような感じです。 とてもリアルな表現になっていますね！ これはやってみたい！ ということで、こちらをSwiftUIで再現してみようと思い立ちました。 そこでこの記事では、再現に至るまでにした

Goodpatchエンジニアの池澤です。デザインツール「Figma」のスタイルや値を、テキストエディタ「VS Code」上で閲覧できる「Figma for VS Code」機能拡張が2023年6月よりFigma公式から提供されています。 この記事ではその「Figma for VS Code」について、実際に試して感じたことをまとめてみました。 ※ Figma Dev ModeやFigma for VS Codeはまだベータ版で動作保証されておりません。また本記事の内容は個人が趣味で検証したことをご理解の上、自己責任にてご利用ください。 Figma for VS Codeとは 主な使い方 使用時のワンポイント Point1： Figmaのトークンの名前と値が確認できる Point2： FigmaのSectionやReady for devマークの有無はあまり気にしなくて良い Point3：

フロントエンドエンジニアの上垣です。 この記事では、Next.js で、next-themes と Tailwind CSS を使って Light/Dark モード切り替え対応する例を紹介しています。 github.com 前提 Tailwind CSS のダークモード Light/Dark モードの判定 Dark モードのスタイル next-themes インストール セットアップ 実行結果 Light/Dark モードの切り替え サンプルアプリケーション 感想 前提 この記事では下記のバージョンのライブラリを利用しています。 Next.js 13.4.12 next-themes 0.2.1 Tailwind CSS 3.3.2 Next.js の AppRouter を利用しています。 この記事で紹介するのは、「Light/Dark モードの切り替え」であり、Dark モード実装の詳

6月21日・22日の2日間にかけて、Figmaのイベント「Config 2023」が開催されましたね！本イベントはサンフランシスコで開催され、Goodpatchのデザイナーも現地参加しました。 イベントの中で発表されたセッションはYouTubeにもアップされています。 今回はGoodpatchのデザイナーとエンジニアが気になったセッションをピックアップして、セッションの概要や感想をご紹介したいと思います！ ピックアップセッション💙 Designing with AI: building the flagship GPT-4 language product セッションの概要 感想 Design Ops: Driving change with design systems and process セッションの概要 Aletheia Délivré氏について 政府機関でのデザイナー採用プロ

初めまして。グッドパッチでプロジェクトマネージャーを担当している星と申します。 私は前職がソフトウェアメーカーで、QA（製品テスト）を担当したり開発組織のマネージャーを務めたりと、エンジニアと近い領域で仕事をしてきました。 そんな背景があり比較的開発寄りの案件にアサインされることが多く、以下のようなプロジェクトを担当してきました。 ヘルスケアサービスの立ち上げ（UX・UI設計、アプリ実装、プロモーションサイト実装） 大手保険会社のコーポレートサイトと顧客向けサービスサイトのリブランディング 医療業界の求人サービスのグロース（サイトリニューアル、アプリ改善） 建設業界の新規事業創出 HR業界のSaaSリニューアル 自社のマーケティングサイト立ち上げ エンジニアと一緒に日々働くことが大部分で、エンジニアと共に戦い共に創り上げる喜びを知っているプロマネ、と自称していいかなと思っています。 今回は

iOS 15で追加された新機能の中でも注目すべきは、Focus（集中）モードです。この機能を使うことで、自分がやるべきことに集中するために、通知やアプリアイコンの表示を制限できます。例えば、仕事中には仕事に関するアプリや連絡先からの通知だけを受け取り、プライベートな時間にはSNSやゲームからの通知を制限することができます。 Focusモードのデザイン Focusモードのデザインには、アプリのアイコンに新しいリングが追加されました。このリングは、Focusモードに設定されていることを視覚的に表していますは、基本的にできることが限られています。iOS15の段階では、コミュニケーションアプリの送受信先によって通知をフィルタすることしか開発者にはできませんでした。また、アプリの設定画面には、Focusモードに関するオプションが表示されます。ですが、iOS16から導入された「集中モードフィルタ」を使

はじめに この記事はGoodpatch Advent Calendar 2022 の21日目の記事です。 Goodpatch の運営する ReDesigner で、主にフロントエンドの開発を行っております、かずです。 この記事では、OAuth2 を利用して Google カレンダー と連携する Raycast 拡張機能の作り方を解説したいと思います。 目次 はじめに 目次 Raycastについて Raycastとは? Raycast の何がいいのか テーマと成果物 作るもの(テーマ) 完成した拡張機能の挙動 拡張機能 開発手順 必要環境 拡張機能コードの新規作成 拡張機能のビルド & インストール OAuth2 同意画面・認証情報の作成 プロジェクトの作成 OAuth 同意画面の作成 認証情報の作成 OAuth2 認証機能の実装 基本となるコード node-fetch のインストール Go

この記事は Goodpatch Advent Calendar 9日目の記事です。アドベントカレンダー２つ目の記事をなんとか書くことができた大角です。 今回はインタラクティブなUIコンポーネントの状態変化において、一貫性を持ちながら、効率よく実装するために「Interaction States」と「StateLayer」の概念を理解し、それをどのように実装するかについて考察します。 Interaction Statesとは Interaction StatesにおけるState Layer Interaction Statesの実装 レイヤーを定義する 状態変化に合わせて、StateLayerの透明度を変更する ボタンに複数のVariantを定義する ボタンに複数のThemeを定義する 実装デモ おわりに Interaction Statesとは Interaction Statesは、イ

この記事はGoodpatch Advent Calendar 2022の7日目の記事です。 オンラインホワイトボードStrapの開発を担当している、フロントエンドエンジニアのあげです！ みなさん、設計って得意ですか？なかなか設計通りに実装するのって難しいですよね。 Twitterでも、「コード書いてみないと設計書を作れない」という話題を見ました。自分はわりと苦手です… 「よし、完璧だ！」と設計したはずなのに、いざ実装すると計画通りに進まなかった 逆に詰めたわりに、呆気なく終わってしまった 反省して次に活かそう意気込んでも、やっぱり計画通りに進まなかった こんな経験ある方、多いのでは？と思います。 この問題の解消のために、「テクニカルプロトタイプ」を試してみました！ テクニカルプロトタイプとは？ 感じたこと 考察 テクニカルプロトタイプは、設計と特性が逆 テクニカルプロトタイプのメリット 検

こんにちは！Jetpack Compose と KMM が好きなエンジニアのスージです。 今年開催された Android Developers Summit では素晴らしいセッションが盛り沢山でしたね。 developer.android.com 同じタイミングでJetpack Compose v1.3.0も stable になりました。今回もたくさんのAPIの追加や更新がありますし、その中で個人的に気になった API を紹介しようと思います。 Compose BoM LookaheadLayout Variable フォントサポート Staggered Grid サポート Canvas.drawText() Hyphens API LineBreak API で改行サポート Pull-to-refresh Modifier.Node の大リファクタリング Kotlin 1.7.20 サポ

Jetpack Compose v1.2.0 Design Division 所属アプリエンジニアのスージです。 良いデザインでクライアントのビジネスを前進させるために開発している、Jetpack Compose と KMM が好きなエンジニアです。 Jetpack Compose の バージョン 1.2.0 が rc になりました。フォントのパディングの改善を含め、たくさんのAPIの追加や更新があります。 medium.com その中で個人的に気になった API を紹介しようと思います。 movableContentOf LazyGrid にも animateItemPlacement 追加 TextStyle に Brush の追加 新しい @Preview デバイス追加 kotlinx.collections の @Stable 推論 LazyLayout 終わりに movableC

WWDC 2022 2022年6月6日から6月10日にかけて行われた「WWDC 2022」では、さまざまなセッション動画が公開されています。 本記事では、有志のGoodpatchアプリエンジニアが興味を持ったセッションをピックアップし、セッションの概要や感想をご紹介します！ ※本稿はAppleにより一般公開された内容にのみ基づいて記載しました。 ピックアップセッション💙 What’s new in iPad app design ツールバーのカスタマイズ ドキュメントメニュー 編集メニュー 検索（Find）と置換 ナビゲーション 検索（Search） テーブル セレクションとメニュー まとめと感想 Create parametric 3D room scans with RoomPlan スキャン体験API（Scanning experience API） データAPI スキャン（Sca

こんにちは！エンジニアの鈴木（@zookeeper08）です 💁‍♂️ 先日、数名のフロントエンジニアが集まり、1泊2日のワーケーションを京都で実施しました！ 入社してからほとんどリモートだったので、実は同じチームでもリアルで会話したことがあるのは数回ぐらいという、、なので今回のワーケーションは個人的にすごい楽しみにしていました！ この記事ではワーケーションの全貌をゆるりと紹介していきます〜😚 1日目 京都へレッツゴー 🤙 朝の7時半に東京駅集合だったので6時前に起きました。こんなに早く起きたのは久々です。 新幹線に乗るだけで旅行感出ますよね 予定外の京都タワー訪問🗼 宿に向かっていると私たちの目の前に京都タワーが！ テンションが上がってしまい、予定にはなかったのですが急遽向かうことにしました🕺 大人たちがちゃんと楽しんでいました 😉 近すぎて全貌が見えない京都タワー 任天堂の

2022年5月10日から2日間かけて行われた「Figma Config 2022」のアーカイブ動画が先日公開されましたね！ 本記事では、有志のGoodpatchエンジニアが興味を持ったセッションをピックアップし、セッションの概要や感想をご紹介します！ すべてのアーカイブ動画はこちら👉 Config 2022 - YouTube ピックアップセッション💙 Figma tutorial: What’s new in Auto layout negative spacing absolute position text baseline alignment How design tokens can make us better collaborators - Jan Six (Config 2022) Figma Hacks and Workflow Enhancements with P

最近、韓国ドラマと個人開発に勤しんでいる大角です。 Webサービスを提供する上でテストを自動化するケースも多いと思いますが、今回はReact Testing Libraryを使った基本的なテストの書き方についてご紹介したいと思います。これからReactでユニットテストを始めたい方などのご参考になれば、幸いです。 テストの内容については３回の記事に分け、今回の記事では最初のReactコンポーネントのテストを取り上げます。 React Componentのテスト（今回の記事） カスタムフックのテスト Recoilのテスト なお、執筆時点での関連するパッケージのバージョンは以下になっています。 create-react-app: 5.0.1 react: 18.1.0 @testing-library/jest-dom: 5.16.4 @testing-library/react: 13.2.0

エンジニアの鈴木（@zookeeper08）と藤井（@touyou_dev）です。今回は新卒3年目と2年目となる私たち2人が、今年入社した新卒向けに全職種向けエンジニアリング研修をリデザインした話について、前編・後編の二部にわたって紹介します。 後編となるこの記事では、研修を実際に実施した様子や、その際に工夫したこと・新卒の声などをご紹介します。 前編はこちら👇 若手エンジニア二人で新卒の全職種向けエンジニアリング研修をリデザインした話 設計編 前編の振り返り まずは前編の振り返りから。今までのエンジニアリング研修に対する違和感を言語化した上で、グッドパッチにとっては切っても切り離せないデザインとエンジニアリングの連携という観点から調査を行い、それらをもとに研修を再設計しました。 設計を通して、何を学んでもらうかに対しては以下のような目標をたてました。 研修で達成したい理想の状態 大きく

エンジニアの鈴木（@zookeeper08）と藤井（@touyou_dev）です。今回は新卒3年目と2年目となる私たち2人が、今年入社した新卒向けに全職種向けエンジニアリング研修をリデザインした話について、前編・後編の二部にわたって紹介します。 前編となるこの記事では、研修を作っていくにあたってどのような調査を行い、どのように考えて研修を設計していったかの部分に関してご紹介します。 後編はこちら👇 若手エンジニア二人で新卒の全職種向けエンジニアリング研修をリデザインした話 実施編 研修を通して何を学んでもらうか グッドパッチの新卒研修はいわゆる社会人基礎のようなものや会社のカルチャー・制度への理解を深めるものから始まり、UX・エンジニアリング・営業・UIのそれぞれの職能ごとのもの、そして模擬クライアントワークの形式の研修をあわせて約２〜３ヶ月かけて全職種に対して共通で実施します。（※ 年

この記事は「Goodpatch Advent Calendar 2021」の 23 日目の記事です。 初めまして、フロントエンドエンジニアの かず と申します。 自社サービスの開発でタグ入力UIを実装することになり、他サービスではどのような仕様になっているかを調査しました。 この記事では、タグ入力UIについてパターンをまとめ、それぞれのメリット・デメリットについて考えたことを共有したいと思います。 タグ入力UIとは 使用例とパターン テキストフィールド内に追加されていくパターン テキストボックスの外に追加されていくパターン ドロップダウンリストから選択するパターン ユーザー操作に対する挙動の違い タグ追加のタイミング 特定のキーを押してタグ追加 最初からタグとして入力されている テキストボックスからフォーカスが外れたときの入力文字の扱い タグ化される 消去される そのまま残る 候補表示のタ

Goodpatchでエンジニアリングマネージャーをしている中谷です。 この記事は、Calendar for Goodpatch | Advent Calendar 2021 - Qiitaの21日目の記事となります。 背景 影響された記事 身につけるメリット どうやって身につけるのか 身につけた先 個人の思い 最後に もうちょっとカジュアルに・・・という方は 背景 昨今では、サービスやプロダクトの開発者にとってユーザー視点は必要不可欠で、潜在的なユーザーのニーズやインサイトを見出す、ユーザーインタビューを行ったりすることが多いと思います。 弊社のエンジニアの働きとして上流から入るケースというのが往々にしてあり、エンジニアであっても、ユーザインタビューに参加してターゲットユーザーに質問したり分析の整理に参加したりします。 全てのケースでそういう流れになるわけではないですが、UXデザイナーがイ