UIコンポーネントの大きさは外から制御しよう - Qiita
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
LPやWeb製作を高速化するUIコンポーネント集を作った
リンク コンポーネントの例 概要とモチベーション Camome UI はひとことで言うと「抽象度の高い UI コンポーネント集」です。 Bootstrap や MUI などのフレームワーク・ライブラリの類とは異なり、網羅的・汎用的なパーツを提供することが目的ではありません。つまり Button や Input や、もう少しハイレベルな Navbar などを高いカスタマイズ性とともに提供するつもりはありません。 それよりも「LP のこの部分にコピペすればサクッと決まる」ような体験を重視しています。UI デザインといっても、多くの場合はそれほど変わったものが求められるわけではなく、使い回せるものが大半だと思います。 要するに「デザインの常套句」みたいなものが存在するわけです。Camome UI はそういう「よくある」デザインをたくさん収録することを目的としています。 プログラミングは得意でもデ
ビジュアルリグレッションテストを導入した話 - メドピア開発者ブログ
こんにちは。フロントエンドエンジニアの小林和弘です。 Vue.js + Atomic Designでつくられたプロジェクトにビジュアルリグレッションテストを導入しました。 ビジュアルリグレッションテストでUIの安全性を高める コンポーネントの改修、新機能の追加、ライブラリのアップデートを行う際、UIに不要な変更が入っていないか不安になることがあると思います。リファクタリングをしようにも、意図しないところでUIが壊れないか心配になります。 画面表示に関わるコードを改修するたびに、ローカル環境やステージング環境で全UIコンポーネントを確認するのは難しいです。 また、ステージング環境と本番環境を並べて変更されたUIを目視で確認するのも非現実的です。 ビジュアルリグレッションテストはその名前の通り、視覚的な回帰テストを指します。改修前後のスクリーンショットの差分を検証するためのテストです。 開発に
よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ
Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。
管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla
商用のプロジェクトでも無料で利用できる、管理画面・ダッシュボードのレイアウトやUIコンポーネントが揃ったテンプレートを紹介します。 このテンプレートを使用すると、管理画面・ダッシュボードで必要なコンテンツを簡単に作成できます。 Stisla 管理画面・ダッシュボードに特化されたUIコンポーネントがほとんどすべて揃ったテンプレート。 30以上のサードパーティのライブラリと統合、多くのコンポーネントを簡単に利用できます。 HTML5とCSS3で記述されており、すべてのモダンブラウザでサポートされています。 Bootstrap 4をベースに、Flexboxでレイアウトされています。 一部のコンポーネントにはより簡単にやり取りするために、JavaScript APIを使用。 MITライセンスで、商用プロジェクトでも無料で利用できます。
Xamarin と React Native と Flutter の違いを正しく理解しよう - Qiita
DroidKaigi2018 でもセッションがあった Flutter がβ版になりました。 グーグル、Android/iOS対応のUIフレームワーク「Flutter」ベータ版を公開 - CNET Japan これでまた、にわかにクロスプラットフォーム開発ツール(以下 "X-Plat Tool" と略)が盛り上がってる気がします。 Flutter が出たからと言って、Xamarin や React Native など、先行する様々な X-Plat Tools が死ぬわけでもなく、ただ選択肢が増えて嬉しいやら戸惑うやら、ということです。 ここでは、Flutter と、先行する React Native、Xamarin を(独断を交えて)比較して、それらの違いを見てみたいと思います。 共通化できる(とされる)プラットフォーム X-Plat Tool がどのプラットフォームまでカバーするかを比べて
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回は、「Nintendo SwitchとWeb」という講演をされていた任天堂さんに、Switch開発におけるWeb技術の活用方法や、開発秘話を伺ってきました。任天堂のお二人は京都から、リモートでの取材に応じていただきました。 Nintendo SwitchではWeb技術が大活躍！ 白石 簡単に自己紹介をお願いで
OpenGLやDirectXなGUIにimguiが最強すぎる - Qiita
imguiとは imguiは、OpenGLやDirectXなどの描画環境の中で動くGUIフレームワークです（vulkanも？）。 "Immediate Mode GUI"と呼ばれるパラダイムにより、大変短く直感的なコードでGUIを構築できます。 どういうGUIコンポーネントが使えるかは、リポジトリのスクショを見ていただいたほうが良いかと思います。 デバッグや調整、テスト用のGUIを構築することが目的のフレームワークです。 環境 今回この記事ではwindows10, vs2015, Cinder（0.9.0）上でサンプルを作成しました。 Cinder用には専用のimgui拡張があるため、そちらを使用します。 https://libcinder.org/ https://github.com/simongeilfus/Cinder-ImGui 根本的な考え方や、imguiのAPIは同じですが、
マテリアルデザインのサイトを簡単に作るためのフレームワーク８選
マテリアルデザインは、Googleが推奨しているデザインの概念です。GoogleのウェブサイトやAndroid OSは、マテリアルデザインをベースとしています。 最近では、マテリアルデザインを簡単に作ることができるCSS・JavaScriptフレームワークも充実してきており、誰でも簡単にマテリアルデザインを導入することができるようになっています。 そこで今回はいくつかある候補の中から、人気がありなおかつGithubへのコミットも活発にされているマテリアルデザインをベースとしたフレームワークを紹介します。 Materialize Materializeは、マテリアルデザインのCSSフレームワークとして人気のものの１つです。Bootstrapとほぼ同じような命名規則なので、Bootstrapを使ったことがある人であれば、すぐに理解できると思います。 ShowcaseページにはMateriali
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
