はてなブックマーク

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

こんにちは、ネットではウマたんというハンドルネームで活動していて普段はスタビジというメディアやスタアカという教育サービスを運営しています。 普段は主にAIデータサイエンスまわりの発信活動や事業を展開しているのですが、2024年から海外に移住し海外向けのサービスを作っています。2024年はとりあえず12ヶ月で12個のサービスを作る挑戦をしています。 その挑戦に関しては以下の記事に書いてますので興味のある方は見てみてください。 ただ、とりあえず海外でサービスを作ってもなかなか上手くいくわけがない。 そこで先人たちの知恵を借りるために、海外の成功してる個人開発者をリサーチしてニュースレターで配信してます。 ということでこの記事では、今までリサーチしてきたすっごい海外個人開発者たちの情報をまとめていきたいと思います（※随時更新予定）。 Pieter Levels（ピーター・レベルズ）氏 （出典：h

こんにちは、ネットではウマたんというハンドルネームで活動していて普段はスタビジというメディアやスタアカという教育サービスを運営しています。主にAIデータサイエンスまわりの発信活動や事業を展開してます。 バックグラウンドはデータサイエンスなのですが、サービスやコンテンツなど、何か誰かの目に触れるもの・誰かに使ってもらえるもの・誰かの役に立つものを作ることが好きで、2024年は12ヶ月で12個のサービスを立ち上げる挑戦をしています。 また同時に2024年頭からジョージアという国に拠点を移して海外で挑戦してます。めちゃくちゃいい国なので興味のある方はぜひお越しください！案内します。 さて、12ヶ月で12個のサービスを立ち上げる挑戦って異常に思えるかもしれませんが、実は海外だとよくある挑戦なんです。 最初にはじめたのは超有名なオランダ人の個人開発者「ピーターレベルズ」。 代表的なサービスは以下。

生成系AI時代で誰でも簡単に自分のプロダクトを作ってリリースできるようになった世の中で何もしないのはもったいない！エンジニアでなくても生成系AIを使って爆速で個人開発をしてアプリをリリースしてみよう！

最近お仕事柄TypeScriptを触ることが増えてきました。LSPが整っているのでコードの定義の確認やコードジャンプなどは困っていなかったのですが、イイ感じにデバッグする環境が整っていないことに気づきました。 調べたところnvim-dap-vscode-js という素敵なプラグインを見つけたので、設定の流れをまとめておきます。 導入 READMEに沿ってインストールを進めます。私の環境では lazy.nvimを利用しているので、書き方を変えています。この辺りはお使いのパッケージマネージャーの書き方で読み替えてください。 { "mfussenegger/nvim-dap", dependencies = { "rcarriga/nvim-dap-ui", "theHamsta/nvim-dap-virtual-text", "mxsdev/nvim-dap-vscode-js", { "mi

こんにちは、ネットではウマたんというハンドルネームで活動していて普段はスタビジというメディアやスタアカという教育サービスを運営しています。主に基本AIデータサイエンスについて発信する活動をしています。 最近は色んなサービス開発や海外事業の立ち上げに挑戦しているのですが、やっぱりそう簡単にうまくはいかない。ということで様々な挑戦をする中で失敗に終わったサービスについて自分のための備忘録もかねてつらつらと書き連ねていきたいと思います！ （正直失敗と書いてますが、サービス開発の厳しさを知るめちゃくちゃいい経験だったので失敗だとは思っていません。笑 どんどん失敗しよう！） いい感じにグロースしているサービスもあるのでそれについては別の回で書く予定です。 失敗したサービスTracky（トラッキー）とは Tracky（トラッキー）は自分の書いた記事を他の競合と比較して文字数を増やした方がよいよーとかキ

本書は基本的には無料で公開しています。 開発生産性という言葉が世に広まりつつあります。 このカテゴリに関する記事の多くを見てきましたが、開発生産性という言葉の概念や考え方に対するものが多く、具体的な打ち手やアクションに対するアウトプットが少ないと感じていました。 そこで本書は、開発生産性を向上させるための基本的な考え方と、それに対する向き合い方を読者に届けたいと思い執筆しています。 本格的な実践内容に関しましては、 https://zenn.dev/starfish/books/6966f2e8450a70 にて公開していますので、そちらも併せて参考にしてみてください。 実際に読んで、読者の皆さんに何かしらの気づきを届けることが出来たのであれば、投げ銭感覚で購入ボタンを押していただけたら幸いです。

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

本書は基本的には無料で公開しています。 開発生産性という言葉が世に広まりつつあります。 このカテゴリに関する記事の多くを見てきましたが、開発生産性という言葉の概念や考え方に対するものが多く、具体的な打ち手やアクションに対するアウトプットが少ないと感じていました。 そこで本書は、開発生産性を向上させるための基本的な打ち手と、それに対する具体的なアクションを読者に届けたいと思い執筆しています。 実際に読んで、読者の皆さんに何かしらの気づきを届けることが出来たのであれば、投げ銭感覚で購入ボタンを押していただけたら幸いです。

こんにちは。スターフェスティバル株式会社の ikkitang です。 先日、自分が所属するエンジニアチームにて、障害対応の振り返りを実施した所、チーム全体で学びを得る事が出来たので、それについてブログを書いてみたいと思います。 発生した障害について アーキテクチャの前提共有 ある程度、障害について把握した上で読み進めてもらう方が良いように思いますので、同じような障害が発生する例を出しておきたいと思います。（弊社のアプリケーションの話をすると、コンテキストを色々説明する必要があるので、抽象化します。） 今回障害が発生したアーキテクチャの例が上図です。 自分達のチームは今、既存のシステムのリプレースを進めています。 ( 参考: DBリファクタリングのデータリモデリング勘所) ある課題解決の対応で、旧DBへの書き込みをし、それを Debeziumというアプリケーションを使い、旧DBのIn

こんにちは、ikkitangです。 この記事は スターフェスティバル Advent Calendar 2022 の9日目の記事です。 昨日は delucci さんの事業側と開発側、そんな垣根なく一緒にプロダクトをつくるポイントでした。 私も内山さんと同じチームなのですが、弊チームはお客様視点で見た時に窓口となる方々（営業やオペレーションの方）と一緒にプロダクト開発をしています。同じ方向を向いて仕事をしているはずが、どうしても完了イメージに差異が出たり...みたいな事が発生する事もあってもどかしかった所で内山さんやもう一人のPMロールのエンジニアの方と一緒にめちゃくちゃ会話する時間を設けたりなど、記事にあった改善をまさに目の前で見せてもらってる所だったりします（めちゃくちゃ頼りにしてますw) 本当記事中にあった、「絵を描いてみせる」重要だなぁぁぁって思います。 では、本題 今回は、業務の中で

こんにちは！ スターフェスティバルでインフラエンジニア/データ基盤エンジニアをやっております @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の 24 日目の記事です。 みなさん！ クリスマスイブですね！ ユダヤ暦では日没から一日が始まっていたので、 24 日の午後（イブニング）からメリクリって言っても良いらしいですねー 前日は、まつやの2000 行の SQL が流れてた話でした！ はじめに 今年（2022 年）の 8 月ごろ、親から来年（2023 年）の PDF カレンダーが欲しいと相談されていました。 それならサクッと出来そうだなーと思って・・・気づいたら 12 月になっていました。 すでに 2023 年の PDF カレンダーは入手できたそうですが、 また来年の 8 月になったら欲しいと言われるだろうなと思うので作ってみました。 PDF カレンダー作成サイトを作った時に使った PDF-LIB について書いていこうと思います。 構成 React： v18

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

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

昨日は石田さんの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だったのか 経験値 自分自

昨日は、あひるさんの知らない技術まみれのチームに移動した時に実践したことでした。 畑の違う技術や分野に挑戦するときはすごい体力がいりますが、そこに果敢に挑戦して成果を出し続けている姿に日々刺激をもらっています..! 改まして、こんにちは！ @koonagiです。 普段はインフラエンジニア兼データエンジニアとしてTerraformを書いたり、CI/CD作ったり、ETL処理書いたりしています。 普段とは違うことをしてみようと音声認識モデル『Whisper』をつかってみたので、そのことについて書いてみようと思います。 Whisperとは Whisperってなんなのよというところからですが、最近流行っているChatGPTやGPT-3を開発しているOpenAIが開発している音声認識モデルです。 モデルで利用しているトレーニングデータはウェブで収集したデータでなんと68万時間分のデータとなっております

この記事は、スターフェスティバル 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の定義を

OSSにPRが取り込まれました スターフェスティバル株式会社 エンジニアのDPontaroです。 先日OSSへPRを出し、無事取り込まれるという経験をしました。 なにげに初めてのことだったので、 自身が抱いていた印象と実際に取り組んでみた感想を記事に起こしてみます。 OSSコミットへのハードルを感じてる方への背中を押せる内容になっていれば幸いです。 遭遇したバグ 直近取り組んでいたプロジェクトではORMとしてPrismaを採用しています。 Prismaではテーブルの関係性をprismaというファイルで記述します。 このprismaファイルからER図を生成するprisma-erd-generatorというnpmパッケージを導入し ER図のドキュメント管理を自動化しようと試みました。 ですが、特定条件化でプライマリキーが定義した名称と違うものが割り当てられるバグがあり 取り込みが一旦見送られま

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

useStateと同じ感覚で、グローバルのstoreをかけるので、これが最も使いやすいstore管理なのではないかなと思います。 今まで状態管理で、ReduxとかMobxとか、あれやこれや悩んでいたことが嘘のように一掃される感。 俺はこれを待ってたんだ感がします。すごいライブラリ！ zustand - npm pmndrs/zustand: 🐻 Bear necessities for state management in React Code import { useStore } from "./store"; import "./styles.css"; export default function App() { const countDefault = 1; const { count = countDefault, setCount } = useStore(); ret

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

ある日の出来事 スターフェスティバルのDPontaroです。 GWに差し掛かる頃でしたでしょうか。社内slackでこんなやり取りがありました。 といった流れで作業していくこととしました。 調査開始 関連アプリケーション ひとまずアップデートを行うことで、どのアプリケーションに影響があるのか調査を行うこととなりました。 本番環境で対象となっていたElastiCacheインスタンスは2台。 ありがたいことに、使用状況のドキュメントが残されており Redis上のどのdbが、どのアプリケーションで使用されているかまとめられていました。 ドキュメントによると、関連するアプリケーションは10ほどありましたが、 ほとんどがセッション情報や、クエリのキャッシュ情報なので 大きなリスクは無さそうだなと”この時は”思いました。 さて、えてしてドキュメントというのはメンテが追いついていない可能性もあるため 記載