khaie回答ポイント 100pt

lightbox（？　ではありませんが）の質問です。

jqueryプラグインのlightboxの中に下記記述がありますが、src=以降の部分の意味合い、説明をお願いします。

<img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />

ログインして回答する

ベストアンサー

a-kuma32015/11/27 17:01:08
満足100pt

「データ URI スキーム」って言います。
詳しくは、こちらをどうぞ。
https://ja.wikipedia.org/wiki/Data_URI_scheme
https://developer.mozilla.org/ja/docs/data_URIs

スター
- 6件のコメントを見る
- a-kuma3 2015/11/27 17:04:47
  
  今気が付いたけど、RFC だと URL スキームなんだな……
  https://tools.ietf.org/html/rfc2397
  
  スター
- khaie 2015/11/27 21:37:14
  
  リンク先の説明は私には難しすぎました。
  ご回答を足がかりにまた勉強してみます。ありがとうございました。。。。
  
  スター
- a-kuma3 2015/11/27 22:08:12
  締め切るの、早いです。まだ、付き合いますよ。
  
  URL を指定するところって、普通は「どこにあるの」という記述をします。
  本でいうと、「なんていう本の、何ページ目」ということが書いてある紙を渡されたようなものです。
  元々、URL は、そういうふうに設計されました。
  コピーを持ってなくても、どこにあるかが書いてあれば、紙も節約できるし、いつでも最新の情報が手に入る、と。
  
  「データ URL スキーム」というのは、そのページに書いてある内容が、そのまま紙に書いてあるようなものです。
  わざわざ、本を取りに行かなくても良いわけです。
  内容が逐一更新されるような情報もあれば、一度、決めてしまえば内容が変わらない情報もあります。
  コピーを持っておいた方が良いこともあるよね、ってのが「データ URL スキーム」です。
  data:image/gif;base64,R0lGOD... (1) (2) (3) (4)
  (1) : データがある場所じゃなくて、データそのものだよ、という目印です。
  (2) : (4) の内容の扱い方です。この例だと GIF の画像ファイルだよ、という指定です。
  (3) : (4) の翻訳方法が書いてあります。あまり、気にしなくても良いです。
  (4) : データの内容です。画像ファイルの内容が (3) のやり方で翻訳されてます。
  
  スター
- khaie 2015/11/28 00:02:10
  
  わざわざありがとうございます。
  元々はlightboxのオーバーレイ上にオリジナル画像へのリンクを配置したくてプラグインの中をのぞいていました。オリジナル画像のパスは　img/2015/20151127/20151127001.jpg　でサムネイル画像が　img/2015/20151127/thumb/20151127001.jpg　という具合なので、thumb/　を取り除いたパスを当て込みたかったのです。
  (1)～(3)までは大体意味がわかりましたが、(4)部分をbase64デコードすれば生データ（生記述？）がわかるかと思いましたが、変換サイトばかりでわからず仕舞いでした。（考え違い？）
  結局時間の制限もあったので、lightbox内にボタンだけ配置して、外部にJSコードを書いてオリジナル画像へのリンクを実現しています。
  。。。スキームという言葉も意味は様々なサイトに書いてありますが、感覚的にはまだ掴めていません。
  
  スター
- a-kuma3 2015/11/28 07:49:03
  (1)～(3)までは大体意味がわかりましたが、(4)部分をbase64デコードすれば生データ（生記述？）がわかるかと思いましたが、変換サイトばかりでわからず仕舞いでした。（考え違い？）
  いえ、その通りです。
  質問にある URI では GIF 画像を base64 エンコードしたものです。
  こんな感じでデコードすれば、GIF の画像ファイルに戻せます（unix です）。
  $ echo "R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" | base64 -d > foo.gif
  縦横 1dot の真っ白な画像です。
  ポップアップの土台になる背景に使ってます。
  
  。。。スキームという言葉も意味は様々なサイトに書いてありますが、感覚的にはまだ掴めていません。
  URI の先頭部分のコロンまでを「スキーム」と言います。
  http://q.hatena.ne.jp/ という URL の http がスキームです。
  データ URI スキームは、スキームに data を指定する URI です。
  
  スター
- khaie 2015/11/28 19:58:42
  
  なんとなくですが、lightboxの動きが理解できてきました。lb-image のgifはアルバムのsrcが入る前の画像だったんですね。改造できそうな感じになってきました。
  ありがとうございました。
  
  スター

その他の回答

この質問へのコメント

コメントはありません

この質問への反応（ブックマークコメント）

質問の情報

登録日時: 2015-11-27 16:39:02
終了日時: 2015-11-27 21:37:22
回答条件: 1人1回まで 13歳以上

この質問のカテゴリ

ウェブ制作

この質問に含まれるキーワード

人気の質問