HTML5の便利なTips100選

記事一覧

デスクトップアプリライクな操作性を実現するドラッグ&ドロップAPI

ドラッグ&ドロップAPIは、名前のとおり、ページ上のさまざまな要素をマウスでドラッグ&ドロップできるようにするための仕組みです。一例を挙げると、ドラッグ&ドロップ機能とFile APIとを組み合わせることで、ブラウザに対してドロップしたファイルをそのままサーバーにアップロードできるようになるなど、

山田 祥寛(YAMADA, Yoshihiro...

2013年3月1日 20:00

  • Web開発
  • 技術解説

JavaScriptでローカルファイルを自在に操る - File API

HTML5では、新たに追加されたFile APIを利用することで、ローカルのファイルやファイルシステムをJavaScriptのコードから操作できるようになりました。File APIを利用することで、(例えば)ローカルのファイルを読み込み、Ajax経由でサーバサイドに引き渡すような操作も、ごくシンプ

山田 祥寛(YAMADA, Yoshihiro...

2013年2月6日 20:00

  • Web開発
  • 技術解説

プラグインは要らない!音声/動画対応したHTML5 - <audio>/<video>要素

HTML5では、新たに、要素(メディア要素)が追加されました。これらの要素と関連するAPIを利用することで、Flashなどのプラグインに頼らずとも、ブラウザ標準の機能だけで音声/動画ファイルを再生できるようになります。あとから述べるように、ブラウザによって対応する音声/ビデオ形式にバラツキがあるな

山田 祥寛(YAMADA, Yoshihiro...

2013年1月26日 1:00

  • Web開発
  • 技術解説

クッキーより便利になったブラウザ標準ストレージ - Web Storage

Web Storage(以降、ストレージ)とは、ブラウザ標準で用意されたデータストアの一種です。データを特定するための名前(キー)と値との組み合わせでデータを管理することから、Key-Value型データストアと呼ばれることもあります。あまりに複雑なデータ管理には不向きですが、ちょっとしたデータを管

山田 祥寛(YAMADA, Yoshihiro...

2012年10月18日 20:00

  • Web開発
  • 技術解説

HTML+JavaScriptだけでブラウザに図形描画(3) - Canvas API -

第2回、第3回と続いてきたCanvas API編も、今回が最後。本稿では、キャンバスの設定を保存する方法やキャンバスの内容をデータ化する方法、ユーザーのマウス操作に応じて図形を描画する方法などなどについて紹介します。[第4回目次]

山田 祥寛(YAMADA, Yoshihiro...

2012年10月11日 20:00

  • Web開発
  • 技術解説

HTML+JavaScriptだけでブラウザに図形描画(2) - Canvas API -

今回は、前回の記事に続いてCanvas APIに関するAPIをまとめます。[第3回目次]

山田 祥寛(YAMADA, Yoshihiro...

2012年8月6日 20:00

  • Web開発
  • 技術解説

HTML+JavaScriptだけでブラウザに図形描画 - Canvas API -

Canvas APIは、HTML+JavaScriptだけで図形を描画するための機能です。従来、ブラウザ上で動的に図形を描画するには、Flashのようなプラグインを利用しなければなりませんでした。しかし、Canvas APIを利用することで、ブラウザ標準の機能だけで同じようなことが実現できます。今

山田 祥寛(YAMADA, Yoshihiro...

2012年6月26日 20:00

  • Web開発
  • 技術解説

スマホアプリ開発にも便利な位置情報API - Geolocation API -

HTML5は、Webページを作成するための基本的なマークアップ言語HTMLの最新版です。もっとも、HTML5では、単なるマークアップ言語としての機能だけではなく、JavaScriptで利用できるAPIが大幅に拡充され、アプリケーション開発がより簡単になっているのが特徴です(HTML5について、より

山田 祥寛(YAMADA, Yoshihiro...

2012年5月18日 20:00

  • Web開発
  • 技術解説

人気記事トップ10

人気記事ランキングをもっと見る

企画広告も役立つ情報バッチリ! Sponsored

ClickHouse Cloudが実現した広告運用SaaS「ATOM」のデータ基盤革新、パフォーマンスを向上しながら、運用負荷とコストを削減 11月11日 6:20 AIで開発が加速する時代、品質保証はどう変わる? Tricentisが示すAIエージェント活用の実像 11月9日 6:45 悪用までの猶予が「1分」に迫るフロンティアAI時代に開発と本番を貫く脆弱性管理が必要 10月29日 8:30 欧州CRA対応とSBOM運用。AI生成コードのOSS混入問題の対策とは ――スニペット単位で検出する「FossID」「Insignary Clarity」によるSBOM運用 9月16日 6:40 PostgreSQLからTiDBへ、稼働中SaaSで進める段階的DB移行の実践と再設計への展望 9月7日 6:30 機能安全開発におけるGoogleTestの活用を支援!「Parasoft C/C++test CT」で実現する効率化&AI連携 4月14日 6:30 【CNDW2025】Grafanaが明かす「オブザーバビリティの哲学」ー最小限の労力で実用的なインサイトを得るには 1月23日 6:30 【CNDW2025】プロダクト急増に備える基盤刷新 ーウェルスナビがECSからEKSへの移行で得た知見とは 1月15日 6:30 【CNDW2025】250環境を5人で運用、構築時間は30分に ーKINTOテクノロジーズが語るインフラ基盤組織の作り方 2025年12月18日 6:30 新たな自動化で熱視線! AIエージェントの「推論能力」を支える2つのコンポーネントとは? 2025年11月28日 6:30