JavaScriptプログラミングのTOPへ 今から3分で,HTML5のJavaScriptAPI の使い方を2つ覚えよう。 1:ドラッグ&ドロップAPI 画面上の要素を。 画面外から。 2:FileAPI 読み込み。 書き込み ※これは覚える必要はない。 シンプルなサンプルコード付きで,これらの実装の方法を素早く学習する。 ※サンプルは,IE8のようなHTML5未サポートの古いブラウザでは動かないので注意。FirefoxやChromeを使うこと。 では,ここから3分の時間のカウントを開始。集中して読もう。 (0:00〜前半の1分半) 画面内でのドラッグ・ドロップ (後半の1:30〜3:00) 画面外からのドラッグ・ドロップ 参考資料 (0:00〜前半の1分半)画面内でのドラッグ・ドロップ まず,動作例を見てみる。「リンゴ」をバスケットにドロップしてみてほしい。 動作サンプル1 ht
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています!RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.HTML5 で追加された FileAPI. これを使えば ローカルファイルの情報, 中身を取得してJavaScript でいじることができます. 今後,HTML5 の普及とクラウド化が進むにつれて重要な機能になることは間違いありません. サンプルを作ってみたのでよかったらぜひ. ドラッグ & ドロップにも対応しているよん♪♪Chrome でローカル上で作業する場合,セキュリティ上ドラッグ & ドロップに反応しない場合があります. その場合,Chromeの起動オプションに –allow-file-access-from-files を指定することで読み込めるようになります. SAMPLE And D
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている(例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ)。HTML5では、ファイル操作に関するAPIとして「FileAPI」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、FileAPIは以下の3種類の仕様が策定されている。

FileAPI W3C Working Draft, 3 December 2025 More details about this document This version: https://www.w3.org/TR/2025/WD-FileAPI-20251203/ Latest published version: https://www.w3.org/TR/FileAPI/ Editor's Draft: https://w3c.github.io/FileAPI/ Previous Versions: https://www.w3.org/TR/2024/WD-FileAPI-20241204/ History: https://www.w3.org/standards/history/FileAPI/ Feedback:GitHub Inline In Spec Edi
HTML5の<video>や<audio>タグとJavaScriptAPIで、自由に動画や音声を楽しもう。カスタムのビデオプレイヤーだって作れる video/audio要素のAPIやイベントを利用する video/audio要素は、JavaScriptを用いた細かい制御を行えるのも特徴の1つです。 カスタムのビデオプレイヤーを作ることも容易ですし、動画からフレームを切り出してCanvasに投影し、グラフィックとして取り扱う、なんてテクニックもあります。 今回は、そうしたJavaScriptAPIの利用方法について見ていきましょう。なお、この記事は2011年5月25日版の仕様に基づいています。 video/audioに共通のメソッド、プロパティ video要素とaudio要素は、メソッドやプロパティの多くが共通です。そうしたメソッドやプロパティを表すのが以下の一覧です。 MediaErr

1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く