Scrapboxにガントチャートを埋め込めるツールを作った
https://us-central1-svg-render.cloudfunctions.net/render/2018-12-14%202018-12-24%20Scrapbox%E7%94%A8%E3%82%AC%E3%83%B3%E3%83%88%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%0A2018-12-24%202019-1-13%20anydown%E3%81%AE%E9%96%8B%E7%99%BA(1)%0A2018-12-31%202019-1-3%20%E5%B8%B0%E7%9C%81%0A2019-1-3%202019-2-13%20anydown%E3%81%AE%E9%96%8B%E7%99%BA(2)/gantt.svg https://svg-render.firebaseapp.com/?source=2018-12-14%202018-12-24%20Scrapbox%E7%94%A8%E3%82%AC%E3%83%B3%E3%83%88%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%0A2018-12-24%202019-1-13%20anydown%E3%81%AE%E9%96%8B%E7%99%BA(1)%0A2018-12-31%202019-1-3%20%E5%B8%B0%E7%9C%81%0A2019-1-3%202019-2-13%20anydown%E3%81%AE%E9%96%8B%E7%99%BA(2)
上記の図をクリックして、出てきたリンクへ飛ぶと、エディタに遷移します。
エディタで「開始日 終了日 タスク名」を半角スペース区切りで入力するとタスクを増やせます。
https://gyazo.com/d2b7b4115da2d2fe7a3643378e95f616
面倒ですが、編集後は貼り付けコードを取得し、再度Scrapboxに貼り付ける必要があります
（URLにすべての情報を保存しているため）
売り
ただの画像とは違い、ちゃんと現在日に応じて図が動的に変わる
現在日が赤線で表示されている
利用技術
SVG（ScrapboxにはSVGを埋め込める）
Firebase Hosting
エディタ
Firebase Functions
SVGのレンダリング用
Getリクエストが来るごとに再Renderしています（現在日時に応じて表示を変えるため）
Chromeでしか動作確認してませんし、IEやSafariでは確実に動きません
開発動機
/daiiz/今日が面白かったので、SVGを使ってScrapbox用に便利なものを書きたかった ガントチャート自体はHackMD + mermaidで運用していたものの、見やすさなどに不満があった
長期予定をざっくり見るために使っていた（短期予定はGoogle Calendarで管理しているので不要）
https://gyazo.com/4842161b5cd602923b4575bdba6498a3
Scrapbox上で見れると便利そうなので作った
そのためGanttdown for Scrapboxでは表示範囲は過去1ヶ月 + 未来3ヶ月のみで固定
ガントチャートの開発経験はanydownで経験していたので、まぁできると踏んだ 作ってみての感想
imgタグでのSVGの使い方全然わかってなかった
インラインSVGのノリで書くと全然表示されない
ポイント
Contents-Typeきちんとセットすること
xml宣言ちゃんと入れること
属性すべてに引用符を忘れないこと
font-sizeを明記すること
勉強になった
本当はScrapbox SQUAREで人に見せたかったけど間に合わなかった
タイムゾーン周りでとちってるような気はするけどまぁいいや
サーバサイドのコードかなり汚いけどリファクタする気にならない、今思うとTSで書けばよかったかな
他、こんなこともできそう
天気とかを表示したりもできると思う（外出予定を決めるときに便利かも）
他にSVGでできそうなネタ
Scrapboxにグラフを埋め込む（株価とか）
図を埋め込む（ブロック図みたいなのとか）
Nice to Have
人によっては表示範囲の変更を行いたいかも
個人的なニーズにはないので、必要な人がいたらプルリクください
URLの再貼付けを不要にできたら便利そう
別途ストレージが必要になるのでちょっとめんどい
firestoreとか使うと表示速度に影響が出てしまいそう
タスクのドラッグ＆ドロップがしたいとか言われそう