Scrapbox 3年間 1400回のリリースを振り返る
お久しぶりです
こんばんは、shokaiです
Scrapboxのプロダクトマネージャーです
3年前にはなかった肩書が…
めちゃくちゃ開発をしています
元気にしていましたか
私は社外の人と会うのが久しぶりすぎて、名刺の社名がNota inc.のままでした
どんまい
草
Scrapbox Drinkup #12用のスライドです
右のメニューのStart presentationでスライドになる
ページ内にコメントどうぞ
contrl - i で自分のアイコンつけてね前回 Scrapbox Drinkup #11が2019年12月だった
3年1ヶ月ぶり
年に何度かやっていたのだが、Covid-19で3年やってなかった
Helpfeel社の開発部としても、イベントはオンラインでしかやってなかった
超ひさしぶりです
今日は楽しんでいってください
わーい！
この3年のScrapboxの歩み
ユーザー数
10万→29万
ページ数
400万→1300万
すご！
1ユーザー辺り平均44pagesくらい
チーム利用も含まれているからなんとも言えないけど、一人当たりだとだいぶ少なく感じる
売り上げ
けっこう増えた
秘密です
サーバーコスト
なぜかあまり増えていない
負荷が上がる→サーバー増える→ソフトウェアの改善→サーバー減る
これをずっとやってる
更新のリリース回数
1400回
平日1日に2回ぐらいリリースしている計算？
休日もPR出来てたw
開発メンバー
ついにbizdevが来た！
600人規模の会社のナレッジマネジメント・ティール組織化をScrapboxでやった人物
求人票の下書きで人物像の例として挙げていた人をゲットした
ヘッドハンティングじゃん！
すごい
社名が変わった
Helpfeelという新プロダクトができ、大ヒットした為
社員も20→100人近くに増えた
私も毎週カジュアル面談と面接しまくりました
HelpfeelとScrapboxの関係
Scrapboxにヘルプテキストを書いて変換するといい感じのヘルプページになる、それがHelpfeel
? これのことScrapboxとは
WiKiでありメモ帳でありchatです
考えながら書いてリンクを繋いでいると、わからなかった事がわかってくる
言語化できていなかった部分が明らかになってきたりする
ちょっとデモします
新しくページ作って、リンクして、関連ページを辿る
最近作ったおもしろい機能
今見てるページの関連ページ、だけを全文検索する機能
実装
新しいparameter
search が生えたここに検索語句を入れると、全文検索された結果が
relatedPages に入る応答jsonに
relatedPages.searchBackend が生えたElasticsearchを使っている
ページを探す時、こういう手順を踏む事が多い
検索（QuickSearchか全文検索）→見覚えのあるページを見つける→そこから関連ページ辿る
とてもわかる
検索、読む、辿る、を繰り返す
検索範囲のコントロール
2019年に検索範囲を広げる手段としてProject横断検索を作った
逆に検索範囲を狭める手段もほしい
1 projectを数百人、10万ページで使っている時に効くはず
デカいprojectの一部、このへん、だけを検索する機能だ
とするとページの繋がりの視覚化 (daiiz)がそろそろ欲しいなと思った
どの範囲が検索対象なのか知りたい
大きすぎるリンクの問題対策になる？
まだ素早く日本語変換すると結果が変になるbugがあります。大目に見てほしい
ゆっくり操作してください
このスピード感絶対20分で終わらないぞw
喋り筋が…
右のスクロールがまだまだで笑えてきますね…w
後何分か適度なタイミングで書いておこう
書かないと今日1日終わりますね
この2つ、昨日くらいに突然できてびっくりした
奇遇ですね。私も突然でびっくりしてます
毎日使ってるのに今知りました
本当に急に出来ました
実は半年かけて作ってました
テロメアから、その行が作られた過去のページに戻れる
Page historyという物があるんですよ
ページの過去のバージョンが見れる
のだが、イマイチ認知されてないので、Historyの存在を可視化して導線を作りたかった
生成タイミングがわからないのも使いづらいポイント？
最初はページの紙が重なってるようなビジュアルとか検討してたけど
履歴→重なり→堆積→テロメアの凸凹って地層っぽくね？→そもそもテロメアが、ページ内の部位毎に更新日時が違う事を示してるのだからそこからPage historyまで一気に移動できればいいじゃん
となった
historyも全文検索の対象に含めたい
よりページのリファクタリングをしやすくなる
良い
古い情報を本文から思い切って削除しやすくなる
社内規則のページには最新の情報だけ表示したい
しかし、2018年の社内規則を急に読みたい、という事も稀にある
UserScript開発でありがたい
より正確にsnapshotが取れると、gitっぽく使える用になりそう
自分のページ作る導線を強化している
今なんと、Scrapboxが数百人規模の部署や会社に導入される事が増えています
projectに人を入れて、自分のページを作って、アイコン記法を使って議論するまでをサポートしたい
この機能がないと、一人一人にサポートすることになるので泣いちゃいます
このサポートをするのが大変
逐一説明する必要がある
To discuss with N members
他にメンバーがいるprojectを表示した時に発動
メニューが勝手に開いて、点滅する
イマジナリービーバー君
自分のページテンプレートで、あなたの想像上のビーバー君が喋る
project memberにはいない。システムの擬人化
自分のページをどう使うのか、ページの一番上の画像がアイコンになる、などの仕様がわかる
これよさそう
ほか、1400回の機能リリースを10分で紹介
もしかして残り10分もない？
いま19:54:23
ここ3年で大変だったやつ
MongoDBを置いてたmLabがMongoDB Atlasに買収されて、移行した
Elasticsearchの導入と運用
スマホとタブレット用の実装を書き直した
Safariの3rd party cookie廃止により、Gyazoとの連携機能を作り直した
アラビア語入力の対応
ファイルアップロード容量追加の課金機能
10万ページを数百人で編集する会社が現れた
すごい
ページを探す機能
全文検索にヒットした位置まで自動スクロール
関連ページを開く時に、参照元まで自動スクロール
関連ページリストに他のprojectのページも表示
自分が見たことがあるprojectだけ表示される
インターン生が開発してくれた
全文検索して下にスクロールすると、検索範囲が広がる
2 hop searchの逆。検索範囲のコントロール
ページタイトルだけ検索
本文を検索対象から除外できる
似たようなタイトルのページを折りたたむ
定例ミーティングの議事録で便利
QuickSearchのソート
連番っぽいタイトルのページのソートがいい感じになった
ページの更新に気づく機能
未読行の位置をスクロールバーに重ねて表示する
もうこれないと困っちゃう
クリックで飛べるようにしてほしいが、クリック範囲が狭かったりするからむずかしいか
スクロールバーをクリックするのはどう？
シフトキーかなにかと一緒にクリックすると飛べる
ありですね
mobileだとタップできません
UserScriptでクリックできるようにもできる
これそういう機能だったんだ…
これまで
既読・未読を2色で表していた
緑（青）のマークに濃淡をつけ、区別できるようにした
ページを読み込む前に更新されていた未読行
ページを読み込んだ後に更新された更新行
会議のアジェンダページで事前に議論して、当日そこでまた議論を追加する時などに便利
いろんな人が同期的にも非同期的にも編集するので
Date modified with
ページリスト画面を自分のアイコンが書かれているページだけに絞り込む
他人が書いたに気づける
このモードでは未読マークが表示される
ページリスト画面を自分が更新したページだけに絞り込む
未読マークも表示される
Microsoft Teams通知
まじか
ついでにDiscord通知も実装した
ファイルアップロード
ファイル容量を追加購入できる
ファイル検索
画像、PDF、テキストファイルの中身が検索できる
そのうちWordやExcelもやりたい
画像のテキストをゲット
ページリスト画面にいきなりファイルをアップロード
ページリストにdrag and dropしたらページが新規作成される
タッチで出るpopupの「Upload」からアップロード
いままでファイルアップロードの手順が多かったので、非常にありがたい！
タッチで出るpopupの「Paste」からアップロード
iOSのKeynoteなどから、画像としてアップロードできる
スマホ・タブレット対応
エディタの中を全部実装し直した
ほぼ全部書き直した
当たり判定やUI部品やイベントの処理方法など
タッチとクリックでUIを出し分ける
画面の上側に出る
Porter for scrapboxを参考にした
iPad + magic keyboard対応
物理キーボードもあるし、スクリーンキーボードもある
画面を指でタッチもするし、トラックパッドでクリックもする
そのせいでテキスト選択だけで7種類も方法がある
指でタッチでツマミを広げる
指でタッチして表示されるカーソルpopup menuのSelectボタンから開始
マウスポインタをドラッグ
shiftキー + マウスクリック
shiftキー + 上下左右キー
shiftキー + タッチ
なんと物理キーボード + 画面タッチという操作がある
まじかよ
ダブルクリックて単語選択
トリプルクリックで行選択
これだけ未実装
当たり判定の色々な関係で難しい
business project向け機能
ログイン方法が増えた
監査ログ
誰がどのページで何をしたか記録されている
知人をprojectに参加させる
メールアドレスや名前で検索して、招待URLを使わずにいきなり追加
projectを作って人を追加する時に便利
「このクレジットカードを使う」ボタン
新しいbusiness projectを作って、既存の支払いに紐付けできる
ページ編集まわりの改善
Update links & merge pages
タイトルが重複したページをmergeしつつ
他のページに書かれている
[curry] を全て [カレー] に置き換えるタイトル変えてもリンクが切れない。わかりやすくなるならどんどん変えましょう
ページの上の方を誰かが編集しても、下の人のスクロール位置がガタガタしない
上が激しくても下の人が困らなくなる
何者なんだ…！？
スクボの機能開発って基本的に突然生まれるのか
彼の場合はUserScriptで試して、良いじゃん！ってなって本体に取り込まれてます
若干まだガタガタすることもある
同じ行をみんなで編集しても、いい感じにカーソルの位置を調整する機能
こういう風に、行末にアイコン記法をみんなで書きたい
> すごい
のだが
私がを書くと、他の人のカーソル位置が
[shokai.icon] の中に入ってしまいそのまま
control - i を押すと [sho[akix.icon][balar.icon]kai.icon] みたいになってしまうそれを防ぐように、カーソル位置が自動調整されるようになった
これ説明が難しいけど地味に効いてると思う
同じ行の編集操作を実装するの大変そう
テロメアから行permalinkを取得
行をひらくURLを取得できる
プレゼンモードそのまま編集
RTL対応
RTL（アラビア語やヘブライ語）とLTR（日本語や英語）を混在させて、そこそこ普通に書ける
お絵かき
ペンの太さが選べるようになった
status barの警告色を赤から黄色にした
色弱・色盲対応のつもりだったが
「ページ保存できてると思ったらできてませんでした」という問い合わせがめっちゃ減った
接続エラーの色が赤だと認識できない人が多いらしい
気付くようになって便利！
人間の認知の謎
人間の目は、同じ明るさでも色によって感度が異なる、っていう話かも
昔(?)、青色発光 LED に関わる研究に携わってて、青色のスペクトルが出ているのに人間の目にはそれより弱い強度の緑色やアンバーしか見えないみたいな経験があった(不純物が入っていると、青色以外が光る)
黄色と赤色の話は、波長が長い方の話で、赤色より黄色の方が感度が高い
蛇足ですが、人間の目がこのように適応したのは、人の肌の色の識別のため(人の感情を読み取るため)、というのがマーク・チャンギージーの説でした
肌の色を識別できた方が生存に有利だったんすかね？
結果、そういう目を持ったわれわれが世界を闊歩してるから、そうなんだろうね
チャンギージーの本はたぶんこれ。早川書房でキンドルになってた。知らんかった
この感度が良すぎて、スペクトル的には全く区別がつかない(つまり宇宙人からみたらみんな同じ*サル*に見える)人間に、肌の色の違いがあって、人種というものが存在するのだ、という不幸が生まれた、ということらしいです
インフラ系の作業する時とか便利
この発想はなかった
まとめ
色々やった
ページを探す
ページを編集する
リンクを辿る
様々なデバイスで
たくさんの人数で
大量のページを
仕事でも使えるように
次回また3年後、お会いしましょう
これはボケなのか本気なのか…
シャボンシティ諸島で！ってやつだ
実際は年に数回やりたいねという感じです
88888888888
プロジェクトを束ねた stream が欲しいです
あと公式な Re-scrap も欲しいですネ
