Scrapbox APIで遊ぶ話
遊ぶ話です
※scrapbox user meetupでプレゼンしたもの
だれ？
hashrockといいます
scrapboxユーザ
プログラマー(Vue.js / TypeScript)
作ったもの
maildown
メモツールの遍歴
紙copi
Nami2000
自作wiki
Simplenote
Trello
wri.pe
scrapbox
趣味
作曲
お絵かき
関連するツールを作ること
Scrapboxに埋め込んで遊びたい
できるのだろうか…
という話はおいといて本題
scrapboxのAPIで遊ぶ話
API
いつの間にか公開されていた /help/API
ページデータを取得するAPI
ページリスト
/api/pages/:projectName ページ
/api/pages/:projectName/:pageTitle ページ本文
/api/pages/:projectName/:pageTitle/text ページタイトル画像
/api/pages/:projectName/:pageTitle/icon 何を作ろうか？
「散らかってる方が使いやすい」説
部屋を片付けない人の言い訳としてよく登場
筆者もよく言う
場所記憶はすごいらしい
本当か？
検証してみよう
使うAPI
ページ一覧APIを使う
/api/pages/:projectName ページリストAPI
見れば分かる感じ
ページリストAPI（１件）
作成方針
タイトルが取れるのでd3.jsに突っ込む
取れてきたタイトル１件 ＝図形一つ に変換して画面に表示
CORS越えるの大変
ローカルにJSONを保存してプロトタイピング
保存
ドラッグ終了時に座標をlocalStorageに保存
localstorage.js function setItemPosition(id, x, y){
local[id] = {}
local[id].x = x
local[id].y = y
}
function saveItems(){
localStorage.sbdrag = JSON.stringify(local)
}
function dragended() {
setItemPosition(d3.event.subject.id, d3.event.subject.x, d3.event.subject.y)
saveItems()
// ...
}完成
よさそうなところ
いろがいっぱいついてて楽しい
ドラッグ＆ドロップができておもしろい
いいのか悪いのか
散らかった部屋を片付けてる気分を体験
「部屋を片付けていたら、気づいたら漫画読んじゃう」案件が発生
ダメな所
ぐっちゃぐちゃ
Windowsの汚いデスクトップを彷彿とさせる
考えるまでもなく探しづらい
タグとか反映されてない
ページ1000件とかあると破滅
改善案
さらに場所記憶を有効に使おう
北海道に飯情報を置くなど
まとめ
scrapboxのAPIは素直で使いやすい
もっと遊ぼう
scrapboxの一覧がこんな感じじゃなくてよかった
ありがとう、scrapbox