CINXE.COM

<!DOCTYPE html><html lang="ja" data-theme-enabled="1"><head><script>window.currentUser = null;</script><script>window.shopCurrency = "EUR";</script><script>window.localCurrency = "JPY";</script><script>window.countryCode = "jp";</script><script>window.rateShopTo = {"JPY":161.72162693767189,"EUR":1,"USD":1.078956993853182,"AMD":421.5874435300883};</script><title itemprop="name">Blob</title><link href="/pack/styles.67c491fae690f87b1f9f.css" rel="stylesheet"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="google" content="notranslate"><script>if (window.devicePixelRatio > 1) document.cookie = 'pixelRatio=' + window.devicePixelRatio + ';path=/;expires=Tue, 19 Jan 2038 03:14:07 GMT';</script><link href="//fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic" rel="stylesheet"><link rel="apple-touch-icon-precomposed" href="/img/favicon/apple-touch-icon-precomposed.png"><link rel="canonical" href="https://ja.javascript.info/blob"><meta name="msapplication-TileColor" content="#222A2C"><meta name="msapplication-TileImage" content="/img/favicon/tileicon.png"><link rel="icon" href="/img/favicon/favicon.png"><meta itemprop="image" content="https://ja.javascript.info/img/site_preview_en_512x512.png"><meta property="og:title" content="Blob"><meta property="og:image" content="https://ja.javascript.info/img/site_preview_en_1200x630.png"><meta property="og:image:type" content="image/png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="fb:admins" content="100001562528165"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Blob"><meta name="twitter:site" content="@iliakan"><meta name="twitter:creator" content="@iliakan"><meta name="twitter:image" content="https://ja.javascript.info/img/site_preview_en_512x512.png"><meta name="google-adsense-account" content="ca-pub-6204518652652613"><link rel="prev" href="/text-decoder"><link rel="next" href="/file"><script data-collect-dnt="true" async src="https://scripts.simpleanalyticscdn.com/latest.js"></script><script>window.GA_ID = "UA-2056213-15";</script><script>window.YANDEX_METRIKA_ID = 32184394;</script><script>{function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-2LWB61WGYJ")}</script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-2LWB61WGYJ"></script><script>window.metrika={reachGoal:function(){}},window.yandex_metrika_callbacks=[function(){try{window.metrika=new Ya.Metrika({id:YANDEX_METRIKA_ID,webvisor:!0,clickmap:!0,params:{user:window.currentUser&&window.currentUser.id}}),metrika.trackLinks({delay:150}),window.addEventListener("error",function(r){window.metrika.reachGoal("JSERROR",{src:(r.filename||r.errorUrl)+": "+(r.lineno||r.errorLine),stack:r.stack||r.error&&r.error.stack,message:r.message})})}catch(r){}}];</script><script src="//mc.yandex.ru/metrika/watch.js" async></script><script>window.RECAPTCHA_ID = "6LfmLAEVAAAAAJMykMnf7aY8nkyTRmYi2ynx51R1";</script><script src="/pack/init.9d0331bb294e70c56db9.js"></script><script src="/pack/head.3c336e1939c677aeed65.js" defer></script><meta property="og:title" content="Blob"><meta property="og:type" content="article"><script src="/pack/tutorial.2da25d21c2b13cad643f.js" defer></script><script src="/pack/footer.4d7a62439a3935a4745e.js" defer></script></head><body class="no-icons"><script>window.fontTest();</script><div class="page-wrapper page-wrapper_sidebar_on"><div class="sitetoolbar sitetoolbar_tutorial"><script>window.langs = [{"code":"ar","name":"Arabic"},{"code":"az","name":"Azerbaijani"},{"code":"bg","name":"Bulgarian"},{"code":"bn","name":"Bengali"},{"code":"bs","name":"Bosnian"},{"code":"ca","name":"Catalan"},{"code":"cs","name":"Czech"},{"code":"da","name":"Danish"},{"code":"de","name":"German"},{"code":"el","name":"Greek"},{"code":"en","name":"English"},{"code":"es","name":"Spanish"},{"code":"fa","name":"Persian (Farsi)"},{"code":"fi","name":"Finnish"},{"code":"fr","name":"French"},{"code":"he","name":"Hebrew"},{"code":"hi","name":"Hindi"},{"code":"hr","name":"Croatian"},{"code":"hu","name":"Hungarian"},{"code":"hy","name":"Armenian"},{"code":"id","name":"Indonesian"},{"code":"it","name":"Italian"},{"code":"ja","name":"Japanese"},{"code":"ka","name":"Georgian"},{"code":"kk","name":"Kazakh"},{"code":"km","name":"Central Khmer"},{"code":"ko","name":"Korean"},{"code":"ku","name":"Kurdish"},{"code":"ky","name":"Kyrgyz"},{"code":"lt","name":"Lithuanian"},{"code":"me","name":"Montenegrin"},{"code":"ml","name":"Malayalam"},{"code":"ms","name":"Malay"},{"code":"my","name":"Burmese"},{"code":"nl","name":"Dutch"},{"code":"no","name":"Norvegian"},{"code":"pa","name":"Punjabi"},{"code":"pl","name":"Polish"},{"code":"pt","name":"Portuguese"},{"code":"ro","name":"Romanian"},{"code":"ru","name":"Russian"},{"code":"si","name":"Sinhala"},{"code":"sk","name":"Slovak"},{"code":"sl","name":"Slovenian"},{"code":"sq","name":"Albanian"},{"code":"sr","name":"Serbian"},{"code":"ta","name":"Tamil"},{"code":"te","name":"Telugu"},{"code":"test","name":"Test"},{"code":"th","name":"Thai"},{"code":"tk","name":"Turkmen"},{"code":"tr","name":"Turkish"},{"code":"ug","name":"Uyghur"},{"code":"uk","name":"Ukrainian"},{"code":"ur","name":"Urdu"},{"code":"uz","name":"Uzbek"},{"code":"v2","name":"v2"},{"code":"vi","name":"Vietnamese"},{"code":"zh-hant","name":"Chinese Traditional"},{"code":"zh","name":"Chinese"}];</script><script>window.lang = "ja";</script><div class="sitetoolbar__content"><div class="sitetoolbar__lang-switcher"><button class="sitetoolbar__dropdown-button" data-dropdown-toggler>JA</button><div class="sitetoolbar__dropdown-wrap"><div class="sitetoolbar__dropdown-body"><div class="sitetoolbar__lang-switcher-body"><div class="supported-langs supported-langs_toolbar"><div class="supported-langs__container"><ul class="supported-langs__list" style="height:200px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://ar.javascript.info/blob"><span class="supported-langs__brief">AR</span><span class="supported-langs__title">عربي</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://javascript.info/blob"><span class="supported-langs__brief">EN</span><span class="supported-langs__title">English</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://es.javascript.info/blob"><span class="supported-langs__brief">ES</span><span class="supported-langs__title">Español</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://fa.javascript.info/"><span class="supported-langs__brief">FA</span><span class="supported-langs__title">فارسی</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://fr.javascript.info/blob"><span class="supported-langs__brief">FR</span><span class="supported-langs__title">Français</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://id.javascript.info/blob"><span class="supported-langs__brief">ID</span><span class="supported-langs__title">Indonesia</span></a></li></ul><ul class="supported-langs__list" style="height:200px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://it.javascript.info/blob"><span class="supported-langs__brief">IT</span><span class="supported-langs__title">Italiano</span></a></li><li class="supported-langs__item supported-langs__item_current"><a class="supported-langs__link" href="https://ja.javascript.info/blob"><span class="supported-langs__brief">JA</span><span class="supported-langs__title">日本語</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://ko.javascript.info/blob"><span class="supported-langs__brief">KO</span><span class="supported-langs__title">한국어</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://learn.javascript.ru/blob"><span class="supported-langs__brief">RU</span><span class="supported-langs__title">Русский</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://tr.javascript.info/blob"><span class="supported-langs__brief">TR</span><span class="supported-langs__title">Türkçe</span></a></li><li class="supported-langs__item"><a class="supported-langs__link" href="https://uk.javascript.info/blob"><span class="supported-langs__brief">UK</span><span class="supported-langs__title">Українська</span></a></li></ul><ul class="supported-langs__list" style="height:20px"><li class="supported-langs__item"><a class="supported-langs__link" href="https://zh.javascript.info/blob"><span class="supported-langs__brief">ZH</span><span class="supported-langs__title">简体中文</span></a></li></ul></div><div class="supported-langs__text">私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に<a href="https://javascript.info/translate#help" rel="noopener noreferrer" target="_blank">翻訳するのを手伝って</a>ください。</div></div></div></div></div></div><div class="sitetoolbar__logo-wrap"><a class="sitetoolbar__link sitetoolbar__link_logo" href="/"><img class="sitetoolbar__logo sitetoolbar__logo_normal" src="/img/sitetoolbar__logo_en.svg" width="200" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_normal sitetoolbar__logo_dark" src="/img/sitetoolbar__logo_en-white.svg" width="200" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_small" src="/img/sitetoolbar__logo_small_en.svg" width="70" alt="" role="presentation"/><img class="sitetoolbar__logo sitetoolbar__logo_small sitetoolbar__logo_dark" src="/img/sitetoolbar__logo_small_en-white.svg" width="70" alt="" role="presentation"/><script>Array.prototype.forEach.call(document.querySelectorAll("img.sitetoolbar__logo"),function(e){let t=document.createElement("object");t.type="image/svg+xml",t.className=e.className,t.style.cssText="left:0;top:0;position:absolute",t.onload=function(){t.onload=null,e.style.visibility="hidden"},t.data=e.src,e.parentNode.insertBefore(t,e)});</script></a></div><div class="sitetoolbar__nav-toggle-wrap"><button class="sitetoolbar__nav-toggle" type="button"></button></div><nav class="sitetoolbar__sections"><ul class="sitetoolbar__sections-list"></ul></nav><div class="sitetoolbar__right-button-wrap"><a class="sitetoolbar-right-button sitetoolbar-right-button_courses" href="/ebook"><span class="sitetoolbar-right-button__extra-text">購入する</span>EPUB/PDF</a></div><div class="sitetoolbar__theme-switcher"><div class="theme-changer"><label class="theme-changer__label" for="theme-changer-input" data-tooltip="Change theme"><input class="theme-changer__input" type="checkbox" id="theme-changer-input" data-theme-changer="data-theme-changer"/><span class="theme-changer__icon theme-changer__icon_light-theme"></span><span class="theme-changer__icon theme-changer__icon_dark-theme"></span></label></div></div><div class="sitetoolbar__search-wrap"><div class="sitetoolbar__search-content"><button class="sitetoolbar__search-toggle" type="button"></button><form class="sitetoolbar__search" method="GET" action="/search"><div class="sitetoolbar__search-input"><div class="text-input"><input class="text-input__control" name="query" placeholder="チュートリアル内を検索" required="required" type="text"/></div><button class="sitetoolbar__find" type="submit">検索</button></div></form></div></div></div><div class="tablet-menu"><div class="tablet-menu__line"><div class="tablet-menu__content"><form class="tablet-menu-search" action="/search/"><input class="tablet-menu-search__input" type="search" name="query" placeholder="チュートリアル内を検索" required="required"/><button class="tablet-menu-search__button" type="submit" name="type" value="articles">検索</button></form></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><a class="map" href="/tutorial/map" data-action="tutorial-map"><span class="map__text">チュートリアルマップ</span></a></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><div class="theme-changer theme-changer_tablet-menu theme-changer_has-label"><label class="theme-changer__label" for="theme-changer-input-tablet" data-tooltip="Change theme"><input class="theme-changer__input" type="checkbox" id="theme-changer-input-tablet" data-theme-changer="data-theme-changer"/><span class="theme-changer__icon theme-changer__icon_light-theme"></span><span class="theme-changer__icon theme-changer__icon_dark-theme"></span><span class="theme-changer__label-text theme-changer__label-text_light-theme">Light theme</span><span class="theme-changer__label-text theme-changer__label-text_dark-theme">Dark theme</span></label></div></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><div class="share-icons"><span class="share-icons__title">シェア</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Fja.javascript.info%2Fblob" rel="nofollow"></a><a class="share share_fb" href="https://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=https%3A%2F%2Fja.javascript.info%2Fblob" rel="nofollow"></a></div></div></div><div class="tablet-menu__line"><div class="tablet-menu__content"><select class="tablet-menu__nav input-select input-select input-select_small" onchange="if(this.value) window.location.href=this.value"><option value="https://ar.javascript.info/blob">عربي</option><option value="https://javascript.info/blob">English</option><option value="https://es.javascript.info/blob">Español</option><option value="https://fa.javascript.info/">فارسی</option><option value="https://fr.javascript.info/blob">Français</option><option value="https://id.javascript.info/blob">Indonesia</option><option value="https://it.javascript.info/blob">Italiano</option><option value="https://ja.javascript.info/blob" selected>日本語</option><option value="https://ko.javascript.info/blob">한국어</option><option value="https://learn.javascript.ru/blob">Русский</option><option value="https://tr.javascript.info/blob">Türkçe</option><option value="https://uk.javascript.info/blob">Українська</option><option value="https://zh.javascript.info/blob">简体中文</option></select></div></div></div><progress class="tutorial-progress" data-sticky value="3" max="4" data-tooltip="レッスン 3 of 4"></progress></div><div class="page page_sidebar_on page_inner_padding"><script>if(localStorage.noSidebar){document.querySelector(".page").classList.remove("page_sidebar_on");let e=document.querySelector(".page-wrapper");e&&e.classList.remove("page-wrapper_sidebar_on")}setTimeout(function(){document.querySelector(".page").classList.add("page_sidebar-animation-on")});</script><div class="page__inner"><main class="main main_width-limit"><header class="main__header"><div class="main__header-inner"><div class="main__header-group"><ol class="breadcrumbs"><li class="breadcrumbs__item breadcrumbs__item_home"><a class="breadcrumbs__link" href="/"><span class="breadcrumbs__hidden-text">チュートリアル</span></a></li><li class="breadcrumbs__item" id="breadcrumb-1"><a class="breadcrumbs__link" href="/binary"><span>バイナリデータ、ファイル</span></a></li><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"チュートリアル","item":"https://ja.javascript.info/"},{"@type":"ListItem","position":2,"name":"バイナリデータ、ファイル","item":"https://ja.javascript.info/binary"}]}</script></ol><div class="updated-at" data-tooltip="最終更新日2021年12月15日"><div class="updated-at__content">2021年12月15日</div></div></div><h1 class="main__header-title">Blob</h1></div></header><div class="content"><article class="formatted" itemscope itemtype="http://schema.org/TechArticle"><meta itemprop="name" content="Blob"><div itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="email" content="iliakan@gmail.com"><meta itemprop="name" content="Ilya Kantor"></div><div itemprop="articleBody"><p><code>ArrayBuffer</code> とビューは ECMA 規格、JavaScript の一部です。</p> <p>ブラウザには、さらに <a href="https://www.w3.org/TR/FileAPI/">File API</a> に記載されている高水準のオブジェクトがあります。特に <code>Blob</code> です。</p> <p><code>Blob</code> はオプションの文字列 <code>type</code> (通常は MIMEタイプ) と <code>blobParts</code> – 一連の他の <code>Blob</code> オブジェクト、文字列や <code>BufferSources</code> から構成されます。</p> <figure><div class="image" style="width:659px"> <div class="image__ratio" style="padding-top:16.84370257966616%"></div> <object type="image/svg+xml" data="/article/blob/blob.svg" width="659" height="111" class="image__image" data-use-theme> <img src="/article/blob/blob.svg" alt="" width="659" height="111"> </object> </div></figure><p>コンストラクタの構文は次の通りです:</p> <div id="oqqbiuoawj" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>new Blob(blobParts, options);</code></pre> </div> </div> </div><ul> <li><strong><code>blobParts</code></strong> は <code>Blob</code>/<code>BufferSource</code>/<code>String</code> の値の配列です</li> <li><strong><code>options</code></strong> オプションのオブジェクト: <ul> <li><strong><code>type</code></strong> – blob タイプ, 通常は例えば <code>image/png</code> のような MIME タイプです,</li> <li><strong><code>endings</code></strong> – blob が現在の OS の改行(<code>\r\n</code> or <code>\n</code>)に対応するように行末を変換するかどうかを意味します。デフォルトでは <code>"transparent"</code> (何もしません)ですが、 <code>"native"</code> (変換する)にすることもできます。</li> </ul> </li> </ul> <p>例:</p> <div id="lxluh310uf" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// 文字列から Blob を作成します let blob = new Blob(["<html>…</html>"], {type: 'text/html'}); // 注意してください: 最初の引数は配列である必要があります</code></pre> </div> </div> </div><div id="ijqk70py8b" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// 型付き配列と文字列から Blob を作成します let hello = new Uint8Array([72, 101, 108, 108, 111]); // 二進での "hello" let blob = new Blob([hello, ' ', 'world'], {type: 'text/plain'});</code></pre> </div> </div> </div><p>blob の一部を抽出することもできます:</p> <div id="2n3wfiner2" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>blob.slice([byteStart], [byteEnd], [contentType]);</code></pre> </div> </div> </div><ul> <li><strong><code>byteStart</code></strong> – 開始バイト、デフォルトは 0。</li> <li><strong><code>byteEnd</code></strong> – 最後のバイト(このバイトは含みません。デフォルトは最後までです).</li> <li><strong><code>contentType</code></strong> – 新しい blob の <code>type</code> です。デフォルトは元と同じになります。</li> </ul> <p>引数は <code>array.slice</code> に似ており、負の値も許可されます。</p> <div class="important important_smart"> <div class="important__header"><span class="important__type">Blobs は immutable(イミュータブル(不変))です</span></div> <div class="important__content"><p>blob のデータを直接変更することはできませんが、blob の一部を切り出したり、それらから新しい blob を作成したり、それらを新しい blob にミックスしたりすることはできます。</p> <p>この振る舞いは JavaScript の文字列に似ています: 文字列内の文字を変えることはできませんが、訂正した新しい文字列を作成することはできます。</p> </div></div> <h2><a class="main__anchor" name="ref-1386" href="#ref-1386">URL としての Blob</a></h2><p>Blob はその内容を表示するのに、<code><a></code>, <code><img></code> や他のタグの URL として簡単に使うことができます。</p> <p><code>type</code> のおかげで blob をダウンロード/アップロードすることも可能で、それはネットワークリクエストではもちろん <code>Content-Type</code> になります。</p> <p>簡単例から始めてみましょう。リンクをクリックすると、<code>hello world</code> の内容をもつ、動的に生成された blob をファイルとしてダウンロードします。:</p> <div id="7ligj5f1pr" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="表示" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="サンドボックで開く" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-markup"><code> <a download="hello.txt" href='#' id="link">Download</a> <script> let blob = new Blob(["Hello, world!"], {type: 'text/plain'}); link.href = URL.createObjectURL(blob); </script></code></pre> </div> </div> </div><p>また、JavaScript で動的にリンクを作成し、<code>link.click()</code> によりクリックをシミュレートすることもできます。すると、ダウンロードは自動的に始まります。</p> <p>これは HTML なしで、動的に生成された Blob を利用者にダウンロードさせる類似のコードです:</p> <div id="tdwn9h40f5" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="実行" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="サンドボックで開く" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let link = document.createElement('a'); link.download = 'hello.txt'; let blob = new Blob(['Hello, world!'], {type: 'text/plain'}); link.href = URL.createObjectURL(blob); link.click(); URL.revokeObjectURL(link.href);</code></pre> </div> </div> </div><p><code>URL.createObjectURL</code> は blob を取り、<code>blob:<origin>/<uuid></code> という形式の一意なURLを生成します。</p> <p>これは、<code>link.href</code> の値がどのように見えるかの例です:</p> <div id="7dd59esf0l" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-none"><code>blob:https://javascript.info/1e67e00e-860d-40a5-89ae-6ab0cbee6273</code></pre> </div> </div> </div><p><code>URL.createObjectURL</code> により生成された各 URL に対して、ブラウザは url → blob のマッピングを内部に格納します。そのため、url は短いですが、blob にアクセスすることができます。</p> <p>生成された url (とそれへのリンク)は現在のドキュメント内で、かつ開いている間のみ有効です。それにより、<code><img></code>, <code><a></code> 、基本的に url を想定するあらゆるオブジェクトで blob を参照することができます。</p> <p>しかし、副作用もあります。blob のマッピングがある間、blob 自身はメモリ内に存在し続けます。ブラウザはそれを解放することはできません。</p> <p>マッピングは、ドキュメントがアンロードされると自動的にクリアされ、blob もそのとき解放されます。しかしアプリケーションの寿命が長ければ、すぐにはそれは起きません。</p> <p><strong>したがって、URL を作成すると、それ以上必要なくなっても、blob はメモリに溜まります。</strong></p> <p><code>URL.revokeObjectURL(url)</code> は内部のマッピングから参照を削除します。これにより blob が削除され(他に参照がない場合)、メモリを解放することができます。</p> <p>最後の例では、blob は即時ダウンロードのために、一度だけ使われることを意図しているので、すぐに <code>URL.revokeObjectURL(link.href)</code> を呼び出します。</p> <p>しかし、クリック可能な HTML リンクのある前の例では、<code>URL.revokeObjectURL(link.href)</code> を呼び出しません。なぜなら、これは blob url を無効にするからです。失効後は、マッピングが削除されているので、url は機能しなくなります。</p> <h2><a class="main__anchor" name="ref-1387" href="#ref-1387">Blob を base64 にする</a></h2><p><code>URL.createObjectURL</code> の代替は blob を base64 エンコードされた文字列に変換する方法です。</p> <p>このエンコーディングは、0 から 64 までの ASCII コードを用いて、バイナリデータを安全で “読み出し可能な” 文字列として表現します。そしてより重要なことは、“data-url” でこのエンコーディングが使用できることです。</p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">data url</a> は <code>data:[<mediatype>][;base64],<data></code> の形式です。このような url は “通常の” url と同等に、あらゆる場所で使用することができます。</p> <p>例えば、これはスマイリーです:</p> <div id="h99gn2ui66" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-markup"><code><img src="data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7"></code></pre> </div> </div> </div><p>ブラウザは文字列をデコードし、イメージを表示します: <img src="data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7"></p> <p>blob を base64 に変換するためには、組み込みの <code>FileReader</code> オブジェクトを使用します。それは複数のフォーマットで blob からデータを読むことができます。<a href="/file">次のチャプター</a>では、より詳しく説明します。</p> <p>これは、blob をダウンロードするで、base64 経由です:</p> <div id="bl5qlgohkh" data-trusted="1" class="code-example" data-highlight="[{"start":5,"end":6}]"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="実行" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="サンドボックで開く" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let link = document.createElement('a'); link.download = 'hello.txt'; let blob = new Blob(['Hello, world!'], {type: 'text/plain'}); let reader = new FileReader(); reader.readAsDataURL(blob); // blob を base64 へ変換し onload を呼び出します reader.onload = function() { link.href = reader.result; // data url link.click(); };</code></pre> </div> </div> </div><p>blob の URL を作成する方法は両方とも使用可能です。しかし、通常は <code>URL.createObjectURL(blob)</code> がよりシンプルで速いです。</p> <div class="balance"><div class="balance__pluses"> <div class="balance__content"> <div class="balance__title">URL.createObjectURL(blob)</div><ul class="balance__list"><li>メモリを気にする場合は、無効にする必要があります。</li> <li>blob への直接アクセス、“encoding/decoding” はありません。</li> </ul></div></div><div class="balance__minuses"> <div class="balance__content"> <div class="balance__title">Blob to data url</div><ul class="balance__list"><li>何も無効にする必要はありません。</li> <li>巨大な blob のエンコーディングでは、パフォーマンスとメモリを失います。</li> </ul></div></div></div><h2><a class="main__anchor" name="ref-1388" href="#ref-1388">Image を blob にする</a></h2><p>画像、画像の一部、あるいはページのスクリーンショットの blob を作成することもできます。どこかにアップロードするときに便利です。</p> <p>画像操作は <code><canvas></code> 要素を通して行われます:</p> <ol> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage">canvas.drawImage</a> を使って、canvas 上で画像(または一部)を書きます。</li> <li>blob を作成し、完了時に <code>callback</code> を実行する canvas メソッド <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob">.toBlob(callback, format, quality)</a> を呼び出します。</li> </ol> <p>下記の例では、画像を単にコピーしていますが、blob を作成する間に canvas 上で切り取ったり変形させることができます。:</p> <div id="99wqd7b2de" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="toolbar codebox__toolbar"> <div class="toolbar__tool"> <a href="#" title="実行" data-action="run" class="toolbar__button toolbar__button_run"></a> </div> <div class="toolbar__tool"> <a href="#" title="サンドボックで開く" target="_blank" data-action="edit" class="toolbar__button toolbar__button_edit"></a> </div> </div> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// 画像を取ります let img = document.querySelector('img'); // 同じサイズの <canvas> を作ります let canvas = document.createElement('canvas'); canvas.width = img.clientWidth; canvas.height = img.clientHeight; let context = canvas.getContext('2d'); // 画像をコピーします (このメソッドで画像をカットすることができます) context.drawImage(img, 0, 0); // canvas 上では、context.rotate(), やその他様々なことができます // toBlob は非同期操作で、callback は完了時に呼ばれます canvas.toBlob(function(blob) { // blob の準備ができたのでダウンロードします let link = document.createElement('a'); link.download = 'example.png'; link.href = URL.createObjectURL(blob); link.click(); // ブラウザがメモリをクリアできるよう、内部の blob への参照を削除します。 URL.revokeObjectURL(link.href); }, 'image/png');</code></pre> </div> </div> </div><p>コールバックより <code>async/await</code> を好む場合は次のようになります:</p> <div id="iwgfk5cqis" data-trusted="1" class="code-example"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));</code></pre> </div> </div> </div><p>ページをスクリーンショットするには、<a href="https://github.com/niklasvh/html2canvas">https://github.com/niklasvh/html2canvas</a> のようなライブラリが使えます。これがしていることは、単にページを見て <code><canvas></code> 上にそれを描いているだけです。そして、上と同じ方法でその blob を取得することができます。</p> <h2><a class="main__anchor" name="ref-1389" href="#ref-1389">Blob から ArrayBuffer へ</a></h2><p><code>Blob</code> コンストラクタは、<code>BufferSource</code> を含め、ほぼ何からでも blob を作成することができます。</p> <p>しかし、低レベルの処理を実行する必要がある場合、<code>FileReader</code> を使って、最も低レベルである <code>ArrayBuffer</code> を取得することもできます。:</p> <div id="r2trc55z0a" data-trusted="1" class="code-example" data-highlight="[{"start":3,"end":3}]"> <div class="codebox code-example__codebox"> <div class="codebox__code" data-code="1"> <pre class="line-numbers language-javascript"><code>// blob から arrayBuffer を取得 let fileReader = new FileReader(); fileReader.readAsArrayBuffer(blob); fileReader.onload = function(event) { let arrayBuffer = fileReader.result; };</code></pre> </div> </div> </div><h2><a class="main__anchor" name="ref-1390" href="#ref-1390">サマリ</a></h2><p><code>ArrayBuffer</code>, <code>Uint8Array</code> やその他の <code>BufferSource</code> が “バイナリデータ” である一方、<a href="https://www.w3.org/TR/FileAPI/#dfn-Blob">Blob</a> は “タイプを持つバイナリデータ” を表します。</p> <p>これは Blob のアップロード/ダウンロード操作を便利にし、ブラウザでは一般的です。</p> <p><a href="/xmlhttprequest">XMLHttpRequest</a>, <span class="markdown-error">記事 "fetch-basics" が見つかりません</span> などの webリクエストを行うメソッドは、他のバイナリタイプと同様に、<code>Blob</code> をネイティブに使用することができます。</p> <p><code>Blob</code> と低レベルのバイナリデータ型の間の変換は容易に行うことができます。:</p> <ul> <li><code>new Blob(...)</code> コンストラクタを使用して、型付き配列から Blob を作成することができます。</li> <li><code>FileReader</code> を使用して、Blob から <code>ArrayBuffer</code> に戻すことができ、低レベルのバイナリ処理のためにビューを作成することもできます。</li> </ul> </div></article></div><div class="page__nav-wrap"><a class="page__nav page__nav_prev" href="/text-decoder" data-tooltip="TextDecoder と TextEncoder"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">前のレッスン</span></a><a class="page__nav page__nav_next" href="/file" data-tooltip="File と FileReader"><span class="page__nav-text"><span class="page__nav-text-shortcut"></span></span><span class="page__nav-text-alternate">次のレッスン</span></a></div><div class="article-tablet-foot tablet-only"><div class="article-tablet-foot__layout"><div class="share-icons"><span class="share-icons__title">シェア</span><a class="share share_tw" href="https://twitter.com/share?url=https%3A%2F%2Fja.javascript.info%2Fblob" rel="nofollow"></a><a class="share share_fb" href="https://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=https%3A%2F%2Fja.javascript.info%2Fblob" rel="nofollow"></a></div><div class="article-tablet-foot__map"><a class="map" href="/tutorial/map" data-action="tutorial-map"><span class="map__text">チュートリアルマップ</span></a></div></div></div><div class="comments formatted" id="comments"><div class="comments__header"><h2 class="comments__header-title"><a href="#comments" name="comments">コメント</a></h2><div class="comments__read-before"><span class="comments__read-before-link">コメントをする前に読んでください…</span><div class="comments__read-before-popup"><div class="comments__read-before-popup-i"><ul><li>自由に記事への追加や質問を投稿をしたり、それらに回答してください。</li><li>数語のコードを挿入するには、<code><code></code> タグを使ってください。複数行の場合は <code><pre></code> を、10行を超える場合にはサンドボックスを使ってください(<a href='https://plnkr.co/edit/?p=preview'>plnkr</a>, <a href='https://jsbin.com'>JSBin</a>, <a href='http://codepen.io'>codepen</a>…)。</li><li>記事の中で理解できないことがあれば、詳しく説明してください。</li></ul></div></div></div></div><div id="disqus_thread"></div><script>var disqus_config = function() { if (!this.page) this.page = {}; Object.assign(this.page, {"url":"https:\/\/ja.javascript.info\/blob","identifier":"\/blob"}); };</script><script>var disqus_shortname = "ja-javascript-info";</script><script>var disqus_enabled = true;</script></div></script></main></div><div class="sidebar page__sidebar sidebar sidebar_sticky-footer"><button class="sidebar__toggle" data-sidebar-toggle></button><a class="map" href="/tutorial/map" data-action="tutorial-map" data-tooltip="チュートリアルマップ"></a><div class="sidebar__inner"><div class="sidebar__content"><div class="sidebar__section"><h4 class="sidebar__section-title">チャプター</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="/binary">バイナリデータ、ファイル</a></li></ul></nav></div><div class="sidebar__section"><h4 class="sidebar__section-title">レッスンナビゲーション</h4><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-1386">URL としての Blob</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-1387">Blob を base64 にする</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-1388">Image を blob にする</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-1389">Blob から ArrayBuffer へ</a></li><li class="sidebar__navigation-link"><a class="sidebar__link" href="#ref-1390">サマリ</a></li></ul></nav></div><div class="sidebar__section"><nav class="sidebar__navigation"><ul class="sidebar__navigation-links"><li class="sidebar__navigation-link"><a class="sidebar__link" href="#comments">コメント</a></li></ul></nav></div><div class="sidebar__section"><div class="sidebar__section-title">シェア</div><a class="share share_tw sidebar__share" href="https://twitter.com/share?url=https%3A%2F%2Fja.javascript.info%2Fblob" rel="nofollow"></a><a class="share share_fb sidebar__share" href="https://www.facebook.com/sharer/sharer.php?s=100&p[url]=https%3A%2F%2Fja.javascript.info%2Fblob" rel="nofollow"></a></div><div class="sidebar__section"><a class="sidebar__link" href="https://github.com/javascript-tutorial/ja.javascript.info/blob/master/4-binary/03-blob" rel="nofollow">GitHubで編集</a></div></div></div></div></div></div><div class="page-footer"><ul class="page-footer__list"><li class="page-footer__item page-footer__item_copy">© 2007—2025  Ilya Kantor</li><li class="page-footer__item page-footer__item_about"><a class="page-footer__link" href="/about">プロジェクトについて</a></li><li class="page-footer__item page-footer__item_contact"><a class="page-footer__link" href="/about#contact-us">コンタクト</a></li></ul></div></body></html>