161218_icatch

ブログの編集ツールをMWebにした話

ブログを書くときにMWebというMac専用の有料エディタを使うようになりました。せっかく有料版を購入したので、詳しい使い方などを書いてみようと思います。

61218_11

エディタ難民

私はWordPress上の管理画面からいきなり編集はせず、別のツールで編集してからWordPressで投稿するようにしてます。
編集ツールはマークダウンが使えるものを使っているのですが、これまでいろんなツールを試してきました。
Evernote → Qiita → Sublime Text → MwebLite → hackmdなどなど…。

MWebには無料版のMWeb Liteがあるのですが、そっちについては今年からちょいちょい使っていました。
機能的には有料版と無料版とでさほど変わらないのですが、保存できるファイルが10ファイルまでという制限がります。

私の場合、記事を書いて、公開しないままにしてしまうことが結構よくあるため、すぐに上限の10記事に到達…。
記事が公開できたら、前のは消して…それでも溢れたら.mdで保存して…みたいなことを繰り返してました。(今思うと早く有料版買えばいいのにって感じですね…)

hackmdとの出会い

有料版買おうかどうか迷っていたタイミングでhackmdと出会いました。

マークダウンでリアルタイムプレビュー&共同編集できる「HackMD」が便利だった話

hakmdはネット上に保存されるので、家で途中まで書いた後、会社など外で編集できるところが良かったです。
また大好きなSublime Textの機能⌘ + Dが使えるところや、日本語対応に力を入れてるところも良いです。

でも、使用頻度が高くなるほど管理画面がカオスなことに…。
このあたりはタグを付けすればいい話なのですが、カテゴリーでフォルダ分けしたい自分にはちょっと気になるところでした。
また、一瞬こちらのネット環境が不安定になって編集できなくなってしまったり、ごくまれにですが、サービス自体が落ちてるなんてことも…。

週1くらいの頻度で、ときどき使う分にはすごく良いツールなのですが、ここ最近はちょっとしたメモ書きも含め、何かしら毎日、ちょこちょこ書いてる状態だったので、もう少し安定しているものを使うことにしました。

エディタ探し

候補としてはesaQiita:TeamDropbox – Paperがありました。
自分の場合、ブログを書くのに誰かと共有することもないので、Mwebの有料版の方がいいかも…と思い、購入することに。

価格は、MWeb StoreApp Storeでちょっと値段が違うのですが、今だとApp Storeの1800円の方が安いようです。

機能

基本的には英語なのですが、今のところ問題なく使えてます。
機能的にも結構理想に近いです。

  • マークダウンをリアルタイムでプレビューできる
  • カテゴリー分けできる
  • オリジナルのCSSを反映できる

このあたりができるツールだとうれしいとな思っていたのですが、MWebだと更に

  • そのままブログに公開できる
  • ショートカットが使える
  • バックアップがとれる

というメリットがありました。
以下、有料版をベースに使い方をご紹介します。

パネルの表示

161218_01

私は、左からライブラリ、記事一覧、編集画面、プレビュー画面、情報パネルとモリモリで表示してます。

表示するパネルの変更はツールバー、もしくはショートカットで変更できます。

161218_02

⌘ + 4 で「編集+プレビューモード」で開きます。
⌘ + R で「プレビューのみ」もしくは「編集モードのみ」が交互に開きます。

ショートカット
編集画面のみ表示 ⌘ + 1
パネルを2分割する ⌘ + 2
パネルを3分割する ⌘ + 3
編集 + プレビューパネルを表示  ⌘ + 4
ドキュメントの設定パネルを表示  ⌘ + 8
プレビューもしくは編集モードを交互に表示  ⌘ + R
タブの移動  ⌘ + shift + { or }

ライブラリーパネル

ライブラリーパネルでは、フォルダーごとにカテゴリーを整理できます。
ブログを書く人であれば、ブログのカテゴリーや年月日などで管理するといいかもですね。
私の場合、自分用のメモと、もう一つのブログのカテゴリを作って管理してます。

設定パネル

⌘ + 7 で設定パネルが表示されます。
文字カウントと見出し一覧を表示したり、タグやカテゴリーなどを設定したりできます。

161218_06
カテゴリーは実際の自分のブログのカテゴリーを設定できたり、静的ジェネレータを使ってる人であれば、ここからHTMLのファイル名も設定できたりするようです。

ショートカット

マークダウンで普通に書いてもいいのですが、ショートカットを覚えておいた方が早いかなと思います。
(ちなみに、マークダウンの書き方に慣れていない人でも、インストールすると書き方のサンプルドキュメントが最初から入ってるので、そこを参考にするといいですよ。)

ショートカット
タイトル ( h1 ) control + n ( control + 1 )
太字 ⌘ + B
イタリック  ⌘ + I
アンダーライン ⌘ + U
打ち消し線 ⌘ + –
ハイライト ⌘ + shift + –
インラインコード ⌘ + K
ブロックコード ⌘ + shift + K
コメント ⌘ + /
more ⌘ + .
リスト control + U
番号リスト control + shift + O
引用 ⌘ + shift + B
Shift Right ⌘ + ]
Shift Left ⌘ + [
リンク control + shift + L
テーブル control + shift + T
画像 control + shift + I
画像を挿入する ⌘ + option + I
段落 ⌘ + return
絵文字・記号の挿入 ⌘ + control + space
検索 ⌘ + shift + F
HTMLのコピー ⌘ + option + c

テーブルの挿入が結構独特だなと思ったのですが、慣れるとこっちの方が早いかもですね。

161218_05

ちなみに、moreもショートカットで挿入できる!とちょっと感動したのですが、WordPressだと半角スペースが入るのがよくないようで、うまく機能しないようです…。

画像のアップ

画像の挿入は、ショートカットでもいいのですが、そのまま編集画面にドラックアンドドロップでもいけます。

また、ローカルの画像を、そのままGoogle Photos、imgur、Custom APIにアップすることもできます。
メニューのPublish、もしくはshareボタンにあるUpload Local Images to…から設定し、アップできます。

161218_07

テーマの変更

全体のテーマの色味は ⌘ + option + L で、白バージョンと黒バージョン交互に変更できます。
編集画面やプレビュー画面のテーマも変更は環境設定(⌘ + , )のThemesから設定できます。

161218_09

CSSが分かる人であれば、自分のブログテーマなども反映できるので便利ですね。

バックアップ

何かあると怖いので、DropboxやGoogleドライブなどのクラウド上のフォルダとリンクして、バックアップをとるようにしてます。

バックアップは、環境設定(⌘ + , )のBackupから設定できます。

161218_08

ただ、指定したフォルダのdocsに記事の履歴が残るのですが、カテゴリーごとには残らなようです…。
ちなみに、プレビュー用のCSSなどもバックアップとして書き出されます。

161218_10

その他の機能

まだ使ったことがないのですが、いろんな形式での書き出しとブログサービスへの公開機能もついてます。

書き出しは、PDF、HTML,画像、RTF、docxに対応してます。
ブログサービスは、WordPressやTumblr、Evernote、Bloggerなどは連携して使えるようです。
また、OctopressJekyllHexo などの静的ブログジェネレータもサポートしてるようです。


その他、詳しい機能については、公式のドキュメントか、動画を参考にしてください。

私は、ファイルの上限数がネックで有料版を買いましたが、無料版でも十分使えるツールです。
普段マークダウンで記事を書いてる方にはおすすめのツールなので是非使ってみてください。

Pocket