野良ジニアのスクラップブック

野良エンジニアによる雑記帳。技術、本、便利グッズなどを気の向くままに。

はてなブログ 第4のプレビュー機能【非公式】

こんにちわ、野良ジニアです。

以下の記事でほけきよさん(id:imslotter)が、はてなブログプレビュー機能について比較されていました。
※丁寧にまとめられていて、分かりやすい記事なので未チェックの方は是非ご一読を!

www.procrasist.com

僕は、

  • リアルタイムプレビューでざっくり確認しながら編集
  • 投稿直前に別画面プレビューでフォント装飾など全体的なチェック

という方法でプレビュー機能を使い分けています。

で、この記事を見てて「他に良いやりかた無いのかなー」と思い、色々と調べてみました。

今回はプレビュー機能 第4の可能性を独自に探った結果を投稿します。

4番目のプレビュー機能(非公式)

実際に動いてるイメージをまずはご覧ください。

  • 左側の画面で記事編集して下書き保存
  • 右側の画面は定期的に自動で再読込

という流れになっています。展開早すぎて見づらいかな…

f:id:ryota-17:20170207160533g:plain

何をどうやっているのか解説

まずは結論

「下書きを保存して共有プレビュー」Chrome拡張 Super Auto Refresh」を組合せています。

それぞれについて簡単に説明します。

【公式機能】下書きを保存して共有プレビュー

あまり使われてなさそうな気がしますが、公式で下書きを共有できる機能があります。
※ほけきよさんの記事では見事にスルーされてましたw




プレビュー横のとこに隠されてます。

f:id:ryota-17:20170207162009p:plain





共有用URLが出るのでコピー。

f:id:ryota-17:20170207162027p:plain





ブラウザに貼り付けると下書きページが見えます。

f:id:ryota-17:20170207170010p:plain


Chrome拡張 Super Auto Refresh

Super Auto Refreshは、ざっくり言うと「定期的に再読込をしてくれる拡張機能」です。

chrome.google.com

こちらからインストールすると、時計と矢印が合体したようなマークが出ると思います。

f:id:ryota-17:20170207162443p:plain

クリックすると、再読込をするタイミングを選べます。

あまり早くし過ぎても、かえって見づらかったり、サーバー側(はてなブログ)がヒィヒィ言ってしまうので、「10秒~3分」ぐらいにするのが良いでしょう。

共有プレビュー + Super Auto Refresh

もう説明不要と思いますが、共有プレビューの画面をSuper Auto Refreshで定期的に再読込することで、「リアルタイム性も保持」しつつ、「本物の記事と同じ画面を表示」できます。

ただし、記事編集画面で文章を打っただけでは反映されないので、かならず「下書きを保存」する必要があります。

メリット・デメリット

メリット

  • 別ウィンドウで完成イメージを「ほぼ」リアルタイムに見ることができる。
  • 公式リアルタイムプレビューと違い、編集画面がカクつくことがない。

デメリット

  • 拡張機能の追加が必要になる
  • 「下書きを保存」しないと、プレビュー画面に反映されない
    (マウス操作が面倒)
  • はてなブログのサーバーに負荷がかかる
    リアルタイムプレビューよりはマシ??

まとめ

というわけで、プレビュー機能第4の可能性を探ってみました。探ってみたものの、これはこれで「毎回保存するのが面倒」なんですよねぇ…

個人的に思うプレビュー機能の理想形としては、

  • プレビューは別ウィンドウ
  • CSSなども含めたプレビューが見える
  • (反映周期が多少遅くても良いので)リアルタイムに編集内容が反映される

という感じかなー。はてなさん、素敵な機能の検討、よろしくお願いしますm(_ _)m

あと、個人的には「下書きを保存(更新)」ボタンを押しても、画面遷移しないような機能も欲しいですね。
※現状では、記事一覧画面に移動したりしてしまう。記事が消えないように保存しながら書こうと思うと、割と面倒なことになる。まぁ「マークダウンエディタとか使ってローカルで記事書けよ」ってだけかもしれませんが。

追伸:勝手に新たな可能性を探ってみたのですが、他にも素敵な方法があればコメントなどで教えてください!

補足:他ブラウザについて

Chrome以外のブラウザを使われてる方もいると思うので、同様の拡張機能があるかググってみました。
※動作未確認なので、ご利用は自己責任でお願いします。

Firefox : Tab Auto Reload

addons.mozilla.org

Safari : Auto Refresh Safari Extension

agriffindesign.com

IE : Auto IE Refresher

www.softpedia.com