HTML5

WebブラウザのJavaScriptでローカルのテキストファイルを読み込んで表示してみる。
HTMLでは、セキュリティの関係でファイル名を指定して直接開くようなことができないようになっているが、<input type="file">やブラウザへのファイルのドラック&ドロップでユーザーが指定したファイルは開けるようになっている。

今回は、<input>を使ってみる。えーっと、jQueryとTypeScriptを使う。
htmlには、<body>部分に<input id="file" type="file" />と<TextArea id="hoge" rows="25" cols="80"></TextArea>を書いとく。

TypeScriptの方はこんな感じになる。

$(() => {
    // ファイル選択されたときの処理を追加
    $("#file").change(e=> {
        var target: HTMLInputElement = <HTMLInputElement>e.target;
        var fileList: FileList = target.files;

        // ファイルを読み込む
        readFile(fileList[0]);
    });
});

// ファイルの読み込み
function readFile(file: File): void {
    // ファイルリーダを用意
    var reader = new FileReader();
    //ファイルタイプがテキストかチェック
    if (file.type.match(/text/)) {
        // 読み込み成功での処理を追加
        reader.onload = (e: Event) => {
            // 読み込んだテキストをテキストエリアに設定
            var fr: FileReader = <FileReader>e.target;
            $("#hoge").val(fr.result);
        }
        // 読み込み開始(結果を文字列で取得)
        reader.readAsText(file, "utf-8");
    }
}

読み込みはFileReaderを用意して、onloadは読み込み成功で発生するので読み込み処理終了後の処理を追加して、readAsTextで非同期読み込みを開始する。
FileReaderのonloadでは、読み込んだ結果がFileReaderのresultプロパティにセットされているので、それをTextAreaに設定してやる。と、読み込んだテキストが表示される。

イベントにはonload以外に

onabort 読込処理が中断されたときに発生する。
onerror 読込中にエラーが生じたときに発生する。
onloadstart 読込が開始されたときに発生する。
onloadend 読込が成功・失敗にかかわらず終了したときに発生する。
onprogress Blobコンテンツの読込中に発生する。読み込み中の経過表示で使用できる。

がある。詳しくは、他のサイトとかリファレンスをw

あと、inputの見た目が気に入らないときは、非表示にしてボタンなどのclickイベントで$("#file").click()を呼ぶとファイル選択ダイアログが表示される。

※注意


  • Androidではinputが非表示のとき、$("#file").click()を呼んでも何も起こらないのでどっかに表示しておく必要がある。
  • file.type.machでテキストかどうかチェックしているが、Androidで開くアプリによってはfile.typeが""(空文字列)になっている場合があったので注意が必要だ。


メッセージをWebブラウザの外部に表示するAPIだ。

説明する前にTypeScriptを使うので、型定義ファイルを示しとく。

interface NotificationOptions {
	dir?: string;
	lang?: string;
	body?: string;
	tag?: string;
	icon?: string;
}

declare class Notification implements EventTarget {
	static permission: string;
	static requestPermission(callback: (permission: string) => void): void;
	
	onclick: (e: Event) => any;
	onshow: (e: Event) => any;
	onerror: (e: Event) => any;
	onclose: (e: Event) => any;
	
	dir: string;
	lang: string;
	body: string;
	tag: string;
	icon: string;
	
	close(): void;
	
	removeEventListener(type: string, listener: EventListener, useCapture?: boolean): void;
	addEventListener(type: string, listener: EventListener, useCapture?: boolean): void;
	dispatchEvent(evt: Event);
	constructor(title: string, options?: NotificationOptions);
}

このAPI、IEでサポートしてないものだからだと思うが、型定義ファイルが用意されていない。(Visual Studio 2013にて)

また、Web Notifications APIに対応しているかチェックするのに

interface Window {
	Notification: Notification;
}

が必要だ。

Web Notifications APIに対応しているかどうかは、

if (window.Notification) {
	alert("通知に対応してる");
} else {
	alert("通知に対応してない");
}

で判定する。

メッセージを出す場合、ユーザから許可を得ているか、得ていないなら許可を得なければなりません。
許可を得ているかどうかは、Notification.requestPermissionプロパティが、"granted"でないと許可を得てないので許可を得るようにする。

if (Notification.permission !== "granted") {
	Notification.requestPermission((status) => {
		if (Notification.permission !== status) {
			Notification.permission = status;
		}
	});
}

こんな感じ。

そして、メッセージを出すには、

var hoge = new Notification("title", {
	body: "body",
	icon: "icon.png",
	tag: "tag",
})
hoge.onshow = (e) => {
	setTimeout((e) => { hoge.close(); }, 3000);
};

こんな感じ。自動的に消えないのでsetTimeoutで3秒後に閉じるようにしている。


↑このページのトップヘ