バグ報告の再現手順に「レッチリを再生する」とありそんなわけないやろwwと思ったが、たしかにレッチリを再生してる時だけ挙動が不安定になり頭を抱えている→「スタンド攻撃だ！」
木浦 幹雄 / KIURA Mikio @ANKR DESIGN @kur バグ報告を受けたのだけど再現手順を読むと「レッドホットチリペッパーズを再生する」というのが含まれていました。そんなわけないやろwwwwwと思いつつも手順通りやってみたところ、たしかに本当にレッチリを再生してる時だけ挙動が不安定になり頭を抱えています。 2022-04-18 15:47:14 木浦 幹雄 / KIURA Mikio @ANKR DESIGN @kur デザインスタジオ @ankrdesign 代表。奈良先端大、Canon、CIID出身。未踏スパクリ認定。デザインリサーチ、UXリサーチ、プロトタイピングが大好きです。「デザインリサーチの教科書」著者「要点で学ぶデザインリサーチの手法125」監修。 お仕事の相談はDMでお気軽にどうぞ。 amzn.to/3mmUvLG ankr.design
UIが嘘をつく？ ユーザ体験における「楽観的な更新」とSPAでの作り方
こんにちは、株式会社カミナシでデザインエンジニアをしているショウです。 突然ですが、UI/UX デザインにおいて、「楽観的な更新」という言葉を聞いたことがありますか？あまり聞いたことがなくても、実は日常にたくさん存在しています。 例えば、 twitter や facebook のいいねボタン。いいねをタップした直後に色がつくのですが、実はサーバーへのリクエスト送信と UI 上のいいねの色付きが同時に発生しています。つまりサーバーからの通信結果を待たずに UI を更新しています。 他に、trello でタスクカードを隣の列に移動したり、iMessage や Facebook メッセンジャーでのメッセージの送信、Kindle アプリで途中までしかダウンロード出来てない本が読めることなども楽観的な更新です。 図：楽観的な更新を採用しない時と採用した時のメッセージ送信のUI （引用元） 楽観的な更
クリーンアーキわからんかった人のためのクリーンじゃないけどクリーンみたいなオニオンに見せかけたSOLIDの話
依存関係逆転則含む諸原則に苦しめられた方々，いかがお過ごしでしょうか． 今回はアプリ設計の話です．と言っても，前回「クリーンアーキわからんかった人のためのオニオンアーキテクチャ」というZenn記事を書いて，反響が大きかったのでリメイクしたいなという気持ちになり執筆することにしました． 前回同様，調べていく上で誤解していた部分や理解しにくかった部分を語った上で，オニオンアーキテクチャという，クリーンじゃないけどクリーンみたいな玉ねぎについて紹介するのですが，今回はわかりやすい図解であったり，実際にどのような実装をしていくべきなのかを話の話題として加えていければ良いかな？って思っています． これは前回の記事である「クリーンアーキわからんかった人のためのオニオンアーキテクチャ」の記事の裏話的な話を一つさせてください． 今年の11月初め頃に，サポーターズという企業の学生が登壇できるLT会があり，私
ソフトウェアデザインにおける構造設計を実践！マネーフォワードさんとワークショップを開催しました｜Goodpatch Blog グッドパッチブログ
Goodpatchでは、UIの構造設計を重視したデザインプロセス「モデルベースUIデザイン」を推進しています。最初にコンセプト定義やユースケースを定義し、情報整理をして最終的に機能やビジュアルなどの具体的なところを詰めていく考えをとっていくプロセスです。 今回は、マネーフォワードさんと「デジタルプロダクトのUI設計のプロセスと考え方を学び、実践することでスキルのベースを身につけること」をテーマに、モデルベースUIデザインについて理解・実践するワークショップを開催しました。本記事では開催の背景から当日の様子をご紹介します。 参加いただいたマネーフォワードのUI/UXデザイナーさんによるnoteもぜひご覧ください！ マネーフォワードがGoodpatchさんとUIデザインワークショップを実施しました！ ご相談いただいた背景 「お金を前へ。人生をもっと前へ。」をミッションに掲げる株式会社マネーフォ
Next.jsで整える。デザインとロジックの分離
先日開催されたジャムジャムJamstackで登壇させていただいた時の記事になります。 簡易構成のリポジトリを作成しましたので、参考になればと思います。 経緯 メディアサイトを作成することになった デザイナーコーダー ×1 フロントエンドエンジニア ×1（ワイ） Next.jsとmicroCMSでSSGしてvercelにデプロイ 私的、Jamstack王道構成ですね デザイナーコーダーさん「Jsわからんです」「抵抗感あります」 SSGをする為のpages/配下のファイルにはいろんな処理が記載されます。 getStaticPropsやgetStaticPathsとか ページネーションとかパンクズとか作る為の処理が色々記述されます。 この辺なんらかの方法で・いい感じに・分離できたら・いいですね^^ デザイナーコーダーが触るViewの部分 フロントエンドが触るロジックの部分 これを目指していきます
それ、Canvaで作れます。Web開発者が知っておくべき10のスゴ技！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、人気のグラフィックデザインツール「Canva」に搭載されている多彩な機能のうち、Web開発者に役立つ機能を厳選してご紹介します。 「Canva」は、アイキャッチ画像やバナー広告・ポスターを作成するなど、さまざまな画像編集やデザインを作成できるのですが、実はそれ以外にも驚きの使い方ができる多くの機能が搭載されています。 新しい「Canva」の使い方を知りたい方も含めて、ぜひWeb制作に役立ててください！ 【 Canva 】 ■Webサイトのプロトタイプを作って公開！ 「Canva」を使うと画像やテキストなどを組み合わせて、手軽にWebサイトのデザインを構築できるのをご存知でしょうか。そのうえ、ホスティングも同時にしてくれるので、簡単なプロトタイプを作ってネット上に公開できる仕組みがあります。 方法は簡単で、「Canva」の検索ボックスに「
高度なモーションデザインを無料で作成できるWebエディタ「Jitter」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webデザインに活用できるモーションデザインをブラウザ上のエディタから誰でも簡単に作れるWebサービスをご紹介します。 手軽に高度なアニメーションを実現できる機能が豊富に提供されており、簡単なものならマウスで数回クリックするだけで完成してしまいます。無料で書き出しにも対応しており、記事後半ではFigmaとの連携方法についても解説しています。 Webのアニメーションにご興味ある方はぜひ参考にしてみてください！ 【 Jitter 】 ■「Jitter」の使い方 それでは、「Jitter」をどのように使えばいいのか詳しく見ていきましょう！ まずはサイトのトップページから【Try it now】ボタンをクリックして無料のユーザー登録を済ませておきます。 メールアドレスや名前などを入力するだけなので簡単です。 登録したメールアドレス宛にログイン用
レイヤードアーキテクチャ - kawasima
POSAでの定義 レイヤードアーキテクチャを、体系だって書いたのは「Pattern-Oriented Software Architecture, Volume 1, A System of Patterns」だろう。まずはその原典に立ち返って、レイヤードアーキテクチャとは何かをみてみる。 コンテキスト ソースコードの変更がシステム全体に波及させたくない。それが1つのコンポーネントに閉じられ、他に影響を与えないようにすべきだ。 インタフェースは安定している。標準化団体によって規定されている場合もある。 システムの一部は交換可能である。コンポーネントはシステムの他の部分に影響を与えることなく、実装を入れ替えることができる。 現在設計しているシステムと同様の下位レイヤの課題をもつ他のシステムを、将来構築することがあるかもしれない。 理解のしやすさと保守性のために同じ責務はグルーピングしておきた
Promiseをthrowするのはなぜ天才的デザインなのか - Qiita
ReactのConcurrent Modeが最初に発表されたのはもう1年近くも前のことです（記事執筆時点1）。Concurrent Modeはたいへん奥深い機能で正式版がたいへん待ち遠しいですが、Concurrent Modeの代名詞として多くのReactユーザーに知られているのはPromiseをthrowするというAPIデザインです。Concurrent Modeでは、コンポーネントがレンダリング時にPromiseをthrowすることで、レンダリングをサスペンドした（Promiseが解決されるまでレンダリングできない）ことを表します。 Concurrent Modeに関しては筆者の既存記事Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理などをご参照いただきたいのですが、ここではPromiseをthrowするということ自体に焦点
URLだけでOK！どんなWebサイトもコメント付きでシェア可能な「MarkUp」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、URLを入力するだけであらゆるWebサイトの好きな箇所にコメントを付けて、不特定多数の人とシェアできるWebサービスをご紹介します！ Webサイトのデザインや機能について、チーム内だけでなくさまざまな人と意見交換したいときに活用できるサービスになっています。 使い方に関しては究極にシンプルな設計なので、誰でもすぐに利用できるのも大きな魅力でしょう。 【 MarkUp 】 ■「MarkUp」の使い方 それでは、実際に「MarkUp」をどのように使うのか詳しく見ていきます。 まずはサイトのトップページからユーザー登録を済ませておきましょう。メールアドレスを入力したらボタンをクリックしてください。 次にユーザー名とパスワードを設定すれば完了です！ 以下のようなダッシュボード画面が表示されます。 画面上部にあるボックスへWebサイトのURLを入
「美しい」にモヤったら「認知負荷が小さい」と言いかえよう - Qiita
プログラミング業界では定期的に「美しいコード」が話題になり、そのたびに炎上が発生します: コードの美しさは実務には関係ない 美しくても動かなければ意味がない 「美しさ」は主観的で、プログラマーの自己満足に過ぎない 汚くたって俺は読める。読めないお前が悪い などなど・・・ 私もコードは美しくあれかしとは思いつつも、 「確かに『美しい』って曖昧だよな」とか、 「どうして = の位置がそろっているのを『美しい』というのだろう？『整然としている』なら分かるけど」とか、 「『可読性が高い』でもいいけど、今一つ『美しい』との違いが判らん」 「そもそも、どうして美しいコードの方が読みやすいと言えるんだ？」 と、割り切れなく思っていました。 ところで、最近の心理学・脳科学ではこんな説があるようです（本当かどうかは知らないよ）： 中野：（中略）美人の顔って対称性が高いって言われますよね。あれは別に体が健康だ
強化学習で「ゼビウス」攻略に挑む、昭和レトロなAIロボットの正体
段ボール製ロボットの名前は「キューゴロー」。昭和の時代を思い出させるどこか懐かしいデザインが特徴だ。一見すると、キューゴローの手でコントローラーを操作しているように見えるが、実際は「裏側で動いているAIがゲームをプレイしている」（バンダイナムコ）。 AIには、与えられた環境における価値を最大化するようにエージェントを学習させる強化学習（reinforcement learning）の手法を用いた。キューゴローは巧みな操作で敵の弾をかわしながら攻撃していくが、たまに失敗すると悲しげな表情を見せてくれる。 ユニークな展示に込められた思いを担当者に聞いた。 渡米するために「折りたためるロボット」を製作 バンダイナムコ研究所の中野渡昌平さん（イノベーション戦略本部 クリエイティブデザイン部 課長 事業プロデューサー）は、「AIやロボットは直感的に理解しにくいものです。人と機械の身近なコミュニケーシ
コードが教えてくれるデザイン思考
今プログラミングを教育に取り組もうという声が高まっています。CODE.orgのようなサイトも立ち上がっていますし、Scratch のような子供から楽しめるビジュアルプログラミングもあります。 デザイナーの中でもプログラミングを始めたい方もいると思います。WWDC 2014 で発表された Swift は、スクリプト言語のような感覚でコードが書けるので、始めるには良い機会なのかもしれません。 ただ、デザイナーの立場からみると、プログラミングは遠い存在に見えることがあります。しかし、「問題解決のため」という視点からみると、デザインとプログラミングには共通点がたくさんあります。人間中心デザインに基づいた発想にも、実装可能なところまで落とし込んで模索しないと、夢心地なアイデアになることがあります（もちろん自由な発想が必要なときもありますが）。コードを書くひとの考え方を取り入れることで、アイデアを洗練
ソニー、ブロックの組み合わせで「つながる生活」を実現する「MESH」を発表 - すまほん!!
Sony Mobileは、ブロックを組み合わせて「つながる生活」を実現するプラットフォームとして「MESH」を発表しました。 この「MESH」は、様々な機能を持つブロックを組み合わせることで、ユーザーが求める機能を実現できるとされています。同社はこの「MESH」の具体的な利用例として、ブログ上でこのような例を挙げています。 「モーションセンサー」ブロックと「スピーカー」ブロックを組み合わせ、ぬいぐるみに装着することで、子供が触れるとぬいぐるみが笑う 「カメラ」ブロックを冷蔵庫の向かい側に置き、「モーションセンサー」ブロックを冷蔵庫のドアに設置することで、冷蔵庫が開けられた時に写真を撮影し、常にスマートフォンへ転送することで冷蔵庫の内容を常に確認できる 「LED」ブロックを傘立てに設置し、天気予報をチェックするよう設定することで傘が必要な時にLEDが光り通知してくれる この「MESH」の機能
モバイルAPIデザインのまとめ - ワザノバ | wazanova
Natasha Murashevがブログで、API Strategy and Practice Conferenceにおける、Michele Titolo (先月、「 Ruby RoguesメンバとiOSエンジニアのAPI議論」で紹介しました。）とEtsyのPaul Wrightの講演のポイントをまとめてくれています。 1) スピード ユーザは待ってくれない。300msで、リクエスト / レスポンスの処理 / ユーザに結果の表示をする。 2) RESTが常にベストとは限らない 以前のEtsyのAPIリソースはDBスキーマのミラーになっていた。クライアントがリスティングのリストを受け取ったら、ユーザがFavoritedに指定しているリスティングIDを取得するために、再度APIコールする必要があった。クライアントのAPIコールが増えると、クライアントのスピードが落ちる。また障害の可能性となるポ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rustのパターンっぽいやつメモ
一時期プログラミングのデザインパターンというものが大流行しましたが、現在ではどのように評価されているのでしょうか？