テーブルの実装には、react-data-table-componentや、MUIのDataGrid、MantineUIのMantineDataTableなどが用いられてきました。 今回はテーブルのHeadressUIライブラリであるTanstackTableと、RadixUIとTailwindCSSで実装したコンポーネント群であるshadcn/uiを使って、簡単なテーブルを作ります。 shadcn/uiについて Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. あなたのアプリにコピー&ペーストできる、美しくデザインされたコンポーネント。アクセスしやすい。カスタマイズ可能。オープンソース。(機械翻訳) shadc
無料で使えるSVGアイコンはたくさんありますが、使い勝手がよいシンプルなデザインで、バリエーションも豊富となるとなかなか見つかりません。 WebサイトやスマホアプリのUIでよく使うアイコンが1,470種類、カラー・サイズ・ストロークの変更もサポートしているSVGアイコン素材を紹介します。 Lucide Lucide -GitHub LucideはFeather IconsのForkで、Featherに対する不満が高まったことによりコミュニティ運営で始まったプロジェクトです。FeatherにはたくさんのIssuesやPRが未解決で放置されており、これらの対応はされていません。 Lucideのアイコンは、元のシンプルなデザイン言語に忠実なまま、可能な限りアイコンセットを拡張しています。ライセンスはISC Licenseで、個人でも商用プロジェクトでも無料で利用できます。
はじめに 気になっていたYamada UIを使って簡単な一言日記アプリをつくってみました! なお、これまでに使用したことがあるUIコンポーネントライブラリはChakura UIくらいです。 私自身CSSやデザインの学習経験は全くないので、今回のアプリにおいてもかなり雑な印象を受けるかと思いますが、あくまでもYamda UIを使ってみたかっただけなので、温かい目で見ていただけると幸いです。。 今回の使用言語はReact×TypeScriptです。 Yamada UIとは(ざっくり) 日本人の山田さんが開発されたUI コンポーネントライブラリです。 他のUIコンポーネントとの違いや詳細等は下記に簡潔にまとめられています。 使ってみた感想 1.公式ドキュメントが日本語&説明が丁寧 前述のとおり、開発者が日本人なので基本的にすべて日本語でした。 また、山田さんのドラゴンボール好きが興じてちょくちょ
Coming Soon We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates. Just a demo The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements m
この Xwin-LM-13B-V0.1 モデル、13B(130億パラメーター)でありながらAlpacaEval ベンチマークにおいてなんとGPT-4に僅差で勝利している。対ChatGPT戦に至っては圧勝である。 しかもこのモデル、GPTQで量子化したTheBloke/Xwin-LM-13B-V0.1-GPTQ であれば7.26 GBである。 ついに家庭用ゲーミングPCでGPT-4が動く時代が来たのだ。 今を未来と呼ばずしてなんと呼ぶ。 というわけで、ローカルの Text generation web UI で Xwin-LM-13B をロードして色々推論して遊んでみます。 2. WebUI での実行今回はmainブランチのモデルを使用しています。 4ビット、アクトオーダー、グループサイズ128g。 VRAM使用量は64Gよりさらに少ないが、精度は若干落ちる。 Model タブの Downl
WebサイトやスマホアプリのUIにトーンを合わせたカラーを使用すると、デザインに統一感が生まれます。このトーンを合わせたカラーというのは、明度と彩度が一貫されたカラーのことです。 デバイスに依存しない、トーンを合わせたカラーパレットをOKLCH色空間で簡単に作成できる無料ツールを紹介します。RGBやHEX値もサポートしています。 The good colors The good colorsは、OKLCH色空間を使用してカラーパレットを作成できるオンラインツールです。OKLCH色空間とは、明度(Lightness)、彩度(Chrome)、色相(Hue)の値で構成されるカラーで、LCHに比べて色相と彩度の均一性が改善された色空間です。そのため、明度と彩度が一貫された知覚的変化が保証されます。 OKLCH色空間を使用したカラーパレット 使い方は、簡単です。 「Lightness」と「Chrom
概要 私が開発しているWebアプリケーションではUIライブラリとして MUI を使っています。 そのMUIがFigma用のUI Kitを公式に提供しています。 FigmaのUI Kitとは定義済みのUIコンポーネントが沢山入ったFigmaファイルの事を指しています。 コーディングにおけるライブラリの様なもので、オリジナルのデザインをFigmaで作成する時にUI Kitで定義されたUIコンポーネントを再利用することで、典型的なデザインを自分で作る必要が無く、結果的に高品質なデザインをより短時間で作成できるメリットが期待できます。 実際に私もこのUI Kitを使っていて、とても気に入っているので紹介します。 導入方法 MUIのFigma UI KitはMUIストアで販売されています。 こちらのKitではMUIが提供している全ての機能、コンポーネントを使うことが可能です。 有償での販売となってい
今までちゃんと使ったことがなかったTikTokを最近がっつり触ったところ、UIやインタラクションの細かな作り込みに気づくことが多く、発見の連続でした。今後の機能開発やUIデザインの参考にもできそうなので記事にまとめます。 調査期間:2024/1/22 - 1/29 使用環境:iPhone 15、iOS17 1. アクションなしの没入体験TikTokで最も特徴的なのは動画フィードでのレコメンドの仕組みです。フルスクリーンで表示されるショート動画が上下のスワイプで切り替わり、視聴行動(視聴時間やスキップなど)に応じて次の動画がレコメンドされ続けます。そのため利用者はフォロー、いいね、コメントなどの主体的なアクションを一切しなくても、フィードをスクロールするだけで自分好みのコンテンツが表示され続けます。 動画フィードでは利用者の視聴行動に応じて動画が次々とおすすめされるTwitterやInsta
OpenAI が公開した Function Calling の API を使用すれば、定義した関数の情報を渡すことで、自然言語からどの関数を使用すべきかどうかを判定し、引数も json スキーマに従ってレスポンスしてくれます。 この情報を使って API クエリを実行し、レスポンスを元に UI を動的にレンダリングすれば、自然言語から UI が描画され面白いのではないかと思い実践してみました。 この例では、Function として OpenWeatherMapと REST Countriesを定義しています。 その他にも世界銀行の人口データからチャートを表示したりと、自然言語とコンピューター言語の融合がますます進みそうでかなりワクワクしました。 やりかた 今回は Next.js (App Router) と Vercel AI SDK を使用しました。全体的な実装は GitHub に載せてい
※本ページは、アフィリエイト広告を利用しています。 CSS Gridをそろそろ真剣に覚えないと、思っている人にぴったりの解説書を紹介します。 Web制作系の解説書で評価が高いエビスコム様の最新刊で、本書もかなり充実した内容となっています。CSS Gridの基礎知識はもちろん、基本のグリッド、さまざまなレイアウトやUIコンポーネントの実装も豊富で、簡潔なコードでかなりしっかりと解説されています。 本書は、先週発売されたばかり! Web制作に携わる人すべてにお勧めの解説書。HTMLとCSSに携わるコーダーの人はもちろん、こういうレイアウトやコンポーネントができるというのがよく分かるのでデザイナーやディレクターの人にもお勧めです。
マイクロソフト、UIコンポーネントにAI搭載。UIが賢く振る舞う「.NET Smart Components」実験的公開 マイクロソフトはUIコンポーネントにAIを搭載することで、ユーザーの意図をくみ取って賢く振る舞ってくれる「.NET Smart Components」を実験的に公開しました。 入力内容をAIが自動的に適切なフィールドへペースト .NET Smart Componentsがどのように賢く振る舞ってくれるのか、デモ動画からの引用で紹介します。 従来のUIコンポーネントでは、例えば「苗字」「名前」「電話番号」「郵便番号」「県名」「町名」「番地」などにフィールドが分かれていれば、人間がフィールドに合わせて適切な内容を入力する必要があります。
中学生を名乗れるのも残りわずかということで、記念に(記念に?)なにか残しておこうと思います。 本当はフロントエンド関連で書こうと思っていたのですが、半年近くコードを書いていなかったのと(言い訳)、そもそも僕の技術関連の知識のほとんどは既に知られていることばかりだと思ってしまった(勉強してください..)わけですが、UIならなんとか語れる気がします。 この記事について 僕がUIを作る際の感覚的なマイルールを言語化してみました。 この記事の内容は僕の蓄えてきた感覚だとか直感を基にして書いているので、一般的な考えと合わないところがあるかもしれません。そういうときはぜひコメントで指摘してください。 色の決め方 さて、本題です。UIを構成する要素は、余白、大きさ、構成、... とまあ様々です。そして「色」はこれらの中でもトップレベルで重要な要素ではないでしょうか。例えば、背景色の小さな違いでも画面全体
Spindle UIについて Spindle UIとは、 CyberAgentが提供するブログサービス、「Ameba」のデザインシステムである「Spindle」に内包されたUIライブラリの総称です。 Spindle UIは、「Ameba」に属する者がAmebaらしさを一貫して体現するために必要な必要十分な共通Component郡で、その全てが「Ameba」のブランド指針に準拠するものです。 「Ameba」の開発者はSpindle UIを参照し、共通化されたライブラリから任意のComponentを再利用することができます。 また、Spindleコントリビューター(通称 : Spi...
和製CSS-in-JSライブラリの Kuma UI はHybrid Approachという新たな手法によって、優れたパフォーマンスを実現しています。この手法の仕組みから、「なぜKuma UIが速いのか」を紹介します。 Hybrid Approach とは Hybrid Approach とは一言で言うと、EmotionやChakra UIのような従来型のランタイムCSS-in-JSの書き味を完全に保ちながら、できる限りゼロランタイムに変換する手法です。 具体例を見てみましょう。Kuma UI では、クリックすると文字色が変わるボタンを以下のようにChakra UIっぽく書くことができます。 import { Box } from "@kuma-ui/core"; export default function App() { const [colored, setColored] = us
最近Scala.jsの話をすると結構な人がRTしてくれる。TypeScriptの他にAltJSには今どんなのがあるのかな、という話に引用RTでScala.js今アツいですよという話をしたら結構ウケた。世間的にはTypeScript alternativeに興味がある人も多いようだ。一方、ネットに残っているScala.js情報は数年前のものが多いようで、あまり積極的に日本語での情報発信がなされていない様子。そこで、ここ最近Scala.jsはどういう感じなのか、そしてどうすれば始められるのかという情報をまとめると需要があるかもしれないと思い、書くことにした。 Scala.jsは数年前まではオモチャみたいな感じだったんですが最近はTSのライブラリから自動で型が生える仕組みがあったりめちゃバンドル小さくなったりとめちゃくちゃ進化してます!! https://t.co/c06IZGWhYF— Win
WebサイトのUIに使用するヘッダ、ボタン、イラスト、カード、カラム、ラインなど、UI要素のさまざまなカラースキームをまとめた配色サイトを紹介します。 カラースキームはページ全体、コンポーネントごとにまとめられており、それぞれのカラーは16進のHEX値が記載されています。各カラーをクリックするだけで簡単にコピーして利用できます。 Spectrum.Art Spectrum.Artは魅力的で視覚的にも優れたUIデザインを簡単に実現するために、UIデザイナーが厳選した色の調和に優れたカラースキームをまとめたサイトです。鮮やかで人目を引くカラースキームから、繊細でエレガントなカラースキームまで幅広いオプションが提供されています。 Spectrum.Art 2023年9月現在、カラースキームは16種類あり、各カラースキームはページ全体やコンポーネントごとにまとめられています。 では、Color s
こんにちは、Technology部のジョシュです。 今回は、OpenAIのDALL-EとChatGPTを使用して、UIデザインからコーディングまで行う方法を紹介します。 DALL-Eはテキストからリアルな画像を生成できるAIツールですが、添付された画像を分析し、それをもとにコードを生成することもできます。 本記事ではDALL-Eを使ってUIデザインを作成し、生成された画像をもとにChatGPTでTypeScriptのコード生成を行いました。実際に使用したスクリプトも紹介しつつ、実装までの流れを解説したいと思います。 DALL-EとChatGPTでデザインを作成する 基礎知識:今回使うツールについて 今回は下記3つのツールを使用します。 ChatGPT:テキストを理解し、会話を生成するために訓練されたOpenAIのAIモデル。今回のプロジェクトではアイデア出しやコードのブラッシュアップに使用
人とコンピュータの関係を考えると、二者間には常にインタフェースが存在します。本連載では、人とコンピュータの間に介在するインタフェースに着目し、インタフェースとそれらを世に生み出すプロダクト開発について議論します。Helpfeelが、独自のインタフェースを実装しながら、便利さと楽しさを備えたWebサービスをどのように開発しているのかについてお伝えします。 こんにちは。yuisekiです。Helpfeelでメディアキャプチャーツール「Gyazo」のプロダクトマネージャーをしています。今回は、Gyazoの設計・開発の過程で得られた、人間の認知や判断、行動や操作に関する知見を紹介します。 人間の速さへのもう一つの視点 本稿でみなさんに最もお伝えしたいのは、「人間は極めて速いけど、遅いほうが適切な場面もある」ということです。前回は、「人間は極めて速い」という事実を前提として、ソフトウェアにおける実際
この記事の概要 2023 年 9 月 8 日に、Qiita ではダークテーマ UI の提供を開始しました。 Qiita が生まれたのは 2011 年 9 月 16 日で、およそ 12 年の月日を経てダークテーマへ対応しました。 これだけの期間続いているサービスにダークテーマを適用した事例は日本でも少ないと思うので、実施したことを記事にしてみました。 なお、Qiita 特有のコードの話は少なめに、多くの場所で役立ちそうな内容に絞っています。 対象読者 UI デザイナー / フロントエンドエンジニア 現在運用中のサービスにダークテーマを適用したいと考えている人 ダークテーマ単体の作り方は分かるけど、既存の UI に上手く追加する方法が分からない人 実施したこと デザイントークンの更新 モックアップにトークンを適用 ベータ版としての提供 正式版としての提供 デザイントークンの更新 まずはデザイン
※この投稿は米国時間 2024 年 8 月 3 日に、Google Cloud blog に投稿されたものの抄訳です。 多くの組織が、クラウド移行とモダナイゼーションのための Infrastructure-as-Code ツールとして Terraform を使用しています。以前のブログ投稿では、Google Cloud Marketplace からの VM インスタンスのデプロイに Terraform を使用することで、組織に合ったエンタープライズ グレードのクラウド ソリューションを容易に発見、調達、デプロイできることをお伝えしました。本日は、Google Cloud Marketplace のユーザー インターフェース(UI)から、Terraform スクリプトを使用して数回のクリックで VM をデプロイする手順をご紹介します。 では、詳しく見ていきましょう。 Marketplace
はじめに こんにちは。READYFOR でフロントエンドエンジニアとして働いている菅原(@kotarella1110)です! 私は OSS が大好きで、React Hook Form や Kuma UI のメンテナとしても活動しています。 弊社のプロダクトでは CSS ライブラリとして Emotion を採用していますが、ランタイムでのパフォーマンス上の問題や App Router 非対応等の理由から、ゼロランタイム CSS ライブラリへの移行を検討しています。このような背景から、ゼロランタイム CSS に関する話題が社内で頻繁に取り上げられています。 そこで本記事では、その中でも私がメンテナとして関わっている Kuma UI がどのように React Server Components をサポートしているかを詳しくご紹介します。 Kuma UI とは? Kuma UI は、新しい手法であ
株式会社Colorful Palette クライアントエンジニア 大河原 壱成 株式会社サイバーエージェントに2022年新卒入社。主にUnity製ゲームプロジェクトのグラフィックス開発に携わる。 Unity Learning Materials 株式会社Colorful Palette クライアントエンジニア 山口 智也 株式会社サイバーエージェントに2020年新卒入社。現在は株式会社Colorful Paletteでグラフィックスエンジニアとして業務。『プロジェクトセカイ カラフルステージ! feat. 初音ミク』では主に3Dやバーチャルライブ周辺の実装を担当 X GitHub Unity Learning Materials サイバーエージェントのゲーム・エンターテイメント事業部(SGE)による初のカンファレンス「CyberAgent Game Conference 2024」が3月7
Progressive blur(プログレッシブ・ブラー)というのは、少し前からにわかに流行り出しているUIのスタイリングに関する表現の一つです。Variable blur(可変ブラー)、Gradient blur(グラデーション・ブラー)と呼ぶこともあります。通常のブラー効果(ぼかし、ガウスブラー)とは様相が少し異なります。 例えば次のイメージはProgressive blurの例です。通常のボカシ表現とどこが違うのかわかりますか? Progressive blur(プログレッシブ・ブラー)の例 Gaussian blur vs. Progressive blurわかりやすい比較用の画像を用意しました。まずは通常のGaussian blur(ガウスブラー)です。 Gaussian blurGaussian blurは一般的なブラー効果です。ご覧のように与えた一つの半径パラメータのみで均一
Last update 2-18-2024 ※モデルのディレクトリを変更して統一する等もしているので、よければ参考にしてください。 ▼ 0. 本記事について0-1. 概要 現在使用しているAUTOMATIC1111氏のStable Diffusion web UI(以下AUTOMATIC1111版)と、Stable Diffusion WebUI Forge(以下Forge版)設定に関する個人的なメモです(Extensionの話は出てきません)。 別で、Stable Diffusion WebUI Forgeの導入記事もあります(難易度はAUTOMATIC1111 web UIと同程度)。 ▼ 1. ディレクトリ構成とバッチファイル バッチファイルのファイル名はお好みで変更してください。 1-1. ユーザーディレクトリ コマンド プロンプトを開くとユーザーディレクトリから始まるため、ここ
はじめに ABEMAは、配信するコンテンツのジャンルや作品数が多いことが特徴です。 それらのコンテンツをどのように構造化し、モデリングするかは、UIの表現や使いやすさに大きな影響を与えます。 2016年に開局して以来7〜8年が経過し、複雑化した概念モデルとUIを改善するためにコンテンツモデルに焦点を当てました。 本プロジェクトのリードとデザイナーを務めた @skskeee が記事を執筆しています。 従来のコンテンツモデル ABEMAは元々地上波テレビのようなリニア型の編成を実現していました。その後にビデオオンデマンド型の配信を追加し、近年ではPPVなどの新たな配信形態も生まれています。 当初設計した構造としては、シリーズ、シーズン、エピソードといったシンプルなコンテンツモデルでした。 しかしながらABEMAの配信コンテンツはアニメやドラマなどの「ストーリーもの」だけではなく、バラエティ、ス
他にもAmazonギフト券や楽天ポイントが貯まるキャンペーンを紹介中! 5分程度の登録作業で高時給バイトになりますね👍 キャンペーン一覧はこちら 【UI銀行】 振込手数料とATM無料回数は? ステージ別に解説!不動産クラウドファンディングやソーシャルレンディング投資の際の振込手数料が痛い! という方向けに『10万円入金しておくだけで月に5回無料になる』UI銀行をご紹介します。 また、資金力のある方は最大月20回まで無料にすることができます。 この記事でわかること ・UI銀行とは ・UIプラスステージについて ・振込手数料と無料回数 ・ATM手数料と無料回数 ・UI銀行のメリット ・デメリットと注意点 ・UI銀行の安全性とセキュリティ ・大丈夫?怪しい・危険などの口コミは? ・まとめ
Development preview Catalyst is currently in development preview and only available to all-access customers to help us refine the experience. Catalyst is a modern application UI kit built with Tailwind CSS, Headless UI and React, designed and built by the Tailwind CSS team. It's a collection of beautiful, production-ready UI components you drop into your projects alongside your own code that are y
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く