元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

ブログの記事作成を効率化するためにローカルで下書きをすることにしました

ブログ記事作成が効率的ではないと感じた

ことの発端は、はてなブログ上で記事を作ると時間がかかって効率的ではないと思ったところから始まります。具体的には、プレビュー画面に切り替えるときの待ち時間が長く感じたところです。この待ち時間をどうにかしたいと思い、対応策を考えました。まず、記事の作成手順を見直しました。

現状のブログ記事の作成手順

問題点

  • 記事を下書きするためにログインしている
  • プレビューに時間がかかる
    • 編集画面とプレビュー画面を頻繁に行き来するとなおさら長く感じる

思ったこと

  • ブログサービス上で記事を編集しなくても済むのならそうしたい。
  • 記事を下書き編集するためだけにログインするのは面倒くさい。
    • アップロードするなら別。
  • ローカル上で記事を作成して、完成したものをアップすれば効率的ではないか。
  • 現在、使っているエディタ(Atom)でブログ記事を作成できたら良さそう。

要件の整理

  • マークダウン記法で記述したい。
    • →どのエディタでもできるので問題ない。
  • プレビューできる。
  • 変更をリアルタイムにプレビューできたらなお良い。

調査

Atomでブログ記事を作成できるのか調査しました。その結果、やりたいことはできるということが分かりました。

行ったこと

markdown-previewの設定変更

Atomに始めから入っているパッケージです。これでAtom上でプレビュー出来るようになります。設定からEnableに変更します。使い方は、「パッケージ→Markdown プレビュー→プレビューの切替」でプレビュー画面を表示します。

パッケージのインストール

markdown-scroll-sync」をインストールして、Enableに変更しました。これは、編集画面をスクロールしたら、プレビュー画面も対応してスクロールするパッケージです。

今後のブログ記事の作成手順

ローカル上ですること

  • 記事の作成(下書き)
  • プレビューを確認
    • ローカルの段階で記事を完成させる

はてなブログ上ですること

  • はてなにログイン
  • 記事をコピペし、プレビューで確認する(見た目の最終確認)
    • 修正が少ない場合は、そのままCMS上で修正する
    • 修正が多い場合は、Atomで修正してCMSにコピペする
  • 記事を公開する

これからは、この流れでブログ記事を作成していこうと思います。今後、より良い方法が見つかれば変更していきます。

参考サイト

まとめ

ローカル上で記事を下書きすることにしました。ログインする必要がなく、プレビューの表示待ちもなくなりました。これでブログを継続していければと思います。