eye-catch-img

eye-catch-img



近況、そしてブログ執筆環境の整理(見直し)

自分のブログ、今年まだ1回しか書いてないヤバい。

やはり、主に仕事などで落ち着かない状況が続くと精神的にクリエイティブな心情になかなかなれない、というのが最大の理由の1つだと自分では分析しているけど、それでもその他の理由もあるんじゃないかと探ってみると、今出来る改善策が見えてきた。

執筆する環境だ。

2016年9月11日のブログで、Markdownによるブログの更新方法導入を試みている。そしてそれは、以降ずっと続いている。

手順は以下だ。

  1. 所定フォルダに記事用フォルダ(yyyymm/yyyymmdd日付形式)を作成
  2. 上記フォルダ内にblog_yyyymmdd.mdファイルを作成
  3. エディタで上記mdファイルを開き、Markdown記法を使って記事を執筆
  4. htmlに変換し、その内容をコピー
  5. 記事内で使用する画像を、ブログの管理画面からアップロード
  6. ブログの管理画面から新規に記事を投稿する画面のテキストボックスにタイトル、テキストエリアに内容を貼り付け
  7. 上記テキストエリアに貼った内容に、アップロードした画像を挿入

まとめると

  1. 執筆準備(手順1、2)
  2. 執筆(手順3)
  3. 変換(手順4)
  4. 連携(手順4、5、6)
  5. 調整(手順7)

改めて手順を書いてみて分かったが、一番時間がかかる部分が上記2.執筆。面倒だなぁと思う箇所が4.連携と5.調整。

更新頻度が低いのは、「自分の心の弱さ」。だが、それも心を補強する環境改善で乗り越えていく。改善だ!


1.執筆準備の改善

ブログとして書いた記事は日付フォルダで管理し、記事のファイルにも日付を付けることにする。それらの配置場所はDropboxとする。

整理すると

  • ファイル、フォルダ格納場所:Dropbox/private/[ここは適当に]/yyyymm[年月フォルダを作成]/yyyymmdd[年月日フォルダを作成]/blog_yyyymmdd.md

※[]記載は注意書きだと思ってください。

Dropboxに配置することにより、iPhoneなどのスマホからも記事作成できるようにしておく。書くかは分からんが。

また、日付フォルダ作成、記事Markdownファイル作成用のフリーソフトとして、新規作成EXを使わせて頂いております。動作OS: Windows 8/7/Vista/XPとなっていますが、私の環境Windows10Pro上でも今のところ問題なく動作しております。

インストールすると右クリックメニューに「新規作成EXで作成>」が現れるので、その先のドロップダウンメニューの「設定」を選んで表示されるメニュー画面の一番上「新規格納フォルダを開く」を選ぶと、フォルダやファイル作成のテンプレートを置いておくフォルダがエクスプローラーで表示されます。

私は以下のような感じで、年月日フォルダや年月フォルダ、年月日付き記事Markdownファイルのテンプレを定義しておりますわ。

あとはエクスプローラーでDropboxの所定フォルダを開き、その中で右クリックメニューを出して「新規作成EXで作成>」からフォルダやらファイルやらを作成、って感じにしてみました。

どうだろ?そんなに劇的改善ってわけじゃないけど、精神的負担軽減にはなっているんじゃないだろうか。いや自己満足かもしれんが。


2.執筆の改善

世の中の動向調査

ここでは執筆するための道具、主にエディタについて見直しを図る必要があるのだが、実はその後の連携を考慮する必要があるかもしれないな、とWEBで調べてみて気が付いた。

世の中、ブログはあふれかえっているわけで、そうなると今回のようにブログを如何にして手軽に更新していくか、なんてことは誰でも考えるわけっす。

大体のブログサービスでは、管理者画面中に執筆機能があってブラウザー上で記事は書けるわけなんだけれども、

  • WEBにアクセスしないと記事が書けない
  • ブラウザーが落ちた時に書き途中の記事が消失する場合がある
  • 過去の記事もWEBにアクセスしないと参照できない

などの弱点もあり、小生もブラウザー上ではなくエディタ上で記事を記載後にWEBにアップする、という方法を取りたいと思っております。

ただ、その「WEBにアップする」という部分、エディタによっては書いた記事が直接指定のブログサービスにアップできるような機能があるみたい?

キーワードは「AtomPub API」。

で、さらに調べてみるとAtomPub APIに対応しているエディタのメジャーどころというと、MacではMarsEdit、Windowsでは旧Windows Live Writer、現在はOpen Live Writerといったところらしい。

自分はWindowsユーザーなので、Open Live Writerってのが選択肢となるわけだが、このエディタ、調べてみるとMarkdownが使えないらしい。あと、最新版はストアアプリとして公開されているわけだけど、Ver.0.6.2.0で公開日が2017/05/24っぽく、どうもあまり力が入れられてはいないようだ。・・・Markdown記法の導入なんて、いつになることやら。

というわけで、エディタはやはりAtomで行くことにする。

ちなみに、後発のVisualStudioCode、通称VSCodeも試してみたが、プレビュー画面の表示の仕方が自分には合わず断念。

Atomの設定

スニペットの設定

Atomエディタには「スニペット」と呼ばれる便利な機能があります。

スニペットとは、いわばテンプレート。

ブログを書く時も、内容としてタイトルやアイキャッチ画像、その後にいくつかの章立てがあるような、そんな基本的なテンプレをスニペットとして設定しておいて、記事MarkdownファイルをAtomエディタで開いてすぐにスニペットを呼び出せば準備完了、みたいなことができる。

スニペットの設定方法については以下のサイトが詳しいです。助かります。

スニペット登録 - SMART 開発者のためのウェブマガジン

Atomで言語ごとにスニペットを追加登録する | note.nkmk.me

自分は以下のようなテンプレをスニペットとして登録しています。

'.source.gfm':
  'DevLife Blog Format':
      'prefix': 'devlife'
      'body': """
      ## Title
      <img src='' alt='eye-catch-img'>
      <hr  style="border-top: 1px dotted #eee;">
      <hr  style="border-top: 1px dotted #eee;">
      <br />
      ### Section 01
      <br />
      ### Section 02
      <br />
      ### Section 03
      <br />
      ### Section 04
      <br />
      ### Section 05
      <hr  style="border-top: 1px dotted #eee;">
      <hr  style="border-top: 1px dotted #eee;">
      """

上記のprefixで指定している"devlife"が起動トリガー。"devlife"と入力すると、bodyで記述されている内容が展開されるってわけ。便利。というか「これから書くぞ」という気になる。

Atomに導入したMarkdownに関するプラグイン

2016年9月11日のブログではAtomに導入したプラグインなんて記載していませんでした。使い始めだったので、プラグインの存在なんてまるで知りませんでした。

が、使っていくうちに「こういう機能ないかなぁ~」とブラウザーでAtomのプラグインを検索しては導入する、ということを繰り返し今に至るMarkdownに関するプラグインをメモっておきます。

markdown-writer

Markdownの入力支援プラグイン。後述のtool-bar-markdown-writerを使うために必要。

tool-bar

エディタ上部にショートカットアイコンを設置可能なツールバーを表示するプラグイン。後述のtool-bar-markdown-writerを使うために必要。

tool-bar-markdown-writer

Markdown記法のショートカットをツールバーに設置。IMEをONしている状態でMarkdown記法を使用したい時に少し便利。あとリンクタグ入れたい時は特に便利。

markdown-scroll-sync

Ctrl+Shift+mでプレビュー画面出せますが、編集画面とプレビュー画面のスクロールを同期してくれます。つ~か、この機能は標準で備わっていて欲しいが。

markclip

クリップボードにコピーした画像をCtrl+vで貼り付けると、画像タグが自動生成されて更に設定に応じた場所に画像ファイルが生成されて、超便利。このプラグインだけでもブログをAtomで書く意味がある。

document-outline

サイドバーにMarkdownの見出し(#で始まる文章)をツリー状に表示してくれる。これのお陰で全体構造を見て辻褄が合っているか、分かりにくくないか考えながら執筆できる。


3.変換の改善

変換、つまりブログに貼り付けるためにhtmlに変換するには。

AtomエディタのMarkdownのプレビュー画面上で右クリックで表示されるメニューから「HTMLを保存」を選択すればhtmlファイルに変換されて保存される。

ただし、そのhtmlファイルはcssなど色々と修飾されているため、その内容を読み解いてコピーする箇所を抽出する必要があってなんか嫌だ。

ここからはAtomだけではなく、その他のアプリ等を使用していく。

変換で登場するアプリケーションは Pandoc。ドキュメントコンバータだ。

Pandocをインストールして、コマンドラインから

$ pandoc blog.md -o blog.html

これでMarkdownからhtmlファイルへ変換してくれる。特にオプションを指定しなければ、プレーンなhtmlを生成してくれる。

とりあえず、変換は手動で。本当はAtomでファイルを保存したらpandocが自動で動いて常にhtmlファイルを生成してくれる、ってのが良いのかな。どうだろ?


4.連携の改善

ここからはブログサービスに特化した話になる。と思う。

ここでいう「連携」とは、ブログサービスの管理画面で実行する作業で、具体的には執筆した記事やその中で使用している画像を「投稿」することだ。

まずは画像だ。

自分の使っているLivedoorブログでは、FTPのサービスが2018年2月くらいに無くなった?

つ~ことは、ブログの管理画面から1枚1枚アップするしかないか。

で、別の方法としてLivedoorが用意してくれているのがFile Manager API。こいつを使って当該日のブログの画像を一括してアップし、そしてブログの内容を変更する必要もなくなれば、かなりの軽減だわ。

つ~わけで、調べる。まずはFile Manager API

File Manager APIの威力

ブログ間rに画面からFile Manager APIを使用するためのパスワードを発行。

そんでもって、画像/ファイルのファイル管理タブで、画像アップ先フォルダを作成。

続いて、画像アップ先フォルダのdir_idを調べるためにFile Manager APIのlistコマンドを叩く。コードは以下だ。

curl -s -X POST https://livedoor.blogcms.jp/blog/[俺のブログ]/file_manager/list \
-H 'Expect:' \
-H 'X-LDBlog-Token:パスワード'

結果がjsonで返ってくるので、その中でimgフォルダに対するdir_idを取得。

あとは基本的にcurlコマンドを使用して、あとfindコマンドとxargsコマンドを組み合わせて、画像ファイルを自分のブログへアップする。

find . -name '*.png' | xargs -I% \
curl -s -X POST https://livedoor.blogcms.jp/blog/[俺のブログ]/file_manager/upload \
-H 'Expect:' \
-H 'X-LDBlog-Token:File Managery API用パスワード' \
-F 'dir_id=[imgフォルダに対するdir_id]' \
-F 'upload_data=@%'

上記を画像ファイルのあるフォルダでコマンドプロンプトから実行すれば、一括でpng画像がアップロードされる。

楽だ。

ちなみに、自分のPCはGit for Windowsをインストールしていて、bashが使用できる状況です。

次に文章だが、これはブログ管理画面でいつも通り貼り付けることにした。


5.調整の改善

Atomエディタのプラグインであるmarkclipで、自動でpng画像が挿入され、その挿入されたファイル名のままアップロードしているので、ブログ本文の修正はない。

と思っていたが、やっぱり駄目だった。

画像のパスを調整しないといけない。

とりあえず、3.変換で「<img src='img\'」となっているのを「<img src="<http://devlife.blog.jp/img/'」と一括置換することで対応した。

grep -l '<img src="img\\' [pandoc変換後のhtmlファイル] | xargs sed -i.bak -e 's/<img sr c="img\\/<img src="http:\/\/devlife.blog.jp\/img\//g'


まとめ

ヤバい、楽になった。

まずはAtomエディタのmarkclipプラグインが、かなり良い。

ただ、画像形式がpngのみなので、できればjpgで保存できれば良いのだが。

あとは、File Manager API。

これは、シェルにさえ慣れていれば、curlコマンドにより画像を一括アップロード出来るわけで、この威力もかなりでかい。

つまるところ、自分は文章と画像のリンクとそれを本番環境にアップした後の調整に時間がかかっていたわけで、それがかなり解消できた。

つ~か、この文章を作成していて、やはり一番時間がかかるのは、文章を作成することだ。

文章を作成するうえで、コードを載せる場合は検証も必要でそれも時間がかかっているわけで、でもそれに集中できる環境が整ったのではないだろうか。

来年は、もう少しアウトプット増やすわ~。