ネットワーク関連の記事を順次、別サイトに移動させています

So-netブログでのLightBoxのような表示

2012/04/17
記事内のリンクには広告が含まれている場合があります

先の記事で作成した切り抜き画像を表に並べたのは良いのですが、元の画像に含まれる情報も重要なので、切り抜いた画像からリンクを張ることを考えました。

3通りのリンクの張り方

切り抜いた画像から元の画像へリンクを張る場合、通常は次の二通りから選択することになります。

  1. 切り抜いた画像が表示されているウインドウまたはタブはそのまま残し、別のウインドウまたはタブに元の画像を表示する
  2. 切り抜いた画像が表示されているウインドウまたはタブに表示する

1.の方法だと、閲覧者は、いちいち開かれたウインドウやタブを閉じる必要があるため、リンクが多いと閲覧者が面倒に感じる可能性があります。

2.の方法だと、「戻る」だけで、いちいちウインドウを閉じる必要がありません。しかし、戻った時点でページの再読み込みが行われるので、ページビューカウントが上がってしまい、正確なページビューがわからなくなります。

通常は、元の記事とリンク先のページを同時に見てもらった方が良い場合は別ウインドウまたはタブに、一度見るだけで良い場合は同じウインドウまたはタブに表示させるようにしています。

別の方法として、ライブラリーを利用したLightBoxのような表示、すなわち、今見ているページに重ねて元の画像を表示する方法があります。しかし、この方法を使うにはライブラリを何処かに置かなければなりませんが、So-netブログでは置くことが出来ません。そのためライブラリーを利用する場合は、So-netブログとは別にホームページを持ち、そこに置く必要があります。

今回は画像が多いため、表示効果を付けずにパッパと切り替わった方がよいと考え、ライブラリーは使わず、jQueryだけでLightBoxのような表示をさせることにしました。

 

画像ファイル名の変更

今回は画像が多いため、対象となる部分をコピーして、ソースコードを修正した方が早いと考えました。通常は、Windows Live Writerで記事を書き、画像も埋め込んで、そのまま画像と一緒にアップしています。この方法だと、画像のファイル名が不規則な名前に変更されるため、アップした後でファイル名を調べなければなりません。そのため今回は、先に画像ファイルだけブログにアップします。

先の記事で作成した切り抜いた画像は、元の画像と同じファイル名となってしまいます。そのためファイル名を予め変更しておきます。

「スタート」「すべてのプログラム」「アクセサリ」「コマンド プロンプト」をクリックしてコマンドプロンプトを開きます。コマンドプロンプトウインドウの左上のアイコンをクリックし、メニューから「既定値」をクリックします。

LightBox-CMD-01

「コンソールウインドウのプロパティ」ダイアログで、「簡易編集モード」にチェックを入れ「OK」をクリックします。そしてコマンドプロンプトを閉じます。この操作は一度だけ行えば以後は既定値として記憶されます。

LightBox-CMD-02

再度、「スタート」「すべてのプログラム」「アクセサリ」「コマンド プロンプト」をクリックして、コマンドプロンプトを開きます。更に、エクスプローラーを起動し、切り抜いた画像が保存されたフォルダーを開きます。ファイル名を変更するために、コマンドプロンプトのカレントフォルダーを切り抜いた画像が保存されたフォルダーに移動するのですが、深いフォルダーや日本語のフォルダー名を使っているとフォルダーの指定が面倒です。そのような場合、以下の操作で簡単に移動できます。

コマンドプロンプトで、カレントドライブを変更します。ここではHドライブとします。

h:[Enter] ※[Enter]はEnterキー

ディレクトリ移動コマンド「cd」とスペースを入力します。

cd[space] ※[space]はスペースキー

この後、次のどちらかの操作をします

  1. エクスプローラーのアドレスバーのフォルダーアイコンをコマンドプロンプトにドラッグ＆ドロップ
  2. エクスプローラーのアドレスバーをクリックし、アドレスが反転選択された状態でマウスを右クリックし「コピー」をクリック、そして、コマンドプロンプトを選択し、マウスを右クリック

これらの操作でエクスプローラーで開いているフォルダーが、コマンドプロンプトに入力されますので、最後に[Enter]を押します。

LightBox-CMD-03

今回、切り抜いた画像のファイル名は、

[モンスターの種の番号3桁]+ハイフン+[モンスターの成長段階1桁]

としていますので、合計5文字となります。例えば、ファイル名を最後に「s」を付けたものに変更する場合は、コマンドプロンプトで、名前変更のコマンド「ren」を、変更しない部分を「?????」で指定して、

ren ?????.* ?????s.* [Enter]

と入力します。これで一度に全ての切り抜いた画像のファイル名を変更できます。

 

画像ファイルのアップロード

ブログの管理画面の「記事管理」「ファイル管理」からは、ファイルを一度に最大10個までアップロードできます。

LightBox-Upload-01

ただし、2個以上のファイルを一度にアップロードすると、2個目以降のファイル名が不規則な英数字が追加されたものに変更されてアップロードされます。今回はファイル名が変わってしまうと困るので、時間が掛かりますが1個ずつアップロードします。

全ての画像ファイルのアップロードが終わったら、最後にアップロードしたファイルのファイル名をクリックします。

LightBox-Upload-02

詳細が表示されたところで、「元ファイルを見る」をクリックします。

LightBox-Upload-03

別のウインドウまたはタブにアップロードしたファイルが表示されますので、そのウインドウまたはタブのURLを見ます。

LightBox-Upload-04

例えば、この場合は、「http://blog.so-net.ne.jp/_images/blog/_f95/*****/」が画像ファイルが保存されているフォルダーとなります。「https」となっていますが、「http」に変更します。

この情報は後でソースコードを修正する場合に使用しますので、メモなどに控えておきます。

 

jQuery

以前、会社でホームページを作成していた頃(2009年)の雑誌の記事を見てみましたが、今となっては古すぎ役にたちませんでした。仕方ないので、参考文献を購入しました。参考文献は最後に記しました。

とりあえず、サンプルコードの意味が読み取れればよいので、さわりの部分くらいしか読んでいません。あとは、必要なサンプルコードを読んで動作を理解します。わからない部分が出てきたところで前に戻って確認します。jQueryについての私の理解は以下のようなものです。

ブラウザーは、ソースコードを読み込み終わるとソースコードに従ってページを描画します。描画が終わると、マウスの動きやクリック、ページのスクロールなどのイベントを監視し、イベントに対する処理がソースコードに記述されていれば、その処理を実行する。実行の結果、ソースコードに変更があれば、変更された部分だけ再描画する。この繰り返し。

ページ作成者は、ページが読み込まれ最初に表示される画面と、イベントが発生した後の画面をそれぞれ設計し、そのソースコードの差をjQueryを使って書き換えを行います。それは、イベント発生前のソースコードを、イベント発生後のソースコードに、セレクタで変更部分を選択し、メソッドを使って書き換えるパズルのようなものである。

 

動作テスト用のローカルソースの作成

簡単なヘッダと本体だけを書いて、動作の確認を行います。例えばDreamweaverで生成される空のHTMLを参考に以下のようにソースコードを記述します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>(1)ここにCDNからのjQueryの読み込みを記述
(2)ここにjQueryのプログラムを記述
(3)ここにCSSを記述</head>
<body>(4)ここに記事を記述</body>
</html>

 

(1)CDNからのjQueryの読み込みの記述

CDNとしては今回はGoogleを使いました。記述方法は、Google DevelopersのサイトのjQueryの部分に記載されているように<script src=……></script>のsrcの部分をjQueryのpathに記載されたURLにして記述します。

<!-- jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

 

(2)jQueryのプログラムの記述

参考文献「Web制作の現場で使うjQueryデザイン入門」の「3-9 写真画像を魅力的に表示する」のソースコードを組み合わせています。各部分で行っていることについては「Web制作の現場で使うjQueryデザイン入門」を参照願います。

<!-- Monster Radar Script -->
<script type="text/javascript">
$(function() {
$("body").append("<div id='gray_back'></div><div id='image_detail'></div>");$("#gray_back").click(function() {
$(this).hide();
$("#image_detail").hide();
});$("#image_detail").click(function() {
$(this).hide();
$("#gray_back").hide();
});$("a.detail").click(function() {
var image_obj = new Image();
image_obj.src = $(this).attr("href");
var width_margine, height_margine;var timerID = setInterval(function() {
if (image_obj.complete) {
width_margine = - image_obj.width / 2;
height_margine = - image_obj.height / 2;$("#image_detail").css({
marginTop: height_margine,
marginLeft: width_margine
});$("#gray_back").show();
$("#image_detail").show().html("<img src='"+image_obj.src+"' /><img src='http://blog.so-

net.ne.jp/_images/blog/_f95/*****/close.png' class='detail_close' />");

image_obj = null;
clearInterval(timerID);
}
},100);

$("#image_detail img.detail_close").click(function() {
$("#gray_back").hide();
$("#image_detail").hide();
});

return false;
});

if($.browser.msie && $browser,version<7) {
$(window).scroll(function() {
$("#gray_back").get(0).style.setExpression("top","$(document).scrollTop()+'px'");
$("#image_detail").get(0).style.setExpression("top","($(document).scrollTop()+$(window).height()/2)+'px'");
});
}
});
</script>

 

(3)CSSの記述

テーブル内に画像を表示したときに、画像の周りに隙間が出来ないように、画像とテーブルのスタイル、灰色のレイヤーと元の画像のレイヤーのスタイルをここで定義しておきます。monster_thumsクラスは、ブログのテンプレートで指定されるIDの影響で、うまく指定できなかったため、imgタグのmonster_thumsクラスと細かく指定しています。

<style type="text/css">
img.monster_thums {
height: 82px;
width: 85px;
border-width: 0px;
margin: 0px;
padding: 0px;
display: inline;
background-image: none;
}
.monster_table {
border-collapse:collapse;
border-spacing:1px;
empty-cells:show;
}
#gray_back {
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
background:black;
opacity:0.50;
filter:aplpha(opacity=50);
display: none;
}
#image_detail {
position:fixed;
top:50%;
left:50%;
display: none;
}
#image_detail img.detail_close {
position:absolute;
top:-10px;
right:-10px;
cursor:pointer;
}
* html #gray_back {
position:absolute;
}
* html #image_detail {
position:absolute;
}
</style>

 

(4)記事の記述

要になる部分は、上記で調べた画像ファイルの保存されたフォルダーとクラス指定となります。切り抜いた画像のクラスはmonster_thumsとしてCSSでスタイルを指定しています。元の画像のクラスはdetailとしてjQueryのプログラムで元の画像のURLを抽出しています。

<a href="http://blog.so-net.ne.jp/_images/blog/_f95/*****/XXXXX.jpg" class="detail"><img class="monster_thums" src="http://blog.so-net.ne.jp/_images/blog/_f95/*****/YYYYY.png" alt=""/></a>

 

動作テスト用のローカルソースでのテスト

これらを記述したファイルを例えば、test.htmlとして保存し、ブラウザーにドラッグ＆ドロップします。インターネットエクスプローラーでは、「スクリプトやActiveXコントロールを実行しないよう、Internet Explorerで制限されています」と表示されるので、jQueryスクリプトを実行できるように、「ブロックされているコンテンツを許可」をクリックします。

切り抜いた画像をクリックするとブラウザーウィンドウが暗くなり、中央に元の画像が表示され、暗くなった周りの部分をクリックすると元に戻るように表示されれば成功です。

 

ヘッダへの追加

ローカルでのテストが成功したので、ブログにアップします。

So-netブログでヘッダに記述を追加するには、管理ページで、「デザイン」を選択し、その下の「テンプレート管理」を選択します。

上記の動作テスト用のローカルソースで記述した(1)(2)(3)の部分をヘッダに記述します。ヘッダにCSSを記述するのは、テンプレート管理の「テンプレート選択 & CSS編集」でCSSを編集してしまうと、別のテンプレートを選択した場合に、再度CSSの編集が必要になるためです。

「テンプレート管理」のページの下の方にある「HTML編集」という部分で「HTMLの追加」をクリックします。

LightBox-Header-02

「HTML編集」の画面になるので、HTML名に名前を入力し、ソースコード内の</head>という部分を探し、その前に動作テスト用のローカルソースで記述した(1)(2)(3)の部分を追加していきます。

LightBox-Header-03

記述が完了したら、「保存」をクリックします。

LightBox-Header-04

最後に保存したHTML名の左の○をクリックして●に変えて適用させます。

LightBox-Header-06

 

記事の作成

新規作成または、何かダミーの記事を投稿します。

動作テスト用のローカルソースに表がある場合は、<td>と</td>の間の改行をすべて削除します。

記事の編集画面を開き、「HTML」をクリックします。

LightBox-html-01

開いた「HTMLの編集」の画面で表示されたソースコードをCTRL-Aですべて選択し削除します。動作テスト用のローカルソースの(4)の部分だけをコピーして、「HTMLの編集」に貼り付けます。

ソースコードを見やすくするための改行は、貼り付けを行った段階で、<br />に変換されてしまうので、貼り付ける前に改行は削除しておきます。改行は表に余計な隙間が空いてしまう原因となります。

「挿入」をクリックします。元の「記事の編集」画面では記事部分には一切さわらず、必要なら、タグなどを設定して記事を「保存」します。

LightBox-html-02

 

記事の動作確認

保存した記事をブラウザで表示して動作を確認します。うまく動作しない場合は、動作テスト用のローカルソースを確認します。記事の修正は動作テスト用のローカルソースで行い、管理画面では編集をしないようにします。

 

Flash対策

ページ内にFlashがある場合、jQueryで表示させた画像よりも上にFlashが表示されてしまいます。

Flashの記述部分に、

<PARAM NAME=wmode VALUE=transparent>

を追加し、<EMBED>の内部に、

wmode=transparent

を追加することで回避できます。

 

完成した記事

以上のようにして記述した記事が以下のものになります。切り抜いたモンスターの画像をクリックすると、切り抜く前の画像が中心に表示されます。画像の右上の(×)か周りの暗い部分をクリックすると元の画面になります。実際の記述内容は、下記の記事のソースコードを参照願います。

  • PSVITA モンスターレーダー(7) モンスター外観一覧(1)
    (サイトをSo-netブログから移転したため表示できません)

 

まとめ

So-netブログにjQueryを適用するポイントは、必要な要素をどこに記述するか、そのためにはヘッダの編集方法と記事の編集方法を知ることだと思います。それがわかれば、参考文献を見て、画像が徐々に表示されるようにすることなども簡単に出来るでしょう。

現状のプログラムでは、ブラウザーウインドウが表示する画像より小さい場合に不都合が生じます。今後改良が必要です。

コメント

タイトルとURLをコピーしました