①Accordion UI_技術検証 - Paku-Soba/Svelte-example-app GitHub Wiki

  • 3つの方法でAccordion UIの技術検証を行う。
    • 検証①Accordion UIコンポーネント検証　
      • 但し、阿久津さんのデザインとは変わる可能性あり。
    • 検証② Table コンポーネント検証　
      • Table コンポーネントの中でAccordionUIの動きができるか検証。
    • 検証③ Table コンポーネントの中にAccordion コンポーネント使用を再度検証
      • もしくは、Accordion コンポーネントの中にTable コンポーネントを使用する。
      • コンポーネントの使用箇所が間違っている可能性がある為、再度検証。

◾️ 検証① Accordion UI

  • collapse コンポーネントを使ってAccordionの動きやデータのディスプレイはうまくできる状態。
    • 但し、collapse コンポーネントの中で collapse-titleクラスは1つのみ使用できる為
      • 変更、削除アイコンの配置がうまくできない状況。
      • collapse コンポーネントを使用したプロンプト一覧画面の実装には限界があり。
      • 検証①での試しは終了とし、検証②と検証③でデザイン実現を試す。
検証① Accordion UI動き
Accordion.mov

◾️ 検証② Table コンポーネント

  • Svelte if文{#if}構文を使ってTable コンポーネントにアコディオンUIの動きを実装。
    • テキストデータをどこに配置するかによって表示箇所が異なる。
    • アコディオン動きで編集、削除アイコンの配置が固定されず、変わるところが気になるポイント。
      • 目的であるアコディオンUIの動きは実装できた為、アイコン配置の固定は後回しする。
検証② Table コンポーネント動き
Table.mov
Svelte エラーまとめ
  • SyntaxError: Unexpected token
    • 条件分岐エラー解決する。
      • Svelte if文の構文間違い。
      • {if}　→ {#if} #が必要。
error
  • div was left open
    • divタグが開いたままの状態、Svelteエラー発生。
      • divタグでの段落わけを行ったので、開いたままのタグの閉じを追記してエラー解消。
div

◾️ 検証③ Table コンポーネントの中にAccordion コンポーネント使用検証

  • Table コンポーネント中にcollapse コンポーネントを使用し、再度動きを確認。
    • アコディオンUIの動きとしては一番自然なUIの動きである。
    • こちらの実装でもアコディオン動きで編集、削除アイコンの配置が固定されず、共に動くところが気になるポイント。
      • Tableコンポーネント中でのアコディオン使用の場合、collapse-titleクラスは一つの列になる為、アイコンも同じ列として扱われる。
      • アイコン配置の固定は検証②と試す。
検証③ Table コンポーネントの中にAccordion コンポーネント使用検証動き
tableaccordion.mov

→ 検証②と検証③にて、TableUIでの編集アイコンをクリックした時のinputUI表示検証を行う。
※来週、阿久津さんよりデザイン修正連携してもらう時、ご意見を伺う。

◾️ Table編集inputUI表示検証

  • Accordion UI検証②と検証③にてTable編集inputUI表示検証実施。
検証② Table コンポーネント中で編集inputUI表示
  • アコディオン動きで編集、削除アイコンの配置が固定されず、変わる点について
    • thタグにwidthサイズを指定することでアイコン配置固定ができた為、アコディオン動きで同時に動かなくなった。
    • 編集アイコンをクリックした時のinputUI表示は、Svelteのif文条件分岐を使用しinput要素を表示することができる。
    • 但し、input要素のサイズ調整のクラス指定が反映されない状況である。
default.mov
検証③ Table コンポーネントの中にAccordion コンポーネントを使用し、編集inputUI表示
  • 検証②同様アコディオン動きで編集、削除アイコンの配置が固定されず、変わる点について
    • Table コンポーネントの中でのAccordion コンポーネントの場合、collapse-titleクラスとcollapse-contentクラスが一つのrowとして扱われる為
    • アイコンも同じ列としてアコディオン動きと同時に動くように見える。
      • タイトル部分をクリックすると、アコディオンUIの動きになる。
  • 検証③での編集アイコンをクリックした時のinputUI表示は可能。
    • collapse-contentクラスで指定しているinput要素には問題なく入力内容の編集ができる。
    • 但し、Accordion コンポーネントのアコディオン動きがinput要素のtype属性checkbox　指定で実現している為
    • タイトルでの編集input要素では、入力ができない状況である。→ 表示は可能だが、入力はできない状態。
      • タイトルでの編集input要素をクリックすると、アコディオン動きとしてcollapse-contentクラスで指定しているディスプレイが閉じられる。

→ AccordionUIの動きと編集inputUIが自然に表示できるUI(案)を考える。

default.mov
UI(案)AccordionUIの動きと編集inputUI表示
  • UI/UXを考える時、デザインの一貫性、統一性が肝となる。
    • プロンプト一覧画面での一部分のみではなく、阿久津さんがデザインした全体の大枠を考慮して考える。
    • プロンプト一覧画面にて、新しくプロンプトを作成する時のユーザーインタフェースinputUI表示は、ダイアログUIとなる。
      • また、履歴一覧画面での「要約の変更(再作成)画面」 も同様。ユーザーインタフェースはダイアログUI。
    • Table UIは、情報を一覧形式で表示しユーザーに一目瞭然見やすくするのが目的となる。
    • Accordion UIも同様、データのディスプレイが目的となり、ユーザーが情報へアクセスしやすくする。

→ デザインの一貫性を最優先としてUIを考慮した場合、プロンプトの編集inputUI表示もダイアログUIを使用した方が
ユーザーが操作する時コストかけず無意識に操作できると判断。 阿久津さんのご意見を伺う。

editUI.mov

※検証用コードリファクタリング

  • Accordion UI技術検証で実装したコードのリファクタリングを行う。
    • コード移管にコストがかかる為、検証の実装は検証ブランチを使用する。
No. 作成画面 デレクトリ 対応内容 作業状況
1 プロンプト一覧画面 src/routes/promptList/+page.svelte Accordion UI、編集input表示のdialog UI移植 ○
2 プロンプト一覧画面(検証用) src/routes/promptList01/+page.svelte 検証ブランチへ移管→ #TryThem ○
⚠️ **GitHub.com Fallback** ⚠️