画像の切り替え等の操作について

 『地質アーティクル』『その他のアーティクル』および『トピックス』ページで使用している図・写真には,表示内容を変化させたり切り替えできるもの,および画像をズーム・スクロールできるものが含まれています.これは HTML ページの仕組み(SSL, Javascript)で実現できるもので,印刷物のアーティクルにはない大きなメリットです.このページでは,それらについて説明します.


画像の切り替え

1.自動変更ピクチャー

Pros:
 ・Animation PNG (APNG) 形式の図を利用した自動アニメーションで,無限にループされます.
 ・図の枚数に制限がなく,切り替え速度を速くすれば滑らかなアニメーションにすることもできます.
 ・単一の PNG ファイルで実現できるので,切り替え枚数分のファイルを用意しなくても済むというメリットがあります.
 ・写真画像でも,従来用いられていたアニメーション GIF のような画質劣化がありません.

Cons:
 ・切り替えのタイミングは APNG 作成時にあらかじめセットされており,閲覧者が操作することはできません.
 ・切り替えの停止もできませんので,ある切り替え画像をじっくり見るということはできません.
 ・ページを表示中ずっと切り替えが続いているので,時には鬱陶しい場合があります.
 ・可逆性圧縮により写真などの自然階調画像ではファイルサイズが大きくなるので,ネット帯域の狭い環境では表示ストレスがあります.



2.クリック変更ピクチャー

Pros:
 ・閲覧者のクリック操作により自由なタイミングで切り替えができます.
 ・切り替えた状態はページの他の部分をクリックしても保持されます.
 ・Shift キーを押しながらクリックすることで切り替えの方向を逆にできます.
 ・切り替える画像の数に制限はありません.
 ・画像が何枚あり何番目の画像を表示しているかは,マウスオーバーで表示される tooltip で知ることができます.

Cons:
 ・画像の表示状況や環境により,切り替えの際にタイムラグが発生したり,表示がガタつく場合があります.
 ・切り替えスクリプトのロジックにより,切り替える画像ファイルの名前には規則があり,同一の画像形式のものしか切り替えできません.
 ・スマホ等のタッチスクリーン・ディバイスでは操作・表示に制限があります.
 ・切り替えスクリプトの作成・改善には Javascript のスキルが必要になります.



3.マウスオーバー変更ピクチャー

Pros:
 ・画像の上にマウスオーバーすると画像が変更されます.マウスが離れると元に戻ります.
 ・閲覧者が任意のタイミングで切り替えることができます.
 ・切り替え画像はページ読み込み時にバックグラウンドで読み込まれるため,切り替えにタイムラグがありません.

Cons:
 ・切り替えの仕組みにより,2枚の画像の切り替えしかできません.
 ・マウスが離れると即座に元に戻ってしまいます.
 ・スマホ等のタッチスクリーン・ディバイスでは操作・表示に制限があります.


4.画像のスライド切り替え

※1番目の画像.

次の画像 →

※2番目の画像.

← 前の画像
  次の画像 →

※3番目の画像.

← 前の画像

 よくある画像スライドのインタフェースですが,ライブラリなしのバニラな Javascript で一から作ってみると案外奥が深いです.関連する CSS もですが...display:flex とか.この例ではついでに,画像がスライドするときにフェードインする仕組みも入れてみました.


Pros:
 ・閲覧者が任意のタイミングで切り替えることができます.
 ・画像の数に制限はなく,幅や移動距離などは画像数から自動的に計算されますので手間いらずです.

Cons:
 ・切り替える画像の次とか前とかの記述方法は枚数によって変わってきますが,それは手作業なので,数が増えたり変わると面倒です.


画像のズーム・スクロール

1.拡大画像のドラッグスクロール


Pros:
 ・スクロールバーの操作ではなくマウスドラッグによるスクロールは直感的です.
 ・XY両方向のスクロールを(斜め方向の)単一のマウス操作で行えます.

Cons:
 ・画像表示倍率と表示枠は固定されているので,全体を見ることはできません.
 ・画像によっては,表示されている範囲を直感できない(=迷子になる)場合があります.


2.ズーム拡大


Pros:
 ・全体の縮小表示からマウスホイールの回転操作でズームイン・アウトが自由にできます.
 ・画像の拡大縮小に伴って表示フレームの大きさを変化させることができます.
 ・表示フレームの大きさに上限・下限を持たせることができます.
 ・ダブルクリックで画像を元の全体表示にリセットできます.
 ・上のドラッグ・スクロール機能を組み合わせることが可能です.

Cons:
 ・Javascript による仕組みが複雑で,いろいろと不可思議な動作が起きる場合があります(=私の実力不足).


公開ライブラリを使用した特殊効果

1.分割スライダー

 スライダー・ボタンをドラッグすることによって画像を分割表示するという,よくあるものです.BeerSlider という公開ライブラリを利用しています.



Pros:
 ・二つの画像の変化を視覚的に操作して確認するインタフェースとして,これ以上のものはないでしょう.

Cons:
 ・インタフェースのカスタマイズには,かなりの複雑さがあります.
 ・他人によって公開されている Javascript ライブラリを使用しているので,何か問題があっても(そのアルゴリスムを完全に理解していない限り)手が出せません.


2.ライト・ボックス

 巷のサイトでよくある,画像をクリックすると複数の画像からなる “ライト・ボックス” が表示されるというものです.いくつかの公開ライブラリがありますが,ここでは,本家(?) Lightbox を使っています.
 しかしその使用が効果的な(メリットがある)場面はあまりないようで,本サイトではこの仕組みを使った画像表示は(まだ)導入していません.


Pros:
 ・あるインデックス画像から,数に制限のない画像を拡大・切り替えするライト・ボックスの機能は,場面にもよりますが,非常に便利なものです.
 ・拡大画像に対する任意のタイトルをタイトルバーに表示することができます.
 ・表示中の画像が何枚中の何枚目かという情報をタイトルバーに表示できます.
Cons:
 ・画像の拡大と切り替え部がすべての要素の上に重なって表示されるというインターフェースには,100 % の『これはいい!』感が持てず,使用場面が限定されます.
 ・ボタンやスタイルのカスタマイズはかなり複雑難解です.
 ・jquery を前提に構築されたライブラリなので,それに起因する多少の煩雑さがあります.
 ・他人によって公開されている Javascript ライブラリを使用しているので,何か問題があっても(そのアルゴリスムを完全に理解していない限り)手が出せません.



トップページへ戻る