はじめに
ういっす✌️ nikkieです。
自作したPythonライブラリのリリースのお知らせです。いえーい！🎉
目次
HTML製スライドのあるページを、画像で保存したい！
私は発表資料の作成にsphinx-revealjsを使っています。
発表資料の実体は、1枚のHTMLです。
この発表資料について、表紙のスライドを画像にしたいというニーズが私にはあります。
発表資料のURLをTwitter（X）でシェアするときに、OGPに画像を設定するとツイートの見た目がいい感じになるからです。
例（「アイうたはいいぞ」という画像は発表資料の表紙です）
エンジニア界隈にはlightning talk（短時間の稲妻トーク）という文化があります。#アイの歌声を聴かせて あまりにも好きすぎるため、ネット接続あればいつでもどこでも布教LTできる準備が整いました🙌（ネタバレなしのはず）https://t.co/h3x7MU0oGK
— nikkie にっきー (@ftnext) 2021年12月13日
前向きになれるからみんな見て！ゼッタイ見て！！
それ hayasaka でできるよ
今回リリースした hayasaka を使って、発表資料の表紙（広く言えば、URLで指定したページ）を画像にできます！
$ pip install hayasaka $ hayasaka-cli https://ftnext.github.io/2021_slides/ainouta/recommend_as_best.html awesome_aiuta.png
hayasakaは（現在はGoogle Chromeに未対応で）Firefoxのインストールが必要です。
実装としては、Firefoxを操作してURLを開き、スクリーンショットを撮影しています。
スライド作成するさなかでWebにまだ公開していない場合も、ローカルのHTMLファイルの絶対パスをfile://で始めることで hayasaka で画像にできます1。
$ hayasaka-cli file:///Users/.../build/revealjs/ainouta/recommend_as_best.html awesome_aiuta.png
hayasaka開発秘話
元のスクリプトはこちらです。
先日の stapy StreamlitトークスライドにOGP画像設定してみましたー。
— nikkie にっきー (@ftnext) 2021年8月14日
Card validatorに写ったあああ！https://t.co/JhTz45DEAH 参考に、ローカルに置いたReveal.jsスライドをブラウザ操作自動化でスクショし、それをOGP画像に設定してGitHub Pagesで公開しています。
あとは毎回の設定の自動化！ pic.twitter.com/ajkaZOL2xB
これまでずっとこのスクリプトを動かしていましたが、pipでインストールできるようにすればいいと気づいてライブラリ化し、このたび0.1.0を公開しました。
「ブラウザでスライド（HTML）を開いてスクリーンショットを撮ることによって画像化する」というアイデアは（上のツイートにも挙げていますが）以下のリポジトリを参考にしました2（JavaScriptを読んでPythonで実装。多謝）
終わりに
OGP画像に使うために、HTMLファイルで作ったスライドの特定のページを画像として保存したいというニーズを叶えるスクリプトを、このたびライブラリとして公開しました。
hayasaka、よろしければお試しください！
スライドに限らず、URLを指定したら画像にできちゃいます！
PyPIを指定した例
P.S. hayasaka（はやさか）って、誰よ
かぐや様かなと思った方？
🎂Happy Birthday!!🎂
— アニメ「かぐや様は告らせたい」公式 (@anime_kaguya) 2019年4月1日
本日4月2日は #早坂愛 のバースデー(公称)❣️苦労が耐えない彼女にも、ムフー♡なバースデーがやってきますよう❣️早坂、そしてハーサカ、誕生日おめでとう！🎂#早坂愛生誕祭2019🎂 (公称)#かぐや様https://t.co/tCRKbWsEHr pic.twitter.com/f9Tj0YBnff
GREE時代からミリオンライブまでお世話になってる早坂さんです！
＼#早坂そら さんのCVを発表📣／
— アイドルマスター ミリオンライブ！【ブランド公式】 (@imasml_765PRO) 2023年8月18日
アイドル達の素敵な写真を撮ってくれる
早坂そらさんも #ミリアニ に登場します✨
早坂そら役は「#杉山里穂」さん！
早坂さんの活躍もぜひ、
ぜひ劇場でチェックしてください♪ pic.twitter.com/wcqALA0adh
エミリーちゃんはじめ、素晴らしい写真の数々いつもありがとうございます！🤗
また、コマンドをhayasaka-cliという命名にしているのはmermaid-cliの影響です。
-
flle://というスキーマの指定を不要にするのは近く実装予定です↩ - https://github.com/mikkame/reveal-pon/blob/d04bbca2f2e556661917630b6516ee40f9b9ffb6/tools/screenshot.js↩
