Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Helpfeel小咄2選 Web WorkerとMutationObserver

Helpfeel小咄2選 Web WorkerとMutationObserver

Hiroki Akiyama

November 27, 2021
Tweet

More Decks by Hiroki Akiyama

Other Decks in Programming

Transcript

  1. Nota Inc.
    秋山博紀 @akiroom
    Helpfeel小咄2選
    Web WorkerとMutationObserver

    View full-size slide

  2. 自己紹介
    ● 秋山博紀
    ○ Akiyama Hiroki
    ● Twitterは@akiroom
    ● Nota Inc. VP of Engineering
    ○ プレイングマネージャーです
    ● 書ける言語
    ○ TypeScript, JavaScript, Ruby, Objective-C
    ● 悩み
    ○ TypeScriptの型付け沼にハマって午後が終わる
    ○ APEX Legendsに時間が溶けていく

    View full-size slide

  3. アジェンダ
    ● 会社紹介
    ● プロダクト紹介
    ○ Gyazo
    ○ Scrapbox
    ○ Helpfeel
    ● 小咄① Web Workerを使ったフロントエンド検索
    ● 小咄② MutationObserverを使ったSPAプロトタイピング
    ● 採用情報

    View full-size slide

  4. 会社名 Nota株式会社 (ノータ)
    設立年月日 2007年12月21日(2020年12月4日に日本法人を設立)
    代表取締役 洛西一周
    資本金 3億3851万312円
    主要外部株主 One Capital株式会社、Salesforce Ventures LLC.、株式会社デジタルホールディングス、
    Z Venture Capital株式会社、みやこキャピタル株式会社
    社員数 44人(役員、社員、パート合計)
    所在地 京都本社 京都市上京区御所八幡町 110-16 かわもとビル5階
    東京営業所 東京都港区東新橋 1-5-2 汐留シティセンター 5階
    米国支社 Nota Inc.
    850 New Burton Road, Suite 201, Dover, County of Kent, DE 19904
    Webサイト https://www.notainc.com
    Company Profile
    4

    View full-size slide

  5. Tokyo
    東京オフィス
    Kyoto
    京都オフィス
    京都オフィス
    京都府京都市上京区御所八幡町110-16かわもとビル5階
    東京オフィス
    東京都港区東新橋1-5-2 汐留シティセンター5階
    Office
    オフィス

    View full-size slide

  6. Notaは3つのサービスで個人の開発者から研究所、ゲーマーからプロのデザイナー、大きなチームや私
    たちのような小さなチームまで、世界中の人々を支援し続けています。
    Nota's Services
    サービス紹介
    Scrapbox
    Gyazo Helpfeel
    あらゆる情報を自動で整理できる
    画期的な知識共有サービス
    世界トップシェアを誇る
    スクリーンショット共有ツール
    検索に特化した
    FAQ作成システム

    View full-size slide

  7. 技術スタック
    Scrapbox
    Gyazo Helpfeel
    React React
    React

    View full-size slide

  8. 技術スタック
    Scrapbox
    Gyazo Helpfeel
    React React
    React

    View full-size slide

  9. Gyazoについて
    スクリーンショットを使ったコミュニケーションと情報収集のためのツール。
    ユーザー構成は欧米を筆頭に海外比率約86%、総キャプチャ数9億枚以上と世界中で利用されている。
    近年はPCゲームのキャプチャにも活用され、
    日本や米国でプロeスポーツチームへのスポンサー支援も行う。
    瞬時に伝わる快感
    Gyazo
    ユーザー数
    100万人突破
    月毎の画像
    アップロード数
    2000万枚突破
    世界トップシェアを誇る
    スクリーンショット共有ツール
    About Gyazo

    View full-size slide

  10. About Scrapbox
    Scrapboxについて
    チームのための新しい共有ノート
    企画書、社内マニュアル、議事録など、チームに必要なドキュメントを共同で瞬時に作成でき
    ます。ドキュメント同士がリンクを元につながり、
    何千、何万ものドキュメントを管理する苦労から解放してくれることが特徴です。
    ユーザー数
    18万人突破
    ページ数
    700万枚突破
    情報を軽快に整理する
    画期的な知識共有サービス
    Scrapbox

    View full-size slide

  11. About Scrapbox
    Scrapboxについて
    チームのための新しい共有ノート
    企画書、社内マニュアル、議事録など、チームに必要なドキュメントを共同で瞬時に作成でき
    ます。ドキュメント同士がリンクを元につながり、
    何千、何万ものドキュメントを管理する苦労から解放してくれることが特徴です。
    情報を軽快に整理する
    画期的な知識共有サービス
    Scrapbox
    Nota Tech Conf 2021 Spring

    View full-size slide

  12. About Helpfeel
    Helpfeelについて
    検索性に特化し、問題がすぐに解決する「FAQ」を簡単に構築できるシステム。ユーザーが自力で問題を解
    決するのを手助けするだけでなく、CS担当者やコールセンターの負担も削減します。
    2019年IVS LaunchPad出場。2020年Mizuho Innovation Award受賞。2021年グッドデザイン賞受賞。
    どんな質問でも答えられる
    新世代FAQ検索システム
    MRR:前年比+670%で成長
    問い合わせ数:1年で約17倍
    Helpfeel
    検索性能に特化した
    新世代FAQ検索システム
    開発メンバー募集中

    View full-size slide

  13. About Helpfeel
    Helpfeelについて
    検索性に特化し、問題がすぐに解決する「FAQ」を簡単に構築できるシステム。ユーザーが自力で問題を解
    決するのを手助けするだけでなく、CS担当者やコールセンターの負担も削減します。
    2019年IVS LaunchPad出場。2020年Mizuho Innovation Award受賞。2021年グッドデザイン賞受賞。
    どんな質問でも答えられる
    新世代FAQ検索システム
    Helpfeel
    検索性能に特化した
    新世代FAQ検索システム
    デモ

    View full-size slide

  14. 小咄①
    Web Workerを使った
    フロントエンド検索

    View full-size slide

  15. Web Workerを使ったフロントエンド検索
    ● Helpfeel検索の特長:高速な検索
    ● 高速な検索とは?
    ○ インクリメンタルサーチ
    ○ レスポンスが速い
    ○ 体感的に重くない
    ● フロントエンド検索をWeb Workerで実行することで高速な検索を実現

    View full-size slide

  16. フロントエンド検索
    ● サーバーサイドで形態素解析などを済ませ、
    必要な情報を含むJSONを配信
    ● FAQはアイテム数が少ない
    ○ 200〜400記事あれば十分
    ● クライアント端末がリッチ
    ○ 複雑な検索処理を十分実行できる

    View full-size slide

  17. Web Workerの活用
    ● 複雑な検索処理 = 重い
    ○ 1秒のUIロックがユーザー体験を損ねる
    ● Web Workerを活用してUIスレッドから分離する
    ○ 検索クエリをテキストボックスに入力したらWorker.postMessage()
    ○ 検索が完了したらonmessageでイベント受信

    View full-size slide

  18. HelpfeelにおけるWeb Workerの工夫
    ● Worker.postMessage()を送りすぎない
    ○ 大量のWeb Workerを並列実行しない
    ○ UIスレッド側でチェックしてから実行
    ○ IMEの状態などを見て制御する
    ● 濫用しない
    ○ バックグラウンドタスクに切り出す効果がある部分だけ
    ○ 現状、Helpfeelでは検索実行時のみ2ヶ所で利用
    ○ なんでもかんでもWorkerにしてるわけではない
    ○ 重いと感じてから利用を検討するぐらいで良いかも

    View full-size slide

  19. Web Workerを使ったフロントエンド検索まとめ
    ● 従来サーバーで実行するような処理をどこで実行するか改めて考える
    ○ アプリケーションサーバー?
    ○ エッジコンピューティング?
    ○ フロントエンド?
    ● 適切にフロントエンドに委譲する設計がユーザー体験を高める
    ○ 端末環境・ネットワーク環境の向上
    ○ Web Workerの活用
    ● 時には富豪的プログラミングのアプローチをとってみる

    View full-size slide

  20. 小咄②
    MutationObserverを使った
    SPAプロトタイピング

    View full-size slide

  21. MutationObserverを使ったSPAプロトタイピング
    ● HelpfeelのCMSはScrapboxを活用
    ○ Scrapboxの記事をHelpfeel用クローラーが収集する仕組み

    View full-size slide

  22. MutationObserverを使ったSPAプロトタイピング
    ● ScrapboxにHelpfeel専用機能が欲しくなる
    ● 独立したプロダクトをまたがる機能の実装のために
    ScrapboxのUserScript機能を活用
    ○ Scrapboxはユーザーが自由に自分だけに適用される
    JavaScriptを書くことができる
    ○ 責務を切り分けるために、Helpfeel専用機能を
    なるべくScrapboxに実装しない

    View full-size slide

  23. 事例:ScrapboxにHelpfeel用Syntax Checkerを導入
    ● HelpfeelではScrapboxで検索用のアノテーションを付与する
    ● Syntax Checkerを作るべく、プロトタイピングを開始

    View full-size slide

  24. Syntax Checker v1: setInterval
    ● setIntervalでDOMを監視
    ● メリット
    ○ 実装作業を高速に進められる
    ● デメリット
    ○ 考え得る限り最も雑
    ○ 常にDOMを検査しているので重い
    ○ 指定したintervalを超えたユーザー操作に追従できない
    ● 社内の少数で使うプロトタイプなので、まずはこれで良い

    View full-size slide

  25. Syntax Checker v1: setInterval

    View full-size slide

  26. Syntax Checker v2: MutationObserver
    ● MutationObserverでDOMを監視

    View full-size slide

  27. Syntax Checker v2: MutationObserver
    ● MutationObserverでDOMを監視
    ● DOMが変化した時だけイベント受信できる
    ● メリット
    ○ 不要なDOMのチェックがなくなるので、快適
    ● デメリット
    ○ 監視されてる側(Scrapbox)の仕様変更に弱い
    ● 社内で本格的に試すフェーズでは、丁寧にプロトタイピングした

    View full-size slide

  28. Syntax Checker v2: MutationObserver

    View full-size slide

  29. ● Scrapboxにイベントシステムを実装してもらった
    ● メリット
    ○ 最速
    ○ 仕様変更に強い
    ● デメリット
    ○ 無い
    ● 社内でドッグフーディングが済んでいるため、必要性を説明しやすかった
    Syntax Checker v3: Scrapboxに仕様を追加

    View full-size slide

  30. Syntax Checker v3: Scrapboxに仕様を追加

    View full-size slide

  31. MutationObserverの使いどころ
    ● SPAのページに対して何か外部から処理を加える時に良い
    ○ SPAのプロダクト間をまたぐ機能をプロトタイピングする
    ○ Tampermonkey等ユーザースクリプト追加系ブラウザ拡張でSPAのサービス
    上でDOMをいじる
    ○ scriptタグを埋め込んで使うサービスをSPA対応させる
    ■ 分析ツール、チャット接客ツール、MAツールなど
    ● 初めてMutationObserverを見た時は使いどころが良く分からなかった
    ○ 困っている時にMDNを眺めると発見があって嬉しい

    View full-size slide

  32. Recruitment
    採用情報

    View full-size slide

  33. エンジニア
    プロダクトに真剣に向き合う2種類の技術職を募集中です
    Requisition List
    募集中の職種
    ● 製品開発の主役
    ● 新機能の提案・企画・実装から分析・統計処理
    まで幅広く担当
    ● 改善・運用・保守にも責任を持つ
    ● ユーザーや顧客の課題を発見して、
    自らのアイ
    デアを実装して問題解決する
    ● Helpfeelチームの課題を技術で解決
    する
    Webディレクター
    ● Helpfeel案件ごとに導入を支援する
    ● 課題をヒアリングして、Helpfeelによって問題解
    決する
    ● 顧客折衝から案件の進行管理まで担当
    ● デザインも実装する
    ● セールスから案件を引き継いでカスタマーサクセ
    スに引き継ぐ

    View full-size slide

  34. Helpfeel Workflow
    仕事の流れ
    フィールドセールス
    展示会のリードやインバウンドの問い合わせに対して、
    サービス説明から契約締結までを行う。
    Webディレクター
    テクニカルライター
    導入後、お客様の課題を深く理解し、顧客のニー
    ズやゴールを把握。
    分析ツールを利用した調査・分析を行い、
    成果を出すためのサポートをして顧客満足度の向
    上を図る。
    カスタマーサクセス
    01 02
    受注後、セールスから要件を引き継ぎ、エンジニアやテ
    クニカルライターを率いて制作のマネジメントを行う。
    お客様のFAQに合わせた辞書、製品マニュアル、業務マ
    ニュアルなど制作を行う。
    ユーザー獲得 Helpfeel構築 03 導入後
    インサイドセールス
    エンジニア
    サービスを検討しているお客様を対象に、継続的なコ
    ミュニケーションやヒアリングを通じ関係構築を行う。
    新機能の提案や企画・実装・統計処理や分析を行う。
    ユーザーや顧客の課題を発見し自らアイデアを考案し、製
    品を開発する。

    View full-size slide

  35. Engineer
    エンジニア
    React JavaScript TypeScript
    Sass ESLint Stylelint etc.
    フロントエンド
    Node.js JavaScript TypeScript
    Python etc.
    バックエンド
    Heroku Google Cloud Platform
    MongoDB Atlas Logentries etc.
    インフラ

    View full-size slide

  36. Kyoto
    京都オフィス
    Remote Work
    リモートワーク
    完全フルリモートワーク可
    全員がリモートワークを実践
    NotaではCOVID-19の影響以前からリモートワーク が盛んです。各メンバーが 多拠点
    に分散しているため、すべての業務がオンライン前提 となっています。
    徹底したドキュメント化
    コミュニケーションは Slack, Scrapboxなどのツールを使って テキストで共有され、経営
    資料から日頃の作業メモまで 過去の経緯を誰もが簡単に確認できます。
    フルフレックス制導入
    2021年より10:00〜19:00のコアタイムは廃止 となりました。従来より柔軟に働いてい
    たメンバーの実態に合わせて 議論のもとに制度化 しました。

    View full-size slide

  37. Benefits
    福利厚生
    個人所有のPC半額拠出
    書籍購入補助(¥5,000/月)
    新入社員の歓迎会補助(含オンライン)
    ベビーシッター育児支援
    など常時#社内RFC実施中

    View full-size slide

  38. Highly recommended for…
    こんな方におすすめ
    ● 立ち上げ期〜成長期のプロダクトに挑戦したい方
    ● プロダクトを作ることそのものが好きな方
    ● カオスな状況を楽しめる方
    ● もちろんJavaScriptが好きな方!
    Notaはこんな方にオススメです

    View full-size slide

  39. Join us !
    我こそはと思う方は是非ご応募ください!
    気になる点や相談したい方はカジュアル面談も歓迎!
    面接合否と関係なく気軽に質問していただけます。
    https://notainc.com/ja/recruit 
    Helpfeelの旗に集って「よくある質問」で世直ししたいみなさま
    お待ちしております

    View full-size slide