GithubのATOMをブログ執筆用テキストエディタに完全整備する方法。おすすめパッケージ8選！

こんにちは！

新米パパ、雑記ブロガーのスラックドロイド（@slackdroid)です。

前回「ブログの執筆スピードが格段に上がる！Markdown記法とは？」でブログ執筆に「Markdown記法が良い！」ということがわかり、最終的にGithub社のAtomにしたという話をしました。

あわせて読む>>>ブログの執筆スピードが格段に上がる！Markdown記法とは？

今回の記事ではこのような思いをお持ちの方に、Atomをブログ執筆用に私が実際に行ったカスタマイズを紹介していきます。

ATOMでブログ執筆環境の構築に必要な8選パッケージ

ATOMとはGithub社が開発したテキストエディタです。
ATOMのデザインテーマやプログラミングをするときに便利なパッケージが豊富にあり、それらを管理画面から簡単に変更出来る人気のテキストエディタです。

ATOMをダウンロードした最初は、Markdown記法に最適化されていないのでブログを執筆できるようにカスタマイズする必要があります。

いろんなパッケージがある中、私が試しおすすめのパッケージを8個選びました！

こちらをインストールしていけば、ATOMでMarkdown記法を使いながら快適なブログ執筆ライフが出来上がります！

#01 wordcount

文字数を数えるためのパッケージ。

ブログを書くとSEO観点である程度の文字数が必要とよく言われますよね。文字数が一番重要ではありませんが、どのくらいの文字数になったかを知りたい場合、把握できます。

#02 tool-bar

tool-bar-markdown-writer が機能するようにまずインストールしましょう。

#03 tool-bar-markdown-writer

ATOM画面の上部にMarkdown記法向けのツールバーを表示する。
こちらを利用するには、一つ前のtool-barのパッケージが必須ですのでインストールをお忘れないように。

#04 markdown-preview

インストール後、「Packages > Markdown Preview > Toggle Preview」またはShift+control+Mでプレビューが表示されます。

#05 markdown-scroll-sync

Markdown記法で書いている編集画面とプレビュー画面のスクロールを同期させます。
キーボードから手を話しトラックパッドやマウスを毎回さわる必要ないです。

めちゃくちゃ便利な機能なのでインストールをおすすめします！

#06 markdown-toc

Markdown記法で書いた文書の階層構造を元に、Wordpressの「TOC+」のようにTable of Contents（目次）のhtmlを簡単につくれます。

#07 markdown-writer

ショートカットキー（キーバインド）を有効化します。

Markdown記法のチートシート（カンニングペーパー）と ショートカットキー（キーバインド）を確認する手順は以下です。

#08 atom-beautify

自動的にインデントを整形してくれます。Markdown記法にも対応している優れものです！

プレビューのブログ向けに整備

おすすめパッケージ7個をインストールしMarkdown記法でブログも執筆しやすくなりましたが、プレビューが現状では背景が真っ黒で見づらいです。

プレビューをブログっぽい見栄えにするためのカスタマイズを行います。

フォントを指定する

好きなフォントに変更し見やすい文字にします。私は「Roboto/sans-serif」にしました。

font-familyの部分をお好きなフォントに変更し、ATOM内のプレビューのCSSに追加してください。

// language-gfm
atom-text-editor[data-grammar="source gfm"].editor {
font-family: "Roboto",sans-serif;
}

プレビューを白背景で黒文字する

フォントを変更しましたが、プレビューが編集画面同様に黒背景で見づらいです。
プレビューのみを白背景にすることで、よりブログっぽさがでます。

「AtomのMarkdownプレビューをGitHubスタイルにしたり、カスタマイズしたりする。」記事を参考させていただきました。

.markdown-preview {
background: white !important;
p, h1, h2, h3, h4, h5, h6, li, th, td, strong {
color: black !important;

Markdown記法からHTML記法へ変換方法

Markdown記法で書いた記事をそのままWordpress上にコピペしてもHTMLに変換されません。

となると、Markdown記法でどれだけ早く書けても意味がないのでは？と思ったあなたに朗報です！

ATOMではMarkdown記法で書いた記事のプレビュー上で右クリックを押すとCopy as HTMLがでてきます。

こちらをクリックするとMarkdown記法で書いた記事がHTMLに自動変換されコピーができるのです！

これで、素晴らしすぎませんか？！

Google Driveで編集記事をクラウド管理

ATOMでMarkdown記法を使いブログを執筆する環境は整いましたが、執筆の途中や完了したファイルをパソコンのローカルのみで管理していくのは不安です。

ローカルに保存しクラウドサービスのフォルダに毎回アップロードするのは面倒なので、Googleドライブの「バックアップと同期」の機能を使い、編集している／編集し終わったブログ記事のバックアップする環境を構築しました。

Googleドライブの「バックアップと同期」の設定がおわると、メニューバーにこのように表示されます。

「Googleドライブを開く」をクリックするとブラウザでGoogleドライブが開き、「パソコン>マイ MacBook Pro」フォルダが作成されています。
その中に先ほど指定したフォルダが入っています。

私の場合、「slacklife_blogpost」が同期させたフォルダなので正しく表示されています。

今回、Google ドライブで私は同期させる方法にしましたが、Dropboxでも同様にできます。

このようにすればシームレスとは言わないまでも、Googleドライブを導入しているパソコンやスマホの複数デバイスでも管理できます。

まとめ

今回紹介した内容のおさらいです。

おわり

Marsedit 4が本番環境のWordpressとの同期不具合が多発していたので、ツールの乗り換えを検討していました。

GithubのATOMでMarkdown記法を利用しブログを書く環境をここまで作り上げることができ満足しています！

Marsedit 4も気に入っていましたが、Markdown記法に慣れると、もう戻れません。

Markdown記法を試したことがない方は、この機会にATOMでMarkdown記法の環境を整備し記事を一度書いてみてください！