Novelというブロックエディタでコラム投稿を効率化！
定型コンテンツと自由記述の違い
当社のホームページはNext.jsとSupabaseで構築しています（経緯については前回のコラム「自社ホームページをゼロからリニューアルした話」をご覧ください）。
広告物件や制作事例の登録は、あらかじめ決められた入力項目をフォームに沿って埋めていく形式なので、管理画面の実装は比較的シンプルでした。
タイトル、画像、カテゴリ、位置情報――必要なフィールドを並べて、データベースに保存すれば済みます。
ところが、お知らせやコラムのような「自由に文章を書く」コンテンツとなると話が変わってきます。見出しを入れたい、途中に画像を挟みたい、リンクやリストも使いたい。テキストエリアに文章を流し込むだけでは、まともに読めるコンテンツになりません。かといって、毎回HTMLを手打ちするのも現実的ではないですし、そもそもそれでは管理画面を作った意味がなくなってしまいます。
WordPressでいうところのブロックエディタ、あるいはNotionのような直感的な編集体験を、自前のサイト内に組み込みたい。そこで導入したのがNovelというオープンソースのエディタです。
Novelって何？ ― 海外では主流、日本ではほぼ無名
Novelは、TiptapというリッチテキストエンジンをベースにしたReact向けのエディタコンポーネントです。Notionライクな操作感が特徴で、npmパッケージとして提供されているため、既存のNext.jsプロジェクトに組み込むことができます。
実はこのTiptapというエンジン、AIで調査してみたところ、海外ではかなりの規模で使われているようです。
GitHubでのスター数は33,000以上、npmでの月間ダウンロード数は1,280万回。採用企業にはLinkedIn、Substack、Axios、KPMG、Thomson Reutersといった名前が並びます。ニュースレター配信で知られるSubstackのエディタや、ビジネスSNSのLinkedInの投稿画面にもTiptapの技術が使われているわけです。
Novelはそのtiptapに、Notionのような操作感を被せたパッケージで、GitHub上では15,000以上のスターがついています。海外のNext.js界隈では、自前のCMSやブログにNovelを組み込む事例は珍しくありません。
ところが、日本語の情報となるとほぼ皆無です。Tiptapの基本的な使い方を解説した日本語記事は数本ありますが、Novelパッケージそのものを取り上げた記事は、調べた限り見当たりませんでした。WordPressのプラグインやテーマの情報が溢れている日本のWeb制作界隈とは、完全に別の世界です。
日本で知られていない理由は単純で、WordPress以外の選択肢を探す人がまだ少ないからだと思います。ただ、海外の採用実績を見ると、技術として未熟なわけではなく、むしろ日本に入ってきていないだけ。WordPressの次を考えている方には、知っておいて損のない存在です。
Novelが標準で持っている機能
Novelの良いところは、パッケージを導入するだけで基本的なリッチテキスト機能が一通り揃うことです。具体的には以下のような機能が標準で使えます。
- 見出し（H1〜H3）
- 箇条書きリスト、番号付きリスト
- タスクリスト（チェックボックス付き）
- 引用ブロック
- コードブロック（シンタックスハイライト付き）
- インラインコード
- 太字・斜体・下線・取り消し線
- テキスト色の変更
- 水平線
- リンクの挿入
- 画像の挿入（ドラッグ&ドロップ対応）
- YouTube動画の埋め込み
- ブロック単位のドラッグ&ドロップ並び替え
- スラッシュコマンド（`/`キーで各種ブロックを呼び出す仕組み）
これだけ見ると「入れるだけで完成するのでは」と思うかもしれませんが、実際にはそう単純でもありません。
↑編集画面は、こんな感じです。
標準では足りない部分 ― 自分で繋ぐ必要があるもの
Novelが提供しているのは、あくまで「エディタとしての見た目と操作感」です。実際にサイトの中で使えるようにするには、いくつかの部分を自分で実装する必要があります。
まず、画像のアップロード先です。Novelはエディタ上に画像をドロップする機能は持っていますが、「その画像をどこに保存するか」は面倒を見てくれません。当社のサイトではクラウドストレージに自動的にアップロードされるよう、独自の接続処理を書いています。
次に、UIの日本語化。スラッシュコマンドで表示されるメニュー項目や、プレースホルダーのテキストは、デフォルトでは英語です。これを日本語に差し替える作業も必要でした。
さらに、当サイトでは独自のブロック拡張も追加しました。たとえば「リンクカード」という機能。URLを入力すると、そのページのタイトルやサムネイル画像を自動取得して、カード形式で表示するブロックです。これはNovelの標準にはない機能で、プレビュー用のAPIも含めて独自に実装しました。
まとめると、Novelの導入は「パッケージを入れて終わり」ではなく、「エディタの土台はもらって、自分のサイトに合わせた配線をする」という作業が必要になります。逆に言えば、そこに手を入れられるからこそ、業務に合った柔軟なエディタが手に入る。既成品のCMSでは難しい、まさに「自分たちのニーズに合わせたエディタ」が実現できるわけです。
データの保存形式について
少しだけ技術的な話になりますが、データの保存形式についても触れておきます。
Novelで作成したコンテンツは、エディタの内部構造をそのまま活かしたJSON形式で保存しています。見出し、段落、画像、リストといったブロックの情報が構造化されたデータとして残るため、表示側での加工や、将来的にエディタを入れ替えた際の移行も比較的スムーズです。HTML文字列として保存する方法もありますが、後々の柔軟性を考えてJSON形式を選びました。
書き味が投稿のハードルを決める
実際に運用してみて強く感じるのは、エディタの書き味が投稿のハードルに直結するということです。管理画面がどれだけ整っていても、肝心の入力体験がストレスフルだと記事を書く気にならない。Novelの導入でその部分が大きく改善されました。
スラッシュコマンドで必要なブロックをサッと呼び出して、文章を書いて、画像を放り込む。このリズムが崩れないことが、地味に大事です。
まさにこの記事自体が、そのNovelエディタで作成した実例でもあります（笑）。
おわりに
Novelは、日本ではまだほとんど知られていないエディタです。情報が少ない分、導入のハードルは決して低くありません。ただ、Next.jsで独自のサイトやCMSを構築している方、あるいは「WordPressの次」を模索している方にとっては、検討する価値のある選択肢だと思います。
導入時の具体的な設定やつまずいたポイントについては、また別の機会に書ければと思っています。
