大きな声では言えないけれど・・・( ̄。 ̄ )ボソ

  • Twitter
  • Facebook
  • Pinterest
  • Hatena
  • instagram
  • YouTube

Lightbox風画像ビューワの件でご質問を頂きました。
(本文にメアドが入っているのでコメントは非公開とさせて頂きますネ♪)

えーと、既にご存じかとは思いますが・・・
<img>と<a>は、HTMLに於いて全く意味と動作が異なるタグで有る点に注意して下さい。

例えば、HTMLで記述されたページ内に画像を埋め込むには <img src=”hoge.jpg”> の形式で埋め込み、本文内で画像を表示する事が多いと思います。

一般的な(?) <img src=”hoge.jpg”> の形式で記述される場合は、src=””で指定した画像データ( hoge.jpg )を呼び出すモノであり、JavaScriptなどで特別な処理をしている場合を除いて表示された画像をクリックしても何も起きません。

対して<a href=”hoge.jpg”> とした場合は、リンク対象(<a>~</a>で挟まれた要素)をクリックすると純粋に画像データのみをブラウザに表示する事になります。しかし今回の画像の拡大・縮小表示はJavaScriptで処理・実行しているので通常の <a href=”hoge.jpg”> では無く <a onClick=”return moge()””>と記述しています。

で・・・、HTMLの <a> タグは、必ず実体データ(テキスト、画像、音声、動画、etc…)に対してリンク先を設定しなければダメという決まり事はなく、今回の様にJavaScriptに対してのリンク(アンカー)を設定しても全く問題ありません。

<img src=”hoge.jpg” onClick=”return moge()…>としても動作すると思いますし、画像にマウスカーソルが重なったら表示が変化する手法(?)も多くのサイトで見かけます。

ただ、個人的にはa要素とimg要素は本来目的が全く異なる要素なので、ユーザーによるクリックという動作を設定・要求するのであれば、HTML的に両者を明確に区別した方が良いと思っています

他にもマウスカーソル(a:hover)の問題や異なる複数のclass属性を設定する必要も有ったのですが、敢えてa要素とimg要素を別けているのは先の理由からで、HTML本来の目的・特徴の一つである【文書の構造化】から逸脱しないように心懸けています・・・が、怪しい処もチラホラ・・・(´Д` )

また、JavaScriptにリンクを設定し、Lightbox風画像表示に必要な要素(ディレクトリとファイル名)を WordPress の該当記事の<img src=””>からJavaScriptを使って抽出しても良いのですが、どうしても要素を抽出する為の処理が増えてしまいます。

なのでJavaScriptにリンクするなら、ついでに画像表示に必要な最低限の情報をパラメータとして渡してしまえば抽出処理は不要だよネ・・・と、いう考えに基づいています。

あまり馴染みの無い<a>タグの使い方に見えますが、他のサイトでも <a href=”hoge.jpg” onClick=”return moge()”> のように、実体ファイルとJavaScriptにアンカーを設定しているケースは多々あります。なので単純に href=””の部分が無くなってるだけと考えて頂ければイメージし易いかなと・・・
 
 
次にリンクの書式が長い件ですが・・・

これは手の内を明かす事になるのでナイショにしておきたかったのですが・・・

Lightbox風画像表示を実行するJavaScriptへのリンク(a要素)と画像データの埋め込み(img要素)に関する全ての文字列は、PHPのコードを本文に埋め込んでサーバー側で動的に生成しています・・・( ̄。 ̄ )ボソ

WordPress に於いて、本文にPHPコードを埋め込んで実行するのはセキュリティ的に《禁じ手》なのですが、記事を投稿するのは私一人だけですし、リンクを動的に生成するのは自ドメイン内の契約しているレンタルサーバー内に存在するLightbox風画像表示を実行する画像データにのみ・・・と、一応ルールを決めています。(記事内のPHPコードを実行するプラグインを使っています)

外部ドメインに対してのリンクは勿論ですが、例え自ドメインであっても画像データ以外のリンク(別エントリへのリンク)は、全て手打ちによる静的リンクです。自分は記事本文内にアフィリエイトのリンクは一切埋め込まない主義なのでアフィリエイトのリンクについてはご自身で工夫してみて下さい。

セキュリティ的にアレなので詳細は書けませんが、リンクに関する文字列の生成に必要な複数のパラメータをPHPで組んだユーザー定義関数に投げてリンクの生成処理を行っています。

一つの記事について大体20~30枚の画像を貼っていますが、仰る通り以前は手打ちで画像リンクを記述するのが大変でして、間違った画像へのリンクや重複リンク、表示サイズのミス・修正が続出していたのでLightbox風画像表示を実装するのを機にPHPでのリンク生成も実装した次第です。

なので生成されるリンクは長い書式なのですが、実際に記事本文に記述してあるPHPのコードは1画像リンクに対して1行の短いPHPコードだけで済んでいます。

ブログの内容がレビューや自作ネタが多く、どうしても画像点数が多くなるのでセキュリティ的にアレな《禁じ手》を使っていますが、幾ら自分でルールを決めていてもクラックされて本文に不正なPHPコードを埋め込まれたら(´Д` ) な事になるのは間違い無いのでお薦めはしません

また、簡単な処理とは云えサーバー側にリンク生成によるオーバーヘッドが発生し、アクセス数の多いブログではサーバーに大きな負荷が掛かる事も予想されるので使わない方が無難かと思います

数枚の画像リンクを設定するのも書式が長すぎて大変ならば、WordPressのメディアファイル投稿を行い、公開されているプラグインを使ってちゃんとした(?)Lightbox風画像表示を実現した方がきっと幸せになれると思います。

以上、書式が長い点については答えになっていませんが参考になれば幸いです。
 

カテゴリー: HTML, JavaScript, PHP, プログラミング タグ: , パーマリンク

大きな声では言えないけれど・・・( ̄。 ̄ )ボソ への2件のフィードバック

  1. TAO のコメント:

    文書の構造化については、あまり意識していませんでした。
    PHPでリンクを生成するのは、自分ではまだ無理なので別の方法を考えてみます。
    ありがとうございました。

    • doorman のコメント:

      TAO様

      構造化も意識し過ぎると面倒な事になるのでホドホドが宜しいかと・・・(^^;

      人によって考え方は違うのですが、例え自分なりにでも一定のルールを決めてサイト(ブログ)を構築しないと、後のメンテが大変になる(※経験談)と思うので、ほんの一例程度に考えて下さいネ。

      昔、まだ自分がプログラミングを勉強し始めた頃に 『プログラムで何かを実現しようとするなら、例えコードが書けなくてもアナタはもうプログラマーです』 と励まされた事があります。
      『こういう事がしたい!』 という明確な欲求があれば上達も早いと思うので、TAO様も是非挑戦してみて下さい。

コメント投稿