どうも、nano72mknです。 アクセシビリティを意識してタブUIを作ったので、実装時に調べたことやポイントをまとめます。 タブUIについて まず、初めにタブUIと言われて思い浮かべるのは、この形だと思います。 このUIは、２つのパーツに分けることができます。 １つ目は、「タブ」と呼ばれるパーツ ２つ目は、「タブパネル」と呼ばれるパーツ この２つのパーツをがっちゃんこして、タブUIは出来ています。 タブUIをアクセシブルにする roleとaria属性を付与してアクセシビリティ対応をする。 roleを付与する 付与する必要があるものは下記の３つ tab tablist tabpanel tabとtablist タブにはtab、複数のタブを囲っている要素にはtablistのroleを付与する <div id="tab"> <div role="tablist"> <button role="

お久しぶりです。スターフェスティバル株式会社エンジニアのsoriです。 6/3にGitHubからArm64環境のGitHub Actions Runnerが発表されました！ まだこのRunnerはPublic betaであり、Team/Enterprise planでしか使えませんが、Silicon Macの普及やAWSでもGravitonインスタンスが使われるようになり、コストにもパフォーマンスにも寄与する良い感じの流れになってきましたね。 そんな流れが来たので自社のサービスの動作環境をarm64に対応させてみました。 ちなみに、既存の環境はGitHub Actionsでdocker buildでイメージをビルドし、AWS ECRのリポジトリにアップロードし、Amazon ECS Fargateな環境にタスク定義をレンダリングさせて動作させるといった状況です。 社内向けにメモをしたためた

スターフェスティバル株式会社 の バックエンドエンジニアの @ikkitang です。 先日、弊社のプロダクト開発部で Win Sessionが行われました。Win Sessionというのは、以下の記事で紹介されています。 要約すると、各チームからは自チームの試行錯誤・取り組みをアウトプットして、また参加者からは全力でそれを褒め称えるという自己肯定感バク上がりの社内イベントです。 今回は私(と後もう一人)がチーム代表として発表をしたのですが、その時に発表した内容をブログにも書いてみます。 自チームの取り組みの前提共有 とはいえ、自チームが何をやっているかを紹介しないとコンテキストの共有がされないので、我々のチームがどういうことをミッションとしているかについて触れておきます。 現在、自分達のチームは弊社の全業務を支えてきたアプリケーション基盤に対してのリプレイスプロジェクトとその中でも特に弊

この記事はスターフェスティバル Advent Calendar 2023 の 19 日目の記事です。 当記事の内容概要 こちらのエントリ に記した通り、現在わたしはスターフェスティバル株式会社に就業しながら、フルリモートワーク・フルフレックスな環境を活用し、大学院で情報科学を学んでいます。 入学後かれこれ半年以上が経過し、「辛うじて入学出来たものの、その後ひぃひぃ 🥺 言わない為に事前知識として身につけておくべき」だったと痛感した数学関連の分野について、それらをどのよう教材でキャッチアップしていったか、についてまとめます。 履修する授業や研究内容によっても大きく差があると思いますが、広く情報系の授業を履修した場合のあくまで一個人のケースです。 主なターゲット わたしと同様、高校数学までの知識が記憶の片隅にあり、情報系分野で進学を希望する方。またはそのようなキャリアに興味のある方。 また、

20日目に続いて本年2件目のドベカレ（アドベントカレンダーの意）となります。 趣味の旅行が高じて、気づけば2020年、2022年と度々ワーケーションのことを記事にしてきました。 旅行好きが高じて、2023年は飛行機での移動を快適にするためJALのJGCステータス修行をすることになり、無事11月に達成できました🎉 最終的に2023年は通算57回も飛行機に乗ることになりました…！（28往復+昨年から飛んだ分の帰り） 飛行機乗るだけでなく、そのすべての回で旅行に行ったのでだいぶコストパフォーマンスにはアレな感じになりましたが。 このようにプライベートを割と自由度高くできるのも、弊社のワークスタイルと社内の理解のお陰であるところが大きいです…！ プライベートが充実しているのを、業務においても生産性を高めるために大きく寄与しているところを示せているというのが大きいかなと さて、本題ですが何度も行っ

Good Code, Bad Code ～持続可能な開発のためのソフトウェアエンジニア的思考を輪読会で読んだ話 この記事は スターフェスティバル スターフェスティバル Advent Calendar 2023の15日目の記事です。 スターフェスティバル株式会社 ソフトウェアエンジニアのishidaです。 先日社内の輪読会で 「Good Code, Bad Code ～持続可能な開発のためのソフトウェアエンジニア的思考」という本を読みました。 本記事はそのレポートになります 輪読会参加の動機 弊社エンジニアの@ikkitangさんが 輪読会やるよーと告知があったので、参加させていただきました。 個人的な動機としては、開発やコードレビューの視点を広げられるのではと思ったためです。 コードを書く際やレビューをする際に違和感を感じるが改善策が浮かばない、うまく言語化できない...といったことがあり

はじめに スターフェスティバルの DPontaro です！ Terraform触るのこわかったけど、だいぶ薄れてきたので恐れなくなるまでの道のりを紹介します。 Terraformとは Terraform は Infrastructure as Code（IaC）という考え方を実現するためのツールの一つです。 IaC はインフラの構築や変更をコードとして管理・適用するアプローチであり、これによりインフラの変更履歴や再現性を確保することができます。 AWS、Azure、GCP など、多数のクラウドサービスやオンプレミスのツールと連携可能です。 Terraform 触るのこわい 弊社のアプリケーションのインフラもTerraformで管理されており非インフラエンジニアが変更することもあります。 私も多分に漏れず、変更の機会が出てきたのですが当初変更を加えるのはとても怖かったです。 己の操作一つで、

どうもこんにちは。 スターフェスティバルアドベントカレンダー8日目の担当の @takapyyy です。 この記事を書くに至った背景 ごちクルというサービスを提供しているスターフェスティバル株式会社で物流関係プロダクトのプロジェクトリーダーをしています。 4月にスタフェスにジョインして8ヶ月ほどたち、入社と同時に教育してきたAPdM(Associate Product Manager)の成長具合がなんかいい感じになってきたので、この8ヶ月間で伝えてきたことを手短に100こほどにまとめてきました。 ちなみにAPdMは非エンジニアな社会人8年目の女性ですが、今ではVS Codeでローカル環境つくって受け入れ試験をしたり、機能単位やフェーズ単位での要件定義書を作れるようになっています。（すごい） すべてを事細かに書いていくとやばいことになるのは目に見えてるので、読んだらわかるシリーズやより詳しいも

はじめに リリースノートの管理、手動でやると大変ですよね。 1日に複数回のリリースを行っている 複数のチームで同じリポジトリを触っている といった状況だと、毎回のリリースの変更管理を手でやるのはなかなか骨が折れます。 こういった場合、Release DrafterというGitHub Actionを導入することで、リリース間にマージされたPR一覧をもとにリリースノートを生成できます。 このRelease Drafterはmonorepoのプロジェクトでも活用できます。 この記事ではNestJSプロジェクトを例に、monorepoのリポジトリにRelease Drafterを導入して、複数のタグを管理する様子を紹介してみます。 Release Drafterの流れ Release Drafterに関しては以下の記事がとても参考になるので、合わせて読んでいただけると理解が深まるかと思います。 基

はじめに こんにちは。 スターフェスティバル株式会社 デザイナーのshiraiです。 先日チームのエンジニアとPdMで輪読会を行い、「みんなではじめるデザイン批評」を読みました！ 私はメンバーにこの本を紹介されるまで知らなかったのですが、 「デザイン批評」のやり方について考えさせられたのと、今後チームで生かせる内容だったので一部の要約と感想を共有します。 よろしくお願いします！ この本を読むきっかけ きっかけは、チームのPdMが「デザイナーに何をフィードバックすればいいのか分からない」「デザイナーと円滑にコミュニケーションをとる方法が知りたい」と声を上げてくれたことでした。 それまでは、PdMが営業からのフィードバック内容をデザイナーに伝える方法をとっていたのですが、その際の伝え方を改善したいと悩んでいたそうです。 そこで弊社のエンジニアが推薦したのがこの本でした。 「どうせ読むんだったら

こんにちは！ スターフェスティバルでインフラエンジニア/データ基盤エンジニアをやっております @koonagiです。 最近弊社をご利用していただいている飲食業者様向けに、これまでスターフェスティバルで溜めてきたデータを提供し、ビジネスに活用していただこうと検証を進めています。 BIツールとして、Amazon Quicksightの利用を検討しており色々触っていたのですが、ドキュメントが見当たらずハマったことや困ったことが幾つかあったので、書き起こして行こうと思います！ Amazon QuickSightとは Amazon QuicksightはAWSが提供しているシンプルなBIツールです。 TableauやSplunkなどの有名なBIと比べると機能は少ないですが、AWS上にあるデータと簡単に連携できるため、AWS上にデータがあれば簡単に分析環境が作れます。 また、金額的にも他のBIと比べて

こんにちは！ スターフェスティバルでインフラエンジニアをやっております @koonagiです。 早いことにもう1月も終わりますね。 1月のうちにブログを書こうと思っていたら、あっという間に終盤になってしまっていて急いでこの記事を書いていますｗ さて、先月のre:Inventでリリースされた Amazon RDS Blue/Green Deployments について、最近検証したのでそのことについて書いていこうと思います。 Aurora v1(MySQL 5.6)が2月末でサポート終了となるため、Aurora v2(MySQL 5.7)へのバージョンアップの際にAmazon RDS Blue/Green Deploymentsを活用しようと考えており、事前準備として検証を進めました。 Amazon RDS Blue/Green Deploymentsとは 公式からの引用です。 ブルー/グリ

この記事は スターフェスティバル スターフェスティバル Advent Calendar 2022の22日目の記事です。 この1ヶ月ほどサッカーのことばかり考えていたので、なかなか頭が切り替わっておりません。ここでもサッカーの話をさせてください。 サッカーの試合の詳細なデータを知ろうとするならば、情報はそこら中に落ちています。検索すれば試合に関する大抵の情報を得ることができるのですが、手に入るものはといえばビジュアライズに特化されているものがほとんどです。分析というほど高度なことをしないまでも、複数の試合に横串を通して、ちょっとした法則性のようなものを考える用途には向いていません。 どうせならデータを手元に置いて自由にクエリを投げたいなどと思い立ち、試みにローカルのRDBにデータを保存しはじめました。この記事では、私がワールドカップを楽しむために密かに用意していた、サッカーの大会・選手・試合

この記事は スターフェスティバル スターフェスティバル Advent Calendar 2022の23日目の記事です。 はじめまして スターフェスティバル株式会社 ソフトウェアエンジニアのまつやです。 エンジニアとして、外界にアウトプットするのが初めてなので簡単な自己紹介... 北海道出身。高校を卒業して役者を目指して上京したが途中で挫折。 猫を飼うために居酒屋のバイトをやめて、 2014年にスターフェスティバルでコールセンターのアルバイトとして入社。 気づけば正社員になり、2020年からエンジニアとして働いております。 もう８年もいます。居心地がとても良いです。 よろしくお願いいたします。 さて、本日お話しする内容は... とあるサービスで「検索機能が重い」という問い合わせがあって改善した話。 長年利用されてきたサービスで 当時そのサービスを創り上げた戦士たちはもういない。 そんな中ペー

みなさまこんにちは、スターフェスティバル（以降スタフェスと略） エンジニアのsoriです。 こちらの記事はスターフェスティバル Advent Calendar 2022の21日目の記事です。 昨日のアドベントカレンダーはriaf氏による「中学生だってやっているし、われわれも社内プログラミングコンテストなんていかがでしょうか！？」でした。 ゲームで書くプロコン、やく側だけでなく見る側もワクワクしそうな話でしたね！事前の社内記事レビューでもめっちゃ話が盛り上がってました。 はじめに 今回のわたしの記事は先日12月初旬に鹿児島で仕事しながら観光を楽しんだよという話です。 そういえば一昨年も長崎でワーケーションした記事を書いてましたね。 長崎の旅以降、たびたびワーケーションや、純粋に有休をとって旅行を楽しんでおり、完全に趣味が旅行と言えるような状況になってきました。 その結果、未踏の都道府県は山口

みなさまこんにちは。スターフェスティバル株式会社 Advent Calendar 20 日は @riaf が担当します。 個人的にはこういう記事が溢れかえる時期にわざわざなにか書くモチベーションはあまりなかったりするのですが、先日試用期間があけたばかりのペーペーですのでちゃんと１日くらいは埋めていこうと思います。 はじめに、U-16 プロコンの話 私はいま北海道の釧路市というところに住んでいるのですが、ここで 10 年ほど前からU-16 プログラミングコンテスト釧路大会というものに関わっておりまして、これは名前の通り、16 才以下を対象にしたプログラミングコンテストです。 また、釧路大会という名前がついているように、釧路以外でも開催されており、これまでは主に北海道内で活発だったのですが、先日ついにプレ全国大会も開催されるなど、実は少しずつですが広がりを見せているイベントにもなっております。

この記事は スターフェスティバル スターフェスティバル Advent Calendar 2022の19日目の記事です。 最初に こんにちは！ ミーティングで最初に元気よく挨拶すると元気な挨拶が返ってくるという事に気づきました。元気なこんにちは！は気持ちが良いです。 という事で、こんにちは！スターフェスティバル株式会社でお弁当・ケータリングを中心とした「食」の総合デリバリーモールのごちクルを担当しています。こんぺいです！ 昨日は、いつも元気に挨拶してくれるあひるさんの素敵な2年間の軌跡がでした。 あっという間の2年間ですが、Joinしてくれて色々あったけど楽しかったなぁと感慨深くなりました。これからもよろしくお願いします。 今日はその記事にもあったごちクルというプロダクトのCore Web Vitals(以下CWV)の話になります。 Core Web Vitals とは Googleが提唱す

昨日は石田さんのSwagger定義から生成したAPIのテストをCIで実行するでした！ 自分があまり知らない領域の話でしたが、丁寧に解説されていて、とてもわかりやすかったです。CIでのAPIテストめっちゃよさそっ。 それでは、15日目の記事ですが、最近AWSのセキュリティ強化の一環でとして、CloudbaseというCSPMを導入したのでそのことについて書いていこうと思います。 CSPMとは そもそも、CSPMとは、Cloud Security Posture Managementの略で日本語だとクラウドセキュリティポスチュア管理と呼ばれる機能です。 AWSなどのパブリッククラウドを使うことが多い時代となりましたが、そこで発生した設定ミスによるセキュリティリスクを検知、可視化してくれます。 AWSのCSPMサービスだとSecurity Hubが該当するかなと思います。 CSPMが必要な理由 セ

この記事は スターフェスティバル スターフェスティバル Advent Calendar 2022の14日目の記事です。 スターフェスティバル株式会社 ソフトウェアエンジニアのishidaです。 先日チーム内で「Clean Craftsmanship 規律、基準、倫理」という書籍のサマリー共有会があり、テストの重要性の認識が深まっている今日この頃です。 APIのテストをCIで回せたらいいなって思ったので、Swagger定義からテストを生成してGitHub Actionsで実行してみようと思います。 方針 弊社ではOpenAPI(Swagger)を用いて開発をしていますので、 前述の通りSwagger定義からテストを生成してCIで実行したい気持ちがあります。 そのため Swagger(OpenAPI3)に対応していること CIで実行しやすい(手軽にコマンドラインで実行できる) の条件のpack

この記事はスターフェスティバル Advent Calendar 2022の13日目です。 はじめまして！ スターフェスティバル株式会社のnoseです! 今年の7月にスタフェスに入社して早いもので半年が経とうとしております。 この半年間弊社のごちクルNowのアプリをReactNativeからFlutterへ移行したのでこの場を借りて振り返ろうと思います。 また、ReactNativeでの開発については去年のYoshifujiさんの記事を御覧ください！ なぜ移行を行うことになったのか ごちクルNowではWeb、Slack、アプリの３つの注文経路がありますが去年のアプリリリースから、アプリの利用者が増えてきていたこともあり、アプリをより使いやすくシンプルにするべくUI刷新が行われるタイミングだったので、同時にFlutterにも移行する事になりました。 なぜFlutterだったのか 経験値 自分自