こんにちは！
新米パパ、雑記ブロガーのスラックドロイド（@slackdroid)です。
前回「ブログの執筆スピードが格段に上がる！Markdown記法とは？」でブログ執筆に「Markdown記法が良い！」ということがわかり、最終的にGithub社のAtomにしたという話をしました。
あわせて読む>>>ブログの執筆スピードが格段に上がる！Markdown記法とは？
- Atom でMarkdown記法でブログ記事を書きたい
- Atom をブログ執筆用にカスタマイズしたい
- Atom をブログ執筆用に整備するのにおすすめのパッケージは？
今回の記事ではこのような思いをお持ちの方に、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を簡単につくれます。
Shift+Command+Pでコマンドパレットを開く（または、Tools > MarkdownTOC > Insert TOC」 を選択Markdown TOC: Createを選択する- Table of Contents（目次）が自動的に生成される
#07 markdown-writer
ショートカットキー（キーバインド）を有効化します。
Markdown記法のチートシート（カンニングペーパー）と ショートカットキー（キーバインド）を確認する手順は以下です。
- Packages を選択
- Markdown Writer を選択
- Open Cheat Sheet を選択
- 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 ドライブ（バックアップと同期）をダウンロード
- ダウンロードが完了したら、InstallBackupAndSync.dmg を開く
- バックアップと同期を「アプリケーション」フォルダに移動させる
- バックアップと同期を開く
- バックアップと同期が「インターネットからダウンロードされたアプリケーションである」という警告が表示されたら、「開く」 をクリックします。
- Google アカウントのユーザー名とパスワードでログインする
- 同期したいフォルダを指定する
Googleドライブの「バックアップと同期」の設定がおわると、メニューバーにこのように表示されます。
「Googleドライブを開く」をクリックするとブラウザでGoogleドライブが開き、「パソコン>マイ MacBook Pro」フォルダが作成されています。
その中に先ほど指定したフォルダが入っています。
私の場合、「slacklife_blogpost」が同期させたフォルダなので正しく表示されています。
今回、Google ドライブで私は同期させる方法にしましたが、Dropboxでも同様にできます。
このようにすればシームレスとは言わないまでも、Googleドライブを導入しているパソコンやスマホの複数デバイスでも管理できます。
まとめ
今回紹介した内容のおさらいです。
- wordcount
- tool-bar
- tool-bar-markdown-writer
- markdown-preview
- markdown-scroll-sync
- markdown-toc
- markdown-writer
- atom-beautify
- フォントを指定
- 黒背景から白背景に変更
- Google ドライブ（バックアップと同期）をダウンロード
- Markdown記法で書く記事を同期するためのフォルダを指定
おわり
Marsedit 4が本番環境のWordpressとの同期不具合が多発していたので、ツールの乗り換えを検討していました。
GithubのATOMでMarkdown記法を利用しブログを書く環境をここまで作り上げることができ満足しています！
Marsedit 4も気に入っていましたが、Markdown記法に慣れると、もう戻れません。
Markdown記法を試したことがない方は、この機会にATOMでMarkdown記法の環境を整備し記事を一度書いてみてください！
