皆さんこんにちは。もう師走ですね。
ところで細かい経緯は省きますが、長い長いエクセルのデータをいい感じの画像に変換したい事ってありませんか？ありますよね（同意ハラスメント）
Qiitaやteratailでアドバイスをもらえないか考えたのですが「ｸｽｸｽｸｽ…」と笑い者になるリスクを冒す勇気がなかったのと、なんとか自分のわかる知識で頑張ってみようと思い、またすぐに忘れちゃうので備忘録代わりにこの記事を作成することにしました。
仕様、前提条件について
出力条件
いい感じの画像データにしたい。
いい感じとは…
テストデータ
e-Statから適当に引っ張って来ました。
https://www.e-stat.go.jp/
なんでも良かったのですが、適当に検索して『【総計】市区町村別人口、人口動態及び世帯数』が2000件ほどだったので、以下の項目を利用。
- 団体コード
- 都道府県名
- 市区町村名
- 人口（男）
- 人口（女）
- 人口（計）
- 世帯数
素のエクセルで表示するとこんな感じです。
エクセル上での失敗例①
何も考えず、先ずはエクセルでやってみます。
実行環境
- Windows10(64bit)
- Excel2016
結果
- 出力条件1：エクセルの機能を利用。[ホーム]→[テーブルとして書式設定]
- 出力条件2：そもそもエクセル上で書式化されているので作業不要。
- 出力条件3：エクセル操作で適当に調整。
- 出力条件4：はみ出ました。
- 出力条件5：-
- 出力条件6：-
フォント調整すりゃいいじゃん、という話なのですが、出力条件3、４は出力デバイスの制約や視認性確保（僕みたいな老齢でも目に優しく）の意図があり、必要条件なのです。
エクセル上での失敗例②（テキストの表示を複数行にして横幅を収める）
縦幅の制限は不問のため、テキスト項目を2行表示にしてみます。
ただ手作業で行を入れ込んでいくのは3行が限界（前世の業による贖罪的な何か？）おそらくマクロやピボットなどを駆使すれば出来そうな気もしますが、私のExcel知識ではここが限界だったので他の方法を考えることにします。
※ちなみに出力条件5もNGでした。何故かコピペしようとするとすると縦32766までしか保持してくれません。メモリかクリップボードの制約…？
HTML5(Canvas)+Javascript
ESTKの利用（一部未検証）
- Illustrator →縦16383pxの壁
- Photoshop → 縦300000px！キタコレ（但し未検証）。
普段、定型処理はイラレ+ESTKを利用することが多いのですが、フォトショのクラスライブラリについては知見がないため除外することにしました（妥協）。ちなみにイラレだと単純計算で300行弱までなら大丈夫ですね。
エクセル（CSV）→RubyでHTMLに書き出し→ブラウザをスクロールキャプチャ
- 出力条件1～4 スクリプトを組むのが多少面倒ですが問題ありません（スクリプトの詳細は省略）。
- 出力条件5：2000件程度なら余裕で問題なし。ブラウザ最高。
- 出力条件6：Chrome拡張（Fireshot）を利用（※但し課題あり）
ださい笑
恥ずかしい
死に至る病を発病しそう。
実は一番最初に思いついた方法がこれ。今は暫定的にこの方法に落ち着いているのですが、もっとクールな方法はないのか？と思ったのがこの記事を投稿するきっかけでした。
ただ、この方法も1点課題がありまして、スクリーンキャプチャにはFireshotを使用しているのですが、PCのスペックが低いせいかたまに画像がずれてしまいます（内部的に画像を結合していると思うのですが、部分的に重複して短く切れてしまっている）。
で、どうしているかというと手動で10回くらい取り直して同一ファイルサイズのものを成功とみなして、さらに念のため目視チェック笑。原始人かよ。また横幅もぴったり合わせようとすると結局手作業が必要になります。
他のソフトも調べるのが面倒＆アドウェア怖い病のため試していません（妥協）。Chromeのキャプチャ機能は縦9999px（16387px？）の壁があるのと、横幅の制御が思った通りに出来なかったためやめました。なんか全編に渡り面倒くさがりで大変恐縮です。ぱっと思いついた方法でさっとやりたいんですよー。
ただ、キャプチャについてはインターネット世界にてPuppeteerというワードを拾えたので後日試す予定です。成功するといいな。
本日はここまで！
