ラベル、テキストボックス、ボタンをいい感じに並べてみる。
いい感じとは、左端にラベル、右端にボタン、真ん中にテキストボックスを置いてブラウザの幅が変更されると真ん中のテキストボックスが伸縮するような物を作ってみる。
2パターン作ったんだけど、どっちがいいんだろう。
-->
ラベル、テキストボックス、ボタンをいい感じに並べてみる。
いい感じとは、左端にラベル、右端にボタン、真ん中にテキストボックスを置いてブラウザの幅が変更されると真ん中のテキストボックスが伸縮するような物を作ってみる。
2パターン作ったんだけど、どっちがいいんだろう。
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()を呼ぶとファイル選択ダイアログが表示される。
※注意
メッセージを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秒後に閉じるようにしている。