vs codeエディタでWordPress

電気仕掛け

 文を書くならやはりPCで、と思ってWordPressが使えるwindows用オフラインエディタをずっと探していたのですが結局見つからず、最終的にエディタ機能に特化して vs code に落ち着きました。

(more topics)

オフラインエディタの利用は断念
結局vs codeに決定
markdownテキストで書いてます
今のところplug-inは3つ
スニペットは便利だけど使いこなせていない
結局フローはこんな感じ

 ’09年にWordPressベースのブログへ移行してしばらくはジャストシステムから出ていたxfy Blog Editorを便利に使っていましたが、その後iPadを購入してからはアプリPressSyncがメインになっていました。
 しかし、いろいろ工夫してもiPadで文章を打つのはちょっとずつ難があり、でもweb上で直接編集するのも不便この上無し(本文部分がwindowに収まりきらなくなって勝手にスクロールされて位置を見失ったり、ネットワーク環境によっては急に接続が切れて内容が失われたり…)。やはり使い勝手の良いオフラインエディタが欲しいなぁ、と探しては諦め、また探しては諦め、の繰り返し。

オフラインエディタの利用は断念

 webで何度も調べた結果わかったことは、投稿やメディア含めたサーバー連携などの機能を持ち、オフラインでも使えるwindows用エディタはopen live editor一択であること。続きを読む

 仕方なくopen live editorを試しましたが、時々原因不明でつながらなくなったり(いろいろなサーバーで起きている様)、また(これはWordPressの仕様にも絡むのですが)行頭空白や行末の改行処理が私の好みとはあわず(融通も利かず)、利用断念。

結局vs codeに決定

 結局オフラインエディタは諦めて、まずはテキストエディタで本文(外部リンクなどの記述含めて)を書いてからコピペでオンラインエディタにペーストするスタイルを目指すことにして、テキストエディタ探しへ移行。

 調べた範囲ではWordPress投稿用途でのテキストエディタはMery,Atom,vs codeの3トップ状態の様。言わずもがな、ではありますが、これらはいずれも無料でありながらプログラミング用途で鍛え上げられてきたものなので、構文に応じた自動色分けや豊富なプラグインなどの便利機能満載です。

 まずは、かなり以前に別用途で使ったことがあるMeryを試用。
 さすがテキスト作成については全く不満は無く、また日本で開発されたものなのでネイティブで日本語対応しており安心感大だったのですが、プレビュー機能に難があり、利用をやめました。続きを読む

 次にATOMにトライ。web上には多くの情報があり、いろいろな機能向上プラグインも豊富で、痒いところまで手が届きそうな感じがビンビン。
 暫く使ってみてもほぼ機能上の不満は無く、コレで決まり!と思ってスニペットなど細かい作り込みに入って数日後、起動画面に「sunsetting」の予告…
 細かく確認しなかった自分が悪いのですが、ATOMは既に今年の12/15で開発終了が決まっており、さぁこれから使っていこう!という私にはそぐわず、せっかく育て始めたところではありますが、ここで脱落。

 結果的に「消去法」の様になってしまった Visual Studio Code(VSの名が示すとおりMicrosoftがプログラミング用に”無料で!”提供しているエディタ)ですが、試してみるとATOMとほぼ遜色無い機能と使い心地で、コレで決定。

markdownテキストで書いてます

 WordPressでブログを書いている人の多くがmarkdown記法を使っている様ですが、私はHTMLとショートコードの直書きで特に不便を感じていません。このため私が書く文書は”ほぼ”「HTMLテキスト」となっています。ただし面倒なので一々行の末尾に改行タグを記入していません。続きを読む

 しかしこの状態でvs codeをHTMLモードにしてしまうとプレビュー画面で行末改行が全て無視されてしまい、これではプレビューの用を成しません。

 一方でmarkdownプレビューには「行末の改行」を選択するオプションが用意されており、これを使えば意図通り改行されて、しかもちゃんとHTML部分も処理されてプレビューしてくれるので、ほぼWordPressに上げた状態と近いカタチで確認することができます。

 なおvs codeのモードはファイルの拡張子に応じて自動的に切り替わるので、結果的に私はmarkdown記法は一切使っていませんがmarkdownテキスト(*.md)で文書を作成、保存することにしました。 続きを読む

今のところplug-inは3つ

 vs codeは無料で機能拡張用plug-inが数多く公開されていますが、今のところ私がインストールしたのは以下の3つで特に不便は感じていません。

– Japanese Language Pack for Visual Studio Code; 言うまでも無く、日本語運用なら必須
– Markdown Preview Enhanced; プレビューエリアの背景色を自由に変更できるので
– Markdown Zenkaku Indent; これを使うと行頭の全角スペースをプレビュー画面に反映してくれる、ということだったのですが、段落頭のスペースが反映されません…

スニペットは便利だけど使いこなせていない

 多くのエディタ同様にvs codeでも入力補完を行ってくれるスニペットが備わっており、ユーザーが自由に登録することができます。作成するフォーマット毎にスニペットを登録して使い分けることができますが、私はブログ執筆以外には使わないので全フォーマット共通となるグローバルスニペットファイルを新しく作って、そこに全て書き込む様にしています。
 基本的にテキストファイルに読み出し用の文字列と実際に入力される文字列本体を書き込んでおくだけなのですが、最初なかなか動かなくて苦労しました。

 webを漁ってみてすぐに「デフォルトではmarkdownのスニペットは無効化されている」ことはすぐにわかったのですが、これを有効にする方法が全く不明。webにはsettings.jsonにこう書き込め、とか、.vscodeフォルダにあるはず、とか書いてあるのですが、いくら探しても私のPCにはsettings.jsonも.vscodeフォルダも見つかりません…
 ならば、と思って設定でquickSuggestionsを検索し、それっぽいパラメータをonしてみても、やはり動きません。
 しばらく悶々としたあとで、たまたまquickSuggestionsの後の(他の場所でも変更済み)と書いてある部分にマウスポインタを当ててみたら「他の場所」の中にmarkdownのリンクがあったのでクリックし、そこでotherとstringsをonにしたら、やっと動作する様になりました。

 そこから先はまぁ便利に使えています。ただ、本当は定数や変数を使ってもう少し便利にしたいと思っているのですが、なぜかTM_SELECTED_TEXTはうまく動きません。またダイアログボックスを表示してパラメータを入力する様な形式ができるともっと便利なのだろうと思うのですが、そういうやり方ができるのか、調べ切れていません。
 結局今は単なる「定型文呼び出し」になってしまっていますが、まぁ複雑なプログラミングなどをするわけではないので、ずっとこのままかもしれません。

結局フローはこんな感じ

 そんな、こんなでなんとか「PCで書く」環境が整いました。

 まずブログ本文は基本PC上のvs codeを使ってmarkdownテキストで。簡単な装飾やリンク張りなどのHTMLやショートコードもここで直書き(常用するものは限られるため、スニペット活用)します。
 時々出先などでも少し手を入れたくなった場合を見越して、ファイルは全てiCloudドライブ上で作成し、iOSデバイスにはMarkDown Proをインストール。

 だいたい本文が完成したら、WordPressのwebエディタへコピペで投稿。この時点でPC/iCloud上のmdファイルはお役御免。

 サイト投稿後の修正は基本iPadのPressSyncアプリで実施。
 写真のアップロードや本文への貼り付けも、今は投稿前の個人情報除去やサイズ縮小などの処理はPCよりiPadアプリの方が遙かに手軽に行えるので、一連の加工が終わったらそのままPressSyncに渡して処理しています。

 本当は使い勝手の良いwindows用オフラインエディタがあれば一番良かったのですが、多分今後も望み薄。それでもなんとかフローとして一旦落ち着けることができたので、余程のことが無い限り、このスタイルで続けていけそうです。

hisashi

hisashi

長年の間にあちこちの引き出しに少しずつ溜まったガラクタを ただただ、適当にひっくり返して並べてみました。

関連記事

カレンダー

2024年4月
 123456
78910111213
14151617181920
21222324252627
282930  

過去の日記

TOP