JavaScript内にて下記をよく見るのですが、これはどうやってgifやoggを文字列化して

いるのでしょうか?
併せて、文字列化したものを元に戻して見たり、聞いたりすることはできるのでしょうか?

例)
data:image/gif,GIF89a%1E%00%1E%00%D5%00%00qV・・・・
data:video/ogg,OggS%00%02%00%00%00%00%00%00%・・・・

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:
  • 終了:2011/05/16 17:01:58
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:asuka645 No.4

回答回数856ベストアンサー獲得回数97

ポイント22pt

3番で回答した者ですが、oggの場合も同様にdataスキームURLを使います。


再生するときには object タグで以下のように記述します。

<object type="application/ogg" data="data:video/ogg,OggS%00%02%00%00%00%00%00%00%...." width="200" height="20">
<param name="src" value="data:video/ogg,OggS%00%02%00%00%00%00%00%00%....">
</object>

変換の場合も、前述のBASE64コード変換と同じです。

id:lalaine0119

有難う御座います。

同じだったんですね

2011/05/16 16:59:41

その他の回答3件)

id:online_p No.1

回答回数1153ベストアンサー獲得回数59

id:lalaine0119

有難う御座います。

dataスキームURI生成と言うんですね、

画像URLではなく持っている画像をURI生成したいです。

2011/05/15 18:56:07
id:HowAreYou No.2

回答回数91ベストアンサー獲得回数17

ポイント23pt

アップロードするのではこちらとか。

http://software.hixie.ch/utilities/cgi/data/data

id:lalaine0119

有難う御座います。

Typeがtext/html;charset=utf-8やbase64があるんですね、勉強しないといけません。

引き続き、音系生成もお願いします。

2011/05/15 19:37:54
id:asuka645 No.3

回答回数856ベストアンサー獲得回数97

ポイント22pt

dataスキームURIといって、RFC2397で規定されている方式です。


再生するときは、そのまま img タグなどのURL属性に指定します。

たとえば下記のような感じです。

<html>
<img src="data:image/gif,GIF89ah%00%20%00%F7n%00%18A%CE%FD%FE%FFRq%DA%F1%F4%FC%87%9D%E6Ml%D9%F7%F8%FDKk%D9%1EF%D0%DD%E3%F8Wt%DBNn%DA%2BQ%D2%F5%F7%FD%F2%F5%FC%90%A3%E7%24K%D12W%D4%83%99%E5%F3%F5%FDXv%DC1V%D3%28N%D1Cd%D7%FC%FD%FE%FA%FB%FE%40b%D6%96%A9%E97Z%D5%1BD%CF%C3%CE%F2%A8%B7%ED%3A%5D%D5Tr%DB%19B%CE%E5%E9%F9%DA%E0%F7%B0%BE%EE%F9%FA%FE%21I%D0%EE%F0%FB%F1%F3%FC%9D%AF%EA%9B%AD%EA%5Cy%DCEf%D8%A5%B5%EC%2ES%D3%86%9B%E5s%8C%E10T%D3Hh%D8%92%A6%E8%EF%F2%FC%CA%D3%F4%D8%DE%F7%CF%D8%F5%F4%F6%FDy%91%E3n%88%E05Y%D4Po%DA%26L%D0%A2%B3%EB%F0%F3%FCJj%D9%BA%C7%F0w%8F%E2%C2%CD%F2%7F%96%E4%C4%CF%F3%3D%60%D6%AE%BD%EE%98%AA%E9%DE%E4%F8e%81%DF%FB%FC%FE%F8%F9%FD%E2%E6%F8%F0%F2%FC%8D%A1%E7%A6%B6%ECk%86%E0h%83%DF%B2%C0%EF%C0%CB%F2%D6%DC%F5%C7%D1%F3%C0%CC%F2%EC%EF%FB%AD%BB%EE%8A%9F%E6%7C%93%E3%B5%C3%F0%EA%EE%FBa%7D%DEj%85%DF%2DQ%D2%7D%94%E3%EA%ED%FA%B4%C1%EF%CD%D6%F4%AA%B9%ED%E0%E6%F8%E8%EC%FA%D3%DA%F6%E7%EC%FA%E6%EA%FA%BC%C8%F1%3C%5F%D6%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%21%F9%04%01%00%00n%00%2C%00%00%00%00h%00%20%00%00%08%FF%00%DD%08%1CH%B0%A0%C1%83%08%13%2A%5C%C8%B0%A1%C3%87%10%23J%9CH%B1%A2%C5%8B%183j%DC%C8%B1%A3%C7%8F%20C%8A%1CI%B2%A4%C9%93%28S%AA%5C%C9%B2%E5%C2%0C%0D%1A%18%C0P%D0%40%CC%26%13S%A0%C82%C0e%C5%2E%3B%A4%14%21Q%90K%D0%07%12ML9%C2aG%0E%9F%13%25%00%00%60%01K%C1%13S%5BH40c%EA%82%9EP%23%12%98Z%C1CA%06S%0Bl%3D0U%00%D8%B0%0F%C7%02%28%7B6%ADD%0Cl%01%840%00%17%A2%5C%BA%04%D1%02Pk0E%0D%BEn%0C%A3%C0ibLW%00%0B%9C%18%08%60%B0%06%0A%CA%05%03%A0x%92%22%83%C0%095%146%E0%3C%F0I%8D%2C%15%FF%9A%0Dlw%A0%12%02%14%16%2C%08%B1%A5%04%8B%05%05%CC%B8%21%D3%03%C2T%1F%07%86%A8%19HBG%EC%02%14%86%12%1CQ%60%01%05%1BW%96%08X%C0B%85A%12E%A6%3BO%22%E4%0Bn%817%5E%00%FFxqC%20%10%05%00%20%7C8%287%02%8E%82aZ%BB%29%01b%AA%7D%00%82%01lq%B3%E1%FE%D4%0BJ%08%E4B%7D%FE%81%B0%9E%40%24%D8%A7A%05%F7%21%10%03A%2B%10h%1F%022%D8%27%10zS%29%20P%7FSA%C0%DET%08p%A0%C1%88%23v%D0Z%17%3E%F8%A7%22RI%A8%D8B%80ZX%A0b%87%25%08%94%C0T%22%CC%88%80%16%02%AD%80%D5%8C%16%BA%81%21%00%1A%F2g%9F%87%06%C9%05%A4%5D%09%E4%05%00%0BQ%B8%40A%8E%F6%3D%10%40%03N%B4%90V%02%28%600%02%81%10lp%C6%08%2BD0%95%05%23%B8q%A3%7D%20l%F0%01%0F%F6I%E1%06%0E%1C%E0%08%06%15%2E%0C9%15x%E2%91g%1Ez%EA%7D%B8%A4%5DQ%E0%08C%03%02e%E0%82%89SY%E9F%06y%09%F0%94%1BI%20%00%C0%09H4%81%01%06%26%10%01%27%00%D6%AD%09%80%0CWPF%C4%8F%21%B8%01%03%88%250%21%90%03bP%FF%09%40jSu%20%03%07%B8%E2%CAh%0Fn%C4%D0%96%17%04%A1%B0D%95%94%19%10%29X%2CL%C5%00%17%3A4%AB%03%0C%04%B2%A0%A6%7DC%10%24%23%00%14%60%10%C2T%12%98%B0%9C%93%B4%02%10A%19%F0M%15%82%B6S%D1%60%10%12%C4%BAal%5B%60%090%E8T%07L%9B%AE%B5SQ%60%40%01S%09a%D0%AA%7BR%A4Z%5D%00%08%90%01%86P%606%10%BB%8D%16%7B%AC%40%F2%A6%17%C1%C4%14O%5C%C1%12%F6%8A%E0%02%BE%D8%BE%0B%00%1B%05aPD%90%13%0D%CC%1A%00%BC%0E1U%0Fo%B9%11%C0%14%EDz%EC%D6%85S%1D%81%83%118%1B%81%03%09%3C%97%B7%E6%09TpLA%06%11WK%90%17%8F%CD%2A0Y%AB%0D%24%98Z%3F%D8%27%86g%02%3D%20%AB%A32%83E%80%89%3E%F8%3B%D0%1A%2A%AC%40%03%0A%F6%22P%E3%40%D7%A6%0A%F0%09%3F%0C%94%83%AF%24%7F%20%C1%81%02%D9%20%C1%06%40%08%0A%98%D3v%A1%FF%A1%E5T%5Fl%A0%C2%14%96%C6%FC%B0%1B%23%88%97%1E%14U%10%B1%C1%DF%088Q%F6%D9%02%5D%2B%80%1BV%7C%EA%03%18%2A%D0%90%EC%7D%02I%C5m%DD%F6%15Y%90%C9%7C%0F%26%10%16%F9%01%C0%E8%7DX%1F%EE%C6%07%F7%C9P%A1%7DAO%CE%F1%E5n%ACp%DF%EB%A0%0BYz%E8%C1%17%04%F0%0BD%14tm%10%03U%F1%E9%EFT%26%EC%EEc%5F%11%F4%83o%FE%21%10%05fkv%80%04A%D8%2F%20P%03%2B%14%DE%E0%8F%C4%8F%EE%86%0D%C3%1B%A4%C2%05%1AP%F0%1EA%21%5Cp%C4%0E%CBm%10%C4%05%17%14%A0B%09%02%D0%00%08%5C%40%19%13%EC%E0%02m%88%C1%A4%06%92%00%02%1C%80%7F3%20%80%15%96%03%02%0D%04%A1%0A%04%11%80%FD%1E%24%10%0C%A4%81%06%FBk%81%02%7E%20%84%00r%60%20r%A3%DB%FA%EE%967%83%98%C0%01%03%98%80%AB%082%01%18%22%8A%20%18%A8%A1%03%26%40%99%09%0C%20%05%DE%1A%9F%0D%23%0F%92%01%1DN%80j%03%09%C0%00%06%E0%00%24%BA%A1%86%03%B8%E1%40%98%A0%C3%1C%F4%F0%87%7D%C9%22D%02%02%00%3B"/>
</html>

変換は、あいにくオクテット文字列に変換するサービスは見当たりませんでしたが、dataスキームURI生成ではBASE64にエンコードすることができます。

id:lalaine0119

有難う御座います。

『この ";base64" 拡張は、それが後続の "=" 符号を持っていないという事

実により、コンテンツ型のパラメータと区別ができる。』勉強になります。

引き続き、音系生成もお願いします。

2011/05/15 20:26:59
id:asuka645 No.4

回答回数856ベストアンサー獲得回数97ここでベストアンサー

ポイント22pt

3番で回答した者ですが、oggの場合も同様にdataスキームURLを使います。


再生するときには object タグで以下のように記述します。

<object type="application/ogg" data="data:video/ogg,OggS%00%02%00%00%00%00%00%00%...." width="200" height="20">
<param name="src" value="data:video/ogg,OggS%00%02%00%00%00%00%00%00%....">
</object>

変換の場合も、前述のBASE64コード変換と同じです。

id:lalaine0119

有難う御座います。

同じだったんですね

2011/05/16 16:59:41
  • id:lalaine0119
    どの回答者様も大変参考になり助かりました。

    イルカ賞は文字表記のある方にさせてもらいました
    手間の違いって事でしょうか。

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

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません