Go!伊勢崎 コンピュータ [ コンピュータ・Index ] [ Home ]



ウェブページの画像を洗練されたスタイルで拡大表示

LightboxをLightbox2へ更新

コンピュータ掲示板 もご利用ください】 掲載日:2017/3/7

(1)Google広告(AdSense)が突然表示されなくなった

 今朝(2017/3/7)、当サイトのいくつかのページの記事更新をすると、なぜかグーグル広告(AdSense(*1))が表示されなくなりました。いくつかのページで確認すると、Lightbox(*2)が組み込まれているページでのみ表示されません。ブラウザのせいと思いましたが、FirefoxとEdgeの両者で表示されません。グーグル広告からの収益は雀の涙程度なので特に支障はないのですが、収益はないよりはあった方がサイト運営のモチベーションになるし、またAdSense管理画面はページを分析してくれるので、ウェブ運営の支援にもなります。それに何より広告表示枠を確保したまま空白になってしまうので、ページのバランスがよくありません。何とかしなくては・・・。

 AdSenseサポートで原因を調べると、どうやらAdSenseとLightboxのJavaScript(*3)が競合したようです。

(*1)AdSense:グーグルと契約して広告収益を得るシステム。
(*2)Lightbox:ウェブページの画像をクリックしたときに、洗練されたスタイルで表示するプログラム。
    開発者はウェブアプリ制作者のLokesh Dhakar氏、Lightbox公式サイトは→こちら
    米国「The MIT License」にライセンス登録され、商用・非商用に関わらず無料で使用できます。
(*3)JavaScript:ウェブページ表示時に、動的に様々な処理を加えるためのプログラム言語

(2)Lightbox、数年前にも突然機能しなくなった

 当サイトでLightboxを使い始めたのは7,8年前。画像を拡大表示する流れが、HTMLタグでリンクを貼るだけ(<a href=""・・・>)よりも洗練されていて、しかも元ページから移動しないので、当サイトの拡大表示対応画像にはほぼ全てLightboxを設定しました。
 ところが、数年前、突然このLightboxが機能しなくなりました。過去にLightboxを組み込んだ全てのページで同様です。原因はブラウザやJavascriptの仕様変更が考えられましたが、特定できないまま。ただ、対策は至ってシンプルで、各ページの<HEAD>部のLghtbox宣言文に「,builder」を加えるだけでした。(下記の赤字箇所)
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

(3)そして今回のLightboxとAdSenseの競合

 その後、Windows10+Firefoxの環境で、Lightboxの拡大表示画像がスクリーン内に収まらない不具合が出たものの、他のブラウザ(Windows10+EdgeやInternet Explorer)では正常に表示されていたので、そのまま放置してきましたが、今回の不具合ではさすがに放置するわけには行きません。
 どうせ保守するならば、最新版のLightboxに更新することに。ただ、この時点で、Lightboxを更新してもAdSenseが表示されるようになるか確信はありません。そもそも、LightboxとAdSenseのどのコードが競合したのかも特定できていません。
 JavaScriptやjQuery、それを使用したLightbox2やAdSense、FirefoxやEdgeなどのブラウザ等々、ウェブ表示するためには様々な言語やソフトが必要ですが、それらは適宜仕様やコードが変更されます。その変更情報をリアルタイムに把握するのは難しく、不具合が発生してから保守するのが実態です。影響が広範囲に及んだ場合には、ボチボチとネットに記事が出始めて原因を特定できる場合がありますが、それまで待てない今回のような場合には、少ない情報を元に、自力で対応するしかありません。

(4)Lightbox最新版は Lightbox2(更新日時:2016/11/06 17:49)

 Lightbox公式サイトのダウンロードボタンをクリックすると、lightbox2-master.zip を入手できます。これを解凍し、主要ファイルの更新日時を確認すると2016/11/06 17:49(cf.下図)。他の関連ファイルも全て同一タイムスタンプです。
  
 Lightbox2を調べると、当初のコードにjQueryなど、Javascriptをより軽量に記述できる環境なども取り入れたようで、詳細な比較はしていませんが、当初のコードとは大きく異なるようです。

(5)Lightbox2、使用するファイルは6つ

 lightbox2-master.zip にはたくさんのファイルが梱包されていますが、使用するのは下記6つです。

フォルダ フォルダ 使用するファイル
dist





examples
src






css─
images



js
──





lightbox.css
close.png
loading.gif
next.png
prev.png
lightbox-plus-jquery.min.js

 上記の3フォルダ(css、images、js)をウェブサーバーのルートディレクトリに作成し、フォルダ以下の各ファイルをアップロードします。

(6)ウェブページのコード変更は2箇所

 当初のLightbox使用時に記述した各コードをそれぞれ下表のように変更します。
<HEAD>内 変更前 <script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
変更後 <link rel="stylesheet" href="css/lightbox.css">
</body>
の直前
変更前 なし
変更後 <script src="js/lightbox-plus-jquery.min.js"></script>を挿入

(7)拡大表示したい画像に加えるコード

 【仕様】

 <a href="拡大表示時の画像ファイル名" data-lightbox="画像グループ名">
 <img src="通常表示時の画像ファイル名" height=・・・・></a>

 【サンプル】

 <a href="Park/simin/2017/170225_1L.jpg" data-lightbox="L" data-title="河津桜に群がるメジロ">
 <img src="Park/simin/2017/170225_1M.jpg" height="354" border="1" width="601"><br>
 蜜を求めて河津桜に群がるメジロ 2017/2/25</a>

拡大表示時と通常表示時の画像ファイルについて

 拡大表示時と通常表示時の画像ファイルを同一(大きな画像)にして、通常表示時の画像属性のwidthに強制的に小さな値を設定すれば、1つの画像に対して大小2つを用意しなくても済みますが、通常表示時の画像のwidthを小さな値に設定しても、ブラウザは元の大きな画像を読み込むので、表示時間は元画像の容量に依存します。たまに、4096×2048pixなどの大きな写真をwidth設定を小さくして載せているページを見かけますが、表示が重いので閲覧者は大変です。当サイトでは通常表示を軽くするために、拡大表示対応画像に対しては全て通常表示用の小さな画像を設定しています。

 上記の実際の表示例↓

蜜を求めて河津桜に群がるメジロ 2017/2/25

 【メモ】

  修正は煩わしいと思っていましたが、意外に簡単な処理でした。それは
■従来は・・・
  <a href="Park/simin/2017/170225_1L.jpg" rel="lightbox[L]">・・・
■今回の変更は・・・
  <a href="Park/simin/2017/170225_1L.jpg" data-lightbox="L">・・・
なので、文字変換機能を用いて、rel="lightbox[L]" を data-lightbox="L" に一斉置換すればいいからです。

(8)・・・かくしてグーグルAdSenseの表示は?

 上記までの処理を終えて、グーグルAdSenseの表示を確認すると・・・、

お〜、表示しました!めでたし、めでたし♪

 しかも、Lightboxも以前より更に洗練されていて、表示までの時間設定など、新たなオプションも追加されています。
 ただ、当サイトのページ数は2017/3/7時点で1,628ページ。1ページ内の修正は僅かでも、全ページを修正するにはそれなりの時間が必要。各ページをオープンして編集、保存するまで5分とすると、1628ページ×5分=8140分=136時間。一日2時間を充てると68日=2ヶ月と少し。プログラムを組んで自動処理した方が早いかも知れません。
 ・・・と言うことで、取り合えずは各ページに対して、次回更新時に修正することとして、今回は一件落着としました。(2017/3/7 記)




▲ページTopへ