スライド自動めくり
by hogas (MMA)
この scrapbox に今すぐ join → 招待リンク公開完了
/icons/star2.iconメリークリスマス/icons/star2.icon
hogas
hogas / hogashi
電気通信大学 学部4年
MMA
今朝ネタを思いついて実装しました
今すぐ join → 招待リンク公開完了
インストールしてみてください
自分のページにこれを書く↓
code:script.js
import '/api/code/hogashi-pub/スライド自動めくりスクリプト/script.js';
うまく動かなかったらページリロードしたりとか
/icons/star2.iconメリークリスマス/icons/star2.icon
動作確認用
/icons/star2.iconメリクリ/icons/star2.icon
動作確認用
めりくり
めくり
スライド自動めくり
スライド自動めくり
の scrapbox 版
「Start presentation」でできるやつ
/icons/idea.icon文書の同期を使えるのでは？
動かす人がページをめくったら、
文書を書き換えて
見る人に伝わって
ページがめくられる
Start presentation
そもそものスライドをめくる仕組みとは？
「Start presentation」を押すと
div.app.presentation > style が変わる
code:ページ0のときcss(css)
.lines .line:not(.section-0) {
display: none;
}
該当ページ以外 CSS で消してる
ページ内容は変わってない
めくるのは JS でお洒落に実装されてそう
いじれなさそう
めくる
同じ場所を、同じように書き換える
div.app.presentation > style
これでページングはできる
元々のは壊れる
まあしょうがないネ
めくる
どうやって皆のページをめくるか
動かす人と見る人をつくって、めくったことを伝える？
JS で文書に書き込んで反映させる？？
雑に innerText を書き換えてもダメ
めっちゃ難しい/icons/party parrot.icon
めくる
どうやって皆のページをめくるか
動かす人は、別窓でもうひとつ普通に開いておく
そっちで特定の場所に文字を書く
code:ページ数とか決め打ちで
文字数をページ数とする
見る人側では
それの変化でページをめくる
めくる
https://gyazo.com/8526e9fb85f21ccff78ee7e2ea566231
左側で文字を書く
文字数に応じて、右側が勝手にめくられる
他の皆もめくられる
↑code:このcodeを消さないでやってみた例
querySelectorで頑張って要素を取得
MutationObserverで変更を監視
めくられない
勝手にバンバンめくられると困るときもある
もう少し読みたいとか
めくられないモードも必要
チェックを外すと、めくられない
チェックをつければ戻る
https://gyazo.com/57d720d95e908cd7900b9d83ba7e7018
ページャ
code:このcodeを消さない
↑ここに文字を打つ
打った文字数がページ数になる
ここまでめくると格好がつかない
おしまいページをつくって気を付ける
もっと格好良い方法があったらやりたい
本当は文字列自体をプログレスバーみたいにしたい!!!
ありがとうございました
補足
チェックボックスとか