このブログは、【みんなのITもくもく会】自己紹介 Advent Calendar 2020 - Adventar8日目の記事です。
実はやってたstand.fm。わたしは基本的に、stand.fmはPCで録音して配信しています。
stand.fmはスマートフォンでしか使えないアプリなのですが、外部音源取り込み機能があるので、そこからOneDriveに保存した音源を読み込み、貼り付けて使っています。
OneDriveアプリをあらかじめ設定しておけば、とくに面倒なことなく音源を取り込むことができるので、不便なくPCからの取り込みが可能です*1。
カバー画像を自動生成する
さて。そんなstand.fmですが、自分のフォロワーに毎回カバー画像にタイトルを埋め込んでいる人がおり、ちょっとやってみたいなーと思っていました。
その方は仕事でAdobe製品を使っているとのことで、毎回画像は手作りとのことだったのですが、そこはわたしです。ただ作るだけじゃつまらない。プログラミングで作らなくちゃ。
ということで作ったのが今回のstand.fm画像作成ツールです。
なお、ソースコードはGithubにて公開しております。必要だったらテンプレートやフォントを変えて各自お好きな画像を作ってください。
やったこと
とりあえず最近使ってるのでPythonで。画像を作るならPIL(Python Image Library)だろと思いましたが、文章のワードラップとかフォントの調整とかをやろうとするとけっこう面倒。
なにかいいものがないかと探してみると、あるじゃないですか、HTMLを画像として取得できるライブラリが。
これは以前使ったPDFKitの兄弟モジュールみたいなもので、HTMLを画像に変換することができるというモジュール。
使い方はPDFKitとあまり変わらないため、PDFKitで悪戦苦闘した自分なら簡単です。
でもWebkitなんだよね・・・
でも、ImgKitはPDFKitと同じく、WebkitエンジンでHTMLをレンダリングします。
これが結構くせ者で、Chromeなどとはかなり違った*2レンダリングを行います。
いちおうWindows用のWebkitブラウザもあるにはあるのですが*3、手軽に作るのにいちいちWebkit用に調整するのは面倒くさい。
どうにか良い方法はないものか…。
そこでSeleniumですよ
そこでもう一つ見つけたのが、Seleniumのスクリーンショット機能を使うというもの。
ヘッドレスブラウザとしてChromeを立ち上げ、画面を撮影すれば、Chromeとまったく同じ見た目で画像データを作成することができます*4。これは非常によい。
ということで作ったのが今回のツールです。
動作の流れ
今回やったのは非常に簡単です。
コマンドラインオプションで日付やテーマを受け取り(省略した場合は今日の日付や、あらかじめ曜日で定めたテーマを使用*5 )、もしmp3がすでにあればそのID3タグに設定されているタイトルを取得*6してそれを使用します。
エクスプローラからもその辺の設定がある程度調整できるよう、無駄にGUIも作りました(GUIモジュールの動作確認という側面もあるのですが)。オプション--guiをつけると、簡単なGUI画面が立ち上がります*7。
ここでOKを押すと、OneDrive上のフォルダにout.pngという名前で画像が作られます。
これをそのままスマートフォンから参照すれば、それっぽいカバー画像のついた投稿ができるという仕組み。
なお、ID3タグに書き込んだタイトルやコメントは、PushBulletを使ってスマートフォンに渡します。
今までは同種のソフトとしてJoinを使ってたんですが、なかなか設定が独特で、機種変更(や端末初期化)の時の再設定が面倒・・・。
いちおうOGPにも対応
いちおう画像のサイズを調整して、OGPでも枠線が表示されるようにしています。ただの背景つきピンクでは物寂しいので。
このへんの設定も、Less(CSS)ファイルをいじれば結構よろしくやってくれるのがHTMLデザインのいいところですね。
今回得た学び
HTML/CSSがある程度以上できる人が画像やPDFを作るときは、下手にLaTeXや画像処理を学ぶより、HTML書いた方がいい というのは個人的な思いでしたが、これをPythonのモジュールからも実現できるということがわかりました。
こちらについては今後も、定型的な画像を作成する機会などに使えるのではないかと思います(まあ今回はローカル環境で動作するだけだったのでSeleniumが使えましたが、たいていの場合はImgKitかな・・・)。
TkSugarの動作テストもできたしとりあえずわたしはそれなりに満足です。
ただ、タイトルのワードラップ回りなどいろいろできそうなところはあるので、もうちょっと時間を見つけていじってみたいですね。
*1:本当はstand.fm自体がPCからの直接アップロードに対応してくれれば一番楽なのですが
*2:とくにフォント方面で
*4:title.py 75行目 あたり
*5:title.py 26行目あたり
*6:title.py 36行目あたり
*7:title.py 43行目あたり
