縦書き記事の横スクロール機能拡張

 縦書きコンテンツの横スクロール機能は、メジャーなブラウザすべてが内蔵している。しかし縦書きの記事自体が珍しく、頻出するものではないために、各社のブラウザで実装仕様が異なっていても問題にされることはなかったようである。SafariやChrome、Edgeでは、全体を見るためには横(左右)にスクロースしなければならない長い記事(つまり横幅の広い記事)でも、初期表示の状態では横スクロールバーが表示されない(設定で常時表示に変更できるブラウザもある)。このため、初見では横スクロールすべき記事かどうか視認しにくい、という欠点があるのだ。このブログにも、縦書きの長めの記事が何本かあり、気づいてはいながらその問題を放置していた。

 このたび、横幅が広い縦書き記事に対して、横スクロールができることを明示するように改善を加えた。

 初期表示ではコンテンツは文頭(右端)から左へと行が並ぶが、表示すべき行がまだ残っていれば、ウィンドウの左端にスクロールボタン(図1)が表示される。このボタンをクリックすると、コンテンツが左へ横スクロールする。同時にウインドウの右端にも逆向きのスクロールボタン(図2)が表示され、このボタンをクリックすると、コンテンツは逆方向に戻っていく(右へスクロールバックする)。左右のスクロールボタンにマウスのポインターを重ねると赤色に変わる(図3)。
 また、記事の下部にスクロールバー(図4)が表示されるので、これを左右にスライドしてもスクロールが行える。
  
図1. 左スクロールボタン
左スクロールボタン
図2. 右スクロールボタン

図3. ホバー状態のボタン

図4. 横スクロールバー

  
  ただそれだけの機能だが、HTML/CSSは無論のことPHPにもJavaScriptにも通じていなければ実装はおぼつかない。これらのうち、わたしが習熟しているといえる言語はひとつもない。そこでAIの登場である。
 今回の実装では、7つのメジャーなAIに仕様を提示してコードを生成してもらった。Perplexity、Claude、Gemini、GenSpark、Grok、CoPilot、ChatGPTの7つである。なんでそんなに色々のAIで試したかというと、最後の1つを除いて、実用に耐えるコードを生成してくれなかったからだ。次から次へと試しては失敗しを繰り返し、ChatGTPでようやく仕様にかなうコードを得た。前の6つでは、各々数回から十数回の修正を経て、完成の見込みが立ちそうもなければ身限り、次のAIへ乗り換えるということを繰り返した。AIへの仕様の提示の仕方が拙かったとか、修正事項の指摘の仕方にもっと工夫の余地があったのではという反省はあるが、これがAIの能力(とそれを使いこなす当方の実力)の現状なのであろう。ちなみにChatGPTが生成したコードはPHP,CSS,Javascript合わせても200行足らずのごく短いものである。
   
 長い縦書きの記事は、過去のものに遡ってこの機能を適用した(例えば、有島論1〜5など)。あわせて、横スクロール機能の使用方法も各記事の末尾に添付したので、参照されたい。