ポートフォリオページ
ポートフォリオページ
小幡 十矛（Obata Tomu）｜価値を共創するエンジニア・アプリ開発・新規事業立ち上げ・ブランドづくり/📝小幡 十矛（Obata Tomu）の技術・ビジネスブログ｜iOS・Notion・価値を共創するエンジニアの知見/📝 記事一覧/ノート共有型SNSの投稿フォーム実装【後編】Quillのテーマ設定とカスタマイズテクニック

ノート共有型SNSの投稿フォーム実装【後編】Quillのテーマ設定とカスタマイズテクニック

ノート共有型SNS『eeNotes』の投稿フォームにQuillを導入！テーマの違いやカスタマイズの工夫、タグの変更方法などを詳しく解説。
前回の続きです📝
ノート共有型SNSの投稿フォーム実装【前編】react-quill選定の理由とカスタマイズポイント2024/6/5 23:272025/3/4 0:17

テーマについて

Quillには、BubbleとSnowというテーマがあります。

Bubbleテーマ

 と指定すると以下のような表示になります。Bubbleテーマの特徴は、文字を選択した時にホップアップ表示で当てるスタイルを選ぶことが出来る点です。
Bubbleテーマの様子 | Bubbleテーマの様子
Bubbleテーマの様子 | Bubbleテーマの様子

Snowテーマ

 と指定すると以下のような表示になります。私たちは、文字選択時にはマーカー機能を実装したかったこともあり、こちらのテーマを選定しました。
Snowテーマの様子 | Snowテーマの様子
Snowテーマの様子 | Snowテーマの様子

デフォルトのタグを変更する方法

Quillのデフォルトのタグはで記述されています。
任意のタグに変更する場合は、以下の設定を追記すれば良いです。
  • Config/quill.js
私たちのプロジェクトでは、Quillの設定ファイルをに記述しています。
そして、divタグに変換したUI要素に対して以下のようなコードでCSSを当てています。デフォルトでは行間が狭く窮屈な感じだったためを指定したりしています。
 
  • スタイル定義
  • スタイルを適用

空段落が挿入される問題について

Quill Version: 1.3.7において、編集した文字列のDOMを更新した際などにといった空段落が挿入されてしまう問題がありました。
以下の設定を追記することで解決出来ます。
  • Config/quill.js
参考

Quillに関するリポジトリ紹介

Quillに関するリポジトリが列挙されています。

Quillの形式変換module郡

さいごに

QuillはGitHubに公開されているmoduleも含めるとカスタマイズ性はかなり高く、良いライブラリだという所感です。最後まで読んでいただきありがとうございました😄

おまけ

eeNotesのチームメンバーがそれぞれ記事を書いてくれているので、ぜひ見てみてください！
インフラ基盤構成については @_tetsuya28 が
サーバーサイドについては @kozamurai が
フロンドエンドについては @schktjm が
チーム開発の流れについては @assassinEng が
関連記事：
ノート共有型SNSの投稿フォーム実装【前編】react-quill選定の理由とカスタマイズポイント2024/6/5 23:272025/3/4 0:17ノート共有型SNSの投稿フォーム実装【後編】Quillのテーマ設定とカスタマイズテクニック2024/6/5 23:272025/3/4 0:18テキストエディタライブラリ比較【前編】react-quill & Editor.jsの特徴と選定ポイント2024/6/5 23:272025/3/4 0:15テキストエディタライブラリ比較【後編】PELL & trixの特徴と選定ポイント2024/6/5 23:272025/3/4 0:13
小幡 十矛（Obata Tomu）｜価値を共創するエンジニア
東京を拠点に、アプリ開発・新規事業立ち上げ・ブランドづくりに取り組んでいます。
2021年にサイバーエージェントへ新卒入社後、ABEMA Live や AmebaブログのiOSアプリ開発を担当。
現在はフリーランスとして、複数の新規プロダクトやリアル店舗の立ち上げに挑戦中です。
🎯 Mission｜人の挑戦を加速する仕組みをつくる ── アイデアを形にし、前に進める“土台”や“場”を共創する
📌 「リアルな場 × デジタル」の可能性を探求し、新しい挑戦が生まれる土壌を育てる
🔹 エンジニアリング × ビジネスの視点から、アイデアを形にし、成長を支えていく
🔹 実店舗オーナーを目指し、オーダースーツ・ドライヘッドスパ・セレクトショップの複合店舗の立ち上げにも挑戦中
👥 特に、社会人1〜5年目くらいで
「やりたい気持ちはあるけど、最初の一歩に迷っている」方へ。 「自分の可能性をもっと広げたい」 「モヤっとしたアイデアがあるけど、どう進めていいかわからない」 そんなフェーズにいる方と、一緒に考えたり、手を動かしたりできたら嬉しいです。
🌱 「挑戦したい20代」との出会いも、大切にしています。 「ちょっと話してみたいな」くらいの気持ちで、気軽に声をかけてもらえたら嬉しいです！🙌
📷 Instagram（リアルイベントや趣味の発信中心）： https://www.instagram.com/tomu28creator
🌐 詳しいプロフィールはこちら https://obata-tomu.jp/
Xでポスト
小幡 十矛（Obata Tomu）｜価値を共創するエンジニア・アプリ開発・新規事業立ち上げ・ブランドづくり/📝小幡 十矛（Obata Tomu）の技術・ビジネスブログ｜iOS・Notion・価値を共創するエンジニアの知見/📝 記事一覧/ノート共有型SNSの投稿フォーム実装【後編】Quillのテーマ設定とカスタマイズテクニック