見出し画像

エンジニアが気持ちよく記事を書けるエディタを考える

エンジニア向けのエディタを開発する機会がありましたので、エンジニアが気持ちよく記事を書けるエディタを設計する上で何に気をつければいいのか、既存のサービスを参考に考えていきます。参考にしたサービスは以下の4つです。

・ medium
・ note
・ Qiita
・ はてなブログ

1. マークダウンで書ける

エンジニアはドキュメントを書くときやチャットでコミュニケーションをするときなど仕事上でマークダウンを使うことが多々あります。普段から使い慣れているマークダウンで書けるのは非常に重要です。

またエンジニアが記事を書くとき、コードを載せたいときがあります。マークダウンだとバッククォートを使えば簡単にシンタックスハイライトが適用されるので、非常に便利です。

2. コードブロックが使える

今私が記事を書いているnoteはコードの埋め込みができます。

例えばこんな感じです。

(1..10).each do |num|
  puts num
end

マークダウンで書けるかコードブロックが使えないとコードの記載ができないので、技術的な記事を書くのは非常に難しくなります。なのでどちらかの機能は必須でしょう。(個人的にはマークダウンで書ける方が好きです。)

3. エディタとプレビュー画面を行き来する必要がない

マークダウンで記事を書いてるときマークダウンがどのようなHTMLに変換されるか、プレビューを見ると思います。ただプレビューを見るために別の画面に遷移したりしないといけないのは少し手間だなと感じてしまいます。 Qiitaのようにリアルタイムでプレビューを見ながら書けるとストレスなく書くことができます。

ただ普段からマークダウンで書き慣れている人にとっては脳内でHTMLに変換できるのでプレビューはいらないという意見もあり、プレビュー機能の表現方法に関してはまだまだ検討の余地がありそうです。

4. 画面の幅に無駄な要素がない

リアルタイムでプレビューを見るために一画面にエディタとプレビューの両方を表示させるとします。そうすると、エディタは画面の半分になります。

もし上記の画像にサイドバーがあった場合、エディタの幅が小さくなってしまい記事を執筆しづらくなるので、無駄な要素は省いた方が良さそうです。

5. 現在考えている開発しようとしているエディタの草案

以上のことを踏まえてエンジニアが気持ちよく記事を書けるエディタのワイヤーを作成しました。

左側の大きなフォームがエディタで、右側がプレビューになります。

Qiitaをベースにワイヤーを作成しています。Qiitaが投稿のSubmitボタンが右下にあるのに対して右上に設置した理由は、よりエディタとプレビューの高さを保つためです。もし右下に設定する場合、Submitボタンのためだけにエディタの高さが小さくなります。

また左側のエディタに何も入力していない場合、マークダウン記法のヒントを表示するようにしています。(これもQiitaを参考にしています)

まとめ

・ マークダウンで書ける
・ リアルタイムでプレビューを見ることができる
・ 画面の幅いっぱいにエディタとプレビューが表示される

全体をまとめると、上記の3点を意識することでエンジニアが気持ちよく記事を書けるエディタを設計することができるのではないかと考えました。

最後に上記の3点以外にも必要な機能や設計、ワイヤーのフィードバックやご意見を頂けるとすごく嬉しいです。

この記事が気に入ったらサポートをしてみませんか?