Raspberry Pi+RaspbianでHTMLを画像化 する

#おはよう #ロカボ #朝食 タイム⌚
台風10号の影響で今朝は涼しい顔雨☔
昨日夕食で体重60.0kgまで戻しちゃいましたね。たまの息抜き。さて、今日からまた普段通りにするぅ〜♪ pic.twitter.com/07zA754t4I

— Satoshi Miura ⊂('ω'⊂ (@smiura3000) 2016年8月29日

Twitterは140文字の制限があるため、 URL分の23文字を消費するかわりにそれ以上の情報を画像として掲載する事があります
私のアカウントでも 自前のホームページ（HTML）を画像化して良く掲載するのですが、それをRaspberry Pi + Raspbianで作っています。
今回はその作り方を紹介します。

CutyCaptをインストール

まずCutyCaptをインストールします。

$ sudo apt-get install cutycapt⏎

インストールができたら試しに実行してみます。

$ cutycapt⏎
cutycapt: cannot connect to X server

するとこういうメッセージが出ます。X serverに接続できませんでしたというメッセージです。
このアプリはX Window Systemと呼ばれるLinuxではメジャーなGUIが使われている ため、CLIで実行するとこのようなエラーメッセージが表示されてしまいます。
このままでは使えないため、X Window System をCLIで仮想的に動かすソフトをインストールします。

Xvfbをインストール

X Window SystemをCLIで仮想環境を作り出すXvfbをインストールします。

$ sudo apt-get install xvfb⏎

インストールが完了したら試しに実行してみます。

$ xvfb-run --auto-servernum --server-args="-screen 0, 1024x768x24" cutycapt⏎
Xlib:  extension "RANDR" missing on display ":99".
 -----------------------------------------------------------------------------
 Usage: CutyCapt --url=http://www.example.org/ --out=localfile.png
 -----------------------------------------------------------------------------
  --help                         Print this help page and exit

〜 省略 〜

  --http-proxy=             Address for HTTP proxy server (default: none)
 -----------------------------------------------------------------------------
   is svg,ps,pdf,itext,html,rtree,png,jpeg,mng,tiff,gif,bmp,ppm,xbm,xpm
 -----------------------------------------------------------------------------
 http://cutycapt.sf.net - (c) 2003-2010 Bjoern Hoehrmann - bjoern@hoehrmann.de

こんな感じで表示されれば成功です。

HTMLを画像化してみる

まず、 画像化するためのホームページを用意します。
今回は 説明の便宜上、このホームページURLをhttp://localhost/weightview.phpとします。

下記コマンドを実行します。

$ xvfb-run --auto-servernum --server-args="-screen 0, 1024x768x24" cutycapt --url=http://localhost/weightview.php --out=out.png⏎

--url=が画像化するURL、--out=が出力する画像ファイル名です。

実行したディレクトリ直下にout.pngというファイルが出来ます。
もし、余白が気になるようならオプションで--min-width=が横幅 --min-height=が縦幅で指定すると縮める事が出来ます。

シェルスクリプトで簡単実行

Xvfb +cutycaptを毎回コマンドラインで 打つのは長いですよね。
そこで、それを簡単に使うためのシェルスクリプトを作ります。

$ nano html2png⏎
↓↓↓ 編集内容 ↓↓↓
#!/bin/bash
/usr/bin/xvfb-run --auto-servernum --server-args="-screen 0, 1024x768x24" \
/usr/bin/cutycapt --url=$1 --out=$2 --min-width=$3 --min-height=$4
↑↑↑ここまで↑↑↑
 $ chmod +x html2png⏎

これで出来上がり。
試しに実行してみます。

$ html2png http://localhost/weightview.php out.png 800 800⏎

これで画像が できたら完成です。

応用範囲が結構広い

今まではクライアントコンピュータのOSのスクリーンショット撮影機能で対応していたのですが、毎回それが手間 でした。
また、範囲指定もマウスでゴリゴリするので、微妙に差が ありました。

今回の仕組みを作ってからSNSへのアップロードも楽ちん♪
画像レイアウトも作ろうか検討中です。