名前は「ことのは」です。せっかくなので、今回はこのアプリで紹介記事を書いてみることにしました。自分で作ったエディターを、自分で使って紹介するというやつですね。
このブログ自体はAstroとMarkdownで作っています。記事が普通のmdファイルとして残るのは地味に気に入っているんですが、画像や埋め込みを入れようとすると、ちょっと面倒なんですよねー・・・
画像をフォルダに置いて、パス書いて、表示を確認して・・・。文章をちょっと書きたいだけなのに、気づくと画像の置き場所やHTMLを触っている。もう少し気軽に書けるようにしたいなー、と思ったのがきっかけです。
画面構成はこんな感じ
左側が記事一覧、真ん中が本文、右側が記事の設定です。色は淡いグリーンです。長めの記事を書いていても、シンプルで直感的なUIを目指しました。(Bloggerのレイアウトはこんな感じですよね。）
過去の記事を探して開いたり、タイトルやタグを付けたりするのもこの画面でできます。あちこちファイルを開かずに済むのは楽ですね。
普通にMarkdownで書くのと何が違うのか
Markdown自体は便利なんですよね。見出しは「##」、太字は「**」で囲むだけですし、慣れればサクサク書けます。まとめて文字を置換したいときなんかは、今までのエディターの方が向いていると思います。
ただ、画像のパスや長い埋め込みコードが並んでくると、文章がどこで区切れているのか少し見づらくなります。HTMLの間に文章を書いていると、今どんな見た目になってるんだっけ、となることも。
そこで「ことのは」では、見出しや画像を表示した状態で、そのまま文章を編集できるようにしました。文字を選んで太字にする、見出しにする、リンクを付ける、といった操作は上のボタンからできます。
普段やる作業を比べると、こんな感じ。
| やりたいこと | Markdownを直接編集 | ことのは |
|---|---|---|
| 見出し・太字にする | 記号を入力する | 文字を選んでボタンで指定 |
| 画像を入れる | ファイルを置いてパスを書く | ファイルを追加して挿入 |
| タイトルやタグを変える | ファイル先頭の設定を書く | 右側の入力欄で変更 |
| 埋め込みを扱う | HTMLと文章が同じ本文に並ぶ | 埋め込み部分をカードで表示 |
| 保存して公開する | Markdownを保存し、GitHubへ反映 | Markdownを保存し、GitHubへ反映 |
もちろん、コードエディターにもプレビューや便利な拡張機能はあります。どちらが上というより、私がブログを書くときによく使うものを、ひとつの画面に置いておきたかったという感じですね。
保存されるMarkdownも見られます
上にある「編集」「プレビュー」「Markdown」で表示を切り替えられます。
文章を書くのは「編集」、本文の流れを眺めるのは「プレビュー」。で、実際にどんなファイルが保存されるのか気になったら「Markdown」を開きます。
こちらが保存されるMarkdown。タイトルやタグも、ちゃんとファイルの先頭に入っています。
見た目で編集できるのは楽ですが、裏で何が保存されているのか全く見えないのも困るので、ここは確認できるようにしました。なお、このタブは見るだけです。直接書き換える必要があるときは、今までのエディターを使います。
プレビューはこんな感じ。表も確認できます。
ただし、これは本文の簡易プレビューです。公開しているブログのテーマまで再現しているわけではないので、最終的な見た目はブログ側でも確認する必要があります。
ファイルの追加が楽になった
本文にファイルをドロップするか、上のフォルダボタンからファイルを選ぶだけ。ブログのpublicフォルダ内に記事ごとにコピーして、本文にも画像を入れてくれます。自分で保存先を探して、参照パスを書いて・・・という作業をまとめられました。
元の画像はそのまま残ります。この記事に載せているスクショも、実際に「ファイルを追加」から入れています。
画像以外にも、動画や音声、PDFなどを追加できます。（対応形式と容量50MBの制限はあります。）
埋め込みを動かしたら、なぜか増えた話
過去の記事には、サイズを指定した画像のHTMLや、SoundCloudの埋め込みなんかも入っています。こういう部分は元のコードを保持して、カードとして表示するようにしました。
音声の埋め込みはこんな表示になります。設定やコードを触りたいときは、カードの下のボタンから編集できます。
この辺りは、実際の記事を触ってみてから気づくことが多かったです。画像を別の場所へドラッグしたら、移動元にも画像が残っている。下図は修正中のスクショ。
ファイル移動したかっただけなんですが・・・画像が増えてる(;’∀’)
そこを直したら、今度は埋め込みの下に編集用のボタンやナビゲーションバーが何度も出てくる。記事を書いているはずなのに、画面の途中に同じ操作欄がいくつも挟まるのは、さすがに気になりますね。
最終的には、埋め込みはドラッグで移動できるようにして、文章の書式ボタンとファイル追加のナビゲーションバーは上部1か所に固定しました。
保存した記事は、いつものMarkdown
保存は右上のボタンか、⌘Sでできます。保存先も今までと同じ、ブログの記事フォルダです。
このアプリで編集した記事は普通のテキストエディターでも開いて直せます。
ちなみに、保存ボタンを押しただけではブログには公開されません。内容を確認してGitHubへ反映するところは今までどおりです。
しばらくこれで記事を書いてみようと思います
一通り使ってみた感じ、文章と画像を見ながら書けて使いやすい。タイトルやタグも右横で直せますし、ブログ用作業が１画面にまとまっているのは良い。
とはいえ、これだけで何でも編集できるわけではありません。特殊なMarkdown記法や細かいコードの調整は、今までのエディターにも頼ります。使いやすい方をその都度使えば良いかな、と思っています。
あと、自動保存や、アプリが落ちた後に未保存の文章を復元する機能はまだありません。ここはこまめに⌘Sですね。（せっかく書いた文章が消えるのはつらいので・・・）
今のところは、自分のAstroブログに合わせて作ったMac用アプリです。一般配布や自動更新の仕組みまでは用意していませんが、とりあえず記事を書いて保存するところまでは形になりました。