StackEditで、Bloggerに記事を投稿する

Index

• Index
• Summary
• StackEditを使ってみて便利だったこと
• Blogger を使ってみて気に入ったところ
• Blogger での設定例
• Frontmatter
• 複数のマシンから同一投稿を更新する
• 記事を管理する
• Table of Contents
• StackEditプレビューの CSS をカスタマイズする

Summary

StackEdit を使って Blogger に記事を投稿することにしました。
最初、幾つか設定が必要だったり、Markdown の書き方で調べたりしたことがあったので、メモを残しておきます。

StackEditを使ってみて便利だったこと

• Markdown でブログ記事を書くのが、とても快適
• １クリックで Blogger に記事を投稿できる
• Frontmatter で、公開／下書きなどの設定ができる
• 無料で使える

Blogger を使ってみて気に入ったところ

• StackEdit で出力した Markdown ⇒ HTML に対して、自由に CSS を設定できる
• レイアウトの自由度が、とても高い

Blogger での設定例

HTMLの編集

StackEdit では、ソースコードをハイライトするために、highlight.js を利用しています（PrettyPrint も利用可能です）。
これを有効にするには、HTMLの編集が必要です。

ブログにソースコードを記述しない場合やハイライトさせたくない場合は、HTMLの編集は行わなくて大丈夫です。

以下、手順です。
ここでは、テーマとして「ウォーターマーク」を選択して highlight.js を組み込んでみました。

まず、Blogger にログインし、「テーマ」⇒「HTMLの編集」から、選択したテーマのHTMLソースを表示します。

次に、</head>タグの直前に、<link>タグでハイライト用のCSSを、<script>タグで highlight.js の URL を指定する記述を追記します。

  <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/atom-one-dark.min.css' rel='stylesheet'/>
  <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js'/>
</head>

上では、atom-one-dark.min.css をスタイルシートとして選択していますが、現時点で７７種類のスタイルが公開されています。気に入ったものを選択しましょう。

最新情報は、https://highlightjs.org/ を参照してください。

さらに、<script>タグで読み込んだ highlight.js の、hljs.initHighlightingOnLoad()メソッドを HTML 読込み後に実行する様にします。

  <script type='text/javascript'>
    hljs.initHighlightingOnLoad();
    window.setTimeout(function() {...},10);
  </script>
</body>

「ウォーターマーク」テンプレートでは、</body>タグの直前に、初期状態で <script>タグが記述されていて、window.setTimeout()メソッドを実行しているので、その前に１行追記してみます。

これで、HTML, JavaScript, PHP, Java などのソースコードがハイライトされて表示される様になります。現時点で、１７４言語に対応している様です。

ちなみに、Windows のコマンドプロンプトには対応していないのですが（言語ではないから？）、

 ```command
 C:\> dir
 ```

という感じで、言語指定するところに commandなどと書いてあげると、<code class="language-command">という風にクラスが設定されるので、後述する CSSの追加で、好きな見栄えに変更できます。単に、ハイライトさせたくない様な場合は、このやり方でもなんとかなります。

``` {.class-name}と記述することで、任意のクラスを設定することも可能な様なので、必要に応じて試してみれば良いと思います。私も試してみたのですが、うまくクラスが付与されませんでした。

CSS の追加

「ウォーターマーク」テンプレートの初期設定では、<h1>タグに下線が引かれなかったり、<table>タグに線が引かれなかったりするので、好みに合わせてカスタマイズします。

StackEdit で出力される HTML は、Blogger 側のテンプレートの以下 div タグの中に挿入されます。

<div class="post-body">
　　...　この中に、StackEditから投稿した HTML が挿入される
</div>

なので、追加する CSS は、post-body クラス配下のエレメントに対して指定する様にしておけば、他に影響を及ぼさないので安心です。

手順は、Blogger にログインし、「テーマ」⇒「カスタマイズ」⇒「上級者向け」⇒「CSSを追加」で表示される「カスタム CSS を追加」テキストエリアに、CSSを記述します。

例えば、テーブルのセルに実線を引くなら、

.post-body table {
  border-collapse: collapse;
}
.post-body th,td {
  border: solid 1px;
  padding: 2px 10px;
}

といった感じに設定を追加します。
色々試して、好みのデザインに調整していってください。

Blogger では、「カスタム CSS を追加」テキストエリアの CSS を変更すると、下半分に表示されているサンプルが動的に変化して、実際にどう表示される様になるかが分かるので、CSS を編集し易いです。

当月（？）投稿した記事がサンプル表示に使われる様なので、StackEdit から記事を投稿してあげると、より実際の表示が掴みやすいです。

Frontmatter

StackEdit で、Markdown の先頭に Frontmatter を記述することで、Blogger に情報を連携することができます。

以下に、例を示します。

 ---
 comments: false
 tags: [StackEdit, Markdown, Blogger]
 published: false
 ---

comments: falseで、コメント入力を受け付けない様にすることができます。

tags:で、ラベルを設定できます。

published: falseで、下書きとして記事を投稿できます。

この他、パーマリンクを設定できたりもしますが、Blogger は自動的にパーマリンクを設定するので、カスタムパーマリンクを設定したい場合のみ記述する感じになります。通常は不要でしょう。

詳細は、http://jekyllrb.com/docs/frontmatter/ を参照してください。

複数のマシンから同一投稿を更新する

新規投稿する場合は、Publish から Blogger を選択すればOKなのですが、既に投稿済みの記事を、投稿した PC とは別のマシンから投稿する場合は、Update existing post ID に、”Post ID” を設定する必要があります。空欄のままだと、別の投稿と見做されてしまいます。

“Post ID” は、以下の手順で確認することが出来ます。

Blogger にログインし、「投稿」でリストアップされている投稿の中から、目的の記事を「編集」します。
すると、URLのクエリ文字に、postID=52272783468521560 という感じで “Post ID” が表示されます。

なんか無理やりな感じですが、これ以外で “Post ID” を取得できる方法を私は発見できませんでした。。

記事を管理する

StackEdit の「Manage documents」でフォルダを作成して記事を管理することはできる・・んですけど、新規ファイルを作成すると、問答無用でルートに作成されてしまい、面倒くさい感じがします。

また、複数のマシンでフォルダを共有することが出来ない様に見受けられます。（これが本当なら、管理としては致命的かも）

そこで、Google Drive と Synchronize させて、Google Drive 側でフォルダ管理する方法を採ることにしました。

Chrome拡張機能で「StackEdit」をインストールしておけば、Google Drive で特定のフォルダに移動して、右クリック ⇒ その他 ⇒ StackEdit で、新規ファイルが作成され、自動的にシンクロして StackEdit が開きます。

既存ファイルを編集する場合は、ファイルを選択 ⇒ 右クリック ⇒ アプリで開く ⇒ StackEdit で、編集できます。

シンクロするのに少し時間がかかる様ですが、フォルダ管理も含め複数マシンで作業できるので便利です。

Table of Contents

[toc] と記述することで、目次を作成することができます。
初期設定では、<h1> から <h6> までを自動的に拾って目次を作成します。Settings ⇒ Extensions ⇒ Table of Contents ⇒ Max depth で、設定を変更できます。

ただし、[toc] を挿入した位置より上の <h1> ～ <h6> も拾ってしまうところは、どうしようもない様です。

StackEditプレビューの CSS をカスタマイズする

Blogger に投稿した記事と StackEditプレビューでは、適用している CSS が異なるため、見た目がだいぶ異なります。そこで、StackEditプレビューの CSS をカスタマイズして、Blogger に近づけていきます。

CSS のカスタマイズは、Settings ⇒ Extensions ⇒ UserCustom extension ⇒ JavaScript code で行います。

以下、記述例です。この例だと、プレビューの文字が緑になります。

userCustom.onReady = function() {
    $('head').append('<style>body {color: green}</style>');
};

要は、JavaScript で <style>タグを append してあげれば良いということです。userCustom.onReadyに、function を突っ込んでおけば、プレビュー時に実行される仕組みですね。

改行コードが入ってると駄目っぽいので（LFならOKか？）、長い CSS を記述したい場合は、<link>タグで CSS ファイルをロードした方がメンテが楽そうです。ただし、https でないと駄目な様なので、Google Drive などで CSS を一般に公開してあげるなど、置き場所を考える必要はあります。