JavaScriptで背景色から文字色を導出するこの記事を読んで、文字色の判定の基準が気になったので調べてみました。 w3cのWeb Content Accessibility Guidelinesでは、明るい色と暗い色のコントラスト比が少なくとも 4.5:1 になるようにとなっていました。大きい文字では 3:1 まで。 Material DesignもWCAGのこの基準をもとにしているそうです。
Sticky Sidebar ⬆⬇
Sticky Sidebar 😎 Sticky Sidebar ⬆⬇ is a pure JavaScript plugin for making smart and high performance sticky sidebar, works with sidebar if it’s taller or shorter than the viewport, integrated with resize sensor to re-calculate the dimensions automatically when the size of sidebar or its container is changed, supports jQuery/Zepto and compatible with Firefox, Chrome, Safari, and IE9+. Source can b
ページ内リンクの実装から考える、a要素のclickイベントとその振る舞い
この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-behaviorプロパティを使えば非常に簡単に実装できます。 body { scroll-behavior: smooth; } たったこれだけの宣言で、JavaScript を一切用いることなく、ページ内リンクをクリックしたときのスクロールにアニメーションが伴うようになります。また、ページ内リンクのクリックだけでなく、可視領域外にある要素がフォーカスされたときや、ページ内検索に一致したテキストがハイライトされたときなど、スクロールが伴う場面すべてに適用されま
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
pixivにアクセス解析機能が付きましたよ（前編） - pixiv engineering blog
こんにちは。UI大好きフロントエンド担当の@ykskです。主な仕事はコメントを書くことです。。 さて、先日pixivにプレミアム会員限定のアクセス解析機能が付きました。 プレミアム会員の方はこちらからご自分のレポートを見ることがきます。会員でない方はこちらに登録ページが、また、こちらにサンプルページがあります。主な機能は現在のところ以下の通りです。 イラストの全作品とそれぞれの作品についての閲覧数、総合点/評価回数、コメント数、ブックマーク数と被フォローユーザー数を直近1週間のグラフで見ることができる 作品のリファラー（pixiv内外のどこから訪問されたか）を見ることができる 最近反応のあった作品のリストを見ることができる 今回僕はUIの設計とJS、HTML、CSSの実装を担当したのですが、その際メイン機能のグラフを描く部分ではD3というデータのビジュアライズに特化したライブラリを使ってみ
Tog on Hierarchical Menu
Khan Academy の開発者が Amazon.com の高速なメニュー切り替えを行う実装について、面白いブログを書いていたので、メモ。 BREAKING DOWN AMAZON’S MEGA DROPDOWN http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown 階層メニュー Amazon.com の department メニューや Windows のスタートメニューでお馴染みの、メインカテゴリーとサブカテゴリーというように階層になったメニューがある。Web UI 界隈では mega drop-down menu という名前が付いている模様だけど、Mac だと 80 年代から存在する。 UX 視点では 上下のメインカテゴリー移動 メインカテゴリーからサブカテゴリーへの移動 の2つのメニュー操作が肝。
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
『スマートフォンUIのアニメーションについて』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 2012年6月にサービスを開始したスマートフォン向けソーシャルゲーム ULTIMATE RACERアルティメットレーサー）でデベロッパーをしている横田と申します。ULTIMATE RACERの開発時に、画面内のアニメーションをjQueryのanimate処理からcssアニメーションに切り替えた経緯について、自分なりの考察ともにご紹介したいと思います 対象としてはデザイナー、マークアップエンジニアでJSやcssでアニメーションの実装を始めたばかりの方が最適だと思います。 また本稿はjQueryのバージョン1.7.1を使用した場合を想定して記述しています
明日のためのクライアントサイドMVC
Alignment and Autonomy in Cybozu - 300人の開発組織でアラインメントと自律性を両立させるアジャイルな組織運営 / RSGT2025
Post by @hamalog
このサンプルでは、一個クリックすると他のがactiveじゃなくなる。作ったViewのインスタンスを、Managerにぴょこぴょこ追加し、追加されたviewらをまとめてアクティブにしたりしなかったりするようなことをやるだけのクラスを作る。 # ============================================ # Abstract things # ============================================ class Manager _.extend @::, Backbone.Events add: (item) -> @items ?= [] @items.push item deactivateAll: -> _.each @items, (item) -> item.deactivate() @trigger 'deactivat
Post by @hamalog
# Template manager # //hamalog.tumblr.com/post/13593032409/jquery-tmpldeck deck = $.TmplDeck 'templates.html' # ============================================ # API wrapper # ============================================ api = getTweets: (query) -> $.Deferred (defer) -> $.ajax url: 'http://search.twitter.com/search.json' dataType: 'jsonp' data: result_type: 'recent' rpp: 10 page: 1 q: query .pipe (re
デブサミ2012で大規模JS開発について発表してきました - yo_waka's blog
「Developers Summit 2012 - 10年後も世界で通じるエンジニアであるために」で発表してきました。 デブサミ2012 kintoneの表と裏 - 表編 View more presentations from yo_waka イマドキのJSの話とかではなくて、UIをJSで作る際の設計ノウハウみたいな話にしたので、つまらなかったら申し訳ないなと思ってたのだけど、終わったあとも何人か質問しにきてくれた方がいたのでホッとしました。 10年後も・・というテーマとして、激しく進化するJSの最新動向に左右されず使えるネタを選んだつもりではあります。 普段からJSでもパフォーマンス意識して設計してる方には当たり前のことばかりだったかも。 jQueryは甘えってのは書いてみたかっただけですすいません。。 けど、適材適所というかSinatraで100画面近くあるようなWebアプリは作らな
pixivポップボードのキャッシュの仕組みとFacebookのUIの話
pixivポップボードのキャッシュの仕組みとFacebookのUIの話 こんにちは。JavaScript Advent Calendar 2011 オレ標準コース18日目の@ykskです。 先日pixivにポップボードという通知機能がリリースされました。自分がお気に入りユーザーに追加されたり、投稿したイラストがブックマークされたりした時にヘッダーに未読件数などのお知らせを表示します。僕は直接機能を実装していたわけではないのですが、リリース直後に起こった負荷の問題でJSを書きました。今日はその話をします。主にUIの話です！ え！ リリース直後、定期的に未読数の更新をAjaxで行っていた部分の負荷が急激に上がりました。ページロード時にHTMLに未読数を埋め込んだあと、2分ごとに未読数取得APIへリクエストするという処理です。 ポップボードはヘッダーに出るため、ほぼ全てのページでこの処理が入りま
QunitによるWeb標準系UIのシナリオテスト - TechTalkManiacs
このエントリーはHTML5 Advent Calendarに参加しています。本当は18日目だったのですが、こんな時間になってしまいました。 Web標準系UI、というのは私が勝手に呼んでいる呼称なのですが、HTML+JavaScript+CSSを使ったUIのことです。なので、大まかにはWebサイトなども含まれます。 Web標準系UIは表現力の高さが魅力ですが、その分、画面が正常に動作するかのテストが大変です。もちろんSeleniumというツールもあるのですがこれは有名なので適当に検索してもらうとして、今回はあまりこういった文脈では紹介されることないQunitを紹介したいと思います。 QUnitとは？ 元々はjQueryのテスティングフレームワークとして開発されたもので、その時はJQUnitという名前でした。現在はjQueryから独立して依存性をなくしています。 各言語にある同様のツールとひと
Chrome Extentionで高機能なデスクトップ通知を作る - TechTalkManiacs
ふと思いついたことがあって、Chrome Extentionを作っています。某所に対してごにょごにょしてデスクトップ通知をするのですが、単なる通知ではさびしいですし、なにより不便です。Opera標準のRSSリーダーのようなクリックしたらリンク先に飛ぶなどのリアクションがあるデスクトップ通知が欲しいのですが、意外とこのあたりの情報がまとまっていなくて苦労しましたのでまとめておきます。 デスクトップ通知する よく知られているようにChrome ExtentionはHTML+JavaScript+CSSでChromeの拡張が作れる仕組みです。 まず、Manifest Fileと呼ばれるJSON形式のファイルがあり、ここに記述された挙動やファイル構成を元に動作します。 デスクトップ通知を行うにも、まず使用者からデスクトップ通知をしてもいいよ、という許可をもらう必要がありますので、このファイルに許可
Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン :: 5509
Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン Ajaxやタブクリックなどのイベントでもブラウザの「戻る」「進む」を有効にすることができるjQueryのhashchange eventというプラグインを紹介します。同じような効果を得られるスクリプトより断然使いやすいのでおすすめです。 使い方はとても簡単で windowにhashchangeイベントをbindするだけです。 $(window) .hashchange(function() { Hoge(location.hash.replace('#', '')); }); // ハッシュフラグメントが変わったときにHoge()を実行する $(window).hashchange(); // Windowロード時に実行できる Ben Alman » jQuery hashc
インターン講義5日目「ユーザインターフェース,HTML5」 - Hatena Developer Blog
インターン生は、連日の講義と課題で大変そうですが、今日も講義が続きます。 本日は、id:nanto_viによる「ユーザインターフェース,HTML5」です。仕様書を隅々まで読んだ講師によるディープな講義内容となっています。今日も2時間の長丁場ですが、頑張って着いていきましょう! ユーザーインターフェース、HTML5 ユーザーインターフェースで大切なこと、HTML5 及び関連 API で何ができるか 自己紹介 nanto_vi (外山真, TOYAMA Nao) ブックマークチーム アプリケーションエンジニア はてなブックマーク Firefox 拡張 はてなツールバー for Firefox はてなブックマーク Twitter 投稿機能 はてなサマーインターン 2008 なんとなく Emacs 富山県南砺市とはあまり関係なし 概略 UI の評価・設計・実装の概略 HTML についての概略、HT
お手軽に付箋を作るjQueryプラグインjQuery Sticky Notes Plugin - TechTalkManiacs
少し前に、AjaxとjQueryで付箋を作るセットが話題になりましたが、これのjQueryプラグイン版といえるものがjQuery Sticky Notes Pluginです。 Ajax機能や、サーバーサイドスクリプトはセットにありませんが、そのかわり付箋の直接編集が可能ですし、オプションによってAjax機能の追加も容易です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Apps Script でjsonデータの読み込み - Qiita
LLPlanets - JavaScriptプログラマのための 全方位的完全武装ガイド