「雑句記事の操作」では、埋め込んだサムネール画像の操作方法などを説明したが、新たに横スクロールの方法を改善したので、追記しておきたい。
「雑句」記事は縦組で画像も含むため、行数が多いと1画面に収まらず、横スクロールしていただく必要があるが、まだ左側に続きがあるのかどうか一目ではわからない不親切な表示形式だった。横スクロール用のスクロール・バーはスクロール中にしか現れない(注1)ので、左側に続いているテキストや画像に気づかれぬまま見過ごされることが多いのではないかという懸念は当初から持っていて、HTML/CSSやプラグインでの解決を探してはいたのだが、適切な方法が見つけられずにいた。しかし最近になって、AIのプログラム・コード生成能力が高いことを身近に知るようになり、この課題もAIにやらせてみようと思い立った。いくつかのAIを試したが、最終的に採用したのはGeminiが生成したコードである(注2)。AIに仕様を示し、生成されたコードをテスト環境に組み込んで試してみる。間違いや不足があればそれをAIに指摘して改良を指示する。このやりとりを十数回繰り返してなんとか使えるコードが出来上がった。Gemini以外では、いい線まで行くのに、あるところから見当違いの改善方向に進んだり、前回はできていた改善がまたあと戻りする堂々巡りになったりで、こちらが根負けして諦めたケースが多かった。相手はAIなので疲れ知らず、こちらの改善要求に即座にかつ瞬時に応じてくる。酷使の気遣いなど無用なのだが、こちらは生身で感情もあるから、どうしてもAIを擬人化してしまい、負担に感じたり、どうしてここを分からないのだと地団駄踏んだり、挙句は親切すぎる隣人と付き合い切れなくなって縁切りしてしまうかのように応酬を放棄してしまう。AIとの付き合い方にもコツがいるのかもしれない(注3)。
追加した横スクロールの仕組みは次の2つ。
1. 横スクロールバー
記事の下部に横スクロールバーを常時表示し、スライダーで記事を左右にスクロールできる (図1)。
ブラウザはどれも本体に横スクロールの機能を備えていて、マウスやタッチパッドでのスワイプで横スクロールできる。しかしスクロールバーはスクロール動作中にしか表示されない(注1)。今回の機能拡張で、どのブラウザでも横スクロールバーが常時表示され、スワイプだけでなくマウスポインタによるスライダーの移動で左右への横スクロールができる。
2.横スクロールボタン
記事の左右両端に横スクロールボタンを設け、そのボタンをクリックすることで左右へ横スクロールできる(図2)。
記事先頭(右端)が表示されているときはに右端のスクロールボタンは消え、これ以上右へのスクロールはできないことを示し、左端のボタンだけになる(図1)。逆に、記事末尾(左端)に達したら左端のボタンは消え、もうこれ以上左へはスクロールできない。
実例はこの記事を見ていただくのが分かりが早いと思います。この機能は、過去の雑句記事にも遡及して適用しました。
また、この機能追加にあわせて、各記事の末尾の「画面操作上のヒント」という注釈も改訂した。
▶︎をクリックすると折りたたみが展き、画面操作についての説明が現れます。
画面操作上のヒント rev.1
💡横スクロール
本文は横に幅広いので、左右に横スクロールしてご覧ください。
横スクロールするには、2つ方法があります。
(1).本文記事の下部に横スクロール・バーがあります。バーを左右にスライドさせると、左右にスクロールできます。
(2).本文記事の左右の端の上の方に◀️または▶️のようなスクロールボタンが付いています。これをクリックすると左または右にクリックします。
記事が左端(末尾)に達すると左ボタンは消え、右端(先頭)に達すると右ボタンが消えます。
💡静止画
句の下や右にある小さな画像(サムネール画像)にカーソルを重ねると、画像が少し拡大し半透明になります。
画像をクリックするとポップアップ画面が開き、拡大表示されますます。
画像を閉じるには、そのままクリックするか、Escキーを押すか、画像の右上隅のX印をクリックしてください。
💡動画
画像のクリックで短い動画がポップアップしてくる場合もあります(動画のサムネール画像の下にはカチンコ🎬の絵文字を付けています)。
動画は自動再生しますが、下部のコントロールバーでも操作できます(ただし無音にしてあるので、音は出ません)。
動画を閉じるには、Escキーを押すか、画面左上隅のX印をクリックするか、動画の枠外をクリックしてください。
図
コンテンツの先頭の場合
コンテンツの途中の場合
注
しかし、縦スクロールと横スクロールには大きな差があると思う。それは縦書き文化と横書き文化の差に根ざす問題である。インターネットおよびWebは英語圏発祥で無意識のうちに横書き文化を前提としている。ほとんど大部分のWebコンテンツは横書きであり、コンテンツが長くなると一度に全部は表示できないから、縦方向にスクロールしていくのはごく自然な解決策であり、ことさら縦スクロールバーを表示するのは過剰なサービスとして避けられている(ただ、スクロールバーを常時表示に変更するオプションはMac/WindowsいずれのOSも備えている)。縦書きコンテンツはWebの世界では稀であり、したがって画面に収まりきれない長いコンテンツを左右にスクロールするニーズも稀であるため、現行のデフォルト設定が問題視されないのであろう。その中でFirefoxの常時表示という仕様はひとかどの見識を示していると評価したい。
2. Geminiが生成したのは、PHP,CSS,Javascriptのコードで、コメント行やブランク行も多数含むが、全体で360行ほど。
3. Googleのサーチエンジンに向けて、SEO(Search Engine Optimization)が喧伝され、多くの解説本やツールが出回っている。SEOとは自サイトをGoogle検索でできるだけ上位に来るようにする技法を指すが、AIに対しても、できる限り正確で有用な回答を引き出すための問い合わせ文の書き方を指南する解説記事が氾濫している。AI版SEOみたいなものだろう。すでにPrompt Engineeringという名前が付けられているそうだ。