はてなブックマーク

こちらの記事は アソビュー！ Advent Calendar 2024 の23日目（裏面） です。 みなさんこんにちは。 アソビュー株式会社の櫻井と申します。社内では主にフロントエンドの開発に携わっています。 今回は新規プロダクトでアクセシビリティを意識して開発したことについて書きたいと思います。 はじめに アクセシビリティ改善活動の取り組み 背景 アクセシビリティ対応の実装詳細 1. ページ構造とナビゲーション 2. フォーム要素とインタラクション 3. 画像とメディア img 要素 button + svg 要素 4. フォーム入力 label と input 要素の紐づけ 必須項目の表示 5. 決済選択フォームのグループ化 実装の成果 おわりに We're hiring！ はじめに アクセシビリティ改善活動の取り組み 弊社のフロントエンドエンジニアチームでは、昨年のアドベントカレンダ

1.はじめに 背景 目的 2. アウトカムとは何か？ 定義 システムエンジニアの文脈での重要性 3. チームで取り組んだこと 具体的な取り組み内容 4. 得られた成果と学び 実際に得られた成果 学んだこと 5. 取り組みを継続するために 今後の課題 次のステップ 6. まとめ こちらの記事は、アソビュー！ Advent Calendar 2024の22日目（表面）です。 1.はじめに エンジニアの山本です。もうすぐクリスマスですね！ 冬のおすすめお出かけスポットは東京メガイルミです！去年家族で行って子供達が走り回って楽しんでいたので今年も行きたいなと思っています！ 今回は以前リーダーを務めていた、セッションを増やす（訪問客を増やす）というミッションを持った開発チームで行った「アウトカムを意識する」取り組みについてお話ししたいと思います。 背景 近年、業界全体で「アウトプット」ではなく「アウ

はじめに こんにちは！アソビュー！ - Qiita Advent Calendar 2024 - Qiitaの21日目（表面）です！ 私は、エンジニア 兼 技術広報をしている遠藤（ @koke_engineer ）です。 今回はアソビューで活躍するゲーム好きエンジニアたちのデスクを紹介します！ リモートワークでデスク環境へのこだわりが強いエンジニアの皆さんなら、「どんなデスクで仕事をしているのか？」気になりますよね。 アソビューでは、毎週決まった時間に発表者を募り、Tech Talk という会を開催しています。 ゲーム好きならこだわりがありそう！ということで、Tech Talkで実施した5名のデスクツアーを紹介します！ Tech Talkを行う際は、聴く側がみんなで感想などを自由にリアルタイムで書き込めるslackのチャンネルがあり、コメントが盛り上がっていたので、 今回は実況コメントと共

こちらの記事は、アソビュー！ Advent Calendar 2024の20日目（裏面）です。 はじめに アソビューの新規事業開発チームでスクラムマスターをしております、川又です。 突然ですが皆様、2024年のふるさと納税はお済みでしょうか？ アソビューでは「アソビュー！」「ウラカタ」に次ぐ第3の主要サービスを目指し、新規事業として「アソビュー！ふるさと納税」を展開しております。寄附をすることで、アソビュー！で使えるクーポンや、レジャー施設やスキー場で今すぐ使えるチケットが返礼品として今すぐ受け取ることができます。 furusato.asoview.com このふるさと納税事業も、サービスローンチから早1年が経過いたしました。このサービスを立ち上げるまでの開発秘話は、昨年のAdvent Calenderで執筆しておりますので、気になる方はチェックしてみてください！ エンジニア1人で新規事業

こちらの記事は アソビュー！ Advent Calendar 2024 の20日目（表面） です！ はじめに こんにちは！アソビューでバックエンドエンジニアの傍、技術広報の担当をしている佐藤です。 11月に技術広報の活動の一環として、エンジニア組織のオフラインイベント「リアルテックトーク」を開催しました！ 社内エンジニア向けのイベントは他社様でも行っているところはあるかと思いますが、この記事では、リアルテックトークの様子を通して、「生きるに遊びを」をミッションに掲げる弊社ならではのエンジニア組織の雰囲気をお届けできたらと思います！ リアルテックトークとは アソビューのエンジニア組織では週に一回、「テックトーク」を開催しています。 こちらはオンラインで開催しており、個人が関心を持ったテーマを持ち寄って発表したり、「LT会」という形で短い時間でテーマを絞った発表を行ったりしています。テックトー

アソビュー！ Advent Calendar 2024の19日目（表面）です。 アソビューにて海外事業を担当している江部です。今年の前半まではCTOで、今年からは心機一転して海外事業責任者を拝命し、これまでの国内向けサービスを拡張して海外向けのサービスを新規事業として立ち上げることにチャレンジしています。 役割は事業責任者ですが、MVP開発フェーズ終盤においてはプロダクトチームと一緒に開発に取り組んでいます。 今日はこの海外事業を立ち上げるにあたって、アーキテクチャ上の責務分解とシステム全体の性能のトレードオフについて悩んだことがあったので、そのお話をネタにしていきたいと思います。 背景 起こった問題 問題の原因 対策の検討 ① キャッシュで対応 長所 短所 ② 共通基盤のAPIをサイトに最適化 長所 短所 今回の私達の選択 最後に 背景 前述の通り、アソビューでは海外のレジャーやアクティ

こちらの記事は、アソビュー！ Advent Calendar 2024の19日目（裏面）です。 はじめに 現状の課題 なぜ Slack Workflow Builder を使ったのか？ Slack Workflow Builder を使った「リリース承認ワークフロー」の作成 リリース承認依頼ボタンの作成 依頼フォームの作成 スレッドに承認依頼の内容を投稿 承認ボタン ボタンの注意点 リストへの追加 チェックボックスの内容をリストのチェックボックスに反映する 承認連絡 日次テストの依頼 未承認リスト まとめ 良かった点 惜しい点 最後に はじめに こんにちは！アソビューでエンジニアをしている白井です。 今回は Slack Workflow Builder の利用例の一つとして、リリースの承認フローを自動化したものをご紹介したいと思います。 現状の課題 現在所属しているチームで何かリリースを行

はじめに こちらの記事は、アソビュー！ Advent Calendar 2024の17日目（裏面）です。 アソビューでSREを担当している鈴木です。 SREの大切なミッションの一つに可用性を保証するというミッションがあります。その可用性をすこしでも向上させるためにDatadogのDatabase Monitoringという機能を使って、改善した話を書きたいと思います。 SREという役割の大事なミッションの一つとして、障害の種を検出してそれを除去していくという活動を日々行うというものがあります。 これは、一般的な世界でわかりやすい例で例えるならば、健康診断などで病気を早期発見して、より長く健康状態を保つという行為に似ております。 健康診断では 数多くの計測手法を確立 定期的に計測 異常を検知 精密検査を実施して、医者が状況をより詳しく見ていく という流れで病気の発見を行っていくと思います。S

こちらの記事は、アソビュー！ Advent Calendar 2024 の17日目（表面）です。 こんにちは。マーケットプレイス開発部の五十嵐です。 もうすぐクリスマスですね。みなさんは、どのようにお過ごしでしょうか？ 今年も我が家では子供達のためサンタさんの準備をしているのですが、6歳の息子の今年の願いは、Switchでハマっているソフトの追加コンテンツだそうです・・・。 ニンテンドープリペイドカードを枕元に置いておけばいいのでしょうか... 😇 さて、今回はアソビュー！アプリのゲーミフィケーション機能をBrazeの In-App Messages を利用して実現した話をご紹介します。 Braze について Brazeを全く知らない方もいるかもしれませんので簡単にご説明すると、Brazeはマルチチャネルマーケティングを実現するための、カスタマーエンゲージメント(=顧客との関係構築)プラ

はじめに アソビューAdvent Calendar 2024の16日目（裏面）です。🎄 こんにちは。アソビュー株式会社で主にフロントエンド開発を担当している髙木です。 2023年のアドベントカレンダーでは「文系学部出身者が入社してからおこなった3つのタスクと9つの学びについて」というテーマについて執筆しましたが、あれから１年が経ち学んだことやできることも増えたので、去年と比較してできるようになったことを紹介できればと思います。 特に新卒でエンジニアとして働いている方、アソビューのエンジニア組織に興味ある方にとって、参考になれば幸いです！ 入社1年目の振り返り まずは去年を振り返ってみたいと思います。去年のブログにもありますが、まとめると 新卒研修 自社サービスを理解すること チームで働くということ 学びを抽象化し、具体化すること フロントエンド業務 とにかく動かしてみる 素直に聞く AP

はじめに この記事はアソビュー！ Advent Calendar 2024 の13日目（裏面）です。 こんにちは、アソビューでフロントエンドエンジニアをしている村井です。皆さんは、1つのフォームの中で2つの送信ボタンを扱ったことはありますか？ 複数の送信ボタン配置時に押されたボタンを判別したい 私が担当する開発において、同じ入力項目を使って「検索」と「CSVダウンロード」の2つの機能を実装することで、ユーザーが手間なく必要な情報を取得できるようにする必要がありました。 しかし、1つのフォームに複数の送信ボタンを配置すると、どのボタンが押下されたのかを判別する必要があります。 ボタンの区別ができなければ、適切な処理を実行することができず、ユーザーに混乱を招く可能性があります。 本記事では、この課題をどのように解決したのか、実装時のポイントを交えながらご紹介していきたいと思います。 解決策 J

アソビュー！ - Qiita Advent Calendar 2024 - Qiitaの12日目（表面）です。 はじめに こんにちは、アソビューでQAエンジニアを担当しております、石川和尚です！ 私は主に品質改善プロセスの立案やテスト設計、実行を担当しており、テストの効果的な実施と品質向上に向けて日々取り組んでいます。 その中で、今回は受け入れ基準について焦点を当てていこうと思います。 受け入れ基準とは、ユーザーや顧客、その他の認可団体が、コンポーネントやシステムを受け入れる際に満たすべき基準のことです。明確な目標や条件を基準として定めることで、認識のズレや手戻りを防ぎ、チーム全員で共通理解を持つことができます。 導入背景やその重要性、期待される効果についての詳細は、こちらのブログに詳しく記載されていますので、ぜひご覧ください。 tech.asoview.co.jp 本記事では、チームが受

アソビューAdvent Calendar 2024の11日目（裏面）です。🎄 今年のアドベントカレンダーは2面公開なので、ぜひ表面も御覧ください！ こんにちは、アソビューでチームリーダーをしている近藤です。 アソビューではSaaSを用いてメルマガ配信を運用していたのですが、メルマガの文章作成と配信基盤を内製化したことで大幅なコスト削減に成功しました。🎉 メルマガ配信システムの名称は「おくる君」となりました！ ひらがなにすることで「送る」と「贈る」の意味を兼ねるというアイデアが含まれています。 また、メルマガ配信結果のモニタリングダッシュボードを「みえるちゃん」にしています。 この記事では、メルマガ配信システム開発をタイトなスケジュールで実現した方法について紹介します。 プロジェクト管理で悩んでいる方にとって、アプローチ方法の一案になると嬉しいです。 ~ 目次 ~ 背景 プロジェクト概要

はじめに アソビュー！ - Qiita Advent Calendar 2024 - Qiitaの9日目(B面)の記事です。 はじめに QA課題と体制の変化 QA課題：品質はQAのテストだけでは担保できない 対策：QAはチーム化せず、各プロダクトチーム内にQAエンジニアが所属する体制に変化 新体制での気づき 気づき：QA用語は伝わらなければ多用しない方が良い 気づき：QAが品質を保証するという誤り 新体制での相乗効果 現体制でより良くするための取り組み 全員参加の品質改善活動 開発エンジニアとQAエンジニアの連携課題の解決 今後の課題と展望 さいごに アソビューでQAリーダーをしております、渡辺です。 前回は、以下の記事を書かせていただきました。 QA体制の過去〜現在〜未来 - asoview! Tech Blog その後体制の変化もあったため、体制の変化に伴う課題について今回はテックブロ

「週末なにする？そんな時は、アソビュー！」でおなじみの遊び予約サイト「アソビュー！」のSEOを担当している西本です。この記事はアソビュー！ Advent Calendar 2024の10日目（A面）です。 今回はURL Inspection APIについてです。リリースされたのが2022年1月のため今更感はありますが。 僕は大規模サイトのテクニカルSEOが得意だと自称しています。重要な観点はいくつかあると思いますが、大規模サイト特有の難しさとして、膨大なページが存在することによりいかにGoogleに認識して欲しいページをGooglebotにクロールしてもらうか、Google検索結果に出て欲しいページをインデックスしてもらうか、の「クロール」と「インデックス」は重要な要素の1つだと考えています。 ※このあたりの考え方はJADEさんが提唱されているDCIRのフレームワークが参考になると思います

はじめに アソビュー！ - Qiita Advent Calendar 2024 - Qiita の9日目（表面）です！ こんにちは！私はエンジニア兼技術広報をしている@koke_engineerです。 入社から半年、エンジニア同士が気軽に技術を共有し合える場を作りたい！ワクワクするような発表を通じて、エンジニア組織をさらに活発にしたい！という思いで、社内でLT（ライトニングトーク）会を企画しました。 この記事では、LT会の開催を通じて感じたことやエンジニア組織の雰囲気をお伝えします！ LT会とは LTとは、「Lightning Talk」の略で、短い時間でテーマを絞ったプレゼンテーションを行う形式です。通常1人あたり3〜5分程度の発表時間で、気軽に取り組めるのが特徴です。 アソビューでは、毎週決まった時間に発表者を募り、テックトークという会を開催しています！ 今回は、テックトークで開催し

アソビュー！ - Qiita Advent Calendar 2024 - Qiitaの6日目（裏面）です。 アソビューで座席指定システムのエンハンスに携わっている東郷です。 はじめに エンジニアの皆さん、日々の仕事で技術に向き合う中で、「遊び心」を忘れてしまってはいませんか？ この記事では、私が業務外の余暇に取り組んだ自由研究の体験をもとに、気軽に技術の世界を探求する素晴らしさをお伝えできればと思います！ 自由研究のきっかけ 社内コミュニケーション施策の一環で「Slackでどんな絵文字が使われているか」を調査した際、カスタム絵文字が1000種類以上も登録されていることに驚きました。その中にはユーモラスな絵文字も多く、「文脈に応じて最適な絵文字を返せたら面白いかも」と思ったのが自由研究の出発点です。 よく使われる絵文字ユーモラスな絵文字 Slackリアクションツールの試作 このの自由研究で

1. はじめに こちらの記事は、アソビュー！ Advent Calendar 2024の５日目（裏面）です。 みなさんこんにちは、アソビューでエンジニアをしています竹村です。 以前からユーザーに近いエッジサーバーに分散してリクエストを処理するエッジコンピューティングの仕組みに興味を持っており、高負荷時や障害発生時にも重要な機能を低レイテンシかつ安定して提供する仕組みを作れるのではないかと考えていたのですが、なかなか触る機会もなく今日まできていました。 そこで今回は、Cloudflare Workers向けのシンプルで軽量なHonoフレームワークを使用し、記事の投稿、一覧表示、詳細表示機能を持ったシンプルなミニブログを作成してみました。 この記事では、Cloudflare WorkersとD1を使ったミニブログの構築過程を順を追って説明していきます。 2. アプリケーション設計 要件定義 こ

はじめに こちらの記事は、アソビュー！ Advent Calendar 2024の５日目（表面）です。 アソビュー！でバックエンドを担当している島田です。 皆さん、開発者とQAの役割が分断されているせいで、品質や効率が低下していると感じたことはありませんか？例えば、開発者が作り上げた機能をQAがテストする段階で認識のズレから不具合が見つかり、手戻りが発生する。こんな経験はありませんか？ 私が所属するスクラムチームでは、効率的な開発と高品質なプロダクトの提供を目指しています。しかし、役割意識が強すぎることや、協働不足が原因で、開発や品質に課題を感じる場面が少なくありませんでした。この記事では、こうした課題を解決するために導入した『受入基準』について、具体的な方法や効果を紹介します。 背景と課題 私が所属するスクラムチームは、プロダクトオーナー（PO）1名、バックエンドエンジニア（BE）6名、

はじめに この記事はアソビュー！ Advent Calendar 2024 の４日目（裏面）です。 こんにちは、アソビューでバックエンドエンジニアをしている長友です。 アソビューでは顧客の期待により迅速に対応するエンジニア組織構築を目的として、今期から”開発生産性向上”にフォーカスしています。 そして、そのアプローチの一環としてFindy Team+の導入・活用を始めました！ この記事ではFindy Team+を導入して数ヶ月間における活用とその効果ついてチーム単位・チーム横断レベルの両面において紹介していきたいと思います。 開発生産性を向上させる体制 開発生産性向上委員会の設置 エンジニア組織として全体の開発生産性を向上させるためにはチーム個別での取り組みの他に横の繋がりの推進も重要です。 そのため弊社では開発生産性向上委員会が設置され、各チームから1人ずつ開発生産性向上委員が選任されま

アソビュー！ Advent Calendar 2024の1日目です。 今年のアドベントカレンダーは2面公開なので、ぜひそちらもご覧ください！ アソビューでCTOをしているdisc99🐼です！ 「アソビューを支える技術 2020」という記事を以前書いていましたが、そこから時間も経ち支える技術も変わってきているので、今回紹介していければと思います！ tech.asoview.co.jp アソビューの事業 Webフロントエンドを支える技術 TypeScript, React Next.js styled-components、vanilla-extract swr モバイルを支える技術 Swift / Swift UI・ Kotlin / Jetpack Compose TypeScript / React Native / Expo Firebase Braze AppAuth バックエンド

はじめに こんにちは、アソビューでQAエンジニアを担当しております、石川和尚です！ 私は主に品質改善プロセスの立案やテスト設計、実行を担当しており、テストの効果的な実施と品質向上に向けて日々取り組んでいます。 その中で、今回はテストの妥当性評価について焦点を当てていこうと思います。 テストの妥当性評価とは、テスト活動が製品の品質評価に対してどれだけ効果的で信頼性があるかを確認することです。しかし、適切なテストケース数やバグ検出数が見えてこないと、やみくもにテストケース数を増やすことになり、リソースを無駄に消費する恐れがあります。また、必要な不具合が十分に発見されているかを評価する基準がない場合、テスト後も潜在的なリスクが残っているのではないかという不安がつきまといます。このような課題に直面する中で、プロジェクトごとに適切なテストケース数やバグ検出数を導き出す方法が求められていました。 これ

はじめに アソビューでバックエンドエンジニアをしている長友です。 皆様、ChatGPTを開発に活用しているでしょうか！そしてChromeの拡張機能は作ったことあるでしょうか！ 今回はChromeの拡張機能開発未経験の私が、ChatGPT o1-previewと共にアジェンダ準拠のGoogle Meetのタイムキーパー機能を開発し、チーム課題の解決にチャレンジした話をシェアしたいと思います。 目的と課題背景 きっかけはチームのスプリントレトロスペクティブで「会議がオーバーしがち」という課題が出たことでした。 これは終了時間のみ意識すれば個人で解決できたり、既存の拡張機能でタイムキープは容易ですが、次のような課題が残ります。 人力のタイムキープは意識が薄れやすく、根本的な解決にならない 既存の拡張機能では会議ごとに時間設定が必要で手間がかかる 複数のアジェンダがある会議では、各アジェンダのタイ

アソビュー株式会社でバックエンドエンジニアをしている進藤です。今回は、私がアソビューにジョインしてから初めて開発に使用するようになったRPCフレームワーク”gRPC”の要素技術のひとつであり、データフォーマットとシリアライズを行うためのツールProtocol Buffers（以降、protobufと表記）のおおまかな歴史とバージョン変遷について、ふりかえりの目的も兼ねて執筆してみようと思います。 私自身、前職での経験としていくつかのAPI開発に携わったことはありましたが、エンドポイントごとにクライアントコードを手動で記述し管理する煩雑さや、ビジネスサイドの要請により変化していくシステムの中でAPIの互換性を保つ難易度の高さに苦手意識を感じていました。 それがprotobufでは、複数の言語に対応したクライアントとサーバーのコードを自動生成することで異なるプログラミング言語間での通信が容易で

アソビューでふるさと納税事業・ギフト事業の開発責任者をしております、川又です。 アソビューでは「アソビュー！」「ウラカタ」に次ぐ第3の主要サービスを目指し、 新規事業として「アソビュー！ふるさと納税」「アソビュー！ギフト」を展開しております。 furusato.asoview.com store.asoview.com これら新規事業の開発責任者とは名ばかりで、少数精鋭な開発チームなので私も第一線で様々なシステムの開発を行っています。 学生の頃からパソコンを駆使して身の回りの課題を解決することが好きだったため、これからも開発を続けて行きたいものです。 さて、今回はそんな私がプライベートで「とあるサイトでの予約を自動化したい」という怠惰願望から 自動でブラウザを操作し予約ボタンをポチッと押してくれるbotを開発しましたので、botを構築・デプロイするまでの流れをご紹介したいと思います。 ※今

皆さま！はじめまして！ アソビュー株式会社でQAエンジニアをしております空です。 2024年5月にアソビューにジョインして、数あるサービスの内1サービスのQAリードとして担当プロダクトの品質向上に取り組んでおります。 私の経歴をざっと紹介いたします。 プログラマー　SESにて、各現場でプログラミングやテストを担当 QAエンジニア　主に業務委託で、金融系システムなどのソフトウェアテストを担当 QAエンジニア　アソビュー　ジョイン 経歴の2.の時期の私は金融系で同じような現場に長く居り、また第三者検証会社に所属したこともなく、テストスキルのレベル感が分かりませんでした。 そこでキャリア後期には、幾つかの現場も経験してみました。 具体的には、とあるベンチャー系の会社ではアジャイル開発でリリースして効果測定をするなどスピード優先であり、探索的テスト（テスト設計しながらテスト実行するテスト手法）に近

こんにちは｡ アソビューのPlatformSREチームの頭島です｡ 最近､社内にメール配信基盤を構築したことについてご紹介します｡ アソビューで扱うメールには大きく2つありますが､今回は一括配信メールのメールマガジン配信機能をSaaSから社内基盤に移行した話です｡ 一括配信メール(メールマガジンなど) トランザクションメール(購入完了メールなど) 背景 コスト削減したい 社内基盤移行前は､CRMとメールマガジン配信機能を兼ねているSaaSを利用していました｡ SaaSには以下を含めて機能が豊富で重宝していましたが､年々メール配信数増加に比例してSaaSの利用料金も増加しており､コストが無視できない金額になりました｡ リッチなエディタUI メール配信条件フィルター機能 顧客管理機能を利用して細かいデータを利用したフィルターが作成可能 メール配信結果の確認機能 メール配信機能実装時の認知負荷を

こんにちは。 アソビューでフロントエンドエンジニアをやっています、白井です。 今回はフロントエンドをやっていく上で避けられないものの一つである、フォームバリデーションのお話です。 フォームバリデーションライブラリの React Hook Form と、バリデーションスキーマライブラリ Zod の組み合わせは扱いやすく便利なのですが、 バリデーションで使っているデータを後から動的に変化させたいようなシーンでは一手間加える必要があったため、今回はその方法を紹介したいと思います。 やりたいこと 実装方法の検討 ① Zod のスキーマとは別にバリデーションを行う ② React Hook Form にバリデーションに必要な情報を全て持たせる ③ React Hook Form では必要最低限の情報のみを持たせ、バリデーションで利用する動的なデータを zod のスキーマに渡す 実際の使用例 動的バリ