contenteditableと向き合う

contenteditableと向き合うためにADRやDesign Docsを使って奮闘している様子を表現した資料です

フロントエンドカンファレンス北海道2024スポンサー企業の3社による非公式の有志イベントである「フロントエンドカンファレンス北海道2024後夜祭＠東京」での登壇資料です
refs: https://yumemi.connpass.com/event/326311/

1. © LayerX Inc. contenteditableと向き合う 2024/09/06 @ゆめみ×LayerX×サイボウズ3社合同フロントエンドカンファレンス北海道2024後夜祭 in 東京
2. 目次 Agenda • 自己紹介・会社紹介 • 今回の発表に関する事例 • ????????
3. 自己紹介
4. © LayerX Inc. 4 菊池 翔（kichion） 自己紹介 • 株式会社LayerX ◦ バクラク請求書発行 / バクラク電子帳簿保存 ▪ エンジニアリングマネージャー • バックエンド経験の方が長いにわかフロントエンド • プレイングマネージャーとして奔走 • 趣味: 二人の子供と遊んだり、エンタメ消費したり 　　　@kichion • Podcast: 完全理解.FM
5. © LayerX Inc. 5 菊池 翔（kichion） 自己紹介 • 株式会社LayerX ◦ バクラク請求書発行 / バクラク電子帳簿保存 ▪ エンジニアリングマネージャー • バックエンド経験の方が長いにわかフロントエンド • プレイングマネージャーとして奔走 • 趣味: 二人の子供と遊んだり、エンタメ消費したり 　　　@kichion • Podcast: 完全理解.FM with @nus3
6. 会社紹介
7. 7 © LayerX Inc. LayerXのミッション すべての経済活動を、デジタル化する。 人類の未来をより良くする。 そのために私たちは、テクノロジーの可能性を探求し、 経済活動における複雑で大きな課題に挑む。 仕事や暮らしの中にある摩擦が解消され、 それぞれの創造力が発揮されている。 そんな希望あふれる優しいデジタル社会を、 未来に残していくために。
8. 8 © LayerX Inc. 「すべての経済活動を、デジタル化する。」をミッションに掲げ、 法人支出管理サービス「バクラク」や企業内業務のデジタル化を支援するサービスを提供しています。 事業紹介 バクラク事業 企業活動のインフラとなる法人支出 管理（BSM）SaaSを開発・提供 Fintech事業 ソフトウェアを駆使したアセットマネジメ ント・証券事業を合弁会社にて展開 AI・LLM事業 文書処理を中心とした、LLMの活用による プロセスのリデザイン
9. 9 © LayerX Inc. 「すべての経済活動を、デジタル化する。」をミッションに掲げ、 法人支出管理サービス「バクラク」や企業内業務のデジタル化を支援するサービスを提供しています。 事業紹介 バクラク事業 企業活動のインフラとなる法人支出 管理（BSM）SaaSを開発・提供 Fintech事業 ソフトウェアを駆使したアセットマネジメ ント・証券事業を合弁会社にて展開 AI・LLM事業 文書処理を中心とした、LLMの活用による プロセスのリデザイン
10. 10 © LayerX Inc. 事業紹介 稟議・支払申請・経費精算 仕訳・支払処理効率化 法人カードの発行・管理 帳票保存・ストレージ 帳票発行 * 経費精算のSlack連携は申請内容の通知のみ ・AIが領収書を５秒でデータ化 ・スマホアプリとSlack連携あり ・領収書の重複申請などミス防止機能 ・AIが請求書を５秒でデータ化 ・仕訳・振込データを自動作成 ・稟議から会計までスムーズに連携 ・年会費無料で何枚でも発行可 ・インボイス制度・電帳法対応 ・すべての決済で1%以上の還元 ・AIが書類を5秒でデータ化 ・あらゆる書類の電子保管に対応 ・電子取引・スキャナ保存に完全対応 ・帳票の一括作成も個別作成も自由自在 ・帳票の作成・稟議・送付・保存を一本化 ・レイアウトや項目のカスタマイズも可能
11. 11 © LayerX Inc. 事業紹介 稟議・支払申請・経費精算 仕訳・支払処理効率化 法人カードの発行・管理 帳票保存・ストレージ 帳票発行 * 経費精算のSlack連携は申請内容の通知のみ ・AIが領収書を５秒でデータ化 ・スマホアプリとSlack連携あり ・領収書の重複申請などミス防止機能 ・AIが請求書を５秒でデータ化 ・仕訳・振込データを自動作成 ・稟議から会計までスムーズに連携 ・年会費無料で何枚でも発行可 ・インボイス制度・電帳法対応 ・すべての決済で1%以上の還元 ・AIが書類を5秒でデータ化 ・あらゆる書類の電子保管に対応 ・電子取引・スキャナ保存に完全対応 ・帳票の一括作成も個別作成も自由自在 ・帳票の作成・稟議・送付・保存を一本化 ・レイアウトや項目のカスタマイズも可能
12. 今回の発表に関する事例
13. 13 © LayerX Inc. ADRで向き合う 稟議・支払申請・経費精算 仕訳・支払処理効率化 法人カードの発行・管理 帳票保存・ストレージ 帳票発行 * 経費精算のSlack連携は申請内容の通知のみ ・AIが領収書を５秒でデータ化 ・スマホアプリとSlack連携あり ・領収書の重複申請などミス防止機能 ・AIが請求書を５秒でデータ化 ・仕訳・振込データを自動作成 ・稟議から会計までスムーズに連携 ・年会費無料で何枚でも発行可 ・インボイス制度・電帳法対応 ・すべての決済で1%以上の還元 ・AIが書類を5秒でデータ化 ・あらゆる書類の電子保管に対応 ・電子取引・スキャナ保存に完全対応 ・帳票の一括作成も個別作成も自由自在 ・帳票の作成・稟議・送付・保存を一本化 ・レイアウトや項目のカスタマイズも可能
14. © LayerX Inc. 14 前提になる要望 商品などの金額を「単価×個数」で計算できる状態になっていたが、 一部のお客様では「単価×個数×（なにかの数値）」で金額を出したいケースがある 例: 新聞の契約に対する金額 = 「新聞単価×部数×契約月数」 バクラク請求書発行での事例 ADRで向き合う ECなどの業種では相殺という考え方で金額を出したいケースがある - 請求金: [お客様] ー(システム利用料金)→ [EC] - 支払金: [お客様] ←(預かり金)ー [EC] ←(購入代金)ー [購入者] 例: 実際に請求する or 支払う金額 = 請求金 - 支払金 　　　　　　　😱お客様ごとで金額を出すというだけでも多種多様な要求が出てきていた
15. © LayerX Inc. 15 前提になる要望 ユーザはExcelの計算式のように、各項目を組み合わせて算出した値を利用したい 計算式では数値と変数と四則演算子だけ使えれば良い バクラク請求書発行での事例 ADRで向き合う
16. © LayerX Inc. 16 前提になる要望 ユーザはExcelの計算式のように、各項目を組み合わせて算出した値を利用したい 計算式では数値と変数と四則演算子だけ使えれば良い バクラク請求書発行での事例 ADRで向き合う バクラクなので、入力を爆楽にしたい!!!!
17. © LayerX Inc. 17 実際の完成形イメージ input(に見える部分)で - 数字 - 四則演算子 - 括弧 の入力 選択式で変数を入力させる シンプルな構成 (実はキーボード入力から変数入力 させようとしたけど「誰が使うん だ？」ってなって辞めた) バクラク請求書発行での事例 ADRで向き合う
18. © LayerX Inc. 18 よろしい、ならば contenteditableだな…！ おや？これってもしかしてリッチエディタの実装か？ ADRで向き合う
19. © LayerX Inc. contenteditableと向き合う 2024/09/06 @ゆめみ×LayerX×サイボウズ3社合同フロントエンドカンファレンス北海道2024後夜祭 in 東京
20. 目次 Agenda • 自己紹介・会社紹介 • 今回の発表に関する事例 • contenteditable • ADRで向き合う • 実装で向き合う • 終わりに
21. contenteditable
22. © LayerX Inc. 22 ユーザーによる要素の編集が可能かどうかを示す HTML 属性 主要なWebサービスでもリッチなエディタを実装するために用いられる 例 - X: postのエディタ（ハッシュタグをアンカーにする） contenteditable contenteditable
23. © LayerX Inc. 23 ユーザーによる要素の編集が可能かどうかを示す HTML 属性 主要なWebサービスでもリッチなエディタを実装するために用いられる 例 - datadog: 検索属性をタグ的に表現する contenteditable contenteditable
24. © LayerX Inc. 24 ユーザーによる要素の編集が可能かどうかを示す HTML 属性 主要なWebサービスでもリッチなエディタを実装するために用いられる 例 - Notion: みんな大好きWYSIWYGエディタ contenteditable contenteditable
25. © LayerX Inc. 25 キーボード操作の独自実装による対応 今までinput, textareaで気にしなくてよかったキー操作をほぼ再実装しないといけない… 矢印キーの操作・cmd+(any)・shift+(any)・backspace・Pgup/Pgdn・Home・etc... 大いなる力には、大いなる責任が伴う クリップボードへの独自実装による対応 HTML属性のものは受け入れられてしまうので適切にコントロールしないといけない… WYSIWYGエディタなら適切に見出しやリストなどに置換しないと操作性に難が出る contenteditable 日本語 IME への独自実装による対応 OSSライブラリは多くあれど、日本語 IME 向けの対応は個別で行わないといけない… （後に知ったが、onCompositionStart/End 使うとコントロールしやすくて良さそう）
26. ADRで向き合う
27. © LayerX Inc. 27 ADR ADRで向き合う 技術や設計の選択を迫られた際になぜその技術・設計を用いるのか、という意思決定を背景情報や比較した 選択肢の優劣を記録し、選択の理由を説明した文書 🤔 「contenteditableを用いるべきなのか…？」「ホンマか？」「代替案は？」 💡いかに妥当そうな選択肢を並べられるかが勝負どころ
28. © LayerX Inc. 28 選択肢1: inputを使って、変数はプレースホルダーで入力させる 選択肢を上げてみる ADRで向き合う pros 😆 cons 🤮 - 式の視認性が悪い - 何かしらの拡張時は辛そう - 入力側の負担が辛そう - 爆楽ではない - 実装は簡単そう - キーボード操作も問題ない - 圧倒的シンプル 波括弧で括った内容を変数とみなした文字列で計算式を構築する 項目変数 ▼
29. © LayerX Inc. 29 選択肢2: inputを使って、変数はスペースを表現したWeb fontで入力させる 選択肢を上げてみる ADRで向き合う pros 😆 cons 🤮 - 文字数に合わせたfontを用意する - 項目名はユーザが指定する仕様 - 読み込み速度や FOIC/FOUC の問題 - 事例が多くないので不確定要素あり - 視認性は良さそう - キーボード操作も問題ない - シンプル 変数部分は幅調整したスペースを埋め込んで計算式を構築する （※ LINE Engineering Blogを大いに参考に[丸パクリ]） 個数 単価 項目変数 ▼
30. © LayerX Inc. 30 選択肢3: contenteditableでいい感じにする 選択肢を上げてみる ADRで向き合う pros 😆 cons 🤮 - キーボード操作の再現が必要 - キャレットなど細かな実装が必要 - コード上で複雑化しやすい - HTMLのスタイリングが適用できる自由度 - 実装の自由度が高い - 社内事例がある - （筆者がちょっとやってみたくなっている） 変数部分は<div>でスタイリングして計算式を構築する 個数 単価 項目変数 ▼
31. © LayerX Inc. 31 決断 ADRで向き合ってみる ADRで向き合う 計算式で変数を伴う四則演算式を扱うWebエディタでは「contenteditable」を使う 計算式の特性上使う演算子や数字・変数が限られていることで細かなキーボード操作を再現しなくても良い とした 💡文脈と決断をADRとして残すことで後続に意思を伝える バクラクでは複数プロダクトが展開されており、ほかプロダクトのUIを参考にするケースも多いため、文脈を 意識して使わないと思わぬ罠にハマる可能性もある → 不用意な転用を避ける意味でもADRで書き残しておくことが有効
32. 実装で向き合う
33. © LayerX Inc. 33 仕様 計算式リッチエディタを考えてみる ADRで向き合う テキストとして - 数字 - 四則演算子 - 括弧 が入力できる 項目の変数が選択されると タグ的な表現で入力される あと、 なるべく楽に扱えるように…
34. © LayerX Inc. 34 計算式リッチエディタを考えてみる ADRで向き合う 個数 単価 項目変数 ▼ 項目変数や演算子はdivで入力不可なブロック、テキスト部分はcontenteditableなブロックで考えると… (空白) 　　　（） （空白） × （空白） (空白) 個数 単価
35. © LayerX Inc. 35 計算式リッチエディタを考えてみる ADRで向き合う このブロック群をsectionsとして管理して、sectionを最終的にバックエンドの美味しい形にconvert valueには変数だったらIDを持ちつつ表示名はlabelで表現
36. © LayerX Inc. 36 テキストの入力 ADRで向き合う クリップボードの入力やテキスト選択からのドロップなどを防ぐために無理やり頑張る… FYI: https://w3c.github.io/input-events/#overview
37. © LayerX Inc. 37 テキストの入力 ADRで向き合う テキスト部で四則演算子が入力されたらブロックを挿入して… 地味にテキスト挿入位置を示す キャレットの位置とどのブロックにいる かの状態管理も行っている…
38. © LayerX Inc. 38 項目変数の入力 ADRで向き合う 項目変数が選択肢から入力されたらブロックを挿入して… （挿入時点ではフォーカスが外れるので最後に入力していた位置から挿入位置を決定） 変数挿入したらブロック移動も考慮して
39. © LayerX Inc. 39 矢印キーやcommand + 矢印キーの入力 ADRで向き合う ブロックをまたぐ移動をしたいので、2区間 の移動を表現したり… 　例: 左矢印入力 青矢印の位置にいるとして、先頭に移動した いときは、入力不可のブロックをまたぐ (空白) 　　　（） （空白） × 123 個数 (空白) 　　　（） （空白） × 123 個数
40. © LayerX Inc. 40 backspace, deleteとcommand + … ADRで向き合う
41. © LayerX Inc. 41 backspace, deleteとcommand + … ADRで向き合う
42. © LayerX Inc. 42 紹介してる以上にいろいろ考慮があって本当に大変 - 数値入力中のキャレット管理 - 演算子や数値をフォントとして見た目を整える - （やれたら）Undo, Redo でもなんかいい感じのエディタ作れたので満足です index、sections、キャレットの状態管理… 俺は何がしたかったんだろうか 😇 ADRで向き合う
43. © LayerX Inc. 43 ある機能や仕組みを実装するために必要な設計情報 何の問題を解決するのか、どのようなアーキテクチャで実装するのか、サービスのインターフェイスや使い方 はどうなるのか、データモデルはどのようになるのか、など具体的な実装指針を記したもの Design Docs 引き継ぎ（と懺悔）のためにDesign Docsに書き残し ADRで向き合う 💡実装と指針をDesign Docsとして考察とトレードオフを整理
44. 終わりに
45. © LayerX Inc. 45 辛さはあれど、用法用量を守って使えば強いプロダクトの下地になる とはいえ辛いものは辛い… contenteditableで広がる可能性 終わりに 技術の向き合いとしてADR, Design Docsが重要 意思決定のプロセスや実装に隠された抽象概念はドキュメンテーションの意義が高く 過去を振り返り、現在の選択を見直すための重要な材料になる また、技術的であったりドメイン的に新規のものや慣れていないものだからこそ トレードオフを整理してみんなで改善できるような状態を作っていく Appendix
46. © LayerX Inc. 46 LayerX Open Door アカウント登録が一切不要なカジュアル面談を公開しています。 ・私と雑談してみたい ・質問したいことがある ・選考に進むか悩んでいる などなど、お気軽にお申し込みください。 9/18(水)@東京&オンライン配信 LayerXがどのようにNext.jsを活用し、価値あるプロダクトを生み出すため に取り組んでいるか、その具体的な手法を紹介します。 ゲストとして、業界をリードするエンジニアの Hiroppy氏、Quramy氏をお迎えして開催！
47. Appendix
48. © LayerX Inc. 48 https://zenn.dev/cybozu_frontend/articles/5667796d4168bc EditContext APIを理解する 参考資料 【React】リッチテキストエディタ（Quill、Tiptap、Slate...）の考え方や前提知識 https://zenn.dev/meijin/articles/rich-text-editor-basis-knowledge Appendix Web フォントを使って contenteditable から脱出する https://engineering.linecorp.com/ja/blog/uit-ridding-of-contenteditable