Gyazoは画像の瞬間発見サービスへと進化します

Nota Tech Conf 2021/3/9

概要

これまでのGyazo

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

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

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

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

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

Draw

OCR

検索

などが使えます

これからのGyazo

「画像の瞬間発見」

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

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

どういうことなのか？

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

領収書・請求書

バス停の時刻表

駅の看板

旅行先の看板

書籍

ポスター

宅配便の不在票

賃貸の契約書

本棚

メモる必要がない

整理する必要がない

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

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

やっている施策

検索機能の強化

関連画像の理由表示

写真のEXIF対応

タイトル・説明UIの改善

ヘッダーUIの改善

検索機能の強化

Gyazoの検索機能とは

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

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

https://gyazo.com/3cc2a9d91e2437c3db66acc2c6c77ee6

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

「渋谷駅」で検索

「渋谷区」で検索

「渋谷凛」で検索

しぶりん

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

検索履歴

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

https://gyazo.com/dd0acbef02ebac5b2723172b84f7ec95

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

関連画像の理由表示

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

Gyazoの関連画像機能とは

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

https://gyazo.com/4fb132fe1570de5e4ad9e7cd7de43b37

Scrapboxに近づけたい

例：Scrapbox Drinkupのページ

https://gyazo.com/8c8781243d09a03e91f2b82081a209ce

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

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

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

https://gyazo.com/860726eca5cba29bdbfd25fb16e90c79

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

写真のEXIF対応

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

現在

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

ゴール

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

なぜ？

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

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

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

開発中の画面

https://gyazo.com/fd3bcbce441b5e3a4e8f0b20f3c96654

EXIF位置情報を活用する

開発中の画面

https://gyazo.com/705da823c9dc593380cd67e348a42471

開発中の画面

https://gyazo.com/38100d34652b5174f398a80d40e9c4e2.mp4

タイトル・説明欄UIの改善

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

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

Scrapboxも一行目がタイトル

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

Before

https://nota.gyazo.com/045d31b6c18c0f420737671dcf23bb59

After

https://nota.gyazo.com/c56773ee8a5305ba210848206bf17d82

https://gyazo.com/ebe7fc38dcc7b10dfb98d865e8a56fa6

ヘッダーUIの改善

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

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

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

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

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

画像個別画面

Before

https://gyazo.com/59892b5ef7aca75b445dfa4be2dfd408

Before 2

https://gyazo.com/a15a748f9c651c7b53c07f4b842a30d5

After

https://gyazo.com/17b11f4b4966e4c0f970fae543b3a654

画像一覧画面

Before

https://gyazo.com/897d675c5c8323e43a004a866b0dce61

After

https://gyazo.com/d84c4b818b27991af94e8b2ac9763d78

設定画面

検索結果画面

コレクション画面

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

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

技術的な話

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

Gyazoを支える技術

最近の技術的な取り組み

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

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

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

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

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

例：検索履歴、EXIF地図

UserScriptとか？

UIに関して

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

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

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

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

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

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

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

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

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

15分～1時間

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

Pull Request分割

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

例：ヘッダーUIの改善

完成版のPull Requestを立てる

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

Files changed 112

+1,202 −1,070

分割する

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

React.FCにする

DOM構造を共通化する

CSSによる見た目の修正

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

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

例：新機能追加

完成版のPull Requestを立てる

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

ええやん

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

いらんやろ

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

分割する

サーバーサイド

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

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

見た目の調整

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

元のPull RequestはClose

どんどんリリース

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

MongoDB

ブランチStaging

自動リリース

Staff feature

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

Beta Feature（β版機能）

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

Gyazoを支える技術

クライアントサイド

サーバーサイド

バックエンド（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リリースは完全に自動化されている

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

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

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

再発防止策はちゃん練る

最近の技術的な取り組み

クライアントサイド

React.FCやCustom Hooks、Context

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

React.FCのView-Presenterパターン

React.FCをPresenterとViewに分ける

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

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

テストしやすい

Custom Hooksのテスト

Presenterのロジックをテスト

Viewの描画結果をテスト

Jest

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

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

サーバーサイド

Rubyのバージョンアップ

2.7.2になりました

バックエンド

Elastic Cloud

Staff featureとして開発中

GKE

DevOps

GKE

kubernetes

脱chef

まとめ

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

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

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

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

おしらせ

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

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

連絡先

yuiseki@notainc.com

知りたいこと

scrapbox

github

所属

👀

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

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