人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

lightbox(? ではありませんが)の質問です。

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

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

●質問者: khaie
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●100ポイント ベストアンサー

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


a-kuma3さんのコメント
今 気が付いたけど、RFC だと UR<span style="color:red;">L</span> スキーム なんだな…… https://tools.ietf.org/html/rfc2397

khaieさんのコメント
リンク先の説明は私には難しすぎました。 ご回答を足がかりにまた勉強してみます。ありがとうございました。。。。

a-kuma3さんのコメント
締め切るの、早いです。まだ、付き合いますよ。 URL を指定するところって、普通は「どこにあるの」という記述をします。 本でいうと、「なんていう本の、何ページ目」ということが書いてある紙を渡されたようなものです。 元々、URL は、そういうふうに設計されました。 コピーを持ってなくても、どこにあるかが書いてあれば、紙も節約できるし、いつでも最新の情報が手に入る、と。 「データ URL スキーム」というのは、そのページに書いてある内容が、そのまま紙に書いてあるようなものです。 わざわざ、本を取りに行かなくても良いわけです。 内容が逐一更新されるような情報もあれば、一度、決めてしまえば内容が変わらない情報もあります。 コピーを持っておいた方が良いこともあるよね、ってのが「データ URL スキーム」です。 >|| data:image/gif;base64,R0lGOD... (1) (2) (3) (4) ||< (1) : データがある場所じゃなくて、データそのものだよ、という目印です。 (2) : (4) の内容の扱い方です。この例だと GIF の画像ファイルだよ、という指定です。 (3) : (4) の翻訳方法が書いてあります。あまり、気にしなくても良いです。 (4) : データの内容です。画像ファイルの内容が (3) のやり方で翻訳されてます。

khaieさんのコメント
わざわざありがとうございます。 元々はlightboxのオーバーレイ上にオリジナル画像へのリンクを配置したくてプラグインの中をのぞいていました。オリジナル画像のパスは img/2015/20151127/20151127001.jpg でサムネイル画像が img/2015/20151127/thumb/20151127001.jpg という具合なので、thumb/ を取り除いたパスを当て込みたかったのです。 (1)?(3)までは大体意味がわかりましたが、(4)部分をbase64デコードすれば生データ(生記述?)がわかるかと思いましたが、変換サイトばかりでわからず仕舞いでした。(考え違い?) 結局時間の制限もあったので、lightbox内にボタンだけ配置して、外部にJSコードを書いてオリジナル画像へのリンクを実現しています。 。。。スキームという言葉も意味は様々なサイトに書いてありますが、感覚的にはまだ掴めていません。

a-kuma3さんのコメント
>> (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さんのコメント
なんとなくですが、lightboxの動きが理解できてきました。lb-image のgifはアルバムのsrcが入る前の画像だったんですね。改造できそうな感じになってきました。 ありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ