Scrapbox Advent Calendar 2018の15日目です。

#SVG で #ガントチャート

上記の図をクリックして、出てきたリンクへ飛ぶと、エディタに遷移します。

エディタで 「開始日 終了日 タスク名」 を半角スペース区切りで入力するとタスクを増やせます。

面倒ですが、編集後は貼り付けコードを取得し、再度Scrapboxに貼り付ける必要があります

（URLにすべての情報を保存しているため）

売り

ただの画像とは違い、ちゃんと現在日に応じて図が動的に変わる

現在日が赤線で表示されている

利用技術

SVG（ScrapboxにはSVGを埋め込める）

Firebase Hosting

エディタ

Firebase Functions

SVGのレンダリング用

Getリクエストが来るごとに再Renderしています（現在日時に応じて表示を変えるため）

Chromeでしか動作確認してませんし、IEやSafariでは確実に動きません

開発動機

/daiiz/今日が面白かったので、SVGを使ってScrapbox用に便利なものを書きたかった

ガントチャート自体はHackMD + mermaidで運用していたものの、見やすさなどに不満があった

長期予定をざっくり見るために使っていた（短期予定はGoogle Calendarで管理しているので不要）

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とか使うと表示速度に影響が出てしまいそう

タスクのドラッグ＆ドロップがしたいとか言われそう

anydownではできるのでそっちでやって