ハロー!プロジェクト超大好き日記。

ハロー!プロジェクトが超大好きなので、応援したいと思っています。ぉぱょ。

長い集計データをいい感じの長い画像に変換し隊(その1)

皆さんこんにちは。もう師走ですね。

ところで細かい経緯は省きますが、長い長いエクセルのデータをいい感じの画像に変換したい事ってありませんか?ありますよね(同意ハラスメント)

Qiitaやteratailでアドバイスをもらえないか考えたのですが「クスクスクス…」と笑い者になるリスクを冒す勇気がなかったのと、なんとか自分のわかる知識で頑張ってみようと思い、またすぐに忘れちゃうので備忘録代わりにこの記事を作成することにしました。

仕様、前提条件について

入力条件

  1. データ件数(行数)は1000件超。 ※件数は不定
  2. データ形式はエクセルまたはCSV
  3. 項目はテキストと数字で構成されている。

出力条件

いい感じの画像データにしたい。
いい感じとは…

  1. 1行ごとに背景色を変更する。
  2. テキストは左寄せ、数字は右寄せにする。
  3. 項目ごとにフォント種類とフォントサイズを変更する(目立たせたいテキストを大きめにする 等)。
  4. 横幅のピクセル数は固定(今回は仮に1000pxとします)。
  5. 縦幅はデータ件数により可変(1行あたり縦50~60pxとして2000行で約100000px程度)。
  6. 最終的にpngかjpgファイルにして保存したい。

テストデータ

e-Statから適当に引っ張って来ました。
https://www.e-stat.go.jp/

なんでも良かったのですが、適当に検索して『【総計】市区町村別人口、人口動態及び世帯数』が2000件ほどだったので、以下の項目を利用。

  • 団体コード
  • 都道府県名
  • 市区町村名
  • 人口(男)
  • 人口(女)
  • 人口(計)
  • 世帯数

素のエクセルで表示するとこんな感じです。

f:id:atodesimerareru:20181201015953p:plain
元データ

エクセル上での失敗例①

何も考えず、先ずはエクセルでやってみます。

実行環境

  • Windows10(64bit)
  • Excel2016

結果

  • 出力条件1:エクセルの機能を利用。[ホーム]→[テーブルとして書式設定]
  • 出力条件2:そもそもエクセル上で書式化されているので作業不要。
  • 出力条件3:エクセル操作で適当に調整。
  • 出力条件4:はみ出ました。
  • 出力条件5:-
  • 出力条件6:-

f:id:atodesimerareru:20181201020057p:plain
エクセル上で編集(画像は横1000px)

フォント調整すりゃいいじゃん、という話なのですが、出力条件3、4は出力デバイスの制約や視認性確保(僕みたいな老齢でも目に優しく)の意図があり、必要条件なのです。

エクセル上での失敗例②(テキストの表示を複数行にして横幅を収める)

縦幅の制限は不問のため、テキスト項目を2行表示にしてみます。

f:id:atodesimerareru:20181201022025p:plain
テキスト表示を複数行にする(画像は横1000px)
ちょっと見にくいですが横幅は収まりました。上記の画像では手を加えていませんが背景色を2行ごとにする方法は先人の集合知(某ヤフー知恵袋的な)により実現できそうです。

ただ手作業で行を入れ込んでいくのは3行が限界(前世の業による贖罪的な何か?)おそらくマクロやピボットなどを駆使すれば出来そうな気もしますが、私のExcel知識ではここが限界だったので他の方法を考えることにします。

※ちなみに出力条件5もNGでした。何故かコピペしようとするとすると縦32766までしか保持してくれません。メモリかクリップボードの制約…?

HTML5(Canvas)+Javascript

実行環境

結果

  • 出力条件1~4 スクリプトを組むのが多少面倒ですが問題ありません(スクリプトの詳細は省略)。
  • 出力条件5 縦32767pxを超えると真っ黒に。Brackets 上だけかな??

あまりこだわりは無いのですが、普段使っているライブプレビューが便利なのでこの方法も除外することにします。

f:id:atodesimerareru:20181205234657p:plain
HTML5(Canvas)で縦32768pxの結果
なお以下の特徴もありました。

  • 画像は右クリックで保存可能(縦32767px以内で正常に表示された場合)。
  • 文字が若干ぼやける。

ということで500~600行程度ならこの方法もアリかも知れません。
文字のぼやけは環境依存かもしれません。興味のある方は適当にググってみてください。

ESTKの利用(一部未検証)

普段、定型処理はイラレ+ESTKを利用することが多いのですが、フォトショのクラスライブラリについては知見がないため除外することにしました(妥協)。ちなみにイラレだと単純計算で300行弱までなら大丈夫ですね。

エクセル(CSV)→RubyでHTMLに書き出し→ブラウザをスクロールキャプチャ

  • 出力条件1~4 スクリプトを組むのが多少面倒ですが問題ありません(スクリプトの詳細は省略)。
  • 出力条件5:2000件程度なら余裕で問題なし。ブラウザ最高。
  • 出力条件6:Chrome拡張(Fireshot)を利用(※但し課題あり)

ださい笑
恥ずかしい
死に至る病を発病しそう。

実は一番最初に思いついた方法がこれ。今は暫定的にこの方法に落ち着いているのですが、もっとクールな方法はないのか?と思ったのがこの記事を投稿するきっかけでした。

ただ、この方法も1点課題がありまして、スクリーンキャプチャにはFireshotを使用しているのですが、PCのスペックが低いせいかたまに画像がずれてしまいます(内部的に画像を結合していると思うのですが、部分的に重複して短く切れてしまっている)。

で、どうしているかというと手動で10回くらい取り直して同一ファイルサイズのものを成功とみなして、さらに念のため目視チェック笑。原始人かよ。また横幅もぴったり合わせようとすると結局手作業が必要になります。

他のソフトも調べるのが面倒&アドウェア怖い病のため試していません(妥協)。Chromeのキャプチャ機能は縦9999px(16387px?)の壁があるのと、横幅の制御が思った通りに出来なかったためやめました。なんか全編に渡り面倒くさがりで大変恐縮です。ぱっと思いついた方法でさっとやりたいんですよー。

ただ、キャプチャについてはインターネット世界にてPuppeteerというワードを拾えたので後日試す予定です。成功するといいな。

本日はここまで!