こんにちは、ほけきよです！
皆さんは、ブログを何をつかって書いていますか？
見たままの人はそこまで意識しないと思いますが、 はてな記法やMarkdownで書いている人は、出来上がりをイメージしながら書く必要があります。
練度が上がってくると、大体の出来上がりはイメージできるようになってきます。 ただ、それでも改行漏れ～とか、タグがチラ見え～とかそういったちょこちょこしたミスで型が崩れちゃいます。
なので、基本的にはプレビュー機能を使ってちょこちょこと確認しながら文章を書いていくことになります。
実は、はてなブログではプレビュー機能が複数種類あって、それぞれ一長一短があります。
今回はその比較と、私的使い分けを紹介します！
※多くの人はこの3つについてはもう知っているかも。けれど知らない人もきっといるはず..!私は最近まで知らなかったし！*1
はてなブログの3種類のプレビュー機能
はてなブログには、次の3種類のプレビュー機能が存在しています。
そして、何と私は最近リアルタイムプレビューの使い方を知りました。
前からあると言う噂は聞いていたけど、どうすればできるか知らなかった…なんという情弱…
順番に紹介していきまーす！
通常のプレビュー
はじめに紹介するのは、普通のプレビュー方法です。
私は初期の頃、他の方法を知らなかったので、これをよく使っていました。 でも。少し使いにくいんですよね。åå
使い方
プレビューボタンをポチるだけ！
少し使いにくいと思うワケ
実は通常プレビューはあまり使いません。
確かにポチッと押すだけで簡単にプレビューできるのは魅力的なのですが、2つの理由で使いにくいなと思っちゃいます。
■ プレビュー時の記事幅が少し狭くなる
■ プレビューを見ながら並行して記事が書けない
一つ目は考えすぎな部分もあるのかもしれません。 気合の入れた記事だと、「特定箇所で改行を入れて読みやすくしたい」 となります。こういうときは正確に改行のタイミングを図りたいのですが、通常プレビューだとブラウザの都合少し狭くなってしまいます。
二つ目は私的にはもっと深刻です。Markdownを使っている人って
- 文章をある程度まとまりで書く
- 型が崩れていないかプレビューで確認する
- プレビューでのアウトプットを見ながら記事を修正
というサイクルで記事を修正していきたいと思うんですよ。私はそうなんですよ。 でも、通常プレビューはプレビューか記事の編集かしかできません。
そのせいで、編集のスピードが損なわれてしまうので、私はあまり使わないです。
別画面でプレビュー
次は、別画面にプレビュー画面を出す方法です。
使い方
プレビューの横のメニューを開いて、「プレビューを新しいウィンドウで表示」をポチる
すると、新しいウィンドウで見ることができます。
通常プレビューの欠点をカバー
特に、気合の入った記事や記事の最終チェックのときには、 間違いなくこちらのプレビューを選びます。
オリジナルの大きさでプレビューができる。
別画面全体に、一度記事画面を出力するので より厳密にイメージができます。プレビュー画面を見ながら作業ができる。
そもそも別画面で表示しているので、その出力結果を見ながら
「あ、ここを直そう」
という作業ができます。
こういうのって、 小さなことだけど、具体的な出力を見ながら作業することは、中身をしっかり作り込むことができ、大きな効果を生みます！
欠点はリアルタイム性
欠点の一つは、ウィンドウが別であること自体かもしれません。 全画面でプレビューしようと思ったら、ウィンドウを切り替えてやらなければなりません
まぁ、でも私は正直困ることはあんまりありません。
もっと大きな欠点は、、リアルタイム性の欠如です。
最近のマークダウンエディタは「左で書いて、右で見る」 といった、リアルタイムプレビュー機能をほとんど備えていますよね。 書いた記事をいち早く確認して修正することで、修正の手戻りが少なく、効率をあげられます。
通常画面プレビュー、別画面プレビューだと、それができないので、多少効率が下がるかなといった印象です。
あと、これは別に悪くはないんだけど、このプレビューつかいまくってたら Google analyticsの"entry/preview"に大量のアクセスが集まる(ように見えちゃう)よね。セルフアクセスなのに！
リアルタイムプレビュー
最後に紹介するのが、まさに先述したリアルタイム性を持ったプレビュー機能です
使い方
こんなところにマークがあったのか…今まで気づかなかったぞーーー！
リアルタイム性はいつでも優秀
先ほども言いましたが、 Markdown等を書く上でプレビューのリアルタイム性は大きなアドバンテージです
さらに、このリアルタイムプレビューでは画像も見られるので、パパッと構成をチェックするときに重宝します。
できること、できないこと
ただし、リアルタイムプレビューでは、できないこともいくつかあります。
例えば↓の画像
こんな感じで、CSSは反映されません。 少し、できることとできないことを分けて見ました。
・リスト、色や文字の大きさ、斜体など基本は反映
・画像はみれる
■できないこと
・リンク(hogehoge:cite)は反映されない・アマゾンの商品詳細も反映されない
・CSSは崩れるので、吹き出しとか自分で設定しているものは見れない
完全に全てできるというわけではありませんね。
リアルタイム性の代償、処理が遅くなる
もう一つだけ欠点をあげるとすると、 リアルタイムにプレビューをしているわけなので、処理がどうしても遅くなります。 ちょこちょこっとカクつくくらいではありますが、気になる人は気になるかな〜と。
まとめ：3種の使い分け方
今回は、以上三種類を紹介してみました。まとめるとこんな感じです
| Good | Bad | |
|---|---|---|
| 通常 | 特になし | ・記事幅が狭くなる ・プレビューか編集かどちらかのみ |
| 別画面 | ・投稿後の感じを忠実に再現 ・プレビューを見つつ編集可能 |
・リアルタイム性の欠如 |
| リアルタイム | ・リアルタイム性 | ・CSS等が反映されない ・処理が重くなる |
個人的には、それぞれの特性を活かすと、以下のような使い分け方をするのがいいのではと思っています。
1. 通常プレビューはあんまり使う機会がなさげ
2. 別画面プレビューは忠実に確認したいとき利用。特にCSS関連の編集をしたときとか、投稿直前とか
3. リアルタイムプレビューは、普段使いに使うのには超便利。しっかり見たいときだけ別画面が吉
こういうプレビュー機能がデフォルトで使えるのもはてなの大きな強みですよね。
*1:初心者向けの記事かもしれません
