HTML5+jQueryのドラッグ&ドロップに対応したアップローダー・droparea
Gmailライクにローカル環境からブラウザに ドラッグ&ドロップで画像をアップロード可能 にするHTML5+jQuery製のアップローダー droparea。今後、こうしてキーボードを使う 頻度が減っていくんですかね・・HTML5の 出現で一気に加速した印象ですね。 jQuery HTML5 UploaderやjQuery File Uploadの後発に当たりますね。 イメージアップローダーです。Gmailライクにドラッグ&ドロップでアップロード出来ます。 コードs = { 'init': m.init, 'start': m.start, 'complete': m.complete, 'instructions': 'drop an image file here', 'over' : 'drop file here!', 'nosupport' : 'No support for t
HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。:phpspot開発日誌
HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 2011年05月26日- DESKTOPIFY Aquaron HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 このライブラリを使うことで簡単にjquery風の記法でデスクトップ通知が出来るようです 試しに、入力して送信してみると。 という具合にChromeだと表示されます。 通知していいかどうかも聞かれるのでそこを一度許可すれば、便利な通知として使えます。 LightBox的通知もいいですが、わかりやすさでいえばこちらもいいですね。 関連エントリ JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 ブラウザに分かりやすい通知を送れるスクリプト色々 利用者に対し非常に分か
WWW.AKIRAFUKUOKA.COM BLOG | 今VJするならブラウザででしょ！ HTML5でVJアプリ「Fi-VJ」を制作しました
HTML5ならのVJアプリだって作れるはず！で、作りました Fi-VJ ver1.02 デモページはこちら ファイルダウンロードはこちら (ver1.02) DLしたら@akirafukuokaに声をかけていただけると嬉しいです!! Fi-VJ(ファイブイジェイ)というVJアプリを極々個人的に制作しました。MacのネイティブアプリでもなければiPhone/iPadアプリでもありません。ブラウザで動くHTML5-VJアプリです。確認済み動作環境はMac版Safari 5.0.5だけです。他のブラウザでは確認してません（デモページはSafariとChromeで動くようですが）。というかローカル実行ではSafari以外ではまず動きません。これに関する解説は後ほど。 ここ数年ビデオミキサーにiPhoneやiPodを繋いでプレイしていた私ですが、そろそろPCを使ったVJに戻ろうかと思ったのがちょうど
もしもフロントエンジニアがSVG女子をイジったら。音声認識やfpsコントローラなど本気だしすぎな件
SVG女子が公開されて2週間がたちました たいへん多くの方に視聴していただいているようで、感激しています！ 「SVG」がすっかりバズワードになっていますね。 まだの方はぜひご覧ください！ SVG女子を見る SVG女子にはユーザーが自由にイジってオリジナル作品を作れるモードがあります。 いわゆる「神モード」というやつです。 この「神モード」に公開直後から多くの作品が集まっています。（嬉しい！） SVGはJavaScriptから操作できることが特徴です。 色を変えることはもちろん、オブジェクトを変形させたり 再生速度を変えることもJavaScriptからできてしまうんですね。 このSVG女子がすごい！今見ておくべきフロントエンジニアの本気！ セピアカラー カラフルなSVG女子の世界がセピア色になってます。 再生する（SVG女子のページに飛びます） コードを見る SVG女子の消失 アイちゃんが消
「enchant.js」でゲームを作ろう！ HTML5とJavaScriptによるアクションゲーム制作入門
「enchant.js」でゲームを作ろう！ HTML5とJavaScriptによるアクションゲーム制作入門 ライター：Veki HTML5でゲームが作れるライブラリ「enchant.js」がユビキタスエンターテインメントから発表されました。Webブラウザだけでスプライトを使ったゲームが動くとのことで興味を持った人も多いのではないかと思います。ここではenchant.jsを使ったゲーム作りについて見ていきたいと思います。 enchant.jsがサポートしているHTML5は，長らく使われていたHTML4に代わる次世代Webシステムの要となるものです。HTML5ではWebページの動的な要素，とくにグラフィックスの描画機能などが大幅に強化されており，これまでFlashを使わないとできなかったようなことが，HTMLとJavaScriptだけでできるというのが最大の特徴となっています。 ここにきてIn
[JS]Canvas, SVGを使用した軽量のJavaScriptの3Dエンジン -three.js
通常、複雑な記述をより簡単にできるようにした、3Dを描画する軽量のスクリプトを紹介します。 サイトでは下記のように数多くのデモが楽しめます。 three.js -Javascript 3D Engine [ad#ad-2] three.jsは<canvas>, <svg>とWebGLを使って、2Dと3Dをレンダリングすることができます。 各デモは対応ブラウザ（Firefox4+, Chrome9+, Safari10.6+など）でご覧ください。
メイキング「NERV極秘資料 - 電力使用状況」こと技術解説 - 甘味志向＠はてな
NERV極秘資料 - 電力使用状況 先日、東京電力の電力使用状況をエヴァンゲリオン風デザインで表示するWebサイトを作ったものが、あちこちで反響を頂きました。 ねとらぼ：「NERV専用監視装置」で東電の電力状況をチェック エヴァ風サイト登場 - ITmedia NEWS NERVの一員になったつもりで節電！ エヴァ風電力使用状況メーター | ギズモード・ジャパン Twitterでは16000以上ツイート頂けたようです。 http://topsy.com/kanmisikou.net/lab/power/ こちらの、はてなブックマーク週間ランキングでもIT・コンピュータカテゴリ2位を頂きました。ありがとうございます。 http://b.hatena.ne.jp/ranking/weekly/20110321/it これだけの反響を頂きましたし、せっかくなのでWebアプリを作る工程を解説します
デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」:phpspot開発日誌
デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」 2011年03月22日- jQuery File Upload Demo デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」 ファイルアップロード用のプラグインはよくありますが、このプラグインでは、デスクトップにあるファイルをブラウザにそのままドラッグ＆ドロップでファイルアップロードが完結します。 ダイアログからいちいちファイルを選択して、というUIは使いづらいですが、これなら直感的に、初心者でも簡単にファイルをアップロードすることが可能になります。 尚、Firefox、Chromeで動作。IEでは動きませんでした。 デスクトップからファイルをドラッグすると枠がニュイーンと広まって、ドロッ
モダンJavaScriptを無理なく学べる5冊+3
この5冊で一通り学べます。 最近のJavaScriptが書きたいなあ、と思ったときに、キーとなるのは・・・。jQuery、クロージャ、無名関数、HTML5、スマートフォン対応！？ それらを「わかりやすく」学べる、という視点で選んだ5冊。そもそもJavaScriptって何？という方は、まず以下の記事から。 JavaScript講座 [Smart] ＞＞書き方、構文、演算子・・・。基礎を学べます。 「目指せ！ウェブマスター」JavaScript講座 ＞＞サンプルたくさん！ ハタさんのブログ(復刻版) : javascriptを初めて学ぶ人についてのおさらい。その１ ＞＞今風の書き方の基礎
Flash?いいえ、HTML5です: ファイルのドラッグ&ドロップによるフォトアップロード機能について - mixi engineer blog
はじめまして。コミュニケーションサービス開発部の澤と申します。コーヒーとカレーをこよなく愛する新卒2年目の新米エンジニアで、弊社Webのフロントエンドを主に担当しています。最近はmixiスマートフォン版(mixi Touch)の開発にも精力的に取り組んでいます。 さて、本日はPC版のmixiで1つの機能をリリースいたしました。ファイルをWebブラウザにドラッグ&ドロップするだけで写真をmixiフォトにアップロードできるもので、HTML5 File API※1を採用しています。本記事ではこの機能について色々とお話をしたいと思います。 なにこれ? 以下では、ドラッグ&ドロップによるアップロード機能を「本機能」と呼びます。 百聞は一見にしかずです。本機能のプロモーションムービーがありますので、まずはこちらをご覧ください。 動画では下記を説明しています。 従来のアップロード方法からドラッグ&ドロッ
「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる － Publickey
このところHTML5関連のモバイルアプリケーション開発について調べていて、先週の水曜日にはSwapSkills主催のイベント「jQueryモバイルで簡単！ スマートフォンサイト作成」に参加してjQuery Mobileについて勉強してきました。 jQuery Mobileとは、jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。そしてその驚異的なまでの簡単さは、これから業務用のモバイルアプリケーションの作り方を一変させてしまう可能性を感じさせます。 jQuery Mobileの大きな特徴は次の3つです。 1）HTMLを書くだけでモバイルアプリケーションができてしまう 2）モバイルのユーザーインターフェイス対応の部品が多く揃っている 3）iOS、Android、WebOS、Windows Moblie、Symbianなどクロスプラットフォーム対応である 具体的な
innerHTML = "" まとめ - latest log
HTML5をサポートしていないIE6〜IE8で、node.innerHTML = " ..."; のように HTML5 で追加された新要素含んだ文字列を innerHTML に与えると、次のいずれかの条件が成立した場合に親子関係の崩れたサブツリーを生成してしまいます。 innerHTML の前に document.createElement() が実行されていない node が DOM Tree に参加していない(オンザフライ) これらを回避するには、IE6〜IE8で以下のようします。 document.createElement("section"); // HTML5 Shiv function build(fragment) { // @param HTMLDocumentFragmentString: "<nav>...</nav>" // @return DocumentFrag
【レポート】HTML5の自動再生機能を廃止すべきでない理由 - Operaエバンジェリスト | エンタープライズ | マイコミジャーナル
Opera’s newest Web browser introduces a new technology platform. 標準規約には可能だからといって多くの機能を盛り込めばよいというものではない。また、仮にある面で便利だったとしても、それがもたらす弊害の方が大きい場合には、標準規約として適切とはいえないこともある。ケースバイケースでの判断になるが、標準規約として判断する場合には多方面からその機能がもたらす効果を検討しなければならない。 そうした議論で槍玉に上がりがちな機能のひとつに、HTML5のVideoやAudioで指定できる"autoplay"属性がある。名前の通り自動的に再生を開始するための指定だ。たしかに、自動的に動画や音声を流したい場合、この指定は便利といえる。しかし、不必要にこの属性を使われれば、煩雑で面倒、とても厄介なページが制作されることは想像に難しくない。規約と
node.jsとWebSocketを使ってアクセスログをリアルタイムにビジュアル化·maptail.js MOONGIFT
maptail.jsはアクセスログをリアルタイムに地図上へマッピングするソフトウェア。 maptail.jsはJavaScript/node.js製のオープンソース・ソフトウェア。node.jsに注目が集まっている。様々なソフトウェアが日々開発されていて、そのどれもが新しい技術を積極的に取り入れている。例えばHTML5だ。 こんなに奇麗に HTML5を使えばどんなことができるのか、それは実際にできあがったものを見てみるのが一番分かりやすいはずだ。その例として紹介したいのがmaptail.jsになる。MapとTailを組み合わせたこのソフトウェアはnode.js/HTML5を知る上できっと面白いはずだ。 maptail.jsを起動する時には何らかのログファイル（通常はアクセスログ）を指定して実行する。そうするとアクセスログをリアルタイムに解析し、IPアドレスから位置情報を取得して地図上にマッ
JavaScriptとHTML5 Canvasを使って顔認識するコードがすごい:phpspot開発日誌
Badass JavaScript - Face Detection in JavaScript via HTML5 Canvas JavaScriptとHTML5 Canvasを使って顔認識するコードがすごいです。 ccv.jsとface.jsというファイルがGitHub上で公開されていて、認識自体をJavaScriptでやってしまっているようです。 JavaScriptが高速化するにつれ、WEBはもっと高速に、サーバにも優しくなっていく流れになっていきそうですね。 GitHubでは２つのJSと１枚のHTML、１つのPHPコードが配布されています。 ccv.jsがコアで、face.jsは定義ファイルっぽいです。 画像を外部から呼び出すためのプロクシ用にphpを使っていますがphpでOpenCVを使ったりはしていないようです。 関連エントリ PHPでOpenCVなしのピュアPHPで顔認識す
HTML5のscript要素でasync, deferを使ってパフォーマンスアップ - IT-Walker on hatena
http://code.google.com/speed/articles/html5-performance.html JavaScriptの高速化手法を紹介する、Googleのプロジェクト「speed」がリニューアルしたと言うので見てたら、「HTML5でパフォーマンスアップ」てなタイトルがあったので「なぬ？」と思って読んでみました。 HTML5使ってもそんな効力得られないだろう・・・と思って読んでみたら、「HTML5の記法を使えばnバイト節約」みたいなチョコザイな手法が主だったのでちょっと苦笑(^^; とはいえ、script要素に今度から加わるasync属性について等は、日本語で説明されている記事がほとんどないので、全体的に要約しておきます（あくまで翻訳ではなくて要約。時間がないので超適当です。正確なところは原文を読んでください）。 DTD HTML4までは以下のように書かなきゃいけな
Indexed Database API について
Indexed Database API（以下、indexedDB）について、これまで追いかけてきた情報をとりまとめたので公開します。 indexedDBは当初は仕様が固まっておらず、サンプルコードも当然のように動かなかったので（今も動きませんが…）、検証するにはかなりハードな状況でした。最近になってどうにか動くようになってきたので、@komasshu さんと色々やり取りしながら一通りの動作を確認しました。 現時点で利用できるブラウザは Chrome 9 以降 または Firefox 4 beta 8 以降となります。まだまだ仕様は動いていますので、検証の際は、なるべく最新の開発版を使うことをおすすめします。本エントリーでは、Chrome 9 beta 、Firefox 4 beta 8 にて検証します。また、資料は、2011年1月20日時点の W3C Editor's Draft を参照
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
「スマートフォン版GREE HTML5+JavaScript & Android」講演資料公開いたしました | GREE Engineering
