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

学習し、自分なりに噛み砕いて、書き出すブログ。

ブログ記事を投稿するためのフォームを作った

はてなブログのMarkdownによる記事編集画面やesa - 自律的なチームのための情報共有サービスのように、本文の編集画面とリアルタイムプレビューが横並びになるような投稿フォームが個人的に好みです。

ですが、ブログで使っているmicroCMSの投稿画面や、普段使っているマークダウンエディターのObsidianにはプレビューを横並びにするようなオプションが無かったため、自分で記事を投稿するためのフォームを作ってみました。

技術スタックとしては次の通りです。仕事では使っていないものばかりですが、いろいろ使ってみたかったものを揃えてみました。

実際の記事投稿画面は次の通りです。

記事の投稿フォームのスクリーンショット

備えている機能

今回作った投稿フォームの特徴は次の通りです。

  • ページの左側に本文編集フォームがある
  • ページの右側にリアルタイムプレビューがある
  • 下書き状態・公開状態の切り替えが可能
    • ただmicroCMSはPOST APIにクエリーを付けたい場合はTeamプラン以上の契約が必要になる……(作った後の動作確認で気づいた)
  • ページを再読み込みしてもタイトル・URLのパス・本文の状態が保持される

これから作りたい機能

いま考えていることとして、次に挙げる機能を作りたいと思っています。

  • 記事を投稿するときに確認画面を表示する
  • 記事の投稿が完了したら完了と分かるような表示を追加する
  • 記事の投稿に失敗したら失敗と分かるような表示を追加する
  • タグの追加ができる
  • カテゴリーの追加ができる
  • プレビュー画面のスタイルをhttps://blog.kubosho.com/と同じものを適用する
  • fukayatsu/esareaやesaの本文編集フォームのように、tabキーやenterキーを押したときにマークダウンの記法が自動で挿入される
  • textlint · The pluggable linting tool for text and markdownを導入して、記事を書いているときにエラーを出す
  • 何かしらのホスティングサービスにアップロードして、いろんなデバイスからアクセスできるようにする
    • 認証機能を作る必要がある
  • 本文編集部分とプレビュー部分のスクロール同期をする
  • Vimモード
  • 画像アップロード

まとめ

もしこの記事を見て良いなと思ったら、リポジトリへのstarとwatch登録お願いいたします。

kubosho/instant-blog-post-form: Blog post form for https://blog.kubosho.com.

記事を共有する

関連記事

  1. GitHub の Contributions を Ingress の Resistance 色にする Chrome 拡張を作った

    GitHub の Contributions を眺めていて「これって Enlightened の色だよね」と思ったので、Resistance の色に置き換えるような Chrome 拡張を作ってみました。

  2. ブログを国際化対応した

    当ブログのUIで使う文言を国際化対応しました。

  3. AVA上でsinon.useFakeTimers()を複数のテスト内で実行するとエラーが出る

    最近Sinon.JSのバージョンをv14.0.0に上げたときに、エラーが出てテスト実行が失敗するようになりました。

  4. 自分がアクセシビリティ向上に力を入れる理由

    いま自分は、担当サービスのアクセシビリティ向上を推進する「アクセシビリティタスクフォース」を率いる立場になっています(アクセシビリティタスクフォースについては AbemaTV ABEMA iOS版アプリのアクセシビリティ向上支援 | 事例紹介 | 株式会社コンセント で少し触れられています)。