苦学楽学塾 ホームページ
最終更新日：2025年1月5日
Blobは、Binary Large objectの略です。JavaScriptでは、テキスト・ファイルだけでなく、画像データ、音声データなどのバイナリで表される種々の形式のデータを総称してBlobと言います。Blobオブジェクトは、以下のようにconstructorで生成します。
ar1 = ["祇園精舎の鐘の声", "諸行無常の響きあり", "沙羅双樹の花の色", "盛者必衰の理を表す", "驕れる人も久しからず", "ただ春の夜の夢の如し" ]
t1 = { type:'text/plain' }
const blob1 = new Blob(ar1, t1);
constructorの最初の引数は、データ本体を配列に入れて指定します。第2引数は、メディア種別をMIME形式で記述したものです。MIMEは、'タイプ/サブタイプ'という形をしています。タイプには、
application 特定のアプリケーションのデータを示します。例えば、PDFデータの場合、'applicaiotion/pdf'となります。
audio 音声データを示します。音楽データであれば、'audio/mpeg'です。
font フォント(字体)・データを示します。'font/woff'，'font/ttf'などがあります。
image 画像データを示します。'image/gif'，'image/jpeg'，'image/png'などがあります。
text テキスト・データを示します。'text/plain'，'text/csv'，'text/html'，'text/css'，'text/calendar'，'text/javascript'などがあります。
video 動画データを示します。'video/mp4'などがあります。
があります。
text/plainタイプで、エンコードを指定するときは、UTF-8であれば、
t1 = { type:'text/plain;charset=utf-8;' }
シフトJISであれば、
t1 = { type:'text/plain;charset=shift-jis;' }
とします。
Blobオブジェクトは、typeとsizeの2つのプロパティを持っています。上記のblob1であれば、blob1.typeには、text/plainが入っていて、blob1.sizeは162になっています。
Blobオブジェクトを使って、JavaScriptで作成されたデータのダウンロードが行えます。例えば、以下の
ar1 = ["祇園精舎の鐘の声", "諸行無常の響きあり", "沙羅双樹の花の色", "盛者必衰の理を表す", "驕れる人も久しからず", "ただ春の夜の夢の如し"];
という文字列の配列をウェブサイトの読者にダウンロードさせる(違法ダウンロードなど、絶対に悪用しないでくださいね)、というのであれば、以下のようなJavaScriptプログラムでこの文字列データをBlobオブジェクトを利用して、ダウンロードできます。
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScriptのテスト</title>
<style type="text/css">
p{color:black;font-size:medium}
</style>
</head>
<body style="background-color:white">
<p>JavaScriptのテストをします。</p>
<button class="download">download</button>
<script>
// Blobのテスト
ar1 = ["祇園精舎の鐘の声", "諸行無常の響きあり", "沙羅双樹の花の色", "盛者必衰の理を表す", "驕れる人も久しからず", "ただ春の夜の夢の如し"];
for (str1 of ar1) {
comment(str1);
}
t1 = { type:'text/plain' }
var btn1 = document.querySelector(".download");
btn1.addEventListener('click', func1);
function func1() {
const blob1 = new Blob(ar1, t1);
var link1 = document.createElement('a');
link1.href = URL.createObjectURL(blob1);
link1.download = "heike.txt";
link1.click();
}
HTMLの部分では、<button class="download">download</button>として、"download"というクラス名を付けて"download"と表示するボタンを用意します。ar1はJavaScriptで作成された文字列データ(配列に入れられた形で用意します)だとします。querySelectorメソッドを用いて、"download"というクラス名のボタンを取得しbtn1とします。addEventListenerメソッドを用いて、btn1に'click'イベントのイベントハンドラfunc1()を設定します。
"download"と書かれたボタン上でマウス・クリックすると起動するイベントハンドラfunc1()では、Blobクラスのconstructorを用いて、ダウンロードさせたい文字列配列ar1を格納するインスタンスblob1を生成します。文字列のダウンロードなのでtypeは'tenxt/plain'とします。さらに、ダウンロードを実行させる疑似的なリンク(<a>タグ)をdocument.createElemment('a')として作成してlink1とします。URL.createObjectURL()メソッドをblob1オブジェクトに対して適用し、ダウンロード元のURLを作成しlink1のhrefプロパティに設定します。ダウンロード後のデフォルトのファイル名をdownloadプロパティに設定します。さらに、link1.click()として疑似的なクリック・イベントを発生させてリンクにダウンロードを行わせます。
上記のBlobのテスト・プログラムは、こちら。画面には"download"と書かれたボタンに続いて、配列ar1の内容を表示します。"download"と書かれたボタンをクリックするとダウンロードが始まります(多分、ファイル・ダイアログが開き、保存する場所を指定します)。JavaScriptのプログラムは表示中に[F12]キーを押下して開発ツールを起動し、[ソース]をクリックし、jtest19.htmlを選んで表示させてください。上記の例では、Blobにする段階で、配列の文字が全て連結され、保存されたheike.txtというファイルの内容が、 祇園精舎の鐘の声諸行無常の響きあり沙羅双樹の花の色盛者必衰の理を表す驕れる人も久しからずただ春の夜の夢の如し
となっていると思います。
ウェブサイト読者側からのアップロードは<form>タグなどを用いて可能ですが、送信された内容を解析するものをサーバー側に置く必要があり、CGIという技術が必要で、Perlという分かりづらい言語でスクリプトを書いてサーバーに置いておく(phpという言語もありますが)か、C言語で記述しコンパイルしてサーバーに送るかですが、サーバーの多くはLINUXで動作していることが多く、LINUX上のC言語でコンパイルしなければならず、簡単ではありません。サーバー提供会社がどこまでサポートしているかも分かりません。そんなことなら、メールでやり取りして添付ファイルでデータを送るか、セキュリティ上の心配があるなら、USB等に入れて郵便で送る方がよいと思います。
【広告】 ここから広告です。ご覧の皆さまのご支援ご理解を賜りたく、よろしくお願いいたします。
【広告】 広告はここまでです。