Nota Tech Conf 2021/3/9

Gyazo プロジェクトマネージャー yuiseki

Gyazoは「スクリーンショットの瞬間共有」としてお馴染みでした

Gyazoは「画像の瞬間発見」を目指して開発をしています

「スクリーンショットの瞬間共有」

インスタントなスクリーンショットツール

Gyazoを起動して範囲選択するだけで、その範囲がスクリーンショットとして即座にアップロードされ、クリップボードのURLを送るだけで共有できる

Gyazo Proユーザーになっていただくと

過去にアップロードした全画像への一覧からのアクセス

Draw

OCR

検索

などが使えます

「画像の瞬間発見」

あらゆる画像情報の蓄積・発見ツール

これまで通りスクリーンショットツールとしての機能も重視

Nota CTO 増井俊之さんのGyazoの使い方

スクリーンショットに限らず、いろいろな画像情報をGyazoに蓄積しておくと検索で見つかって便利

領収書・請求書

バス停の時刻表

駅の看板

旅行先の看板

書籍

ポスター

宅配便の不在票

賃貸の契約書

本棚

メモる必要がない

整理する必要がない

この便利さを、さらに強化していきたい

Notaのビジョン「⼈を置き換えるのではなく、⼈の弱い部分を助けるツールを作る」

検索機能の強化

関連画像の理由表示

写真のEXIF対応

タイトル・説明UIの改善

ヘッダーUIの改善

Gyazoの検索機能とは

自分が過去にアップロードしたすべての画像を対象に検索できる

検索欄に文字列を入力したときに、即座に検索結果を表示する

「渋谷」で検索すると検索結果が多すぎる

「渋谷駅」で検索

「渋谷区」で検索

「渋谷凛」で検索

重くないのかな

しぶりん

今後、さらにアップデート予定

検索履歴

検索欄にフォーカスしたときに、最近検索したキーワードが出てくる

今後、さらにアップデート予定

もともとGyazoには「関連画像」という機能があります

Gyazoの関連画像機能とは

現在閲覧中の画像のメタデータを元に、自分が過去にアップロードしたすべての画像から、関連度の高い画像を提示する

Scrapboxに近づけたい

例：Scrapbox Drinkupのページ

あるキーワードにリンクされている項目が表示されている

それぞれの項目がなぜ表示されているのか、理由がわかる

ある情報から芋づる検索式に関連した情報を探すことができる

β版機能としてリリースされました！

今後、さらにアップデート予定

今はGyazo Proで使える機能。Proは1ヶ月無料でお試しできる

画像推薦の理由が表示され、理解と納得が得られる

写真画像に含まれるEXIF情報

EXIF情報を使って撮影日時などを認識してソートできるようにする

現在

アップロード日時でしかソートできない

ゴール

撮影日時でソートできるようにする

なぜ？

デジカメや一眼レフで撮影した写真をあとからアップロードすると困る

スマホでも、電波のない場所や通信の途絶した災害時に撮影した写真をあとからアップロードすると困る

確かにこれあると嬉しいです

現状だと、撮影日時をアップロード日時にするscriptを自前で書くしかない

開発中の画面

EXIF位置情報を活用する

開発中の画面

開発中の画面

画像のタイトル・説明を適切に入力することで検索が一層便利になる

説明欄の一行目を自動的にタイトルにする

Scrapboxも一行目がタイトル

引用元を編集できるようにする

Before

After

Gyazoの全画面に存在するヘッダー

もっと画像の閲覧に集中できるようにしたい

細かい操作は全てヘッダーにまとめる

どのページからでも検索できるようにしたい

ヘッダーに検索欄を追加する

画像個別画面

Before

Before 2

After

画像一覧画面

Before

After

設定画面

検索結果画面

コレクション画面

数段階に分けて、段階的に改善していった

今後、さらにアップデート予定

プロトタイピングやドッグフィーディングを重視する開発スタイル

Gyazoを支える技術

最近の技術的な取り組み

ビジョン実現へ向けたトップダウンな開発と、ボトムアップな開発

ビジョン実現のためのロードマップ、バックログ

Gyazoを使っていて不満があったら自分で修正する

こういう機能ほしい！という新しいアイデアがあったとき、許可を得たり相談したり議論するよりもとりあえず動くものを作る

それを触りながら議論する

例：検索履歴、EXIF地図

UserScriptとか？

UIに関して

最初はUIの完成度を気にせず、とにかく動くプロトタイプを作る

UIはプロトタイプを触りながらどうするべきか検討する

先にUIを検討したほうがよさそうな、複雑なUIの場合

何パターンかワイヤーフレームやモックアップを作り、それを元に議論

モックアップはHTML+CSS+Javascriptで実際に動くものを指す

例：インクリメンタルサーチ、ヘッダーUIの改善

基本的にテーマごとにScrapboxにページを立てて、そこで議論をしている

ロードマップやバックログもScrapboxにある

週に一回、開発メンバー全員が集まって、通話をしながら議論を行う

15分～1時間

いっぺんに複雑で巨大な修正をするよりも、小さい修正を積み重ねる

Pull Request分割

これはルールではなく、ベストプラクティス

例：ヘッダーUIの改善

完成版のPull Requestを立てる

完成時の動作検証はそこでやる

分割する

各UIコンポーネントのリファクタリング

React.FCにする

DOM構造を共通化する

CSSによる見た目の修正

他の部分のUIもヘッダーに取り込む

段階的にゴールに近づけていく

例：新機能追加

完成版のPull Requestを立てる

アイデアの検証はそこでやる

ええやん

もっとこうしたらええんちゃう？

いらんやろ

サーバーサイドはいいけどクライアントサイドは要修正だねみたいなことが起きがち

分割する

サーバーサイド

クライアントサイドロジック

クライアントサイドUIコンポーネント

見た目の調整

各々のテストがちゃんとしていればガッチャンコして動くはず

元のPull RequestはClose

どんどんリリース

修正提案や新アイデアをすぐに試せる技術・仕組み

MongoDB

ブランチStaging

自動リリース

Staff feature

Notaスタッフのみが有効・無効を切り替えられる機能

Beta Feature（β版機能）

全ユーザーが有効・無効を切り替えられる機能

クライアントサイド

サーバーサイド

バックエンド（DB/Storage）

めっちゃ良い

DBマイグレーションが不要

必要ならガンガンフィールドを変更できる

マイグレーション作業しなくてもいきなりデプロイできる

mongoid

大規模運用難しいんじゃないかと言われがち

Gyazoで運用できてます！

Notaの他の製品でもMongoDBを使っています

Scrapbox

Helpfeel

課金など

DevOps（CI/CD）

ブランチstaging

もはやみんなやってる…？

Pull Requestが作られるたびに新たなstaging環境が立ち上がる

staging環境の立ち上げは完全に自動化されている

これらのstaging環境のDBはproductionと共通

本番のデータで、Pull Requestの動作確認がすぐにできる

MongoDBなのでModelの追加やModelのフィールドの変更を含むPull Requestも動作確認できる

自動リリース

もはやみんなやってる…？

production ブランチにマージすると gyazo.com にリリースされる

productionリリースは完全に自動化されている

毎日リリース、勢いがある時は一日に何回もリリースしている

週末や夕方はリリースを控える

もしproductionリリースで壊れてしまったとしても、ロールバックもコマンド一つで可能

再発防止策はちゃん練る

クライアントサイド

React.FCやCustom Hooks、Context

Reactの新しい概念を積極的に取り入れています

React.FCのView-Presenterパターン

React.FCをPresenterとViewに分ける

PresenterにStateや、Custom Hooksの値に基づいたロジックを記述

綺麗に Custom Hooks になってればかならずしも JSX だけの View コンポーネントみたいの切り出す必要ないように思われるがどうか

ViewはPresenterから渡された値を描画する

テストしやすい

Custom Hooksのテスト

Presenterのロジックをテスト

Viewの描画結果をテスト

Jest

Reactで書いたコードのテストに使っています

Facebookが開発していてReactと相性が良い

サーバーサイド

Rubyのバージョンアップ

2.7.2になりました

バックエンド

Elastic Cloud

Staff featureとして開発中

GKE

DevOps

GKE

kubernetes

脱chef

chef-solo ではなくて chef ?

chef-solo でしたね

ありがとうございます！

Gyazoはスクリーンショットの瞬間共有はそのままに、画像の瞬間発見を目指して開発を進めていきます

とにかくガンガンコードを書いてくれという開発スタイル

新機能が着々と開発されています

そうした開発を支える技術についてお話させて頂きました

Gyazo Proの機能を一ヶ月無料で試すことができますので、ぜひ試してみてください！

Gyazoを一緒に開発したい！という学生インターンさん募集しています！連絡ください

連絡先

yuiseki@notainc.com

知りたいこと

scrapbox

github

所属

👀

Gyazoの技術や開発について、もっとここが詳しく知りたい！という点があったら教えて下さい！今後の発表の参考にします

みなさんがGyazoの検索機能を使っていて便利だったエピソードを是非教えて下さい！