<p><a href="https://hatenablog.com/">はてなブログ</a>のMarkdownによる記事編集画面や<a href="https://esa.io/">esa - 自律的なチームのための情報共有サービス</a>のように、本文の編集画面とリアルタイムプレビューが横並びになるような投稿フォームが個人的に好みです。</p>
<p>ですが、ブログで使っている<a href="https://microcms.io/">microCMS</a>の投稿画面や、普段使っているマークダウンエディターの<a href="https://obsidian.md/">Obsidian</a>にはプレビューを横並びにするようなオプションが無かったため、自分で記事を投稿するためのフォームを作ってみました。</p>
<p>技術スタックとしては次の通りです。仕事では使っていないものばかりですが、いろいろ使ってみたかったものを揃えてみました。</p>
<ul>
<li><a href="https://lexical.dev/">Lexical · An extensible text editor framework that does things differently</a></li>
<li><a href="https://headlessui.com/">Headless UI - Unstyled, fully accessible UI components</a></li>
<li><a href="https://ja.vitejs.dev/">Vite | 次世代フロントエンドツール</a></li>
<li><a href="https://vitest.dev/">Vitest | A blazing fast unit test framework powered by Vite</a></li>
<li><a href="https://zustand-demo.pmnd.rs/">Zustand</a></li>
</ul>
<p>実際の記事投稿画面は次の通りです。</p>
<p><img src="https://blog-assets.kubosho.com/instant-blog-post-form.png" alt="記事の投稿フォームのスクリーンショット"></p>
<h2>備えている機能</h2>
<p>今回作った投稿フォームの特徴は次の通りです。</p>
<ul>
<li>ページの左側に本文編集フォームがある</li>
<li>ページの右側にリアルタイムプレビューがある</li>
<li>下書き状態・公開状態の切り替えが可能
<ul>
<li>ただmicroCMSはPOST APIにクエリーを付けたい場合は<a href="https://microcms.io/pricing">Teamプラン</a>以上の契約が必要になる……（作った後の動作確認で気づいた）</li>
</ul>
</li>
<li>ページを再読み込みしてもタイトル・URLのパス・本文の状態が保持される</li>
</ul>
<h2>これから作りたい機能</h2>
<p>いま考えていることとして、次に挙げる機能を作りたいと思っています。</p>
<ul>
<li>記事を投稿するときに確認画面を表示する</li>
<li>記事の投稿が完了したら完了と分かるような表示を追加する</li>
<li>記事の投稿に失敗したら失敗と分かるような表示を追加する</li>
<li>タグの追加ができる</li>
<li>カテゴリーの追加ができる</li>
<li>プレビュー画面のスタイルを<a href="https://blog.kubosho.com/">https://blog.kubosho.com/</a>と同じものを適用する</li>
<li><a href="https://github.com/fukayatsu/esarea">fukayatsu/esarea</a>やesaの本文編集フォームのように、tabキーやenterキーを押したときにマークダウンの記法が自動で挿入される</li>
<li><a href="https://textlint.github.io/">textlint · The pluggable linting tool for text and markdown</a>を導入して、記事を書いているときにエラーを出す</li>
<li>何かしらのホスティングサービスにアップロードして、いろんなデバイスからアクセスできるようにする
<ul>
<li>認証機能を作る必要がある</li>
</ul>
</li>
<li>本文編集部分とプレビュー部分のスクロール同期をする</li>
<li>Vimモード</li>
<li>画像アップロード</li>
</ul>
<h2>まとめ</h2>
<p>もしこの記事を見て良いなと思ったら、リポジトリへのstarとwatch登録お願いいたします。</p>
<p><a href="https://github.com/kubosho/instant-blog-post-form">kubosho/instant-blog-post-form: Blog post form for https://blog.kubosho.com.</a></p>

学ぶ、考える、書き出す。

タグ「フォーム」の記事一覧