JavaScriptを書かない2025年のモーダルの実装方法 – TAKLOG
2025年のモーダルの実装方法のメモ書き。 <dialog> 要素の利用を前提とします。 Web アプリケーションで UI ライブラリを利用する場合は話が変わってきます。 1年前にdialog要素を使用したモーダルウィンドウの実装例を投稿しましたが、大幅にアップデートされているため、忘れても構いません。 結論<dialog>要素の開閉は command 属性を使用する<dialog>要素の外側をクリックした際に閉じる Light dismiss 機能は closedby 属性を使用するcommand 属性と closedby 属性は Polyfill を使用する開閉時のアニメーション、背面のスクロール抑制、スクロールバーの有無によるガタツキの防止は CSS で行う方針としては極力JavaScriptを書かないことを目指します。 次のようにHTMLを書くことで<dialog>要素の開閉および
5人のユーザーでテストすれば十分な理由
手の込んだユーザビリティテストはリソースの無駄づかいだ。最高の結果を得るためには、5人以下のユーザーでテストし、小規模なテストを余裕のある限りたくさんやることだ。 Why You Only Need to Test with 5 Users by Jakob Nielsen on March 19, 2000 ユーザビリティはお金がかかって複雑だ、ユーザビリティテストなんて、よっぽど予算があって、しかも時間的にも余裕があるという、めったにないプロジェクトのために取っておけばいい、と考える人もいるようだ。だが、それは違う。手の込んだユーザビリティテストは確かにリソースの無駄づかいだ。最高の結果を得るためには、多くとも5人のユーザーでテストすれば十分。そのかわり、小規模なテストを余裕のある限りたくさんやることだ。 以前の調査で、Tom Landauerと私は、n人のユーザーでテストしてわかるユ
ChatGPTに要件定義をお願いしたらハンパなかった | DevelopersIO
架空の営業管理システムを作ってもらう前提で、ChatGPTに要件定義をお願いしてみました。 実験として軽く試すレベルで始めてみたのですが、予想を超えるクオリティでしたので、一部始終を皆様にもご紹介します。 ChatGPTとのやりとり まず、ざっくりと必要な機能の洗い出しをお願いしてみました。 あっという間に必要な機能を網羅的にリストアップしてくれまた。私自身、SFA/CRMをいくつか触った経験がありますが、適切な内容だと思います。 中には、「データのインポート・エクスポート機能」のように、検討初期段階ではつい忘れそうな機能も含まれています。さらに頼んでもいないのにオススメの検討プロセスまで教えてくれました。気が利いてます。 機能ベースだと要件の妥当性が判断しにくく思ったので、画面ベースで要件定義してもらことにしました。 「図で教えて」とできないことをお願いしたところ、やんわり断りつつ、意図
UIが嘘をつく？ ユーザ体験における「楽観的な更新」とSPAでの作り方
こんにちは、株式会社カミナシでデザインエンジニアをしているショウです。 突然ですが、UI/UX デザインにおいて、「楽観的な更新」という言葉を聞いたことがありますか？あまり聞いたことがなくても、実は日常にたくさん存在しています。 例えば、 twitter や facebook のいいねボタン。いいねをタップした直後に色がつくのですが、実はサーバーへのリクエスト送信と UI 上のいいねの色付きが同時に発生しています。つまりサーバーからの通信結果を待たずに UI を更新しています。 他に、trello でタスクカードを隣の列に移動したり、iMessage や Facebook メッセンジャーでのメッセージの送信、Kindle アプリで途中までしかダウンロード出来てない本が読めることなども楽観的な更新です。 図：楽観的な更新を採用しない時と採用した時のメッセージ送信のUI （引用元） 楽観的な更
快適なUXを実現するOptimistic Updates(楽観的更新)とは何か
先日、とあるJavaScript関連の記事を読んでいたところ、"Optimistic Updates" という技術が紹介されていました。 日本語に直すと "楽観的更新" といったところでしょうか。 はじめて聞いた言葉で、日本語の記事も見当たらなかったため記事にしてみます。 Optimistic Updatesとは Optimistic Updatesというのは、ネイティブアプリやSPA(Single Page Application)などで使われる技術で、非同期の通信処理が成功するという前提(楽観)のもとに、通信のレスポンスを待たずに次の処理を行うというものです。 最も多いOptimistic Updatesの使い方は、UIへの反映をリクエストの結果を待たずに行うというものでしょう。 Optimistic Updatesの例 例えば、よくある「いいね」ボタンのようなものにOptimisti
オブジェクト指向UX | POSTD
(注：2015/11/18、記事およびタイトルを一部修正いたしました。) CNN.com で働いていた2012年6月に、大統領選挙投票日の夜のユーザエクスペリエンス（以後UX）のデザインを任されました。私はそれからの6カ月間を投票日の夜のための仕事に専念しました。しかし、仕事が成功するかしないかは、選挙結果に関係はありませんでした。私が懸念していたのは、情報の見つけやすさやデータの見やすさ、canvasでのオブジェクトの変形、そして一体どのようにしたら、iPhoneでマウスオーバーのフライアウトが動作するのかでした。CNN.com史上初めてWebデザインをレスポンシブにすることにしたのです。さらに史上初めて私が、その デザイン を担当することになったのです。 大きな賭けでした。CNN.comにとって大統領選挙投票日の夜と言えば、スーパーボウル（プロアメリカンフットボールの優勝決定戦）の日曜
ゲームAI -基礎編- 『知識表現と影響マップ』
みなさん、こんにちは! 突然ですが…皆さんには、ひいきにしている ゲームのキャラクターはいらっしゃいますでしょうか。 手ごわいボス敵や頼れるパートナー、愛嬌のある動きをするモンスター達は 一体どのような仕組みで動いているのでしょう？ 今回の記事ではそんなゲームの中のキャラクター達を 魅力的に動かす仕組み、AIについて御紹介したいと思います。 改めまして本記事を担当させて頂きます、Cygamesエンジニアの佐藤です。 これまでコンシューマ機でのゲームAI開発に携わり、 ゲームならではのキャラクター表現の楽しさを追いかけてきました。 このブログを通じて、皆さんのゲームのキャラクターを より表情豊かに魅力的なものにする方法について、皆さんと一緒に考えていければ幸いです。 今回はゲームのAIをデザインするにあたって重要となる、 「知識表現を定義する」というステップと、 知識表現の一つである影響マッ
Swiftでメモ的なwarningの発生のさせ方(Objective-Cの#warning相当) - Qiita
Objective-Cでは#warning 何かメモとコード中に書くことによって、明示的に警告を発生させることが出来ました。 きっと、たぶん、おそらく、めいびー: 「あとでやろう」ってときは #warning hoge これを埋め込んだ状態で、コミットや特にPUSHはするべきじゃ無いですが、開発中に手元の状態を一時的に変えたい時や、ファイルを行ったり来たりするときのブックマークとして便利でかなり活用していました。 ただ、Swiftコードではこのやり方が出来ず1、不便だなと思っていましたし、それが原因のミス(一時的に手元で弄って後で戻すつもりのものをコミットしてしまうなど)も発生したりでけっこう困っていました。 というわけで解決策です。 【2018/04/19追記】Swift 4.2以降の#warning命令を活用 コードに#warning("XXX")を書けば警告扱い、#error("XX
iOSの開発でお気に入りのライブラリN選 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 殿堂入り Realm Core Dataなんて最後に使ったのはいつだろうか。。。 Alamofire SwiftyJSON 通信ライブラリAlamofireのブロック構文に、JSONをより扱いやすくするSwiftyJSONをぶっこむ。 最近SwiftyJSONの仕様が変わってイマイチになったが、Swiftバージョン2.0でguard構文が追加されるので、guardで宣言するときに使いやすくなるかも。 SDWebImage みんな知ってる画像キャッシュライブラリ。 UI paper switch スイッチのON/OFFで色をアニメーション
いかにしてSlackは市場を席巻したか –– UIデザインを担当したMetalab創業者がその舞台裏を語る ｜ブログ｜root｜デザインの実践を個から組織・事業へ
================ 「Slack成長の秘密は何なのでしょう？」車内にBluetoothを通した声が響きます。 「あなたがたが、Slackに行ったことを私たちにもしてほしい」と、今後クライアントになるであろう、成功を収めたSaaSアプリのCEOが、彼のプロダクトのリデザイン依頼をしてきました。 それから私は今までに何百回もした話を始めました。 この一年、ほぼ毎日のように同じ質問を、Slack成功の鍵について分析を試みるクライアント、投資家、デザイナーから浴びせられていました。 Slackは今や世界を席巻しており、28億ドルの評価額と何十万ものユーザーを持ち、猛スピードで成長しています。 なぜ私にSlackの質問がくるのか？ 私はMetaLabというデザイン会社を経営しています。 私たちは普段表舞台には出ないので、おそらく、あなたはこの名前を耳にしたことはないでしょう。しかし、私
Blender エンジニアでも出来るキャラクタ3Dモデリング | GREE Engineering
はじめに こんにちは。情報システム部の山田幸司です。GREE Advent Calendar 2014 5日目の記事を担当させて頂きます。 今回のテーマは「Blender」です。 ゲームづくりに携わっているエンジニアの方々の中にも、素材を自前で用意して動かしたいと思っている方が多いと思います。僕も2年前から趣味でUnityを触り始め、3Dモデルを自作して動かしたいと思い始めていました。ただ3Dのモデルデータをどうやって作ればいいのか悩む方がいると思います。モデリングのためにMayaやLightWaveなどのモデリングソフトの購入も検討できますが、高価で手を出しにくい。そんな時にBlenderをお勧めします。 Blenderとは Blenderはオープンソースのモデリングソフトです。最新バージョンは2.72b(2014/12/5現在)。フリーのモデリングソフトならばメタセコイアが有名だと思い
マリオのジャンプはなぜ優れているのか？そしてスプラトゥーンはなぜ「面白そう」なのか？ - 色々水平思考
「アイデアというのは複数の問題を一気に解決するものである」 これは、任天堂のゲームクリエイター宮本茂の言葉である。この言葉ほどアイディアというものの本質を突いた言葉は無く、故・横井軍平の「枯れた技術の水平思考」に匹敵する名言だと思う。 ではこの言葉の示すアイディアとは具体的にどのようなものなのだろうか？その答えはこの言葉を発した当人である、宮本茂が作った大ヒットタイトル、「スーパーマリオブラザーズ」の「ジャンプ」というアクションに込められている。 「スーパーマリオブラザーズ」における「ジャンプ」というアクションは、目の前の障害物や落とし穴を乗り越えるという機能以外に、頭上のブロックを叩く、「ジャンプ」からの落下地点にいる敵キャラクターを踏んづけるという機能を持っている。だから「ジャンプ」で障害物を乗り越えた先にいる敵を踏むという複数の行為を一つのアクションの中で行うことが出来る。一つのアク
開発者は必見? GoogleがAndroidアプリのUXアンチパターン動画を公開 - すまほん!!
数多のアプリが氾濫する Android アプリですが、過去に開発の経験がある方・現在進行形で開発中の方……数多くいらっしゃるかと思います。 そんな方に是非、ご覧頂きたいのが Google が Youtube にて公開している ANDROID DESING in ACTION UX アンチパターンです。ご存じの通りアンチパターンとは「べからず集」のことで「これは駄目だからこうして欲しい」といったことがわかりやすく紹介されています。 動画の内容としては、ダイアログの表示方法、ボタンの位置、タッチフィードバック……etc 開発者の方はそのまま知識を吸収することができますし、開発者ではない方も「へー」と思えること間違いなしです。
伊藤直也氏が語る、モバイルアプリケーション開発のいまとこれから（前編）～Salesforce Developer Conference Tokyo 2013
伊藤直也氏が語る、モバイルアプリケーション開発のいまとこれから（前編）～Salesforce Developer Conference Tokyo 2013 いま多くの開発者が取り組もうとしているモバイルアプリケーションの開発は、経験の面でも技術の面でも、コンシューマ向けの開発現場が大きく先行しています。 9月6日開催されたSalesforce Developer Conference Tokyo 2013のセッション「B2Cからみたモバイルアプリケーション開発のいまとこれから」では、コンシューマ向けサービス開発の現場に身を置いてきた伊藤直也氏が、モバイルアプリケーション開発を成功させるための方法を、これまでの経験や現在の開発現場で得たノウハウなどを基に語っています。 試行錯誤の回数を増やす、iOSとAndroidは同じように作ってはいけないなど、モバイルアプリケーション開発に関わるエンジ
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 スライドのアニメーションがとても滑らか・ちらつかない ボタンの反応にストレスを感じない メイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザイン講習会
これは興味津々。ネイティブアプリにおける、UI/インタラクションのトレンド - mobile hack 楽しい生活情報を携帯しよう
セキュリティ診断・検査のGMOサイバーセキュリティ byイエラエ
iOS 7 特集 の記事一覧 | DevelopersIO
http://hmdt.jp/blog/?p=353