JavaScript

Webページ上の特定の範囲を画像として保存したい場面は少なくありません。JavaScriptのhtml2canvasライブラリを使えば、HTMLのDIV要素をそのまま画像として保存することができます。DIVタグとはDIVタグは、HTMLドキュメント内でひとつの区画（セクション）を定義するための要素です。レイアウトのグループ化やスタイルの適用など、幅広い用途で使用されます。保存対象となるDIVの例以下は、id属性に「cpimg」を指定したDIV要素の例です。<div id="cpimg" style="padding: 20px;">

HTML5では、formnovalidate属性を使用することで、フォーム送信時の入力検証（バリデーション）を回避できます。 formnovalidate属性とは formnovalidate属性は、HTML5で導入された送信ボタン（type=submit）専用の属性です。この属性が付いたボタンがクリックされると、そのフォームに設定されている入力チェック（required属性やtype=emailなどの形式検証）をすべてスキップして送信されます。 たとえば、「入力途中でも一時保存したい」「あえて空欄のまま送信したい」といったケースで便利です。フォーム全体ではなく、ボタン単位で検証の有無を切り替

Blob.slice()メソッドとはHTML5で導入されたBlob.slice()メソッドは、元のBlobオブジェクトから指定したバイト範囲のデータを抽出し、新しいBlobオブジェクトを作成するための便利なメソッドです。大きなファイルを分割してアップロードしたい場合や、ファイルの一部だけを処理したい場合に特に役立ちます。slice()メソッドには、開始位置と終了位置（オプション）を引数として指定できます。slice()を使ったバイナリデータの送受信例以下は、slice()メソッドを使用してバイナリデータを送受信する例です。このサンプルコードでは、テキストデータを持つBlobオブジェクトを作成し

HTMLの<input>要素(type=number)に指定できるmin属性は、古いバージョンのFirefoxでは正しく機能しないケースがありました。一方、Google Chromeでは問題なく動作します。min属性は、ユーザーが入力できる数値の最小値を指定するための属性です。フォーム送信時にブラウザ側で入力値の検証(バリデーション)が行われ、指定した範囲外の値が入力されるとエラーメッセージが表示されます。なお、現在の最新版のFirefoxではmin属性・max属性ともにサポートされています。min属性の使用例以下は、1から10までの数値を入力させるフォームのサンプルコードです。&

HTML5のCanvas APIには、変換行列（transformation matrix）を直接操作できるメソッドが用意されています。変換行列は初期状態で単位変換（identity transform）となっており、その後、各種の変換メソッドを呼び出すことで自由に調整できます。 主な変換メソッド translate(x, y)：座標原点を指定した位置へ移動します。 rotate(angle)：指定した角度（ラジアン）だけ描画内容を回転させます。 scale(x, y)：横方向・縦方向に拡大・縮小します。 transform(a, b, c, d, e, f)：現在の変換行列に、指定した行列

checkValidity()メソッドの概要 HTML5で導入されたcheckValidity()メソッドは、フォーム要素や入力フィールドの値が制約検証（バリデーション）のルールを満たしているかどうかを判定するためのAPIです。このメソッドはGoogle ChromeやOperaをはじめ、Firefox、Edge、Safariなど主要なモダンブラウザで広くサポートされており、JavaScriptから手軽にフォームの妥当性チェックを行うことができます。 checkValidity()を呼び出すと、要素が有効な場合はtrue、無効な場合はfalseが返されます。無効だった場合でも、form要素に対

HTMLとCSS、それぞれの誕生HTML（Hyper Text Markup Language）は、Webページを作成するために使われる、Web上で最も広く利用されている言語です。HTMLは1991年末に、Webの発明者であるティム・バーナーズ＝リー（Tim Berners-Lee）によって生み出されました。一方、CSS（Cascading Style Sheets）は、1994年10月10日にホーコン・ウィウム・リー（Håkon Wium Lie）によって考案されました。現在のCSSは、W3C（World Wide Web Consortium）内の「CSSワーキンググループ」と呼ばれる専門

Amazon S3で超大容量ファイルを扱うにはAmazon S3に10GBを超えるような極めて大きなファイルを保存したい場合、あらかじめ適切に設定された仮想マシン(EC2インスタンス)を活用することで、安定したアップロードを実現できます。S3には単一リクエストでアップロードできるサイズに上限があるため、大容量ファイルは「マルチパートアップロード」と呼ばれる分割アップロードの仕組みを利用するのが一般的です。HTML5 File APIによるクライアント側での分割HTML5のFile APIを使えば、ブラウザ上(クライアント側)で非常に大きなファイルを小さなチャンク(断片)に分割できます。分割され

HTML5のドラッグ&ドロップが動作しない原因とは? HTML5のドラッグ&ドロップAPIを使用していると、「要素はドラッグできるのに、なぜかドロップイベント(drop)が発火しない」という問題に直面することがあります。実は、これには明確な理由があります。 原因:dragoverイベントでpreventDefault()が呼ばれていない ドロップを許可するには、dragoverイベントに対するハンドラを設定し、その中でデフォルトの動作をキャンセルする必要があります。dragoverイベントのデフォルトハンドラではドロップが許可されていないため、そのままではdropイベントは一切発火しません。

問題の概要PhoneGapには位置情報を取得するためのGeolocation機能が組み込まれており、iOS上でも基本的には問題なく動作します。しかし、iOS 6環境ではgetCurrentPositionを呼び出しても成功コールバックではなく失敗（エラー）コールバックが発火してしまうという不具合が報告されています。さらに厄介なことに、一度失敗した後に再度getCurrentPositionを実行すると、成功・失敗どちらのコールバックも不安定に呼ばれることがあり、アプリの挙動が予測できない状態になります。iOS 6での対処法：PhoneGap.plistの設定を見直すiOS 6でPhoneGap

音声ファイルをデータベースに保存している場合、アプリケーション側ではそのファイルをBLOB（バイナリラージオブジェクト）として扱うことになります。たとえば、セッションスコープからログインユーザーの音楽データを取得するようなケースでは、${sessionScope.user.music} のように式言語（EL）を使って、セッションごとに対応するバイナリデータを受け取ります。Data URIスキームとはこうして取得したバイナリデータをHTML上で直接利用するには、「Data URIスキーム」が便利です。これは data: で始まるURI形式で、MIMEタイプとBase64エンコードされたデータ本体

WebGLで前回の描画内容が消えてしまう問題 WebGLでは、コード上でカラーバッファをクリアしないよう意図していても、次の描画サイクルの開始時に画面が自動的にクリアされてしまうことがあります。そのため、前フレームの描画結果を残したい場合には困りものです。 mycanvas.clearColor(d[1], d[2], d[3], 2.0); mycanvas.clear(gl.COLOR_BUFFER_BIT); 上記のような明示的なクリア処理を書かなくても、デフォルト設定では毎フレームの描画前にドローバッファがリセットされる仕様になっているため、前回の描画内容は保持されません。 解決策：

HTML5のFile APIを使ってファイルアップローダーを開発する際、「実際のデータ内容に基づいて重複ファイルがアップロードされないようにしたい」というニーズはよくあります。同じファイル名でも中身が異なるケースや、逆に名前が違っても内容が完全に一致するケースがあるため、ファイル名だけでの判定では不十分です。MD5ハッシュ計算の課題重複チェックの定番といえばMD5ハッシュの計算ですが、これをすべてクライアント側（ブラウザ上）で実行すると処理に時間がかかり、効率的とは言えません。特にサイズの大きいファイルではハッシュ計算のコストが無視できず、ユーザー体験を損なう可能性があります。重複判定に「近道

JavaScriptでファイルアップロード機能を実装していると、input type=file で選択されたファイルの一覧（FileList オブジェクト）から、特定のアイテムを削除したい場面に遭遇することがあります。しかし、FileList オブジェクトは読み取り専用のため、直接要素を削除することはできません。 FileListが直接操作できない理由 FileList はDOM APIによって管理される特殊なオブジェクトであり、splice() のような配列操作メソッドを持っていません。そのため、選択されたファイルのリストから任意の項目を取り除きたい場合は、一度通常の配列に変換してから操作

スマートフォンで撮影した写真のファイルサイズが大きすぎると、アップロードや通信に時間がかかってしまいます。「もっと小さな画像を取得したい」という場面では、W3Cが標準化している2つのカメラ撮影手法から目的に合ったものを選ぶことができます。1つはHTMLだけで完結するシンプルな方法、もう1つはJavaScriptと組み合わせて細かく制御する方法です。HTML Media CaptureHTMLだけで実装する場合は、inputタグにcapture属性とaccept=image/*を指定します。これにより、端末側へ「カメラで撮影したい」という意図を伝えることができます。ただしこの方法には重要な制限が

HTML5 Canvas要素を印刷するには HTML5の<canvas>要素は、そのままの状態では印刷ダイアログから意図どおりに出力できないことがあります。そこで一般的なのが、Canvasの描画内容をPNG画像のデータURLに変換し、それを新しいブラウザウィンドウに表示してから印刷を実行するという手法です。 ここでは、代表的な2つの実装方法を紹介します。 方法1：printElementプラグインを使う jQueryのprintElement系プラグインを利用すると、Canvas要素をシンプルな記述で印刷できます。まず、HTML側に印刷用のリンクを配置します。 <a hre

HTML5 Canvasでランダムな色の正方形を敷き詰めた円を描く方法 ブラウザ上で、円の内部をそれぞれ異なる色の小さな正方形で埋めて描画したい場面は意外と多くあります。HTML5のCanvas APIを使えば、専用の画像処理ライブラリを追加しなくても、短いJavaScriptコードだけでこの表現を実現できます。 基本のアプローチは3ステップ ステップ1： キャンバス（例：200×200）全体に、ランダムな色の正方形を順番に描画していく ステップ2： コンポジットモード（合成モード）をdestination-inに変更する ステップ3： その上に円形を描画し、円の外側のピクセルを切り抜く

HTML5のrequired属性でクライアント側検証を実現HTML5では、フォーム送信時に入力エラーを示すバルーン(ポップアップ)を表示するクライアント側の検証機能が標準で組み込まれています。この機能を利用するには、required属性を使用します。従来、空のテキストボックスが送信されないようにするなどのクライアント側検証にはJavaScriptが必要でした。しかし、HTML5で新たに導入された「required」属性を使えば、JavaScriptを一切書かずに同様の検証を実現できます。この属性が指定された入力フィールドには必ず値の入力が求められ、空のまま送信しようとするとブラウザが自動的にエ

JavaScriptでファイルブラウザを開く際、デフォルトディレクトリを指定できるのか？JavaScriptを使ってファイルブラウザ（ファイル選択ダイアログ）を開き、その初期表示フォルダを特定のディレクトリに設定したい――こうした要望はよくありますが、結論から言うとこれは不可能です。なぜデフォルトディレクトリを指定できないのかブラウザやOS（Windowsなど）は、セキュリティ上の理由により、Webページ側のコードがユーザーのマシン上の任意のパスや値を操作することを許していません。たとえば、次のようなパスを初期ディレクトリとして指定することはできません。C:\AmitもしWebサイトが自由にロ

Google Maps JavaScript APIには、マーカーをフェードイン・フェードアウトさせるための公式メソッドが用意されていません。そのため、標準的なAPIの範囲では、マーカーに透明度（opacity）を使ったアニメーション効果を直接適用することはできません。 Custom Overlayでマーカーをシミュレートする この制限を回避するために有効なのが、カスタムオーバーレイ（Custom Overlay）を作成し、マーカーを疑似的に再現する手法です。カスタムオーバーレイは通常、div要素で構成されており、このdivに対してJavaScriptまたはjQueryから透明度を自由に操作で