Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
おもちゃ箱のようなアプリBaaaaのUI/UXが凄すぎた件｜Yusui Hoshino
【はじめに】この記事はBaaaaと何の関係もないただの学生（25卒）が執筆しています。 【Baaaaとは】カメラで現実世界を写すことで絵文字が生成され、それをコレクションしたり、レコードに載せて音楽を奏でられるアプリ。他の人のレコードを回したりスクラッチしたりとSNS的な側面も持つ。 日本企業のwedが制作しており、同社はONEというレシート買取サービスも開発している。 【感動した5ポイント】1.UIのサイズが激しく変化する下部にあるフッターナビゲーションの大きくサイズが変化するボタンを見て欲しい。選択されている場所を色、サイズ、テキストで強調できており、分かりやすい。また、指からはみ出すアニメーションはダイナミックでワクワクする。 フッターナビゲーションそして、一体感がすごい。フッターナビゲーションを左右にスワイプすることによって、指、ボタン、中央画面が全て同じ方向に動く。まるで指で引っ
なぜバクラク申請・経費精算はFlutterでアプリの作り直しをしているのか - LayerX エンジニアブログ
バクラク申請・経費精算チームでモバイルエンジニアをしている id:kikuchy です。 埼玉県民として翔んで埼玉の2作目を履修してきました。埼玉県民が東京の池袋に集まって会議しているところや、県民の日にみんなが夢の国に行ってしまうあたりがリアリティあって良かったです。今作も笑わせてもらいました。 この記事はLayerXテックアドカレ2023の30日目の記事です。 前回はチームメイトの @_chocoyama さんによる 【特別対談】 Flutterエンジニアの今オレ x iOSエンジニアの過去オレ でした。chocoさんの時空を超える能力が最大限活かされた、Flutter開発の現場に対する不安が払拭される素敵な記事でしたね！ 次回はカードチームエンジニアの Omoriさんの記事になります。楽しみ！ 本日は、現在Flutterを使用して再開発しているバクラク申請・経費精算のモバイルアプリに
三井住友銀行アプリについてお話します。｜SMBC DESIGN
こんにちは！三井住友銀行 デザイナーの堀と申します。 前回の初投稿から、SNSなど多方面でたくさんの反応をいただきありがとうございました。予想以上の反響で銀行内でも話題となり、三井住友銀行のデザイナーの活動が少しでも広がったことにうれしく思います。 その中で「銀行アプリが変わった」とのコメントを多くいただき、自分たちが関わったプロジェクトがお客さまの手元に届いているんだなぁと感動しました。 今回はその「三井住友銀行アプリ」について書いていきたいと思います。 本題に入る前に…、お伝えしたいことがあります。 三井住友銀行初！2019年度グッドデザイン賞を取りました！！（ぱちぱちぱち） デザイナーだけでなく、たくさんの方々のご協力、お客さまの声から作られたアプリなので受賞したときは本当にうれしかったです。 それでは本題です。 アプリリニューアルの背景 様々な理由がありますが、まずはこれです。 キ
アプリをアクセシブルにするユーザープリファレンス設計
特定のユーザビリティによるアクセシビリティの欠如 おおよそ大多数のユーザーの満足度を高めるためにやっているUIデザインが、ある視点から見るとアクセシビリティに問題があるケースがある。たとえば、 トーストUIが通知した内容が、知覚する前に消えてしまった 確認画面や確認ダイアログを設けなかったところ、誤って行われた操作をキャンセルできなかった WCAGの達成基準に照らし合わせると、前者は達成基準 2.2.1 タイミング調整可能、後者は達成基準 3.3.4 エラー回避にそれぞれ関係する[1]。 アプリを操作をしていて、優先度が低い通知であればトーストUIで事足りる場合は多いし、自動的に消えないのは逆に「消す操作」を要求されることになるので不便に思うこともあるだろう。確認ダイアログも何度も現れるのはうっとおしいし、その確認操作の数秒が積み重なることによる損失はもしかしたら小さくないかもしれない。
フロントエンドの複雑さに耐えるため実践したこと / readyfor-nextjs-first
【READYFOR】実践！フロントエンド分離戦略::発表資料 https://readyfor.connpass.com/event/198730/
ノーコードでTwitterクライアント魔改造 Androidアプリ「MarinDeck」開発の裏側
Twitterからリアルタイムに情報を得たい人が使っているツールとして、よく挙がるのが公式クライアント「TweetDeck」だ。サードパーティークライアントがリアルタイム更新を実装するのに必要だったAPI「User Streams」（ユーザーストリーム）の提供は2018年に終了してしまったため、そうした機能を使いたいなら事実上TweetDeckを使うしかない。 ただ、TweetDeckはPCのWebブラウザから見ることを前提に作られているため、スマートフォンからも閲覧自体はできるものの、UIの最適化はされていない。JavaScriptを使ってUIをスマホに合わせたAndroidアプリ「TJDeck」もあったが、現在開発は止まっている。 こんな中、20年末に現れたのが「MarinDeck」だ。TweetDeckのカラムをスマホの表示幅に合わせるだけでなく、スワイプでのカラム切り替えや独自の設
PCを離れたらマイク音量を下げるmacOSアプリを作った - 詩と創作・思索のひろば
この記事は、はてなエンジニア Advent Calendar 2020の21日目です。昨日は id:tarao による Scalaの依存ライブラリ更新はRenovateでもけっこうイケる でした。明日は id:Krouton です。 みなさん在宅勤務してますか？ 私もしています。 仕事も雑談も、とにかくオンラインで話すことが多いので在宅勤務中は AfterShokz という骨伝導ヘッドホンを使っている。ずっと装着してても疲れにくいので、大変いい買い物です。 いちいち外すのも面倒なのでほとんど一日中付けっぱなしにしているんだけど、これが事故を呼ぶこともある。マイクをオフにすることを忘れて離席してしまうと、オフのときの会話が筒抜けになってしまうので、同僚の前ではおとなしいのに家族の前では豹変するとか……。あとおしっこしてる音が聞こえちゃってないとか。気になりますよね。油断できない。 そういうわ
新しいHTML5 APPプラットフォーム「Capacitor」とは。HTML5を1ソースで、PWA、iOS/Androidアプリ、デスクトップアプリをリリース！｜リレーションデザイン研究所
新しいHTML5 APPプラットフォーム「Capacitor」とは。HTML5を1ソースで、PWA、iOS/Androidアプリ、デスクトップアプリをリリース！ 「a spiritual successor to Apache Cordova and Adobe PhoneGap」を目指して、Ionic teamがCapacitorをリリースしました。Cordovaの後継としてクロスプラットフォーム開発が大きく変わるので、ぜひご利用ください！（本記事は2018年8月執筆記事ですので、一部情報が古い場合があります。ご了承ください）。 Capacitorとは HTMP5 APPSを、PWA、iOSアプリ／Androidアプリ（ハイブリッドアプリ）、Electron（デスクトップアプリ）に変換するためのツールです。厳密にいえば、適切にラップや分岐処理をしてるのですが、まぁそこらへんの「どう動いて
Introduction to Svelte
A few months ago, Svelte 3 was released. I tried it out, ran through their tutorial, and built a few small things. And I can honestly say that I think writing Svelte feels even faster and easier than React. Svelte gave me the same spark, the same feeling of “wow!” that I had with React. In this post I want to tell you a bit about Svelte, show you how it works with a few live example apps, and poin
管理画面は設定ファイルぐらいシンプルに作れるべき！『Viron』を使ってみました - pixiv inside
こんにちは。Web APIにちょっとこだわりのある、CTOの@edvakfです。 最近福岡のヌーラボさんで開かれたGeeks Who Drink -Public API Edition-で「お前はこれまでに作ったAPIの数を覚えているのか？」というタイトルで30分ほど発表してきました。発表資料はこちらです。 Vironと私 そんなWeb API好きの自分ですが、どうしてもUIを作るのはあまり得意ではなく、管理画面を実装したりするのは苦手意識があったのです。…などと思ってところ、今年の2月にCAモバイルさんからVironというツールが発表され、「まさに欲しかったやつだ！」となったのでした。 全ての管理画面開発に悩めるエンジニアに捧ぐ 〜Viron誕生〜 ピクシブ福岡オフィスで作っているpixiv chatstoryでは、「RailsのAPI」と「iOSアプリ」と「Webフロントエンド」という
モバイル/オフラインでも動作するはてなブックマーク検索のPWAを作った
はてなブックマーク検索PWAというはてなブックマークでブクマしたデータをオフラインでも検索できるPWAを作りました。 サイト: https://hatebupwa.netlify.com/ ソース: https://github.com/azu/hatebupwa はてなブックマークの自分のブクマを検索できるPWAを作りました。 Service Workerに対応してるブラウザ(IOS Safari 11.3+を含む)ではオフラインでも検索できます。https://t.co/RCVkRYAFz0 モバイルはホームスクリーンアプリで、macOSはアプリ版もあります。https://t.co/5MDuyC9baN pic.twitter.com/KAc3KV690b — azu (@azu_re) April 16, 2018 使い方 使い方は特に難しい話でもないですが、次のように任意のはてな
Svelte • The magical disappearing UI framework
compiled Svelte shifts as much work as possible out of the browser and into your build step. No more manual optimisations — just faster, more efficient apps. compact Write breathtakingly concise components using languages you already know — HTML, CSS and JavaScript. Oh, and your application bundles will be tiny as well. complete Built-in scoped styling, state management, motion primitives, form bi
エンジニアのための「Sketch入門！」 1時間コース - Qiita
※「Sketch」はMac専用アプリです。Windows版はありません。 __「演習ファイル＋動画＋演習付き」__で記事を書いてます。 エンジニアの人から「Sketch使ってみたい」「日本語の記事が少ない」という声を聞いて、最近社内で勉強会しました。 Sketchについて日本語の記事を調べてみたところ、このレベルの記事はけっこうありました。 ただ、学びやすいか？といえばそうではないらしいので、少し工夫して学びやすいように書いてみました。 __ハンズオン用__などにご利用ください。 #Sketchとは Sketchについて一応さらっと書いておきます。 ・アプリやWebのデザイン・UI設計などに使われるMac用アプリケーション IllustratorやFireworksのようなツールです。 ・$99 買いきり(2016/02 現在） 有料です。 ちなみにApp Storeでは買えなくなりました
Zeplin
Explore our new product Omlet — component analytics for developers
Photon - Electron開発者要注目のOS X風UIツールキット | ソフトアンテナ
元々GitHubのAtomエディタのために開発されたデスクトップアプリ作成用フレームワーク「Electron」。HTML/CSSといったWeb系技術を使って、クロスプラットフォームのデスクトップアプリを開発可能なため、多くの開発者の注目を集めています。 本日紹介する「Photon」は、このElectron用の便利なコンポーネントを多数収録したUIツールキットです(GitHub、Hacker News)。 ツールバー、タブ、ナビゲーション、リスト、ボタン、フォーム、テーブルといった、GUIアプリ作成に必要なさまざまなコンポーネントを、アプリケーションに素早く組み込むことができます。コンポーネントの見た目もOS X風でクールです。 以下ご紹介。 バー ヘッダーとフッターを組み込むことができます。 バーとアクション バーにボタンを設置してアクションを定義することもできまうｓ． バーとタブ タブを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本のアプリのUI（ユーザーインタフェース) は古くて醜いのはなぜでしょうか？に対するMakiko Nukagaさんの回答 - Quora
メルカリにおける UIテストのこれまでとこれから 〜 App ＆ Web 〜 / The past and future of UI test in Mercari
GitHub - storybookjs/storybook: Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
TechCrunch | Startup and Technology News
