どうも、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="

この記事は、スターフェスティバル Advent Calendar 2022の 10 日目の記事です。 はじめに スターフェスティバル株式会社 エンジニアの@nano72mkn です！ 先日、社内でオブジェクト指向UIについて考える機会があったので 「オブジェクト指向 UI デザイン -使いやすいソフトウェアの原理-」 という本を読みました。 みなさんは、オブジェクト指向 UI というものを知っていますでしょうか？ 検索などをしているとオブジェクト指向UIというよりも、 Object Oriented User Interfaceの頭文字を取ってOOUIと表記しているところが多いですね 実は、GUI が誕生した時から存在していた言葉らしいですが、 GUI の方が浸透してしまいOOUIのほうはそこまで普及しなかったようです。 そんなOOUIについて、今回は図解しながら解説していきたいと思います

おはようございます！こんにちは！こんばんは！はじめまして！ スターフェスティバルの DPontaro です！ この記事は スターフェスティバル Advent Calendar 2022 の5日目の記事です！！！！！ 昨日はあひるさん の terraform のお話でした。 私もterraformはまだまだ慣れておらずで、こうした実例はめっちゃ参考になりますね！ さてさて本日はインフラからは離れてPrismaというORMについて紹介します！！！！！ Prismaとは Node.js、TypeScript用のORMです。 仲良くなるまで多少の苦労は伴いますが、それに見合うメリットがあります！ migration と Prisma Client まずは Prisma schemaを定義します。 このschemaファイルは、DBテーブルの定義とPrisma Clientが生成するmodelの定義を

循環的複雑度が閾値を超えた Pull Requests に、自動的に変更をリクエストする 「コードの品質を、維持したいよーーー」 ということで、テストや Linter を GitHub Actions で実行している環境はよくあると思いますが、今回は 循環的複雑度 を継続的に計測して、閾値を超えた場合に自動的に Pull Request に対して Request Changes のレビューをしようという試みです。 Lizard この例では、Lizard を使用して CCN を計測します。 おそらく似たようなツールでも同様に実行することができると思います。 Lizard は Python で開発されている CCN 計測ツールです。（追記：シンプルに書いてしまいましたが、もちろん他の指標も計れます） 以下のようにサポート言語が多いので、大抵の場合で採用できそうです。 サポート言語 (1.17.

スターフェスティバル株式会社 の バックエンドエンジニアの @ikkitang です。 上記の自己紹介にもありますが、私はプライベートで日本PostgreSQLユーザー会の理事をやっていて、その活動の一貫として先日の 2022-10-01（土)に行われたOpen Source Conference 2022 Online/Hiroshimaで最新バージョンのPostgreSQL15の最新機能について発表してきました。 スライドは公開しておりますので、以下を見て頂く事で全てを完全に理解していただけるかもしれませんが、解説しながらまとめたいと思います。 PostgreSQLのリリースサイクル PostgreSQLはPostgreSQL開発コミュニティというユーザーグループ主導で開発されています。 毎年9~10月にメジャーバージョンをリリースしておりまして、今年はPostgreSQL15のリリー

スターフェスティバル株式会社 エンジニアの@nano72mkn です！ 今回は、GW にエンジニアが Figma に入門した時のこれ覚えておけば Figma 活用できるんじゃない（個人的意見）のまとめをしていこうと思います！ Figma 活用技術 これから紹介する機能たちは、同じ要素を使い回す場合にとても力を発揮します！ エンジニアで Figma を触らないといけなくなった時、使い回し技術だけでも習得しておけばデザインを崩すことがなく手を入れることが可能です！ AutoLayout フロントエンジニアの方にはFlexBoxとpaddingが設定できるようになる機能といえばイメージが湧くと思います！ 等間隔で配置させることができる 各要素間をひとつひとつ調整する必要はないです！ 要素の内側に余白を持たせることができる ドラッグ＆ドロップで簡単に並び替えができる 並び替えた後に他の要素の位置を