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

iPhone Mac Blog CMS iCloud iOS macOS Markdown WordPress

announcement-3509489_640

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

本記事は、今回ご紹介する 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 という環境に縛られず、できるだけ汎用的で、Mac、iPhone 間で iCloud などでシームレスに連携ができ、かつ WordPress へのパブリッシングサービスも兼ね備えているエディターを探していたのですが、そのような贅沢な機能を備えたエディターなどあるはずもなく、日々を悶々と過ごすことになるかと思いきや。

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

iPhone はフリック入力というインターフェース上、Mac のキーボード入力と比較すると、タイピング速度が落ちることは否めません(キーボードよりフリック入力の方が得意、という女子高生等の特殊な人種を除いて)。また、MarsEdit でのブログ執筆時はいわゆる「HTML モード」で書いているのですが、Mac の「Dash for macOS」や「Alfred」のような便利なスニペット展開アプリが iPhone にある訳ではないため(TextExpander などのアプリがない訳ではありませんが、料金がサブスクリプション制であること、TextExpander に対応したエディターが限定されるなど制約があります)、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」が使い物になればいうことないのですが、日々ブラッシュアップされているものの、完全とは言えません(すべての

タグが消え失せる、タグで囲った要素が単語に分断される、などさまざまな経験をしました)。そこで、色々なアプリを試しているうちに、ようやく巡り会えたアプリが、今回ご紹介する「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」を選択します。

スクリーンショット 2018-11-20 19.54.08

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

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

スクリーンショット 2018-11-20 19.56.19

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

スクリーンショット 2018-11-20 19.55.08

「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 するまでに必要なスクリプトが表示されます。

スクリーンショット 2018-11-20 19.56.07

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

スクリーンショット 2018-11-22 21.37.50

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

スクリーンショット 2018-11-22 21.37.57

最後に、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」と異なる点は、画像圧縮は、画像アップロード時に自動的に外部サービスのリソースを使用して行われるという点です。

スクリーンショット 2018-11-15 23.11.45

ただし、制限がないわけでもありません。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 エディターをお探しの方は、是非候補として検討してみてはいかがでしょうか。

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

Twitter Facebook B! はてブ

関連記事

comments powered by Disqus