ローカルストレージに簡単な解決策はない
原文：“There is no simple solution for local storage” (on March 5, 2012 by Chris Heilmann) 要約：私たちは良いデータストアとして localStorage を推奨するのをやめなければならない。パフォーマンスがひどく損なわれるからだ。しかし残念なことに、代わりとなるものはまだ完全にサポートされておらず、また簡単に実装できるものでもない。 Web 開発において、うますぎる話に出くわすことは常々だ。そういったもののいくつかは良いもので、だからこそそれが「すべて」として目立ってしまい、開発者を使うように仕向けてしまう。しかし、多くの場合、良いと思われていたものはそこまで良いものではない。また、しばらく使ってみてはじめて「間違っていた」と気づかされるものなのだ。 そんなもののひとつに、localStorage がある
ドラッグ＆ドロップでファイルをアップできるHTML5のデモ:phpspot開発日誌
Creating a Complete HTML5 Drag and Drop File Uploader with jQuery | InsertHTML ドラッグ＆ドロップでファイルをアップできるHTML5のデモ。 デスクトップなどからファイルをブラウザにドロップしてサムネイルを表示→ボタンを押下でアップロード実施というインタフェースのアップローダ実装デモです。 ソースをDLしてそのまま使うことも可能です。 ドロップするとサムネイルと共にボタンが表示されます。 ボタンを押すとファイルがアップロードされます。 使い慣れるといちいちダイアログからファイルを選ぶのが馬鹿らしくなりますね。 サンプルにはPHPスクリプトもおまけでついてきますが、値をValidateしていなかったりするため、実際に利用するには注意が必要そうです。 関連エントリ これは必見のWEBデザインの近未来。HTML5で構築
初めてHTML5でコーディングする時のまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、はやちです。 今回は初めてHTML5を触る人のために色々とまとめてみました。 新要素のタグなどご紹介します。 まずはじめに <!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <!--IEなど対応していないブラウザへの対応▼--> <!--[if lte IE 9]> <script src="js/html5.js" type="text/javascript"></script> <![endif]--> <title>初めてHTML5でコーディングする時のまとめ</title> <link href="css/html5reset-1.6.1.css" rel="stylesheet" type="text/css" media="all" /> </head> HTML5特有の
HTML5--押さえておくべき10のタグ
HTML5では、ウェブ開発時に強力なパワーや効率性、柔軟性を発揮するタグと属性が新たに追加されている。本記事では、そういったタグを10個選んで紹介する。 HTML5では、他のシステム（特に検索エンジン！）がドキュメントをより容易に解析できるようにしたり、今までにないデータ表示を可能にしたり、複雑なJavaScript、あるいは「Adobe Flash」や「Microsoft Silverlight」といったブラウザのプラグインを必要としていた機能に取って代わるような数々の新たな要素や属性が追加されている。以下では、HTML5を用いてあなたのウェブサイトを構築する際に役立つ10個の新たなタグを紹介する。 ＃1：<video>タグと<audio>タグ FlashやSilverlightといったテクノロジを用いる最大の理由は、マルチメディアコンテンツの再生にあると言ってもよいだろう。HTML5で
こんなことまで。HTML5による動画チャットや通話を可能にする·sipML5 MOONGIFT
sipML5はHTML5で実装されたSIPクライアントです。 インターネット電話というとSkypeやLINEが有名ですが、IP電話もまたインターネットを使った電話システムです。そこで使われているSIPをHTML5でサポートしたのがsipML5です。 コネクトしました。 が、対話しようとしてもできませんでした…。 利用に際してはMediaStream（WebRTC）を有効にする必要があります。 デモ動画（iPadで会話する図） デモ動画（Androidで会話する図） sipML5は任意のSIPサーバに接続し、動画や音声通話が楽しめるようになります。これまで同様の機能を実現するにはFlashの力を使わざるを得なかったのですが…すごい時代になったものです。 sipML5はHTML5/JavaScript製、GPL v3のオープンソース・ソフトウェアです。 MOONGIFTはこう見る sipML5
リッチなHTML5コンテンツのためのフレームワーク「CreateJS」が公式サイトを公開 | ClockMaker Blog
Flashのエンジニアとして著名なGrant Skinner氏が開発している、「CreateJS」の公式サイトがオープンしました。 http://www.createjs.com/ CreateJSはHTML5を介してリッチなインタラクティブコンテンツの制作をサポートする、JavaScriptライブラリとツールのスイートです。CreateJS SuiteにはEaselJS、TweenJS、SoundJS、PreloadJS、とZoeのツールがあります。 私のブログでもEaselJS、TweenJSを使ったインタラクティブコンテンツのデモを幾つか制作して紹介してきましたが、Flashで培われた技術がそのまま利用できる点で非常に使い勝手のいいツール群だと思っています。 EaselJSとTweenJSでテキストエフェクト EaselJSを使った流体パーティクル入門 今回は公式サイトで明らかになっ
フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル:phpspot開発日誌
Fullscreen Image Blur Effect with HTML5 | Codrops フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプルが公開されています。 画像切替の際のぼかしアニメーションがなかなかいい感じです。サンプルをダウンロードできるので写真を置き換えればそれっぽく利用することができそうです FlashかHTML5なんていう話にもなったりしますが、画面のデザインがある程度CSSででき、画像の指定もHTMLでかけちゃうっていうのはデベロッパー側としては嬉しい場面も多そうですね 関連エントリ HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 HTML5のブラウザ対応状況がサクッと分かる「HTML5 Please」 HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 Flash使って
Home
Just make cool sh** stuff. Current Stack – Back to basics. Going “build–step free” for a handcrafted experience. Feb 23 2024 @joshua Yearning for a simpler time – the artisanal web. Websites are too BIG, too complicated, and too hard. Reactive programing is conceptually easy to grasp – but the distance between the end result vs. frameworks & tooling is too far apart. I get it, the web is a compl
見落としがちなHTML5で変更された要素いろいろ
2013年3月23日 HTML, Webサイト制作 HTML5を勉強していて、section, nav, header, footerなどの新しく追加された要素について説明している記事はよく見かけるのですが、HTML5で変更された要素について触れている記事が少ないように感じたので、よく使うものを中心にちょっとまとめてみます。既存のWebサイトをHTML5化する時は、コンテンツ内に変更された・または廃止された要素がないか確認することも大切ですね！ ↑私が10年以上利用している会計ソフト！ HTML5の基本はここからお勉強！ 「ところでHTML5ってなに？」という方は、まずは以下の記事を読んでみてください。このようにHTML5の基本について解説している記事はたくさんあるので、詳しい説明は今回は端折らせて頂きます。変更点のみに焦点を当てますよ！ Webの3つの問題を解決する「HTML5」とは何な
WebブラウザごとのHTML5対応状況を調べる·haz MOONGIFT
hazはWebブラウザごとのHTML5/CSS3対応状況を表示するWebユーティリティ。 hazはHTML5製のフリーウェア（ソースコードは公開されている）。HTML5の登場によって、Webの標準化が進みこれまでにあったようなWebブラウザごとの方言や互換性維持の手間が減る。そう思われているが実際にはそう簡単ではない。 Google Chrome Webブラウザによって実装状況は異なるのが現状であり、サポートされている機能やCSS3のプロパティも異なる。そうしたWebブラウザごとの違いを確認できるWebサイトがhazだ。 hazはHTML5/CSS3のプロパティ、API、入力フィールドの種類について対応しているかどうかを調べて結果を出してくれる。左側に調査項目が出て、そのサポート状況が右側に出る。YESと出ていれば問題なしで、MAYBEだと怪しい。NOは対応していない。各項目をクリックする
[JS]一行追加するだけで、IE6/7/8でもHTML5のvideoとaudioを利用できる -html5media
HTML5のvideo要素やaudio要素をサポートしていないメジャーブラウザでもたった一行、ページに追加するだけでこれらを利用できるようにするスクリプトを紹介します。 html5media デモページ [ad#ad-2] html5mediaの実装 html5mediaの利用方法は簡単です。 ページに追加する一行 下記をページのhead内に記述します。 <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script> これだけで、すべてのメジャーブラウザでHTML5のvideoとaudioを利用できるようになります。 video, audioに非対応のIE7でも期待通りに動画が再生されます。 IE6(IE Tester)でのキャプチャ 参考：video, audioのサポート状況 video, audio
JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」:phpspot開発日誌
html2canvas - screenshots with JavaScript JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」 サーバサイドでブラウザを動かしてスクリーンショットを取るというより、利用者のブラウザ上でスクリーンショットをJavaScriptとcanvasを使って生成しちゃおうというものらしいです。 canvas非搭載ブラウザはflashcanvasやExplorerCanvas等の代替が必要とのこと。 html2canvasでレンダリングされたサンプルも見ることが出来ます。 frameやobjectのサポートはしていない点に注意。 スクリーンショットを取る仕組みをサーバに仕込むとタイムラグがあったりサーバ側は大変だったりで色々問題点を抱えていますが、クライアント側でやれば画像を受け取るだけでいいので便利です。 クライアントごとの表示
東京てら子 Vol.16 発表資料「HTML5 アニメーション入門」 | ClockMaker Blog
なかなか時間がとれず遅くなりましたが、2011 年 6 月 25 日に開催した 東京てら子Vol.16 『ドキッ、JavaScriptだらけの240分』 のフォローアップとして「HTML5 アニメーション入門」のスライドとサンプルをシェアします。 スライド資料(PDF) HTML5でアニメーションを実装する方法について、大きく3つの方法にわけ、それらのメリット・デメリットと対応可能な環境について紹介しています。 資料の補足 HTML5だと最適なアニメーションの方法として3つの方法が必要がありますが、IE6-8系とモダンブラウザ、スマートフォンで実装方法を切り替えなくてはならないのがデメリットです。それに対してFlash PlayerはIE6-8/モダンブラウザ/Androidと幅広くブラウザ・デバイスをサポートしていて、それらのブラウザ・デバイスで挙動の違いがほとんどありません。 iOS(
HTML5 APIで何ができるようになるかを学ぶ -HTML5逆引きリファレンス
HTML5には、Canvasをはじめ、Drag&DroppやAudio&VideoやGeoloacationなど数多くのAPIが用意されています。 これらのAPIは策定中のものも多く、仕様が確定していませんが、現在利用できるAPIの機能を逆引きでまとめた実用的な解説書を紹介します。 [ad#ad-2] ウェブサイトやウェブアプリケーションにHTML5 APIをすぐに利用したい、また近い将来利用したい、そんな人に役立つ一冊となっています。 また、逆引きの形式で使用頻度の高いサンプルが数多く掲載されているので、何ができるんだろう？？ という人にもビジュアル的に把握できるものとなっています。 HTML5逆引きリファレンスでとりあげているAPI 書籍の中で取り上げているAPIです。 それぞれのAPIごとに、実用的なサンプルコードが逆引きの形式で掲載されており、コードは専用サイトからダウンロードして
FirefoxでHTML5のデスクトップ通知を利用する·FF html5notifications MOONGIFT
FF html5notificationsはFirefoxが未対応のHTML5によるデスクトップ通知を使えるようにするFirefoxアドオン。 FF html5notificationsはFirefox用のオープンソース・ソフトウェア。HTML5の新機能の一つがデスクトップ通知だ。Gmailで実装されており、Google ChromeでGmailを開いておけばメールが来た時にデスクトップ上に通知が表示される。通知は色々なソフトウェアで使われているので、Webアプリケーションでも使えるのは便利だ。 Mac OSXの場合はGrowlを経由 HTML5の実装状況はWebブラウザによって異なる。Google Chromeでは使えるこの通知機能も、Firefoxでは利用できない。それを克服するアドオンがFF html5notificationsだ。 FF html5notificationsはFir
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
re-dzine.net situs togel online toto 2023 -
Loading...
Webの開発側にいる人間でFlash死ね！HTML5最高!と言っている人は正直どうかと思う。
IDEA * IDEA
Ext Japan - Sencha Touch登場 - モバイル用HTML5フレームワーク