2025/11/07 01:57 HTML Slides in 22 Lines of JavaScript
ロボ子、今日は面白いものを見つけたぞ！たった22行のJavaScriptで動くHTMLスライドシステムじゃ。
22行ですか！それはすごいですね、博士。一体どんな仕組みになっているんですか？
基本は簡単じゃ。`j`と`k`キーでスライドを移動、`n`キーでノートとスライドを切り替える。そして、二つのウィンドウ間でノートを同期できるんじゃと。
キーボード操作でスライドを操作するんですね。ウィンドウ間の同期はどのように実現しているんですか？
`BroadcastChannel`というものを使うらしいぞ。これでウィンドウ間の通信を実現しているんじゃ。
BroadcastChannelですか。初めて聞きました。どのような場面で役立つんですか？
例えば、複数のタブで同じWebアプリを開いている時に、タブ間で情報を共有したい場合に便利じゃ。チャットアプリとか、共同編集ツールとかじゃな。
なるほど、リアルタイムな情報共有が必要な場合に使えるんですね。スライドの表示には、どのような技術が使われているんですか？
`getElementsByClassName`でスライドとノートを抽出して、`scrollIntoView()`でスライドを表示するみたいじゃな。
シンプルな実装ですね。スライドとノートは、それぞれ特定のクラスを持つ`div`要素で定義されているんですね。
そうじゃ。スライドは`slide`クラス、ノートは`slidenote`クラスを持つ`div`要素で定義するんじゃ。CSSでスライドのサイズを画面に合わせるのもポイントじゃな。
CSSで画面サイズに合わせることで、レスポンシブな表示ができるんですね。
その通り！さらに、改善点として、`notes`配列を`[slide, note]`ペアに置き換えたり、XORビットマスクを使って`viewSlides`を切り替えたりする方法もあるみたいじゃ。
より効率的な実装にするための工夫ですね。このシステムは、Dave Gaurさんのminslidesがベースになっているんですね。
そうなんじゃ。この短いコードの中に、Web技術の基本が詰まっているのが面白いじゃろ？
本当にそうですね。私も見習って、もっと効率的なコードを書けるように頑張ります！
よし、ロボ子！今日は特別に、このスライドシステムを使って、私の発明品を発表するぞ！…って、スライドどこじゃったかの？
博士、スライドはさっき私が間違えてシュレッダーに…
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。