Unity公式からのUI 開発に関する究極のガイドとサンプルプロジェクトが無償公開！【Unity】【uGUI】【UI Toolkit】 - (:3[kanのメモ帳]
はじめに 先日、Unity公式からのUI 開発に関する究極のガイド(eブック) 「User interface design and implementation in Unity」 が公開されました！しかもなんと無料！ さらにこのガイドのために作られたデモプロジェクト 「UI Toolkit sample - Dragon Crashers」も無償公開されています！ UI Toolkit Sample – Dragon Crashers 残念ながら全編英語ですが、PDFでダウンロード出来るので、 英語が分からずとも自動翻訳でなんとか理解出来そうです。 ちょっと読んだ感じ、Unity UI(いわゆるuGUI)はもちろんのこと、 UI設計やアセット準備という実装以前の話や、 Unity Extensible Markup Language(UXML)やUnity Style Sheet(US
![Unity公式からのUI 開発に関する究極のガイドとサンプルプロジェクトが無償公開！【Unity】【uGUI】【UI Toolkit】 - (:3[kanのメモ帳]](https://cdn-ak-scissors.b.st-hatena.com/image/square/2a1398087bd4c38a1a85751b5809ae75aa3e1f66/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkan_kikuchi%2F20230108%2F20230108142008.png)
2022年のUIデザインツールのまとめ、注目されているプロトタイプ・デザインシステム・リモートワーク・ユーザーテストなど
2022年現在、UIデザインツールの使用状況を調査した「2022 Design Tools Survey」を紹介します。 急いでいる人用に一言でいうと、Figmaがっょぃ。 2022 Design Tools Survey 2022 Design Tools SurveryはUX Toolsでおこなわれたアンケートの調査結果（4,260人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、10年以上の経験者がもっとも多く、次いで3-5年、6-10年となっています。今年はリモートワークの人がもっとも多く、次いでハイブリッド、オフィス勤務となっています。
「Google Chrome 105」安定版リリース、ウェブUI開発に便利な機能が続々搭載
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン104.0.5112.81(Windows版、macOS版/Linux版は105.0.5195.52)がリリースされました。新たなCSS疑似クラスの実装など、ウェブUIの開発を容易にするであろうさまざまな機能が追加されています。 ◆CSS疑似クラスの追加 今回、新たに二つのCSS疑似クラスが追加されています。:has()は引数で渡された相対セレクター要素を1つ以上持っている場合に有効となります。 /* <div> 要素のうち直接 <img> を含んでいるもの */ div:has(> img) { background-color: black; } :modalは、それが存在している間は外部の要素とのすべての相互作用を排除する状態にある要素(つまりダイアログ的な要素)に対して有効となります。 :modal { bor
お金はないけどUIはキレイにしたい！ “インディーズゲームにおけるUI制作”のノウハウが語られたセッションをレポート
お金はないけどUIはキレイにしたい！ “インディーズゲームにおけるUI制作”のノウハウが語られたセッションをレポート ライター：高橋祐介 2021年8月21日にインディーズゲーム開発者向けのオンラインカンファレンス「Indie Developers Conference 2021」が開催された。その中で，インディーズゲームのUIにフォーカスしたセッション「プログラマしかいない お金もない それでもUIを綺麗にする！」が行われた。 登壇したのは，東方Projectのファンゲーム「幻想郷ディフェンダーズ」「幻想戦略譚」などを制作した開発グループ，Neetpiaに所属する少佐氏。氏は両作品のプログラマでありながら，同時にユーザーインタフェース（UI）のデザインも手掛けているという。 少佐氏は大前提として「UIはデザイナーが専任すべき」仕事と前置きしたうえで，「実際の現場ではそこまで人手がなく，グ
「コマンドプロンプトは黒い画面に文字がたくさん出て怖い」→「チャット風」にしてみた LINEみたいで「分かりやすい」と話題に
黒い画面に“コマンド”を入力して操作を実行する「コマンドプロンプト」。慣れていないと少しとっつきにくいその画面を、LINEっぽくすることで親しみやすくした「チャット風コマンドプロンプト」を実際に作ってみた人が現れ話題になっています。 プログラマーでITエンジニアのkenji（@kenjinote）さんが開発し、GitHubでソースコードなどを公開しています。 チャットでメッセージのやり取りをしているような見た目で、こちらがコマンド（命令文）を入力すると、返信のような形で内容が表示・出力されます。入出力がはっきり分かれていて見やすく、“相手側”がアイコン付きなのが、なんだかホッとします。なにより全体的にかわいらしい。 チャット風コマンドプロンプト（画像提供：@kenjinoteさん） 通常のWindowsのコマンドプロンプト このアイデアは、Web制作企業ビックリマークの代表取締役でエンジニ
jQueryでプログレスバー機能を実装する | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
ページの読み込み進捗状況をプログレスバーで表示されているのをたまに見かけますが、今回はjQueryでそれを実装してみたいと思います。前回記事「jQueryでページローディング機能を実装する」と合わせてページローディングのUIとしてみたり、…
jQuery【 jQuery UI 】progressbar を使用してプログレスバーを作成 - プログラマカレッジ
1. progressbar を使用してプログレスバーを作成 jQuery UI の progressbar を使用して プログレスバーを作成します。 スタートボタンをクリックしてみて下さい。 上のサンプルのソースコードは次の通りです。 <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script type="text/javascript"> $(function(){ $("#wkBtn").click(function(){ $("#wkPg").progre
Adobe製品を使わない"デザイナー"？「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは
Adobe製品を使わない"デザイナー"？「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは
メルカリWeb版のUIテスト自動化で目指している世界と、そのために作った Selenium Grid・Zalenium 環境 on Azure Kubernetes Service(AKS) | メルカリエンジニアリング
メルカリWeb版のUIテスト自動化で目指している世界と、そのために作った Selenium Grid・Zalenium 環境 on Azure Kubernetes Service(AKS) メルカリの自動化＆品質保証グループ（Automation & QA Group：通称AQA）の 根本 征 です。 私は普段、テスト自動化・CI / CD 改善・その他社内の生産性を上げるための自動化を行っています。 今回は、最近私たちが行なっているメルカリWeb版のUIテスト自動化と、その自動テスト環境についてご紹介したいと思います。 メルカリWeb版のUIテスト自動化について UI自動テスト環境に関する課題 Selenium Grid を Azure Kubernetes Service(AKS) 上で構築する Zaleniumを試す Azure Kubernetes Service(AKS)で受け
CoreUI - Vue/Bootstrap製の管理画面UI MOONGIFT
管理画面は主に運営元が使う画面になるので、デザインへのこだわりが殆ど感じられないことが多いです。しかし運営元が使いやすい画面でないと細かい制御がしづらかったり、サービスのステータス把握が遅れたりするのではないでしょうか。 そこで使ってみたいのがCoreUIです。VueとBootstrapを使って作られた管理画面テンプレートです。 CoreUIの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。このようなUIの管理画面が簡単に作れます。 ボタン。 ソーシャルボタン。 カード。 フォーム。 モーダル。 スイッチ。 テーブル。 タブ。 アイコン。Font AwesomeかSimple Line Iconsがサポートされています。 ウィジェット。 こんなウィジェットも。 チャート。 ログイン画面。 登録画面。 エラー画面。 CoreUIはVueで作られていますので、表示する際にもW
リッチな表現を手軽に実現する、Vue向けUIフレームワーク「Vuetify」の紹介
リッチな表現を手軽に実現する、Vue向けUIフレームワーク「Vuetify」の紹介 2019年1月23日 2019年1月18日 技術情報 vue, vuetify 中津川篤司 前回は、PC/スマートフォン両対応のUIフレームワーク「Element」を紹介しました。 今回は、Elementと同様にPC/スマートフォンに対応したVueベースのUIフレームワーク「Vuetify」を紹介します。フラットデザイン、マテリアルデザインにも対応していますので、今風のWebアプリケーションを実現することができます。 UIコンポーネントの紹介 VuetifyではあらかじめたくさんのUIコンポーネントが用意されています。まずはそれらを見て、Vuetifyのポテンシャルを感じてください。 アイコン + リスト アイコン、ラベルなどを組み合わせたリスト表示です。幅が広いデスクトップやタブレットに適したUIです。
管理画面向けのVue.jsのUIフレームワーク、iViewについて - JX通信社エンジニアブログ
「JX通信社Advent Calendar 2019」7 日目の記事です。昨日は、鈴木（泰）さんの「CodePipelineを用いたLambdaのデプロイについての所感」でした。 フロントエンドエンジニアの渡辺です。今回は社内の管理画面のUIの話です。 はじめに 管理画面、特に社内向けの画面を作る際は、プロダクト側とは少し事情が異なり、 それぞれのコンポーネントのデザインにあまりこだわらない 機能面や、使い勝手の優先度が高い などの事情があります。なので、UIとしては、「このフレームワークに乗っかっておけばコンポーネントが揃っている」という状態が理想です。 JX通信社の管理画面はVue.jsを使っているケースが多く、その際のUIフレームワークにはiViewを使っています。 特徴 基本的にデザインがシンプル カスタマイズできる項目が多い 少し特殊な用途(無限スクロール、ツリー構造のチェックボ
レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」
Responsive Multi-Level Menu | Codrops 今回は、主にスマートフォンサイトで活躍しそうなレスポンシブタイプのドロップダウンメニューを紹介します。 限られたスペースからでも、メニューをふわっとアニメーションしながら展開して表示させてくれます。 まずは、サンプルをご覧下さい。 レスポンシブなドロップダウンメニューを実装する「Responsive Multi-Level Menu」サンプル 古いブラウザやIEなどでは作動しませんが、最新ブラウザが標準のスマホサイトにピッタリですね。 【設置方法】 こちらのResponsive Multi-Level Menuからソースをダウンロードします。このダウンロードしてきたソースファイルをもとに設置してみます。 ＜head＞部分にCSS関連を読み込む記述をします。 <link rel="stylesheet" type="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
『風来のシレン5plus』Nintendo Switch/Steam向けに12月3日発売へ。3つの新ダンジョンを収録し、ゲーム実況に便利な「ライブ探索表示機能」を搭載 - AUTOMATON
Free Vue.js & Laravel Admin Templates · CoreUI
Free Laravel Admin Templates · CoreUI
Bootstrap Admin & Dashboard Template · CoreUI
https://vuetifyjs.com/ja/
なんとなくVue.jsのUIフレームワークを紹介する - Qiita
vue-jstree