野良 Scrapbox アプリ - 直リンページャー機能

Scrapbox ページのリンク先をパラパラめくって閲覧するような UI が欲しいという要望がありました。ページ集約用のタグとして使われているページを開いて、リンク先の(そのページをタグに指定している)ページを順番に見ていくような使い方です。

Scrapbox ではリンク先のページが本文の下に並ぶので要らないのでは？と思いましたが、UI の練習問題と思って検討してみることにしました。

まず、ページ毎のリンクですが、直接リンク (1hop links) は API の JSON から relatedPages/links1hop で取れます。例えば、以下のページ

scrapbox.io

の直リンは

{"relatedPages" : 
  {"links1hop": [
      {"id":"5c67490adb266f001783335b","title":"UML"},
      {"id":"5c67490adb266f001783335c","title":"BPMN"},
      {"id":"5c67490adb266f0017833361","title":"DDD"},
      {"id":"5c6783776deb58001725c685","title":"Portfolio"}
    ]
  }
}

のような形で取れます。

さて、リンク先の内容を見るための UI ですが、最初に考えたのは、現在表示しているページのタブ内でリンク先のページを開くナビゲートをすることでした。しかし、通常の画面遷移と同じ扱いになり、ナビゲーションの UI を直感的にわかりやすく作れる気がしませんでした。

そこで、ページ情報やプロジェクトアクティビティを表示するのに使ったモーダルダイアログを使う方法で行くことにしました。

blog.kondoumh.com

最初、ダイアログに WebView を貼り付けてリンク先のページを次々に読み込むようにしてみました。悪くはないのですが、ページ読み込みがもっさりするのと、読み込んだページにもリンクがあって、さらに遷移できてしまうというちょっとカオスな感じになります。

そこで、ページの本文だけをプレーンテキスト*1で取得して表示するようにしてみました。簡素ですが読めなくはありません。先ほどの JSON にはリンク先の概要(本文の先頭数行)も入っています。全文を取得するにはページ毎に API で取得する必要があるため、最初に概要を表示しておいて、全文取得後に置き換えるようにしました(取得データのキャッシュもしてます)。

ページをめくっている途中で、気になるページを後でちゃんと読みたい場合、裏で別タブで開いておく機能もつけました。

f:id:kondoumh:20190811131437g:plain