【ブログエディタ探しに終止符】OSを問わないWordPressオフライン更新支援ソフトウェア「WPPoster」
2018/12/18
価値ある情報をユーザー視点で発信するブログ
2018/12/18
WordPressを更新するときに、どんなツールを使っているでしょうか?
筆者は編集画面が狭いWebブラウザ上の管理画面で更新するのが苦手で、もっぱらmacOS用のブログエディタMarsEditを使っています。
MarsEditだけだとMacを使うしかないのですが、昨今は筆者の好むキーボード付きの小型PCが相次いで発売されたり、ポメラDM200でDebian Linuxが動作するようになったりで、MarsEditが動作しないOSでも快適にブログ更新できるようにしたいと思っていました。
しかし、WindowsやLinuxには筆者が思うようなブログエディタが本当にない。
そういうものを使わない人には想像できないでしょうが、筆者が好むモバイルデバイスだと、得てしてWebブラウザそのものが重かったり、UIを拡大して使ったり、ソフトウェアキーボードを出す必要があったりで管理画面内の編集画面が極小になってしまい、無理感が漂うのです。
こういうルールで、これをいろんなデバイスからやりたいのですが、ブログエディタと言われるものはローカルにマスターを持ってしまい、それを一方的にサーバにアップする作りで、ローカルのデータが古くなることを考慮していないものが多いのです。
MarsEditは、例えば最新30記事をサーバ上からローカルのキャッシュを上書きする形でダウンロードし、それから編集を始めることが可能で、筆者がやりたい「サーバ上の記事がマスター」ができるようになっています。
また、ブログエディタは得てしてWYSIWYG編集のためにサーバから取ってきた本文とは異なるものに加工してしまいがち。例えば、段落のpを勝手に付けたり改行が取れたりなど。
こんなブログエディタを交えて「サーバ上の記事がマスター」スタイルをやろうと思うとなかなかしんどい。
もくじ
そこで、MarsEditに準ずる使い勝手が実現できるWordPress更新支援ソフトウェアを作ることにしました。
名付けて「WPPoster」。下掲の動画は、Windows用のテキストエディタ、MeryにWPPosterを組み込み、WordPress用のブログエディタとして使っている場面です。
WPPosterは、細かいことを割愛すると……。
ざっくりとこのようなことができます。これで「サーバ上の記事がマスター」を実現する上での最小要件を満たせることになります。
自分で作って自分で使ってみた結果、個人的にはブログエディタ事情に起因したmacOSへのロックインは解けたと実感しています。
例えば、以下のような操作で最新のエントリから30記事をテキストファイルとしてダウンロードできます。
ruby wpposter.rb --download-posts=30
こうすると、「記事id.wp.txt」というファイル名で記事がダウンロードできます。例えば、今読んでいるこの記事だったら52159.wp.txtといった具合。
ダウンロードした52159.wp.txtを編集した後、以下のようにするとWordPressにアップロードできます。
ruby wpposter.rb 52159.wp.txt
※急に細かい話になりますが、アップロードは記事が公開されることを必ずしも意味しません。ダウンロードした下書きを、下書き状態を維持したまま更新も可能です。
このままだとターミナルやコマンドプロンプトで操作することになるわけですが、無論、毎回黒い画面を立ち上げてコマンドを打つような使い方をしようというのではないのです。
自分の場合はこれをテキストエディタと連携させ、MarsEditライクな使い勝手にして使っています。
以下はポメラDM200でWPPosterベースの自作のブログエディタを動作させているところを撮影したスクリーンショット。
Windowsではバッチファイルからの起動とし……。(※)
※Windowsでも上述の自作のブログエディタは動きますが、バリエーションを示したい解説上の都合とご理解ください
このように設定して使っています。ファイル名をキーボードから打つようなことは一切せず、GUIのアプリに組み込んで使っています。
WPPosterの魅力にもっと踏み込むと:
記事内で使用する画像をアップロードできる「WPUploader」も添付しました。
複数連続アップロード、画像処理ソフトウェアImageMagickを利用したリサイズ等の画像処理、そしてimgタグの生成、生成したタグのクリップボードへのコピーまで一気通貫にできる特徴を持ったものです。生成するimgタグは自由にカスタマイズできます。
筆者はファイラーに組み込んで使っていますが、外部コマンド登録に対応した画像ビュワーがあれば、それと組み合わせて使えます。(いいものがあれば教えてください)
ただし、情報量が多くなるため、本記事では詳細の解説はしません。
WPPosterはRubyで作りました。
RubyGemsからインストールできるピュアRubyのライブラリ、RubyPressを利用しています。RubyPressの動作にはRuby 2.3以上を必要とします。ゆえに、WPPosterもRuby 2.3以上が動作要件となります。
このほか、アップロード時のMarkdown展開をする場合は、ネイティブエクステンションのRedcarpetを利用しますが、設定でMarkdown展開をオフにしておけばインストールは要求されません。
RubyはWindows、macOS、Linuxなどで動きますので、「WPPoster」もまたWindows、macOS、Linuxで動きます。
WPPosterが具体的にどんな動作をするか、もう少し詳しく解説します。
WPPosterは、WordPressから記事をテキストファイルとしてダウンロードできます。
ダウンロードした記事は、以下のようなフォーマットのテキストファイルになります(※)。
※この記事自体WPPosterで投稿しているため、誤動作しないように多少加工してあります
# -*- html -*- # -*- coding: utf-8-mac -*- #■記事タイトル: 「"」そのものをタイトル中に入れたい場合は「\"」 / ""で括る post_title: "OSを問わないWordPressオフライン更新支援ソフトウェア「WPPoster」" #■投稿ID: [ 例: 10 ] 記入時は既存記事更新 / 未記入時は新規ポスト post_id: 52159 #■投稿日時: [ 例: 2017/01/01 00:00 ] 24時間制 post_date: 2017/08/18 22:44 #■更新日時: [ 例: 2017/01/01 00:00 ] 24時間制 post_modified: 2017/08/18 22:44 #■カテゴリー: [ 例: - "カテゴリー1" ] ハイフンを頭に置いて(複数)書いていく / ""で括る category: - Webサービス・アプリ #■タグ: [ 例: - "タグ1" ] ハイフンを頭に置いて(複数)書いていく / ""で括る post_tag: #■スラッグ: [ 例: word-and-word ] ""で括る post_name: "offline-blog-writing-environment-wpposter" #■ステータス: [ 例: draft / publish ] draftは下書き投稿 / publishは公開投稿 post_status: draft #■アイキャッチ画像: [ 例: 4320 ] アップロードした画像のattachment_idを指定 / 無指定ないしは0で削除 post_thumbnail: #■カスタムフィールド: st_descriptionがメタディスクリプション / 新規追加の際はデフォルトの項目を参考にkeyとvalueの対を追加 / idはWordPress側が割り振るため記入の必要なし。カスタムフィールドに何か入力した場合は、idが割り振られるのでダウンロードし直してください custom_fields: - id: '68599' key: stmeta_robots value: index, follow - id: '68606' key: st_description value: どんなOSでも使えるWordPressオフライン更新環境「WPPoster」を作りました。自分の好みのテキストエディターで記事を書き、ワンタッチでWebブラウザを使わずアップロードできます。 #■Markdown展開: [ 例: true / false ] true時はMarkdownをHTMLに変換して投稿 markdown_rendering: false #■Markdown見出しレベルオフセット: [ 例: 2 ] 2の場合「##」が「h4」に markdown_header_offset: 0 -------------------------------- WordPressを更新するときに、どんなツールを使っているでしょうか? (以下本文)
見ての通りブログエディタやWordPressの管理画面ではフォームを操作して入力する部分もすべてテキストになっています。
よくブログエディタで対応非対応が話題になるスラッグやアイキャッチ画像の設定、カスタムフィールドにも対応しています。画像のattachment_idと言われても面食らうでしょうが、WPUploaderで画像をアップロードすると分かるようになっています。
動作に関係ないコメント部分を削除すると以下のようにコンパクトになります。これでも動作します。
# -*- html -*- # -*- coding: utf-8-mac -*- post_title: "OSを問わないWordPressオフライン更新支援ソフトウェア「WPPoster」" post_id: 52159 post_date: 2017/08/18 22:44 post_modified: 2017/08/18 22:44 category: - Webサービス・アプリ post_tag: post_name: "offline-blog-writing-environment-wpposter" post_status: draft post_thumbnail: custom_fields: - id: '68599' key: stmeta_robots value: index, follow - id: '68606' key: st_description value: どんなOSでも使えるWordPressオフライン執筆環境「WPPoster」を作りました。自分の好みのテキストエディターで記事を書き、ワンタッチでWebブラウザを使わずアップロードできます。 markdown_rendering: false markdown_header_offset: 0 -------------------------------- WordPressを更新するときに、どんなツールを使っているでしょうか? (以下本文)
記事ダウンロード時に生成されるテキストファイルのフォーマットはテンプレートから読み込んで生成しているため、カスタマイズ可能です。
記事のダウンロード方法は以下の2種類です。
最新記事から件数指定で複数ダウンロード:
$ ruby wpposter.rb --download-posts=30
意味: 記事を新しい方から30件ダウンロード
まずは最新n件ダウンロードというもの。
弊ブログのサーバでの試行では、1,300記事の一括ダウンロードに成功しています(※)。
※1,400件ではサーバ側から500エラーが返ってきました
記事のIDを指定して一つずつダウンロード:
$ ruby wpposter.rb --download-post=5225
意味: ID5225の記事をダウンロード
過去の特定の記事を修正したいという場合に便利です。一つ前のものとは「–download-post」のpostが単数形か複数形かが違います。
前出のようなフォーマットのテキストを、WPPosterを使ってそのままWordPressにアップロードできます。
記事を(複数)アップロード:
$ ruby wpposter.rb 52159.wp.txt 52345.wp.txt
意味: WPPoster指定のフォーマットで書かれたテキストを記事としてWordPressに二つアップロード
記事内に記事IDが指定してあれば、そのIDの記事をアップロードした記事で上書き。
記事内に記事IDの指定がなければ、新規投稿としてアップロードできます。
新規投稿をアップロードすると、アップロードしたテキストファイルの記事ID入力欄にWordPress側から取得した記事IDを自動的に追記します。
WPPosterには、このほかタイトル、タグ、カテゴリの一覧をJSON形式でダウンロードするオフライン更新環境構築支援機能もありますが、情報過多となるので、解説はまたの機会に譲ります。
WPPosterのダウンロードはこちらから。
Windows 10へのインストール方法を解説。
必要なものは以下の二つ。
インストーラ一発、GUIアプリ起動、マウス操作でハイ便利! とはいかず、わけの分からん解説が長々続き、離脱が激しいとは思うのですが、既存のものに我慢ならずに作ったものです。辛抱して使ってみてください。いつまでも(Windows|Open) Live Writer、ScribeFireじゃないだろうと思います。
カスタマイザブルなテキストエディタをマクロなどでバキバキに強化した上で、WPPosterを組み込みブログエディタ化するのがWindowsにおけるブログ編集環境の王道となってほしいものです。
2018年11月現在では、Ruby+Devkit 2.5.3-1 (x64) もしくはRuby+Devkit 2.5.3-1 (x86)を利用します。
Ruby+Devkit 2.5.3-1 (x64)を選択した場合は、rubyinstaller-devkit-2.5.3-1-x64.exeがダウンロードされます。
以降は、こちらを例にとって説明します。
インストーラーを実行すると以下のようなダイアログが表示されるので、「詳細情報」をクリックしてインストールを続行。
ライセンスに承諾し、次へ。
「MSYS2 development toolchain 2018-10-21」のチェックをオンにし、次へ。
インストール先には「C:\Ruby」を指定。チェックボックスは全部ONに。
Rubyのインストールが終了すると、MSYS2のインストールに移行するので、「Run ‘ridk install’ to setup MSYS2〜」のチェックボックスにチェックが入っていることを確認しつつ「Finish」。
MSYS2のインストールメニューが立ち上がります。ここでは、3の「MSYS2 and MINGW development toolchain」を選択。
インストールが終わってもまた同じメニューに戻ってきて戦慄を覚えると思いますが、何も入力せずにEnterキーを押すと終了できます。
Windows+Rで「ファイル名を指定して実行」を起動。
「cmd」と入力してEnterキー。
以下をコピーして、cmd.exeにペースト。Enterキーで実行します。
ペーストといっても、cmd.exeではCtrl+Vでペーストできません。以下のように操作します。
画像処理ソフトウェアImageMagickもインストールします。
下の方に「Windows Binary Release」というセクションがあるので、そちらからダウンロードできます。
2018年11月現在では、「ImageMagick-7.0.8-14-Q16-x64-dll.exe」を使用します。
インストール先には「C:\ImageMagick」を指定します。
[重要]「Install legacy utilities (e.g. convert)」のチェックボックスをオンにします。
これでインストールを完了させます。
WPPosterは、設定ファイルwpposter.confで設定します。
エンコーディングUTF-8、改行コードLFのテキストファイルなので、対応エディタで編集するようにしてください。秀丸エディタ、サクラエディタ、Meryなら大丈夫です。
wpposter.rbのある場所から設定ファイルを読み込みますので、設定ファイルはwpposter.rbと同じ場所に置きます。
コメントがあるので理解不能な設定項目はないと思います。
# WordPressのホスト名 host: hoge.com # WordPressのアカウント username: hoge # WordPressのパスワード password: hogehoge # xmlrpc.phpのパス path: /xmlrpc.php # ssl利用の有無(httpsか否か true もしくは false) use_ssl: false # SSLのポート ssl_port: 995 # 各種データの保存先 posts_dir: C:\Users\ユーザー名\OneDrive\posts # 扱うテキストファイルの文字コード # utf-8 もしくは shift-jis charset: shift-jis # 扱うテキストファイルの改行コード # cr もしくは lf もしくは cr+lf linefeed: cr+lf # hタグにアウトラインモード用のピリオドを追加 # 例:→ ...
# true もしくは false markup_header: true # Markdownの展開(trueにするとredcarpetが必要となります) # true もしくは false markdown_rendering: false # Markdownのヘッダー展開時のレベルずらし量 # オフセット0時の例: # →
# オフセット2時の例: # →
markdown_header_offset: 0
posts_dirは、ダウンロードしたテキストファイルの保存先であり、また、カテゴリー一覧ファイル、タグ一覧ファイル、タイトル一覧ファイルの保存先としても使います。テンプレートファイルも置きます。
保存先をOneDriveの同期フォルダ内にしておくと、機器間でテキストファイルなどを共有できるので便利です。
弊ブログはまだhttps化しておらず、httpsでのテストをしておりません。動作状況をレポートいただけると助かります。
WPPosterは、筆者がそうしているという理由でOneDrive内への設置を推奨します。筆者の開発機のユーザー名(ユーザーディレクトリ名)は「Win10」です。
Windows用に用意したバッチファイル、秀丸エディタ、サクラエディタ、Meryの各マクロは、以下のような設置状況を前提に作っていますので、同様にOneDrive内に設置するとユーザーディレクトリ名の書き換えだけで済み楽かと思います。
C:\ └── Users\ └── Win10\ └── OneDrive\ ├── WPPoster\ │ ├── download30.bat │ ├── picupload.bat │ ├── txtupload.bat │ ├── wpposter.conf │ ├── wpposter.rb │ ├── wpuploader.conf │ └── wpuploader.rb └── posts\ ├── wpposter_template.txt └── wpposter_template_with_sample.txt
また、テキストエディタはマクロからのバッチファイルの呼び出し時のアクセス権の関係で「C:\Program Files」、「C:\Program Files (x86)」ディレクトリ以下にインストールしてください。
Windowsでは、WPPosterの実行はバッチファイルを介して行ないます。
付属のdownload30.batが最新30記事をダウンロードするものですが、使用環境に合わせて書き換える必要があります。
download30.batをテキストエディタで開きます。
ゾロゾロといろいろ書いてありますが、意味は以下の通りです。最後の実行オプションは先述の通りwpposter.rbで記事を新しい方から30記事ダウンロードするというものでした。
<rubyのインストール先のフルパス><半角スペース><wpposter.rb設置先のフルパス><半角スペース>--download-posts=30
これを実際のrubyのインストール先、wpposter.rbの設置先にテキストエディタで書き換えて保存します。
実行方法によってパスが通らないことがあるので、rubyとwpposter.rbのパスはフルパスで指定しています。
同梱のバッチファイル「download30.bat」を実行すると、最新30件の記事をテキストファイルとしてダウンロードします。
ダウンロード数を変更する場合はテキストエディターで書き換えてください。
実行終了時に「続行するには何かキーを押してください・・・」とポーズがかかりますが、これは「download30.bat」に「pause」という行があるためにそうなっています。
エラーで終了したときに、pause行があるとエラーメッセージが読めて便利だからそうしています。
不要であれば「rem pause」とコメントアウトするとポーズがかからなくなります。
ダウンロード時に「Permission denied」というパーミッションエラーが出る場合は、テキストエディタで編集中の記事テキストファイルがないか確認してください。
txtupload.batがWindowsでのアップロード用に用意したバッチファイルです。こちらも、テキストエディタで実際のrubyのインストール先、wpposter.rbの設置先に書き換えて保存します。
<rubyのインストール先のフルパス><半角スペース><wpposter.rb設置先のフルパス><半角スペース>%1 %2 %3 %4 %5 %6 %7 %8 %9
実行終了時に「続行するには何かキーを押してください・・・」とポーズがかかりますが、これは「txtupload.bat」に「pause」という行があるためにそうなっています。
エラーで終了したときに、pause行があるとエラーメッセージが読めて便利だからそうしています。
不要であれば「rem pause」とコメントアウトするとポーズがかからなくなります。
WPPosterを「送る」に登録すると、エクスプローラーなどの「送る」が使えるアプリからWordPressに記事テキストファイルをアップロードできるようになります。
登録方法は以下の通り。
以降、エクスプローラーで記事テキストファイルを選んだ後、右クリックのコンテクストメニューからtxtupload.batでWordPressにアップロード可能となります。これだけでtxtupload.batによるアップロードができるようになる場所はかなり増えるはずです。
ファイラーにWPPosterを登録するのも便利です。筆者が20年来愛用しているファイラー「AFXW」への登録方法を紹介。
登録方法は以下の通り。
以降、記事テキストファイルを選んでF1キーでWordPressにアップロードできるようになります。スペースキーで複数選ぶと、複数連続アップロードできます。(※)
※ただし、バッチファイルの制約で9個まで
同じ設定画面内の「各種登録(9)」でよく使うディレクトリを登録しておくと、Jキーからジャンプできて便利です。
テキストエディタのサクラエディタにWPPosterを組み込む設定を紹介。
WPPoster付属のマクロを使用します。
├── windows │ ├── hidemaru_macro │ │ ├── Download.mac │ │ ├── TitleList.mac │ │ └── Upload.mac │ ├── mery_macro │ │ ├── Download.js │ │ ├── TitleList.js │ │ ├── JumpToArticle.js │ │ └── Upload.js │ └── sakura_editor_macro ←これ │ ├── Download.mac │ ├── TitleList.mac │ └── Upload.mac
マクロファイル | 機能 |
---|---|
Download.mac | download30.batを実行して、最新30記事をダウンロード |
TitleList.mac | postsディレクトリ内かつ*.wp.txt内の記事タイトルを検索。検索結果をダブルクリックすると記事テキストファイルを開ける |
Upload.mac | 編集中のファイルをtxtupload.batを使用してWordPressにアップロード |
テキストエディタの秀丸エディタにWPPosterを組み込む設定を紹介。
WPPoster付属のマクロを使用します。
├── windows │ ├── hidemaru_macro ←これ │ │ ├── Download.mac │ │ ├── TitleList.mac │ │ └── Upload.mac │ ├── mery_macro │ │ ├── Download.js │ │ ├── TitleList.js │ │ ├── JumpToArticle.js │ │ └── Upload.js │ └── sakura_editor_macro │ ├── Download.mac │ ├── TitleList.mac │ └── Upload.mac
マクロファイル | 機能 |
---|---|
Download.mac | download30.batを実行して、最新30記事をダウンロード |
TitleList.mac | postsディレクトリ内かつ*.wp.txt内の記事タイトルを検索する設定の検索ダイアログを表示。検索実行後、検索結果をダブルクリックすると記事テキストファイルを開ける |
Upload.mac | 編集中のファイルをtxtupload.batを使用してWordPressにアップロード |
テキストエディタのMeryにWPPosterを組み込む設定を紹介。
WPPoster付属のマクロを使用します。
├── windows │ ├── hidemaru_macro │ │ ├── Download.mac │ │ ├── TitleList.mac │ │ └── Upload.mac │ ├── mery_macro ←これ │ │ ├── Download.js │ │ ├── TitleList.js │ │ ├── JumpToArticle.js │ │ └── Upload.js │ └── sakura_editor_macro │ ├── Download.mac │ ├── TitleList.mac │ └── Upload.mac
マクロファイル | 機能 |
---|---|
Download.js | download30.batを実行して、最新30記事をダウンロード |
TitleList.js | postsディレクトリ内かつ*.wp.txt内の記事タイトルを検索。検索結果をダブルクリックすると記事テキストファイルを開ける |
JumpToArticle.js | 記事タイトルの検索結果から、記事テキストファイルを開く。いわゆるタグジャンプの機能。検索結果の行にカーソルを置き、実行 |
Upload.js | 編集中のファイルをtxtupload.batを使用してWordPressにアップロード |
別記事にて執筆するかも
別記事にて執筆するかも
別記事にて執筆するかも
別記事にて執筆するかも
開発は、主にDebian Linuxを起動できるようにしたDM200上で行いました。
DM200単体でブログ更新のすべてができるようにしようと思い作り始めたのです。
Debian Linuxを起動できるようにしたDM200は実に素晴らしく、こんなスクリプトを作り切るぐらいのポテンシャルを発揮してくれます。
Linux側ではRubyが動きますので、「WPPoster」は、DM200上でも使えることになります。
Debian Linuxを起動できるようにしても元々のDM200の機能、ポメラ側の機能は維持され併用できるため、「WPPoster」はポメラ側でもブログの原稿が書きやすいように工夫してあります。
例えば、見出しタグh1〜h10の行頭に秀丸エディタ作法のアウトライン記法を追加してDM200のアウトラインモードで一覧されるようにしたり。
秀丸エディタ作法のアウトライン記法:
投稿日時、更新日時の入力は、F2キー一発で入力できるポメラのデフォルトのタイムスタンプの書式を解釈できるようにしたりなどです。
見出しタグの行頭にピリオドが付いていた場合は、WordPressへのアップロード時に削除して支障がないようにしています。
DM200はまた、行頭の「#」も見出しタグとして認識しますので、Markdownそのままでもアウトラインとして解釈されます。このこともあって、Markdownの展開機能を「WPPoster」に付けたのです。