A. ユースケース次第でどう実装すべきかは変わる。Intl.Segmenter が万能というわけでもない。 (クソ最悪な小バズをかましてしまったので、贖罪も兼ねて記事を書きました) 「文字数を数える」のは難しい 「文字数を数える」実装は意外と難しいです。というのも、アルファベットや数字だけなら str.length でも正しく数えられますが、絵文字や異体字などが入った文字列は見た目どおりに数えられません。
文字数のカウントはどれが正解なのか?
A. ユースケース次第でどう実装すべきかは変わる。Intl.Segmenter が万能というわけでもない。 (クソ最悪な小バズをかましてしまったので、贖罪も兼ねて記事を書きました) 「文字数を数える」のは難しい 「文字数を数える」実装は意外と難しいです。というのも、アルファベットや数字だけなら str.length でも正しく数えられますが、絵文字や異体字などが入った文字列は見た目どおりに数えられません。
An HTML Switch Control
We’re very excited to introduce a new HTML form control as part of Safari 17.4: a switch. Two switches as seen on iOS, with the second switch using a custom CSS accent-color. The HTML for this example looks roughly like this: <style> .special { accent-color: papayawhip } </style> <input type=checkbox switch checked> <input type=checkbox switch checked class=special> Switches are a popular control
新しい Side Panel API で優れたユーザー エクスペリエンスを設計 | Blog | Chrome for Developers
1 年前、2022 年 5 月に Chrome にサイドパネルが追加されました。これは、ブラウジング中のコンテンツとともにツールを使用できる、新しいコンパニオン サーフェスです。このたび、Chrome 114 以降、ご利用の拡張機能でサイドパネルにコンテンツを表示できるようになったことをお知らせいたします。 選択した単語の定義を表示する辞書の拡張機能。詳しくは、chrome-extensions-samples リポジトリのコードをご覧ください。 ユーザーにとってはメリットがあり、デベロッパーにとっても使いやすい すでに多くのデベロッパーが、サイドバーのようなエクスペリエンスを拡張機能に実装しています。そのため、このサイドバーを標準プラットフォームにできることを嬉しく思います。新しい Side Panel API では、ユーザーがアクセスしているページの横に表示される永続的な UI を提供
「ダークパターンレポート2023」を公表。ECサイトやアプリでの購入経験者799人への意識調査
「ダークパターンレポート2023」を公表。ECサイトやアプリでの購入経験者799人への意識調査 4割強がダークパターン被害を経験。7割強が、ECサイト等の運営企業に対応を求める 企業や行政と伴走し活動を支えるデザイン会社の株式会社コンセント（本社：東京都渋谷区 代表：長谷川敦士 以下、コンセント）は、消費者をだますウェブサイトやアプリのユーザーインターフェースである「ダークパターン」について、全国18歳から69歳までのECサイトやアプリでの購入経験者799人を対象に、見たりひっかかったりした経験やその際に取った行動、認知・理解度などの実態を調査し、「ダークパターンレポート2023」としてとりまとめました。 調査の実施背景 ダークパターンの問題を顕在化し、個人・企業・行政で取り組める社会に ダークパターンとは「消費者の自主性や意思決定や選択を覆したり損なわせたりする選択アーキテクチャを、主に
これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
LLMが変える、ユーザインターフェースの未来｜Dory
こんにちは、Doryと申します！ 2022年末からChatGPTをはじめとしたAI技術が爆発的に普及しはじめ、とてもワクワクしながら毎日を過ごしています。 本日は、昨今のAI技術がユーザインターフェースにどんな変化をもたらすか？という観点から記事を書いてみました。 CUI→GUI→NUI→？人間とコンピュータの接点であるユーザインターフェースは、その時代の最新技術を取り込むかたちで、これまで進化を遂げてきました。 70年代ごろ：CUI（Character User Interface） キーボードを使用した文字によるコマンド入力 いわゆる"黒い画面"のユーザインターフェース 80年代ごろ：GUI（Graphical User Interface） マウスなどのポインティングデバイスによる操作 画像や記号を用いて、情報を“モノ”として直感的に扱うユーザインターフェース 現代：NUI（Natu
「システムの画面」と「利用者の認知」のギャップを意識する - ヴェルク - IT起業の記録
boardというSaaSの開発の中で、画面上の文言・配置・全体の流れ等をどのように考えて作っているか、という話です。 一般的なUIの話ではなく、サポートの経験から「認知とのギャップ」という視点で考えてたりするので、それについて書きたいと思います。 人は自分の知識・経験から物事を理解しようとする 人が新しいものを触る際、これまでの知識や経験などと照らし合わせながら物事を理解する傾向があるものだと思っています。 そのため、何か新しいものに触れる際、これまで似たような経験をしたことがあったり、知識があったりするものはスムーズ理解できます。逆に、それが少なかったり似たものがなければ、理解のハードルが高くなると思っています。 そのため、初めてシステムを触る際に、これまでの知識・経験とのギャップが小さければ小さいほど、スムーズに理解できる可能性が高くなります。 boardの画面を考える際、想定ユーザー
JavaScriptはなし、CSSで実装されたWebページでよく使用されるUIコンポーネントの超軽量ライブラリ -CSSUI
アコーディオン、モーダル、タブなど、Webページでよく使用されるインタラクティブなUIコンポーネントをCSSで実装する超軽量ライブラリを紹介します。 各UIコンポーネントは個別のCSSファイルで管理されており、JavaScriptは一切必要なし。デザインは非常にシンプルで、カスタマイズも簡単です。 CSSUI MITライセンスで、商用プロジェクトでも無料で利用できます。 ピュアCSSで実装されたコンポーネント: JavaScriptを読み込む必要がないため、コンポーネントの待機時間はありません。 カスタマイズが簡単: スタイルの追加は簡単です。デフォルトのCSS変数をオーバーライドするか、クラスを使用してコンポーネントをカスタマイズできます。 スタンダードなHTML: 各コンポーネントは、モダンなHTML要素で構築されています。 ビギナーでもプロでも簡単: 簡単なプロトタイプから実稼働のW
Latest topics > Ubiquityの事を少し見直した - outsider reflex
Latest topics > Ubiquityの事を少し見直した 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « よくある風景 Main ほどほどが良い » Ubiquityの事を少し見直した - Nov 17, 2008 Firefox Developers Conference 2008に行ってきた。 モバイルとか次世代のWebとかそういうのがメインの話題という風に聞いていたので、僕が行ってもあんまり得る物は無いのかなー、と思ってたんだけど、逆に今まで全然関わり合いがなかった分野の話を聞く良い機会になった。 Ubiquityについては、vimperatorと同類なんじゃね？ 誰が喜ぶのこんなの？ という感じにしか思ってなかったんだけど、実際
UIデザイナーは読んでおかないと後悔する良書！ 大規模サイト・アプリのUI/UXを作り込むテクニックや裏側まで詳しく解説 -銀行とデザイン
3人のWebデザイナーがインハウスデザイナーとして、三井住友銀行のスマホアプリやWebサイトのリニューアルを通してデザインによるDXをどのように浸透させたのか、その経験が惜しみなく明かされた良書を紹介します。 「銀行」は自分とは関係ないやと思った人は間違いです。スマホアプリやWebサイトのUI/UXをユーザー目線で使いやすく洗練されたデザインにするテクニックなども詳しくていねいに解説されており、UIデザインの学びがたくさんあります。 一読するだけでなく、何度も繰り返し読みたくなる優れたデザインの解説書です。 3人の経歴は、金澤氏はフリーのWebデザイナーを経て制作会社に入社、金子氏は知人とWeb企画・制作、堀氏は企業でUIデザインを担当、そして三井住友銀行のインハウスデザイナーとしてUI/UXデザインを担当しています。 デザインの必要性や重要性を社内からどのように理解してもらったのか、スマ
GraphQL実践ノウハウ/graphql-knowhow
GraphQL実践ノウハウv2 https://speakerdeck.com/sonatard/graphql-knowhow-v2 宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践 https://speakerdeck.com/sonatard/swiftui-graphql GraphQLの誤解 https://speakerdeck.com/sonatard/rethinking-graphql
Content EditableでWYSIWYGエディタ作るの楽しい！ - maru source
こんにちは丸山@h13i32maruです。 僕は今、Ubie Discoveryで医療従事者向けのカルテエディタを作っています。人生で初めてContent Editableを使ってエディタを作ってるんですが、それがすごく楽しいです！というのも、エディタを作るには色々技術的な課題があります。例えば、テキストをパースするには？ASTからHTMLをビルドするには？パフォーマンスのよい更新方法は？などなど。それらの技術的な課題を解決していくのが単純に楽しいという感じです。また、車輪の再発明は極力抑えつつ、自分たちのプロダクトでやりたいことを実現できるような工夫もしています。 というわけで、今回はそんなエディタ作りで取り組んだ課題と解決策を紹介していきたいと思います。 （訳: 楽しかったので、誰かに聞いてもらいたい！） エディタの概要 メンテしやすいテキストパーサ - PEG.js メンテしやすいH
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Master CSS - A Virtual CSS language with enhanced syntax.
GitHub - dequelabs/axe-core: Accessibility engine for automated Web UI testing
JavaScript入力コントロール「InputManJS」に待望のリッチテキストエディタが登場！ Webフォームで差を付けよう
「推測されやすい」パスワードを入力させないためにフロントエンドエンジニアができること
リサイズオブザーバー API - Web API | MDN
Webページの特定テキストへ直接ジャンプしてハイライトするリンクの作り方／「Chrome」「Edge」は標準機能で、「Firefox」は「Link to Text Fragment」拡張機能で【レビュー】
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
