https://blog.johtani.info/tags/%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3/ Recent content in プレゼン on @johtaniの日記 3rd Hugo -- gohugo.io ja Fri, 31 Jul 2026 07:54:20 +0000 https://blog.johtani.info/blog/2026/07/31/presentations/ Fri, 31 Jul 2026 07:54:20 +0000 https://blog.johtani.info/blog/2026/07/31/presentations/ <p>全然ブログ書いてなかったですね。。。</p> <p>2月にやってた内容なんですが、忘れないように書き残しておこうかなと。 プレゼンの公開には、<a href="https://noti.st/johtani">noti.st</a>を使っていました。</p> <p>そんなところに元同僚がこんなブログを書いてました。</p> <p>全然ブログ書いてなかったですね。。。</p> <p>2月にやってた内容なんですが、忘れないように書き残しておこうかなと。 プレゼンの公開には、<a href="https://noti.st/johtani">noti.st</a>を使っていました。</p> <p>そんなところに元同僚がこんなブログを書いてました。</p> <ul> <li><a href="https://david.pilato.fr/posts/2026-01-10-13-years-migrating-to-hugo-with-cursor/">🎂 13 years： Migrating my speaker page with AI | David Pilato</a></li> </ul> <p>おなじく、noti.stを使っていたのですが、コーディングエージェントを使って作業して、自分のブログに移行したと。</p> <p>noti.stは有料サービスなんですが、最近あまり外向けでしゃべることもなくなっているのにサブスクしてました。 コーディングエージェントを触ってみるいい機会になりそうだな？というのもあって、自分もチャレンジしてみることに。</p> <p>実際に出来上がった<a href="https://blog.johtani.info/presentation/">プレゼンの一覧はこちら</a>です。</p> <p>私のブログサイトはHugoを使ってビルドしたものをGitHub Pagesで公開しています。 今回Claude Codeに作ってもらったのは次のようなものです。</p> <ul> <li>noti.stからPDFをダウンロードしてHugo用のmdファイルを作るスクリプト</li> <li>PDFからスライドコンテンツからHugo用のmdファイルを作るスクリプト</li> <li>SpeakerDeckに公開しているスライドをiframe embedのHugo用mdファイルを作るスクリプト</li> </ul> <p>それぞれがPythonスクリプトになっています。 また、Hugo向けにpresentationというパスでスライドを公開するためのテンプレートなども作ってもらいました。</p> <h2 id="notistのスライドたち">noti.stのスライドたち</h2> <p>noti.stにPDFでアップロードしていました。 ダウンロードもできるようになっています。 また、noti.stにはいつのスライドで、どのイベントでしゃべったのか？スライドの簡単な概要なども入力してあります。</p> <p>ということで、スライドのタイトル、日付をダウンロード時に取得してプレゼンページのパスやタイトルに利用できるようにしてもらいました。 また、スライドを作るときにはリンクなどを埋め込んでいるのですが、PDFにもこの情報が入っています。 これらも抜き出して、スライドを表示するページに参考リンクとして表示できるようにしてあります。</p> <p>PDFから画像としてスライドを1枚ずつ抜き出しつつ、pngに変換したものを生成しています。 画像ファイルはそれなりの枚数でサイズも大きくなるため、スライドのPDFと画像ファイルだけGit LFSで管理する形にしてもらっています。</p> <p>スライドの公開ページでは、ページめくりのタイプのビューアと一覧ですべてのスライドを閲覧できる2種類を作ってあります。 コーディングエージェントにお願いすればやってくれるの本当に助かりますよね。。。 Git LFSの操作もやってくれるし。</p> <h2 id="今後のスライド用に処理の切り出し">今後のスライド用に処理の切り出し</h2> <p>また、今後もスライドを作って公開する場合はPDFで作成する予定です。 ということで、noti.stの処理のPDFから生成するところだけを切り出したスクリプトも作ってもらいました。 この仕組みに変更した後にスライドを作るタイミングがないためまだこれを試してはいないですが。。。</p> <h2 id="speakerdeckはiframe-embed">SpeakerDeckはiframe embed</h2> <p>せっかくなので、SpeakerDeckで公開しているスライドも掲載してしまおうと思い相談したところ、 SpeakerDeckはiframe embedで取り込むことができそうだということで、PDFから生成するのではない形にしてもらいました。</p> <p>なので、<a href="https://blog.johtani.info/presentation/2014/lucenetori-ben-yu-falsejian-suo/">古いスライドのページ</a>についてはビューアがちょっとおしゃれです。</p> <h2 id="まとめ">まとめ</h2> <p>2月にやってた作業についてメモを残す程度に思い出しながら書いてみました。 最初はClaude Codeと壁打ちをしながらどうするのがいいかというのを詰めていき、大体まとまったところで、Issueを作ってそれをもとに作業をやってもらう形でやっています。 いったんページめくりのものが出来上がってから、参考リンクを抜き出してみたり、一覧の仕組みも追加してもらったりしました。</p> <p>忘れないように、作ったスクリプトやディレクトリ構成、Git LFSなどに関してはメモを作ってもらっています（すごい便利）。 ちなみに、プレゼンページを作る前に、Hugoの環境をdevcontainer化してほかの環境でも楽に再現できるようにしたり、Hugoのバージョンやテーマの最新化などもやっていました。気が向いたらその辺も書くかも？（たぶん書かない。。。）</p>