Notaインターンに参加してScrapboxを作ってきました
今夏はNota, Inc.でのサマーインターン2017に参加して、rakusai.iconさん、shokai.iconさんとともにScrapbox.iconを作っていました。 インターン期間中は主に、Scrapboxの機能拡張APIや、モバイルでの編集機能を開発しました。
リリースイベントGyaPCの頃から大ファンだったScrapboxを作れるなんて、夢のような日々でした。
また、本場の社内スクボに触れることで、Scrapboxのパワフルさがいっそう身にしみた1ヶ月半でした。
https://gyazo.com/576c8f3dcda871cb71892d0988ea5c87
paragraph.icon Scrapboxとの出会い
GyaPC::Asia Tokyo 2016
当日のメモが private project から発掘された
Scrapboxという新たなWikiでできる共同編集体験と同時に、本体の開発にも興味を持った すごく魅力的なトークだった
ユーザーズボイスのセッション (所属されている研究室での活用例) mactkg.iconさん
Scrapboxを使い込みたい気持ちがこみ上げてきた
paragraph.icon インターン参加前の活動
SVG Screenshotの開発
ウェブページのスクリーンショットを撮り溜めて、いい感じに活用することに興味がある daiiz.icon
Scrapbox Drinkupで利用事例を発表
Projectを作り分ける話や、講義ノートをスクボで取る話をした
「Scrapboxのカスタマイズコレクション」の立ち上げ
GyaPCで聞いた様々な独自カスタマイズ事例が面白かった
みなさんのカスタマイズを共有してください！daiiz.icon
ScrapScriptの開発
いろいろな便利機能を搭載している
https://gyazo.com/c47f7a092735aae0dbf12f7e090e6c0a
paragraph.icon インターン参加前の準備
参加前の推薦図書などは無かったが、Scrapboxの開発に関係ありそうだと勝手に推測したものを読んで予習していた
React.icon で大きいものを作った経験はなかった
基礎的な知識や概念だけでもしっかり抑えておきたかった
shokai.iconさんのScrapbox記事
Scrapboxの大ファンなので、読めるものは全て読んだはず
paragraph.icon 序盤にやったこと
Scrapbox上でScrapboxの設計思想の議論を読んだり、コードを読みつつ少し触ったりした
開発環境構築
基本全てJavaScriptで書かれていて、Node.jsや関連ライブラリが最新状態に保たれていたのでスムーズだった 初日にローカルでScrapboxが動いてテンションマックス
本を読む
GyaPCでのshokai.iconさんの資料でも少し触れられているが、Scrapboxの編集更新の基本単位はcommit集合
Scrapboxのリアルタイム編集を支える技術のベースが分かる
関連ページや2-Hop Linksを取得する部分が理解しやすくなる
Notaの社内スクボを読む
Scrapbox上の記事を読んでScraoboxの歴史を学ぶ
これがすごい
daiiz.icon が来るまでに「ここを読むべき」のような特別なページが用意されていたわけではない
それでも
必要なページが自然と見つかる
一旦ページに入ると、次に読むとよいページが湧いてくる
いま知りたいこととは直接的には関係ないが、関連性はある、周辺知識を吸収できる
つまり
既存コンテンツが daiiz.icon 向けの教科書に早変わりできる
https://gyazo.com/88f0938c80c54508935b3e83648abb40 https://twitter.com/daizplus/status/912294488793538560
https://gyazo.com/d191920d6618ae42a472c92020f11363 https://twitter.com/daizplus/status/912315201600479233
気になるページに #daiiz👀 をつけてまわる
インターン期間中にやりたいことが見えてくる
まだ取り組む時期ではない項目に気づいたり、先にやるべきタスクの整理ができる
paragraph.icon Scrapboxの開発に慣れる
コードを読む
気になっていた機能はたくさんある
実装を読めるのは嬉しい
ローカルスクボにメモする
コードの断片と何をしているかのメモを書く
着目しているメソッドなど、よく出るキーワードをリンク化する
クラスやメソッドの関連性が見えてくる
自分の知らないネットワーク構造を浮き彫りにする、というスクボの特技が活かされた
ローカルスクボに機能を追加してみる
インターンに来るまでに付けたかった機能を作って動かしてみた
欲しい機能や、試したことは全部スクボに書いていく
今はだめでも、後から役に立つことがある
独自記法を追加してみる
記法入り文字列をparseしてエディタに表示するまでの過程を追える
自分でもWikiをつくろうと思ってWYSIWYGなエディタとWiki記法を作りかけていたけれど、Scrapboxのコードを読んでしまうと、凄すぎてとても追いつかないなという気持ちになった 小さなタスクをこなす
コードを読めば全体像が見えてくるはず shokai.icon
ということで、事前の講義パートっぽいものはなかった
shokai.iconさんやrakusai.iconさんの Pull Request のコードを読む
各プルリクで丁寧に書かれた意図や設計方針を読み、コードを理解していく
込み入った部分の理解の助けになる
バグを直してみる
再現方法をることで、事象と関連コードの突き合わせができる
直しきれなくても把握したコード量が増える
気づいたら、どのあたりを読めばいいか分かるようになっている
小さな機能を付けてみる
エディタのコードを読みつつ、文字装飾を外してPlainテキスト化するボタンをPopup Menuに追加 tableBlockのファイル名をクリックするとCSVファイルを取得できる機能 Ctrl-tの連打で様々なフォーマットで打刻できる
https://gyazo.com/f66d5930bfff59b614a6b4a2a62429a2
Scrapbox内で簡単な絵を描けるようになった
masui.icon先生作のGyakiを目指したい codeBlockをコピーする機能
他人のUserScriptを真似するときに便利
https://gyazo.com/88021e628511faa64d2d20c7ecb0834e
paragraph.icon 開発の進め方
Sprintミーティングに参加する
何をつくるか共有する
どの辺りまで進んでいるか進捗を報告する
作ろうとしている機能のページを社内スクボに作る
設計を相談する
ここでのやりとりが大切。Scrapboxをうまく活用する
ときどき共有することで軌道修正しやすい
言葉で伝えにくい箇所はGyazoってお絵かき機能でいろいろ書き込む paragraph.icon 大きめのタスクに取り組む
拡張機能を充実させる
自由にScrapboxを拡張するために必要なAPIを整備する
APIが先行してはいけない
欲しいものが先で、それを実現するのに適した形のAPIを提供したい
少しずつやっていく
window.scrapbox下にいろいろなAPIが生えてきた
https://gyazo.com/77394d9f1e8e006ad82aa414dc921ac0
ページ内容に対して何かする拡張機能を置けるようにした
独自のボタンを置ける
行データを取得するAPI window.scrapbox.Page.lines などと組み合わせて使うと便利
例
文字数のカウント
少し長めの文章が書きやすくなる
ページを分けるタイミングや場所に気付ける
https://gyazo.com/baf1de8ad1095fe50951d4ae65bc6de2
最近モバイルでも表示できるようになった
スマホでもページ内でお絵かき、ページを削除することができる
UserScriptで追加した Page Menu も表示される
モバイルでの使い勝手を改善する
編集
OSやブラウザごとに困っている問題が違うので、これらの洗い出しをした
iOSで青い点滅カレットとScrapboxのカレットがズレている現象などを直した
https://gyazo.com/7f548a9ebf32072ada2774f1c6fa92ea
文字選択
Scrapbox記法のテキストデータをうまくコピーしたい
選択した文字列をリンク化してページを繋げる、というScrapboxの醍醐味をモバイルでも体験したい
https://gyazo.com/4f8e1e6d7c68ef4f3b30abdd6dcf8bb0
文字選択は特に難しい daiiz.icon*2
このような仕組みを一から作りましたが、まだまだ改良したいところです
長押しで大まかな単語を選択する
選択領域の両端のつまみをスライドして選択範囲を調節できる
paragraph.icon 今後
Scrapboxを作り続けます
paragraph.icon おまけ
? Notaサマーインターン2017でScrapboxを開発してきた話
? Notaでの夏のインターンシップ