kondoumh のブログ

- とあるソフトウェアエンジニアのめったに更新されないブログ -

ストック情報サイトを Tumblr から Scrapbox に移行した話

Tumblr での運用

3年近く前、Tumblr にストック情報サイトを構築しました。

blog.kondoumh.com

stock.kondoumh.com

ブラウザで気軽に更新でき、ページの見栄えもそれなりで、タグ付けも簡単、API で可視化も可能…ということでわりと満足して使ってました。

しかし、記事の編集機能に関しては結構不満がありました。

Tumblr のエディタは OS 標準のキーバインドを乗っ取ってしまいます。macOS だと Emacs ライクなキーバインドが使えるはずなのに効かなくて書いてて突っかかります。

ダッシュボード(タイムライン)にモーダルでオーバーレイされるダイアログ内でのエディタのため、長文を書くのに向いていません。

Tumblr では Markdown が使えるのですが、画像挿入の GUI はリッチテキストモードでしか提供されておらず、Markdown モードで画像を挿入するには、最初にリッチテキストモードにしておいて画像をインラインでアップロードし、その後 Markdown モードに切り替えるとアップロードされた画像の URL が使えるというハックめいた操作が必要です。

元来 Tumblr は他サイトの画像や文章を引用してキャプションや出典など簡単な情報を付加してポストすることに特化したサービスです。したがってゼロから文書を作成するというユースケースのサポートは薄く、エディタや Markdown は二級市民扱いなのでした。

とはいえ、他に目的に合うサービスもなくて数年間使い続けてました。

Scrapbox への移行

Scrapbox は去年ぐらいから存在は知ってました。Dropbox の Paper と同様なモダンな Wiki かなという印象でした。最近 Scrapbox にブログを移行したりする人をちらほら見かけます。Scrapbox のプロジェクトの見た目は Tumblr のアーカイブ画面を思わせます。それで、ストック情報サイトを移行すればいいのではないかと思いつきました。

まずは、ガジェットに関する記事を Tumblr から Scrapbox に手動コピペで移行してみました。

WYSIWYG 編集可能

Scrapbox は閲覧モードと編集モードがシームレスな WYSIWYG 編集を可能にしており、Tumblr を始めとする一般的なブログツールの、編集 -> プレビューの繰り返しステップが不要です。画像やリンクなどの要素はインラインで編集状態になり、カーソルが移動すると閲覧モードになります*1。記事を読み返しながら気になったところをすぐに修正できるのがいいですね。他の人のページでもインライン編集モードで記法を確認できて参考になります。何しろ書くことの心理的障壁が低くなります。

同一タグの投稿がリアルタイムにリンクされる

記事内に #tagname を書くだけで、同一タグの既存の投稿がダイナミックにリンクとして出てきます。既存記事へのリンクも簡単に貼れます。 これも Scrapbox のキラー機能と言えるでしょう。

Emacs キーバインドを有効化できる

Edit Profile -> Extension で Emacs Key Binding を指定すれば、有効化されます*2。 プラグインで拡張できるため、拡張機能が充実してくればさらに快適な執筆環境が構築できそうです*3

画像の挿入が簡単

画像の挿入は、ファイルのドラッグ&ドロップでも、クリップボード経由でも簡単にできます*4。Gyazo サービスと連携しているようです。

gyazo.com

Markdown よりもシンプル
  • 箇条書きはインデントのみ
  • Table 書式もインデント + tab のみ*5*6
  • 見出しは * が多いほうが上位となり、既存の Wiki 記法の逆

独自マークアップも、これぐらいシンプルであれば、ヘルプを開く頻度が低くてちょうどいいです。

blog.kondoumh.com

Markdown には、URL のリンクはありますが、Wiki では普通のサイト内の他ページへのリンクはないため、Square branckets ([]) によるマークアップも妥当なところかと。

数式機能

今回、使ってないですが、TeX 記法で数式も扱えます。

増井先生からメンション頂きました。

API / 拡張

Scrapbox にも投稿タイトルや本文を取得する API が公開されていますが、タグを取得する API があるといいなと思います。

scrapbox.io

ブックマークレットなど色々な使いこなし Tips が纏められています。

scrapbox.io

プロジェクト単位の投稿管理

Scrapbox にはプロジェクトという単位で投稿を管理できます。ストック情報サイトでは、Gadget, Software, Portfolio というメジャータグを混在ポストしてました。Scrapbox ではテーマごとにプロジェクトを作った方が管理しやすく、ポータルも見やすくなりそうということで、個別にプロジェクト化することにしました。

scrapbox.io

プロジェクト内の投稿を一つ選んで Pin at home しておくと、プロジェクトのページ情報を oEmbed として取得してブログ等に埋め込み可能になります。

手動以外の移行方式

Scrapbox は JSON によるデータインポートが可能ですが、Tumblr はデータエクスポート機能がないので、今回は手動コピペしました。プロジェクトの Settings -> Page Data から Scrap to <プロジェクト名> という名前のブックマークレットが取得できます。これを使うと Web ページのリンクや選択範囲のテキストを引用として取り込むことができます*7

纏め

ということで Tumblr よりも書くことそのものが格段に快適で楽しい Scrapbox に移行しました。まだ全投稿を移したわけではありませんが元サイトの更新は止めて徐々に更新していこうと思います。

*1:他の人の投稿でも同じ動きをしますが、編集権限がなければ内容を上書きする心配はありません。

*2:Windows では C-n が 新規ページを開くコマンドに負けてしまいますが

*3:現状でも十分快適ですが。

*4:クリップボード経由の実装は画像の URL を使っているのか、イメージをそのままアップロードしているのかまでは調べていませんが。

*5:作った表は CSV ファイルとしてダウンロード可能です。

*6:Excel や既存の Wiki などからクリップボード経由で貼り付けても簡単に作表できます。

*7:現状では画像まで取り込むことはできないため、移行には適していません。