いぐぞー ✈️ 旅するプログラマー @igz0 旅とプログラミングをこよなく愛します。 アメリカ大陸🇺🇸を横断しました!!小学生からプログラミング→新卒SIer→Webに目覚め自社開発の上場企業Web系エンジニア。個人開発者。読書・IT関連を中心にツイートします!!ネタツイート有。アイコンは@ixy先生に利用許諾済み。Amazonアソシエイト参加。 note.com/igz0/

■ はじめに <div>要素にonClickを渡すべきではない、ということ聞いたことはないでしょうか? ただ、なぜ渡すべきでないのか? 理解してなかったので今回調べてみました。 サンプルコード 今回動作確認に利用したサンプルリポジトリのコードはReactで書いています。 ■ 結論:<div>にonClickを定義するのがなぜダメなのか? ユーザーにとって操作性の低いボタンになってしまうから、です! 要するに UX が悪くなってしまうから! その理由を解説していきます! ■ 操作性の低いボタンになってしまう理由 大きく3つあると考えています。 div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないから スクリーンリーダーが認識しない要素だから ◎ focus を持たないから <div>要素はfocusを持ちません。 なので、tabキーで要素に
米Twitterは1月17日(現地時間)、イーロン・マスクCEOが昨年12月に予告したツイートが見られた回数をツイートに表示する機能「View Count」(日本では「再生数」)のアイコンの位置を変更したと発表した。Webアプリで変更が完了しており、モバイルアプリでも間もなくロールアウトする。 再生数は、そのツイートが表示された合計回数を表示する。投稿者だけでなく、プラットフォーム上の全ユーザーに表示される。当初は左端に配置されていたが、「いいね」と「共有」のアイコンの間に移動した。 なお、コミュニティのツイート、サークルのツイート、古いツイートには再生数は表示されない。また、ツイートしてからカウントが表示されるまでに1分程度かかることがある。 Twitter Supportの公式アカウントによると、移動したのは左端に表示することが不評だったためという。 マスク氏は昨年12月22日、Vie
快適に動作するアプリケーションを提供するために、パフォーマンス・チューニングについてもっと深く学びたい。そんなUnityエンジニアのみなさまにぜひ読んでいただきたい電子書籍が登場しました。 その名もずばり『Unity パフォーマンスチューニング バイブル』。 執筆を手がけたのはサイバーエージェントグループ各社の精鋭エンジニアの方々。元々はサイバーエージェントグループ内の共有資料として制作されたそうですが、その内容とボリュームは「社内向け」の範疇に収まらないほどの商業技術書レベルです。そしてこの度、本書が誰でも無料で読める電子書籍として、社外にも公開されることが決まりました。 一般公開に先駆けて本書を拝読したユニティ・テクノロジーズ・ジャパンのエンジニアからも、絶賛の声が相次いでいます。 本書はこれからパフォーマンス・チューニングを学ぶ人にとって、最適な一冊です。すでに実務経験のある人にとっ
仕様変更に強い命名は大事だ。ボタンを「OKボタン」や「Noボタン」と名付けていたらヤバいかも。ゲーム開発に仕様変更はつきもの。開発中盤「OKボタンの色を使ってキャンセルボタンを作りたい」というケースもある。結論、用途ではなく機械的… https://t.co/6nwzoBNKWR
Since we launched Flutter, we’ve focused on delivering a cross-platform solution for beautiful, tailored apps that are compiled to machine code and take full advantage of the underlying graphics hardware of your device. Today marks a significant expansion of this vision with the first production release of support for Windows as an app target, enabling Windows developers to benefit from the same p
1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。 本記事では、 SEのAさん デザイナーのBさん の二人が画面デザインをする過程を比べながら、その思考の違いを整理してみます。 3.SEのAさんの
(ゲームの話は一切知らん) いつのまにか「Webフロントエンドの動きが速い」とか誰も言わなくなってることにふと気付いた。なんというかソフトウェアをどう作るか、という問題にたいして大枠の部分では完全に固まってしまって、あとは個別の事情をどうやっていくかみたいな話しか残ってないように見える。 端的にいえば、宣言的UIとkubernetesは聖杯だったのではないかな。 k8sにかんしては「Cloud Runみたいのでいいじゃん」みたいな話はあると思うんだけど、Envoyほしいとかなってくると結局事実上k8s必須だし、今新しくアプリ作るときに宣言的UIじゃないフレームワーク使うこととかほぼ考えられんよな。で、こういう構成が定番ですね、みたいになってなんかもう数年は経つ気がする。結果として日本語でソフトウェア開発の話になるとチームビルディングがどうのみたいな話しかなくなってきていて、なんかつまんねー
マイクロソフト、マルチプラットフォームUIを実現する「.NET Multi-platform App UI」(MAUI)を実際にデモ。単一コードからWebとWindowsアプリを生成 マイクロソフトは2月26日にオンラインイベント「.NET Conf 2021 - Focus on Windows」を開催しました。 イベントの中で同社は、マルチプラットフォームUIを実現するフレームワーク「.NET Multi-platform App UI」(以下、.NET MAUI)を用いて開発したアプリケーションをデモし、実際に単一コードから生成されたWebアプリケーションとWindowsネイティブなデスクトップアプリケーションを披露しました。 .NET 6に組み込まれる「MAUI」はマルチプラットフォームUIを実現 .NET MAUIは、今年11月に正式リリース予定の「.NET 6」に組み込まれる予
この記事は Build your own React を翻訳したものです。 Reactを1から書き直していきます。 実際のReactコードのアーキテクチャに従いますが、最適化機能と必須ではない機能は今回は実装しません。 Step 1: createElement関数 Step 2: render関数 Step 3: 並列モード Step 4: ファイバー Step 5: Render Phase と Commit Phase Step 6: 差分検出 Step 7: 関数コンポーネント Step 8: Hooks Step 0 復習 最初にいくつかの基本的な概念を確認しましょう。 React、JSX、およびDOM要素がどのように機能するかをすでに理解している場合は、この章はスキップしても構いません。 今回は、次のわずか3行のコードをReactアプリの例として使用します。 const ele
最近はクオリティの高いアプリも増え、UIの見せ方も工夫されて昔より質の高いアプリが増えましたが、低コストで開発していくとUIアニメーションは後回しにされがちですよね。 開発時間や人員の問題、UIアニメーションをやる人がいないから自分がやった人など、UIアニメーションの優先順位が低いため、手探りでやっている方も多いと思います。 今回の記事では今出ているアプリに対してあれはダメだ!と言いたいわけではなく、リリースされているアプリを触って、自分が作るときはここは気をつけようと思ったり、これはアニメーションいいなとか、実際体感して勉強していけるため、その経験が業界全体を徐々にクオリティアップしていくため、結果は惜しいアニメーションだとしても挑戦した結果でもあると思うため大事なことだと思っています。 前置きはここまでにして、今回はアニメーションの中で、あれ?と思ってしまう、そんな「これはやめてほしい
Build Modern .NET Web Apps in C# and XAML, effortlessly Windows, Android, Mac, Google Chrome, Firefox, Safari… – Build Once, Run Everywhere Discover the future of .NET web apps with OpenSilver. Our latest 3.2 release offers MAUI Hybrid integration, an AI-enhanced drag-and-drop UI designer, unmatched compatibility with Microsoft Silverlight, and extensive WPF support. Code in C#, VB, or F#, and le
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
僕にとってはLinuxデスクトップ元年は学部4回生だった1999年あたりにきて、一瞬(研究室でMacbookを買ってもらって結局firefox+emacs+端末しか触らなくなったという)浮気した時期があったものの20年ほど主なデスクトップ環境としてはLinuxだけを使う生活をしています。 たまにバグレポートをするくらいで積極的に開発に参加しているわけではない身ですが、いろいろなものが順当に進化しているなと思っています。 あとこれは僕がたまたまそうなだけで一般的には言えない話なのですが、仕事でLinuxに詳しくなったのがそのまま日常生活に有益だし、その反対もあるのでLinuxデスクトップすごくいいです。日常でちょっとハマッた時に仕事の知見がつかえるのはかなりお得感があります。 ちょうど2019年も今日で終わりですので、僕の記憶からここ20年くらいのLinuxデスクトップについての思い出や感想
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こちらの記事は、Indrek Lasn 氏により2019年 10月に公開された『 Here Are 6 Front-End Challenges to Code 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。 自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。 優れたフ
アプリケーションを実装していくと、「大規模なUI改修」に遭遇することがある。 あちこちで見聞きした結果、以下のようなパターンがあるように感じたのでまとめてみた。 (UI改修なので基本的にフロントエンドからみた内容) これは一般的に「技術的負債」と呼ばれることが多いが、デザインの負債(UIを置く場所が無くなったり無くなったり、同じ概念のUIが分散したり)である場合も多い。 (ちなみに、デザインの負債は「ダイアログを多用する」とか、「最小画面サイズが大きくなる」とかの形で現れやすい) そして、デザイン負債に対応するために実装の困難なUIが増えるため、技術的負債も高くなる傾向がある。 (サーバサイドの技術的負債がDBの負債に起因する場合が多いことと似ているかもしれない)
主にUI設計やプログラミングのAPI設計について、「わかりやすい」というのは主観的で合意が取れないのでクソという話。 定量的な指標が示されてない そもそも趣味が合わない場合はそこで終わり 〜の本来意図された機能が隠れてしまっている ↑によって隠れてしまった機能を呼び出すのが、最終的にコストが掛かる 何が言いたいかと言うと、「指標の伴わない変更に意味はない」「APIの呼び方を変える程度のラッパーライブラリやヘルパーには、特に意味がない」ということです。 ここからプログラミングの話に絞りますが、特にショートハンドしたいだけの場合、ショートハンドするAPIの実装は、必ず本来の機能を呼び出す脱出ハッチも必要となります。 よく練られていない「わかりやすさ」は、次第にこの脱出ハッチを使うことを要求するようになり、結果として捨てられることになります。この破棄までの過程は、結果的に「技術的負債」と表現され
かみなり 💬 @kaminari TGSフォーラム 「海外ゲーマーに聞いた、日本製ゲームの良くないところ」圧倒的にダントツにUI。ほんとそれ、それだから! 司会の方の「意外だった」という言葉の方が愕然ですよ。 #TGS2018 pic.twitter.com/EcY1ygnznx 2018-09-20 13:59:16 リンク Wikipedia ユーザインタフェース ユーザインタフェース(英: User Interface, UI)または使用者インタフェースは、機械、特にコンピュータとその機械の利用者(通常は人間)の間での情報をやりとりするためのインタフェースである。ユーザインターフェース/ユーザインタ(ー)フェイス/ユーザーインターフェ(イ/ー)スなどの表記ゆれが見られるが、本記事では「ユーザインタフェース」で統一する。ユーザインタフェースは以下の手段を提供する。 システムを使う場合
Microsoft、手書きのUIスケッチをHTMLに変換する「Sketch2Code」を発表:AIで手書きの図形と文字を認識 Microsoftは、手書きでスケッチしたUI画面をHTMLコードに自動変換するWebベースソリューション「Sketch2Code」を発表した。 Microsoftは2018年8月30日(米国時間)、ホワイトボードなどに手書きでスケッチしたユーザーインタフェース(UI)画面を、AI(人工知能)を利用して、HTMLコードに変換するWebベースソリューション「Sketch2Code」を発表した。 Microsoftによれば、UIのデザインプロセスには無駄が多いという。通常は、まずアイデアレベルのスケッチをホワイトボードに描き、数人で検討してから写真に撮影し、HTMLコードを書き下す。これでは手間ばかりかかり、すぐにアイデアを形にできない。 画像認識技術とAIを組み合わせ
タスク 3:ツールボックス ペインと PropertyGrid ペインの作成Task 3: Create the Toolbox and PropertyGrid Panes 03/30/2017 共同作成者 このタスクでは、作成、ツールボックスとPropertyGridペインがありますし、再ホストされたに追加Windows ワークフロー デザイナーWindows Workflow Designerします。In this task, you will create the Toolbox and PropertyGrid panes and add them to the rehosted Windows ワークフロー デザイナーWindows Workflow Designer. リファレンスについては、3 つの完了後に MainWindow.xaml.cs ファイルに登録するコードのタ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く