オフラインWebアプリを実現するDropboxの新API「Datastore API」。Dropboxは実質的にBaaS市場へ参入した Webアプリケーションをオフラインの状態でも利用できるようにするには、オフラインのときに保存したデータを、ネットワークと接続したときにサーバと同期してくれるAPIが必要です。 しかし、データ同期のプログラムを作るのは非常に面倒です。データの差分だけを取り出して同期するアルゴリズムをどうするか、同期の途中でネットワークが切れたらどうするのか、同期待ちのデータが複数のデバイスに分散されていたら、どれを同期後に上書きするのか、などを解決しなければなりません。 Dropboxが発表した新API「Datastore API」は、オフラインに対応し、データを自動的に同期してくれる機能を備えています。オフラインWebアプリケーション普及のための道具が揃いつつあるのです。
21 Ridiculously Impressive HTML5 Canvas Experiments | Nettuts これは見ておくべきHTML5のCanvasを使った実験集。 ここまで出来るの？っていうサンプルが満載で一度は見ておきたいものばかりです。 8 Bit Color Cycle Particle Letter Animation Particle System Strange Attractors Liquid Particles Fake Floor Reflections 次世代のWEBが楽しみです。 関連エントリ HTML5で動画や音声再生を可能にするライブラリ集 HTML5ベースのTODOリスト「5List」 CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」 CSSでスキン作成が可能なHTML5動画プレイヤー実
デブサミ2010のhtml5セッションで見たデモ（Movement tracker）*1 が、 衝撃的だったので video x canvas をちょっと勉強した。 １．videoの任意のフレームをそのままcanvasに描画させてみる htmlのbodyに書くにはこれだけ。 <video id="v" src="video.ogv" autobuffer controls></video> <canvas id="c"></canvas> <input type="button" value="copy frame" /> copy frameボタンで呼び出されるjavascriptはこんな感じ。 function copyFrame() { var cEle = document.getElementById('c'); var cCtx =
2013年2月18日、第36回のHTML5とか勉強会はサイバーエージェントさんに会場をお借りして開催しました。 今回は「2013年、Web開発の進化を探る」をテーマに、Web標準の進化、「オフライン・ファースト」というコンセプトによるアプリ開発の進化、HTML5の現状における使われ方とこれからの使い方について講演いただきました。 本稿では、HTML5とか勉強会スタッフの本間がその内容についてレポートします。 勧告候補になったHTML5.0の仕様についてと、HTML5.1の始まり はじめにW3C（World Wide Web Consortium）のMichael Smithさんより、HTML5.1で追加されるAPIの中からNavigationControllerとtemplateを中心に講演いただきました。 appcache オフラインWebアプリケーション用のAPIとしてHTML5.0
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
HTML5で2次元のインタラクティブコンテンツを制作するには、さまざまなJavaScriptライブラリがあります。どれを選択するべきか迷いどころではないでしょうか？ そこで今回はHTML5の各種JavaScriptライブラリについて、パフォーマンスを比較検証してみました。 今回検証したフレームワーク メジャーなJavaScirptライブラリとして次の5種類でテストしました。バージョンは2013年4月10日現在の最新版を使っています。詳しい検証方法は記事の後半にまとめています。 CreateJS (EaselJS 0.6.0) Arctic.js (v0.1.11) enchant.js (v0.6.3-48) Pixi.js (v1.0.0) Processing.js (v1.4.1) 各種JavaScirptライブラリのベンチマーク結果 ※グラフの数値が高いほどパフォーマンスが高いこと
HTML5でiPhone用Webアプリをオフライン対応に：iPhoneで動かす業務用Webアプリ開発入門（5）（1/2 ページ） モバイルWebアプリはオフライン対応が必須！ いよいよ最終回の今回は、「Application Cache（アプリケーションキャッシュ）」を使います。 HTML5で導入されたアプリケーションキャッシュを使うと、WebアプリをWebブラウザのキャッシュに載せてオフラインで利用できるようになります。特に、前回の「HTML5のlocalStorageでiPhone用Webアプリを高速化」で紹介したHTML5の「localStorage」と組み合わせると、一度ダウンロードしたデータについては完全にオフラインでアプリが動作するようになります。 オフラインでの利用に対応して、3G回線など接続が安定しない環境でも業務用Webアプリが快適に使えるようにしてみましょう。 「キャッ
最近のJavascript関係ではWebSocketとWebWorkerが気になってたんだけど、 WebSocketの方はnode.jsとかJettyとか？サーバ側にも仕掛けが必要なので、 手っ取り早くできる方ってことで、今更ながらWebWorkerを試してみた。 試してみたかったことは次の点。 基本的な使い方 jQueryとかのライブラリが使えるか オレオレクラスが使えるか とりあえずこれらに絞ってお試し。 基本的な使い方 インスタンスを生成して、メッセージでやりとりする。 まず、こんな感じのHTMLを用意して。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/
HTML5/JavaScriptで作成したアプリケーションをラップし、ネイティブアプリケーションとして扱える「ハイブリッドアプリケーション」は、高い生産性でモバイルアプリケーションを開発できるといったメリットから注目されています。 しかし実際に自分でハイブリッドアプリケーションを開発しようとすると、例えばiOS用ならMacOSのマシンを用意してPhoneGapの環境を整え、ビルドしたアプリケーションをいちいちiPadやiPhoneに転送して試すなど、それなりの手間がかかります。Publickeyでは以前からハイブリッドアプリケーションに注目して紹介してきたため、時間があれば自分でもHTML5とJavaScriptで作ったアプリケーションをハイブリッド化しみてみようと思いつつ、なかなか開発環境を整備するに至りませんでした。 そこで思い出したのが「Monaca」です。Webブラウザ上でHTML
Sencha Touchの開発チームがHTML5で高速に動作するFacebookアプリを開発したことを紹介した1つ前の記事 「Facebookのモバイルアプリが失敗した理由はHTML5のせいじゃない。HTML5でサクサク動くFacebookアプリを作って見せたSencha Touch開発チーム」は、非常に多くの読者に注目されました。 この記事で紹介したSencha Touch開発チームのブログ「The Making of Fastbook: An HTML5 Love Story」の後半では、どのようなテクニックを用いて高速なHTML5アプリケーションを実現したのかも紹介されています。 この記事では、その3つのテクニックについてポイントを紹介したいと思います。タイムラインやニュースフィードのようなユーザーインターフェイスを備えたモバイルアプリケーションは、これから広く開発されていくことにな
AndroidプログラミングのTOPへ 重要なお知らせ： この記事で公開した情報は，AndroidのMVCフレームワーク「Android-MVC」の機能の一部として取り込まれました。 より正確な設計情報や，動作可能な全ソースコードを閲覧したい場合，「Android-MVC」の公式ページより技術情報を参照してください。 AndroidのMVCフレームワーク - 「Android-MVC」 http://code.google.com/p/android-mvc-... jQuery Mobileは， スマホ向けの動的UIを，JavaScriptを書かずに作成できるツール。 HTML5を書くだけで，動きのある画面がコーディングできる。 極めて恐るべきUI構築能力を持っているので，「UIのためのDSL（ドメイン特化言語）」と呼んでもいいぐらいだ。 このライブラリは，Webサイトの画面だけでなく，
もちろん、すべてHTML5を中心とする標準技術であるため、JavaScriptを通じてそれぞれを組み合わせて利用できます。 注目されるGraphicalWeb こうした新しいWebのグラフィックス技術の拡大もあり、2012年にはThe Graphical Webというカンファレンスがスイス開催されました。 The Graphical Web2012のWebサイト 実はこのカンファレンス、2002年から10年以上も続いているカンファレンスで、2011年まではSVG Openという名前で開催されていました（ちなみに、2007年には日本で開催されました）。しかし、2012年からカンファレンス内で扱う技術はSVGのみにとどまらず、HTML5 media、CSS3 Animations、2D Canvas、WebGLなどの技術も取り上げることとなり、こうした技術の総称としてカンファレンスのタイト
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
WCF WebSockets で WebSocket クライアントが提供されていることを今さら知りました。WebSocket サーバーが提供されていることは前から知っていたんですけどね。ここのところずっと Ruby や JavaScript でばかり遊んでいたので、.NET の情報にだいぶ疎くなっていました。 ちょうど WebSocket について調べていたので、せっかくだし WCF WebSockets 試してみましょうかね。お題は、WebSocket のサンプルとしては定番の、なんちゃってチャットアプリで。久しぶりに C# を書く気がする。 WCF WebSockets は下記のサイトから入手できます。 HTML5Labs - Download インストールしたら、いざスタート。 まずは、サーバーから作成します。Visual Studio 2010 でコンソールプロジェクトを作成して、
開発者泣かせの問題児ブラウザ、Internet Explorerですが、IE5.5、IE6、IE7、IE8をモダンブラウザの挙動にする神JSがGoogle Codeで配布されていました。 とりま、 attripのデザイン崩れはこれで解決できました！ 使い方は簡単！下記のコードを貼り付ければOK！ まじ仏。 「IE9.js」は、IEを普通のモダンブラウザの挙動にするJSです。IE5、IE6でも透過PNGが使えるようになります。 「css3-mediaqueries.js」は、IEでCSS3 Media Queriesを使えるようにするJS。レスポンシブデザインのサイトをIEでも見れるようにします。 ちなみに、border-radiusや、box-shadow はできませんでした。 あと、IEでの見え方をチェックする方法はこちら↓↓ IE9環境でIE6/IE7/IE8/IE9表示する方法(共存
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く