現在2019/01/04。明けましておめでとうございます。

前回、ブログの執筆環境を改善しようという事で、主にエディタ周りから実際のブログサービスへの連携までを改善して実際にブログを書いてみました。

実は細かなところで改善点がいくつか見つかったので、そいつらを列挙しつつ、更に改善していってアウトプット頻度向上を目指します。



前回の改善だけではだめだった箇所

いきなりだけど、現時点でダメなところを列挙します。

  • 画像のサイズがバラバラで、時にはデカすぎてブログ幅を突き抜けて表示される
  • 画像が大きくて、ブログ表示時に時間がかかる
  • htmlに変換、変換後の画像パスをブログアップ時のパスに置換、画像のアップロードなど複数処理を一括で実施したい

やはり画像系に難あり、です。

そもそもAtomエディタのプラグインであるところのmarkclip、非常に便利です。

便利なのですが、画像形式がPNGだけだとか、画像サイズ貼り付け時のデフォルト設定が出来ないだとか、ちと痒い所に手が届いていない。

他のプラグインを探すべきなのかもしれないけど、インターネットを調べたけどよく分らん!

というわけで、どうせLivedoorブログに画像アップロードとかシェルで実行するので、それだったらPandocの変換から画像のリサイズまで全部シェルで実行してやろうじゃないか!

ImageMagickの導入

画像のリサイズのためだけにImageMagickを導入します。良い子はマネしないほうが良いのかもしれない。

Convert, Edit, Or Compose Bitmap Images @ ImageMagick

Windows版はダウンロードページの下のほうにあります。自分の使用PCはWindows10の64bitなので、2019/01/04(Fri)時点の最新版であるImageMagick-7.0.8-23-Q16-x64-dll.exeをダウンロード&インストールします。

自分のブログ記事の横幅は820pxです。

画像の表示幅を820pxに指定して、その画像をクリックしたら原寸大で表示ってのも良いのですが、見る立場からすると何の操作もなく把握できるほうが良いんじゃないか、という推測のもと、画像のサイズ自体を820px以内に変えます。

そして、俺は画像が縮小されても読み手に意味を把握できるような、そんな記事を書かなきゃいかん。そういうわけだ。

これの利点は、読み手の操作無しの理解だけでなく、書き手として画像に対してリンクを貼ったりしなくてよいということ、そして画像サイズの縮小によりサーバーリソースの軽減ということがある。

じゃあ、実際にImageMagickを使ってみる。

画像のサイズ取得

以下のコマンドで対象画像の幅が取得できる。

magick identify -format "%w\n" [画像ファイル名]

画像のリサイズ

以下のコマンドで画像のサイズを変更できる。

magick mogrify -resize [変更したいサイズ(この場合820)]x [画像ファイル名]

今回は幅のみ指定したサイズに変更し、それに合わせてアスペクト比を変更することなく高さも変更する。

上記コマンドの"x"の後に何も指定しないとアスペクト比に合わせて高さも変更してくれる。はずだ。

以上を踏まえて、画像の幅が820を超えるようなら820にリサイズする、っていうシェルを組む。

ついでに、htmlに変換、変換後の画像パスをブログアップ時のパスに置換、画像のアップロードも組み合わせて、1つのシェルにまとめてみる。


自動化シェル

echo "************************************************************"
echo `date +"%Y/%m/%d %H:%M:%S"` $0 開始
echo "************************************************************"

# 定数定義
LIMITSIZE=820
REGEX="^\.\/blog\_[0-9]{8}\.md$"
TARGET_URL="https://livedoor.blogcms.jp/blog/[俺のブログ]/file_manager/upload"
TOKEN="[File Managery API用パスワード]"
DIR_ID="[imgフォルダに対するdir_id]"

# blog記事ファイルの存在チェック
echo "blog記事ファイルの存在チェック"
BLOG_FILE=""
for file in `\find . -name "blog_*.md"`; do
  if [[ $file =~ $REGEX ]]; then
    BLOG_FILE=$file
  fi
done
if [ -z $BLOG_FILE ]; then
  echo "blog記事Markdownファイルが存在しません"
  exit 1
fi

# blog記事ファイル名、変換後ファイル名の取得
echo "blog記事ファイル名、変換後ファイル名の取得"
BLOG_FILE_MD=${BLOG_FILE#\.\/}
echo $BLOG_FILE_MD
BLOG_FILE_BASENAME=${BLOG_FILE_MD%.*}
BLOG_FILE_HTML=$BLOG_FILE_BASENAME.html
echo $BLOG_FILE_HTML

# Markdown->html変換
echo "Markdown->html変換"
pandoc $BLOG_FILE_MD -o $BLOG_FILE_HTML

# htmlファイル内の画像パスの変換
echo "htmlファイル内の画像パスの変換"
grep -l '<img src="img\\' "$BLOG_FILE_HTML" | xargs sed -i.bak -e 's/<img src="img\\/<img src="http:\/\/devlife.blog.jp\/img\//g'

# 画像のリサイズ
echo "画像のリサイズ"
cd ./img
fcnt=0
for file in `\find . -name *.png`; do
  # 画像幅取得
  width1=`magick identify -format "%w\n" $file`
  if [ $width1 -gt $LIMITSIZE ]
  then
      fcnt=`expr $fcnt + 1`
      # 画像リサイズ
      magick mogrify -resize ${LIMITSIZE}x $file
      width2=`magick identify -format "%w\n" $file`
      echo "("$fcnt")"$file":"$width1"->"$width2
  fi
done

# 画像のアップロード
echo "画像のアップロード"
find . -name "*.png" | xargs -I% curl -s -X POST $TARGET_URL -H "Expect:" -H "X-LDBlog-Token:$TOKEN" -F "dir_id=$DIR_ID" -F "upload_data=@%"

echo ""
echo "************************************************************"
echo `date +"%Y/%m/%d %H:%M:%S"` $0 終了
echo "************************************************************"


まとめ

いや、まぁ、なんつ~か、作成したシェルについては、エラー処理が不十分なところがあったりと、つたない部分はあるが、俺としてはこれでも十分に自動化できたなぁ、と満足している。

一応、俺のPC上での実行の仕方を書くと、例えば今日のブログを書こうと思ったら、

Dropboxの特定のフォルダの下に今日日付のフォルダ作って、その下にblog_YYYYMMDD.md作って、更にimgフォルダ作って、blog_YYYYMMDD.mdをAtomで開いて記事書いて、必要とあらば画像を貼り付けて、そしたら自動でimgフォルダに画像も作られて。

執筆が終わったら、今日作ったシェルはどこかパス通したところに置いておいて、今日日付フォルダ上でコマンドライン開いてシェルを実行。

あとは、ブラウザーでブログ管理画面開いて変換後の文章htmlを貼り付けて保存。

こんな感じで、今流行りの「自動化」というヤツがある程度出来た。気がする。そんな気がする。






自己満足ばんざい