[Javascript] ファイルをバイナリ操作する方法 #1 ファイルアクセスの仕方

2020年2月20日

Javascript テクノロジー プログラミング 特集

海外ドラマが面白くて毎日AmazonPrimeが手放せない、下駄です。 javascriptでも、バイナリ操作を行えば、ファイルのあらゆる情報を取得することが可能です。 c言語を学習したことがある人であれば、バイナリアドレスの感覚や、ビット計算などのやり方は、理解できていると思いますが、 普段、インタプリタ系のプログラミングをメインで行う人にとっては、この手のプログラムは苦手な人が多いようです。 かくゆう僕もそうしたプログラムはやりませんが、最近では、アップロードするファイル情報を詳細に取得する処理や、 ファイル情報を書き換えるような処理を書くことが多くなってきて、便利にブラウザ内だけで処理するために、 javascriptでのバイナリ操作をやり始めました。

Javascriptでファイルのバイナリ操作をする方法

まず、ブラウザでファイルアップロードできるinputタグのtype=fileに登録されたファイルに関しては、javascriptのfileAPIを使って、アクセスすることが可能になります。 そして、そのファイルを以下のようにすると、ファイルのバイナリデータを取得することができるようになるんですね。 <input type="file" name="local_file"> 上記のタグを使って選択されたローカルファイルをjavascriptでバイナリアクセスします。 // inputタグからfileAPIにアクセス var input = document.querySelector("[type='file']"); var file = input.files[0]; // ファイルからバイナリデータを取得 var reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = (function(e){ var binary = e.target; }).bind(this); こうすることで、"binary変数"には、配列としてアクセスできるデータが格納されます。

callbackが重要

お気づきの人もいるかと思いますが、ファイルをonloadしないと、binaryデータは取得できないので、非同期処理として作業を進める必要があります。 こうした処理を行っているプログラムを見ると頻繁にcallback関数が書かれているのはこのためなんですね。 ちなみに、このbinaryデータを配列としてアクセスすると、00-ffの10進数で取得することができますが、その値の扱い方は、ファイルフォーマットの仕様によって異なります。 画像や音楽データなどを紐解いてみると、意外と簡単にデータ変換処理ができたり、内部情報を取得できるため、もはや使わなくなるアプリケーションなども増えそうですね。 次回は、binaryデータを使って、それぞれのアドレスに入っているデータへのアクセス方法をやってみたいと思います。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。