Open UI コミュニティグループについて調べた
Open UI はW3Cのコミュニティグループの一つ 以下の文章は上記サイトに書いてあることをまとめたもの 発足背景 WHATワーキンググループは、多数のWebサイトで見られる最も一般的なパターンをHTML自体で体系化する取り組みに着手した。 それにより、Web開発者がHTMLを使用するだけでリッチなフォームを実装できるようになった。 しかし、それらの最後の大幅な改定から15年以上経過し、現在のWebアプリケーションはより多くの複雑なインターフェースを提供するようになった。 したがって、HTMLをもう一度最新化し、今日のWebサイトのUIの最も一般的なパターンを作成するために必要な技術を標準化する時期が来ている。 目標 Web開発者が最新のカスタムなUIを作成するためには、どのようにHTML・CSS・JS・Web APIを組み合わせればいいかについて、構築計画を立てること 標準そのものを定
Cardのマークアップでもう悩まない！NestedでClickableなUIを実現する、Link Area Delegationとは
Cardのマークアップでもう悩まない！NestedでClickableなUIを実現する、Link Area Delegationとは Table of Contents Table of Contents はじめに Link Area Delegationとは Link Area Delegation 提案の背景 - マークアップの制限 クリッカブルなコンテナを実現する既存の方法 既存方法とその問題 現状検討されている4つの実装方法 1. Link delegation attributes 2. <linkarea> Element 3. Use CSS pointer-area Property 4. Use Invokers おわりに Appendix はじめに Open UI Community Groupで、仕様の策定が検討されている Proposal の一つに、Link Are
キーボード操作を意識したHTML/CSSコーディング
この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で
［速報］マイクロソフト、新UIフレームワーク「.NET Multi-platform App UI」（.NET MAUI）発表。単一コードでマルチプラットフォーム対応。Microsoft Build 2020
［速報］マイクロソフト、新UIフレームワーク「.NET Multi-platform App UI」（.NET MAUI）発表。単一コードでマルチプラットフォーム対応。Microsoft Build 2020 オンラインイベント「Microsoft Build 2020」を開催中のマイクロソフトは、単一のソースコードでiOSやAndroid、Windows、Macなど複数のプラットフォームのユーザーインターフェイスに対応できる新しいUIフレームワーク「.NET Multi-platform App UI」（.NET MAUI）を発表しました。 With .NET 5, we begin our journey of unifying the .NET platform, bringing .NET Core and Mono/Xamarin together in one base cla
Web Share APIを試してみた - アクトインディ開発者ブログ
morishitaです。 いこーよやいこレポでは、情報を共有してもらいやすいようにシェアボタンをページに置いています。 シェアボタン 現状はTwitterやFacebookなど各サービスごとにシェアボタンを用意していますが、 モバイルに於いてはWeb Share APIを使っても良い状況ではないか？ と思って調べてみました。 ちなみにCan I use... ではこんな感じです。 Can I use ... Web Share API スマホに限るとiOS SafariもAndroid Chromeもサポートしているようです。 モバイルでは使えそう?! コード とりあえず、試すためのページを用意をしないと、ということで Web Share APIを使ったシェアボタンだけのページを作りました。 コードは次の通りです。 <html lang="ja"> <head> <meta charset
Googleアシスタントのマルチモーダルレスポンスの考え方と最近のレスポンスまわりの変更点 - Qiita
音声は、会話形式の入力としてはとても自然で、ITの知識も必要なく、どのような年齢層でも利用できる利点があります。一方で、お店でメニューを見るような場合、メニューのすべてを音声で聞いて頭で覚えておき、それから選ぶのは大変です。目で「スキャン」したほうが自然な行動でしょう。音声と画面は文脈にあわせて、返し方を比較する必要性があります。 Googleアシスタントのレスポンス構成 こちらもGoogle I/Oからですが、Googleアシスタントのレスポンス構成は以下のように分離されます。 ユーザの文脈に合わせて自然な会話にしていくためには、会話のターン毎に、Visual Componentを含むすべての方法を検討する必要があります。例えば、prompt、cards, suggestion chipsなどです。例えば、上記の例ですと、Spoken promptですべて話しているトピックを画面上ではリ
UIテストの所要時間を10分の1にする試み、Raspberry Piのクラスタで並列実行。ソフトウェア品質シンポジウム2018
UIテストの所要時間を10分の1にする試み、Raspberry Piのクラスタで並列実行。ソフトウェア品質シンポジウム2018 開発現場の多くでテストの自動化が進む中で、テスト時間を短縮することはビルドとテストの待ち時間を減らし、開発効率を高める上で重要なポイントになってきています。 そうしたなかで時間がかかっていたUIテストの所要時間を短縮する手段としてRaspberry Piをクラスタ化する手法を紹介するのが、レバテック株式会社 折田武己氏です。 本記事では、9月12日から14日のあいだ東洋大学で開催された「ソフトウェア品質シンポジウム」（日本科学技術連盟主催）での折田氏のセッション「UIテストの所要時間を10分の1に短縮する取り組み～ラズベリーパイのクラスターで並列実行～」の内容をダイジェストで紹介します。 単体テストはさくさく終わるのにUIテストは時間がかかる レバテック株式会社
その Dialog は本当に必要ですか？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ダイアログは、ユーザとの対話の中でも特に「確認」や「注意」を促すために用いられる UI コンポーネントの一つです。二択あるいは三択の項目を配置して、YES/NO や OK/Cancel などのインタラクションを用意することで、ユーザとの対話をすることが出来ます。あるいは、単に現在の状態を表示（読込中など）し、その他の各種操作をブロックすることで、待つ必要が有ることを明示することも出来ます。 一方で、ダイアログはその表示が画面の前面に大きく表示され、時にダイアログ以外へのインタラクションを禁じる場合もあることから、使いどころを間違うと非常
遅延読み込み用のぼやけた画像
Mediumでとある記事を高速にスクロールして読んでいたら、さりげなく画像を遅延読み込みしていることを知った。読み込み発火のタイミングがうまいのかあまり遅延読み込みの存在を感じさせないのもすごいと思ったが、プレースホルダー画像の実装方法が良さそうだった。単純に元の画像を幅30px程度まで小さくしてそれをブラウザーにリサイズさせることでぼやけた画像をプレースホルダーとして表示しているだけだが、十分に機能していそうで目から鱗だった。 画像の遅延読み込みはなかなか曲者で、読み込むタイミングやプレースホルダーとしている画像が悪いと大きくユーザーにストレスを与える。プレースホルダーでよく使われるローディング画像は読み込み中のインジケーターではあるが、同時に何か遅いことをやっていますというネガティブな印象も与えてしまう。ユーザーはローディング画像を見るとスクロールを止めなくてはならないのかと感じること
モーダルダイアログを視覚表現だけで終わらせない - Web Accessibility Advent Calendar 2013 - neotagの雑文
Web Accessibility Advent Calendar 2013 初日です。 http://www.adventar.org/calendars/64 neotagです。初日なのに記事公開が遅れてしまいました。 しょっぱなから出鼻をくじいてしまい大変申し訳ありません。（土下座） 追記 2013/12/06 この記事の補足になる記事を @milk54 さんが書いてくださいました。 リニューアルして情報が得られなくなったというサイトを調べてみた 追記ここまで JavaScript による視覚表現が盛んになってから当たり前に使われるようになったモーダルダイアログについてです。 このモーダルダイアログ、ちょっとした情報を追加で表示する際に大変便利なのですが、見た目だけ実装すると思わぬ罠があります。 普通に組んだ場合 Library など使わずに普通に JavaScript を書いた場合
JavaScriptでブラウザコマンドラインを実装する：CodeZine
去る8月30日（土曜日）、ライトウェイトプログラミング言語（Lightweight programming Language）の総合カンファレンス「LL Future」が、なかのZERO（中野区もみじ山文化センター）大ホールで開催された。当日は前線の影響で時おり豪雨に見舞われる中、さまざまな言語のユーザーや開発者など千人近くが集まった。
WEBアプリに超絶簡単にJavaScriptのキーボードショートカット機能を実装する「shortcuts.js」:phpspot開発日誌
WEBアプリに超絶簡単にJavaScriptのキーボードショートカット機能を実装する「shortcuts.js」 2007年04月20日- Handling Keyboard Shortcuts in JavaScript Despite the many JavaScript libraries that are available today, I cannot find one that makes it easy to add keyboard shortcuts(or accelerators) to your javascript app. WEBアプリに超絶簡単にJavaScriptのキーボードショートカット機能を実装する「shortcuts.js」。 次のように定義することで、Ctrl+Shift+Xのショートカットキーが押された際の機能を実装できます。 shortcut(
フォームの入力エラーを吹き出しで教えてくれる JavaScript
■ フォームの入力エラーを吹き出しで教えてくれる JavaScript フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。 AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。 実際の動作サンプル とりあえず submit ボタンを押せば、全て理解出来るかと思います。 今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。 いつもの JavaScri
いまどきのデスクトップ処理系 steps to phantasien t(2006-09-22)
いまどきのデスクトップは色々モダンになっている. ただモダン化は API の裏側で進んでいるため, あまり興味を持たれていないらしい. 一見いろいろウォッチしていそうな知り合いと話していてわかった. 利用者視点の話題では, いまどきのデスクトップというとたとえばウィンドウが ヘナヘナ揺れるといったアイ・キャンディばかりが連想される. でもそのアイ・キャンディに至るにはきっと山ほど苦労があったはず. そのへんをちょっとねぎらってみたい. 念頭にあるのは Windows Vista, Mac OSX, XGL あたり. まず共通の階層化されたアーキテクチャを想定し, ケーススタディを交えつつその層を下から上へ順にたどっていきます. 復習: デスクトップ処理系の階層構造 そもそもデスクトップの中味はどんな構成をとっているのか. ざっと眺めておこう. 典型的なデスクトップ処理系のアーキテクチャはだ
JavaScript で日本語の変換途中の文字列を取得する
■ JavaScript で日本語の変換途中の文字列を取得する input form に onKeyDown とか指定してイベントを受け取るようにすると、現在入力している文字列が取得出来るわけですが、残念ながら日本語の変換確定前の文字列は IE でしか取得出来ません。 しかし setTimeout の処理とかを使えば IE 以外のブラウザでも取得出来るのですが、このやり方について解説している人を見掛けた事が無いので紹介しておきます。ええ、まぁ、実際にそんな事がしたい状況ってのはあんまり無いんですけどね。JavaScript で自動フリガナ入力 ってのを見たら、やっぱり onKeyDown のせいで IE 以外のブラウザには非対応っぽいので Firefox 対応版になったら嬉しいなと思ったもので。 それで肝心のやり方ですが、実際にサンプルを見た方が早いと思うので、以下に用意しました。何も難し
テキストエリアとかリサイズ可能にする JavaScript
■ テキストエリアとかリサイズ可能にする JavaScript 好評の、読み込ませるだけシリーズ の6番目。 このスクリプトを読み込ませるだけで、ウェブ上にある TEXTAREA とかその他色々好きな要素がリサイズ可能なやつに大変身。とりあえずサンプル見るのが手っ取り早いです。 実際の動作サンプル テキストエリアの右下にマウスカーソルを持っていくとカーソル形状がかわるので、そのままドラッグするとサイズも変わります。 自分はグリモンスクリプトで快適なんですが、サービス提供側でこういう機能を提供してくれたら幸せな人が増えるんじゃね？とか思ったので作ってみました。 実際のリサイズ方法に関しては、愛用している Changing <textarea> Size のコードが大変参考になりました。ありがとうございます。 コードは次の通りです。 メイン部分。 var ElementResizer = {
OBB vs AABB - Radium Software Development
This domain may be for sale!
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Archived MSDN and TechNet Blogs
Joelb.me