2022-05-07

配信してたらいろいろやったことを書きたくなってきたので、r7kamuraさんのGithub Issues Blogを試してみる

https://github.com/r7kamura/gialog

Use this template から作成するだけなので簡単。

でもこの画面で Include all branches にチェックを入れるのを忘れてしまった

結局チェックを入れ忘れたときのリカバリ方法が分からなかったので（調べれば分かるかもだが）、いったんリポジトリ消して新しく作り直したら上手くいった

homeページ

記事ページ

GitHub Pagesの有効化

• https://r7kamura.com/articles/2022-05-06-github-pages-and-template-repository

• gh-pagesというブランチを予めテンプレートリポジトリ側に用意しておき、利用者に ☑ Include all branches のチェックを付けながらリポジトリを作成してもらうように案内すると良い。GitHubでは、初めてリポジトリを作成した時点でgh-pagesというブランチが存在する場合、自動的にそのリポジトリでGitHub Pagesが有効化されるようなので、この方法が成立する。

• gh-pagesブランチを用意しておかないとsourceブランチが設定されないのが問題だった
• リポジトリをprivateにすると強制的にnoneに設定される
  • publicに戻した後はブランチを設定し直す必要がある

• デフォルトだと誰でもissueが書けてしまうのでそれを制限したい
  • privateリポジトリにすれば非公開になるけど、それだとブログのほうも見えなくなってしまうっぽい
  • なんか有料版だと制限できるっぽい
• 議論が過熱したとき用のオプションとして一定期間制限するモードがあるようなのでそれで設定してみる

• collaboratorが居ないので実質自分のみ書けるモードになった
• 6ヶ月後に荒らされないようにしたい

OBSカスタマイズ

• 連日配信ソフトのobsのカスタマイズをしている
• r7kamuraさんの配信を見ているといろいろこうしたいという話が出てきて、それで自分も調べていろいろやっていってる。

ポモドーロタイマー

• https://obs-pomo.vercel.app/
  • https://github.com/miyaoka/obs-pomo
  • 最初はOBSの内蔵ブラウザで取り込む用のサイトを作り、これで運用していた
• けど、作業用、休憩用のシーンを作ってそこにそれぞれタイマーを置くほうが良さそうだったので今日はそうしてみた

作業中

作業中（RTA）

休憩中

• とりあえず3つシーンを作ってみた
• アーカイブで振り返ったりするときに、どこで話しているのかが視覚的に分かりたいなと思ったので、オーディオビジュアライザーを追加してみた

OBSのソースオブジェクトは全てが参照

• これはずっと分かってなかったのだけど、OBSに追加するソースはアイテム名が固有のIDという扱いになっていて同名のソースは作れない
• 別シーンにコピーした場合別のインスタンスになるものだと思っていたけど、同名のアイテムは同一のものになっている
  • つまりサイズを変えれば複数シーンに配置された同名アイテムは同様に変更される
• 作業中のタイマーは、作業中、RTAの両方のシーンに配置していて、このシーン間で遷移する場合はカウント状態が破棄されない
• 休憩中シーンに移ると作業中タイマーが存在しないので状態が破棄される

オーディオビジュアライザーの設定

• waveformというプラグインを入れる
• https://github.com/phandasm/waveform/releases

• 設定がいろいろある
• まずはマイクを入力ソースにする
• 人間の声の周波数は概ね100-1000Hzくらいらしいのでlowcut/highcutをその値に設定するとちょうど喋ったときだけ反応する感じになった

カウントダウン終了したら別シーンに切り替える処理を追加

• カウントダウンのscriptはobsのデフォルトで ツール > スクリプト > ＋（追加） から countdown.lua というものが利用できる
• 今回はこれを編集していくつか機能を足した
• Advanced Scene Switcherというものでもシーンを表示後に一定時間経過で別シーンに自動切り替えができるとのことだが、カウントダウンのスクリプト自体で処理してみたいのでやってみた

ソース

https://gist.github.com/miyaoka/5d41640fbba913ccc721fc3bd0547344

nextシーンの設定

• 遷移先のシーンをUIで選べるように設定を追加する（Next Scene）
• これはpause-scene.luaというデフォルトのコードにそういう処理があるので真似すれば良い
• function script_properties() のところがプロパティ設定なので、ここにシーン一覧を選択肢としたプロパティ設定欄を追加する

カウントアップ時に遷移

• いろいろ調べてみて、obs.obs_frontend_set_current_scene() をやれば良さそうだったがうまくいかない
• https://stackoverflow.com/questions/62083546/improve-countdown-lua-in-obs-to-change-scenes-when-timer-complete
• プロパティで保持したのはシーン名のstringだったので、obs.obs_get_source_by_name() でシーンを取得する必要があった

理想のポモドーロ運用法

• 作業中 -> 休憩中 は自動で切り替わってほしい
• 休憩中 -> 作業中 は任意のタイミングで切り替えたい
• という気がしている
• なので、作業時間終了時は前述の機能で自動切り替えし、休憩終了時はカウント0の状態で停止させている
• これは、long break（数セット後に取る長めの休憩）の扱いをどうしようかというところがある
  • デフォルトのポモドーロでは25分作業5分休憩で4セットごとに追加で20分休憩といった運用
  • 現在は50分作業10分休憩にしているので時間的に2セット毎に長めの休憩にするか4セットで1セット分休むか、といったところがシステム的に決めづらい
• このへんフレキシブルに運用したい気がするので、休憩終了時はアラームだけ鳴らして、作業開始は手動でシーン切り替えが良さそうに思う

RPCEを@crxjs/vite-pluginに更新

• https://dev.to/jacksteamdev/rpce-is-moving-to-crxjsvite-plugin-2lmi
• viteでchrome拡張を作る際の便利プラグインが最近新しくなっていたので更新した

• migration用のscriptが用意されていてありがたい
• ただ起動してみるとエラーになった

• defineManifestを読んでいる部分までは書き換えてくれなかったのが原因だった

Twitter web用 chrome拡張

最近viteでchrome拡張を2つ作った。まだ試し中という感じでstoreには公開してない

twitter漫画リーダー

• source

  • https://github.com/miyaoka/twitter-comic-reader

• demo

  • https://twitter.com/miyaoka/status/1497834862765821953
  • 

• これはケモ夫人などのようなリプライツリーで展開していく漫画を読みやすいようにするためのもの

  • 一つのツイート内の画像はクリックしてから左右で遷移できるけど、次のツイートの画像を見るには一旦閉じて次のツイートを選ばないといけない
  • この拡張を入れると自動的に次のツイートの画像に遷移できる

• 一点問題があって、逆に左キーで前のツイートに遡っていくところでは前ツイートの最後の画像を選択しているにも関わらず最初の画像が表示されてしまうことがある

  • これはtwitterのUIのバグであって、この状態になってしまうと表示とインデックスがずれてうまく左右で移動できなくなる
  • 一応その状態を回避するために上下キーで前後ツイートの最初の画像を表示する動作を実装している

twitter広告除去

• source
  • https://github.com/miyaoka/twitter-ad-cleaner
• こっちはまあtwitter社の収益を損ねてしまうので将来的にもstoreには公開しない
• とにかくtwitterは広告が出すぎで、有料機能で無くせるのなら課金するかもしれないが今のところそういうのが無いので除去するようにした
• dom構造から広告と判定するためのセレクタを頑張って算出した。いろいろ泥臭い

YouTube用のチャプター自動生成案

• アーカイブ見返すとき用にチャプターつけたいねと話していたら、シーン切り替え時に現在日時をテキスト書き出ししたらいいかもとコメントもらった
• 概要欄に時刻とタイトルを書けばチャプター化されるので、obsで書き出してyoutubeに貼ればいけそうな感じする
• youtubeAPI使ってobsから概要に書き込むとかできれば最高かもしれない

チャプター記述のルール

https://find-model.jp/insta-lab/youtube-chapter/

• かならず00:00から始める
• 最低3チャプター以上必要

こんな感じの記述をしたところチャプターになった

00:00 start
14:06 work#1
1:04:06 break#1
1:14:11 work#2
2:04:11 break#2
2:14:24 work#3

自動化するには？

• https://obsproject.com/docs/reference-frontend-api.html
• OBS_FRONTEND_EVENT_STREAMING_STARTED で配信開始時刻を記録
• OBS_FRONTEND_EVENT_SCENE_CHANGED で現在時刻と配信開始時刻の差分、現在シーン名を記録（ファイルに書き出すのが難しければログでも良さそう）
• こうしたスクリプトを作ってログから概要欄に貼り付ければいけるのではないか？