iCloud同期可能でWordPressや静的サイト向けデプロイ機能付きのMarkdownエディター

先生、これは控えめに言って、革命です。

本記事は、今回ご紹介するMarkdownエディターを使用して執筆しています。

弊サイトのブログ記事執筆は、基本的にMarsEdit一択でした。CMSはWordPressですが、複数人で編集しているわけでもないため、ダッシュボードの投稿画面は無効化しています(緊急時に編集できるようにはしています)。また、執筆中の記事のプレビューを表示させながら書きたいのですが、WordPress標準機能はリアルタイム性に欠けます。

そこで、テーマのスタイルをリアルタイムにプレビューできるリッチクライアントとして、ブログ開設当時に選択したエディターが、Macでは実績の多いと思われるMarsEdit一択でした。

しかし、ここのところMarsEditにも不満がなかったわけではありません。まず第一に、環境がMacのある場所に限定されてしまうという事です。外出先である程度下書きすることはできるものの、iPhone、Mac間でのやり取りが発生するためシームレスには連携できません。(MarsEdit for iOSが発売されればすべては解決する可能性がありますが)

また、現在、自宅で所有しているMacは、MacBook Pro(2017)15インチモデルです。生活スタイル上、外出先にMacを持ち出す機会が減ったため、13インチモデルから15インチモデルに切り替えました。また、職場の制約上、Macの持ち込みも制限されており、平日持ち歩く訳にもいきません。

よって、必然的にブログを書く際には、帰宅後の隙間時間を狙ってMacに向かって「さぁ、書くぞ」、と気合を入れる必要がありました。しかし、仕事に忙殺されていると、なかなかそのような纏まった時間を取りづらいことが分かってきました。

そこで、環境に縛られず、Mac、iPhone間でiCloudなどでシームレスに連携ができ、かつWordPressへのパブリッシングサービスも兼ね備えているエディターを探していました。そのような贅沢な機能を備えたエディターなどあるはずもなく、日々を悶々と過ごすことになるかと思いきや。

Mac、iPhoneで連携できて、かつWordPressへのパブリッシング機能も兼ね備えるMarkdownエディター「MWeb」

iPhoneはフリック入力というインターフェイス上、Macのキーボード入力と比較すると、タイピング速度が落ちることは否めません。また、MarsEditでのブログ執筆時はいわゆる「HTMLモード」で書いています。ただ、Macの「Dash」や「Alfred」のような便利なスニペット展開アプリがiPhoneにある訳ではないため、iPhoneではなるべく文章を書くことだけに集中したいと考えていました。

そこで、候補に上がったのがMarkdownでした。HTMLのタグによるマークアップと比較すると明らかに記述量が少なくなります。これまでも「# Type」など他のiOS用のMarkdownエディターや、MarsEditのMarkdown形式での編集は使用した事がありました。そのため、Markdown自体にとくに抵抗はなかったのですが、重視した点がいくつかあります。

  • iPhone、Mac間で文章がシームレスに連携できること(外出先で執筆した文書を、帰宅後にMacで継続して編集できること)
  • WordPressへのパブリッシング機能を備えていること
  • 上記のパブリッシング機能が、できうる限りiPhone上で完結すること
  • ローカルライブラリ(写真アプリやMacのローカル)の画像ファイルが簡単に挿入できること
  • UIが直感的でわかりやすいこと(そういう意味では、前述の# Typeは最高のMarkdownエディターです)

すべての要望を兼ね備えたMarkdownエディター「MWeb」

WordPressのエディターは、App Storeで検索すると何件かヒットします。Automatic社の公式アプリ「WordPress」が使い物になればいうことありません。ただ、日々ブラッシュアップされているものの、完全とは言えません(すべての<p>タグが消え失せる、;&lta;&gtタグで囲った要素が単語に分断される、などさまざまな経験をしました)。そこで、色々なアプリを試しているうちに、ようやく巡り会えたアプリが、今回ご紹介する「MWeb」です。

Mac版は14日間のトライアル期間があります。トライアル期間終了後は、$19.99の費用が発生しますが、買い切りです。また、iOS版は、Markdownエディターとして使用するだけであれば無償です。WordPress等へのパブリッシング、Macとのライブラリの共有を行うためには、App内課金で¥1,080支払う必要があります(記事執筆時点)。

MWebの主たる機能紹介

ここでは、MWebの主要機能について紹介します。なお、一般的なMarkdown形式による記法については割愛します。MWebには、Markdownをサポートするためのさまざまなユーティリティが存在し、画面のアイコンをタップするだけで、Markdown記法を知らなくても直感的に扱えるようになっています。

  • Markdownで執筆した記事を、そのままWordPressに投稿できる(WordPress.comとオリジナルの双方に対応)
  • WordPress以外では、medium、Tumblr、Evernoteに対応(他は中国系サービス)
  • iPhone、Mac間でiCloud Drive、もしくはDropbox経由で、記事本文と本文中の画像ファイルを共有可能
  • 画像ファイルをflickrなど外部サービスにアップロード可能
  • アップロード可能な外部サービスは、REST APIを備えた(エンドポイントを保持する)サービスであれば自由にカスタマイズ可能
  • 静的サイト(GitHub Pages、Netlify CMS等)のデプロイに対応(Macのみ)

WordPressへのパブリッシング機能以外に重視した点が、画像ファイルの扱いでした。Markdown記法で写真等の画像ファイルを挿入する場合、すでにアップロード済み、もしくはローカルの特定のパスに格納されているメディアファイルを指定する必要があります。MWebでは、ローカルのファイル(iOSの場合、写真アプリのフォトライブラリ)から選択、もしくはドラッグ & ドロップで挿入できて、非常に便利です。

現在はWordPressを使用しているため、画像ファイルの保管サービスのカスタマイズは利用していません。REST APIを備えているようなサービスの場合(たとえば、S3)等にアップロードもできるようです。

静的サイトのビルド、デプロイ補助機能

MWeb for Mac限定になりますが、Markdown記法で記述したファイルを、静的HTMLファイルに変換(ビルド)し、特定のスクリプトを実行する機能を備えています。

今回はGitHub Pagesにおける例をご紹介します。手順の流れは以下の通りです。

  1. MWeb for Macでプロジェクト作成
  2. MWeb for Mac、またはMWeb for iOSでMarkdown記法によるファイル作成
  3. MWeb for Macでビルド

プロジェクト作成手順がやや難解です。もう少し噛み砕いて手順をご紹介します。

  1. Mac上で空の作業ディレクトリを作成する
  2. MWeb for Macでプロジェクトを作成し、空の作業ディレクトリを指定する
  3. ターミナルから、空の作業ディレクトリに移動し、GitHubのリポジトリを取得する

以下、図を交えながらご紹介します。使い方が誤っている場合は、ぜひコメント欄でご指摘お願いします。

まず、下記のコマンドを実行して、空の作業ディレクトリを作成しましょう。今回は、ホームディレクトリ配下にappという名前のディレクトリを作成します。

mkdir ~/app

続いて、MWeb for Macの左下の「+」アイコンから、「New Static Site Category」を選択します。

続いて、静的サイトのプロパティの設定を行います。最低限、以下の項目が入力してあれば大丈夫です。また、「Build Path」は今回作成した作業ディレクトリに変更する必要があります。

項目 内容
Name 任意の名称
Site Name 任意の名称
Site URL 静的サイトのURL

「Build Path」は、あらかじめ作成した作業ディレクトリを指定します。「Change」を押すと、MWeb for Macの環境設定画面が開きます。

「Build Sites Save Location」の「Move to Other Location」をクリックします。そこで、あらかじめ作成した作業ディレクトリを指定してください。その際に、空のディレクトリを指定しないと、「Please choose a empty folder for build site location!」と、エラーが表示され指定できません。

今回は、GitHub Pagesですので、ソースはGitHub上のリポジトリに存在するかと思います。ターミナルを開いて、作業ディレクトリに移動したらリポジトリをクローンします。

cd ~/app
git clone https://github.com/<User Name>/<User Name>.github.io

続いて、MWeb for Macの環境設定を開いて、「Extension」を選択します。「Setting Site」で先ほど作成した静的サイトの「Name」を選択します。続いて、ソースコードをビルドするためのコードを、「Publish Script」をクリックし、GitHubにpushするためのコードを入力します。GitHub等のgitリポジトリに対するサンプルコードは、あらかじめ用意されています。「Load sample」ボタンをクリックすると、pushするまでに必要なスクリプトが表示されます。

サンプルソースコードにも記載されていますが、MWeb for Macでは、GitHubのグローバル設定(ユーザー名、メールアドレス)は取得できませんので、指示通りスクリプト内に指定しておきましょう。

あとは自由にMarkdown形式で記事を執筆して、ツリーの「Site Name」を右クリックして「Build Site」をクリックすれば静的なHTMLファイルが生成されます。「index.html」に内容が反映されるという手はずです。

最後に、MWeb for Macから「Copy Publish Script command and Open Terminal」を実行します。ターミナルが開くため、⌘ + Vを押して、コピーしたコマンドをペースとして実行すればデプロイ完了です。

これを応用すれば、他の任意の静的サイトへのデプロイへ応用ができそうですね。ただ、まだまだこの機能を完全に使いきれていないのが実情(実態はWordPressエディター)ですので、他にもっと便利な使い方があるのかもしれません。

MWeb for MacとMWeb for iOSの同期

MWeb for MacとiOS間ではライブラリや画像ファイル等のメディアファイルをiCloud、またはDropbox経由で同期できますが、同期にあたっては、1点のみ設定が必要です。

まず、MWeb for iOSで、トップ画面左上の歯車アイコンをタップして、「Settings」画面を開きます。

「CLOUD DOCUMENT LIBRARY」という項目があります。「Enable iCloud」「Enable MWeb for Mac Library」を有効化してください。その後、「Change Library Location」をタップします。

「Set to MWeb 3 iCloud’s Library」をタップしてください。これで、ロケーションが自動的に、MWeb for Macインストール時に作成されるiCloud Drive上のディレクトリが指定されます。

MWeb for Macと同期したファイルは、ライブラリの中に表示されます。Macと共有するライブラリ上に作成したファイルも、ローカルで作成したファイルと同様に扱えます。ファイル新規作成時にロケーションを選択できますので、前述のロケーションを選択してください。

MWebの使用方法の注意点

このように万能なMarkdownエディターですが、使用する上での注意点がないわけではありません。一部、他のMarkdownエディターと共通する箇所もあると思いますが、個人的に感じた点を列挙しておきたいと思います。

  • iPhoneとMacで同期する場合は、iCloud Drive経由(Dropboxも可能)となるが、画像ファイルも保存されるため、ストレージの容量に注意する必要がある
  • WordPressの過去記事管理はできない(WordPressからMWebへの過去記事取り込みはできません)
  • WordPressに投稿した記事を、加筆修正後に再度投稿する事も可能であるが、投稿後の記事の管理はあくまで補助的な位置付けとした
  • カスタムのエンドポイントを作成することはできないため、投稿できるサービスが限られる(たとえば、残念ながらQiitaには対応していません。「# Type」は対応してます)

1点目について、補足します。MacとiPhoneで情報を共有するために、iCloud Drive(iCloud)上に画像ファイルが保存されます。画像ファイルの数が増えてきた場合、iCloud Driveを逼迫する可能性もあるため注意が必要です。

2点目は文字通りであるため、3点目についてです。ここは個人的な課題ではあるのですが、MWeb上ですべてのブログ記事を管理することは不可能であることから、ダッシュボード以外で過去記事を管理したい場合には別手段の検討が必要です。

Markdownエディターでブログを編集する際の注意点

Markdown記法はシンプルです。HTMLタグによるマークアップと比較すると機能面では劣ります(文書を書くことに集中できるなど、機能面以上のメリットがあると感じていますが)。ブログ執筆の上で、HTMLタグに特別な装飾(classや属性、複雑な構造のタグなど)を必要とする場合には、Markdownでは対応できません。

そもそも、記事を1つ執筆するにあたって、前述のような特別な記載を必要とする場合、WordPressのテーマを変更する場合の影響も大きいと思われます。極力テーマのスタイルシートを工夫して、タグはシンプルにし、記事の構造に依存しない形式を考慮するべきだと考えます。

もちろん、Markdown記法に、HTMLタグを記述することもできるのですが、それではMarkdownの魅力が半減しますので、なるべく控えたいところです。

また、WordPressに特化しているわけではありませんので、アイキャッチ画像が指定できないなどの制約があります。個人的には、Auto Post Thumbnail | WordPress.orgを昔から併用しているため問題なかったのですが、アイキャッチ画像の指定にこだわる方はご注意ください。上記のプラグインは、記事中の先頭にある画像を、アイキャッチ画像として自動的に設定してくれる便利なプラグインです。

ただ、カテゴリやタグの選択、slugの指定、公開日時の指定はできます。素晴らしい!

画像ファイルの取り扱いに関して

これまでは、という手順を踏んでいました。

  1. 事前にjpegoptimやpngquantなどのCUIツール、またはImageOptimなどのGUIツールを活用して、Mac上で画像を圧縮(メタタグ等を削除)
  2. 圧縮した画像ファイルをMarsEditに挿入

最終的なWordPressへのパブリッシングは必ずMacを経由していました。アイキャッチ画像は、プラグインを活用し、先頭の画像のサムネイルを自動的に生成してアイキャッチ画像とすることもできました。しかし、上記の点は解消していませんでした(ただし、生成されたサムネイル画像は圧縮されません)。

EWWW Image Optimizer」という有名なプラグインがある事も知ってました。サーバで、上記手順で実施していたツールを使用して自動的に画像を圧縮してくれるプラグインです。非常に便利なプラグインです。しかし、レンタルサーバーやVPS等では禁止されている場合もあります(そのようなサービスでは、大抵の場合、PHPからの外部コマンド呼び出しが禁止されています)。その理由は、セキュリティ面における問題もあるのですが、サーバで画像を圧縮した場合、サーバのCPUやメモリといったリソースを消費するからです。とくに、レンタルサーバやVPSなど、複数人と共同で利用するタイプの場合、特定の個人がリソースを使い切ってしまうと全体のパフォーマンスの低下を招き寝ません。

そのため、上記プラグインの使用は控えていたのですが、最近になってアップロード時に自動的に外部サービスを使用して画像を最適化してくれるプラグインがあることを知りました。

それは、「Compress JPEG & PNG images」です。これは、かの有名な画像圧縮サービスを提供する「TinyPNG」が提供する、文字通りJPEGファイルとPNGファイルの画像圧縮を行うプラグインです。「EWWW Image Optimizer」と異なる点は、画像圧縮は、画像アップロード時に自動的に外部サービスのリソースを使用して行われるという点です。

ただし、制限がないわけでもありません。TinyPNGで圧縮可能な画像の枚数は、無償版では「500枚/月」と決まっています。十分な枚数と思われるかもしれません。プラグインの設定方法によっては、WordPressによって自動生成されたサムネイル画像も対象に含まれています。大量のサムネイルを生成している場合(とくに初期設定のまま使用している)、意外とあっという間に使い切ってしまう可能性があるため要注意です。最低限の範囲に絞ると良いでしょう。(上図の場合、画像1枚のアップロードにつき3枚のサムネイルが生成されるため、1か月に圧縮可能な画像ファイルは実質166枚程度です)

MWebの制約事項

MWebは素晴らしいMarkdownエディターです。ただ、個人的に感じている制約事項と呼べるかどうかはわかりませんが、少し注意したい点があります。

  • iCloud Drive、もしくはDropbox経由での同期となるが、本文中の画像ファイルも同ストレージ上に保存されるため、大量の画像保存には向かない
  • ファイルサイズの大きな画像ファイルを本文中に含めた場合、iPhone側の設定次第ではモバイル通信のデータ量が増加する
  • MarsEditなど、専用のブログエディターと比較し機能面で劣る

3点目は論外、というよりも、そもそもアプリの方針の違いによるものですから、ここではあまり述べませんが、強いて言うなら過去記事の管理には向いていないということです。一度、パブリッシュした記事のアップデートも可能なのですが、公開からしばらく経った記事の編集は、別の方法を取った方が良いかもしれません。これは現在の課題です。

とくに注意したい点が、1点目、2点目です。WordPressにアップロードした画像ファイルは、プラグイン等により自動的に圧縮できます。しかし、Markdown本文中の画像ファイルについては、オリジナルファイルがiCloud Drive、もしくはDropbox経由で保存される事になります。

そのため、ストレージ容量や、同期の際の通信量については注意が必要です。不必要になんでもかんでも画像ファイルを保存する用途には向きません。なお、MWebには、画像ファイルをflickrなど、外部サービスに保存する機能もあります。そのようなサービスを使用することで、ある程度ストレージの使用量を減らすことも可能です。

まとめ

今回は、WordPressに投稿可能、そして、静的サイトへのデプロイ(補助)機能まで付いた高機能Markdownエディターである、MWebをご紹介しました。Mac、iPhone版ともに無料試用も可能ですので、Markdownエディターをお探しの方は、是非候補として検討してみてはいかがでしょうか。

控えめに言って、革命です。

comments powered by Disqus