React でゼロからフローチャートUIを実装する
最近、AIのワークフローを簡単に組める OSS「Dify」が注目を集めています。 Difyではブラウザ上でフローチャートを構築してLLMのワークフローを設計できます。 今回はこのUIの実装を理解するためにReactでフローチャートUIを実装してみようと思います。DifyではフローチャートUIの構築に「React Flow」を使用しています。React Flow は React で使えるフローチャートUIライブラリです。本記事の実装でも React Flow を参考にしてきます。 本記事はフローチャートUIの仕組みを理解することを目的にしています。 フローチャートUIの要素 フローチャートは主に、ノードとエッジから構成されます。ノード同士はエッジで繋ぐことができます。 この記事ではエッジ接続部分をコネクターと呼びます。 つくるもの シンプルなフローチャートUIを実装します。 今回作るフローチ
操作説明時などに利用できる、フリーのジェスチャーアイコンセット 10 - NxWorld
アプリの操作方法やサービスの使い方を説明するときなどに利用することがあると思うジェスチャーアイコンのまとめです。 シンプルなデザインのものが多めですが、中には100種類以上が詰まった大容量なものや手だけでなくデバイスも込みで作られているもの、タップ・スワイプ・ピンチインといったようにそれぞれの動作がどのような呼び名なのかわかりやすくしてくれているものもあります。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。
「戻る」で入力データが消えてしまうフォームはいらない ― ＠IT
Webアプリケーションのユーザーインターフェイス[6] 「戻る」で入力データが消えてしまうフォームはいらない 「寛容性とユーザーコントロール」 ソシオメディア 上野 学 2005/12/22 前回「入力情報を預かる責任を果たせる画面デザインとは？」は、あらゆる経験則の土台となる価値観として、「ユーザーを尊重する」というユーザー中心の姿勢について述べました。今回からは、Webアプリケーションのユーザーインターフェイス（UI）・デザインを行ううえで有効な経験則を、少し具体的に考えていきたいと思います。 その前にまず、連載の第1回「ユーザーにとっては“ユーザーインターフェイス”こそが製品そのもの」で触れた HCI（Human-Computer Interaction）の分野でよく挙げられる、コンピュータを用いた対話型システムの設計原則を紹介しておきます。ここでいう「対話型システム」とは、ユーザー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - sakihet/dnd-tree-todo: A simple Preact Todo app using localStorage. You can use DnD to reorder tasks and change the hierarchy.
