Storybookの情報をMCPサーバー化する「THE UI EXPERTS - AIとMCPの現在地」の登壇資料です。 日時: 2025/5/12 (月) 18:30-21:30 URL: https://the-ui-expert.peatix.com/view
ChatGPTに要件定義をお願いしたらハンパなかった | DevelopersIO
架空の営業管理システムを作ってもらう前提で、ChatGPTに要件定義をお願いしてみました。 実験として軽く試すレベルで始めてみたのですが、予想を超えるクオリティでしたので、一部始終を皆様にもご紹介します。 ChatGPTとのやりとり まず、ざっくりと必要な機能の洗い出しをお願いしてみました。 あっという間に必要な機能を網羅的にリストアップしてくれまた。私自身、SFA/CRMをいくつか触った経験がありますが、適切な内容だと思います。 中には、「データのインポート・エクスポート機能」のように、検討初期段階ではつい忘れそうな機能も含まれています。さらに頼んでもいないのにオススメの検討プロセスまで教えてくれました。気が利いてます。 機能ベースだと要件の妥当性が判断しにくく思ったので、画面ベースで要件定義してもらことにしました。 「図で教えて」とできないことをお願いしたところ、やんわり断りつつ、意図
令和時代のページネーションを考える (REST API編) - Sweet Escape
今回はバックエンドAPIでページネーションをどうやるかについての話なので、よくある無限スクロールUIのようなフロントエンド側の実装に関する話はしない。あくまでもAPI、もっと言えばRESTfulなAPIのリクエスト・レスポンスにおけるページネーションの話。 本気で深く考えるというよりざっくり検討したときの話です。 はじめに REST APIを実装するにあたってリスト系のAPIを提供する場合に必須といっても過言ではないのがページネーション。大量のリソースをレスポンスする場合にそれらを一気に返してしまうことは応答速度、転送量、クライアントサイドでの扱いづらさなどなどに繋がるので必須と言える。 最近、新たなAPIを開発するにあたってページネーションをする必要があったこともあり、今回はこのページネーションをどうやって提供するか整理して改めて検討してみた。 前提 TypeScript Nest.js
バッドUIを改善する方法 ― UIの「5つの状態」を考える | POSTD
(訳注：2020/08/22、画像と動画が正しく表示されていなかったためリンクを修正しました。) こんにちは。このブログは12月にO’Reillyから出版予定の私の著書『 Designing Products People Love 』からの抜粋です。ぜひ本も読んでみてください。また、FacebookやTwitter、 Slackなどで活躍されている20人以上のプロダクトデザイナーにインタビューもしています。* 無味乾燥なUIを経験したことはありますか？ 何か が足りないと感じてしまうようなUIを作ってしまったことはありませんか？ もしそうであれば、使い勝手の悪いUIを経験したのだと思います。 使い勝手の悪いUIには進捗インジケータがありません。ユーザにどこで障害が起きたのか知らせてくれません。怖いエラーメッセージでも表示してくれれば、なお良いのですが。わずかなデータのみの奇妙なグラフです
今からでも遅くない！誰も教えてくれなかった React とアクセシビリティーの世界
この記事は Front-End Study #3 で発表されたライブコーディングの内容を記事にしたものです。記事中のソースコードは GitHub でご覧いただけます。 この記事は、これまで一般的なフロントエンドエンジニアだった私が一年ほどアクセシビリティーについて勉強する上で 「最初に教えてくれればよかったのに〜！」と思った内容 を React と Next.js を用いて紹介するものとなっています。 読み終わった後に次にコードを書く際にふと意識できるようなアクセシビリティーの普遍的な事実を紹介し、最後に今後の React の動きについて軽く触れるものになっています。目次は次のとおりです： 基本事項 SPA のルーティングによる問題 リッチなコンポーネントでの例 Jest + React Testing Library でのテスト Reactとアクセシビリティーの今後の動き 役に立つweb
PCを離れたらマイク音量を下げるmacOSアプリを作った - 詩と創作・思索のひろば
この記事は、はてなエンジニア Advent Calendar 2020の21日目です。昨日は id:tarao による Scalaの依存ライブラリ更新はRenovateでもけっこうイケる でした。明日は id:Krouton です。 みなさん在宅勤務してますか？ 私もしています。 仕事も雑談も、とにかくオンラインで話すことが多いので在宅勤務中は AfterShokz という骨伝導ヘッドホンを使っている。ずっと装着してても疲れにくいので、大変いい買い物です。 いちいち外すのも面倒なのでほとんど一日中付けっぱなしにしているんだけど、これが事故を呼ぶこともある。マイクをオフにすることを忘れて離席してしまうと、オフのときの会話が筒抜けになってしまうので、同僚の前ではおとなしいのに家族の前では豹変するとか……。あとおしっこしてる音が聞こえちゃってないとか。気になりますよね。油断できない。 そういうわ
プログラマにできるとよさそうなこと - @ledsun blog
十行程度のプログラムが読めること プログラミング言語の文法を知っている 分岐とループを追いかけることができる 変数の状態変化を追いかけることができる 関数呼び出しを追いかけることができる 十行程度のプログラムを複数回書いたことがある プログラムを読んでプログラムの動的な振る舞いを想像できる プログラムの主な処理の結果を想像できる 主な処理の終了条件がわかる プログラムから主な処理を読み取れる 似たようなプログラムを書いて、動かしたことがある 既知のプログラムと読んでいるプログラムの違いがわかる イディオムを知っている イディオムを書いたことがある プログラムがどう動くか知っている 重複したソースコードを関数に抽出できる 重複したソースコードがわかる 同じ入力と出力をもつコードブロックがわかる コードブロック単位で入出力を比較できる プログラムのある機能がソースコードのどの部分に依存している
ぼくたちのかんがえたさいきょうのi18n国家
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事は下記のtweetから始まるスレッドに触発され、@qnighyや@na4zagin3からアイディアを拝借して書いた。 i18n力が最強の国は国内に複数の言語があり、そのうちいくつかは他国でも使われている言語の方言で、1バイト文字での代替表記が困難で、歴史的にISO-2022ベースの文字コードとUnicodeと独自エンコーディングが混在していて、フリガナなどの特殊な組版規則があり、右書き左書き縦書きを併用し、 — Masaki Hara (@qnighy) 2018年8月6日 皆さんのおかげで最強のi18n国家が建設されつつある。一
Microsoft、オープンソースの自動UIテストスクリプトツール「WinAppDriver UI Recorder」を公開
Microsoft、オープンソースの自動UIテストスクリプトツール「WinAppDriver UI Recorder」を公開：自動UIテストのスクリプトを簡単に作成できる Microsoftは、Windows 10対応のUI自動化サービス「WinAppDriver」の新しいオープンソーステストスクリプトツール「WinAppDriver UI Recorder」を公開した。 Microsoftは2018年6月20日（米国時間）、「Windows Application Driver」（WinAppDriver）コミュニティー向けの新しいオープンソースツール「WinAppDriver UI Recorder」（以下、UI Recorder）の公開を発表した。UI Recorderは、自動化されたUI（ユーザーインタフェース）テストのスクリプトを簡単に作成できるツールだ。 WinAppDrive
もう管理画面のフロントコードを書く必要はありません、そう Viron ならね。 - Qiita
管理画面のフロントエンドコードを書く時代は終わりました。 Vironがあれば、OpenApi(Swagger)でAPI定義を行い、実装するだけで管理画面が完成します。 そしてこれはOSSです。誰でも自由にお使いいただけます。 概要 Vironは、複数の管理画面を管理できるよう設計された、管理ツールマネージメントコンソールです。 APIサーバーとOAS2.0 jsonファイルを作成するだけで、管理画面が一つ完成します。 経緯 私の会社では、大小さまざまな自社サービスが開発・運用されています。 管理画面をサービス・サイト毎に作っていましたが、それには限界がありました。 エンジニアからしたら、管理画面用のデザインやAPIを作らなきゃいけない。工数がかかる。 運用・プロデューサーは、UI・UXが管理画面で違うため、操作を覚えるという学習コストが高い。 さらに外から見たいときにスマホから見れないし、
viron_20180201
CAMはエンタメコンテンツ、ビジネスバラエティメディア、ライフスタイルメディアを主軸に30以上のサービスを展開しています。エンタメコンテンツの分野では、国内外で圧倒的人気を誇るアーティストやアイドルグループとのパートナーシップを結び、オフィシャルファンサイトや動画関連サービスを運営しています。
『NieR:Automata』のUIデザイン | NieR:Automata 開発ブログ
こんにちは。『NieR:Automata』で UI (ユーザーインターフェイス) とメカデザインを担当した木嶋です。開発ブログを書くのは『ベヨネッタ2』以来になります。(以前書いた記事) 普段あまり注目されないUIですが、ありがたいことにユーザーの方々からの要望があり、当記事を執筆することになりました。UIにもヨコオさんのこだわりがたくさん詰まっているので、その一部も併せて紹介していこうと思います。 ■はじめに：UIアーティストの仕事 UIアーティストは、体力ゲージや会話ウインドウ、各種メニュー画面などゲーム内表示物を作っています。 大まかな仕事の流れはこんな感じです。 1：UIのコンセプトデザイン策定 2：仕様に合わせて各メニュー画面や表示物のデザインを量産 3：UIのゲームデータを作成してプログラマーに実装してもらう 4：動くUIを触ってみてアニメーションなどの調整、クオリティアップ
JetBrainsのWeb UIコンポーネントをオープンソース化 | Post Blog
Ring UIを発表します。Ring UIはオープンソースのWeb UIコンポーネントです！ JetBrainsは何年にも渡ってRing UI ライブラリを開発してきており、複雑なUIコントロールを提供します。Ring UIは50を超えるReactコントロールからなり、シンプルなリンクやボタンに始まり、デートピッカーやデータリストといった洗練されたコントロールまで揃っています。 このライブラリはYouTrak、Hub、Upsourceをはじめとする製品でフル活用されています。そしてJetBrainsはこのライブラリを今後も引き続きメンテナンスしていくことにコミットします。 Ring UIライブラリを使う場面として一つあげられるのがHubのダッシュボードに組み込みカスタムウィジェットの開発です。Ring UIを使うことでお馴染みのJetBrainsのインターフェースに馴染みます。是非クイック
ロード時のスピナーとプログレスバー、どう使い分ける？
お店で誰かに商品の場所を尋ねたとして、その相手がただそこに立ったままだったとしたらどう思うでしょうか。きっとイライラして、その場を立ち去りますよね。同じように、ユーザーは長い間スクリーン上のスピナー（通信やローディング時にくるくる回るアニメーション表示の）を見ていると、このような心理状況に陥ります。 スピナーは時間のかかる処理には適さない スピナーは、その処理が終わるまでどのくらいの時間を要するのかをユーザーに伝えません。長時間の処理にスピナーを使うと、最終的にユーザーはアプリに何か問題が起こったのではないかと疑問に思うでしょう。フィードバック無しでは不確実性が生じ、ユーザーは最悪の場合を想定することになります。 ユーザーは読み込みに時間がかかるだろうと考え、待つ気をなくすのです。そしてしびれを切らして、戻るボタンを押したり、またはアプリを終了したりするでしょう。 ４秒ルール ユーザーをア
快適なUXを実現するOptimistic Updates(楽観的更新)とは何か
先日、とあるJavaScript関連の記事を読んでいたところ、"Optimistic Updates" という技術が紹介されていました。 日本語に直すと "楽観的更新" といったところでしょうか。 はじめて聞いた言葉で、日本語の記事も見当たらなかったため記事にしてみます。 #Optimistic Updatesとは Optimistic Updatesというのは、ネイティブアプリやSPA(Single Page Application)などで使われる技術で、非同期の通信処理が成功するという前提(楽観)のもとに、通信のレスポンスを待たずに次の処理を行うというものです。 最も多いOptimistic Updatesの使い方は、UIへの反映をリクエストの結果を待たずに行うというものでしょう。 #Optimistic Updatesの例 例えば、よくある「いいね」ボタンのようなものにOptimis
スクロールは制御するな - Weblog - Hail2u.net
WWD Japanのウェブサイトがリニューアルして、スッキリした見やすそうな印象のものに変わった。しかし実際のところ見やすさは見せかけだけで、ナビゲーションをクリックしても見当違いのタブに切り替わったり、ニュース一覧からニュースをクリックしたら、要約ページへ移動するだけで、本文へはもう一度クリックしなければならなかったりする。中でもひどいのがMobile Safariでの閲覧だ。 このウェブサイトではスクロールをほぼ自前で制御しようとしているため、常にこのようにMobile SafariのURLバーとツールバーが上下にそれぞれ表示され続ける。その上、最上端にロゴとグローバル・ナビゲーション、最下端に広告がそれぞれ固定位置であるので、コンテンツの領域がかなり制限されている。iPhone 5SやSEどころか6+や7+でさえも致命的なのではないかと感じられる狭さだ。 とにかく文書を読ませようとい
今さら聞けないUI（ユーザーインターフェース) の基本 デザイン会社 ビートラックス: ブログ
ユーザーインターフェース（UI）- どこかで聞いたことはあるしなんとなく想像は出来る。”このアプリのUIはイケテル”や、”UIデザイナー募集”など、最近ではテクノロジー系の記事や、デザインに関する話の中に頻繁に出てくるこの言葉。 しかしちゃんと言葉で説明してみてと言われると意外と難しい。 興味はあるけどはっきりとはわからない・わかっているつもりだけどもう一度復習したい・現状はわかっているからこれからのUIついて知りたい。 そんな人たちに向けて ユーザーインターフェースの歴史良いUIと悪いUIの違いUIのこれからという3つのセクションに分け、インターフェースの本質をまとめた。 1. ユーザーインターフェースの歴史そもそもインターフェースってなに？そもそもユーザーインターフェースの「インターフェース」とはどういう意味なのだろうか。「境界面・接触面」などと訳されるこの「インターフェース」という言
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Native for Webのこれまでから読み解くReact GUIのこれから
宣言的UI
アプリを最速でリリースした話 #pixiv Night 4
