「SCRIBE ASSIST」画面一覧 - Paku-Soba/Svelte-example-app GitHub Wiki

◾️UIデザイン画面について

現段階での画面、機能をまとめる。
- 現段階とは、XD開発者用リンクが連携された時点_2/28(水)を指す。
- 機能及びUIデザイン仕様が固まってなく、これから変更が生じる為
  - 洗い出した内容を元にサンプルコードとして実装する画面を選別する。
  - 選別基準は、「議事録システム」チームで参考にできるUIデザインをコードで起こす。

◾️画面洗い出し

要約と議事録作成画面
- Step1.プロンプト選択画面※ → サンプルコード実装
- Step2.ファイルアップロード画面※　→ サンプルコード実装
  - 時間指定エラー画面(ダイアログUI)※
  - アップロードローディング中（ローディングUI）※
- Step3.要約・議事録完了画面　→ UI変更予定の為、実装しない。
プレビュー画面　→ UI変更予定の為、実装しない。
- マウスオーバーで吹き出しUI（余裕があれば実装したい感あり）
履歴一覧画面
- 一覧表示（Table UI）※→　サンプルコード実装
- 要約の変更画面（ダイアログUI）※　→ 再作成画面となる
- 検索機能は削除予定の為、実装しない。
プロンプト一覧画面
- 一覧表示（Table UI）※→　サンプルコード実装
- 新規プロンプト作成画面（ダイアログUI）※
学習データ提供画面　→ 機能としてペンディング及び検討状態の為、実装しない。
ご利用にあたって画面※
- テキスト表示　→ サンプルコード実装

→ 使用するUI調べる。3/5(火)時点_選別した10画面(ダイアログ画面含む。)※実装進めてみて前後する可能性有り。

「SCRIBE ASSIST」サンプルコード画面

◾️UIサンプルコード実装画面

No.	作成画面	デザイン要素	作業状況	画面遷移	デレクトリ
1	要約と議事録作成画面	layout,text,button,icons	○	○	src/routes/home/+page.svelte
2	Step1.プロンプト選択画面	layout,input,select,button,text	○	○	src/routes/step1/+page.svelte
3	Step2.ファイルアップロード画面	layout,input,button,text	○	○	src/routes/step2/+page.svelte
4	アップロードローディング中画面	layout,input,loading,button,text,icons	○	-	src/routes/loading/+page.svelte
5	時間指定エラー画面	dialog,text,icons	○	-	src/routes/step2/+page.svelte
6	履歴一覧画面	layout,table,text,icons	○	○	src/routes/historyList/+page.svelte
7	要約の変更画面	dialog,input,select,button,text	○	-	src/routes/historyList/+page.svelte
8	プロンプト一覧画面	layout,table,text,icons	○	○	src/routes/promptList/+page.svelte
9	新規プロンプト作成画面	dialog,input,select,button,text	○	-	src/routes/promptList/+page.svelte
10	ご利用にあたって画面	layout,text,icons,border	○	○	src/routes/about/+page.svelte

コード実装方針について
- UIデザインのスタイリングは、可能な限りそのまま使用できる状態に実装する。
- 部品として再利用できるように実装する。
  - コメントの記載は、利用する側がわかりやすく書けるようにする。
- 改修コストを抑える観点から動きは最低限に実装する。
  - データの取り扱い、バインディングや動きの確認にコストを要する為
  - イベント発火は、on:clickメソッドに統一させて画面遷移実装時、まとめて対応を行う。
- スタイリングした画面作成を優先して実装する。

◾️コードリファクタリング

UIサンプルコードのリファクタリングを行う。 → 3/15(金)対応完了。
阿久津さんからデザイン修正依頼があれば、コード修正対応を行う。

→ 3/18(月)現段階でデザイン修正が発生していない。来週仕様について打ち合わせ予定とのこと。

No.	作成画面	デレクトリ	リファクタリング状況
1	要約と議事録作成画面	src/routes/home/+page.svelte	○
2	Step1.プロンプト選択画面	src/routes/step1/+page.svelte	○
3	Step2.ファイルアップロード画面	src/routes/step2/+page.svelte	○
4	アップロードローディング中画面	src/routes/loading/+page.svelte削除、src/routes/step2/+page.svelteへ移植	○
5	時間指定エラー画面	src/routes/step2/+page.svelte	○
6	履歴一覧画面	src/routes/historyList/+page.svelte	○
7	要約の変更画面	src/routes/historyList/+page.svelte	○
8	プロンプト一覧画面	src/routes/promptList/+page.svelte	○
9	新規プロンプト作成画面	src/routes/promptList/+page.svelte	○
10	ご利用にあたって画面	src/routes/about/+page.svelte	○
11	未作成ページお知らせ画面	src/routes/notyet/+page.svelte	○

リファクタリング観点について
- 反映されないコード、必要ないコード、重複するコードは削除する。
- 使う技術は統一させる。
- TailwindCSSクラスのスタイリングの順番を統一させる。
  - Flex&Grid、Spacing、Sizing、Typography(Font,Text)、Backgrounds
- リファクタリングするブランチは、#UIsampleCode ブランチを再利用する。

→ 上記のコードリファクタリング対応を3/15(金)時点完了した為、3/18(月)阿久津さんへデザイン修正確認しつつ、動きの見直しをどうするか考える。

TODO

◾️画面上、動き見直し

select選択した時のinputUI表示

No.	作成画面	デレクトリ	作業状況
1	Step1.プロンプト選択画面	src/routes/step1/+page.svelte	○
2	要約の変更画面	src/routes/historyList/+page.svelte	○

◾️3/18時点_select-bindings状況

selectデータのbindingがundefinedうまくいかない状況、なぜ?
- console上、ターミナル上、特にエラーは発生していない。
- 原因突き詰める。
  - Svelteのバインディングリアクティビティを見直す。

Console上

2. ターミナル上

◾️原因及び解決方法まとめ

セレクト要素へのバインディング
- bind:valueにて変数指定の間違い。
  - <script>にて変数宣言を行う。
  - bind:valueを使って要素へのバインディングを行う。
  - バインドした変数には、選択中の要素のvalue属性の値が代入されるが、
    - bind:valueにて、宣言してないpromptList変数のvalue属性を指定した為、要素のvalue属性の値がバインディングされずundefinedと表示。
コード修正前

<script>
    import { page } from '$app/stores';

    let promptList　='';   
</script>

...
           <select class="w-full px-3 py-3 font-semibold text-textColor text-sm border rounded-md" bind:value={promptList.value}>
                <option selected>プロンプトを選択</option>
                <option value="1">01.直接入力する</option>
                <option value="2">02.議事録を要約する</option>
                ...

            </select>

コード修正後

...
            <select class="w-full px-3 py-3 font-semibold text-textColor text-sm border rounded-md" bind:value={promptList}>
                <option selected>プロンプトを選択</option>
                <option value="1">01.直接入力する</option>
                <option value="2">02.議事録を要約する</option>
                ...

            </select>

アコディオンUI
- daisyui Accordion コンポーネントで検証を行う。
Table編集inputUI表示
- 検証内容は、こちらのWiki にまとめる。
  - 検証で実装したコードは、ブランチ移管及び移植対応完了。

No.	作成画面	デレクトリ	作業状況
1	プロンプト一覧画面	src/routes/promptList/+page.svelte	○

◾️3/19時点_AccordionUI状況

Table コンポーネント中でAccordion コンポーネントを使用すると列のレイアウトが崩れてしまう。
- コンポーネントの使い方が間違っているのか、それともコンポーネントの中にコンポーネント使用ができないのか
  - 現段階では判断ができない為、コンポーネントごとに3つの方法で検証を行う。
    - 検証① Accordion コンポーネント検証　 → 但し、阿久津さんのデザインとは変わる可能性あり。
    - 検証② Table コンポーネント検証　 → Table コンポーネントの中でAccordionUIの動きができるか検証。
    - 検証③ Table コンポーネントの中にAccordionコンポーネント使用を再度検証　→ コンポーネントの使用箇所が間違っている可能性がある為、再度検証。
上記の検証内容は、①Accordion UI技術検証にまとめる。
- Accordion UI技術検証は完了。検証②と検証③のアコディオンUIでTable編集inputUI表示の実装を行う。

◾️3/21時点_AccordionUI及びinputUI表示状況

Accordion UI検証②と検証③にてTable編集inputUI表示検証実施中。
- src/routes/promptList01/+page.svelteにて、検証実施。
- 検証②でのアイコン配置固定及びinputUI表示は、inputUIのサイズ調整が反映されない状態であるが検証済み。
- 検証③でのinputUI表示は、検証中である。
  - 検証内容は、Table編集inputUI表示検証にまとめる。

マウスオーバー吹き出しUI
- プレビュー画面作成する。
- 仕様が固まってない為、デザイン修正発生可能性あり。
  - ライブラリごとにUIコンポーネント検証を行う。
    - 検証① daisyUI Tooltipの色、サイズ調整の検証を行う。
    - 検証② Flowbite TooltipStyleのlight検証を行う。
    - 検証内容は、それぞれ①Tooltips_技術検証、②Tooltips_技術検証にまとめる。

※UIデザイン修正対象画面

No.	作成画面	デレクトリ	作業状況
1	※Step3.要約と議事録化完了画面	src/routes/step3/+page.svelte	○
2	※プレビュー画面	src/routes/preview/+page.svelte	○

連携事項

MEMO

1.要約と議事録作成画面

UIデザインからするとStep1.プロンプト選択画面、Step2.ファイルアップロード画面は同じ画面上になる。
- 部品として再利用できるようにサンプルコードとして実装を進めている為
  - 利用する側が使用しやすいように部品として+page.svelteごとに実装する。
  - サンプルコードでは、画面遷移として対応する。
要約と議事録作成のStepを選択する際、青色の帯で強調するUIは動きの検証が必要な為、未実装。
- デザイン上、完了したStepはグレー色に強調、次に進むStepは青色に強調するUIの認識となる。

2.アップロードローディング中画面

使用可能なUIで取り急ぎ実装した為、アシスト君も共にぐるぐる回る状態である。
- 他のUI検証及びアシスト君を固定する検証が必要である。
- Loading表示時、フッターも表示される為、改修が必要である。
  - Loading時の口が動くアシスト君は、阿久津さんが作る予定となっている。
  - 口が動くアシスト君は、阿久津さんに連携してもらう必要がある。

Loading.mov

3.サンプルコードに使用したアイコン

2/28時点の開発者用XDリンクにて画像としてSVGダウンロードできたなかったアイコンもあった為、アイコンライブラリを使用。
- 阿久津さんより、アイコンは変わらない為、本番の時はダウンロードできるようにデザイン修正時、設定見直すとのこと。
- サンプルコードで使用したアイコンはheroiconsライブラリを使用している。
  - 構築する際は画像ではなくベクターデータの方が良い、使用する際はSVGで問題ない。

4.ライト/ダークモード変換機能

複数のTailwindCSSライブラリを使用し、モード変換の技術検証を行ったが
- 2/27時点_阿久津さんとのMTGより、現段階では優先順位が低いとのこと。
- ユーザー側よりニーズがあれば、対応可能性がある。

5.その他連携について

3/29時点_サンプルソースコード連携に当たり
- 取り急ぎ、3/18(月)時点_デザイン修正が発生してない及びリファクタリングが完了したサンプルコードを動く状態にして連携する。
  - ソースコードのリファクタリングは完了しているが、バグの確認や対応は行なっていない。その前提で動きの確認が必要である。
    - プロジェクトは起動して動く状態であるが想定する動きと異なる場合、ソースコード確認後バグとして判定し対応して問題なし。
プロジェクト初期起動時、表示される最初の画面は status: 404,text: 'Not Found'ページとなる。
- ホーム画面のURLは、http://localhost:5173/homeの為　※サンプルコード一覧のディレクトリ確認。
  - http://localhost:5173/ 存在しないページなので、エラーではない。
下記の画面は、デザイン上存在しないが、未作成ページを知らせる画面として仮で作成した画面となる。

No.	作成画面	デレクトリ
1	未作成ページについて知らせる画面	src/routes/notyet/+page.svelte

下記の2画面は、検証及び修正対象画面となる為、今回のサンプルコード連携対象から外している。

No.	作成画面	デレクトリ
1	※Step3.要約と議事録化完了画面	src/routes/step3/+page.svelte
2	※プレビュー画面	src/routes/preview/+page.svelte

連携する段階でのCSSフレームワークは、TailwindCSS、daisyUIとなる。
- 検証状況及び修正内容反映により、その他ライブラリを使用する可能性あり。
環境構築に関する前提及び注意事項は、こちらのWikiを確認。

新UI_サンプルコード修正及び追加実装

サンプルコード一覧

No.	作成画面	デレクトリ	対応内容
1	要約と議事録作成画面	src/routes/home/+page.svelte	アイコン差し替え、サイドメニュー修正、テキスト内容、カラー修正、お知らせtableUI追加実装
2	Step3.議事録作成完了画面	src/routes/step3/+page.svelte	ページ、部品追加実装、プレジュー（文字起こし）画面へ遷移
3	再作成画面	src/routes/step3/+page.svelte	テキスト、カラー含むデザイン修正、時間指定inputUI追加実装
4	単語登録画面	src/routes/word/+page.svelte	ページ、部品追加実装
5	登録文字数エラー画面	src/routes/word/+page.svelte	部品追加実装
6	登録した単語削除確認画面	src/routes/word/+page.svelte	部品追加実装
7	履歴がない画面	src/routes/nothistory/+page.svelte	ページ、部品追加実装
8	プレビュー（文字起こし）画面	src/routes/preview/+page.svelte	ページ、部品追加実装、アイコン差し替え
9	音声ファイルコピー確認画面	src/routes/preview/+page.svelte	部品追加実装
10	音声ファイルコピー(話者含む)確認画面	src/routes/preview/+page.svelte	部品追加実装
11	ご利用にあたって画面	src/routes/about/+page.svelte	テキスト内容、カラー修正
12	知ろう!便利なつかい方画面	src/routes/howtouse/+page.svelte	ページ追加実装

追加連携事項

4/11時点 _ 連携されたSCRIBE ASSIST newUIに基づいてサンプルコード修正及び追加実装を実施。
すでに連携したサンプルコード及びサーバー側実装への影響が少ない範囲で対応。
- また、XDリンクのコメント内容上、UIの修正が発生する可能性がありそうな為
  - 動きは最低限に実装し、主にレイアウト修正、アイコンの差し替え、テキスト内容、カラー等スタイリングに関わる部分を対応済み。
ライブラリの関係上、検証ブランチのサンプルコード連携となる。
- すでに連携したサンプルコードは、mainブランチの内容となる為、ディレクトリ構成が一部異なる。
前回連携した内容を基に環境構築されている状態なのであれば、今回連携するサンプルコードも問題なく動く想定となる。
- 上記のサンプルコード一覧を参考に必要な部品を利用すれば良いかと思う。
  - 下記の3つの画面のみ修正対応となり、その他の画面は追加実装対応となる。

No.	作成画面	デレクトリ
1	要約と議事録作成画面	src/routes/home/+page.svelte
2	再作成画面	src/routes/step3/+page.svelte
3	ご利用にあたって画面	src/routes/about/+page.svelte

サンプルコードとなる為、部品の再利用方法や命名規則含むルールなどは議事録システムチームに委ねる。
プレビュー（文字起こし）画面について
- テキストマウスオーバーで編集アイコンが表示される仕様は、svelteのon:mouseover技術を使って実装。
- 右側サイドメニューの「作成済み」の議事録をクリック後、吹き出しUI状況。
  - サンプルコード上、flowbite-svelte のTooltipコンポーネントで実装。
    - アコディオンUIが親要素となり、吹き出しUIが子要素となる為、吹き出しUIが親要素内で表示される状態となる。
    - 表示状態の確認は、こちらのWikiにて確認できる。
      - UIの検討もしくは独自で実装できるかどうか検証に時間がかかるかと考えられる。
      - UIの検討をするか、それとも独自実装の検証にコストをかけるかの判断は、議事録システムチームに任せる。
        
        flowbite-svelte のTooltipコンポーネントを使用するかどうかにより、flowbite-svelte環境構築が必要となる。
        
        flowbite-svelteライブラリを使用する場合、環境構築はこちらのWikiを参考にする。
  - 音声再生に関するUIは、独自の音声再生コントロールを実装するとのことだった為、スタイリングのみコードを書いてある。
その他サンプルコード上にはなく、XDリンクを参考にデザイン実装を行う場合、XD開発者用リンク活用方法を参考にする。