mobileでは、テロメアの詳細時刻と行permalinkのメニューが邪魔で行頭にカーソルを置けなかった

はじめに この記事は、nvim-cmp という neovim のプラグインををメンテしている間に出てきたいろいろな課題や、いま考えていること（やるとは言っていない）を説明することを目的としています。 nvim-cmp とは？ neovim における、補完プラグインです。 Pure Lua で書かれており、カスタマイズ性が高いことが特徴の補完プラグインです。 「いろいろな課題」とは？ 大別すると 3 つの課題があると考えています。 ▼ UI を内蔵してしまっている nvim-cmp は UI 関連の実装を内蔵しています。 例えば、custom_entries_view.lua や wildmenu_entries_view.lua などが実装として存在しており、いくつかのカスタマイズ向けのオプションが提供されています。 補完メニューの表示位置をカーソルに合わせるか、キーワード位置に合わせるか

Intro ここまでで <dialog> 要素が標準化され、 Modal/non-Modal な Dialog がネイティブで出せるようになった。 今まで自前で実装していた z-index の指定や、フォーカスの管理、非活性化、キーボードでの処理、スタイルなども、細かい仕様がほぼ標準によってカバーされた。 Top Layer inert :modal / ::backdrop CloseWatcher Focusable Scrollers etc しかし、 <dialog> はあくまで「ユーザのインタラクションを求める」という用途で使うものであり、 role=dialog ではない、例えばちょっとしたメッセージの通知などに使うものではない。 そこで、これらの資産を活用し、より汎用的な UI を標準化しようという話が、 <dialog> の標準化の裏で並行して行われた。 Toast 最初の

Intro 前回までは <dialog> が標準化されるまでの経緯と、 API の概要や関連仕様を解説した。 今回は <dialog> の API としての使い方について、具体的に解説していく。 各要素の使用 open 属性 <dialog> は、デフォルトでは不可視(display: none)な要素となっている。 open 属性が付くと表示される。 <dialog open> <div> <h1>Hello Dialog</h1> </div> </dialog> show()/showModal() しかし、基本的に <dialog> は動的に出てくるため、JS で開くことになるだろう。しかし、 open 属性を動的に付けるのではなく、 show()/showModal() を用いるのが基本だ。 document.querySelector("button.show").addEve

Intro showModalDialog() は今から考えれば、確かにひどい API だった。 しかし、何か Modal を開き、ユーザにインタラクションをさせ、閉じたらそこで入力された値や選択された結果を取得し、処理を進めたいユースケース自体は、規約への同意取得や、 Cookie バナー、ログインなど多々ある。 そういった場面では、ライブラリなどを用いて実装する必要があったが、 Modal を実装するのは実際にはそんなに簡単ではなかった。 Modal, Dialog, Modal Dialog 最初に、用語を少し整理しておこう。 Modal Dialog Modal Dialog non-Modal Dialog Dialog とは、そもそも「対話」という意味であり、 UI の文脈では入力や選択を求める「対話的な UI」のことを指す。 既に実装されている alert(), confir

Intro HTML の <dialog> 要素と、 popover 属性、および関連する様々な仕様が標準化され、実装が進められている。 Open UI を中心に進められているこれらの改善は、多くのサイトで共通したユースケースがありながら、長らくミッシングピースとなっていた重要な機能だ。 もし今、同等のユースケースを自前で実装しているのであれば、適切な仕様を用いた実装に刷新することで、従来はほぼ不可能だった UX を提供できるようになる。 今回から、数回の連載形式で、これらの仕様がどのように標準化され、我々開発者はこれをどのように使っていくべきなのかについて解説する。 showModalDialog Modal や Dialog と言われる UI の歴史は Web においても古く、ブラウザでは IE4 くらいのころに独自実装された window.showModalDialog() が最初に

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Webサービスのフォームに住所を入力するとき、丁目や番地などを入れる欄について、数字やハイフンを全角で書かなければいけない「全角縛り」をやっているフォームをよく見ます。半角文字を入力してしまってエラーになったり、咄嗟に変換方法を思い出せなかったり、全角と半角の見分けが付きづらかったり、「全角縛り」であることが明示されていなかったり、「ハイフン」としてどの文字を使うべきかわからなかったり……と、鬱陶しさを感じることが多くあります。 「住所は全角のみ」（数字やハイフンも絶対に半角を受け付けない）という仕様がどういう経緯で生まれて、どう広まっ

TOPフォーカス気持ちよいUIができたら後は放置。傑作Flash『艦砲射撃・マテスナ』作者の素敵な“悪癖”【フォーカス】 ゲームクリエイター TANAKA U ゲーム制作フリーランス。「動かしているだけで気持ちよい」が信条で、UI制作に強いこだわりを持つ。専門学校でゲームづくりを学んでいた2003年にFlashゲームサイト「NEXTFRAME!」を立ち上げ、多数のゲームを制作。2006年にバンダイナムコゲームス社に入社し、2009年からフリーランス。ソーシャルゲームを中心に、UI演出、UIコンサルティング、ゲームデザインなどを手がける。仮想通貨「Monacoin」についてSNSでつぶやいただけで、何者からか400万円相当のMonacoinを振り込まれ、戦慄したことがある。 X NEXTFRAME! 2000年代のWeb上には、「Adobe Flash」規格の無料ゲームが、個人によって多数制

こんにちは。技術部検索グループの原島です。 上の画像は、スマートフォン（ブラウザ版）で見たクックパッドの検索結果ページです。レシピだけでなく、ニュースも表示されていますね。献立や掲示板のスレッドなどが表示されることもあります。 クックパッドでは、検索結果ページに表示するコンテンツをクエリなどに応じて最適化しています。最適化は、膨大なログデータと最新の機械学習を用いることで、実現しています。このエントリでは、クックパッドにおけるコンテンツ最適化の裏側を紹介します。 最適化の背景 スマートフォンの普及に伴って、ユーザが利用するプラットフォームは PC からモバイルにシフトしつつあります。クックパッドにおけるモバイル利用者の割合も、ここ 2 年で 10% 以上増加しました。最近では、60% 以上のユーザがモバイルからアクセスしています。 ユーザの利用形態が変化すれば、検索結果ページもその変化に対

久しぶりに記事を書く。最近マルス端末のUIについてツイートがあった。 この件に関して、UIについてやUXに対して日々やってきている人間は「ダメなUI」という認識の人が多いように思う。一方で、システムの開発者にとってはこれは、その認識でない人間が多いようだ。なので、この辺を私なりに意見を書いておこうと思う。 まぁ、これはいつもなのだが、書いていることが散らかってる。基本的に音声入力のメモなので、読みにくいかもしれないが読んでくれ参考になれば幸いだ。 熟練が必要なUIは基本的によくない まず、基本的に熟練が必要なUIはそもそも良くないって話をしていく。順番に話していこう、まず、熟練が必要なUIが支持される理由を考え、それに対して、批判していき、なぜ熟練が必要なUIはダメかを語ってみよう。 熟練が必要なUIが支持される理由 その前に、こういった熟練のUIが支持される理由についてかいておこう。それ

2017年4月13日の「DevLOVE 関西『デザインリニューアルの難しさ』」にて発表された、Backlog UI リニューアルの舞台裏のスライドです。

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo! JAPAN研究所で快適に操作できるUIを作るといったインタラクション分野の研究をしている山中です。 この記事では、リンクやボタンの大きさに基づいてタップの成功率を推定するモデルについて解説します（国際会議ISS 2020で発表した研究成果です [1]）。 このモデルを活用すると、アプリやウェブページのデザインをするさいに、デザイナーが経験的にボタンやリンクの大きさを設定するのではなく、「リンクがこの大きさであれば95％の確率でタップできるから十分だ」などと操作性に基づいてユーザインタフェース（UI）を設計できるようになります。 タップの成功率を推定できると何が嬉しい？ スマートフォンやタブレットPC向けの

freee、デザインシステム「vibes」を公開　アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 ■マジ価値サマリー（このお知らせでお伝えしたいこと） ・freeeのアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes」を公開します ・あらゆる組織でシステム開発に携わるエンジニアやデザイナーの皆様に、「vibes」を利用してシステムを構築いただく、またはコード等を参照いただくことで、社会全体としてアクセシビリティ向上の取り組みが広がることを目指しています freee株式会社（本社：東京都品川区、CEO：佐々木大輔、以下「freee」）は、freeeがこれまで培ってきたアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes（読み：ヴァイブス）」を公開しました。本デザインシステムを公開するこ

JavaScript なしでインタラクションを追加する Invokers 2023.10.22 Invokers は JavaScript なしでインタラクションを追加するための提案です。`<button>` 要素に `invoketarget` 属性を指定することで、値として指定した id を持つ `<dialog>` などの要素の開閉状態を切り替えることが可能となります。

この記事には、ゲーム「UNDERTALE」のネタバレが含まれます。 ネタバレによってゲーム体験を致命的に損なう可能性が高い作品です。今後プレイする予定のある方は、ぜひプレイ後にお読みください。 UNDERTALE（アンダーテール）とは、「知る人ぞ知る」と言うにしてはあまりにも有名になりすぎたインディーゲームです。2015年にPC向けに開発され、現在はSteam、XBOX、PSVITA、PS4、Nintendo Switch…と、多くのプラットフォームで遊ぶことができます。 ほぼToby Fox氏個人で開発した作品でありながら、各メディアのGOTY（ゲーム・オブ・ザ・イヤー）に多数ノミネートされており、「メタルギアやマリオが出てくる受賞ランキングに個人開発ゲームが入ってるってどういうことだよ！！！！！？？？？！！！！！」と当時せっせとゲームスタジオで働いていた私は卒倒しそうになりました。 こ

Visualize, communicate, and iterate on wireframes and prototypes in minutes. Empower your product team with AI!

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「この悪い子猫ちゃんめ！」、通称「わるこね」における会話シーンのカメラ演出の事例をご紹介します。 このデザインにより、以下の特徴があるように感じました。 一人称視点のカメラが固定式から移動式に変化することで、新しい表現になっている（新奇性） 該当の画面はこちらです。 最初はよくある会話シーンだと思っていました。 画面中央にキャラクターが表示されて、演技する系の画面デザインですね。 ©2021 xeen Inc. 会話を続けていくとキャラクターがプレイヤーに近づきます。 これにより見ている画面はプレイヤー自身の視点であることが強く意識されます。 ©2021 xeen Inc. 更にキャラクターに手を引かれてカメラが

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

ここ数日、自分が管理している多数のアカウントの整理をしていまして、（本当はよくないことですが）使い回してるパスワードがわりとあったので、そういったパスワードを撲滅すべく変更をしては1Passwordに反映するということを繰り返していました。 そんな中で出会ったこれは嫌だなというパスワード変更画面を紹介したいと思います。 画面構成が複雑でパスワード変更画面にたどり着けない。 パスワード変更機能がなく、「変更及び再発行を希望される際は、再度新規登録をお願いいたします」と促される。 パスワードリセット機能（パスワードを忘れた方はこちら）がパスワード変更機能を担っているが、そんな説明がどこにもないので気づかない。 パスワードリセット機能もない。 最大文字数が「6文字以内」と短い。 「6文字以上で入力してください」と書かれているので試しに6文字で登録しようとすると「8文字以上で入力してください」とエ