記事投稿 連続100回以上している 私専用執筆環境Webアプリ

個人サイトリニューアルを機に、記事を書く執筆環境Webアプリを用意しました。
以下は、個人サイトリニューアルのブログ記事です。

個人サイトをリニューアルしました！

個人サイトをリニューアルしました！🎉 https://silverbirder.github.io リニューアルは、今回で6回目です。制作期間は、去年の12月27日から今年の1月28日までの約1ヶ月間です。個人的には最速の開発期間でした。AIの力は偉大ですね。本記事では、個人サイトのリニューアルでこだわったポイントについて紹介します。

silverbirder.github.io

本記事では、執筆環境がどのようなものか簡単に紹介します。

入力とプレビュー

入力画面は、シンプルにタイトルと本文エリアとなっています。

プレビュータブをクリックして、ブログ記事デザインのプレビューができます。

こだわりとしては、 あえて入力とプレビューを同じにしませんでした。
書いている時は文章を練るのに集中し、プレビュー時は読み手として集中したいからです。
これを同時にしてしまうと、書き手の思考と読み手の思考が混ざってしまって個人的に苦手だったからです。

画像アップロード

入力画面に簡単な画像アップロード機能をつけています。
画像を本文へドラッグアンドドロップするだけで、Cloudinary へアップロードされ Markdown の画像記法に更新されます。
これで、 手軽に画像をブログ記事へ埋め込むことができるようになりました！ 🎉

詳細設定

右上の詳細設定には、いくつかの機能を用意しています。

※ パネルが変に丸っぽくなってるのはご愛嬌。
私だけの用途なので、気にしていません。

前提

私のブログ記事は、GitHubのリポジトリに Markdown として管理しています。

公開日

いつ公開するかを Markdown のメタデータとして登録しています。
公開日の日付を選択することで、いつ公開したかという印になります。
あまり役には立っていません。

タグ

"フロントエンド" や "テスト" などのタグ情報を Markdown のメタデータとして登録しています。
全てのブログ記事のメタデータからタグ情報を抽出し、コンボボックスとして表示しています。
これのおかげで、微妙なタグ名の違いなどがなくなりました。
タグの一覧が見えるので この記事はどのタグに近しいかな？と考えれるようなりました。👍
もちろん、タグの追加もできます。

登録したタグは、以下のページの絞り込みセクションの中に表示しています。

• https://silverbirder.github.io/blog/

連携

個人サイトのブログ記事を、Zennやはてなブログへ投稿することがあります。
連携にチェックを入れると、個人サイトのブログ記事をnoindexとして登録するようにします。
記事の二重公開を防ぐためです。
その上で、各サイトへ下書きの状態で記事投稿できるようにしています。

Zenn へ連携する場合は、 Zenn 用のリポジトリを用意しているので、そこへ Pull Request を建てるようにしています。
Zenn では GitHub 連携機能があるため、その方針に従ったためです。
詳細設定では、Zenn 用に tech や idea を指定できるようにしています。
Zenn の絵文字やタグについては、Zenn 側の画面で操作しています。

はてなブログ へ連携する場合は、 はてなのブログ記事を投稿するAPIを使って直接記事を下書きの状態で送信します。
送信が完了すると、プレビューページを開くようにしています。
プレビューで記事を読みつつ、はてなブログ専用の埋め込みコンテンツを手動で修正しています。
公開日の設定やXシェアも手動で設定しています。

これらの連携のおかげで、 各サイトへの記事投稿の操作が随分と減りました。
ちょっとした手間が減るだけで、書くモチベーションを高く保てます。

Pull Request作成

入力した情報を元に、私の個人サイト用リポジトリへ Pull Request を建てるようにします。
このボタン操作時において、 GitHub 認証を通すようにしています。
それ以外は、このページへのアクセスは認証なしでできるようにしています。
Pull Request 作成ボタンをクリックすると、そのまま画面更新が掛かり自動的に Pull Request 作成されます。

Pull Request が作成されると、 Pull Request のページが別タブで開くようになっています。
ただあまりPCからPull Request ページを確認することはなく、スマホのGitHub アプリからプレビューリンクを踏んでチェックして、マージ→リリース としています。

下書き保存

ローカルストレージに下書き保存できるようにしています。
また、PCとスマホで下書き保存を共有したかったので、下書きデータに Gist を使うようにしました。

下書きを Push ボタンを（別ページで）用意しているので、下書きデータを Gist に送信します。
これは、主にスマホからの操作になります。

Push した下書きを Pull して Gist 削除する 下書きを Pull ボタンも用意しています。
これをクリックして、PC に下書きデータを取り込みます。

こうすれば、 DB不要で下書き共有ができました。
外出中で、執筆アイデアが湧いてきた際にささっと書けるようになりました。
書き溜め大事ですね。

リンクテキスト更新

Markdown 本文中にリンクを挿入することはよくあります。
例えば、[https://developer.mozilla.org/ja/](https://developer.mozilla.org/ja/) と書いたとします。
このリンクを [MDN Web Docs - developer.mozilla.org](https://developer.mozilla.org/ja/) と置換してくれる機能です。

地味に便利な機能です。
私は普段リンクを対象ページのタイトルとホストを調べて置き換えていました。
この作業がなくなったので、ずいぶん捗ります。

終わりに

他には、 Markdown Lint を入力テキストへ実行して修正を反映する機能を入れていました。
期待する挙動にならなかったので、外しました。笑
この執筆環境のおかげで、かなり楽に記事を書くことができています！
ご参考にしてください！