contenteditableと向き合う

Slide 1

Slide 1 text

Slide 2

Slide 2 text

目次 Agenda ● 自己紹介・会社紹介 ● 今回の発表に関する事例 ● ????????

Slide 3

Slide 3 text

自己紹介

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

会社紹介

Slide 7

Slide 7 text

7 © LayerX Inc. LayerXのミッションすべての経済活動を、デジタル化する。人類の未来をより良くする。そのために私たちは、テクノロジーの可能性を探求し、経済活動における複雑で大きな課題に挑む。仕事や暮らしの中にある摩擦が解消され、それぞれの創造力が発揮されている。そんな希望あふれる優しいデジタル社会を、未来に残していくために。

Slide 8

Slide 8 text

8 © LayerX Inc. 「すべての経済活動を、デジタル化する。」をミッションに掲げ、法人支出管理サービス「バクラク」や企業内業務のデジタル化を支援するサービスを提供しています。事業紹介バクラク事業企業活動のインフラとなる法人支出管理（BSM）SaaSを開発・提供 Fintech事業ソフトウェアを駆使したアセットマネジメント・証券事業を合弁会社にて展開 AI・LLM事業文書処理を中心とした、LLMの活用によるプロセスのリデザイン

Slide 9

Slide 9 text

9 © LayerX Inc. 「すべての経済活動を、デジタル化する。」をミッションに掲げ、法人支出管理サービス「バクラク」や企業内業務のデジタル化を支援するサービスを提供しています。事業紹介バクラク事業企業活動のインフラとなる法人支出管理（BSM）SaaSを開発・提供 Fintech事業ソフトウェアを駆使したアセットマネジメント・証券事業を合弁会社にて展開 AI・LLM事業文書処理を中心とした、LLMの活用によるプロセスのリデザイン

Slide 10

Slide 10 text

10 © LayerX Inc. 事業紹介稟議・支払申請・経費精算仕訳・支払処理効率化法人カードの発行・管理帳票保存・ストレージ帳票発行 * 経費精算のSlack連携は申請内容の通知のみ・AIが領収書を５秒でデータ化・スマホアプリとSlack連携あり・領収書の重複申請などミス防止機能・AIが請求書を５秒でデータ化・仕訳・振込データを自動作成・稟議から会計までスムーズに連携・年会費無料で何枚でも発行可・インボイス制度・電帳法対応・すべての決済で1%以上の還元・AIが書類を5秒でデータ化・あらゆる書類の電子保管に対応・電子取引・スキャナ保存に完全対応・帳票の一括作成も個別作成も自由自在・帳票の作成・稟議・送付・保存を一本化・レイアウトや項目のカスタマイズも可能

Slide 11

Slide 11 text

11 © LayerX Inc. 事業紹介稟議・支払申請・経費精算仕訳・支払処理効率化法人カードの発行・管理帳票保存・ストレージ帳票発行 * 経費精算のSlack連携は申請内容の通知のみ・AIが領収書を５秒でデータ化・スマホアプリとSlack連携あり・領収書の重複申請などミス防止機能・AIが請求書を５秒でデータ化・仕訳・振込データを自動作成・稟議から会計までスムーズに連携・年会費無料で何枚でも発行可・インボイス制度・電帳法対応・すべての決済で1%以上の還元・AIが書類を5秒でデータ化・あらゆる書類の電子保管に対応・電子取引・スキャナ保存に完全対応・帳票の一括作成も個別作成も自由自在・帳票の作成・稟議・送付・保存を一本化・レイアウトや項目のカスタマイズも可能

Slide 12

Slide 12 text

今回の発表に関する事例

Slide 13

Slide 13 text

13 © LayerX Inc. ADRで向き合う稟議・支払申請・経費精算仕訳・支払処理効率化法人カードの発行・管理帳票保存・ストレージ帳票発行 * 経費精算のSlack連携は申請内容の通知のみ・AIが領収書を５秒でデータ化・スマホアプリとSlack連携あり・領収書の重複申請などミス防止機能・AIが請求書を５秒でデータ化・仕訳・振込データを自動作成・稟議から会計までスムーズに連携・年会費無料で何枚でも発行可・インボイス制度・電帳法対応・すべての決済で1%以上の還元・AIが書類を5秒でデータ化・あらゆる書類の電子保管に対応・電子取引・スキャナ保存に完全対応・帳票の一括作成も個別作成も自由自在・帳票の作成・稟議・送付・保存を一本化・レイアウトや項目のカスタマイズも可能

Slide 14

Slide 14 text

© LayerX Inc. 14 前提になる要望商品などの金額を「単価×個数」で計算できる状態になっていたが、一部のお客様では「単価×個数×（なにかの数値）」で金額を出したいケースがある例: 新聞の契約に対する金額 = 「新聞単価×部数×契約月数」バクラク請求書発行での事例 ADRで向き合う ECなどの業種では相殺という考え方で金額を出したいケースがある - 請求金: [お客様] ー(システム利用料金)→ [EC] - 支払金: [お客様] ←(預かり金)ー [EC] ←(購入代金)ー [購入者] 例: 実際に請求する or 支払う金額 = 請求金 - 支払金　　　　　　　😱お客様ごとで金額を出すというだけでも多種多様な要求が出てきていた

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

目次 Agenda ● 自己紹介・会社紹介 ● 今回の発表に関する事例 ● contenteditable ● ADRで向き合う ● 実装で向き合う ● 終わりに

Slide 21

Slide 21 text

contenteditable

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

© LayerX Inc. 25 キーボード操作の独自実装による対応今までinput, textareaで気にしなくてよかったキー操作をほぼ再実装しないといけない… 矢印キーの操作・cmd+(any)・shift+(any)・backspace・Pgup/Pgdn・Home・etc... 大いなる力には、大いなる責任が伴うクリップボードへの独自実装による対応 HTML属性のものは受け入れられてしまうので適切にコントロールしないといけない… WYSIWYGエディタなら適切に見出しやリストなどに置換しないと操作性に難が出る contenteditable 日本語 IME への独自実装による対応 OSSライブラリは多くあれど、日本語 IME 向けの対応は個別で行わないといけない… （後に知ったが、onCompositionStart/End 使うとコントロールしやすくて良さそう）

Slide 26

Slide 26 text

ADRで向き合う

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

© LayerX Inc. 29 選択肢2: inputを使って、変数はスペースを表現したWeb fontで入力させる選択肢を上げてみる ADRで向き合う pros 😆 cons 🤮 - 文字数に合わせたfontを用意する - 項目名はユーザが指定する仕様 - 読み込み速度や FOIC/FOUC の問題 - 事例が多くないので不確定要素あり - 視認性は良さそう - キーボード操作も問題ない - シンプル変数部分は幅調整したスペースを埋め込んで計算式を構築する（※ LINE Engineering Blogを大いに参考に[丸パクリ]）個数単価項目変数 ▼

Slide 30

Slide 30 text

でスタイリングして計算式を構築する個数単価項目変数 ▼

Slide 31

Slide 31 text

© LayerX Inc. 31 決断 ADRで向き合ってみる ADRで向き合う計算式で変数を伴う四則演算式を扱うWebエディタでは「contenteditable」を使う計算式の特性上使う演算子や数字・変数が限られていることで細かなキーボード操作を再現しなくても良いとした 💡文脈と決断をADRとして残すことで後続に意思を伝えるバクラクでは複数プロダクトが展開されており、ほかプロダクトのUIを参考にするケースも多いため、文脈を意識して使わないと思わぬ罠にハマる可能性もある → 不用意な転用を避ける意味でもADRで書き残しておくことが有効

Slide 32

Slide 32 text

実装で向き合う

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

© LayerX Inc. 43 ある機能や仕組みを実装するために必要な設計情報何の問題を解決するのか、どのようなアーキテクチャで実装するのか、サービスのインターフェイスや使い方はどうなるのか、データモデルはどのようになるのか、など具体的な実装指針を記したもの Design Docs 引き継ぎ（と懺悔）のためにDesign Docsに書き残し ADRで向き合う 💡実装と指針をDesign Docsとして考察とトレードオフを整理

Slide 44

Slide 44 text

終わりに

Slide 45

Slide 45 text

© LayerX Inc. 45 辛さはあれど、用法用量を守って使えば強いプロダクトの下地になるとはいえ辛いものは辛い… contenteditableで広がる可能性終わりに技術の向き合いとしてADR, Design Docsが重要意思決定のプロセスや実装に隠された抽象概念はドキュメンテーションの意義が高く過去を振り返り、現在の選択を見直すための重要な材料になるまた、技術的であったりドメイン的に新規のものや慣れていないものだからこそトレードオフを整理してみんなで改善できるような状態を作っていく Appendix

Slide 46

Slide 46 text

© LayerX Inc. 46 LayerX Open Door アカウント登録が一切不要なカジュアル面談を公開しています。・私と雑談してみたい・質問したいことがある・選考に進むか悩んでいるなどなど、お気軽にお申し込みください。 9/18(水)@東京&オンライン配信 LayerXがどのようにNext.jsを活用し、価値あるプロダクトを生み出すために取り組んでいるか、その具体的な手法を紹介します。ゲストとして、業界をリードするエンジニアの Hiroppy氏、Quramy氏をお迎えして開催！

Slide 47

Slide 47 text

Appendix

Slide 48

Slide 48 text

© 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