Scrapbox ページ一覧と Graph 可視化のプロト PWA 作成

以前 Scrapbox から API でデータを取得して、ページ間リンクを可視化する (ための Graphviz dot ファイルを吐く) CLI を作成しました。

blog.kondoumh.com

その後 Graphviz よりインタラクティブな可視化ができる技術として D3.js の force simulation を使ったサンプルを作ってました。

まだ色々改善ポイントありますが、ひとまず動いてます。

野良 Scrapbox アプリでは、ページ一覧を作っています。

github.com

これらの機能を PWA にしてモバイルからも閲覧できるようにしたいと思い、プロトタイプの PWA を作りました。

sb-data-kondoumh.netlify.app

github.com

Scrapbox の API は CORS を許可してないのでビルド時にデータ取得してアプリと一緒にデプロイしてます。

一覧画面。野良 Scrapbox アプリと違ってクエリについての制約がなくなったので検索機能とか追加してます。

f:id:kondoumh:20200610222921p:plain

Home と Full List に同じ一覧画面があるのですが、これは Home で最新の更新情報を短いタイムスパンで、Full List で全ページの情報を比較的長めのタイムスパンで更新することを想定しているためです。

2020.11.25 追記) Home に一本化しました。

Graph 表示画面。D3.js の画面を無理やり Vue.js のコンポーネントにして表示してます。

f:id:kondoumh:20200610223306p:plain

About 画面は使用しているテクノロジースタックのリンク集になっています。

f:id:kondoumh:20200610223359p:plain

久々に Vue CLI で PWA をやってみましたが、iPadOS も PWA サポートが進んでます。以前は起動すると Safari のタブが開くだけだったのが、アプリっぽく動くようになりました*1

f:id:kondoumh:20200610230437j:plain

プラットフォーム側の対応が進んでいるのを感じます。

*1:このスクリーンショットは夜間に撮ったのでダークモードになってます。